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 --- a/src/assets/images/index-bg/index1.jpg +++ /dev/null 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 --- a/src/assets/images/index-bg/index2.jpg +++ /dev/null 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 --- a/src/assets/images/index-bg/index3.jpg +++ /dev/null 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 --- a/src/assets/images/index-bg/index4.jpg +++ /dev/null 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/texts/widget-scroll-ranking-board.js b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js index 48074aa..526f727 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js @@ -3,8 +3,8 @@ */ export const widgetScrollRankingBoard= { code: 'widget-scroll-ranking-board', - type: 'text', - tabName: '文本栏', + type: 'table', + tabName: '表格', label: '排名轮播表', icon: 'icon511tongji_shutu', options: { diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js index 3e922e0..ff59601 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js @@ -1,15 +1,10 @@ /* - * @Descripttion: 表格json - * @version: - * @Author: qianlishi - * @Date: 2021-08-29 07:16:10 - * @LastEditors: qianlishi - * @LastEditTime: 2021-09-28 14:19:54 + * @Descripttion: 表格 */ export const widgetTable = { code: 'widget-table', - type: 'text', - tabName: '文本栏', + type: 'table', + tabName: '表格', label: '表格', icon: 'iconbiaoge', options: { 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-video.js b/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js index 1e48aa5..3a0eb36 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js @@ -1,7 +1,7 @@ export const widgetVideo = { code: 'widget-video', - type: 'text', - tabName: '文本栏', + type: 'video', + tabName: '播放器', label: '视频', icon: 'iconshipin', options: { 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/text/widgetScrollRankingBoard.vue b/src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue index 546b0bc..546b0bc 100644 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue +++ b/src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue b/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue index 4d4fc07..4d4fc07 100644 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue +++ b/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue 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/widgetVideo.vue b/src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue index 7b7fa18..7b7fa18 100644 --- a/src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue +++ b/src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue 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
-
上海小羚羊大屏报表系统
+
上海小羚羊数据可视化平台