From 9652d5c032f6b7ea942ed78b021e150f47ebcb57 Mon Sep 17 00:00:00 2001 From: qianbao Date: Sat, 11 Feb 2023 12:11:36 +0800 Subject: [PATCH] 1、添加表格拖拽排序功能，添加动态图层 2、添加动态排名组件 3、SVG组件 4、添加排名轮播表 5、添加浮动边框（待完善） 6、添加自定义参数，动态数据源参数自定义 7、自定义参数、数据集返回值类型 添加分组区分 8、添加数字翻牌 9、添加数字翻牌【数字可设置边框、设置标题，标题可设置上下左右】（待完善） 10、视频播放器添加是否静音属性，默认循环播放。 --- config/dev.env.js | 4 ++-- config/index.js | 4 +++- index.html | 2 +- src/assets/images/index-bg/index1.jpg | Bin 132462 -> 0 bytes src/assets/images/index-bg/index2.jpg | Bin 762986 -> 0 bytes src/assets/images/index-bg/index3.jpg | Bin 332877 -> 0 bytes src/assets/images/index-bg/index4.jpg | Bin 287012 -> 0 bytes src/assets/styles/animate.css | 2391 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/assets/styles/animate.min.css | 1 + src/main.js | 1 + src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue | 36 ++++++++++++++++++++++++++++++++---- src/views/bigscreenDesigner/designer/components/dynamicComponents.vue | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- src/views/bigscreenDesigner/designer/components/dynamicForm.vue | 13 ++++++++++--- src/views/bigscreenDesigner/designer/index.vue | 21 +++++++++++++++------ src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js | 1 - src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box-float.js | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js | 2 +- src/views/bigscreenDesigner/designer/tools/configure/div/widget-image.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/div/widget-slider.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/div/widget-svg.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js | 5 ----- src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js | 4 ++-- src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js | 300 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js | 6 +++--- src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js | 191 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js | 305 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js | 97 ------------------------------------------------------------------------------------------------- src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/tools/main.js | 16 +++++++++++----- src/views/bigscreenDesigner/designer/widget/div/widgetBorderBoxFloat.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue | 2 ++ src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/temp.vue | 15 ++++++++++----- src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue | 13 ++++++++++++- src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue | 225 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue | 148 ---------------------------------------------------------------------------------------------------------------------------------------------------- src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue | 257 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue | 84 ------------------------------------------------------------------------------------ src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/widget.vue | 15 ++++++++++----- src/views/home/index.vue | 14 +++++++------- src/views/layout/components/Sidebar/index.vue | 2 +- src/views/login.vue | 2 +- 56 files changed, 4700 insertions(+), 1207 deletions(-) delete mode 100644 src/assets/images/index-bg/index1.jpg delete mode 100644 src/assets/images/index-bg/index2.jpg delete mode 100644 src/assets/images/index-bg/index3.jpg delete mode 100644 src/assets/images/index-bg/index4.jpg create mode 100644 src/assets/styles/animate.css create mode 100644 src/assets/styles/animate.min.css create mode 100644 src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box-float.js create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/div/widget-svg.js create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js delete mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js delete mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js delete mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js create mode 100644 src/views/bigscreenDesigner/designer/widget/div/widgetBorderBoxFloat.vue create mode 100644 src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue create mode 100644 src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue create mode 100644 src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue create mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue delete mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue delete mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue delete mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue create mode 100644 src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue diff --git a/config/dev.env.js b/config/dev.env.js index b2e303f..7012dc2 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -4,6 +4,6 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', - BASE_API: '"http://127.0.0.1:8080/xlyReport"', - API_WS: '"ws://127.0.0.1:8080/api/websocket"' + BASE_API: '"http://weberp.xlyprint.cn:8080/xlyReport"', + //API_WS: '"ws://127.0.0.1:8080/api/websocket"' }) diff --git a/config/index.js b/config/index.js index 8ad714b..a8c73c7 100644 --- a/config/index.js +++ b/config/index.js @@ -1,5 +1,5 @@ 'use strict' -// Template version: 1.2.6 +// Template version: 1.2.6 npm run build:dev // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') @@ -7,6 +7,7 @@ const path = require('path') module.exports = { dev: { // Paths + //assetsSubDirectory: 'BI/static',//正式打包 因为nginx转发原因，需要指定路径 使用这个 assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, @@ -48,6 +49,7 @@ module.exports = { // Paths assetsRoot: path.resolve(__dirname, '../dist'), + //assetsSubDirectory: 'BI/static', //正式打包 因为nginx转发原因，需要指定路径 assetsSubDirectory: 'static', /** diff --git a/index.html b/index.html index e2b06bf..39093d7 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - 上海小羚羊大屏报表系统 + 上海小羚羊数据可视化平台 diff --git a/src/assets/images/index-bg/index1.jpg b/src/assets/images/index-bg/index1.jpg deleted file mode 100644 index 47d9e0c..0000000 Binary files a/src/assets/images/index-bg/index1.jpg and /dev/null differ diff --git a/src/assets/images/index-bg/index2.jpg b/src/assets/images/index-bg/index2.jpg deleted file mode 100644 index d4d1347..0000000 Binary files a/src/assets/images/index-bg/index2.jpg and /dev/null differ diff --git a/src/assets/images/index-bg/index3.jpg b/src/assets/images/index-bg/index3.jpg deleted file mode 100644 index eb2d453..0000000 Binary files a/src/assets/images/index-bg/index3.jpg and /dev/null differ diff --git a/src/assets/images/index-bg/index4.jpg b/src/assets/images/index-bg/index4.jpg deleted file mode 100644 index 987f465..0000000 Binary files a/src/assets/images/index-bg/index4.jpg and /dev/null differ diff --git a/src/assets/styles/animate.css b/src/assets/styles/animate.css new file mode 100644 index 0000000..2a61d23 --- /dev/null +++ b/src/assets/styles/animate.css @@ -0,0 +1,2391 @@ +/*动画库*/ +/*内置时间*/ +.a-time003 { + animation-duration: 0.3s; + -webkit-animation-duration: 0.3s; +} +.a-time005 { + animation-duration: 0.5s; + -webkit-animation-duration: 0.5s; +} +.a-time007 { + animation-duration: 0.7s; + -webkit-animation-duration: 0.7s; +} +.a-time009 { + animation-duration: 0.9s; + -webkit-animation-duration: 0.9s; +} +.a-time1 { + animation-duration: 1s; + -webkit-animation-duration: 1s; +} +.a-time013 { + animation-duration: 1.3s; + -webkit-animation-duration: 1.3s; +} +.a-time015 { + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; +} +.a-time017 { + animation-duration: 1.7s; + -webkit-animation-duration: 1.7s; +} +.a-time019 { + animation-duration: 1.9s; + -webkit-animation-duration: 1.9s; +} +.a-time2 { + animation-duration: 2s; + -webkit-animation-duration: 2s; +} +.a-time023 { + animation-duration: 2.3s; + -webkit-animation-duration: 2.3s; +} +.a-time025 { + animation-duration: 2.5s; + -webkit-animation-duration: 2.5s; +} +.a-time027 { + animation-duration: 2.7s; + -webkit-animation-duration: 2.7s; +} +.a-time029 { + animation-duration: 2.9s; + -webkit-animation-duration: 2.9s; +} +.a-time3 { + animation-duration: 3s; + -webkit-animation-duration: 3s; +} +.a-time033 { + animation-duration: 3.3s; + -webkit-animation-duration: 3.3s; +} +.a-time035 { + animation-duration: 3.5s; + -webkit-animation-duration: 3.5s; +} +.a-time037 { + animation-duration: 3.7s; + -webkit-animation-duration: 3.7s; +} +.a-time039 { + animation-duration: 3.9s; + -webkit-animation-duration: 3.9s; +} +.a-time4 { + animation-duration: 4s; + -webkit-animation-duration: 4s; +} +.a-time043 { + animation-duration: 4.3s; + -webkit-animation-duration: 4.3s; +} +.a-time045 { + animation-duration: 4.5s; + -webkit-animation-duration: 4.5s; +} +.a-time047 { + animation-duration: 4.7s; + -webkit-animation-duration: 4.7s; +} +.a-time049 { + animation-duration: 4.9s; + -webkit-animation-duration: 4.9s; +} +.a-time5 { + animation-duration: 5s; + -webkit-animation-duration: 5s; +} +.a-time053 { + animation-duration: 5.3s; + -webkit-animation-duration: 5.3s; +} +.a-time055 { + animation-duration: 5.5s; + -webkit-animation-duration: 5.5s; +} +.a-time057 { + animation-duration: 5.7s; + -webkit-animation-duration: 5.7s; +} +.a-time059 { + animation-duration: 5.9s; + -webkit-animation-duration: 5.9s; +} +.a-time6 { + animation-duration: 6s; + -webkit-animation-duration: 6s; +} +.a-time063 { + animation-duration: 6.3s; + -webkit-animation-duration: 6.3s; +} +.a-time065 { + animation-duration: 6.5s; + -webkit-animation-duration: 6.5s; +} +.a-time067 { + animation-duration: 6.7s; + -webkit-animation-duration: 6.7s; +} +.a-time069 { + animation-duration: 6.9s; + -webkit-animation-duration: 6.9s; +} +.a-time7 { + animation-duration: 7s; + -webkit-animation-duration: 7s; +} +.a-time073 { + animation-duration: 7.3s; + -webkit-animation-duration: 7.3s; +} +.a-time075 { + animation-duration: 7.5s; + -webkit-animation-duration: 7.5s; +} +.a-time077 { + animation-duration: 7.7s; + -webkit-animation-duration: 7.7s; +} +.a-time079 { + animation-duration: 7.9s; + -webkit-animation-duration: 7.9s; +} +.a-time8 { + animation-duration: 8s; + -webkit-animation-duration: 8s; +} +.a-time083 { + animation-duration: 8.3s; + -webkit-animation-duration: 8.3s; +} +.a-time085 { + animation-duration: 8.5s; + -webkit-animation-duration: 8.5s; +} +.a-time087 { + animation-duration: 8.7s; + -webkit-animation-duration: 8.7s; +} +.a-time089 { + animation-duration: 8.9s; + -webkit-animation-duration: 8.9s; +} +.a-time9 { + animation-duration: 9s; + -webkit-animation-duration: 9s; +} +.a-time093 { + animation-duration: 9.3s; + -webkit-animation-duration: 9.3s; +} +.a-time095 { + animation-duration: 9.5s; + -webkit-animation-duration: 9.5s; +} +.a-time097 { + animation-duration: 9.7s; + -webkit-animation-duration: 9.7s; +} +.a-time099 { + animation-duration: 9.9s; + -webkit-animation-duration: 9.9s; +} +.a-time10 { + animation-duration: 10s; + -webkit-animation-duration: 10s; +} +.a-time103 { + animation-duration: 10.3s; + -webkit-animation-duration: 10.3s; +} +.a-time105 { + animation-duration: 10.5s; + -webkit-animation-duration: 10.5s; +} +.a-time107 { + animation-duration: 10.7s; + -webkit-animation-duration: 10.7s; +} +.a-time109 { + animation-duration: 10.9s; + -webkit-animation-duration: 10.9s; +} +.a-time11 { + animation-duration: 11s; + -webkit-animation-duration: 11s; +} +.a-time113 { + animation-duration: 11.3s; + -webkit-animation-duration: 11.3s; +} +.a-time115 { + animation-duration: 11.5s; + -webkit-animation-duration: 11.5s; +} +.a-time117 { + animation-duration: 11.7s; + -webkit-animation-duration: 11.7s; +} +.a-time119 { + animation-duration: 11.9s; + -webkit-animation-duration: 11.9s; +} +.a-time12 { + animation-duration: 12s; + -webkit-animation-duration: 12s; +} +.a-time123 { + animation-duration: 12.3s; + -webkit-animation-duration: 12.3s; +} +.a-time125 { + animation-duration: 12.5s; + -webkit-animation-duration: 12.5s; +} +.a-time127 { + animation-duration: 12.7s; + -webkit-animation-duration: 12.7s; +} +.a-time129 { + animation-duration: 12.9s; + -webkit-animation-duration: 12.9s; +} +.a-time13 { + animation-duration: 13s; + -webkit-animation-duration: 13s; +} +.a-time133 { + animation-duration: 13.3s; + -webkit-animation-duration: 13.3s; +} +.a-time135 { + animation-duration: 13.5s; + -webkit-animation-duration: 13.5s; +} +.a-time137 { + animation-duration: 13.7s; + -webkit-animation-duration: 13.7s; +} +.a-time139 { + animation-duration: 13.9s; + -webkit-animation-duration: 13.9s; +} +.a-time14 { + animation-duration: 14s; + -webkit-animation-duration: 14s; +} +.a-time143 { + animation-duration: 15.3s; + -webkit-animation-duration: 15.3s; +} +.a-time145 { + animation-duration: 15.5s; + -webkit-animation-duration: 15.5s; +} +.a-time147 { + animation-duration: 15.7s; + -webkit-animation-duration: 15.7s; +} +.a-time149 { + animation-duration: 15.9s; + -webkit-animation-duration: 15.9s; +} +.a-time15 { + animation-duration: 15s; + -webkit-animation-duration: 15s; +} +.a-time153 { + animation-duration: 15.3s; + -webkit-animation-duration: 15.3s; +} +.a-time155 { + animation-duration: 15.5s; + -webkit-animation-duration: 15.5s; +} +.a-time157 { + animation-duration: 15.7s; + -webkit-animation-duration: 15.7s; +} +.a-time159 { + animation-duration: 15.9s; + -webkit-animation-duration: 15.9s; +} +/*内置延迟时间*/ +.a-delay003 { + animation-delay: 0.3s; + -webkit-animation-delay: 0.3s; +} +.a-delay005 { + animation-delay: 0.5s; + -webkit-animation-delay: 0.5s; +} +.a-delay007 { + animation-delay: 0.7s; + -webkit-animation-delay: 0.7s; +} +.a-delay008 { + animation-delay: 0.8s; + -webkit-animation-delay: 0.8s; +} +.a-delay009 { + animation-delay: 0.9s; + -webkit-animation-delay: 0.9s; +} +.a-delay1 { + animation-delay: 1s; + -webkit-animation-delay: 1s; +} +.a-delay013 { + animation-delay: 1.3s; + -webkit-animation-delay: 1.3s; +} +.a-delay015 { + animation-delay: 1.5s; + -webkit-animation-delay: 1.5s; +} +.a-delay017 { + animation-delay: 1.7s; + -webkit-animation-delay: 1.7s; +} +.a-delay019 { + animation-delay: 1.9s; + -webkit-animation-delay: 1.9s; +} +.a-delay2 { + animation-delay: 2s; + -webkit-animation-delay: 2s; +} +.a-delay023 { + animation-delay: 2.3s; + -webkit-animation-delay: 2.3s; +} +.a-delay025 { + animation-delay: 2.5s; + -webkit-animation-delay: 2.5s; +} +.a-delay027 { + animation-delay: 2.7s; + -webkit-animation-delay: 2.7s; +} +.a-delay029 { + animation-delay: 2.9s; + -webkit-animation-delay: 2.9s; +} +.a-delay3 { + animation-delay: 3s; + -webkit-animation-delay: 3s; +} +.a-delay033 { + animation-delay: 3.3s; + -webkit-animation-delay: 3.3s; +} +.a-delay035 { + animation-delay: 3.5s; + -webkit-animation-delay: 3.5s; +} +.a-delay037 { + animation-delay: 3.7s; + -webkit-animation-delay: 3.7s; +} +.a-delay039 { + animation-delay: 3.9s; + -webkit-animation-delay: 3.9s; +} +.a-delay4 { + animation-delay: 4s; + -webkit-animation-delay: 4s; +} +.a-delay043 { + animation-delay: 4.3s; + -webkit-animation-delay: 4.3s; +} +.a-delay045 { + animation-delay: 4.5s; + -webkit-animation-delay: 4.5s; +} +.a-delay047 { + animation-delay: 4.7s; + -webkit-animation-delay: 4.7s; +} +.a-delay049 { + animation-delay: 4.9s; + -webkit-animation-delay: 4.9s; +} +.a-delay5 { + animation-delay: 5s; + -webkit-animation-delay: 5s; +} +.a-delay053 { + animation-delay: 5.3s; + -webkit-animation-delay: 5.3s; +} +.a-delay055 { + animation-delay: 5.5s; + -webkit-animation-delay: 5.5s; +} +.a-delay057 { + animation-delay: 5.7s; + -webkit-animation-delay: 5.7s; +} +.a-delay059 { + animation-delay: 5.9s; + -webkit-animation-delay: 5.9s; +} +.a-delay6 { + animation-delay: 5s; + -webkit-animation-delay: 5s; +} +.a-delay063 { + animation-delay: 5.3s; + -webkit-animation-delay: 5.3s; +} +.a-delay065 { + animation-delay: 5.5s; + -webkit-animation-delay: 5.5s; +} +.a-delay067 { + animation-delay: 5.7s; + -webkit-animation-delay: 5.7s; +} +.a-delay069 { + animation-delay: 5.9s; + -webkit-animation-delay: 5.9s; +} +.a-delay7 { + animation-delay: 7s; + -webkit-animation-delay: 7s; +} +.a-delay073 { + animation-delay: 7.3s; + -webkit-animation-delay: 7.3s; +} +.a-delay075 { + animation-delay: 7.5s; + -webkit-animation-delay: 7.5s; +} +.a-delay077 { + animation-delay: 7.7s; + -webkit-animation-delay: 7.7s; +} +.a-delay079 { + animation-delay: 7.9s; + -webkit-animation-delay: 7.9s; +} +.a-delay8 { + animation-delay: 8s; + -webkit-animation-delay: 8s; +} +.a-delay083 { + animation-delay: 8.3s; + -webkit-animation-delay: 8.3s; +} +.a-delay085 { + animation-delay: 8.5s; + -webkit-animation-delay: 8.5s; +} +.a-delay087 { + animation-delay: 8.7s; + -webkit-animation-delay: 8.7s; +} +.a-delay089 { + animation-delay: 8.9s; + -webkit-animation-delay: 8.9s; +} +.a-delay9 { + animation-delay: 9s; + -webkit-animation-delay: 9s; +} +.a-delay093 { + animation-delay: 9.3s; + -webkit-animation-delay: 9.3s; +} +.a-delay095 { + animation-delay: 9.5s; + -webkit-animation-delay: 9.5s; +} +.a-delay097 { + animation-delay: 9.7s; + -webkit-animation-delay: 9.7s; +} +.a-delay099 { + animation-delay: 9.9s; + -webkit-animation-delay: 9.9s; +} +.a-delay10 { + animation-delay: 10s; + -webkit-animation-delay: 10s; +} +.a-delay103 { + animation-delay: 10.3s; + -webkit-animation-delay: 10.3s; +} +.a-delay105 { + animation-delay: 10.5s; + -webkit-animation-delay: 10.5s; +} +.a-delay107 { + animation-delay: 10.7s; + -webkit-animation-delay: 10.7s; +} +.a-delay109 { + animation-delay: 10.9s; + -webkit-animation-delay: 10.9s; +} +.a-delay11 { + animation-delay: 11s; + -webkit-animation-delay: 11s; +} +.a-delay113 { + animation-delay: 11.3s; + -webkit-animation-delay: 11.3s; +} +.a-delay115 { + animation-delay: 11.5s; + -webkit-animation-delay: 11.5s; +} +.a-delay117 { + animation-delay: 11.7s; + -webkit-animation-delay: 11.7s; +} +.a-delay119 { + animation-delay: 11.9s; + -webkit-animation-delay: 11.9s; +} +.a-delay12 { + animation-delay: 12s; + -webkit-animation-delay: 12s; +} +.a-delay123 { + animation-delay: 12.3s; + -webkit-animation-delay: 12.3s; +} +.a-delay125 { + animation-delay: 12.5s; + -webkit-animation-delay: 12.5s; +} +.a-delay127 { + animation-delay: 12.7s; + -webkit-animation-delay: 12.7s; +} +.a-delay129 { + animation-delay: 12.9s; + -webkit-animation-delay: 12.9s; +} +.a-delay13 { + animation-delay: 13s; + -webkit-animation-delay: 13s; +} +.a-delay133 { + animation-delay: 13.3s; + -webkit-animation-delay: 13.3s; +} +.a-delay135 { + animation-delay: 13.5s; + -webkit-animation-delay: 13.5s; +} +.a-delay137 { + animation-delay: 13.7s; + -webkit-animation-delay: 13.7s; +} +.a-delay139 { + animation-delay: 13.9s; + -webkit-animation-delay: 13.9s; +} +.a-delay14 { + animation-delay: 14s; + -webkit-animation-delay: 14s; +} +.a-delay143 { + animation-delay: 14.3s; + -webkit-animation-delay: 14.3s; +} +.a-delay145 { + animation-delay: 14.5s; + -webkit-animation-delay: 14.5s; +} +.a-delay147 { + animation-delay: 14.7s; + -webkit-animation-delay: 14.7s; +} +.a-delay149 { + animation-delay: 14.9s; + -webkit-animation-delay: 14.9s; +} +.a-delay15 { + animation-delay: 15s; + -webkit-animation-delay: 15s; +} +.a-delay153 { + animation-delay: 15.3s; + -webkit-animation-delay: 15.3s; +} +.a-delay155 { + animation-delay: 15.5s; + -webkit-animation-delay: 15.5s; +} +.a-delay157 { + animation-delay: 15.7s; + -webkit-animation-delay: 15.7s; +} +.a-delay159 { + animation-delay: 15.9s; + -webkit-animation-delay: 15.9s; +} +/*常用配置*/ +/*永久播放+反向+匀速*/ +.a-yjfx { + /*永久播放*/ + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + /*动画曲线*/ + animation-timing-function: linear; + -webkit-animation-timing-function: linear; + /*反向播放*/ + animation-direction: alternate; + -webkit-animation-direction: alternate; +} +/*永久播放+匀速*/ +.a-yj { + /*永久播放*/ + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + /*动画曲线*/ + animation-timing-function: linear; + -webkit-animation-timing-function: linear; +} +/*动画效果*/ +/*从上往下渐显*/ +.showInTop { + animation-name: showInTop; + -webkit-animation-name: showInTop; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showInTop { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: translate(0, -50%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showInTop { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: translate(0, -50%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showInTop { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: translate(0, -50%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showInTop { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: translate(0, -50%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showInTop { + 0% { + opacity: 0; + filter: alpha(opacity=0); + transform: translate(0, -50%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*从下往上渐显*/ +.showInBottom { + animation-name: showInBottom; + -webkit-animation-name: showInBottom; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showInBottom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: translate(0, 40%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showInBottom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: translate(0, 40%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showInBottom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: translate(0, 40%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showInBottom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: translate(0, 40%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showInBottom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + transform: translate(0, 40%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*从下往上渐显*/ +.showTop { + animation-name: showTop; + -webkit-animation-name: showTop; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, -100%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, -100%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, -100%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, -100%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, -100%); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*从左往右渐显*/ +.showInLeft { + animation-name: showInLeft; + -webkit-animation-name: showInLeft; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showInLeft { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: translate(-10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showInLeft { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: translate(-10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showInLeft { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: translate(-10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showInLeft { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: translate(-10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showInLeft { + 0% { + opacity: 0; + filter: alpha(opacity=0); + transform: translate(-10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*从左往右显示*/ +.showLeft { + animation-name: showLeft; + -webkit-animation-name: showLeft; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(-100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(-100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(-100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(-100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(-100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*从右往左渐显*/ +.showInRight { + animation-name: showInRight; + -webkit-animation-name: showInRight; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showInRight { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: translate(10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showInRight { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: translate(10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showInRight { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: translate(10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showInRight { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: translate(10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showInRight { + 0% { + opacity: 0; + filter: alpha(opacity=0); + transform: translate(10%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*从右往左显示*/ +.showRight { + animation-name: showRight; + -webkit-animation-name: showRight; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes showRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } +} +@-moz-keyframes showRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } +} +@-o-keyframes showRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } +} +@-ms-keyframes showRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } +} +@keyframes showRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(100%, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } +} +/*渐显*/ +.fadeIn { + animation-name: fadeIn; + -webkit-animation-name: fadeIn; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-moz-keyframes fadeIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-o-keyframes fadeIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-ms-keyframes fadeIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +/*由小变大*/ +.zoomIn { + animation-name: zoomIn; + -webkit-animation-name: zoomIn; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: scale(0, 0); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-moz-keyframes zoomIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: scale(0, 0); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-o-keyframes zoomIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: scale(0, 0); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-ms-keyframes zoomIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: scale(0, 0); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@keyframes zoomIn { + 0% { + opacity: 0; + filter: alpha(opacity=0); + transform: scale(0, 0); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +/*由大变小*/ +.inZoom { + animation-name: inZoom; + -webkit-animation-name: inZoom; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes inZoom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: scale(3, 3); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-moz-keyframes inZoom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: scale(3, 3); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-o-keyframes inZoom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: scale(3, 3); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@-ms-keyframes inZoom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: scale(3, 3); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +@keyframes inZoom { + 0% { + opacity: 0; + filter: alpha(opacity=0); + transform: scale(3, 3); + } + 80% { + opacity: 1; + filter: alpha(opacity=100); + transform: scale(1, 1); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + } +} +/*上下*/ +.shangxia { + animation-name: shangxia; + -webkit-animation-name: shangxia; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes shangxia { + 0% { + -webkit-transform: translate(0, 0%); + } + 100% { + -webkit-transform: translate(0, -20%); + } +} +@-moz-keyframes shangxia { + 0% { + -moz-transform: translate(0, 0%); + } + 100% { + -moz-transform: translate(0, -20%); + } +} +@-o-keyframes shangxia { + 0% { + -o-transform: translate(0, 0%); + } + 100% { + -o-transform: translate(0, -20%); + } +} +@-ms-keyframes shangxia { + 0% { + -ms-transform: translate(0, 0%); + } + 100% { + -ms-transform: translate(0, -20%); + } +} +@keyframes shangxia { + 0% { + transform: translate(0, 0%); + } + 100% { + transform: translate(0, -20%); + } +} +/*顺时针转圈*/ +.zhuanquan { + animation-name: zhuanquan; + -webkit-animation-name: zhuanquan; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes zhuanquan { + 0% { + -webkit-transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + } +} +@-moz-keyframes zhuanquan { + 0% { + -moz-transform: rotate(0); + } + 100% { + -moz-transform: rotate(360deg); + } +} +@-o-keyframes zhuanquan { + 0% { + -o-transform: rotate(0); + } + 100% { + -o-transform: rotate(360deg); + } +} +@-ms-keyframes zhuanquan { + 0% { + -ms-transform: rotate(0); + } + 100% { + -ms-transform: rotate(360deg); + } +} +@keyframes zhuanquan { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} +/*逆时针转圈*/ +.zhuanquan-ni { + animation-name: zhuanquan-ni; + -webkit-animation-name: zhuanquan-ni; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes zhuanquan-ni { + 0% { + -webkit-transform: rotate(360deg); + } + 100% { + -webkit-transform: rotate(0deg); + } +} +@-moz-keyframes zhuanquan-ni { + 0% { + -moz-transform: rotate(360deg); + } + 100% { + -moz-transform: rotate(0deg); + } +} +@-o-keyframes zhuanquan-ni { + 0% { + -o-transform: rotate(360deg); + } + 100% { + -o-transform: rotate(0deg); + } +} +@-ms-keyframes zhuanquan-ni { + 0% { + -ms-transform: rotate(360deg); + } + 100% { + -ms-transform: rotate(0deg); + } +} +@keyframes zhuanquan-ni { + 0% { + transform: rotate(360deg); + } + 100% { + transform: rotate(0deg); + } +} +/*弹跳*/ +.bounce { + animation-name: bounce; + -webkit-animation-name: bounce; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; + animation-fill-mode: center bottom; + -webkit-animation-fill-mode: center bottom; +} +@-webkit-keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + } + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + } +} +@-moz-keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -moz-transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -moz-transform: translate3d(0, -30px, 0); + } + 70% { + -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -moz-transform: translate3d(0, -15px, 0); + } + 90% { + -moz-transform: translate3d(0, -4px, 0); + } +} +@-o-keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -o-transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -o-transform: translate3d(0, -30px, 0); + } + 70% { + -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -o-transform: translate3d(0, -15px, 0); + } + 90% { + -o-transform: translate3d(0, -4px, 0); + } +} +@-ms-keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -ms-transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -ms-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -ms-transform: translate3d(0, -30px, 0); + } + 70% { + -ms-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -ms-transform: translate3d(0, -15px, 0); + } + 90% { + -ms-transform: translate3d(0, -4px, 0); + } +} +@keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: translate3d(0, 0, 0); + } + 40%, + 43% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transform: translate3d(0, -30px, 0); + } + 70% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transform: translate3d(0, -15px, 0); + } + 90% { + transform: translate3d(0, -4px, 0); + } +} +/*橡皮筋*/ +.rubberBand { + animation-name: rubberBand; + -webkit-animation-name: rubberBand; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + } + to { + -webkit-transform: scale3d(1, 1, 1); + } +} +@-moz-keyframes rubberBand { + from { + -moz-transform: scale3d(1, 1, 1); + } + 30% { + -moz-transform: scale3d(1.25, 0.75, 1); + } + 40% { + -moz-transform: scale3d(0.75, 1.25, 1); + } + 50% { + -moz-transform: scale3d(1.15, 0.85, 1); + } + 65% { + -moz-transform: scale3d(0.95, 1.05, 1); + } + 75% { + -moz-transform: scale3d(1.05, 0.95, 1); + } + to { + -moz-transform: scale3d(1, 1, 1); + } +} +@-o-keyframes rubberBand { + from { + -o-transform: scale3d(1, 1, 1); + } + 30% { + -o-transform: scale3d(1.25, 0.75, 1); + } + 40% { + -o-transform: scale3d(0.75, 1.25, 1); + } + 50% { + -o-transform: scale3d(1.15, 0.85, 1); + } + 65% { + -o-transform: scale3d(0.95, 1.05, 1); + } + 75% { + -o-transform: scale3d(1.05, 0.95, 1); + } + to { + -o-transform: scale3d(1, 1, 1); + } +} +@-ms-keyframes rubberBand { + from { + -ms-transform: scale3d(1, 1, 1); + } + 30% { + -ms-transform: scale3d(1.25, 0.75, 1); + } + 40% { + -ms-transform: scale3d(0.75, 1.25, 1); + } + 50% { + -ms-transform: scale3d(1.15, 0.85, 1); + } + 65% { + -ms-transform: scale3d(0.95, 1.05, 1); + } + 75% { + -ms-transform: scale3d(1.05, 0.95, 1); + } + to { + -ms-transform: scale3d(1, 1, 1); + } +} +@keyframes rubberBand { + from { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.25, 0.75, 1); + } + 40% { + transform: scale3d(0.75, 1.25, 1); + } + 50% { + transform: scale3d(1.15, 0.85, 1); + } + 65% { + transform: scale3d(0.95, 1.05, 1); + } + 75% { + transform: scale3d(1.05, 0.95, 1); + } + to { + transform: scale3d(1, 1, 1); + } +} +/*摇晃*/ +.shake { + animation-name: shake; + -webkit-animation-name: shake; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes shake { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(10px, 0, 0); + } +} +@-moz-keyframes shake { + from, + to { + -moz-transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -moz-transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + -moz-transform: translate3d(10px, 0, 0); + } +} +@-o-keyframes shake { + from, + to { + -o-transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -o-transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + -o-transform: translate3d(10px, 0, 0); + } +} +@-ms-keyframes shake { + from, + to { + -ms-transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -ms-transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + -ms-transform: translate3d(10px, 0, 0); + } +} +@keyframes shake { + from, + to { + transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + transform: translate3d(10px, 0, 0); + } +} +/*右上到左下*/ +.meteor { + animation-name: meteor; + -webkit-animation-name: meteor; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes meteor { + from, + to { + -webkit-transform: translate3d(0, 0, 0); + } + 0% { + -webkit-transform: translate(100%, -200%); + opacity: 0; + filter: alpha(opacity=0); + } + 10% { + opacity: 1; + filter: alpha(opacity=100); + } + 50% { + opacity: 1; + filter: alpha(opacity=100); + } + 80% { + -webkit-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } +} +@-moz-keyframes meteor { + from, + to { + -moz-transform: translate3d(0, 0, 0); + } + 0% { + -moz-transform: translate(100%, -200%); + opacity: 0; + filter: alpha(opacity=0); + } + 10% { + opacity: 1; + filter: alpha(opacity=100); + } + 50% { + opacity: 1; + filter: alpha(opacity=100); + } + 80% { + -moz-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + -moz-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } +} +@-o-keyframes meteor { + from, + to { + -o-transform: translate3d(0, 0, 0); + } + 0% { + -o-transform: translate(100%, -200%); + opacity: 0; + filter: alpha(opacity=0); + } + 10% { + opacity: 1; + filter: alpha(opacity=100); + } + 50% { + opacity: 1; + filter: alpha(opacity=100); + } + 80% { + -o-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + -o-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } +} +@-ms-keyframes meteor { + from, + to { + -ms-transform: translate3d(0, 0, 0); + } + 0% { + -ms-transform: translate(100%, -200%); + opacity: 0; + filter: alpha(opacity=0); + } + 10% { + opacity: 1; + filter: alpha(opacity=100); + } + 50% { + opacity: 1; + filter: alpha(opacity=100); + } + 80% { + -ms-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + -ms-transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } +} +@keyframes meteor { + from, + to { + transform: translate3d(0, 0, 0); + } + 0% { + transform: translate(100%, -200%); + opacity: 0; + filter: alpha(opacity=0); + } + 10% { + opacity: 1; + filter: alpha(opacity=100); + } + 50% { + opacity: 1; + filter: alpha(opacity=100); + } + 80% { + transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } + 100% { + transform: translate(-180%, 200%); + opacity: 0; + filter: alpha(opacity=0); + } +} +/*退场动画*/ +/*从左往右退出*/ +.outRight { + animation-name: outRight; + -webkit-animation-name: outRight; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes outRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(100%, 0); + } +} +@-moz-keyframes outRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(100%, 0); + } +} +@-o-keyframes outRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(100%, 0); + } +} +@-ms-keyframes outRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(100%, 0); + } +} +@keyframes outRight { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(100%, 0); + } +} +/*从右往左退出*/ +.outLeft { + animation-name: outLeft; + -webkit-animation-name: outLeft; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes outLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(-100%, 0); + } +} +@-moz-keyframes outLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(-100%, 0); + } +} +@-o-keyframes outLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(-100%, 0); + } +} +@-ms-keyframes outLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(-100%, 0); + } +} +@keyframes outLeft { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(-100%, 0); + } +} +/*从下往上退出*/ +.outTop { + animation-name: outTop; + -webkit-animation-name: outTop; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes outTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, -100%); + } +} +@-moz-keyframes outTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, -100%); + } +} +@-o-keyframes outTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, -100%); + } +} +@-ms-keyframes outTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, -100%); + } +} +@keyframes outTop { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, -100%); + } +} +/*从上往下退出*/ +.outBottom { + animation-name: outBottom; + -webkit-animation-name: outBottom; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes outBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 100%); + } +} +@-moz-keyframes outBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 100%); + } +} +@-o-keyframes outBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 100%); + } +} +@-ms-keyframes outBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 100%); + } +} +@keyframes outBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } + 100% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 100%); + } +} +/*从上往下渐隐*/ +.hideToBottom { + animation-name: hideToBottom; + -webkit-animation-name: hideToBottom; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes hideToBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: translate(0, 0); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transform: translate(0, 40%); + } +} +@-moz-keyframes hideToBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -moz-transform: translate(0, 0); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + -moz-transform: translate(0, 40%); + } +} +@-o-keyframes hideToBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -o-transform: translate(0, 0); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + -o-transform: translate(0, 40%); + } +} +@-ms-keyframes hideToBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + -ms-transform: translate(0, 0); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + -ms-transform: translate(0, 40%); + } +} +@keyframes hideToBottom { + 0% { + opacity: 1; + filter: alpha(opacity=100); + transform: translate(0, 0); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + transform: translate(0, 40%); + } +} +/*渐隐*/ +.fadeOut { + animation-name: fadeOut; + -webkit-animation-name: fadeOut; + animation-fill-mode: both; + -webkit-animation-fill-mode: both; +} +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + filter: alpha(opacity=100); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + } +} +@-moz-keyframes fadeOut { + 0% { + opacity: 1; + filter: alpha(opacity=100); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + } +} +@-o-keyframes fadeOut { + 0% { + opacity: 1; + filter: alpha(opacity=100); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + } +} +@-ms-keyframes fadeOut { + 0% { + opacity: 1; + filter: alpha(opacity=100); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + filter: alpha(opacity=100); + } + 100% { + opacity: 0; + filter: alpha(opacity=0); + } +} diff --git a/src/assets/styles/animate.min.css b/src/assets/styles/animate.min.css new file mode 100644 index 0000000..079e056 --- /dev/null +++ b/src/assets/styles/animate.min.css @@ -0,0 +1 @@ +.a-time003{animation-duration:.3s;-webkit-animation-duration:.3s}.a-time005{animation-duration:.5s;-webkit-animation-duration:.5s}.a-time007{animation-duration:.7s;-webkit-animation-duration:.7s}.a-time009{animation-duration:.9s;-webkit-animation-duration:.9s}.a-time1{animation-duration:1s;-webkit-animation-duration:1s}.a-time013{animation-duration:1.3s;-webkit-animation-duration:1.3s}.a-time015{animation-duration:1.5s;-webkit-animation-duration:1.5s}.a-time017{animation-duration:1.7s;-webkit-animation-duration:1.7s}.a-time019{animation-duration:1.9s;-webkit-animation-duration:1.9s}.a-time2{animation-duration:2s;-webkit-animation-duration:2s}.a-time023{animation-duration:2.3s;-webkit-animation-duration:2.3s}.a-time025{animation-duration:2.5s;-webkit-animation-duration:2.5s}.a-time027{animation-duration:2.7s;-webkit-animation-duration:2.7s}.a-time029{animation-duration:2.9s;-webkit-animation-duration:2.9s}.a-time3{animation-duration:3s;-webkit-animation-duration:3s}.a-time033{animation-duration:3.3s;-webkit-animation-duration:3.3s}.a-time035{animation-duration:3.5s;-webkit-animation-duration:3.5s}.a-time037{animation-duration:3.7s;-webkit-animation-duration:3.7s}.a-time039{animation-duration:3.9s;-webkit-animation-duration:3.9s}.a-time4{animation-duration:4s;-webkit-animation-duration:4s}.a-time043{animation-duration:4.3s;-webkit-animation-duration:4.3s}.a-time045{animation-duration:4.5s;-webkit-animation-duration:4.5s}.a-time047{animation-duration:4.7s;-webkit-animation-duration:4.7s}.a-time049{animation-duration:4.9s;-webkit-animation-duration:4.9s}.a-time5{animation-duration:5s;-webkit-animation-duration:5s}.a-time053{animation-duration:5.3s;-webkit-animation-duration:5.3s}.a-time055{animation-duration:5.5s;-webkit-animation-duration:5.5s}.a-time057{animation-duration:5.7s;-webkit-animation-duration:5.7s}.a-time059{animation-duration:5.9s;-webkit-animation-duration:5.9s}.a-time6{animation-duration:6s;-webkit-animation-duration:6s}.a-time063{animation-duration:6.3s;-webkit-animation-duration:6.3s}.a-time065{animation-duration:6.5s;-webkit-animation-duration:6.5s}.a-time067{animation-duration:6.7s;-webkit-animation-duration:6.7s}.a-time069{animation-duration:6.9s;-webkit-animation-duration:6.9s}.a-time7{animation-duration:7s;-webkit-animation-duration:7s}.a-time073{animation-duration:7.3s;-webkit-animation-duration:7.3s}.a-time075{animation-duration:7.5s;-webkit-animation-duration:7.5s}.a-time077{animation-duration:7.7s;-webkit-animation-duration:7.7s}.a-time079{animation-duration:7.9s;-webkit-animation-duration:7.9s}.a-time8{animation-duration:8s;-webkit-animation-duration:8s}.a-time083{animation-duration:8.3s;-webkit-animation-duration:8.3s}.a-time085{animation-duration:8.5s;-webkit-animation-duration:8.5s}.a-time087{animation-duration:8.7s;-webkit-animation-duration:8.7s}.a-time089{animation-duration:8.9s;-webkit-animation-duration:8.9s}.a-time9{animation-duration:9s;-webkit-animation-duration:9s}.a-time093{animation-duration:9.3s;-webkit-animation-duration:9.3s}.a-time095{animation-duration:9.5s;-webkit-animation-duration:9.5s}.a-time097{animation-duration:9.7s;-webkit-animation-duration:9.7s}.a-time099{animation-duration:9.9s;-webkit-animation-duration:9.9s}.a-time10{animation-duration:10s;-webkit-animation-duration:10s}.a-time103{animation-duration:10.3s;-webkit-animation-duration:10.3s}.a-time105{animation-duration:10.5s;-webkit-animation-duration:10.5s}.a-time107{animation-duration:10.7s;-webkit-animation-duration:10.7s}.a-time109{animation-duration:10.9s;-webkit-animation-duration:10.9s}.a-time11{animation-duration:11s;-webkit-animation-duration:11s}.a-time113{animation-duration:11.3s;-webkit-animation-duration:11.3s}.a-time115{animation-duration:11.5s;-webkit-animation-duration:11.5s}.a-time117{animation-duration:11.7s;-webkit-animation-duration:11.7s}.a-time119{animation-duration:11.9s;-webkit-animation-duration:11.9s}.a-time12{animation-duration:12s;-webkit-animation-duration:12s}.a-time123{animation-duration:12.3s;-webkit-animation-duration:12.3s}.a-time125{animation-duration:12.5s;-webkit-animation-duration:12.5s}.a-time127{animation-duration:12.7s;-webkit-animation-duration:12.7s}.a-time129{animation-duration:12.9s;-webkit-animation-duration:12.9s}.a-time13{animation-duration:13s;-webkit-animation-duration:13s}.a-time133{animation-duration:13.3s;-webkit-animation-duration:13.3s}.a-time135{animation-duration:13.5s;-webkit-animation-duration:13.5s}.a-time137{animation-duration:13.7s;-webkit-animation-duration:13.7s}.a-time139{animation-duration:13.9s;-webkit-animation-duration:13.9s}.a-time14{animation-duration:14s;-webkit-animation-duration:14s}.a-time143{animation-duration:15.3s;-webkit-animation-duration:15.3s}.a-time145{animation-duration:15.5s;-webkit-animation-duration:15.5s}.a-time147{animation-duration:15.7s;-webkit-animation-duration:15.7s}.a-time149{animation-duration:15.9s;-webkit-animation-duration:15.9s}.a-time15{animation-duration:15s;-webkit-animation-duration:15s}.a-time153{animation-duration:15.3s;-webkit-animation-duration:15.3s}.a-time155{animation-duration:15.5s;-webkit-animation-duration:15.5s}.a-time157{animation-duration:15.7s;-webkit-animation-duration:15.7s}.a-time159{animation-duration:15.9s;-webkit-animation-duration:15.9s}.a-delay003{animation-delay:.3s;-webkit-animation-delay:.3s}.a-delay005{animation-delay:.5s;-webkit-animation-delay:.5s}.a-delay007{animation-delay:.7s;-webkit-animation-delay:.7s}.a-delay008{animation-delay:.8s;-webkit-animation-delay:.8s}.a-delay009{animation-delay:.9s;-webkit-animation-delay:.9s}.a-delay1{animation-delay:1s;-webkit-animation-delay:1s}.a-delay013{animation-delay:1.3s;-webkit-animation-delay:1.3s}.a-delay015{animation-delay:1.5s;-webkit-animation-delay:1.5s}.a-delay017{animation-delay:1.7s;-webkit-animation-delay:1.7s}.a-delay019{animation-delay:1.9s;-webkit-animation-delay:1.9s}.a-delay2{animation-delay:2s;-webkit-animation-delay:2s}.a-delay023{animation-delay:2.3s;-webkit-animation-delay:2.3s}.a-delay025{animation-delay:2.5s;-webkit-animation-delay:2.5s}.a-delay027{animation-delay:2.7s;-webkit-animation-delay:2.7s}.a-delay029{animation-delay:2.9s;-webkit-animation-delay:2.9s}.a-delay3{animation-delay:3s;-webkit-animation-delay:3s}.a-delay033{animation-delay:3.3s;-webkit-animation-delay:3.3s}.a-delay035{animation-delay:3.5s;-webkit-animation-delay:3.5s}.a-delay037{animation-delay:3.7s;-webkit-animation-delay:3.7s}.a-delay039{animation-delay:3.9s;-webkit-animation-delay:3.9s}.a-delay4{animation-delay:4s;-webkit-animation-delay:4s}.a-delay043{animation-delay:4.3s;-webkit-animation-delay:4.3s}.a-delay045{animation-delay:4.5s;-webkit-animation-delay:4.5s}.a-delay047{animation-delay:4.7s;-webkit-animation-delay:4.7s}.a-delay049{animation-delay:4.9s;-webkit-animation-delay:4.9s}.a-delay5{animation-delay:5s;-webkit-animation-delay:5s}.a-delay053{animation-delay:5.3s;-webkit-animation-delay:5.3s}.a-delay055{animation-delay:5.5s;-webkit-animation-delay:5.5s}.a-delay057{animation-delay:5.7s;-webkit-animation-delay:5.7s}.a-delay059{animation-delay:5.9s;-webkit-animation-delay:5.9s}.a-delay6{animation-delay:5s;-webkit-animation-delay:5s}.a-delay063{animation-delay:5.3s;-webkit-animation-delay:5.3s}.a-delay065{animation-delay:5.5s;-webkit-animation-delay:5.5s}.a-delay067{animation-delay:5.7s;-webkit-animation-delay:5.7s}.a-delay069{animation-delay:5.9s;-webkit-animation-delay:5.9s}.a-delay7{animation-delay:7s;-webkit-animation-delay:7s}.a-delay073{animation-delay:7.3s;-webkit-animation-delay:7.3s}.a-delay075{animation-delay:7.5s;-webkit-animation-delay:7.5s}.a-delay077{animation-delay:7.7s;-webkit-animation-delay:7.7s}.a-delay079{animation-delay:7.9s;-webkit-animation-delay:7.9s}.a-delay8{animation-delay:8s;-webkit-animation-delay:8s}.a-delay083{animation-delay:8.3s;-webkit-animation-delay:8.3s}.a-delay085{animation-delay:8.5s;-webkit-animation-delay:8.5s}.a-delay087{animation-delay:8.7s;-webkit-animation-delay:8.7s}.a-delay089{animation-delay:8.9s;-webkit-animation-delay:8.9s}.a-delay9{animation-delay:9s;-webkit-animation-delay:9s}.a-delay093{animation-delay:9.3s;-webkit-animation-delay:9.3s}.a-delay095{animation-delay:9.5s;-webkit-animation-delay:9.5s}.a-delay097{animation-delay:9.7s;-webkit-animation-delay:9.7s}.a-delay099{animation-delay:9.9s;-webkit-animation-delay:9.9s}.a-delay10{animation-delay:10s;-webkit-animation-delay:10s}.a-delay103{animation-delay:10.3s;-webkit-animation-delay:10.3s}.a-delay105{animation-delay:10.5s;-webkit-animation-delay:10.5s}.a-delay107{animation-delay:10.7s;-webkit-animation-delay:10.7s}.a-delay109{animation-delay:10.9s;-webkit-animation-delay:10.9s}.a-delay11{animation-delay:11s;-webkit-animation-delay:11s}.a-delay113{animation-delay:11.3s;-webkit-animation-delay:11.3s}.a-delay115{animation-delay:11.5s;-webkit-animation-delay:11.5s}.a-delay117{animation-delay:11.7s;-webkit-animation-delay:11.7s}.a-delay119{animation-delay:11.9s;-webkit-animation-delay:11.9s}.a-delay12{animation-delay:12s;-webkit-animation-delay:12s}.a-delay123{animation-delay:12.3s;-webkit-animation-delay:12.3s}.a-delay125{animation-delay:12.5s;-webkit-animation-delay:12.5s}.a-delay127{animation-delay:12.7s;-webkit-animation-delay:12.7s}.a-delay129{animation-delay:12.9s;-webkit-animation-delay:12.9s}.a-delay13{animation-delay:13s;-webkit-animation-delay:13s}.a-delay133{animation-delay:13.3s;-webkit-animation-delay:13.3s}.a-delay135{animation-delay:13.5s;-webkit-animation-delay:13.5s}.a-delay137{animation-delay:13.7s;-webkit-animation-delay:13.7s}.a-delay139{animation-delay:13.9s;-webkit-animation-delay:13.9s}.a-delay14{animation-delay:14s;-webkit-animation-delay:14s}.a-delay143{animation-delay:14.3s;-webkit-animation-delay:14.3s}.a-delay145{animation-delay:14.5s;-webkit-animation-delay:14.5s}.a-delay147{animation-delay:14.7s;-webkit-animation-delay:14.7s}.a-delay149{animation-delay:14.9s;-webkit-animation-delay:14.9s}.a-delay15{animation-delay:15s;-webkit-animation-delay:15s}.a-delay153{animation-delay:15.3s;-webkit-animation-delay:15.3s}.a-delay155{animation-delay:15.5s;-webkit-animation-delay:15.5s}.a-delay157{animation-delay:15.7s;-webkit-animation-delay:15.7s}.a-delay159{animation-delay:15.9s;-webkit-animation-delay:15.9s}.a-yjfx{animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;animation-direction:alternate;-webkit-animation-direction:alternate}.a-yj{animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear}.showInTop{animation-name:showInTop;-webkit-animation-name:showInTop;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showInTop{0%{opacity:0;-webkit-transform:translate(0,-50%)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showInTop{0%{opacity:0;-moz-transform:translate(0,-50%)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showInTop{0%{opacity:0;-o-transform:translate(0,-50%)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showInTop{0%{opacity:0;-ms-transform:translate(0,-50%)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showInTop{0%{opacity:0;transform:translate(0,-50%)}100%{opacity:1;transform:translate(0,0)}}.showInBottom{animation-name:showInBottom;-webkit-animation-name:showInBottom;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showInBottom{0%{opacity:0;-webkit-transform:translate(0,40%)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showInBottom{0%{opacity:0;-moz-transform:translate(0,40%)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showInBottom{0%{opacity:0;-o-transform:translate(0,40%)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showInBottom{0%{opacity:0;-ms-transform:translate(0,40%)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showInBottom{0%{opacity:0;transform:translate(0,40%)}100%{opacity:1;transform:translate(0,0)}}.showTop{animation-name:showTop;-webkit-animation-name:showTop;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showTop{0%{opacity:1;-webkit-transform:translate(0,-100%)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showTop{0%{opacity:1;-moz-transform:translate(0,-100%)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showTop{0%{opacity:1;-o-transform:translate(0,-100%)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showTop{0%{opacity:1;-ms-transform:translate(0,-100%)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showTop{0%{opacity:1;transform:translate(0,-100%)}100%{opacity:1;transform:translate(0,0)}}.showInLeft{animation-name:showInLeft;-webkit-animation-name:showInLeft;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showInLeft{0%{opacity:0;-webkit-transform:translate(-10%,0)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showInLeft{0%{opacity:0;-moz-transform:translate(-10%,0)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showInLeft{0%{opacity:0;-o-transform:translate(-10%,0)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showInLeft{0%{opacity:0;-ms-transform:translate(-10%,0)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showInLeft{0%{opacity:0;transform:translate(-10%,0)}100%{opacity:1;transform:translate(0,0)}}.showLeft{animation-name:showLeft;-webkit-animation-name:showLeft;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showLeft{0%{opacity:1;-webkit-transform:translate(-100%,0)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showLeft{0%{opacity:1;-moz-transform:translate(-100%,0)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showLeft{0%{opacity:1;-o-transform:translate(-100%,0)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showLeft{0%{opacity:1;-ms-transform:translate(-100%,0)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showLeft{0%{opacity:1;transform:translate(-100%,0)}100%{opacity:1;transform:translate(0,0)}}.showInRight{animation-name:showInRight;-webkit-animation-name:showInRight;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showInRight{0%{opacity:0;-webkit-transform:translate(10%,0)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showInRight{0%{opacity:0;-moz-transform:translate(10%,0)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showInRight{0%{opacity:0;-o-transform:translate(10%,0)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showInRight{0%{opacity:0;-ms-transform:translate(10%,0)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showInRight{0%{opacity:0;transform:translate(10%,0)}100%{opacity:1;transform:translate(0,0)}}.showRight{animation-name:showRight;-webkit-animation-name:showRight;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes showRight{0%{opacity:1;-webkit-transform:translate(100%,0)}100%{opacity:1;-webkit-transform:translate(0,0)}}@-moz-keyframes showRight{0%{opacity:1;-moz-transform:translate(100%,0)}100%{opacity:1;-moz-transform:translate(0,0)}}@-o-keyframes showRight{0%{opacity:1;-o-transform:translate(100%,0)}100%{opacity:1;-o-transform:translate(0,0)}}@-ms-keyframes showRight{0%{opacity:1;-ms-transform:translate(100%,0)}100%{opacity:1;-ms-transform:translate(0,0)}}@keyframes showRight{0%{opacity:1;transform:translate(100%,0)}100%{opacity:1;transform:translate(0,0)}}.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-ms-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.zoomIn{animation-name:zoomIn;-webkit-animation-name:zoomIn;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(0,0)}80%{opacity:1;-webkit-transform:scale(1,1)}100%{opacity:1}}@-moz-keyframes zoomIn{0%{opacity:0;-moz-transform:scale(0,0)}80%{opacity:1;-moz-transform:scale(1,1)}100%{opacity:1}}@-o-keyframes zoomIn{0%{opacity:0;-o-transform:scale(0,0)}80%{opacity:1;-o-transform:scale(1,1)}100%{opacity:1}}@-ms-keyframes zoomIn{0%{opacity:0;-ms-transform:scale(0,0)}80%{opacity:1;-ms-transform:scale(1,1)}100%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(0,0)}80%{opacity:1;transform:scale(1,1)}100%{opacity:1}}.inZoom{animation-name:inZoom;-webkit-animation-name:inZoom;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes inZoom{0%{opacity:0;-webkit-transform:scale(3,3)}80%{opacity:1;-webkit-transform:scale(1,1)}100%{opacity:1}}@-moz-keyframes inZoom{0%{opacity:0;-moz-transform:scale(3,3)}80%{opacity:1;-moz-transform:scale(1,1)}100%{opacity:1}}@-o-keyframes inZoom{0%{opacity:0;-o-transform:scale(3,3)}80%{opacity:1;-o-transform:scale(1,1)}100%{opacity:1}}@-ms-keyframes inZoom{0%{opacity:0;-ms-transform:scale(3,3)}80%{opacity:1;-ms-transform:scale(1,1)}100%{opacity:1}}@keyframes inZoom{0%{opacity:0;transform:scale(3,3)}80%{opacity:1;transform:scale(1,1)}100%{opacity:1}}.shangxia{animation-name:shangxia;-webkit-animation-name:shangxia;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes shangxia{0%{-webkit-transform:translate(0,0)}100%{-webkit-transform:translate(0,-20%)}}@-moz-keyframes shangxia{0%{-moz-transform:translate(0,0)}100%{-moz-transform:translate(0,-20%)}}@-o-keyframes shangxia{0%{-o-transform:translate(0,0)}100%{-o-transform:translate(0,-20%)}}@-ms-keyframes shangxia{0%{-ms-transform:translate(0,0)}100%{-ms-transform:translate(0,-20%)}}@keyframes shangxia{0%{transform:translate(0,0)}100%{transform:translate(0,-20%)}}.zhuanquan{animation-name:zhuanquan;-webkit-animation-name:zhuanquan;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes zhuanquan{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes zhuanquan{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes zhuanquan{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@-ms-keyframes zhuanquan{0%{-ms-transform:rotate(0)}100%{-ms-transform:rotate(360deg)}}@keyframes zhuanquan{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.zhuanquan-ni{animation-name:zhuanquan-ni;-webkit-animation-name:zhuanquan-ni;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes zhuanquan-ni{0%{-webkit-transform:rotate(360deg)}100%{-webkit-transform:rotate(0)}}@-moz-keyframes zhuanquan-ni{0%{-moz-transform:rotate(360deg)}100%{-moz-transform:rotate(0)}}@-o-keyframes zhuanquan-ni{0%{-o-transform:rotate(360deg)}100%{-o-transform:rotate(0)}}@-ms-keyframes zhuanquan-ni{0%{-ms-transform:rotate(360deg)}100%{-ms-transform:rotate(0)}}@keyframes zhuanquan-ni{0%{transform:rotate(360deg)}100%{transform:rotate(0)}}.bounce{animation-name:bounce;-webkit-animation-name:bounce;animation-fill-mode:both;-webkit-animation-fill-mode:both;animation-fill-mode:center bottom;-webkit-animation-fill-mode:center bottom}@-webkit-keyframes bounce{20%,53%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0)}}@-moz-keyframes bounce{20%,53%,80%,from,to{-moz-animation-timing-function:cubic-bezier(.215,.61,.355,1);-moz-transform:translate3d(0,0,0)}40%,43%{-moz-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-moz-transform:translate3d(0,-30px,0)}70%{-moz-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-moz-transform:translate3d(0,-15px,0)}90%{-moz-transform:translate3d(0,-4px,0)}}@-o-keyframes bounce{20%,53%,80%,from,to{-o-animation-timing-function:cubic-bezier(.215,.61,.355,1);-o-transform:translate3d(0,0,0)}40%,43%{-o-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-o-transform:translate3d(0,-30px,0)}70%{-o-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-o-transform:translate3d(0,-15px,0)}90%{-o-transform:translate3d(0,-4px,0)}}@-ms-keyframes bounce{20%,53%,80%,from,to{-ms-animation-timing-function:cubic-bezier(.215,.61,.355,1);-ms-transform:translate3d(0,0,0)}40%,43%{-ms-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-ms-transform:translate3d(0,-30px,0)}70%{-ms-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-ms-transform:translate3d(0,-15px,0)}90%{-ms-transform:translate3d(0,-4px,0)}}@keyframes bounce{20%,53%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.rubberBand{animation-name:rubberBand;-webkit-animation-name:rubberBand;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1)}}@-moz-keyframes rubberBand{from{-moz-transform:scale3d(1,1,1)}30%{-moz-transform:scale3d(1.25,.75,1)}40%{-moz-transform:scale3d(.75,1.25,1)}50%{-moz-transform:scale3d(1.15,.85,1)}65%{-moz-transform:scale3d(.95,1.05,1)}75%{-moz-transform:scale3d(1.05,.95,1)}to{-moz-transform:scale3d(1,1,1)}}@-o-keyframes rubberBand{from{-o-transform:scale3d(1,1,1)}30%{-o-transform:scale3d(1.25,.75,1)}40%{-o-transform:scale3d(.75,1.25,1)}50%{-o-transform:scale3d(1.15,.85,1)}65%{-o-transform:scale3d(.95,1.05,1)}75%{-o-transform:scale3d(1.05,.95,1)}to{-o-transform:scale3d(1,1,1)}}@-ms-keyframes rubberBand{from{-ms-transform:scale3d(1,1,1)}30%{-ms-transform:scale3d(1.25,.75,1)}40%{-ms-transform:scale3d(.75,1.25,1)}50%{-ms-transform:scale3d(1.15,.85,1)}65%{-ms-transform:scale3d(.95,1.05,1)}75%{-ms-transform:scale3d(1.05,.95,1)}to{-ms-transform:scale3d(1,1,1)}}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}.shake{animation-name:shake;-webkit-animation-name:shake;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes shake{from,to{-webkit-transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0)}}@-moz-keyframes shake{from,to{-moz-transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-moz-transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-moz-transform:translate3d(10px,0,0)}}@-o-keyframes shake{from,to{-o-transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-o-transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-o-transform:translate3d(10px,0,0)}}@-ms-keyframes shake{from,to{-ms-transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-ms-transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-ms-transform:translate3d(10px,0,0)}}@keyframes shake{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.meteor{animation-name:meteor;-webkit-animation-name:meteor;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes meteor{from,to{-webkit-transform:translate3d(0,0,0)}0%{-webkit-transform:translate(100%,-200%);opacity:0}10%{opacity:1}50%{opacity:1}80%{-webkit-transform:translate(-180%,200%);opacity:0}100%{-webkit-transform:translate(-180%,200%);opacity:0}}@-moz-keyframes meteor{from,to{-moz-transform:translate3d(0,0,0)}0%{-moz-transform:translate(100%,-200%);opacity:0}10%{opacity:1}50%{opacity:1}80%{-moz-transform:translate(-180%,200%);opacity:0}100%{-moz-transform:translate(-180%,200%);opacity:0}}@-o-keyframes meteor{from,to{-o-transform:translate3d(0,0,0)}0%{-o-transform:translate(100%,-200%);opacity:0}10%{opacity:1}50%{opacity:1}80%{-o-transform:translate(-180%,200%);opacity:0}100%{-o-transform:translate(-180%,200%);opacity:0}}@-ms-keyframes meteor{from,to{-ms-transform:translate3d(0,0,0)}0%{-ms-transform:translate(100%,-200%);opacity:0}10%{opacity:1}50%{opacity:1}80%{-ms-transform:translate(-180%,200%);opacity:0}100%{-ms-transform:translate(-180%,200%);opacity:0}}@keyframes meteor{from,to{transform:translate3d(0,0,0)}0%{transform:translate(100%,-200%);opacity:0}10%{opacity:1}50%{opacity:1}80%{transform:translate(-180%,200%);opacity:0}100%{transform:translate(-180%,200%);opacity:0}}.outRight{animation-name:outRight;-webkit-animation-name:outRight;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes outRight{0%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:1;-webkit-transform:translate(100%,0)}}@-moz-keyframes outRight{0%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:1;-moz-transform:translate(100%,0)}}@-o-keyframes outRight{0%{opacity:1;-o-transform:translate(0,0)}100%{opacity:1;-o-transform:translate(100%,0)}}@-ms-keyframes outRight{0%{opacity:1;-ms-transform:translate(0,0)}100%{opacity:1;-ms-transform:translate(100%,0)}}@keyframes outRight{0%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(100%,0)}}.outLeft{animation-name:outLeft;-webkit-animation-name:outLeft;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes outLeft{0%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:1;-webkit-transform:translate(-100%,0)}}@-moz-keyframes outLeft{0%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:1;-moz-transform:translate(-100%,0)}}@-o-keyframes outLeft{0%{opacity:1;-o-transform:translate(0,0)}100%{opacity:1;-o-transform:translate(-100%,0)}}@-ms-keyframes outLeft{0%{opacity:1;-ms-transform:translate(0,0)}100%{opacity:1;-ms-transform:translate(-100%,0)}}@keyframes outLeft{0%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(-100%,0)}}.outTop{animation-name:outTop;-webkit-animation-name:outTop;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes outTop{0%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:1;-webkit-transform:translate(0,-100%)}}@-moz-keyframes outTop{0%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:1;-moz-transform:translate(0,-100%)}}@-o-keyframes outTop{0%{opacity:1;-o-transform:translate(0,0)}100%{opacity:1;-o-transform:translate(0,-100%)}}@-ms-keyframes outTop{0%{opacity:1;-ms-transform:translate(0,0)}100%{opacity:1;-ms-transform:translate(0,-100%)}}@keyframes outTop{0%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,-100%)}}.outBottom{animation-name:outBottom;-webkit-animation-name:outBottom;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes outBottom{0%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:1;-webkit-transform:translate(0,100%)}}@-moz-keyframes outBottom{0%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:1;-moz-transform:translate(0,100%)}}@-o-keyframes outBottom{0%{opacity:1;-o-transform:translate(0,0)}100%{opacity:1;-o-transform:translate(0,100%)}}@-ms-keyframes outBottom{0%{opacity:1;-ms-transform:translate(0,0)}100%{opacity:1;-ms-transform:translate(0,100%)}}@keyframes outBottom{0%{opacity:1;transform:translate(0,0)}100%{opacity:1;transform:translate(0,100%)}}.hideToBottom{animation-name:hideToBottom;-webkit-animation-name:hideToBottom;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes hideToBottom{0%{opacity:1;-webkit-transform:translate(0,0)}100%{opacity:0;-webkit-transform:translate(0,40%)}}@-moz-keyframes hideToBottom{0%{opacity:1;-moz-transform:translate(0,0)}100%{opacity:0;-moz-transform:translate(0,40%)}}@-o-keyframes hideToBottom{0%{opacity:1;-o-transform:translate(0,0)}100%{opacity:0;-o-transform:translate(0,40%)}}@-ms-keyframes hideToBottom{0%{opacity:1;-ms-transform:translate(0,0)}100%{opacity:0;-ms-transform:translate(0,40%)}}@keyframes hideToBottom{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,40%)}}.fadeOut{animation-name:fadeOut;-webkit-animation-name:fadeOut;animation-fill-mode:both;-webkit-animation-fill-mode:both}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-o-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-ms-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 195b7c6..f3d603e 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,7 @@ import zhLocale from "element-ui/lib/locale/lang/zh-CN"; import "normalize.css/normalize.css"; // A modern alternative to CSS resets import "@/assets/styles/common.css"; import "@/assets/styles/index.scss"; // custome global css +import "@/assets/styles/animate.min.css"; // animate 动画JS // app router vuex filter mixins import App from "./App"; diff --git a/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue b/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue new file mode 100644 index 0000000..77b0964 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue @@ -0,0 +1,177 @@ + + + diff --git a/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue b/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue index b735362..21fa991 100644 --- a/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue +++ b/src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue @@ -8,7 +8,7 @@ @click="handleAddClick" >新增 - + @@ -74,6 +74,7 @@ diff --git a/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue b/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue index 684f53f..43b2c92 100644 --- a/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue +++ b/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue @@ -17,20 +17,39 @@ /> - - - - - - + + + + + + + + + + + + + + + + + + + 0) { + const contextData = this.deepClone(val.contextData); + //用户自定义参数设置 + if (this.isNotBlankObj(contextData)) { + //Map 遍历 + let sUserDataSet=[]; + for (const key in contextData) { + let sUserDataSetOne={}; + sUserDataSetOne.paramName=key; + sUserDataSetOne.sampleItem=contextData[key]; + sUserDataSet.push(sUserDataSetOne); + } + this.userNameList = sUserDataSet; } if (this.setParamList.length > 0) { for (let i = 0; i < this.setParamList.length; i++) { diff --git a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue index dcace6f..bb60161 100644 --- a/src/views/bigscreenDesigner/designer/components/dynamicForm.vue +++ b/src/views/bigscreenDesigner/designer/components/dynamicForm.vue @@ -177,6 +177,12 @@ :chart-type="item.chartType" @change="changed($event, item.name)" /> + - + +
- -
+
+ + +
+
'} + ] + } + ], + data:[], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300 + }, + ], + } + } diff --git a/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js b/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js index 83272a7..5f4ca4d 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js @@ -1,10 +1,5 @@ /* * @Descripttion: 折线堆叠图 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:38:17 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:16:28 */ export const widgetLineStack = { code: 'widgetLineStackChart', diff --git a/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js b/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js index 24999b3..e295692 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js @@ -1,10 +1,5 @@ /* * @Descripttion: 折线图json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:24:48 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:17:10 */ export const widgetLinechart = { code: 'widget-linechart', diff --git a/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js b/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js index facf96c..3c0e247 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js @@ -1,10 +1,5 @@ /* * @Descripttion: 中国地图 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:31:21 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:17:20 */ export const widgetLineMap = { code: 'widgetLineMap', diff --git a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js index 6b75f6c..8c60eab 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js @@ -1,10 +1,5 @@ /* * @Descripttion: 仪表盘 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:30:25 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:13:17 */ export const widgetGauge = { code: 'widget-gauge', diff --git a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js index 856733c..f54b8d2 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js @@ -1,10 +1,5 @@ /* * @Descripttion: 百分比图 json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:34:01 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:18:45 */ export const widgetPiePercentage = { code: 'widgetPiePercentageChart', diff --git a/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js b/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js index 6bb72b2..0017a06 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js @@ -1,5 +1,5 @@ -/** - * @Author: foming +/* + * @Descripttion: 雷达图 */ export const widgetRadar = { code: 'widget-radar', diff --git a/src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js new file mode 100644 index 0000000..526f727 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js @@ -0,0 +1,191 @@ +/* + * @Descripttion: 排名轮播表 + */ +export const widgetScrollRankingBoard= { + code: 'widget-scroll-ranking-board', + type: 'table', + tabName: '表格', + label: '排名轮播表', + icon: 'icon511tongji_shutu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '排名轮播表', + }, + { + type: 'el-input-number', + label: '表行数', + name: 'rowNum', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-input-number', + label: '滚动间隔(毫秒)', + name: 'waitTime', + required: false, + placeholder: '', + value: 2500, + }, + { + type: 'el-select', + label: '动画效果', + name: 'carousel', + required: false, + placeholder: '', + selectOptions: [ + {code: 'single', name: '单条'}, + {code: 'page', name: '整页'} + ], + value: 'single' + }, + { + type: 'el-input-text', + label: '数值单位', + name: 'unit', + required: false, + placeholder: '', + value: '', + }, + { + type: 'el-switch', + label: '自动排序', + name: 'sort', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + ], + // 数据 + data: [ + { + type: 'el-radio-group', + label: '数据类型', + name: 'dataType', + require: false, + placeholder: '', + selectValue: true, + selectOptions: [ + { + code: 'staticData', + name: '静态数据', + }, + { + code: 'dynamicData', + name: '动态数据', + }, + ], + value: 'staticData', + }, + { + type: 'el-input-number', + label: '刷新时间(毫秒)', + name: 'refreshTime', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + value: 30000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + { + name: '周口', + value: 55 + }, + { + name: '南阳', + value: 120 + }, + { + name: '西峡', + value: 78 + }, + { + name: '驻马店', + value: 66 + }, + { + name: '新乡', + value: 80 + }, + { + name: '信阳', + value: 45 + }, + { + name: '漯河', + value: 29 + } + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-scroll-ranking-board', + dictKey: 'TEXT_PROPERTIES', + value: '', + }, + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 600, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300, + }, + ], + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js new file mode 100644 index 0000000..ff59601 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js @@ -0,0 +1,300 @@ +/* + * @Descripttion: 表格 + */ +export const widgetTable = { + code: 'widget-table', + type: 'table', + tabName: '表格', + label: '表格', + icon: 'iconbiaoge', + options: { + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '表格', + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'center' + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: '16' + }, + { + type: 'el-input-number', + label: '显示行数', + name: 'vis', + required: false, + placeholder: '', + value: '5' + }, + { + type: 'el-input-number', + label: '行高', + name: 'rowHeight', + required: false, + placeholder: '', + value: '50' + }, + { + type: 'el-switch', + label: '开启滚动', + name: 'isRoll', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-select', + label: '动画效果', + name: 'effect', + required: false, + placeholder: '', + selectOptions: [ + {code: 'topLoop', name: '上循环滚动'}, + {code: 'top', name: '上滚动'}, + ], + value: 'topLoop' + }, + { + type: 'el-input-number', + label: '滚动间隔(毫秒)', + name: 'interTime', + required: false, + placeholder: '', + value: 2500 + }, + { + type: 'el-input-number', + label: '动效时间(毫秒)', + name: 'delayTime', + required: false, + placeholder: '', + value: 500 + }, + { + type: 'el-input-number', + label: '滚动个数', + name: 'scroll', + required: false, + placeholder: '', + value: 1 + }, + { + type: 'el-switch', + label: '边框线', + name: 'isLine', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '边框宽度', + name: 'borderWidth', + required: false, + placeholder: '', + value: 1 + }, + { + type: 'vue-color', + label: '边框颜色', + name: 'borderColor', + required: false, + placeholder: '', + value: '#fff' + }, + [ + { + name: '表头设置', + list: [ + { + type: 'el-switch', + label: '表头显隐', + name: 'isHeader', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '表头颜色', + name: 'headColor', + require: false, + placeholder: '', + value: '#fff', + }, + { + type: 'vue-color', + label: '表头背景', + name: 'headBackColor', + require: false, + placeholder: '', + value: '#05a8ee', + }, + ], + }, + { + name: '表体设置', + list: [ + { + type: 'vue-color', + label: '文字颜色', + name: 'bodyColor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'vue-color', + label: '表格背景色', + name: 'tableBgColor', + require: false, + placeholder: '', + value: '', + }, + { + type: 'vue-color', + label: '奇行颜色', + name: 'oldColor', + require: false, + placeholder: '', + value: '#0a2732', + }, + { + type: 'vue-color', + label: '偶行颜色', + name: 'eventColor', + required: false, + placeholder: '', + value: '#003b51' + } + ], + }, + ], + { + type: 'dynamic-add-table', + label: '', + name: 'dynamicAddTable', + required: false, + placeholder: '', + value: [ + {name: '日期', key: 'date', width: '50%'}, + {name: '姓名', key: 'name', width: '50%'}, + {name: '地址', key: 'address', width: '200%', + }] + } + ], + data: [ + { + type: 'el-radio-group', + label: '数据类型', + name: 'dataType', + require: false, + placeholder: '', + selectValue: true, + selectOptions: [ + { + code: 'staticData', + name: '静态数据', + }, + { + code: 'dynamicData', + name: '动态数据', + }, + ], + value: 'staticData', + }, + { + type: 'el-input-number', + label: '刷新时间(毫秒)', + name: 'refreshTime', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + value: 30000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'}, + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'}, + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'}, + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'}, + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0005'}, + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0006'}, + {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0007'}, + ], + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + chartType: 'widget-table', + dictKey: 'TEXT_PROPERTIES', + value: '', + }, + ], + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 600, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 300, + }, + ] + } + } diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js new file mode 100644 index 0000000..0436426 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js @@ -0,0 +1,159 @@ +/* + * @Descripttion: 数字翻牌器，单个带边框 + */ +export const widgetDigitalFlopSingle= { + code: 'widget-digital-flop-single', + type: 'text', + tabName: '文本栏', + label: '数字(边框)', + icon: 'iconshujujieruKafkajiqun', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '数字(边框)', + }, + { + type: 'el-input-text', + label: '数字数值', + name: 'numberText', + required: false, + placeholder: '', + value: '0', + }, + { + type: 'el-select-static', + label: '主数据源数据', + name: 'slectedDataType', + require: false, + placeholder: '', + selectOptions: [], + value: '', + }, + { + type: 'el-input-text', + label: '内容模版', + name: 'content', + required: false, + placeholder: '', + value: '数字{nt}', + }, + { + type: 'el-switch', + label: '千位符显示', + name: 'isFormatterNum', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '小数位数', + name: 'toFixed', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-select', + label: '水平对齐方式', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'} + ], + value: 'center' + }, + { + type: 'el-input-number', + label: '动效帧数', + name: 'animationFrame', + required: false, + placeholder: '', + value: 100, + }, + [ + { + name: '文字样式设置', + list: [ + { + type: 'vue-color', + label: '颜色', + name: 'fill', + required: false, + placeholder: '', + value: '#3de7c9' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'fontSize', + required: false, + placeholder: '', + value: 30, + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '更粗'}, + {code: 'lighter', name: '更细'}, + ], + value: 'normal' + }, + ], + } + ] + ], + // 数据 + data: [], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 600, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 100, + }, + ], + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js index f3bd9c4..b16d1ab 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js @@ -5,7 +5,7 @@ export const widgetDigitalFlop= { code: 'widget-digital-flop', type: 'text', tabName: '文本栏', - label: '数字翻牌器', + label: '数字翻牌', icon: 'iconshujujieruKafkajiqun', options: { // 配置 @@ -16,7 +16,7 @@ export const widgetDigitalFlop= { name: 'layerName', required: false, placeholder: '', - value: '数字翻牌器', + value: '数字翻牌', }, { type: 'el-input-text', @@ -152,7 +152,7 @@ export const widgetDigitalFlop= { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 50, }, ], } diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js deleted file mode 100644 index 48074aa..0000000 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js +++ /dev/null @@ -1,191 +0,0 @@ -/* - * @Descripttion: 排名轮播表 - */ -export const widgetScrollRankingBoard= { - code: 'widget-scroll-ranking-board', - type: 'text', - tabName: '文本栏', - label: '排名轮播表', - icon: 'icon511tongji_shutu', - options: { - // 配置 - setup: [ - { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '排名轮播表', - }, - { - type: 'el-input-number', - label: '表行数', - name: 'rowNum', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'el-input-number', - label: '滚动间隔(毫秒)', - name: 'waitTime', - required: false, - placeholder: '', - value: 2500, - }, - { - type: 'el-select', - label: '动画效果', - name: 'carousel', - required: false, - placeholder: '', - selectOptions: [ - {code: 'single', name: '单条'}, - {code: 'page', name: '整页'} - ], - value: 'single' - }, - { - type: 'el-input-text', - label: '数值单位', - name: 'unit', - required: false, - placeholder: '', - value: '', - }, - { - type: 'el-switch', - label: '自动排序', - name: 'sort', - required: false, - placeholder: '', - value: true - }, - { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - value: '' - }, - ], - // 数据 - data: [ - { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ - { - code: 'staticData', - name: '静态数据', - }, - { - code: 'dynamicData', - name: '动态数据', - }, - ], - value: 'staticData', - }, - { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 30000 - }, - { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: [ - { - name: '周口', - value: 55 - }, - { - name: '南阳', - value: 120 - }, - { - name: '西峡', - value: 78 - }, - { - name: '驻马店', - value: 66 - }, - { - name: '新乡', - value: 80 - }, - { - name: '信阳', - value: 45 - }, - { - name: '漯河', - value: 29 - } - ], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-scroll-ranking-board', - dictKey: 'TEXT_PROPERTIES', - value: '', - }, - ], - // 坐标 - position: [ - { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 600, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 300, - }, - ], - } -} diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js deleted file mode 100644 index 3e922e0..0000000 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js +++ /dev/null @@ -1,305 +0,0 @@ -/* - * @Descripttion: 表格json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:16:10 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:19:54 - */ -export const widgetTable = { - code: 'widget-table', - type: 'text', - tabName: '文本栏', - label: '表格', - icon: 'iconbiaoge', - options: { - setup: [ - { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '表格', - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSize', - required: false, - placeholder: '', - value: '16' - }, - { - type: 'el-input-number', - label: '显示行数', - name: 'vis', - required: false, - placeholder: '', - value: '5' - }, - { - type: 'el-input-number', - label: '行高', - name: 'rowHeight', - required: false, - placeholder: '', - value: '50' - }, - { - type: 'el-switch', - label: '开启滚动', - name: 'isRoll', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-select', - label: '动画效果', - name: 'effect', - required: false, - placeholder: '', - selectOptions: [ - {code: 'topLoop', name: '上循环滚动'}, - {code: 'top', name: '上滚动'}, - ], - value: 'topLoop' - }, - { - type: 'el-input-number', - label: '滚动间隔(毫秒)', - name: 'interTime', - required: false, - placeholder: '', - value: 2500 - }, - { - type: 'el-input-number', - label: '动效时间(毫秒)', - name: 'delayTime', - required: false, - placeholder: '', - value: 500 - }, - { - type: 'el-input-number', - label: '滚动个数', - name: 'scroll', - required: false, - placeholder: '', - value: 1 - }, - { - type: 'el-switch', - label: '边框线', - name: 'isLine', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-input-number', - label: '边框宽度', - name: 'borderWidth', - required: false, - placeholder: '', - value: 1 - }, - { - type: 'vue-color', - label: '边框颜色', - name: 'borderColor', - required: false, - placeholder: '', - value: '#fff' - }, - [ - { - name: '表头设置', - list: [ - { - type: 'el-switch', - label: '表头显隐', - name: 'isHeader', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '表头颜色', - name: 'headColor', - require: false, - placeholder: '', - value: '#fff', - }, - { - type: 'vue-color', - label: '表头背景', - name: 'headBackColor', - require: false, - placeholder: '', - value: '#05a8ee', - }, - ], - }, - { - name: '表体设置', - list: [ - { - type: 'vue-color', - label: '文字颜色', - name: 'bodyColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'vue-color', - label: '表格背景色', - name: 'tableBgColor', - require: false, - placeholder: '', - value: '', - }, - { - type: 'vue-color', - label: '奇行颜色', - name: 'oldColor', - require: false, - placeholder: '', - value: '#0a2732', - }, - { - type: 'vue-color', - label: '偶行颜色', - name: 'eventColor', - required: false, - placeholder: '', - value: '#003b51' - } - ], - }, - ], - { - type: 'dynamic-add-table', - label: '', - name: 'dynamicAddTable', - required: false, - placeholder: '', - value: [ - {name: '日期', key: 'date', width: '50%'}, - {name: '姓名', key: 'name', width: '50%'}, - {name: '地址', key: 'address', width: '200%', - }] - } - ], - data: [ - { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ - { - code: 'staticData', - name: '静态数据', - }, - { - code: 'dynamicData', - name: '动态数据', - }, - ], - value: 'staticData', - }, - { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 30000 - }, - { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: [ - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'}, - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'}, - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'}, - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'}, - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0005'}, - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0006'}, - {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0007'}, - ], - }, - { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - chartType: 'widget-table', - dictKey: 'TEXT_PROPERTIES', - value: '', - }, - ], - position: [ - { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 600, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 300, - }, - ] - } - } diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js deleted file mode 100644 index 1e48aa5..0000000 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js +++ /dev/null @@ -1,97 +0,0 @@ -export const widgetVideo = { - code: 'widget-video', - type: 'text', - tabName: '文本栏', - label: '视频', - icon: 'iconshipin', - options: { - // 配置 - setup: [ - { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: 'video', - }, - { - type: 'el-input-text', - label: '地址', - name: 'videoAdress', - required: false, - placeholder: '', - value: 'https://www.w3school.com.cn//i/movie.ogg', - }, - // { - // type: 'el-switch', - // label: '自动播放', - // name: 'autoplay', - // required: false, - // placeholder: '', - // value: true - // }, - // { - // type: 'el-switch', - // label: '循环播放', - // name: 'loop', - // required: false, - // placeholder: '', - // value: true - // }, - // { - // type: 'el-switch', - // label: '播放按钮显示', - // name: 'controls', - // required: false, - // placeholder: '', - // value: true - // }, - { - type: 'el-switch', - label: '静音播放', - name: 'muted', - required: false, - placeholder: '', - value: true - }, - ], - // 数据 - data: [], - // 坐标 - position: [ - { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, - }, - { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 300, - }, - { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, - }, - ], - } -} diff --git a/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js b/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js new file mode 100644 index 0000000..3a0eb36 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js @@ -0,0 +1,97 @@ +export const widgetVideo = { + code: 'widget-video', + type: 'video', + tabName: '播放器', + label: '视频', + icon: 'iconshipin', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: 'video', + }, + { + type: 'el-input-text', + label: '地址', + name: 'videoAdress', + required: false, + placeholder: '', + value: 'https://www.w3school.com.cn//i/movie.ogg', + }, + // { + // type: 'el-switch', + // label: '自动播放', + // name: 'autoplay', + // required: false, + // placeholder: '', + // value: true + // }, + // { + // type: 'el-switch', + // label: '循环播放', + // name: 'loop', + // required: false, + // placeholder: '', + // value: true + // }, + // { + // type: 'el-switch', + // label: '播放按钮显示', + // name: 'controls', + // required: false, + // placeholder: '', + // value: true + // }, + { + type: 'el-switch', + label: '静音播放', + name: 'muted', + required: false, + placeholder: '', + value: true + }, + ], + // 数据 + data: [], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 300, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js index cbfc807..9fad3a8 100644 --- a/src/views/bigscreenDesigner/designer/tools/main.js +++ b/src/views/bigscreenDesigner/designer/tools/main.js @@ -8,8 +8,8 @@ import { widgetText } from "./configure/texts/widget-text" import { widgetMarquee } from "./configure/texts/widget-marquee" import { widgetHref } from "./configure/texts/widget-href" import { widgetTime } from "./configure/texts/widget-time" -import { widgetVideo } from "./configure/texts/widget-video" -import { widgetTable } from "./configure/texts/widget-table" +import { widgetVideo } from "./configure/video/widget-video" +import { widgetTable } from "./configure/table/widget-table" import { widgetIframe } from "./configure/texts/widget-iframe" // import { widgetUniversal } from "./configure/widget-universal" import { widgetBarchart } from "./configure/barCharts/widget-barchart" @@ -37,9 +37,12 @@ import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-st import { widgetProgress } from "./configure/percentCharts/widget-progress"; import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond"; import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop"; -import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board"; +import {widgetScrollRankingBoard} from "./configure/table/widget-scroll-ranking-board"; import {widgetActiveRingChart} from "./configure/pieCharts/widget-active-ring-chart"; import {widgetConicalColumnChart} from "./configure/funnelCharts/widget-conical-column-chart"; +import {widgetBorderBoxFloat} from "./configure/div/widget-border-box-float"; +import {widgetDigitalFlopSingle} from "./configure/texts/widget-digital-flop-single"; +import {widgetSvg} from "./configure/div/widget-svg"; export const widgetTool = [ @@ -55,7 +58,6 @@ export const widgetTool = [ widgetHref, widgetTime, widgetIframe, - widgetVideo, widgetWaterLevelPond, widgetDigitalFlop, widgetTable, @@ -87,5 +89,9 @@ export const widgetTool = [ widgetBarLineStack, widgetProgress, widgetActiveRingChart, - widgetConicalColumnChart + widgetConicalColumnChart, + widgetVideo, + widgetBorderBoxFloat, + widgetDigitalFlopSingle, + widgetSvg, ] diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBoxFloat.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBoxFloat.vue new file mode 100644 index 0000000..90f8baf --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBoxFloat.vue @@ -0,0 +1,165 @@ + + + + + diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue new file mode 100644 index 0000000..faf46d9 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue b/src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue index 837f6c3..af946e9 100644 --- a/src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue +++ b/src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue @@ -148,7 +148,9 @@ export default { }); }, renderingFn(val) { + // console.log("设置静态数据",val) this.options.data=val; + this.options={...this.options}; } } diff --git a/src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue b/src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue new file mode 100644 index 0000000..546b0bc --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue @@ -0,0 +1,148 @@ + + + + diff --git a/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue b/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue new file mode 100644 index 0000000..4d4fc07 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue @@ -0,0 +1,257 @@ + + + diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue index b55d306..c993957 100644 --- a/src/views/bigscreenDesigner/designer/widget/temp.vue +++ b/src/views/bigscreenDesigner/designer/widget/temp.vue @@ -11,7 +11,7 @@ import WidgetMarquee from "./text/widgetMarquee.vue"; import widgetTime from "./text/widgetTime.vue"; import widgetImage from "./div/widgetImage.vue"; import widgetSlider from "./div/widgetSlider.vue"; -import widgetVideo from "./text/widgetVideo.vue"; +import widgetVideo from "./video/widgetVideo.vue"; import WidgetIframe from "./text/widgetIframe.vue"; import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetLinechart from "./line/widgetLinechart.vue"; @@ -21,7 +21,7 @@ import WidgetPiechart from "./pie/widgetPiechart.vue"; import WidgetFunnel from "./funnel/widgetFunnel.vue"; import WidgetGauge from "./percent/widgetGauge.vue"; import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; -import widgetTable from "./text/widgetTable.vue"; +import widgetTable from "./table/widgetTable.vue"; import widgetLineMap from "./map/widgetLineMap.vue"; import widgetPiePercentageChart from "./percent/widgetPiePercentageChart"; import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; @@ -36,16 +36,18 @@ import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetRadar from "./radar/widgetRadar"; import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; import widgetDecorate from "./decorate/decorate.vue"; -// import widgetDiv from "./div/widgetDiv.vue"; +import widgetBorderBoxFloat from "./div/widgetBorderBoxFloat"; import widgetBorderBox from "./div/widgetBorderBox"; import widgetProgress from "./percent/widgetProgress"; import widgetDecoration from "./div/widgetDecoration"; import widgetCapsuleChart from "./bar/widgetCapsuleChart"; import widgetWaterLevelPond from "./text/widgetWaterLevelPond"; import widgetDigitalFlop from "./text/widgetDigitalFlop"; -import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard"; +import widgetScrollRankingBoard from "./table/widgetScrollRankingBoard"; import widgetActiveRingChart from "./pie/widgetActiveRingChart"; import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart"; +import widgetDigitalFlopSingle from "./text/widgetDigitalFlopSingle"; +import widgetSvg from "./div/widgetSvg"; export default { name: "WidgetTemp", @@ -90,7 +92,10 @@ export default { widgetDigitalFlop, widgetScrollRankingBoard, widgetActiveRingChart, - widgetConicalColumnChart + widgetConicalColumnChart, + widgetBorderBoxFloat, + widgetDigitalFlopSingle, + widgetSvg, }, model: { prop: "value", diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue index dceb107..b4d5cf4 100644 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue +++ b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue @@ -45,6 +45,18 @@ export default { computed: { ...mapState('dataSource', ['staticData']), styleObj() { + /*数字初始化*/ + const {slectedDataType,numberText} = this.optionsSetup; + let datav = this.staticData[slectedDataType] || numberText; + let dataArray = datav.toString().split(","); + const numArray=[]; + if(this.isNotBlankArray(dataArray)){ + dataArray.forEach(num=>{ + numArray.push(parseInt(num)); + }); + } + this.options.number = numArray; + this.options={...this.options}; return { position: this.ispreview ? "absolute" : "static", width: this.optionsStyle.width + "px", @@ -96,7 +108,6 @@ export default { numArray.push(parseInt(num)); }); } - // console.log("返回数据number",numArray); this.options.number = numArray; }, //字体修改 diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue new file mode 100644 index 0000000..b72ca4f --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue @@ -0,0 +1,225 @@ + + + + diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue deleted file mode 100644 index 546b0bc..0000000 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue +++ /dev/null @@ -1,148 +0,0 @@ - - - - diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue deleted file mode 100644 index 4d4fc07..0000000 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue +++ /dev/null @@ -1,257 +0,0 @@ - - - diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue deleted file mode 100644 index 7b7fa18..0000000 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - - - diff --git a/src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue b/src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue new file mode 100644 index 0000000..7b7fa18 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue index b7ede0b..9008519 100644 --- a/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -20,7 +20,7 @@ import widgetHref from "./text/widgetHref.vue"; import widgetText from "./text/widgetText.vue"; import WidgetMarquee from "./text/widgetMarquee.vue"; import widgetTime from "./text/widgetTime.vue"; -import widgetVideo from "./text/widgetVideo.vue"; +import widgetVideo from "./video/widgetVideo.vue"; import WidgetIframe from "./text/widgetIframe.vue"; import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; @@ -30,7 +30,7 @@ import WidgetPiechart from "./pie/widgetPiechart.vue"; import WidgetFunnel from "./funnel/widgetFunnel.vue"; import WidgetGauge from "./percent/widgetGauge.vue"; import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; -import widgetTable from "./text/widgetTable.vue"; +import widgetTable from "./table/widgetTable.vue"; import widgetLineMap from "./map/widgetLineMap.vue"; import widgetPiePercentageChart from "./percent/widgetPiePercentageChart"; import widgetAirBubbleMap from "./map/widgetAirBubbleMap"; @@ -45,7 +45,6 @@ import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetRadar from "./radar/widgetRadar"; import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; import widgetDecorate from "./decorate/decorate.vue"; -// import widgetDiv from "./div/widgetDiv.vue"; import widgetImage from "./div/widgetImage.vue"; import widgetSlider from "./div/widgetSlider.vue"; import widgetBorderBox from "./div/widgetBorderBox.vue"; @@ -54,9 +53,12 @@ import widgetCapsuleChart from "./bar/widgetCapsuleChart"; import widgetProgress from "./percent/widgetProgress"; import widgetWaterLevelPond from "./text/widgetWaterLevelPond"; import widgetDigitalFlop from "./text/widgetDigitalFlop"; -import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard"; +import widgetScrollRankingBoard from "./table/widgetScrollRankingBoard"; import widgetActiveRingChart from "./pie/widgetActiveRingChart"; import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart"; +import widgetBorderBoxFloat from "./div/widgetBorderBoxFloat"; +import widgetDigitalFlopSingle from "./text/widgetDigitalFlopSingle"; +import widgetSvg from "./div/widgetSvg"; export default { name: "Widget", components: { @@ -100,7 +102,10 @@ export default { widgetDigitalFlop, widgetScrollRankingBoard, widgetActiveRingChart, - widgetConicalColumnChart + widgetConicalColumnChart, + widgetBorderBoxFloat, + widgetDigitalFlopSingle, + widgetSvg, }, model: { prop: "value", diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 14436a5..138a185 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -3,12 +3,12 @@ --> @@ -46,7 +46,7 @@ export default { #e9f0fb, #5bc4ef ); /* Firefox 3.6 - 15 */ - background: linear-gradient(75deg, #e9f0fb, #e9f0fb); + background: linear-gradient(75deg, #010520, #020620); .position { padding-left: 10px; padding-right: 10px; diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue index 2e95413..124fdad 100644 --- a/src/views/layout/components/Sidebar/index.vue +++ b/src/views/layout/components/Sidebar/index.vue @@ -3,7 +3,7 @@
- V0.9.9 + V2023.1
-
上海小羚羊大屏报表系统
+
上海小羚羊数据可视化平台
-- libgit2 0.22.2