qiangmj / report-ui

You need to sign in before continuing.

Commit 9652d5c032f6b7ea942ed78b021e150f47ebcb57

Authored by qianbao
1 parent ee49c236

1、添加表格拖拽排序功能，添加动态图层 

2、添加动态排名组件
3、SVG组件
4、添加排名轮播表
5、添加浮动边框（待完善）
6、添加自定义参数，动态数据源参数自定义
7、自定义参数、数据集返回值类型 添加分组区分
8、添加数字翻牌
9、添加数字翻牌【数字可设置边框、设置标题，标题可设置上下左右】（待完善）
10、视频播放器添加是否静音属性，默认循环播放。
Inline Side-by-side
Showing 50 changed files with 3630 additions and 137 deletions
config/dev.env.js
  View file @9652d5c
... ... @@ -4,6 +4,6 @@ const prodEnv = require('./prod.env')
4 4  
5 5 module.exports = merge(prodEnv, {
6 6 NODE_ENV: '"development"',
7   - BASE_API: '"http://127.0.0.1:8080/xlyReport"',
8   - API_WS: '"ws://127.0.0.1:8080/api/websocket"'
  7 + BASE_API: '"http://weberp.xlyprint.cn:8080/xlyReport"',
  8 + //API_WS: '"ws://127.0.0.1:8080/api/websocket"'
9 9 })
... ...
config/index.js
  View file @9652d5c
1 1 'use strict'
2   -// Template version: 1.2.6
  2 +// Template version: 1.2.6 npm run build:dev
3 3 // see http://vuejs-templates.github.io/webpack for documentation.
4 4  
5 5 const path = require('path')
... ... @@ -7,6 +7,7 @@ const path = require('path')
7 7 module.exports = {
8 8 dev: {
9 9 // Paths
  10 + //assetsSubDirectory: 'BI/static',//正式打包 因为nginx转发原因，需要指定路径 使用这个
10 11 assetsSubDirectory: 'static',
11 12 assetsPublicPath: '/',
12 13 proxyTable: {},
... ... @@ -48,6 +49,7 @@ module.exports = {
48 49  
49 50 // Paths
50 51 assetsRoot: path.resolve(__dirname, '../dist'),
  52 + //assetsSubDirectory: 'BI/static', //正式打包 因为nginx转发原因，需要指定路径
51 53 assetsSubDirectory: 'static',
52 54  
53 55 /**
... ...
index.html
  View file @9652d5c
... ... @@ -4,7 +4,7 @@
4 4 <head>
5 5 <meta charset="utf-8">
6 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7   - <title>上海小羚羊大屏报表系统</title>
  7 + <title>上海小羚羊数据可视化平台</title>
8 8 <link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
9 9 <link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
10 10 <link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
... ...
src/assets/images/index-bg/index1.jpg deleted
View file @ee49c23

129 KB
src/assets/images/index-bg/index2.jpg deleted
View file @ee49c23

745 KB
src/assets/images/index-bg/index3.jpg deleted
View file @ee49c23

325 KB
src/assets/images/index-bg/index4.jpg deleted
View file @ee49c23

280 KB
src/assets/styles/animate.css 0 → 100644
  View file @9652d5c
  1 +/*动画库*/
  2 +/*内置时间*/
  3 +.a-time003 {
  4 + animation-duration: 0.3s;
  5 + -webkit-animation-duration: 0.3s;
  6 +}
  7 +.a-time005 {
  8 + animation-duration: 0.5s;
  9 + -webkit-animation-duration: 0.5s;
  10 +}
  11 +.a-time007 {
  12 + animation-duration: 0.7s;
  13 + -webkit-animation-duration: 0.7s;
  14 +}
  15 +.a-time009 {
  16 + animation-duration: 0.9s;
  17 + -webkit-animation-duration: 0.9s;
  18 +}
  19 +.a-time1 {
  20 + animation-duration: 1s;
  21 + -webkit-animation-duration: 1s;
  22 +}
  23 +.a-time013 {
  24 + animation-duration: 1.3s;
  25 + -webkit-animation-duration: 1.3s;
  26 +}
  27 +.a-time015 {
  28 + animation-duration: 1.5s;
  29 + -webkit-animation-duration: 1.5s;
  30 +}
  31 +.a-time017 {
  32 + animation-duration: 1.7s;
  33 + -webkit-animation-duration: 1.7s;
  34 +}
  35 +.a-time019 {
  36 + animation-duration: 1.9s;
  37 + -webkit-animation-duration: 1.9s;
  38 +}
  39 +.a-time2 {
  40 + animation-duration: 2s;
  41 + -webkit-animation-duration: 2s;
  42 +}
  43 +.a-time023 {
  44 + animation-duration: 2.3s;
  45 + -webkit-animation-duration: 2.3s;
  46 +}
  47 +.a-time025 {
  48 + animation-duration: 2.5s;
  49 + -webkit-animation-duration: 2.5s;
  50 +}
  51 +.a-time027 {
  52 + animation-duration: 2.7s;
  53 + -webkit-animation-duration: 2.7s;
  54 +}
  55 +.a-time029 {
  56 + animation-duration: 2.9s;
  57 + -webkit-animation-duration: 2.9s;
  58 +}
  59 +.a-time3 {
  60 + animation-duration: 3s;
  61 + -webkit-animation-duration: 3s;
  62 +}
  63 +.a-time033 {
  64 + animation-duration: 3.3s;
  65 + -webkit-animation-duration: 3.3s;
  66 +}
  67 +.a-time035 {
  68 + animation-duration: 3.5s;
  69 + -webkit-animation-duration: 3.5s;
  70 +}
  71 +.a-time037 {
  72 + animation-duration: 3.7s;
  73 + -webkit-animation-duration: 3.7s;
  74 +}
  75 +.a-time039 {
  76 + animation-duration: 3.9s;
  77 + -webkit-animation-duration: 3.9s;
  78 +}
  79 +.a-time4 {
  80 + animation-duration: 4s;
  81 + -webkit-animation-duration: 4s;
  82 +}
  83 +.a-time043 {
  84 + animation-duration: 4.3s;
  85 + -webkit-animation-duration: 4.3s;
  86 +}
  87 +.a-time045 {
  88 + animation-duration: 4.5s;
  89 + -webkit-animation-duration: 4.5s;
  90 +}
  91 +.a-time047 {
  92 + animation-duration: 4.7s;
  93 + -webkit-animation-duration: 4.7s;
  94 +}
  95 +.a-time049 {
  96 + animation-duration: 4.9s;
  97 + -webkit-animation-duration: 4.9s;
  98 +}
  99 +.a-time5 {
  100 + animation-duration: 5s;
  101 + -webkit-animation-duration: 5s;
  102 +}
  103 +.a-time053 {
  104 + animation-duration: 5.3s;
  105 + -webkit-animation-duration: 5.3s;
  106 +}
  107 +.a-time055 {
  108 + animation-duration: 5.5s;
  109 + -webkit-animation-duration: 5.5s;
  110 +}
  111 +.a-time057 {
  112 + animation-duration: 5.7s;
  113 + -webkit-animation-duration: 5.7s;
  114 +}
  115 +.a-time059 {
  116 + animation-duration: 5.9s;
  117 + -webkit-animation-duration: 5.9s;
  118 +}
  119 +.a-time6 {
  120 + animation-duration: 6s;
  121 + -webkit-animation-duration: 6s;
  122 +}
  123 +.a-time063 {
  124 + animation-duration: 6.3s;
  125 + -webkit-animation-duration: 6.3s;
  126 +}
  127 +.a-time065 {
  128 + animation-duration: 6.5s;
  129 + -webkit-animation-duration: 6.5s;
  130 +}
  131 +.a-time067 {
  132 + animation-duration: 6.7s;
  133 + -webkit-animation-duration: 6.7s;
  134 +}
  135 +.a-time069 {
  136 + animation-duration: 6.9s;
  137 + -webkit-animation-duration: 6.9s;
  138 +}
  139 +.a-time7 {
  140 + animation-duration: 7s;
  141 + -webkit-animation-duration: 7s;
  142 +}
  143 +.a-time073 {
  144 + animation-duration: 7.3s;
  145 + -webkit-animation-duration: 7.3s;
  146 +}
  147 +.a-time075 {
  148 + animation-duration: 7.5s;
  149 + -webkit-animation-duration: 7.5s;
  150 +}
  151 +.a-time077 {
  152 + animation-duration: 7.7s;
  153 + -webkit-animation-duration: 7.7s;
  154 +}
  155 +.a-time079 {
  156 + animation-duration: 7.9s;
  157 + -webkit-animation-duration: 7.9s;
  158 +}
  159 +.a-time8 {
  160 + animation-duration: 8s;
  161 + -webkit-animation-duration: 8s;
  162 +}
  163 +.a-time083 {
  164 + animation-duration: 8.3s;
  165 + -webkit-animation-duration: 8.3s;
  166 +}
  167 +.a-time085 {
  168 + animation-duration: 8.5s;
  169 + -webkit-animation-duration: 8.5s;
  170 +}
  171 +.a-time087 {
  172 + animation-duration: 8.7s;
  173 + -webkit-animation-duration: 8.7s;
  174 +}
  175 +.a-time089 {
  176 + animation-duration: 8.9s;
  177 + -webkit-animation-duration: 8.9s;
  178 +}
  179 +.a-time9 {
  180 + animation-duration: 9s;
  181 + -webkit-animation-duration: 9s;
  182 +}
  183 +.a-time093 {
  184 + animation-duration: 9.3s;
  185 + -webkit-animation-duration: 9.3s;
  186 +}
  187 +.a-time095 {
  188 + animation-duration: 9.5s;
  189 + -webkit-animation-duration: 9.5s;
  190 +}
  191 +.a-time097 {
  192 + animation-duration: 9.7s;
  193 + -webkit-animation-duration: 9.7s;
  194 +}
  195 +.a-time099 {
  196 + animation-duration: 9.9s;
  197 + -webkit-animation-duration: 9.9s;
  198 +}
  199 +.a-time10 {
  200 + animation-duration: 10s;
  201 + -webkit-animation-duration: 10s;
  202 +}
  203 +.a-time103 {
  204 + animation-duration: 10.3s;
  205 + -webkit-animation-duration: 10.3s;
  206 +}
  207 +.a-time105 {
  208 + animation-duration: 10.5s;
  209 + -webkit-animation-duration: 10.5s;
  210 +}
  211 +.a-time107 {
  212 + animation-duration: 10.7s;
  213 + -webkit-animation-duration: 10.7s;
  214 +}
  215 +.a-time109 {
  216 + animation-duration: 10.9s;
  217 + -webkit-animation-duration: 10.9s;
  218 +}
  219 +.a-time11 {
  220 + animation-duration: 11s;
  221 + -webkit-animation-duration: 11s;
  222 +}
  223 +.a-time113 {
  224 + animation-duration: 11.3s;
  225 + -webkit-animation-duration: 11.3s;
  226 +}
  227 +.a-time115 {
  228 + animation-duration: 11.5s;
  229 + -webkit-animation-duration: 11.5s;
  230 +}
  231 +.a-time117 {
  232 + animation-duration: 11.7s;
  233 + -webkit-animation-duration: 11.7s;
  234 +}
  235 +.a-time119 {
  236 + animation-duration: 11.9s;
  237 + -webkit-animation-duration: 11.9s;
  238 +}
  239 +.a-time12 {
  240 + animation-duration: 12s;
  241 + -webkit-animation-duration: 12s;
  242 +}
  243 +.a-time123 {
  244 + animation-duration: 12.3s;
  245 + -webkit-animation-duration: 12.3s;
  246 +}
  247 +.a-time125 {
  248 + animation-duration: 12.5s;
  249 + -webkit-animation-duration: 12.5s;
  250 +}
  251 +.a-time127 {
  252 + animation-duration: 12.7s;
  253 + -webkit-animation-duration: 12.7s;
  254 +}
  255 +.a-time129 {
  256 + animation-duration: 12.9s;
  257 + -webkit-animation-duration: 12.9s;
  258 +}
  259 +.a-time13 {
  260 + animation-duration: 13s;
  261 + -webkit-animation-duration: 13s;
  262 +}
  263 +.a-time133 {
  264 + animation-duration: 13.3s;
  265 + -webkit-animation-duration: 13.3s;
  266 +}
  267 +.a-time135 {
  268 + animation-duration: 13.5s;
  269 + -webkit-animation-duration: 13.5s;
  270 +}
  271 +.a-time137 {
  272 + animation-duration: 13.7s;
  273 + -webkit-animation-duration: 13.7s;
  274 +}
  275 +.a-time139 {
  276 + animation-duration: 13.9s;
  277 + -webkit-animation-duration: 13.9s;
  278 +}
  279 +.a-time14 {
  280 + animation-duration: 14s;
  281 + -webkit-animation-duration: 14s;
  282 +}
  283 +.a-time143 {
  284 + animation-duration: 15.3s;
  285 + -webkit-animation-duration: 15.3s;
  286 +}
  287 +.a-time145 {
  288 + animation-duration: 15.5s;
  289 + -webkit-animation-duration: 15.5s;
  290 +}
  291 +.a-time147 {
  292 + animation-duration: 15.7s;
  293 + -webkit-animation-duration: 15.7s;
  294 +}
  295 +.a-time149 {
  296 + animation-duration: 15.9s;
  297 + -webkit-animation-duration: 15.9s;
  298 +}
  299 +.a-time15 {
  300 + animation-duration: 15s;
  301 + -webkit-animation-duration: 15s;
  302 +}
  303 +.a-time153 {
  304 + animation-duration: 15.3s;
  305 + -webkit-animation-duration: 15.3s;
  306 +}
  307 +.a-time155 {
  308 + animation-duration: 15.5s;
  309 + -webkit-animation-duration: 15.5s;
  310 +}
  311 +.a-time157 {
  312 + animation-duration: 15.7s;
  313 + -webkit-animation-duration: 15.7s;
  314 +}
  315 +.a-time159 {
  316 + animation-duration: 15.9s;
  317 + -webkit-animation-duration: 15.9s;
  318 +}
  319 +/*内置延迟时间*/
  320 +.a-delay003 {
  321 + animation-delay: 0.3s;
  322 + -webkit-animation-delay: 0.3s;
  323 +}
  324 +.a-delay005 {
  325 + animation-delay: 0.5s;
  326 + -webkit-animation-delay: 0.5s;
  327 +}
  328 +.a-delay007 {
  329 + animation-delay: 0.7s;
  330 + -webkit-animation-delay: 0.7s;
  331 +}
  332 +.a-delay008 {
  333 + animation-delay: 0.8s;
  334 + -webkit-animation-delay: 0.8s;
  335 +}
  336 +.a-delay009 {
  337 + animation-delay: 0.9s;
  338 + -webkit-animation-delay: 0.9s;
  339 +}
  340 +.a-delay1 {
  341 + animation-delay: 1s;
  342 + -webkit-animation-delay: 1s;
  343 +}
  344 +.a-delay013 {
  345 + animation-delay: 1.3s;
  346 + -webkit-animation-delay: 1.3s;
  347 +}
  348 +.a-delay015 {
  349 + animation-delay: 1.5s;
  350 + -webkit-animation-delay: 1.5s;
  351 +}
  352 +.a-delay017 {
  353 + animation-delay: 1.7s;
  354 + -webkit-animation-delay: 1.7s;
  355 +}
  356 +.a-delay019 {
  357 + animation-delay: 1.9s;
  358 + -webkit-animation-delay: 1.9s;
  359 +}
  360 +.a-delay2 {
  361 + animation-delay: 2s;
  362 + -webkit-animation-delay: 2s;
  363 +}
  364 +.a-delay023 {
  365 + animation-delay: 2.3s;
  366 + -webkit-animation-delay: 2.3s;
  367 +}
  368 +.a-delay025 {
  369 + animation-delay: 2.5s;
  370 + -webkit-animation-delay: 2.5s;
  371 +}
  372 +.a-delay027 {
  373 + animation-delay: 2.7s;
  374 + -webkit-animation-delay: 2.7s;
  375 +}
  376 +.a-delay029 {
  377 + animation-delay: 2.9s;
  378 + -webkit-animation-delay: 2.9s;
  379 +}
  380 +.a-delay3 {
  381 + animation-delay: 3s;
  382 + -webkit-animation-delay: 3s;
  383 +}
  384 +.a-delay033 {
  385 + animation-delay: 3.3s;
  386 + -webkit-animation-delay: 3.3s;
  387 +}
  388 +.a-delay035 {
  389 + animation-delay: 3.5s;
  390 + -webkit-animation-delay: 3.5s;
  391 +}
  392 +.a-delay037 {
  393 + animation-delay: 3.7s;
  394 + -webkit-animation-delay: 3.7s;
  395 +}
  396 +.a-delay039 {
  397 + animation-delay: 3.9s;
  398 + -webkit-animation-delay: 3.9s;
  399 +}
  400 +.a-delay4 {
  401 + animation-delay: 4s;
  402 + -webkit-animation-delay: 4s;
  403 +}
  404 +.a-delay043 {
  405 + animation-delay: 4.3s;
  406 + -webkit-animation-delay: 4.3s;
  407 +}
  408 +.a-delay045 {
  409 + animation-delay: 4.5s;
  410 + -webkit-animation-delay: 4.5s;
  411 +}
  412 +.a-delay047 {
  413 + animation-delay: 4.7s;
  414 + -webkit-animation-delay: 4.7s;
  415 +}
  416 +.a-delay049 {
  417 + animation-delay: 4.9s;
  418 + -webkit-animation-delay: 4.9s;
  419 +}
  420 +.a-delay5 {
  421 + animation-delay: 5s;
  422 + -webkit-animation-delay: 5s;
  423 +}
  424 +.a-delay053 {
  425 + animation-delay: 5.3s;
  426 + -webkit-animation-delay: 5.3s;
  427 +}
  428 +.a-delay055 {
  429 + animation-delay: 5.5s;
  430 + -webkit-animation-delay: 5.5s;
  431 +}
  432 +.a-delay057 {
  433 + animation-delay: 5.7s;
  434 + -webkit-animation-delay: 5.7s;
  435 +}
  436 +.a-delay059 {
  437 + animation-delay: 5.9s;
  438 + -webkit-animation-delay: 5.9s;
  439 +}
  440 +.a-delay6 {
  441 + animation-delay: 5s;
  442 + -webkit-animation-delay: 5s;
  443 +}
  444 +.a-delay063 {
  445 + animation-delay: 5.3s;
  446 + -webkit-animation-delay: 5.3s;
  447 +}
  448 +.a-delay065 {
  449 + animation-delay: 5.5s;
  450 + -webkit-animation-delay: 5.5s;
  451 +}
  452 +.a-delay067 {
  453 + animation-delay: 5.7s;
  454 + -webkit-animation-delay: 5.7s;
  455 +}
  456 +.a-delay069 {
  457 + animation-delay: 5.9s;
  458 + -webkit-animation-delay: 5.9s;
  459 +}
  460 +.a-delay7 {
  461 + animation-delay: 7s;
  462 + -webkit-animation-delay: 7s;
  463 +}
  464 +.a-delay073 {
  465 + animation-delay: 7.3s;
  466 + -webkit-animation-delay: 7.3s;
  467 +}
  468 +.a-delay075 {
  469 + animation-delay: 7.5s;
  470 + -webkit-animation-delay: 7.5s;
  471 +}
  472 +.a-delay077 {
  473 + animation-delay: 7.7s;
  474 + -webkit-animation-delay: 7.7s;
  475 +}
  476 +.a-delay079 {
  477 + animation-delay: 7.9s;
  478 + -webkit-animation-delay: 7.9s;
  479 +}
  480 +.a-delay8 {
  481 + animation-delay: 8s;
  482 + -webkit-animation-delay: 8s;
  483 +}
  484 +.a-delay083 {
  485 + animation-delay: 8.3s;
  486 + -webkit-animation-delay: 8.3s;
  487 +}
  488 +.a-delay085 {
  489 + animation-delay: 8.5s;
  490 + -webkit-animation-delay: 8.5s;
  491 +}
  492 +.a-delay087 {
  493 + animation-delay: 8.7s;
  494 + -webkit-animation-delay: 8.7s;
  495 +}
  496 +.a-delay089 {
  497 + animation-delay: 8.9s;
  498 + -webkit-animation-delay: 8.9s;
  499 +}
  500 +.a-delay9 {
  501 + animation-delay: 9s;
  502 + -webkit-animation-delay: 9s;
  503 +}
  504 +.a-delay093 {
  505 + animation-delay: 9.3s;
  506 + -webkit-animation-delay: 9.3s;
  507 +}
  508 +.a-delay095 {
  509 + animation-delay: 9.5s;
  510 + -webkit-animation-delay: 9.5s;
  511 +}
  512 +.a-delay097 {
  513 + animation-delay: 9.7s;
  514 + -webkit-animation-delay: 9.7s;
  515 +}
  516 +.a-delay099 {
  517 + animation-delay: 9.9s;
  518 + -webkit-animation-delay: 9.9s;
  519 +}
  520 +.a-delay10 {
  521 + animation-delay: 10s;
  522 + -webkit-animation-delay: 10s;
  523 +}
  524 +.a-delay103 {
  525 + animation-delay: 10.3s;
  526 + -webkit-animation-delay: 10.3s;
  527 +}
  528 +.a-delay105 {
  529 + animation-delay: 10.5s;
  530 + -webkit-animation-delay: 10.5s;
  531 +}
  532 +.a-delay107 {
  533 + animation-delay: 10.7s;
  534 + -webkit-animation-delay: 10.7s;
  535 +}
  536 +.a-delay109 {
  537 + animation-delay: 10.9s;
  538 + -webkit-animation-delay: 10.9s;
  539 +}
  540 +.a-delay11 {
  541 + animation-delay: 11s;
  542 + -webkit-animation-delay: 11s;
  543 +}
  544 +.a-delay113 {
  545 + animation-delay: 11.3s;
  546 + -webkit-animation-delay: 11.3s;
  547 +}
  548 +.a-delay115 {
  549 + animation-delay: 11.5s;
  550 + -webkit-animation-delay: 11.5s;
  551 +}
  552 +.a-delay117 {
  553 + animation-delay: 11.7s;
  554 + -webkit-animation-delay: 11.7s;
  555 +}
  556 +.a-delay119 {
  557 + animation-delay: 11.9s;
  558 + -webkit-animation-delay: 11.9s;
  559 +}
  560 +.a-delay12 {
  561 + animation-delay: 12s;
  562 + -webkit-animation-delay: 12s;
  563 +}
  564 +.a-delay123 {
  565 + animation-delay: 12.3s;
  566 + -webkit-animation-delay: 12.3s;
  567 +}
  568 +.a-delay125 {
  569 + animation-delay: 12.5s;
  570 + -webkit-animation-delay: 12.5s;
  571 +}
  572 +.a-delay127 {
  573 + animation-delay: 12.7s;
  574 + -webkit-animation-delay: 12.7s;
  575 +}
  576 +.a-delay129 {
  577 + animation-delay: 12.9s;
  578 + -webkit-animation-delay: 12.9s;
  579 +}
  580 +.a-delay13 {
  581 + animation-delay: 13s;
  582 + -webkit-animation-delay: 13s;
  583 +}
  584 +.a-delay133 {
  585 + animation-delay: 13.3s;
  586 + -webkit-animation-delay: 13.3s;
  587 +}
  588 +.a-delay135 {
  589 + animation-delay: 13.5s;
  590 + -webkit-animation-delay: 13.5s;
  591 +}
  592 +.a-delay137 {
  593 + animation-delay: 13.7s;
  594 + -webkit-animation-delay: 13.7s;
  595 +}
  596 +.a-delay139 {
  597 + animation-delay: 13.9s;
  598 + -webkit-animation-delay: 13.9s;
  599 +}
  600 +.a-delay14 {
  601 + animation-delay: 14s;
  602 + -webkit-animation-delay: 14s;
  603 +}
  604 +.a-delay143 {
  605 + animation-delay: 14.3s;
  606 + -webkit-animation-delay: 14.3s;
  607 +}
  608 +.a-delay145 {
  609 + animation-delay: 14.5s;
  610 + -webkit-animation-delay: 14.5s;
  611 +}
  612 +.a-delay147 {
  613 + animation-delay: 14.7s;
  614 + -webkit-animation-delay: 14.7s;
  615 +}
  616 +.a-delay149 {
  617 + animation-delay: 14.9s;
  618 + -webkit-animation-delay: 14.9s;
  619 +}
  620 +.a-delay15 {
  621 + animation-delay: 15s;
  622 + -webkit-animation-delay: 15s;
  623 +}
  624 +.a-delay153 {
  625 + animation-delay: 15.3s;
  626 + -webkit-animation-delay: 15.3s;
  627 +}
  628 +.a-delay155 {
  629 + animation-delay: 15.5s;
  630 + -webkit-animation-delay: 15.5s;
  631 +}
  632 +.a-delay157 {
  633 + animation-delay: 15.7s;
  634 + -webkit-animation-delay: 15.7s;
  635 +}
  636 +.a-delay159 {
  637 + animation-delay: 15.9s;
  638 + -webkit-animation-delay: 15.9s;
  639 +}
  640 +/*常用配置*/
  641 +/*永久播放+反向+匀速*/
  642 +.a-yjfx {
  643 + /*永久播放*/
  644 + animation-iteration-count: infinite;
  645 + -webkit-animation-iteration-count: infinite;
  646 + /*动画曲线*/
  647 + animation-timing-function: linear;
  648 + -webkit-animation-timing-function: linear;
  649 + /*反向播放*/
  650 + animation-direction: alternate;
  651 + -webkit-animation-direction: alternate;
  652 +}
  653 +/*永久播放+匀速*/
  654 +.a-yj {
  655 + /*永久播放*/
  656 + animation-iteration-count: infinite;
  657 + -webkit-animation-iteration-count: infinite;
  658 + /*动画曲线*/
  659 + animation-timing-function: linear;
  660 + -webkit-animation-timing-function: linear;
  661 +}
  662 +/*动画效果*/
  663 +/*从上往下渐显*/
  664 +.showInTop {
  665 + animation-name: showInTop;
  666 + -webkit-animation-name: showInTop;
  667 + animation-fill-mode: both;
  668 + -webkit-animation-fill-mode: both;
  669 +}
  670 +@-webkit-keyframes showInTop {
  671 + 0% {
  672 + opacity: 0;
  673 + filter: alpha(opacity=0);
  674 + -webkit-transform: translate(0, -50%);
  675 + }
  676 + 100% {
  677 + opacity: 1;
  678 + filter: alpha(opacity=100);
  679 + -webkit-transform: translate(0, 0);
  680 + }
  681 +}
  682 +@-moz-keyframes showInTop {
  683 + 0% {
  684 + opacity: 0;
  685 + filter: alpha(opacity=0);
  686 + -moz-transform: translate(0, -50%);
  687 + }
  688 + 100% {
  689 + opacity: 1;
  690 + filter: alpha(opacity=100);
  691 + -moz-transform: translate(0, 0);
  692 + }
  693 +}
  694 +@-o-keyframes showInTop {
  695 + 0% {
  696 + opacity: 0;
  697 + filter: alpha(opacity=0);
  698 + -o-transform: translate(0, -50%);
  699 + }
  700 + 100% {
  701 + opacity: 1;
  702 + filter: alpha(opacity=100);
  703 + -o-transform: translate(0, 0);
  704 + }
  705 +}
  706 +@-ms-keyframes showInTop {
  707 + 0% {
  708 + opacity: 0;
  709 + filter: alpha(opacity=0);
  710 + -ms-transform: translate(0, -50%);
  711 + }
  712 + 100% {
  713 + opacity: 1;
  714 + filter: alpha(opacity=100);
  715 + -ms-transform: translate(0, 0);
  716 + }
  717 +}
  718 +@keyframes showInTop {
  719 + 0% {
  720 + opacity: 0;
  721 + filter: alpha(opacity=0);
  722 + transform: translate(0, -50%);
  723 + }
  724 + 100% {
  725 + opacity: 1;
  726 + filter: alpha(opacity=100);
  727 + transform: translate(0, 0);
  728 + }
  729 +}
  730 +/*从下往上渐显*/
  731 +.showInBottom {
  732 + animation-name: showInBottom;
  733 + -webkit-animation-name: showInBottom;
  734 + animation-fill-mode: both;
  735 + -webkit-animation-fill-mode: both;
  736 +}
  737 +@-webkit-keyframes showInBottom {
  738 + 0% {
  739 + opacity: 0;
  740 + filter: alpha(opacity=0);
  741 + -webkit-transform: translate(0, 40%);
  742 + }
  743 + 100% {
  744 + opacity: 1;
  745 + filter: alpha(opacity=100);
  746 + -webkit-transform: translate(0, 0);
  747 + }
  748 +}
  749 +@-moz-keyframes showInBottom {
  750 + 0% {
  751 + opacity: 0;
  752 + filter: alpha(opacity=0);
  753 + -moz-transform: translate(0, 40%);
  754 + }
  755 + 100% {
  756 + opacity: 1;
  757 + filter: alpha(opacity=100);
  758 + -moz-transform: translate(0, 0);
  759 + }
  760 +}
  761 +@-o-keyframes showInBottom {
  762 + 0% {
  763 + opacity: 0;
  764 + filter: alpha(opacity=0);
  765 + -o-transform: translate(0, 40%);
  766 + }
  767 + 100% {
  768 + opacity: 1;
  769 + filter: alpha(opacity=100);
  770 + -o-transform: translate(0, 0);
  771 + }
  772 +}
  773 +@-ms-keyframes showInBottom {
  774 + 0% {
  775 + opacity: 0;
  776 + filter: alpha(opacity=0);
  777 + -ms-transform: translate(0, 40%);
  778 + }
  779 + 100% {
  780 + opacity: 1;
  781 + filter: alpha(opacity=100);
  782 + -ms-transform: translate(0, 0);
  783 + }
  784 +}
  785 +@keyframes showInBottom {
  786 + 0% {
  787 + opacity: 0;
  788 + filter: alpha(opacity=0);
  789 + transform: translate(0, 40%);
  790 + }
  791 + 100% {
  792 + opacity: 1;
  793 + filter: alpha(opacity=100);
  794 + transform: translate(0, 0);
  795 + }
  796 +}
  797 +/*从下往上渐显*/
  798 +.showTop {
  799 + animation-name: showTop;
  800 + -webkit-animation-name: showTop;
  801 + animation-fill-mode: both;
  802 + -webkit-animation-fill-mode: both;
  803 +}
  804 +@-webkit-keyframes showTop {
  805 + 0% {
  806 + opacity: 1;
  807 + filter: alpha(opacity=100);
  808 + -webkit-transform: translate(0, -100%);
  809 + }
  810 + 100% {
  811 + opacity: 1;
  812 + filter: alpha(opacity=100);
  813 + -webkit-transform: translate(0, 0);
  814 + }
  815 +}
  816 +@-moz-keyframes showTop {
  817 + 0% {
  818 + opacity: 1;
  819 + filter: alpha(opacity=100);
  820 + -moz-transform: translate(0, -100%);
  821 + }
  822 + 100% {
  823 + opacity: 1;
  824 + filter: alpha(opacity=100);
  825 + -moz-transform: translate(0, 0);
  826 + }
  827 +}
  828 +@-o-keyframes showTop {
  829 + 0% {
  830 + opacity: 1;
  831 + filter: alpha(opacity=100);
  832 + -o-transform: translate(0, -100%);
  833 + }
  834 + 100% {
  835 + opacity: 1;
  836 + filter: alpha(opacity=100);
  837 + -o-transform: translate(0, 0);
  838 + }
  839 +}
  840 +@-ms-keyframes showTop {
  841 + 0% {
  842 + opacity: 1;
  843 + filter: alpha(opacity=100);
  844 + -ms-transform: translate(0, -100%);
  845 + }
  846 + 100% {
  847 + opacity: 1;
  848 + filter: alpha(opacity=100);
  849 + -ms-transform: translate(0, 0);
  850 + }
  851 +}
  852 +@keyframes showTop {
  853 + 0% {
  854 + opacity: 1;
  855 + filter: alpha(opacity=100);
  856 + transform: translate(0, -100%);
  857 + }
  858 + 100% {
  859 + opacity: 1;
  860 + filter: alpha(opacity=100);
  861 + transform: translate(0, 0);
  862 + }
  863 +}
  864 +/*从左往右渐显*/
  865 +.showInLeft {
  866 + animation-name: showInLeft;
  867 + -webkit-animation-name: showInLeft;
  868 + animation-fill-mode: both;
  869 + -webkit-animation-fill-mode: both;
  870 +}
  871 +@-webkit-keyframes showInLeft {
  872 + 0% {
  873 + opacity: 0;
  874 + filter: alpha(opacity=0);
  875 + -webkit-transform: translate(-10%, 0);
  876 + }
  877 + 100% {
  878 + opacity: 1;
  879 + filter: alpha(opacity=100);
  880 + -webkit-transform: translate(0, 0);
  881 + }
  882 +}
  883 +@-moz-keyframes showInLeft {
  884 + 0% {
  885 + opacity: 0;
  886 + filter: alpha(opacity=0);
  887 + -moz-transform: translate(-10%, 0);
  888 + }
  889 + 100% {
  890 + opacity: 1;
  891 + filter: alpha(opacity=100);
  892 + -moz-transform: translate(0, 0);
  893 + }
  894 +}
  895 +@-o-keyframes showInLeft {
  896 + 0% {
  897 + opacity: 0;
  898 + filter: alpha(opacity=0);
  899 + -o-transform: translate(-10%, 0);
  900 + }
  901 + 100% {
  902 + opacity: 1;
  903 + filter: alpha(opacity=100);
  904 + -o-transform: translate(0, 0);
  905 + }
  906 +}
  907 +@-ms-keyframes showInLeft {
  908 + 0% {
  909 + opacity: 0;
  910 + filter: alpha(opacity=0);
  911 + -ms-transform: translate(-10%, 0);
  912 + }
  913 + 100% {
  914 + opacity: 1;
  915 + filter: alpha(opacity=100);
  916 + -ms-transform: translate(0, 0);
  917 + }
  918 +}
  919 +@keyframes showInLeft {
  920 + 0% {
  921 + opacity: 0;
  922 + filter: alpha(opacity=0);
  923 + transform: translate(-10%, 0);
  924 + }
  925 + 100% {
  926 + opacity: 1;
  927 + filter: alpha(opacity=100);
  928 + transform: translate(0, 0);
  929 + }
  930 +}
  931 +/*从左往右显示*/
  932 +.showLeft {
  933 + animation-name: showLeft;
  934 + -webkit-animation-name: showLeft;
  935 + animation-fill-mode: both;
  936 + -webkit-animation-fill-mode: both;
  937 +}
  938 +@-webkit-keyframes showLeft {
  939 + 0% {
  940 + opacity: 1;
  941 + filter: alpha(opacity=100);
  942 + -webkit-transform: translate(-100%, 0);
  943 + }
  944 + 100% {
  945 + opacity: 1;
  946 + filter: alpha(opacity=100);
  947 + -webkit-transform: translate(0, 0);
  948 + }
  949 +}
  950 +@-moz-keyframes showLeft {
  951 + 0% {
  952 + opacity: 1;
  953 + filter: alpha(opacity=100);
  954 + -moz-transform: translate(-100%, 0);
  955 + }
  956 + 100% {
  957 + opacity: 1;
  958 + filter: alpha(opacity=100);
  959 + -moz-transform: translate(0, 0);
  960 + }
  961 +}
  962 +@-o-keyframes showLeft {
  963 + 0% {
  964 + opacity: 1;
  965 + filter: alpha(opacity=100);
  966 + -o-transform: translate(-100%, 0);
  967 + }
  968 + 100% {
  969 + opacity: 1;
  970 + filter: alpha(opacity=100);
  971 + -o-transform: translate(0, 0);
  972 + }
  973 +}
  974 +@-ms-keyframes showLeft {
  975 + 0% {
  976 + opacity: 1;
  977 + filter: alpha(opacity=100);
  978 + -ms-transform: translate(-100%, 0);
  979 + }
  980 + 100% {
  981 + opacity: 1;
  982 + filter: alpha(opacity=100);
  983 + -ms-transform: translate(0, 0);
  984 + }
  985 +}
  986 +@keyframes showLeft {
  987 + 0% {
  988 + opacity: 1;
  989 + filter: alpha(opacity=100);
  990 + transform: translate(-100%, 0);
  991 + }
  992 + 100% {
  993 + opacity: 1;
  994 + filter: alpha(opacity=100);
  995 + transform: translate(0, 0);
  996 + }
  997 +}
  998 +/*从右往左渐显*/
  999 +.showInRight {
  1000 + animation-name: showInRight;
  1001 + -webkit-animation-name: showInRight;
  1002 + animation-fill-mode: both;
  1003 + -webkit-animation-fill-mode: both;
  1004 +}
  1005 +@-webkit-keyframes showInRight {
  1006 + 0% {
  1007 + opacity: 0;
  1008 + filter: alpha(opacity=0);
  1009 + -webkit-transform: translate(10%, 0);
  1010 + }
  1011 + 100% {
  1012 + opacity: 1;
  1013 + filter: alpha(opacity=100);
  1014 + -webkit-transform: translate(0, 0);
  1015 + }
  1016 +}
  1017 +@-moz-keyframes showInRight {
  1018 + 0% {
  1019 + opacity: 0;
  1020 + filter: alpha(opacity=0);
  1021 + -moz-transform: translate(10%, 0);
  1022 + }
  1023 + 100% {
  1024 + opacity: 1;
  1025 + filter: alpha(opacity=100);
  1026 + -moz-transform: translate(0, 0);
  1027 + }
  1028 +}
  1029 +@-o-keyframes showInRight {
  1030 + 0% {
  1031 + opacity: 0;
  1032 + filter: alpha(opacity=0);
  1033 + -o-transform: translate(10%, 0);
  1034 + }
  1035 + 100% {
  1036 + opacity: 1;
  1037 + filter: alpha(opacity=100);
  1038 + -o-transform: translate(0, 0);
  1039 + }
  1040 +}
  1041 +@-ms-keyframes showInRight {
  1042 + 0% {
  1043 + opacity: 0;
  1044 + filter: alpha(opacity=0);
  1045 + -ms-transform: translate(10%, 0);
  1046 + }
  1047 + 100% {
  1048 + opacity: 1;
  1049 + filter: alpha(opacity=100);
  1050 + -ms-transform: translate(0, 0);
  1051 + }
  1052 +}
  1053 +@keyframes showInRight {
  1054 + 0% {
  1055 + opacity: 0;
  1056 + filter: alpha(opacity=0);
  1057 + transform: translate(10%, 0);
  1058 + }
  1059 + 100% {
  1060 + opacity: 1;
  1061 + filter: alpha(opacity=100);
  1062 + transform: translate(0, 0);
  1063 + }
  1064 +}
  1065 +/*从右往左显示*/
  1066 +.showRight {
  1067 + animation-name: showRight;
  1068 + -webkit-animation-name: showRight;
  1069 + animation-fill-mode: both;
  1070 + -webkit-animation-fill-mode: both;
  1071 +}
  1072 +@-webkit-keyframes showRight {
  1073 + 0% {
  1074 + opacity: 1;
  1075 + filter: alpha(opacity=100);
  1076 + -webkit-transform: translate(100%, 0);
  1077 + }
  1078 + 100% {
  1079 + opacity: 1;
  1080 + filter: alpha(opacity=100);
  1081 + -webkit-transform: translate(0, 0);
  1082 + }
  1083 +}
  1084 +@-moz-keyframes showRight {
  1085 + 0% {
  1086 + opacity: 1;
  1087 + filter: alpha(opacity=100);
  1088 + -moz-transform: translate(100%, 0);
  1089 + }
  1090 + 100% {
  1091 + opacity: 1;
  1092 + filter: alpha(opacity=100);
  1093 + -moz-transform: translate(0, 0);
  1094 + }
  1095 +}
  1096 +@-o-keyframes showRight {
  1097 + 0% {
  1098 + opacity: 1;
  1099 + filter: alpha(opacity=100);
  1100 + -o-transform: translate(100%, 0);
  1101 + }
  1102 + 100% {
  1103 + opacity: 1;
  1104 + filter: alpha(opacity=100);
  1105 + -o-transform: translate(0, 0);
  1106 + }
  1107 +}
  1108 +@-ms-keyframes showRight {
  1109 + 0% {
  1110 + opacity: 1;
  1111 + filter: alpha(opacity=100);
  1112 + -ms-transform: translate(100%, 0);
  1113 + }
  1114 + 100% {
  1115 + opacity: 1;
  1116 + filter: alpha(opacity=100);
  1117 + -ms-transform: translate(0, 0);
  1118 + }
  1119 +}
  1120 +@keyframes showRight {
  1121 + 0% {
  1122 + opacity: 1;
  1123 + filter: alpha(opacity=100);
  1124 + transform: translate(100%, 0);
  1125 + }
  1126 + 100% {
  1127 + opacity: 1;
  1128 + filter: alpha(opacity=100);
  1129 + transform: translate(0, 0);
  1130 + }
  1131 +}
  1132 +/*渐显*/
  1133 +.fadeIn {
  1134 + animation-name: fadeIn;
  1135 + -webkit-animation-name: fadeIn;
  1136 + animation-fill-mode: both;
  1137 + -webkit-animation-fill-mode: both;
  1138 +}
  1139 +@-webkit-keyframes fadeIn {
  1140 + 0% {
  1141 + opacity: 0;
  1142 + filter: alpha(opacity=0);
  1143 + }
  1144 + 100% {
  1145 + opacity: 1;
  1146 + filter: alpha(opacity=100);
  1147 + }
  1148 +}
  1149 +@-moz-keyframes fadeIn {
  1150 + 0% {
  1151 + opacity: 0;
  1152 + filter: alpha(opacity=0);
  1153 + }
  1154 + 100% {
  1155 + opacity: 1;
  1156 + filter: alpha(opacity=100);
  1157 + }
  1158 +}
  1159 +@-o-keyframes fadeIn {
  1160 + 0% {
  1161 + opacity: 0;
  1162 + filter: alpha(opacity=0);
  1163 + }
  1164 + 100% {
  1165 + opacity: 1;
  1166 + filter: alpha(opacity=100);
  1167 + }
  1168 +}
  1169 +@-ms-keyframes fadeIn {
  1170 + 0% {
  1171 + opacity: 0;
  1172 + filter: alpha(opacity=0);
  1173 + }
  1174 + 100% {
  1175 + opacity: 1;
  1176 + filter: alpha(opacity=100);
  1177 + }
  1178 +}
  1179 +@keyframes fadeIn {
  1180 + 0% {
  1181 + opacity: 0;
  1182 + filter: alpha(opacity=0);
  1183 + }
  1184 + 100% {
  1185 + opacity: 1;
  1186 + filter: alpha(opacity=100);
  1187 + }
  1188 +}
  1189 +/*由小变大*/
  1190 +.zoomIn {
  1191 + animation-name: zoomIn;
  1192 + -webkit-animation-name: zoomIn;
  1193 + animation-fill-mode: both;
  1194 + -webkit-animation-fill-mode: both;
  1195 +}
  1196 +@-webkit-keyframes zoomIn {
  1197 + 0% {
  1198 + opacity: 0;
  1199 + filter: alpha(opacity=0);
  1200 + -webkit-transform: scale(0, 0);
  1201 + }
  1202 + 80% {
  1203 + opacity: 1;
  1204 + filter: alpha(opacity=100);
  1205 + -webkit-transform: scale(1, 1);
  1206 + }
  1207 + 100% {
  1208 + opacity: 1;
  1209 + filter: alpha(opacity=100);
  1210 + }
  1211 +}
  1212 +@-moz-keyframes zoomIn {
  1213 + 0% {
  1214 + opacity: 0;
  1215 + filter: alpha(opacity=0);
  1216 + -moz-transform: scale(0, 0);
  1217 + }
  1218 + 80% {
  1219 + opacity: 1;
  1220 + filter: alpha(opacity=100);
  1221 + -moz-transform: scale(1, 1);
  1222 + }
  1223 + 100% {
  1224 + opacity: 1;
  1225 + filter: alpha(opacity=100);
  1226 + }
  1227 +}
  1228 +@-o-keyframes zoomIn {
  1229 + 0% {
  1230 + opacity: 0;
  1231 + filter: alpha(opacity=0);
  1232 + -o-transform: scale(0, 0);
  1233 + }
  1234 + 80% {
  1235 + opacity: 1;
  1236 + filter: alpha(opacity=100);
  1237 + -o-transform: scale(1, 1);
  1238 + }
  1239 + 100% {
  1240 + opacity: 1;
  1241 + filter: alpha(opacity=100);
  1242 + }
  1243 +}
  1244 +@-ms-keyframes zoomIn {
  1245 + 0% {
  1246 + opacity: 0;
  1247 + filter: alpha(opacity=0);
  1248 + -ms-transform: scale(0, 0);
  1249 + }
  1250 + 80% {
  1251 + opacity: 1;
  1252 + filter: alpha(opacity=100);
  1253 + -ms-transform: scale(1, 1);
  1254 + }
  1255 + 100% {
  1256 + opacity: 1;
  1257 + filter: alpha(opacity=100);
  1258 + }
  1259 +}
  1260 +@keyframes zoomIn {
  1261 + 0% {
  1262 + opacity: 0;
  1263 + filter: alpha(opacity=0);
  1264 + transform: scale(0, 0);
  1265 + }
  1266 + 80% {
  1267 + opacity: 1;
  1268 + filter: alpha(opacity=100);
  1269 + transform: scale(1, 1);
  1270 + }
  1271 + 100% {
  1272 + opacity: 1;
  1273 + filter: alpha(opacity=100);
  1274 + }
  1275 +}
  1276 +/*由大变小*/
  1277 +.inZoom {
  1278 + animation-name: inZoom;
  1279 + -webkit-animation-name: inZoom;
  1280 + animation-fill-mode: both;
  1281 + -webkit-animation-fill-mode: both;
  1282 +}
  1283 +@-webkit-keyframes inZoom {
  1284 + 0% {
  1285 + opacity: 0;
  1286 + filter: alpha(opacity=0);
  1287 + -webkit-transform: scale(3, 3);
  1288 + }
  1289 + 80% {
  1290 + opacity: 1;
  1291 + filter: alpha(opacity=100);
  1292 + -webkit-transform: scale(1, 1);
  1293 + }
  1294 + 100% {
  1295 + opacity: 1;
  1296 + filter: alpha(opacity=100);
  1297 + }
  1298 +}
  1299 +@-moz-keyframes inZoom {
  1300 + 0% {
  1301 + opacity: 0;
  1302 + filter: alpha(opacity=0);
  1303 + -moz-transform: scale(3, 3);
  1304 + }
  1305 + 80% {
  1306 + opacity: 1;
  1307 + filter: alpha(opacity=100);
  1308 + -moz-transform: scale(1, 1);
  1309 + }
  1310 + 100% {
  1311 + opacity: 1;
  1312 + filter: alpha(opacity=100);
  1313 + }
  1314 +}
  1315 +@-o-keyframes inZoom {
  1316 + 0% {
  1317 + opacity: 0;
  1318 + filter: alpha(opacity=0);
  1319 + -o-transform: scale(3, 3);
  1320 + }
  1321 + 80% {
  1322 + opacity: 1;
  1323 + filter: alpha(opacity=100);
  1324 + -o-transform: scale(1, 1);
  1325 + }
  1326 + 100% {
  1327 + opacity: 1;
  1328 + filter: alpha(opacity=100);
  1329 + }
  1330 +}
  1331 +@-ms-keyframes inZoom {
  1332 + 0% {
  1333 + opacity: 0;
  1334 + filter: alpha(opacity=0);
  1335 + -ms-transform: scale(3, 3);
  1336 + }
  1337 + 80% {
  1338 + opacity: 1;
  1339 + filter: alpha(opacity=100);
  1340 + -ms-transform: scale(1, 1);
  1341 + }
  1342 + 100% {
  1343 + opacity: 1;
  1344 + filter: alpha(opacity=100);
  1345 + }
  1346 +}
  1347 +@keyframes inZoom {
  1348 + 0% {
  1349 + opacity: 0;
  1350 + filter: alpha(opacity=0);
  1351 + transform: scale(3, 3);
  1352 + }
  1353 + 80% {
  1354 + opacity: 1;
  1355 + filter: alpha(opacity=100);
  1356 + transform: scale(1, 1);
  1357 + }
  1358 + 100% {
  1359 + opacity: 1;
  1360 + filter: alpha(opacity=100);
  1361 + }
  1362 +}
  1363 +/*上下*/
  1364 +.shangxia {
  1365 + animation-name: shangxia;
  1366 + -webkit-animation-name: shangxia;
  1367 + animation-fill-mode: both;
  1368 + -webkit-animation-fill-mode: both;
  1369 +}
  1370 +@-webkit-keyframes shangxia {
  1371 + 0% {
  1372 + -webkit-transform: translate(0, 0%);
  1373 + }
  1374 + 100% {
  1375 + -webkit-transform: translate(0, -20%);
  1376 + }
  1377 +}
  1378 +@-moz-keyframes shangxia {
  1379 + 0% {
  1380 + -moz-transform: translate(0, 0%);
  1381 + }
  1382 + 100% {
  1383 + -moz-transform: translate(0, -20%);
  1384 + }
  1385 +}
  1386 +@-o-keyframes shangxia {
  1387 + 0% {
  1388 + -o-transform: translate(0, 0%);
  1389 + }
  1390 + 100% {
  1391 + -o-transform: translate(0, -20%);
  1392 + }
  1393 +}
  1394 +@-ms-keyframes shangxia {
  1395 + 0% {
  1396 + -ms-transform: translate(0, 0%);
  1397 + }
  1398 + 100% {
  1399 + -ms-transform: translate(0, -20%);
  1400 + }
  1401 +}
  1402 +@keyframes shangxia {
  1403 + 0% {
  1404 + transform: translate(0, 0%);
  1405 + }
  1406 + 100% {
  1407 + transform: translate(0, -20%);
  1408 + }
  1409 +}
  1410 +/*顺时针转圈*/
  1411 +.zhuanquan {
  1412 + animation-name: zhuanquan;
  1413 + -webkit-animation-name: zhuanquan;
  1414 + animation-fill-mode: both;
  1415 + -webkit-animation-fill-mode: both;
  1416 +}
  1417 +@-webkit-keyframes zhuanquan {
  1418 + 0% {
  1419 + -webkit-transform: rotate(0);
  1420 + }
  1421 + 100% {
  1422 + -webkit-transform: rotate(360deg);
  1423 + }
  1424 +}
  1425 +@-moz-keyframes zhuanquan {
  1426 + 0% {
  1427 + -moz-transform: rotate(0);
  1428 + }
  1429 + 100% {
  1430 + -moz-transform: rotate(360deg);
  1431 + }
  1432 +}
  1433 +@-o-keyframes zhuanquan {
  1434 + 0% {
  1435 + -o-transform: rotate(0);
  1436 + }
  1437 + 100% {
  1438 + -o-transform: rotate(360deg);
  1439 + }
  1440 +}
  1441 +@-ms-keyframes zhuanquan {
  1442 + 0% {
  1443 + -ms-transform: rotate(0);
  1444 + }
  1445 + 100% {
  1446 + -ms-transform: rotate(360deg);
  1447 + }
  1448 +}
  1449 +@keyframes zhuanquan {
  1450 + 0% {
  1451 + transform: rotate(0);
  1452 + }
  1453 + 100% {
  1454 + transform: rotate(360deg);
  1455 + }
  1456 +}
  1457 +/*逆时针转圈*/
  1458 +.zhuanquan-ni {
  1459 + animation-name: zhuanquan-ni;
  1460 + -webkit-animation-name: zhuanquan-ni;
  1461 + animation-fill-mode: both;
  1462 + -webkit-animation-fill-mode: both;
  1463 +}
  1464 +@-webkit-keyframes zhuanquan-ni {
  1465 + 0% {
  1466 + -webkit-transform: rotate(360deg);
  1467 + }
  1468 + 100% {
  1469 + -webkit-transform: rotate(0deg);
  1470 + }
  1471 +}
  1472 +@-moz-keyframes zhuanquan-ni {
  1473 + 0% {
  1474 + -moz-transform: rotate(360deg);
  1475 + }
  1476 + 100% {
  1477 + -moz-transform: rotate(0deg);
  1478 + }
  1479 +}
  1480 +@-o-keyframes zhuanquan-ni {
  1481 + 0% {
  1482 + -o-transform: rotate(360deg);
  1483 + }
  1484 + 100% {
  1485 + -o-transform: rotate(0deg);
  1486 + }
  1487 +}
  1488 +@-ms-keyframes zhuanquan-ni {
  1489 + 0% {
  1490 + -ms-transform: rotate(360deg);
  1491 + }
  1492 + 100% {
  1493 + -ms-transform: rotate(0deg);
  1494 + }
  1495 +}
  1496 +@keyframes zhuanquan-ni {
  1497 + 0% {
  1498 + transform: rotate(360deg);
  1499 + }
  1500 + 100% {
  1501 + transform: rotate(0deg);
  1502 + }
  1503 +}
  1504 +/*弹跳*/
  1505 +.bounce {
  1506 + animation-name: bounce;
  1507 + -webkit-animation-name: bounce;
  1508 + animation-fill-mode: both;
  1509 + -webkit-animation-fill-mode: both;
  1510 + animation-fill-mode: center bottom;
  1511 + -webkit-animation-fill-mode: center bottom;
  1512 +}
  1513 +@-webkit-keyframes bounce {
  1514 + from,
  1515 + 20%,
  1516 + 53%,
  1517 + 80%,
  1518 + to {
  1519 + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1520 + -webkit-transform: translate3d(0, 0, 0);
  1521 + }
  1522 + 40%,
  1523 + 43% {
  1524 + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1525 + -webkit-transform: translate3d(0, -30px, 0);
  1526 + }
  1527 + 70% {
  1528 + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1529 + -webkit-transform: translate3d(0, -15px, 0);
  1530 + }
  1531 + 90% {
  1532 + -webkit-transform: translate3d(0, -4px, 0);
  1533 + }
  1534 +}
  1535 +@-moz-keyframes bounce {
  1536 + from,
  1537 + 20%,
  1538 + 53%,
  1539 + 80%,
  1540 + to {
  1541 + -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1542 + -moz-transform: translate3d(0, 0, 0);
  1543 + }
  1544 + 40%,
  1545 + 43% {
  1546 + -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1547 + -moz-transform: translate3d(0, -30px, 0);
  1548 + }
  1549 + 70% {
  1550 + -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1551 + -moz-transform: translate3d(0, -15px, 0);
  1552 + }
  1553 + 90% {
  1554 + -moz-transform: translate3d(0, -4px, 0);
  1555 + }
  1556 +}
  1557 +@-o-keyframes bounce {
  1558 + from,
  1559 + 20%,
  1560 + 53%,
  1561 + 80%,
  1562 + to {
  1563 + -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1564 + -o-transform: translate3d(0, 0, 0);
  1565 + }
  1566 + 40%,
  1567 + 43% {
  1568 + -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1569 + -o-transform: translate3d(0, -30px, 0);
  1570 + }
  1571 + 70% {
  1572 + -o-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1573 + -o-transform: translate3d(0, -15px, 0);
  1574 + }
  1575 + 90% {
  1576 + -o-transform: translate3d(0, -4px, 0);
  1577 + }
  1578 +}
  1579 +@-ms-keyframes bounce {
  1580 + from,
  1581 + 20%,
  1582 + 53%,
  1583 + 80%,
  1584 + to {
  1585 + -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1586 + -ms-transform: translate3d(0, 0, 0);
  1587 + }
  1588 + 40%,
  1589 + 43% {
  1590 + -ms-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1591 + -ms-transform: translate3d(0, -30px, 0);
  1592 + }
  1593 + 70% {
  1594 + -ms-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1595 + -ms-transform: translate3d(0, -15px, 0);
  1596 + }
  1597 + 90% {
  1598 + -ms-transform: translate3d(0, -4px, 0);
  1599 + }
  1600 +}
  1601 +@keyframes bounce {
  1602 + from,
  1603 + 20%,
  1604 + 53%,
  1605 + 80%,
  1606 + to {
  1607 + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1608 + transform: translate3d(0, 0, 0);
  1609 + }
  1610 + 40%,
  1611 + 43% {
  1612 + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1613 + transform: translate3d(0, -30px, 0);
  1614 + }
  1615 + 70% {
  1616 + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  1617 + transform: translate3d(0, -15px, 0);
  1618 + }
  1619 + 90% {
  1620 + transform: translate3d(0, -4px, 0);
  1621 + }
  1622 +}
  1623 +/*橡皮筋*/
  1624 +.rubberBand {
  1625 + animation-name: rubberBand;
  1626 + -webkit-animation-name: rubberBand;
  1627 + animation-fill-mode: both;
  1628 + -webkit-animation-fill-mode: both;
  1629 +}
  1630 +@-webkit-keyframes rubberBand {
  1631 + from {
  1632 + -webkit-transform: scale3d(1, 1, 1);
  1633 + }
  1634 + 30% {
  1635 + -webkit-transform: scale3d(1.25, 0.75, 1);
  1636 + }
  1637 + 40% {
  1638 + -webkit-transform: scale3d(0.75, 1.25, 1);
  1639 + }
  1640 + 50% {
  1641 + -webkit-transform: scale3d(1.15, 0.85, 1);
  1642 + }
  1643 + 65% {
  1644 + -webkit-transform: scale3d(0.95, 1.05, 1);
  1645 + }
  1646 + 75% {
  1647 + -webkit-transform: scale3d(1.05, 0.95, 1);
  1648 + }
  1649 + to {
  1650 + -webkit-transform: scale3d(1, 1, 1);
  1651 + }
  1652 +}
  1653 +@-moz-keyframes rubberBand {
  1654 + from {
  1655 + -moz-transform: scale3d(1, 1, 1);
  1656 + }
  1657 + 30% {
  1658 + -moz-transform: scale3d(1.25, 0.75, 1);
  1659 + }
  1660 + 40% {
  1661 + -moz-transform: scale3d(0.75, 1.25, 1);
  1662 + }
  1663 + 50% {
  1664 + -moz-transform: scale3d(1.15, 0.85, 1);
  1665 + }
  1666 + 65% {
  1667 + -moz-transform: scale3d(0.95, 1.05, 1);
  1668 + }
  1669 + 75% {
  1670 + -moz-transform: scale3d(1.05, 0.95, 1);
  1671 + }
  1672 + to {
  1673 + -moz-transform: scale3d(1, 1, 1);
  1674 + }
  1675 +}
  1676 +@-o-keyframes rubberBand {
  1677 + from {
  1678 + -o-transform: scale3d(1, 1, 1);
  1679 + }
  1680 + 30% {
  1681 + -o-transform: scale3d(1.25, 0.75, 1);
  1682 + }
  1683 + 40% {
  1684 + -o-transform: scale3d(0.75, 1.25, 1);
  1685 + }
  1686 + 50% {
  1687 + -o-transform: scale3d(1.15, 0.85, 1);
  1688 + }
  1689 + 65% {
  1690 + -o-transform: scale3d(0.95, 1.05, 1);
  1691 + }
  1692 + 75% {
  1693 + -o-transform: scale3d(1.05, 0.95, 1);
  1694 + }
  1695 + to {
  1696 + -o-transform: scale3d(1, 1, 1);
  1697 + }
  1698 +}
  1699 +@-ms-keyframes rubberBand {
  1700 + from {
  1701 + -ms-transform: scale3d(1, 1, 1);
  1702 + }
  1703 + 30% {
  1704 + -ms-transform: scale3d(1.25, 0.75, 1);
  1705 + }
  1706 + 40% {
  1707 + -ms-transform: scale3d(0.75, 1.25, 1);
  1708 + }
  1709 + 50% {
  1710 + -ms-transform: scale3d(1.15, 0.85, 1);
  1711 + }
  1712 + 65% {
  1713 + -ms-transform: scale3d(0.95, 1.05, 1);
  1714 + }
  1715 + 75% {
  1716 + -ms-transform: scale3d(1.05, 0.95, 1);
  1717 + }
  1718 + to {
  1719 + -ms-transform: scale3d(1, 1, 1);
  1720 + }
  1721 +}
  1722 +@keyframes rubberBand {
  1723 + from {
  1724 + transform: scale3d(1, 1, 1);
  1725 + }
  1726 + 30% {
  1727 + transform: scale3d(1.25, 0.75, 1);
  1728 + }
  1729 + 40% {
  1730 + transform: scale3d(0.75, 1.25, 1);
  1731 + }
  1732 + 50% {
  1733 + transform: scale3d(1.15, 0.85, 1);
  1734 + }
  1735 + 65% {
  1736 + transform: scale3d(0.95, 1.05, 1);
  1737 + }
  1738 + 75% {
  1739 + transform: scale3d(1.05, 0.95, 1);
  1740 + }
  1741 + to {
  1742 + transform: scale3d(1, 1, 1);
  1743 + }
  1744 +}
  1745 +/*摇晃*/
  1746 +.shake {
  1747 + animation-name: shake;
  1748 + -webkit-animation-name: shake;
  1749 + animation-fill-mode: both;
  1750 + -webkit-animation-fill-mode: both;
  1751 +}
  1752 +@-webkit-keyframes shake {
  1753 + from,
  1754 + to {
  1755 + -webkit-transform: translate3d(0, 0, 0);
  1756 + }
  1757 + 10%,
  1758 + 30%,
  1759 + 50%,
  1760 + 70%,
  1761 + 90% {
  1762 + -webkit-transform: translate3d(-10px, 0, 0);
  1763 + }
  1764 + 20%,
  1765 + 40%,
  1766 + 60%,
  1767 + 80% {
  1768 + -webkit-transform: translate3d(10px, 0, 0);
  1769 + }
  1770 +}
  1771 +@-moz-keyframes shake {
  1772 + from,
  1773 + to {
  1774 + -moz-transform: translate3d(0, 0, 0);
  1775 + }
  1776 + 10%,
  1777 + 30%,
  1778 + 50%,
  1779 + 70%,
  1780 + 90% {
  1781 + -moz-transform: translate3d(-10px, 0, 0);
  1782 + }
  1783 + 20%,
  1784 + 40%,
  1785 + 60%,
  1786 + 80% {
  1787 + -moz-transform: translate3d(10px, 0, 0);
  1788 + }
  1789 +}
  1790 +@-o-keyframes shake {
  1791 + from,
  1792 + to {
  1793 + -o-transform: translate3d(0, 0, 0);
  1794 + }
  1795 + 10%,
  1796 + 30%,
  1797 + 50%,
  1798 + 70%,
  1799 + 90% {
  1800 + -o-transform: translate3d(-10px, 0, 0);
  1801 + }
  1802 + 20%,
  1803 + 40%,
  1804 + 60%,
  1805 + 80% {
  1806 + -o-transform: translate3d(10px, 0, 0);
  1807 + }
  1808 +}
  1809 +@-ms-keyframes shake {
  1810 + from,
  1811 + to {
  1812 + -ms-transform: translate3d(0, 0, 0);
  1813 + }
  1814 + 10%,
  1815 + 30%,
  1816 + 50%,
  1817 + 70%,
  1818 + 90% {
  1819 + -ms-transform: translate3d(-10px, 0, 0);
  1820 + }
  1821 + 20%,
  1822 + 40%,
  1823 + 60%,
  1824 + 80% {
  1825 + -ms-transform: translate3d(10px, 0, 0);
  1826 + }
  1827 +}
  1828 +@keyframes shake {
  1829 + from,
  1830 + to {
  1831 + transform: translate3d(0, 0, 0);
  1832 + }
  1833 + 10%,
  1834 + 30%,
  1835 + 50%,
  1836 + 70%,
  1837 + 90% {
  1838 + transform: translate3d(-10px, 0, 0);
  1839 + }
  1840 + 20%,
  1841 + 40%,
  1842 + 60%,
  1843 + 80% {
  1844 + transform: translate3d(10px, 0, 0);
  1845 + }
  1846 +}
  1847 +/*右上到左下*/
  1848 +.meteor {
  1849 + animation-name: meteor;
  1850 + -webkit-animation-name: meteor;
  1851 + animation-fill-mode: both;
  1852 + -webkit-animation-fill-mode: both;
  1853 +}
  1854 +@-webkit-keyframes meteor {
  1855 + from,
  1856 + to {
  1857 + -webkit-transform: translate3d(0, 0, 0);
  1858 + }
  1859 + 0% {
  1860 + -webkit-transform: translate(100%, -200%);
  1861 + opacity: 0;
  1862 + filter: alpha(opacity=0);
  1863 + }
  1864 + 10% {
  1865 + opacity: 1;
  1866 + filter: alpha(opacity=100);
  1867 + }
  1868 + 50% {
  1869 + opacity: 1;
  1870 + filter: alpha(opacity=100);
  1871 + }
  1872 + 80% {
  1873 + -webkit-transform: translate(-180%, 200%);
  1874 + opacity: 0;
  1875 + filter: alpha(opacity=0);
  1876 + }
  1877 + 100% {
  1878 + -webkit-transform: translate(-180%, 200%);
  1879 + opacity: 0;
  1880 + filter: alpha(opacity=0);
  1881 + }
  1882 +}
  1883 +@-moz-keyframes meteor {
  1884 + from,
  1885 + to {
  1886 + -moz-transform: translate3d(0, 0, 0);
  1887 + }
  1888 + 0% {
  1889 + -moz-transform: translate(100%, -200%);
  1890 + opacity: 0;
  1891 + filter: alpha(opacity=0);
  1892 + }
  1893 + 10% {
  1894 + opacity: 1;
  1895 + filter: alpha(opacity=100);
  1896 + }
  1897 + 50% {
  1898 + opacity: 1;
  1899 + filter: alpha(opacity=100);
  1900 + }
  1901 + 80% {
  1902 + -moz-transform: translate(-180%, 200%);
  1903 + opacity: 0;
  1904 + filter: alpha(opacity=0);
  1905 + }
  1906 + 100% {
  1907 + -moz-transform: translate(-180%, 200%);
  1908 + opacity: 0;
  1909 + filter: alpha(opacity=0);
  1910 + }
  1911 +}
  1912 +@-o-keyframes meteor {
  1913 + from,
  1914 + to {
  1915 + -o-transform: translate3d(0, 0, 0);
  1916 + }
  1917 + 0% {
  1918 + -o-transform: translate(100%, -200%);
  1919 + opacity: 0;
  1920 + filter: alpha(opacity=0);
  1921 + }
  1922 + 10% {
  1923 + opacity: 1;
  1924 + filter: alpha(opacity=100);
  1925 + }
  1926 + 50% {
  1927 + opacity: 1;
  1928 + filter: alpha(opacity=100);
  1929 + }
  1930 + 80% {
  1931 + -o-transform: translate(-180%, 200%);
  1932 + opacity: 0;
  1933 + filter: alpha(opacity=0);
  1934 + }
  1935 + 100% {
  1936 + -o-transform: translate(-180%, 200%);
  1937 + opacity: 0;
  1938 + filter: alpha(opacity=0);
  1939 + }
  1940 +}
  1941 +@-ms-keyframes meteor {
  1942 + from,
  1943 + to {
  1944 + -ms-transform: translate3d(0, 0, 0);
  1945 + }
  1946 + 0% {
  1947 + -ms-transform: translate(100%, -200%);
  1948 + opacity: 0;
  1949 + filter: alpha(opacity=0);
  1950 + }
  1951 + 10% {
  1952 + opacity: 1;
  1953 + filter: alpha(opacity=100);
  1954 + }
  1955 + 50% {
  1956 + opacity: 1;
  1957 + filter: alpha(opacity=100);
  1958 + }
  1959 + 80% {
  1960 + -ms-transform: translate(-180%, 200%);
  1961 + opacity: 0;
  1962 + filter: alpha(opacity=0);
  1963 + }
  1964 + 100% {
  1965 + -ms-transform: translate(-180%, 200%);
  1966 + opacity: 0;
  1967 + filter: alpha(opacity=0);
  1968 + }
  1969 +}
  1970 +@keyframes meteor {
  1971 + from,
  1972 + to {
  1973 + transform: translate3d(0, 0, 0);
  1974 + }
  1975 + 0% {
  1976 + transform: translate(100%, -200%);
  1977 + opacity: 0;
  1978 + filter: alpha(opacity=0);
  1979 + }
  1980 + 10% {
  1981 + opacity: 1;
  1982 + filter: alpha(opacity=100);
  1983 + }
  1984 + 50% {
  1985 + opacity: 1;
  1986 + filter: alpha(opacity=100);
  1987 + }
  1988 + 80% {
  1989 + transform: translate(-180%, 200%);
  1990 + opacity: 0;
  1991 + filter: alpha(opacity=0);
  1992 + }
  1993 + 100% {
  1994 + transform: translate(-180%, 200%);
  1995 + opacity: 0;
  1996 + filter: alpha(opacity=0);
  1997 + }
  1998 +}
  1999 +/*退场动画*/
  2000 +/*从左往右退出*/
  2001 +.outRight {
  2002 + animation-name: outRight;
  2003 + -webkit-animation-name: outRight;
  2004 + animation-fill-mode: both;
  2005 + -webkit-animation-fill-mode: both;
  2006 +}
  2007 +@-webkit-keyframes outRight {
  2008 + 0% {
  2009 + opacity: 1;
  2010 + filter: alpha(opacity=100);
  2011 + -webkit-transform: translate(0, 0);
  2012 + }
  2013 + 100% {
  2014 + opacity: 1;
  2015 + filter: alpha(opacity=100);
  2016 + -webkit-transform: translate(100%, 0);
  2017 + }
  2018 +}
  2019 +@-moz-keyframes outRight {
  2020 + 0% {
  2021 + opacity: 1;
  2022 + filter: alpha(opacity=100);
  2023 + -moz-transform: translate(0, 0);
  2024 + }
  2025 + 100% {
  2026 + opacity: 1;
  2027 + filter: alpha(opacity=100);
  2028 + -moz-transform: translate(100%, 0);
  2029 + }
  2030 +}
  2031 +@-o-keyframes outRight {
  2032 + 0% {
  2033 + opacity: 1;
  2034 + filter: alpha(opacity=100);
  2035 + -o-transform: translate(0, 0);
  2036 + }
  2037 + 100% {
  2038 + opacity: 1;
  2039 + filter: alpha(opacity=100);
  2040 + -o-transform: translate(100%, 0);
  2041 + }
  2042 +}
  2043 +@-ms-keyframes outRight {
  2044 + 0% {
  2045 + opacity: 1;
  2046 + filter: alpha(opacity=100);
  2047 + -ms-transform: translate(0, 0);
  2048 + }
  2049 + 100% {
  2050 + opacity: 1;
  2051 + filter: alpha(opacity=100);
  2052 + -ms-transform: translate(100%, 0);
  2053 + }
  2054 +}
  2055 +@keyframes outRight {
  2056 + 0% {
  2057 + opacity: 1;
  2058 + filter: alpha(opacity=100);
  2059 + transform: translate(0, 0);
  2060 + }
  2061 + 100% {
  2062 + opacity: 1;
  2063 + filter: alpha(opacity=100);
  2064 + transform: translate(100%, 0);
  2065 + }
  2066 +}
  2067 +/*从右往左退出*/
  2068 +.outLeft {
  2069 + animation-name: outLeft;
  2070 + -webkit-animation-name: outLeft;
  2071 + animation-fill-mode: both;
  2072 + -webkit-animation-fill-mode: both;
  2073 +}
  2074 +@-webkit-keyframes outLeft {
  2075 + 0% {
  2076 + opacity: 1;
  2077 + filter: alpha(opacity=100);
  2078 + -webkit-transform: translate(0, 0);
  2079 + }
  2080 + 100% {
  2081 + opacity: 1;
  2082 + filter: alpha(opacity=100);
  2083 + -webkit-transform: translate(-100%, 0);
  2084 + }
  2085 +}
  2086 +@-moz-keyframes outLeft {
  2087 + 0% {
  2088 + opacity: 1;
  2089 + filter: alpha(opacity=100);
  2090 + -moz-transform: translate(0, 0);
  2091 + }
  2092 + 100% {
  2093 + opacity: 1;
  2094 + filter: alpha(opacity=100);
  2095 + -moz-transform: translate(-100%, 0);
  2096 + }
  2097 +}
  2098 +@-o-keyframes outLeft {
  2099 + 0% {
  2100 + opacity: 1;
  2101 + filter: alpha(opacity=100);
  2102 + -o-transform: translate(0, 0);
  2103 + }
  2104 + 100% {
  2105 + opacity: 1;
  2106 + filter: alpha(opacity=100);
  2107 + -o-transform: translate(-100%, 0);
  2108 + }
  2109 +}
  2110 +@-ms-keyframes outLeft {
  2111 + 0% {
  2112 + opacity: 1;
  2113 + filter: alpha(opacity=100);
  2114 + -ms-transform: translate(0, 0);
  2115 + }
  2116 + 100% {
  2117 + opacity: 1;
  2118 + filter: alpha(opacity=100);
  2119 + -ms-transform: translate(-100%, 0);
  2120 + }
  2121 +}
  2122 +@keyframes outLeft {
  2123 + 0% {
  2124 + opacity: 1;
  2125 + filter: alpha(opacity=100);
  2126 + transform: translate(0, 0);
  2127 + }
  2128 + 100% {
  2129 + opacity: 1;
  2130 + filter: alpha(opacity=100);
  2131 + transform: translate(-100%, 0);
  2132 + }
  2133 +}
  2134 +/*从下往上退出*/
  2135 +.outTop {
  2136 + animation-name: outTop;
  2137 + -webkit-animation-name: outTop;
  2138 + animation-fill-mode: both;
  2139 + -webkit-animation-fill-mode: both;
  2140 +}
  2141 +@-webkit-keyframes outTop {
  2142 + 0% {
  2143 + opacity: 1;
  2144 + filter: alpha(opacity=100);
  2145 + -webkit-transform: translate(0, 0);
  2146 + }
  2147 + 100% {
  2148 + opacity: 1;
  2149 + filter: alpha(opacity=100);
  2150 + -webkit-transform: translate(0, -100%);
  2151 + }
  2152 +}
  2153 +@-moz-keyframes outTop {
  2154 + 0% {
  2155 + opacity: 1;
  2156 + filter: alpha(opacity=100);
  2157 + -moz-transform: translate(0, 0);
  2158 + }
  2159 + 100% {
  2160 + opacity: 1;
  2161 + filter: alpha(opacity=100);
  2162 + -moz-transform: translate(0, -100%);
  2163 + }
  2164 +}
  2165 +@-o-keyframes outTop {
  2166 + 0% {
  2167 + opacity: 1;
  2168 + filter: alpha(opacity=100);
  2169 + -o-transform: translate(0, 0);
  2170 + }
  2171 + 100% {
  2172 + opacity: 1;
  2173 + filter: alpha(opacity=100);
  2174 + -o-transform: translate(0, -100%);
  2175 + }
  2176 +}
  2177 +@-ms-keyframes outTop {
  2178 + 0% {
  2179 + opacity: 1;
  2180 + filter: alpha(opacity=100);
  2181 + -ms-transform: translate(0, 0);
  2182 + }
  2183 + 100% {
  2184 + opacity: 1;
  2185 + filter: alpha(opacity=100);
  2186 + -ms-transform: translate(0, -100%);
  2187 + }
  2188 +}
  2189 +@keyframes outTop {
  2190 + 0% {
  2191 + opacity: 1;
  2192 + filter: alpha(opacity=100);
  2193 + transform: translate(0, 0);
  2194 + }
  2195 + 100% {
  2196 + opacity: 1;
  2197 + filter: alpha(opacity=100);
  2198 + transform: translate(0, -100%);
  2199 + }
  2200 +}
  2201 +/*从上往下退出*/
  2202 +.outBottom {
  2203 + animation-name: outBottom;
  2204 + -webkit-animation-name: outBottom;
  2205 + animation-fill-mode: both;
  2206 + -webkit-animation-fill-mode: both;
  2207 +}
  2208 +@-webkit-keyframes outBottom {
  2209 + 0% {
  2210 + opacity: 1;
  2211 + filter: alpha(opacity=100);
  2212 + -webkit-transform: translate(0, 0);
  2213 + }
  2214 + 100% {
  2215 + opacity: 1;
  2216 + filter: alpha(opacity=100);
  2217 + -webkit-transform: translate(0, 100%);
  2218 + }
  2219 +}
  2220 +@-moz-keyframes outBottom {
  2221 + 0% {
  2222 + opacity: 1;
  2223 + filter: alpha(opacity=100);
  2224 + -moz-transform: translate(0, 0);
  2225 + }
  2226 + 100% {
  2227 + opacity: 1;
  2228 + filter: alpha(opacity=100);
  2229 + -moz-transform: translate(0, 100%);
  2230 + }
  2231 +}
  2232 +@-o-keyframes outBottom {
  2233 + 0% {
  2234 + opacity: 1;
  2235 + filter: alpha(opacity=100);
  2236 + -o-transform: translate(0, 0);
  2237 + }
  2238 + 100% {
  2239 + opacity: 1;
  2240 + filter: alpha(opacity=100);
  2241 + -o-transform: translate(0, 100%);
  2242 + }
  2243 +}
  2244 +@-ms-keyframes outBottom {
  2245 + 0% {
  2246 + opacity: 1;
  2247 + filter: alpha(opacity=100);
  2248 + -ms-transform: translate(0, 0);
  2249 + }
  2250 + 100% {
  2251 + opacity: 1;
  2252 + filter: alpha(opacity=100);
  2253 + -ms-transform: translate(0, 100%);
  2254 + }
  2255 +}
  2256 +@keyframes outBottom {
  2257 + 0% {
  2258 + opacity: 1;
  2259 + filter: alpha(opacity=100);
  2260 + transform: translate(0, 0);
  2261 + }
  2262 + 100% {
  2263 + opacity: 1;
  2264 + filter: alpha(opacity=100);
  2265 + transform: translate(0, 100%);
  2266 + }
  2267 +}
  2268 +/*从上往下渐隐*/
  2269 +.hideToBottom {
  2270 + animation-name: hideToBottom;
  2271 + -webkit-animation-name: hideToBottom;
  2272 + animation-fill-mode: both;
  2273 + -webkit-animation-fill-mode: both;
  2274 +}
  2275 +@-webkit-keyframes hideToBottom {
  2276 + 0% {
  2277 + opacity: 1;
  2278 + filter: alpha(opacity=100);
  2279 + -webkit-transform: translate(0, 0);
  2280 + }
  2281 + 100% {
  2282 + opacity: 0;
  2283 + filter: alpha(opacity=0);
  2284 + -webkit-transform: translate(0, 40%);
  2285 + }
  2286 +}
  2287 +@-moz-keyframes hideToBottom {
  2288 + 0% {
  2289 + opacity: 1;
  2290 + filter: alpha(opacity=100);
  2291 + -moz-transform: translate(0, 0);
  2292 + }
  2293 + 100% {
  2294 + opacity: 0;
  2295 + filter: alpha(opacity=0);
  2296 + -moz-transform: translate(0, 40%);
  2297 + }
  2298 +}
  2299 +@-o-keyframes hideToBottom {
  2300 + 0% {
  2301 + opacity: 1;
  2302 + filter: alpha(opacity=100);
  2303 + -o-transform: translate(0, 0);
  2304 + }
  2305 + 100% {
  2306 + opacity: 0;
  2307 + filter: alpha(opacity=0);
  2308 + -o-transform: translate(0, 40%);
  2309 + }
  2310 +}
  2311 +@-ms-keyframes hideToBottom {
  2312 + 0% {
  2313 + opacity: 1;
  2314 + filter: alpha(opacity=100);
  2315 + -ms-transform: translate(0, 0);
  2316 + }
  2317 + 100% {
  2318 + opacity: 0;
  2319 + filter: alpha(opacity=0);
  2320 + -ms-transform: translate(0, 40%);
  2321 + }
  2322 +}
  2323 +@keyframes hideToBottom {
  2324 + 0% {
  2325 + opacity: 1;
  2326 + filter: alpha(opacity=100);
  2327 + transform: translate(0, 0);
  2328 + }
  2329 + 100% {
  2330 + opacity: 0;
  2331 + filter: alpha(opacity=0);
  2332 + transform: translate(0, 40%);
  2333 + }
  2334 +}
  2335 +/*渐隐*/
  2336 +.fadeOut {
  2337 + animation-name: fadeOut;
  2338 + -webkit-animation-name: fadeOut;
  2339 + animation-fill-mode: both;
  2340 + -webkit-animation-fill-mode: both;
  2341 +}
  2342 +@-webkit-keyframes fadeOut {
  2343 + 0% {
  2344 + opacity: 1;
  2345 + filter: alpha(opacity=100);
  2346 + }
  2347 + 100% {
  2348 + opacity: 0;
  2349 + filter: alpha(opacity=0);
  2350 + }
  2351 +}
  2352 +@-moz-keyframes fadeOut {
  2353 + 0% {
  2354 + opacity: 1;
  2355 + filter: alpha(opacity=100);
  2356 + }
  2357 + 100% {
  2358 + opacity: 0;
  2359 + filter: alpha(opacity=0);
  2360 + }
  2361 +}
  2362 +@-o-keyframes fadeOut {
  2363 + 0% {
  2364 + opacity: 1;
  2365 + filter: alpha(opacity=100);
  2366 + }
  2367 + 100% {
  2368 + opacity: 0;
  2369 + filter: alpha(opacity=0);
  2370 + }
  2371 +}
  2372 +@-ms-keyframes fadeOut {
  2373 + 0% {
  2374 + opacity: 1;
  2375 + filter: alpha(opacity=100);
  2376 + }
  2377 + 100% {
  2378 + opacity: 0;
  2379 + filter: alpha(opacity=0);
  2380 + }
  2381 +}
  2382 +@keyframes fadeOut {
  2383 + 0% {
  2384 + opacity: 1;
  2385 + filter: alpha(opacity=100);
  2386 + }
  2387 + 100% {
  2388 + opacity: 0;
  2389 + filter: alpha(opacity=0);
  2390 + }
  2391 +}
... ...
src/assets/styles/animate.min.css 0 → 100644
  View file @9652d5c
  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}}
0 2 \ No newline at end of file
... ...
src/main.js
  View file @9652d5c
... ... @@ -7,6 +7,7 @@ import zhLocale from &quot;element-ui/lib/locale/lang/zh-CN&quot;;
7 7 import "normalize.css/normalize.css"; // A modern alternative to CSS resets
8 8 import "@/assets/styles/common.css";
9 9 import "@/assets/styles/index.scss"; // custome global css
  10 +import "@/assets/styles/animate.min.css"; // animate 动画JS
10 11  
11 12 // app router vuex filter mixins
12 13 import App from "./App";
... ...
src/views/bigscreenDesigner/designer/components/dynamicAddSvg.vue 0 → 100644
  View file @9652d5c
  1 +<template>
  2 + <div>
  3 + <el-button
  4 + type="primary"
  5 + size="small"
  6 + icon="el-icon-plus"
  7 + plain
  8 + @click="handleAddClick"
  9 + >新增</el-button
  10 + >
  11 + <el-table :data="formData" style="width: 100%">
  12 + <el-table-column prop="name" label="名称" width="130" />
  13 + <el-table-column prop="key" label="判断值" width="70" />
  14 + <el-table-column label="操作" width="100">
  15 + <template slot-scope="scope">
  16 + <div class="button-group">
  17 + <el-button
  18 + @click="handleEditorClick(scope.$index, scope.row)"
  19 + type="text"
  20 + size="small"
  21 + >编辑</el-button
  22 + >
  23 + <el-button
  24 + type="text"
  25 + size="small"
  26 + @click="handleDeleteClick(scope.$index, scope.row)"
  27 + >删除</el-button
  28 + >
  29 + </div>
  30 + </template>
  31 + </el-table-column>
  32 + </el-table>
  33 +
  34 + <el-dialog
  35 + title="新增"
  36 + :visible.sync="dialogVisible"
  37 + width="30%"
  38 + :before-close="handleClose"
  39 + >
  40 + <el-form :model="rowFormData" label-width="70px">
  41 + <el-form-item label="名称:">
  42 + <el-input
  43 + v-model.trim="rowFormData['name']"
  44 + placeholder="请输入名称"
  45 + size="mini"
  46 + >
  47 + </el-input>
  48 + </el-form-item>
  49 + <el-form-item label="判断值:" label-width="70px">
  50 + <el-input
  51 + v-model.trim="rowFormData['key']"
  52 + placeholder="请输入判断值"
  53 + size="mini"
  54 + >
  55 + </el-input>
  56 + </el-form-item>
  57 + <el-form-item label="SVG值:">
  58 + <el-input
  59 + v-model.trim="rowFormData['value']"
  60 + placeholder="请输入SVG值"
  61 + size="mini"
  62 + >
  63 + </el-input>
  64 + </el-form-item>
  65 + </el-form>
  66 + <span slot="footer" class="dialog-footer">
  67 + <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  68 + <el-button size="mini" type="primary" @click="handleSaveClick"
  69 + >确 定</el-button
  70 + >
  71 + </span>
  72 + </el-dialog>
  73 + </div>
  74 +</template>
  75 +<script>
  76 +export default {
  77 + model: {
  78 + prop: "formData",
  79 + event: "input"
  80 + },
  81 + props: {
  82 + formData: Array
  83 + },
  84 + data() {
  85 + return {
  86 + dialogVisible: false,
  87 + rowFormData: {
  88 + name: "",
  89 + key: "",
  90 + value:""
  91 + },
  92 + flag: true, // true 新增， false 编辑
  93 + indexEditor: -1, // 编辑第几个数据
  94 + tableData: []
  95 + };
  96 + },
  97 + methods: {
  98 + // 新增
  99 + handleAddClick() {
  100 + this.rowFormData = {};
  101 + this.flag = true;
  102 + this.dialogVisible = true;
  103 + },
  104 + // 编辑
  105 + handleEditorClick(index, row) {
  106 + this.flag = false;
  107 + this.rowFormData = this.deepClone(row);
  108 + this.indexEditor = index;
  109 + this.dialogVisible = true;
  110 + },
  111 + // 关闭
  112 + handleClose() {
  113 + this.dialogVisible = false;
  114 + },
  115 + // 保存
  116 + handleSaveClick() {
  117 + if (this.flag) {
  118 + // 新增
  119 + this.formData.push(this.rowFormData);
  120 + this.dialogVisible = false;
  121 + } else {
  122 + // 编辑
  123 + this.formData[this.indexEditor] = this.rowFormData;
  124 + this.$set(this.formData, this.indexEditor, this.rowFormData);
  125 + this.dialogVisible = false;
  126 + }
  127 + this.$emit("input", this.formData);
  128 + this.$emit("change", this.formData);
  129 + },
  130 + // 删除
  131 + handleDeleteClick(index) {
  132 + this.formData.splice(index, 1);
  133 + this.$emit("input", this.formData);
  134 + this.$emit("change", this.formData);
  135 + }
  136 + }
  137 +};
  138 +</script>
  139 +<style lang="scss" scoped>
  140 +/deep/::-webkit-scrollbar-track-piece {
  141 + background-color: transparent;
  142 +}
  143 +/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  144 + width: 0; // 横向滚动条
  145 + height: 8px; // 纵向滚动条 必写
  146 +}
  147 +// 滚动条的滑块
  148 +/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  149 + border-radius: 5px;
  150 + background-color: rgba(144, 146, 152, 0.3);
  151 +}
  152 +/deep/.el-table,
  153 +/deep/.el-table__expanded-cell,
  154 +/deep/.el-table th,
  155 +/deep/.el-table tr {
  156 + background-color: transparent !important;
  157 + color: #859094 !important;
  158 + font-size: 12px !important;
  159 +}
  160 +/deep/.el-table td,
  161 +/deep/.el-table th.is-leaf {
  162 + border-bottom: none;
  163 + line-height: 26px;
  164 +}
  165 +/deep/.el-table tbody tr:hover {
  166 + background-color: #263445 !important;
  167 +}
  168 +/deep/.el-table tbody tr:hover > td {
  169 + background-color: #263445 !important;
  170 +}
  171 +/deep/.el-table::before {
  172 + height: 0;
  173 +}
  174 +.button-group .el-button {
  175 + padding: 0;
  176 +}
  177 +</style>
... ...
src/views/bigscreenDesigner/designer/components/dynamicAddTable.vue
  View file @9652d5c
... ... @@ -8,7 +8,7 @@
8 8 @click="handleAddClick"
9 9 >新增</el-button
10 10 >
11   - <el-table :data="formData" style="width: 100%">
  11 + <el-table :data="formData" style="width: 100%" row-key="key">
12 12 <el-table-column prop="name" label="名称" width="60" />
13 13 <el-table-column prop="key" label="key值" width="70" />
14 14 <el-table-column prop="width" label="宽度" width="50" />
... ... @@ -74,6 +74,7 @@
74 74 </div>
75 75 </template>
76 76 <script>
  77 +import Sortable from 'sortablejs'//引入拖拽插件
77 78 export default {
78 79 model: {
79 80 prop: "formData",
... ... @@ -95,6 +96,12 @@ export default {
95 96 tableData: []
96 97 };
97 98 },
  99 + created() {
  100 + // this.getDictDatalist()
  101 + this.$nextTick(() => {
  102 + this.rowDrop()
  103 + })
  104 + },
98 105 methods: {
99 106 // 新增
100 107 handleAddClick() {
... ... @@ -125,15 +132,36 @@ export default {
125 132 this.$set(this.formData, this.indexEditor, this.rowFormData);
126 133 this.dialogVisible = false;
127 134 }
  135 + this.handleChangeParent();
  136 + },
  137 + // 改变画板元素
  138 + handleChangeParent() {
128 139 this.$emit("input", this.formData);
129 140 this.$emit("change", this.formData);
130 141 },
131 142 // 删除
132 143 handleDeleteClick(index) {
133 144 this.formData.splice(index, 1);
134   - this.$emit("input", this.formData);
135   - this.$emit("change", this.formData);
136   - }
  145 + this.handleChangeParent();
  146 + },
  147 + //行拖拽
  148 + rowDrop () {
  149 + // 此时找到的元素是要拖拽元素的父容器
  150 + const tbody = document.querySelector('.el-table__body-wrapper tbody');
  151 + const _this = this;
  152 + Sortable.create(tbody, {
  153 + //指定父元素下可被拖拽的子元素
  154 + draggable: ".el-table__row",
  155 + onEnd ({ newIndex, oldIndex }) {
  156 + const currRow = _this.formData.splice(oldIndex, 1)[0];
  157 + _this.formData.splice(newIndex, 0, currRow);
  158 + //渲染父页面
  159 + _this.$emit("input", _this.formData);
  160 + _this.$emit("change", _this.formData);
  161 + }
  162 + });
  163 + },
  164 +
137 165 }
138 166 };
139 167 </script>
... ...
src/views/bigscreenDesigner/designer/components/dynamicComponents.vue
  View file @9652d5c
... ... @@ -17,20 +17,39 @@
17 17 />
18 18 </el-select>
19 19 </el-form-item>
20   - <el-form-item
21   - v-for="(item, index) in userNameList"
22   - :key="index"
23   - :label="item.paramName"
24   - >
25   - <el-input v-model.trim="item.sampleItem" size="mini" />
26   - </el-form-item>
27   - <el-form-item v-for="item in setParamList" :key="item" :label="item">
28   - <Dictionary
29   - v-model="params[item]"
30   - :dict-key="getDictKey()"
31   - @input="selectParams($event, item)"
32   - />
33   - </el-form-item>
  20 +
  21 +<!-- <el-collapse v-if="this.isNotBlankArray(userNameList) || this.isNotBlankArray(setParamList)">-->
  22 + <el-collapse v-if="this.isNotBlankArray(userNameList)">
  23 + <el-collapse-item
  24 + title="动态参数"
  25 + v-if="this.isNotBlankArray(userNameList)"
  26 + >
  27 + <el-form-item
  28 + v-for="(item, index) in userNameList"
  29 + :key="index"
  30 + :label="item.paramName"
  31 + >
  32 + <el-input v-model.trim="item.sampleItem" size="mini" />
  33 + </el-form-item>
  34 + </el-collapse-item>
  35 + <!-- 如果中间想要白线，上面判断条件修改成各自,启用下面 -->
  36 + </el-collapse>
  37 + <el-collapse v-if="this.isNotBlankArray(setParamList)">
  38 + <el-collapse-item
  39 + title="结果集类型"
  40 + v-if="this.isNotBlankArray(setParamList)"
  41 + >
  42 + <el-form-item v-for="item in setParamList" :key="item" :label="item">
  43 + <Dictionary
  44 + v-model="params[item]"
  45 + :dict-key="getDictKey()"
  46 + @input="selectParams($event, item)"
  47 + />
  48 + </el-form-item>
  49 +
  50 + </el-collapse-item>
  51 + </el-collapse>
  52 +
34 53 <el-button
35 54 style="width: 100%"
36 55 type="primary"
... ... @@ -64,10 +83,10 @@ export default {
64 83 return {
65 84 dataSetValue: "",
66 85 dataSet: [], // 数据集
67   - userNameList: [], // 用户
  86 + userNameList: [], // 用户自定义参数设置
68 87 setParamList: [], // 对应的不同的图形数据参数
69 88 params: {},
70   - chartProperties: {}
  89 + chartProperties: {},//数据字段类型设置
71 90 };
72 91 },
73 92 watch: {
... ... @@ -101,6 +120,7 @@ export default {
101 120 },
102 121 async selectDataSet() {
103 122 const { code, data } = await detailBysetId(this.dataSetValue);
  123 + // this.userNameList = this.isNotBlankArray(this.userNameList)?this.userNameList:data.dataSetParamDtoList;
104 124 this.userNameList = data.dataSetParamDtoList;
105 125 this.setParamList = data.setParamList;
106 126 if (code != "200") return;
... ... @@ -108,19 +128,20 @@ export default {
108 128 async saveDataBtn() {
109 129 const contextData = {};
110 130 for (let i = 0; i < this.userNameList.length; i++) {
111   - contextData[this.userNameList[i].paramName] = this.userNameList[
112   - i
113   - ].sampleItem;
  131 + contextData[this.userNameList[i].paramName] = this.userNameList[i].sampleItem;
114 132 }
  133 + // console.log("动态参数值",contextData,this.userNameList);
115 134 const params = {
116 135 chartType: this.chartType,
117 136 setCode: this.setCode,
118 137 chartProperties: this.chartProperties,
119   - contextData
  138 + contextData,
  139 + // userNameList:this.userNameList 去除userNameList对象，这样可以减少前台内存
120 140 };
121 141 this.$emit("input", params);
122 142 this.$emit("change", params);
123 143 },
  144 + //下拉选择数据类型
124 145 selectParams(val, key) {
125 146 this.chartProperties[key] = val;
126 147 },
... ... @@ -144,7 +165,18 @@ export default {
144 165 echoDynamicData(val) {
145 166 const chartProperties = this.deepClone(val.chartProperties);
146 167 this.chartProperties = chartProperties;
147   - if (this.userNameList.length > 0) {
  168 + const contextData = this.deepClone(val.contextData);
  169 + //用户自定义参数设置
  170 + if (this.isNotBlankObj(contextData)) {
  171 + //Map 遍历
  172 + let sUserDataSet=[];
  173 + for (const key in contextData) {
  174 + let sUserDataSetOne={};
  175 + sUserDataSetOne.paramName=key;
  176 + sUserDataSetOne.sampleItem=contextData[key];
  177 + sUserDataSet.push(sUserDataSetOne);
  178 + }
  179 + this.userNameList = sUserDataSet;
148 180 }
149 181 if (this.setParamList.length > 0) {
150 182 for (let i = 0; i < this.setParamList.length; i++) {
... ...
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
  View file @9652d5c
... ... @@ -177,6 +177,12 @@
177 177 :chart-type="item.chartType"
178 178 @change="changed($event, item.name)"
179 179 />
  180 + <dynamic-add-svg
  181 + v-if="item.type == 'dynamic-add-svg' && inputShow[item.name]"
  182 + v-model="formData[item.name]"
  183 + :chart-type="item.chartType"
  184 + @change="changed($event, item.name)"
  185 + />
180 186 <dynamic-add-radar
181 187 v-if="item.type == 'dynamic-add-radar' && inputShow[item.name]"
182 188 v-model="formData[item.name]"
... ... @@ -317,6 +323,7 @@ import dynamicAddRadar from &quot;./dynamicAddRadar&quot;;
317 323 import CustomUploadNew from "./customUploadNew";
318 324 import DatasourceSelect from "./datasourceSelect";
319 325 import CustomUploadMulti from "./customUploadMulti";
  326 +import dynamicAddSvg from "./dynamicAddSvg.vue";
320 327 import { mapState } from 'vuex';
321 328 export default {
322 329 name: "DynamicForm",
... ... @@ -331,7 +338,7 @@ export default {
331 338 CustomUploadNew,
332 339 CustomUploadMulti,
333 340 DatasourceSelect,
334   -
  341 + dynamicAddSvg
335 342 },
336 343 model: {
337 344 prop: "value",
... ... @@ -381,10 +388,10 @@ export default {
381 388 mounted() {},
382 389 methods: {
383 390 onJsonChange(val) {
384   - console.log(val);
  391 + // console.log(val);
385 392 },
386 393 onJsonSave(val) {
387   - console.log(val);
  394 + // console.log(val);
388 395 },
389 396 // 无论哪个输入框改变 都需要触发事件 将值回传
390 397 changed(val, key) {
... ...
src/views/bigscreenDesigner/designer/index.vue
  View file @9652d5c
... ... @@ -68,7 +68,8 @@
68 68 :style="{ width: widthLeftForToolsHideButton + 'px' }"
69 69 @click="toolIsShow = !toolIsShow"
70 70 >
71   - <i class="el-icon-arrow-right" />
  71 + <i class="el-icon-arrow-left" v-if="toolIsShow" />
  72 + <i class="el-icon-arrow-right" v-if="!toolIsShow" />
72 73 </div>
73 74  
74 75 <div
... ... @@ -228,8 +229,15 @@
228 229 </vue-ruler-tool>
229 230 </div>
230 231 </div>
231   -
232   - <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
  232 + <div
  233 + class="layout-left-fold"
  234 + :style="{ width: widthLeftForToolsHideButton + 'px' }"
  235 + @click="setupIsShow = !setupIsShow"
  236 + >
  237 + <i class="el-icon-arrow-left" v-if="!setupIsShow" />
  238 + <i class="el-icon-arrow-right" v-if="setupIsShow" />
  239 + </div>
  240 + <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }" v-if="setupIsShow">
233 241 <el-tabs v-model="activeName" type="border-card" :stretch="true">
234 242 <el-tab-pane
235 243 v-if="
... ... @@ -319,7 +327,7 @@ export default {
319 327 widthLeftForOptions: 300, // 右侧属性配置区
320 328 widthPaddingTools: 18,
321 329 toolIsShow: true, // 左侧工具栏是否显示
322   -
  330 + setupIsShow: true, // 右侧配置是否显示
323 331 bigscreenWidth: 1920, // 大屏设计的大小
324 332 bigscreenHeight: 1080,
325 333 revoke: null,
... ... @@ -396,8 +404,9 @@ export default {
396 404 widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
397 405 }
398 406 widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
399   - widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度
400   -
  407 + if (this.setupIsShow) {
  408 + widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度
  409 + }
401 410 let middleWidth = this.bodyWidth - widthLeftAndRight;
402 411 return middleWidth;
403 412 },
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 柱状对比图 json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:39:35
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:09:58
8 3 */
9 4 export const widgetBarCompare = {
10 5 code: 'widgetBarCompareChart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 柱状堆叠图
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:37:09
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:11:09
8 3 */
9 4 export const widgetBarStack = {
10 5 code: 'widgetBarStackChart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 柱状图json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:21:45
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:08:29
8 3 */
9 4 export const widgetBarchart = {
10 5 code: 'widget-barchart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 柱状图渐变色 json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:23:41
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:14:08
8 3 */
9 4 export const widgetGradientBarchart = {
10 5 code: 'widget-gradient-color-barchart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 柱线堆叠图
3   - * @Author: foming
4 3 */
5 4 export const widgetBarLineStack = {
6 5 code: 'widgetBarLineStackChart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box-float.js 0 → 100644
  View file @9652d5c
  1 +/*
  2 + * @Descripttion: 浮动图层
  3 + */
  4 +export const widgetBorderBoxFloat = {
  5 + code: 'widget-border-box-float',
  6 + type: 'html',
  7 + tabName: '图层',
  8 + label: '浮动边框',
  9 + icon: 'iconxiazai',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '浮动图层',
  20 + },
  21 + {
  22 + type: 'el-select',
  23 + label: '边框类型',
  24 + name: 'divType',
  25 + required: false,
  26 + placeholder: '',
  27 + selectOptions: [
  28 + {code: 'dv-border-Box-1', name: '边框1'},
  29 + {code: 'dv-border-Box-2', name: '边框2'},
  30 + {code: 'dv-border-Box-3', name: '边框3'},
  31 + {code: 'dv-border-Box-4', name: '边框4'},
  32 + {code: 'dv-border-Box-5', name: '边框5'},
  33 + {code: 'dv-border-Box-6', name: '边框6'},
  34 + {code: 'dv-border-Box-7', name: '边框7'},
  35 + {code: 'dv-border-Box-8', name: '边框8'},
  36 + {code: 'dv-border-Box-9', name: '边框9'},
  37 + {code: 'dv-border-Box-10', name: '边框10'},
  38 + {code: 'dv-border-Box-11', name: '边框11'},
  39 + {code: 'dv-border-Box-12', name: '边框12'},
  40 + {code: 'dv-border-Box-13', name: '边框13'},
  41 + ],
  42 + value: 'dv-border-Box-1'
  43 + },
  44 + {
  45 + type: 'vue-color',
  46 + label: '颜色(主)',
  47 + name: 'colorOne',
  48 + required: false,
  49 + placeholder: '',
  50 + value: '',
  51 + },
  52 + {
  53 + type: 'vue-color',
  54 + label: '颜色(次)',
  55 + name: 'colorTwo',
  56 + required: false,
  57 + placeholder: '',
  58 + value: '',
  59 + },
  60 + {
  61 + type: 'vue-color',
  62 + label: '背景色',
  63 + name: 'backgroundColor',
  64 + required: false,
  65 + placeholder: '',
  66 + value: 'rgba(255, 0, 0, 0)',
  67 + },
  68 + {
  69 + type: 'el-input-text',
  70 + label: '标题',
  71 + name: 'title',
  72 + require: false,
  73 + placeholder: '',
  74 + value: '',
  75 + }
  76 + ],
  77 + // 数据
  78 + data: [],
  79 + // 坐标
  80 + position: [
  81 + {
  82 + type: 'el-input-number',
  83 + label: '左边距',
  84 + name: 'left',
  85 + required: false,
  86 + placeholder: '',
  87 + value: 10,
  88 + },
  89 + {
  90 + type: 'el-input-number',
  91 + label: '上边距',
  92 + name: 'top',
  93 + required: false,
  94 + placeholder: '',
  95 + value: 10,
  96 + },
  97 + {
  98 + type: 'el-input-number',
  99 + label: '宽度',
  100 + name: 'width',
  101 + required: false,
  102 + placeholder: '该容器在1920px大屏中的宽度',
  103 + value: 180,
  104 + },
  105 + {
  106 + type: 'el-input-number',
  107 + label: '高度',
  108 + name: 'height',
  109 + required: false,
  110 + placeholder: '该容器在1080px大屏中的高度',
  111 + value: 115,
  112 + },
  113 + ],
  114 + }
  115 +}
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js
  View file @9652d5c
1 1 /*
2   - * @Descripttion: DIV图层次
  2 + * @Descripttion: 装饰
3 3 */
4 4 export const widgetDecoration = {
5 5 code: 'widget-decoration',
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-image.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 图片json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:07:23
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:14:51
8 3 */
9 4 export const widgetImage = {
10 5 code: 'widget-image',
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-slider.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 轮播图
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:08:53
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:19:30
8 3 */
9 4 export const widgetSliders = {
10 5 code: 'widget-slider',
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-svg.js 0 → 100644
  View file @9652d5c
  1 +export const widgetSvg = {
  2 + code: 'widget-svg',
  3 + type: 'html',
  4 + tabName: '图层',
  5 + label: 'SVG图层',
  6 + icon: 'iconziyuan',
  7 + options: {
  8 + // 配置
  9 + setup: [
  10 + {
  11 + type: 'el-input-text',
  12 + label: '图层名称',
  13 + name: 'layerName',
  14 + required: false,
  15 + placeholder: '',
  16 + value: 'SVG图层',
  17 + },
  18 + {
  19 + type: 'el-input-text',
  20 + label: 'SVG判断值',
  21 + name: 'text',
  22 + required: false,
  23 + placeholder: '',
  24 + value: 'SVG1',
  25 + },
  26 + {
  27 + type: 'el-select-static',
  28 + label: '主数据源数据',
  29 + name: 'slectedDataType',
  30 + require: false,
  31 + placeholder: '',
  32 + selectOptions: [],
  33 + value: '',
  34 + },
  35 + {
  36 + type: 'dynamic-add-svg',
  37 + label: '',
  38 + name: 'dynamicAddSvg',
  39 + required: false,
  40 + placeholder: '',
  41 + value: [
  42 + {name: 'SVG图层1', key: 'SVG1', value: '<svg t="1672316370705" class="icon" viewBox="0 0 1273 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1309" xmlns:xlink="http://www.w3.org/1999/xlink" width="248.6328125" height="200" fill-opacity="100" fill="#800000"><path d="M773.056709 326.746188c-78.182981-45.138563-196.661332-50.064783-264.355339-10.959455L45.719747 583.103339c-67.721683 39.077653-59.225338 107.463545 18.957643 152.629784l425.038662 245.37002c78.182981 45.138563 196.633656 50.064783 264.355339 10.959455l462.981623-267.28893c67.721683-39.105328 59.197662-107.49122-18.985318-152.629784l-425.010987-245.397696z" fill="#1296db" p-id="1310"></path><path d="M631.38638 728.814275L0 364.301694v283.949516c0 27.675391 16.854313 59.834196 37.583182 71.817641l468.516701 270.499276c69.133128 39.93559 125.286497-2.518461 125.286497-94.705189v-167.048663zM1262.772761 369.089537L631.38638 733.629793v164.640904c0 90.85831 55.323107 132.675827 123.487597 93.349095l470.841435-271.85537c20.452114-11.817392 37.057349-43.533391 37.057349-70.793651V369.089537z" fill="#1296db" p-id="1311"></path><path d="M773.056709 37.372295C694.873728-7.793944 576.395378-12.692488 508.70137 26.41284L45.719747 293.701771c-67.721683 39.105328-59.225338 107.49122 18.957643 152.629783l425.038662 245.397696c78.182981 45.138563 196.633656 50.037108 264.355339 10.959455l462.981623-267.316606c67.721683-39.105328 59.197662-107.49122-18.985318-152.629783L773.056709 37.372295z" fill="#1296db" p-id="1312"></path><path d="M764.560364 56.966472c-73.50584-42.45405-184.871615-47.075841-248.525015-10.322921l-435.250881 251.292555c-63.6534 36.75292-55.655212 101.07053 17.850627 143.496904l399.549626 230.674388c73.50584 42.45405 184.871615 47.075841 248.525015 10.322921l435.250882-251.292554c63.6534-36.75292 55.655212-101.042854-17.850628-143.496905L764.560364 56.966472z" fill="#1296db" p-id="1313"></path><path d="M757.309411 73.710084c-69.492908-40.129318-174.797772-44.502029-234.991748-9.741738l-411.533071 237.593236c-60.193976 34.760292-52.638595 95.563127 16.854313 135.692444l377.796769 218.10976c69.520583 40.129318 174.825448 44.502029 234.991749 9.741738l411.560746-237.593236c60.193976-34.760292 52.638595-95.563127-16.881989-135.692444L757.309411 73.710084z" fill="#1296db" p-id="1314"></path><path d="M748.647014 93.691717c-64.705065-37.361778-162.786652-41.430061-218.82932-9.077529L146.568873 305.906618c-56.070343 32.352533-49.013118 88.976383 15.691947 126.338162l351.837251 203.137373c64.732741 37.361778 162.786652 41.430061 218.856996 9.077529l383.248821-221.29243c56.042668-32.352533 49.013118-88.976383-15.719623-126.338162l-351.837251-203.137373z" fill="#1296db" p-id="1315"></path><path d="M740.150669 113.36892c-60.027924-34.64959-150.96926-38.441119-202.971321-8.413319L181.771971 310.168629c-52.002061 30.000124-45.470668 82.500342 14.557256 117.149932l326.292865 188.386389c60.027924 34.677265 150.96926 38.441119 202.943645 8.413319l355.435053-205.213027c51.974385-30.000124 45.442993-82.500342-14.584932-117.149932L740.150669 113.36892z" fill="#1296db" p-id="1316"></path><path d="M731.239193 133.931736c-55.12938-31.799025-138.59836-35.258449-186.338411-7.721434l-326.292865 188.414065c-47.74005 27.537014-41.73449 75.747546 13.367214 107.574246l299.558437 172.943521c55.101704 31.799025 138.59836 35.258449 186.310735 7.721434l326.320541-188.414065c47.712375-27.537014 41.73449-75.747546-13.39489-107.546571l-299.530761-172.971196z" fill="#1296db" p-id="1317"></path><path d="M724.098942 150.398594c-51.171799-29.529643-128.69057-32.739988-173.026548-7.167927L248.082209 318.166817c-44.335977 25.599737-38.773223 70.350845 12.426251 99.908163l278.137684 160.600296c51.199474 29.529643 128.718246 32.739988 173.026547 7.167927l303.017861-174.93615c44.308302-25.599737 38.745548-70.350845-12.426251-99.908163L724.098942 150.398594z" fill="#1296db" p-id="1318"></path><path d="M716.377507 168.249221c-46.909788-27.094208-117.980194-30.0278-158.607668-6.586743l-277.777904 160.378893c-40.627475 23.441057-35.507527 64.483662 11.402261 91.577871l255.001057 147.205407c46.909788 27.094208 117.980194 30.0278 158.607669 6.586743l277.750228-160.378893c40.627475-23.441057 35.535203-64.483662-11.374586-91.577871l-255.001057-147.205407z" fill="#1296db" p-id="1319"></path><path d="M631.38638 329.264649m-51.891359 0a51.891359 51.891359 0 1 0 103.782718 0 51.891359 51.891359 0 1 0-103.782718 0Z" fill="#1296db" p-id="1320"></path><path d="M162.371522 620.797222c14.667957 8.46867 26.596051 29.114512 26.596051 46.079527s-11.928094 23.828512-26.596051 15.359842c-14.695633-8.46867-26.596051-29.114512-26.596052-46.079527s11.900418-23.828512 26.596052-15.359842zM279.521454 688.435879c14.667957 8.46867 26.596051 29.114512 26.596051 46.079527s-11.928094 23.828512-26.596051 15.359842c-14.695633-8.46867-26.596051-29.114512-26.596052-46.079527s11.900418-23.828512 26.596052-15.359842zM411.726798 764.764608c14.667957 8.46867 26.596051 29.114512 26.596052 46.079527 0 16.93734-11.928094 23.828512-26.596052 15.359842-14.695633-8.496345-26.623727-29.142187-26.623726-46.079526 0-16.965015 11.928094-23.856187 26.623726-15.359843z" fill="#1296db" p-id="1321"></path></svg>'}
  43 + ]
  44 + }
  45 + ],
  46 + data:[],
  47 + // 坐标
  48 + position: [
  49 + {
  50 + type: 'el-input-number',
  51 + label: '左边距',
  52 + name: 'left',
  53 + required: false,
  54 + placeholder: '',
  55 + value: 0,
  56 + },
  57 + {
  58 + type: 'el-input-number',
  59 + label: '上边距',
  60 + name: 'top',
  61 + required: false,
  62 + placeholder: '',
  63 + value: 0,
  64 + },
  65 + {
  66 + type: 'el-input-number',
  67 + label: '宽度',
  68 + name: 'width',
  69 + required: false,
  70 + placeholder: '该容器在1920px大屏中的宽度',
  71 + value: 400,
  72 + },
  73 + {
  74 + type: 'el-input-number',
  75 + label: '高度',
  76 + name: 'height',
  77 + required: false,
  78 + placeholder: '该容器在1080px大屏中的高度',
  79 + value: 300
  80 + },
  81 + ],
  82 + }
  83 + }
... ...
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 折线堆叠图 json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:38:17
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:16:28
8 3 */
9 4 export const widgetLineStack = {
10 5 code: 'widgetLineStackChart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 折线图json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:24:48
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:17:10
8 3 */
9 4 export const widgetLinechart = {
10 5 code: 'widget-linechart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 中国地图 json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:31:21
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:17:20
8 3 */
9 4 export const widgetLineMap = {
10 5 code: 'widgetLineMap',
... ...
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 仪表盘 json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:30:25
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:13:17
8 3 */
9 4 export const widgetGauge = {
10 5 code: 'widget-gauge',
... ...
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js
  View file @9652d5c
1 1 /*
2 2 * @Descripttion: 百分比图 json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:34:01
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:18:45
8 3 */
9 4 export const widgetPiePercentage = {
10 5 code: 'widgetPiePercentageChart',
... ...
src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js
  View file @9652d5c
1   -/**
2   - * @Author: foming
  1 +/*
  2 + * @Descripttion: 雷达图
3 3 */
4 4 export const widgetRadar = {
5 5 code: 'widget-radar',
... ...
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js renamed to src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js
  View file @9652d5c
... ... @@ -3,8 +3,8 @@
3 3 */
4 4 export const widgetScrollRankingBoard= {
5 5 code: 'widget-scroll-ranking-board',
6   - type: 'text',
7   - tabName: '文本栏',
  6 + type: 'table',
  7 + tabName: '表格',
8 8 label: '排名轮播表',
9 9 icon: 'icon511tongji_shutu',
10 10 options: {
... ...
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js renamed to src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js
  View file @9652d5c
1 1 /*
2   - * @Descripttion: 表格json
3   - * @version:
4   - * @Author: qianlishi
5   - * @Date: 2021-08-29 07:16:10
6   - * @LastEditors: qianlishi
7   - * @LastEditTime: 2021-09-28 14:19:54
  2 + * @Descripttion: 表格
8 3 */
9 4 export const widgetTable = {
10 5 code: 'widget-table',
11   - type: 'text',
12   - tabName: '文本栏',
  6 + type: 'table',
  7 + tabName: '表格',
13 8 label: '表格',
14 9 icon: 'iconbiaoge',
15 10 options: {
... ...
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js 0 → 100644
  View file @9652d5c
  1 +/*
  2 + * @Descripttion: 数字翻牌器，单个带边框
  3 + */
  4 +export const widgetDigitalFlopSingle= {
  5 + code: 'widget-digital-flop-single',
  6 + type: 'text',
  7 + tabName: '文本栏',
  8 + label: '数字(边框)',
  9 + icon: 'iconshujujieruKafkajiqun',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '数字(边框)',
  20 + },
  21 + {
  22 + type: 'el-input-text',
  23 + label: '数字数值',
  24 + name: 'numberText',
  25 + required: false,
  26 + placeholder: '',
  27 + value: '0',
  28 + },
  29 + {
  30 + type: 'el-select-static',
  31 + label: '主数据源数据',
  32 + name: 'slectedDataType',
  33 + require: false,
  34 + placeholder: '',
  35 + selectOptions: [],
  36 + value: '',
  37 + },
  38 + {
  39 + type: 'el-input-text',
  40 + label: '内容模版',
  41 + name: 'content',
  42 + required: false,
  43 + placeholder: '',
  44 + value: '数字{nt}',
  45 + },
  46 + {
  47 + type: 'el-switch',
  48 + label: '千位符显示',
  49 + name: 'isFormatterNum',
  50 + required: false,
  51 + placeholder: '',
  52 + value: false
  53 + },
  54 + {
  55 + type: 'el-input-number',
  56 + label: '小数位数',
  57 + name: 'toFixed',
  58 + required: false,
  59 + placeholder: '',
  60 + value: 0,
  61 + },
  62 + {
  63 + type: 'el-select',
  64 + label: '水平对齐方式',
  65 + name: 'textAlign',
  66 + required: false,
  67 + placeholder: '',
  68 + selectOptions: [
  69 + {code: 'center', name: '居中'},
  70 + {code: 'left', name: '左对齐'},
  71 + {code: 'right', name: '右对齐'}
  72 + ],
  73 + value: 'center'
  74 + },
  75 + {
  76 + type: 'el-input-number',
  77 + label: '动效帧数',
  78 + name: 'animationFrame',
  79 + required: false,
  80 + placeholder: '',
  81 + value: 100,
  82 + },
  83 + [
  84 + {
  85 + name: '文字样式设置',
  86 + list: [
  87 + {
  88 + type: 'vue-color',
  89 + label: '颜色',
  90 + name: 'fill',
  91 + required: false,
  92 + placeholder: '',
  93 + value: '#3de7c9'
  94 + },
  95 + {
  96 + type: 'el-input-number',
  97 + label: '字体大小',
  98 + name: 'fontSize',
  99 + required: false,
  100 + placeholder: '',
  101 + value: 30,
  102 + },
  103 + {
  104 + type: 'el-select',
  105 + label: '字体粗细',
  106 + name: 'fontWeight',
  107 + required: false,
  108 + placeholder: '',
  109 + selectOptions: [
  110 + {code: 'normal', name: '正常'},
  111 + {code: 'bold', name: '粗体'},
  112 + {code: 'bolder', name: '更粗'},
  113 + {code: 'lighter', name: '更细'},
  114 + ],
  115 + value: 'normal'
  116 + },
  117 + ],
  118 + }
  119 + ]
  120 + ],
  121 + // 数据
  122 + data: [],
  123 + // 坐标
  124 + position: [
  125 + {
  126 + type: 'el-input-number',
  127 + label: '左边距',
  128 + name: 'left',
  129 + required: false,
  130 + placeholder: '',
  131 + value: 10,
  132 + },
  133 + {
  134 + type: 'el-input-number',
  135 + label: '上边距',
  136 + name: 'top',
  137 + required: false,
  138 + placeholder: '',
  139 + value: 10,
  140 + },
  141 + {
  142 + type: 'el-input-number',
  143 + label: '宽度',
  144 + name: 'width',
  145 + required: false,
  146 + placeholder: '该容器在1920px大屏中的宽度',
  147 + value: 600,
  148 + },
  149 + {
  150 + type: 'el-input-number',
  151 + label: '高度',
  152 + name: 'height',
  153 + required: false,
  154 + placeholder: '该容器在1080px大屏中的高度',
  155 + value: 100,
  156 + },
  157 + ],
  158 + }
  159 +}
... ...
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
  View file @9652d5c
... ... @@ -5,7 +5,7 @@ export const widgetDigitalFlop= {
5 5 code: 'widget-digital-flop',
6 6 type: 'text',
7 7 tabName: '文本栏',
8   - label: '数字翻牌器',
  8 + label: '数字翻牌',
9 9 icon: 'iconshujujieruKafkajiqun',
10 10 options: {
11 11 // 配置
... ... @@ -16,7 +16,7 @@ export const widgetDigitalFlop= {
16 16 name: 'layerName',
17 17 required: false,
18 18 placeholder: '',
19   - value: '数字翻牌器',
  19 + value: '数字翻牌',
20 20 },
21 21 {
22 22 type: 'el-input-text',
... ... @@ -152,7 +152,7 @@ export const widgetDigitalFlop= {
152 152 name: 'height',
153 153 required: false,
154 154 placeholder: '该容器在1080px大屏中的高度',
155   - value: 200,
  155 + value: 50,
156 156 },
157 157 ],
158 158 }
... ...
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-video.js renamed to src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js
  View file @9652d5c
1 1 export const widgetVideo = {
2 2 code: 'widget-video',
3   - type: 'text',
4   - tabName: '文本栏',
  3 + type: 'video',
  4 + tabName: '播放器',
5 5 label: '视频',
6 6 icon: 'iconshipin',
7 7 options: {
... ...
src/views/bigscreenDesigner/designer/tools/main.js
  View file @9652d5c
... ... @@ -8,8 +8,8 @@ import { widgetText } from &quot;./configure/texts/widget-text&quot;
8 8 import { widgetMarquee } from "./configure/texts/widget-marquee"
9 9 import { widgetHref } from "./configure/texts/widget-href"
10 10 import { widgetTime } from "./configure/texts/widget-time"
11   -import { widgetVideo } from "./configure/texts/widget-video"
12   -import { widgetTable } from "./configure/texts/widget-table"
  11 +import { widgetVideo } from "./configure/video/widget-video"
  12 +import { widgetTable } from "./configure/table/widget-table"
13 13 import { widgetIframe } from "./configure/texts/widget-iframe"
14 14 // import { widgetUniversal } from "./configure/widget-universal"
15 15 import { widgetBarchart } from "./configure/barCharts/widget-barchart"
... ... @@ -37,9 +37,12 @@ import { widgetBarLineStack } from &quot;./configure/barlineCharts/widget-bar-line-st
37 37 import { widgetProgress } from "./configure/percentCharts/widget-progress";
38 38 import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond";
39 39 import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop";
40   -import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board";
  40 +import {widgetScrollRankingBoard} from "./configure/table/widget-scroll-ranking-board";
41 41 import {widgetActiveRingChart} from "./configure/pieCharts/widget-active-ring-chart";
42 42 import {widgetConicalColumnChart} from "./configure/funnelCharts/widget-conical-column-chart";
  43 +import {widgetBorderBoxFloat} from "./configure/div/widget-border-box-float";
  44 +import {widgetDigitalFlopSingle} from "./configure/texts/widget-digital-flop-single";
  45 +import {widgetSvg} from "./configure/div/widget-svg";
43 46  
44 47  
45 48 export const widgetTool = [
... ... @@ -55,7 +58,6 @@ export const widgetTool = [
55 58 widgetHref,
56 59 widgetTime,
57 60 widgetIframe,
58   - widgetVideo,
59 61 widgetWaterLevelPond,
60 62 widgetDigitalFlop,
61 63 widgetTable,
... ... @@ -87,5 +89,9 @@ export const widgetTool = [
87 89 widgetBarLineStack,
88 90 widgetProgress,
89 91 widgetActiveRingChart,
90   - widgetConicalColumnChart
  92 + widgetConicalColumnChart,
  93 + widgetVideo,
  94 + widgetBorderBoxFloat,
  95 + widgetDigitalFlopSingle,
  96 + widgetSvg,
91 97 ]
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetBorderBoxFloat.vue 0 → 100644
  View file @9652d5c
  1 +<!--
  2 + Div 图层
  3 +-->
  4 +<template>
  5 + <dv-border-Box-13 class="showRight a-time5 a-yj a-yjfx" :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor">
  6 + <dv-decoration-10 class="line" :style="lineColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse">
  7 + <div style="text-align:center;font-size: 30px;font-weight: bold;display: flex;justify-content: center; align-items: center;">123</div>
  8 +
  9 + </dv-decoration-10>
  10 +
  11 + </dv-border-Box-13>
  12 + <!-- <dv-border-Box-1 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  13 + <!-- v-if="styleColor.divClass === 'dv-border-Box-1'"></dv-border-Box-1>-->
  14 + <!-- <dv-border-Box-2 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  15 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-2'"></dv-border-Box-2>-->
  16 + <!-- <dv-border-Box-3 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  17 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-3'"></dv-border-Box-3>-->
  18 + <!-- <dv-border-Box-4 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  19 + <!-- :reverse="transStyle.reverse"-->
  20 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-4'"></dv-border-Box-4>-->
  21 + <!-- <dv-border-Box-5 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  22 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-5'"></dv-border-Box-5>-->
  23 + <!-- <dv-border-Box-6 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  24 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-6'"></dv-border-Box-6>-->
  25 + <!-- <dv-border-Box-7 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  26 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-7'"></dv-border-Box-7>-->
  27 + <!-- <dv-border-Box-8 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  28 + <!-- :dur="transStyle.dur" :reverse="transStyle.reverse"-->
  29 + <!-- :title="transStyle.title" :titleWidth="transStyle.titleWidth"-->
  30 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-8'" ></dv-border-Box-8>-->
  31 + <!-- <dv-border-Box-9 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  32 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-9'"></dv-border-Box-9>-->
  33 + <!-- <dv-border-Box-10 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  34 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-10'"></dv-border-Box-10>-->
  35 + <!-- <dv-border-Box-11 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  36 + <!-- :title="transStyle.title" :titleWidth="transStyle.titleWidth"-->
  37 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-11'"></dv-border-Box-11>-->
  38 + <!-- <dv-border-Box-12 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  39 + <!-- v-else-if="styleColor.divClass === 'dv-border-Box-12'"></dv-border-Box-12>-->
  40 + <!-- <dv-border-Box-13 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"-->
  41 + <!-- v-else="styleColor.divClass === 'dv-border-Box-13'"></dv-border-Box-13>-->
  42 +</template>
  43 +<script>
  44 +import borderBox1 from "@jiaminghi/data-view/lib/components/borderBox1";
  45 +import borderBox2 from "@jiaminghi/data-view/lib/components/borderBox2";
  46 +import borderBox3 from "@jiaminghi/data-view/lib/components/borderBox3";
  47 +import borderBox4 from "@jiaminghi/data-view/lib/components/borderBox4";
  48 +import borderBox5 from "@jiaminghi/data-view/lib/components/borderBox5";
  49 +import borderBox6 from "@jiaminghi/data-view/lib/components/borderBox6";
  50 +import borderBox7 from "@jiaminghi/data-view/lib/components/borderBox7";
  51 +import borderBox8 from "@jiaminghi/data-view/lib/components/borderBox8";
  52 +import borderBox9 from "@jiaminghi/data-view/lib/components/borderBox9";
  53 +import borderBox10 from "@jiaminghi/data-view/lib/components/borderBox10";
  54 +import borderBox11 from "@jiaminghi/data-view/lib/components/borderBox11";
  55 +import borderBox12 from "@jiaminghi/data-view/lib/components/borderBox12";
  56 +import borderBox13 from "@jiaminghi/data-view/lib/components/borderBox13";
  57 +import decoration10 from "@jiaminghi/data-view/lib/components/decoration10";
  58 +Vue.use(borderBox1)
  59 +Vue.use(borderBox2)
  60 +Vue.use(borderBox3)
  61 +Vue.use(borderBox4)
  62 +Vue.use(borderBox5)
  63 +Vue.use(borderBox6)
  64 +Vue.use(borderBox7)
  65 +Vue.use(borderBox8)
  66 +Vue.use(borderBox9)
  67 +Vue.use(borderBox10)
  68 +Vue.use(borderBox11)
  69 +Vue.use(borderBox12)
  70 +Vue.use(borderBox13)
  71 +Vue.use(decoration10)
  72 +export default {
  73 + name: "WidgetBorderBox",
  74 + components: {
  75 + },
  76 + props: {
  77 + value: Object,
  78 + ispreview: Boolean,
  79 + },
  80 + data() {
  81 + return {
  82 + options: {},
  83 + optionsData: {},
  84 + };
  85 + },
  86 + computed: {
  87 + transStyle() {
  88 + let transStyleObj = this.objToOne(this.options);
  89 + let color = [];
  90 + if(!this.isBlankObject(transStyleObj)){
  91 + const colorOne = transStyleObj.colorOne;
  92 + if(!this.isBlankObject(colorOne)){
  93 + color.push(colorOne);
  94 + }
  95 + const colorTwo = transStyleObj.colorTwo;
  96 + if(!this.isBlankObject(colorTwo)){
  97 + color.push(colorTwo);
  98 + }
  99 + transStyleObj.color = color;
  100 + }
  101 + return transStyleObj;
  102 + },
  103 + styleColor() {
  104 + return {
  105 + position: this.ispreview ? "absolute" : "static",
  106 + // color: this.transStyle.colorOne,
  107 + // text: this.transStyle.text,
  108 + divClass:
  109 + this.transStyle.divType == undefined
  110 + ? "dv-border-Box-1"
  111 + : this.transStyle.divType,
  112 + // background: this.transStyle.backgroundColor,
  113 + width: this.transStyle.width + "px",
  114 + height: this.transStyle.height + "px",
  115 + left: this.transStyle.left + "px",
  116 + top: this.transStyle.top + "px",
  117 + right: this.transStyle.right + "px",
  118 + };
  119 + },
  120 + lineColor() {
  121 + return {
  122 + position: this.ispreview ? "absolute" : "static",
  123 + width: this.transStyle.width*0.8 + "px",
  124 + height: this.transStyle.height + "px",
  125 + left: this.transStyle.left + "px",
  126 + top: this.transStyle.top + "px",
  127 + right: this.transStyle.right + "px",
  128 + };
  129 + },
  130 + },
  131 + watch: {
  132 + value: {
  133 + handler(val) {
  134 + this.options = val;
  135 + this.optionsData = val.data;
  136 + },
  137 + deep: true,
  138 + },
  139 + },
  140 + mounted() {
  141 + this.options = this.value;
  142 + },
  143 + methods: {},
  144 +};
  145 +</script>
  146 +
  147 +<style scoped lang="scss">
  148 +.div {
  149 + width: 100%;
  150 + height: 100%;
  151 + border: 2em;
  152 + border-color: aqua;
  153 + overflow: hidden;
  154 +}
  155 +
  156 +.div_Style {
  157 + width: 100%;
  158 + height: 100%;
  159 +}
  160 +.line{
  161 + position: relative;
  162 + margin-left: 15px;
  163 +
  164 +}
  165 +</style>
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue 0 → 100644
  View file @9652d5c
  1 +<!--
  2 + svg 图层
  3 +-->
  4 +<template>
  5 + <div id="formStr" :class="['div_Style']"
  6 + :style="styleColor" v-html="showText">
  7 + </div>
  8 +</template>
  9 +<script>
  10 +
  11 +import {mapState} from "vuex";
  12 +export default {
  13 + name: "WidgetSvg",
  14 + components: {
  15 + },
  16 + props: {
  17 + value: Object,
  18 + ispreview: Boolean,
  19 + },
  20 + data() {
  21 + return {
  22 + options: {},
  23 + svgData:[],
  24 + optionsData: {},
  25 + optionsSetUp: {},
  26 + };
  27 + },
  28 + computed: {
  29 + ...mapState('dataSource', ['staticData']),
  30 + transStyle() {
  31 + return this.objToOne(this.options);
  32 + },
  33 + styleColor() {
  34 + const styleColor = {
  35 + position: this.ispreview ? "absolute" : "static",
  36 + width: this.transStyle.width + "px",
  37 + height: this.transStyle.height + "px",
  38 + left: this.transStyle.left + "px",
  39 + top: this.transStyle.top + "px",
  40 + right: this.transStyle.right + "px"
  41 + };
  42 + return styleColor;
  43 + },
  44 + showText() {
  45 + const {text, slectedDataType} = this.transStyle;
  46 + const key = this.staticData[slectedDataType] || text;
  47 + const dataSvg = this.value.setup.dynamicAddSvg;
  48 + for (let i = 0; i < dataSvg.length; i++) {
  49 + if(dataSvg[i].key==key){
  50 + /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置 */
  51 + /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
  52 + //设置svg 自适应 添加属性 viewBox="0,0,640,480"
  53 + let svg = dataSvg[i].value;
  54 + let svgViewbox = svg.substr(0,svg.indexOf("viewBox=\"")+9); //截取最后一个点号后4个字符
  55 + let svgViewboxAfter = svg.substr(svg.indexOf("viewBox=\"")+9,svg.length); //截取最后一个点号后4个字符
  56 + let svgViewboxBox = svgViewboxAfter.substr(0,svgViewboxAfter.indexOf("\"")); //截取最后一个点号后4个字符
  57 + let svgViewboxBoxAfter = svgViewboxAfter.substr(svgViewboxAfter.indexOf("\"")+1,svgViewboxAfter.length); //截取最后一个点号后4个字符
  58 + let viewbox = this.transStyle.left+" "+ this.transStyle.top+" "+ this.transStyle.width+" "+ this.transStyle.height;
  59 + let dataSvgAfter = svgViewbox+viewbox+"\"" +svgViewboxBoxAfter;
  60 + console.log("svg",svg);
  61 + console.log("svgViewbox",svgViewbox);
  62 + console.log("svgViewboxAfter",svgViewboxAfter);
  63 + console.log("svgViewboxBox",svgViewboxBox);
  64 + console.log("svgViewboxBoxAfter",svgViewboxBoxAfter);
  65 + console.log("viewbox",viewbox);
  66 + console.log("dataSvgAfter",dataSvgAfter);
  67 + return svg;
  68 + }
  69 + }
  70 + return "";
  71 + },
  72 + },
  73 + watch: {
  74 + value: {
  75 + handler(val) {
  76 + this.options = val;
  77 + this.optionsData = val.data;
  78 + this.optionsSetUp = val.setup;
  79 + this.initData();
  80 + },
  81 + deep: true,
  82 + },
  83 + },
  84 + mounted() {
  85 + this.options = this.value;
  86 + this.optionsData = this.value.data;
  87 + },
  88 + methods: {
  89 + initData() {
  90 + this.handlerSvgData();
  91 + },
  92 + handlerSvgData(){
  93 + const data = this.optionsSetUp.dynamicAddSvg;
  94 + this.svgData = data;
  95 + },
  96 + getSvgValue(key){
  97 + const data = this.optionsSetUp.dynamicAddSvg;
  98 + for (let i = 0; i < data.length; i++) {
  99 + if(data[i].key==key){
  100 + return data[i].value;
  101 + }
  102 + }
  103 + return "";
  104 + },
  105 + }
  106 +};
  107 +</script>
  108 +
  109 +<style scoped lang="scss">
  110 +.div {
  111 + width: 100%;
  112 + height: 100%;
  113 + border: 2em;
  114 + border-color: aqua;
  115 + overflow: hidden;
  116 +}
  117 +
  118 +.div_Style {
  119 + width: 100%;
  120 + height: 100%;
  121 +}
  122 +#svg {
  123 + width: 100%;
  124 + height: 100vh;
  125 +}
  126 +svg {
  127 + width: 100% !important;
  128 + height: 100vh !important;
  129 +}
  130 +</style>
... ...
src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue
  View file @9652d5c
... ... @@ -148,7 +148,9 @@ export default {
148 148 });
149 149 },
150 150 renderingFn(val) {
  151 + // console.log("设置静态数据",val)
151 152 this.options.data=val;
  153 + this.options={...this.options};
152 154 }
153 155  
154 156 }
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue renamed to src/views/bigscreenDesigner/designer/widget/table/widgetScrollRankingBoard.vue
  View file @9652d5c
src/views/bigscreenDesigner/designer/widget/text/widgetTable.vue renamed to src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue
  View file @9652d5c
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @9652d5c
... ... @@ -11,7 +11,7 @@ import WidgetMarquee from &quot;./text/widgetMarquee.vue&quot;;
11 11 import widgetTime from "./text/widgetTime.vue";
12 12 import widgetImage from "./div/widgetImage.vue";
13 13 import widgetSlider from "./div/widgetSlider.vue";
14   -import widgetVideo from "./text/widgetVideo.vue";
  14 +import widgetVideo from "./video/widgetVideo.vue";
15 15 import WidgetIframe from "./text/widgetIframe.vue";
16 16 import widgetBarchart from "./bar/widgetBarchart.vue";
17 17 import widgetLinechart from "./line/widgetLinechart.vue";
... ... @@ -21,7 +21,7 @@ import WidgetPiechart from &quot;./pie/widgetPiechart.vue&quot;;
21 21 import WidgetFunnel from "./funnel/widgetFunnel.vue";
22 22 import WidgetGauge from "./percent/widgetGauge.vue";
23 23 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
24   -import widgetTable from "./text/widgetTable.vue";
  24 +import widgetTable from "./table/widgetTable.vue";
25 25 import widgetLineMap from "./map/widgetLineMap.vue";
26 26 import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
27 27 import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
... ... @@ -36,16 +36,18 @@ import widgetHeatmap from &quot;./heatmap/widgetHeatmap&quot;;
36 36 import widgetRadar from "./radar/widgetRadar";
37 37 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
38 38 import widgetDecorate from "./decorate/decorate.vue";
39   -// import widgetDiv from "./div/widgetDiv.vue";
  39 +import widgetBorderBoxFloat from "./div/widgetBorderBoxFloat";
40 40 import widgetBorderBox from "./div/widgetBorderBox";
41 41 import widgetProgress from "./percent/widgetProgress";
42 42 import widgetDecoration from "./div/widgetDecoration";
43 43 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
44 44 import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
45 45 import widgetDigitalFlop from "./text/widgetDigitalFlop";
46   -import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
  46 +import widgetScrollRankingBoard from "./table/widgetScrollRankingBoard";
47 47 import widgetActiveRingChart from "./pie/widgetActiveRingChart";
48 48 import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart";
  49 +import widgetDigitalFlopSingle from "./text/widgetDigitalFlopSingle";
  50 +import widgetSvg from "./div/widgetSvg";
49 51  
50 52 export default {
51 53 name: "WidgetTemp",
... ... @@ -90,7 +92,10 @@ export default {
90 92 widgetDigitalFlop,
91 93 widgetScrollRankingBoard,
92 94 widgetActiveRingChart,
93   - widgetConicalColumnChart
  95 + widgetConicalColumnChart,
  96 + widgetBorderBoxFloat,
  97 + widgetDigitalFlopSingle,
  98 + widgetSvg,
94 99 },
95 100 model: {
96 101 prop: "value",
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
  View file @9652d5c
... ... @@ -45,6 +45,18 @@ export default {
45 45 computed: {
46 46 ...mapState('dataSource', ['staticData']),
47 47 styleObj() {
  48 + /*数字初始化*/
  49 + const {slectedDataType,numberText} = this.optionsSetup;
  50 + let datav = this.staticData[slectedDataType] || numberText;
  51 + let dataArray = datav.toString().split(",");
  52 + const numArray=[];
  53 + if(this.isNotBlankArray(dataArray)){
  54 + dataArray.forEach(num=>{
  55 + numArray.push(parseInt(num));
  56 + });
  57 + }
  58 + this.options.number = numArray;
  59 + this.options={...this.options};
48 60 return {
49 61 position: this.ispreview ? "absolute" : "static",
50 62 width: this.optionsStyle.width + "px",
... ... @@ -96,7 +108,6 @@ export default {
96 108 numArray.push(parseInt(num));
97 109 });
98 110 }
99   - // console.log("返回数据number",numArray);
100 111 this.options.number = numArray;
101 112 },
102 113 //字体修改
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue 0 → 100644
  View file @9652d5c
  1 +<template>
  2 + <div class="center-cmp" :style="styleObj">
  3 + <div class="cc-details" :style="detailsClass">
  4 + <div class="textStyle" >设备总数</div>
  5 + <div
  6 + v-for="(dataValue, index) in options.data"
  7 + :style="cardClass()"
  8 + :key="index"
  9 + >
  10 + <dv-digital-flop :config="dataValue"></dv-digital-flop>
  11 + </div>
  12 +
  13 +<!-- //遍历数字插入-->
  14 +<!-- <div :style="cardClass()"><dv-digital-flop :config="options.data"></dv-digital-flop></div>-->
  15 +<!-- <div :style="cardClass()">3</div>-->
  16 +<!-- <div :style="cardClass2()">,</div>-->
  17 +<!-- <div :style="cardClass()">7</div>-->
  18 + </div>
  19 + </div>
  20 +</template>
  21 +<script>
  22 +import Vue from "vue";
  23 +import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
  24 +import {mapState} from "vuex";
  25 +Vue.use(digitalFlop);
  26 +export default {
  27 + name: "WidgetDigitalFlopSingle",
  28 + props: {
  29 + value: Object,
  30 + ispreview: Boolean,
  31 + },
  32 + data() {
  33 + return {
  34 + //返回图标数据
  35 + options: {
  36 + data:[],
  37 + cardClassJson:{},//文字边框字体设置
  38 + cardClassJson2:{},//千位数符号设置
  39 + },
  40 + config:{},
  41 + optionsStyle: {}, // 样式
  42 + optionsData: {}, // 数据
  43 + optionsCollapse: {}, // 图标属性
  44 + optionsSetup: {}
  45 + };
  46 + },
  47 + computed: {
  48 + styleObj() {
  49 + return {
  50 + position: this.ispreview ? "absolute" : "static",
  51 + width: this.optionsStyle.width + "px",
  52 + height: this.optionsStyle.height + "px",
  53 + left: this.optionsStyle.left + "px",
  54 + top: this.optionsStyle.top + "px",
  55 + background: this.optionsSetup.background
  56 + };
  57 + },
  58 + detailsClass() {
  59 + return {
  60 + height: this.optionsStyle.height+ "px",
  61 + };
  62 + },
  63 + },
  64 + watch: {
  65 + value: {
  66 + handler(val) {
  67 + this.optionsStyle = val.position;
  68 + this.optionsData = val.data;
  69 + this.optionsSetup = val.setup;
  70 + this.editorOptions();
  71 + },
  72 + deep: true
  73 + }
  74 + },
  75 + created() {
  76 + this.optionsStyle = this.value.position;
  77 + this.optionsData = this.value.data;
  78 + this.optionsSetup = this.value.setup;
  79 + this.editorOptions();
  80 + },
  81 + methods: {
  82 + // 修改图标options属性
  83 + editorOptions() {
  84 + //数据修改
  85 + // this.setOptionsData();
  86 + // //显示内容
  87 + // this.showText();
  88 +
  89 + //字体样式
  90 + // this.setFontStyle();
  91 + this.getDataArray();
  92 + },
  93 + //单个文字样式
  94 + cardClass() {
  95 + let cardClassJson = {};
  96 + cardClassJson["background-color"] = "#04318099";
  97 + cardClassJson["height"] = "70px";
  98 + cardClassJson["width"] = "70px";
  99 + cardClassJson["border-radius"] = "35px";
  100 + cardClassJson["line-height"] = "70px";
  101 + cardClassJson["font-size"] = "45px";
  102 + cardClassJson["font-weight"] = "bold";
  103 + cardClassJson["text-align"] = "center";
  104 + cardClassJson["margin"] = "10px";
  105 + this.options.cardClassJson = cardClassJson;
  106 + console.log(cardClassJson);
  107 + return cardClassJson;
  108 + },
  109 + //千分符设置
  110 + cardClass2() {
  111 + let cardClassJson = {};
  112 + //cardClassJson["background-color"] = "#04318099";
  113 + cardClassJson["color"] = "#08e5ff";
  114 + // cardClassJson["height"] = "70px";
  115 + // cardClassJson["width"] = "70px";
  116 + cardClassJson["font-size"] = "45px";
  117 + cardClassJson["font-weight"] = "bold";
  118 + // cardClassJson["line-height"] = "70px";
  119 + // cardClassJson["text-align"] = "center";
  120 + // cardClassJson["border-radius"] = "35px";
  121 + cardClassJson["margin"] = "30px 0px 0px 0px";
  122 + console.log(cardClassJson);
  123 + return cardClassJson;
  124 + },
  125 + //获取数字
  126 + getDataArray() {
  127 + let dataArray = [];
  128 + let data = {};
  129 + data["number"]=[5];
  130 + data["content"]="{nt}";
  131 + data["toFixed"]=0;
  132 + data["textAlign"]="center";
  133 + data["rowGap"]=0;
  134 + let fontStyle={};
  135 + fontStyle["fontSize"]=45;
  136 + // fontStyle["fontWeight"]="bold";
  137 + // fontStyle["textAlign"]="center";
  138 + fontStyle["fill"]="#08e5ff";
  139 + data["style"]=fontStyle;
  140 + data["animationCurve"]="easeOutCubic";
  141 + data["animationFrame"]=50;
  142 + dataArray.push(data);
  143 + let data2 = {};
  144 + data2["number"]=[3];
  145 + data2["content"]="{nt}";
  146 + data2["toFixed"]=0;
  147 + data2["textAlign"]="center";
  148 + data2["rowGap"]=0;
  149 + data2["style"]=fontStyle;
  150 + data2["animationCurve"]="easeOutCubic";
  151 + data2["animationFrame"]=50;
  152 + dataArray.push(data2);
  153 + this.options.data={...dataArray};
  154 + },
  155 +
  156 + //显示的内容
  157 + showText() {
  158 + const {slectedDataType,numberText} = this.optionsSetup;
  159 + let datav = this.staticData[slectedDataType] || numberText;
  160 + let dataArray = datav.toString().split(",");
  161 + const numArray=[];
  162 + if(this.isNotBlankArray(dataArray)){
  163 + dataArray.forEach(num=>{
  164 + numArray.push(parseInt(num));
  165 + });
  166 + }
  167 + // console.log("返回数据number",numArray);
  168 + this.options.number = numArray;
  169 + },
  170 +
  171 + //千为分隔符
  172 + formatterNum (number) {
  173 + const numbers = number.toString().split('').reverse();
  174 + const segs = [];
  175 + while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
  176 + return segs.join(',').split('').reverse().join('');
  177 + },
  178 + // 数据修改
  179 + setOptionsData() {
  180 + const optionsSetup = this.optionsSetup;
  181 + if(optionsSetup.isFormatterNum){
  182 + this.options.formatter=this.formatterNum;
  183 + }else{
  184 + this.options.formatter=undefined;
  185 + }
  186 + this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
  187 + this.options.content=optionsSetup.content;
  188 + this.options.toFixed=optionsSetup.toFixed;
  189 + this.options.textAlign=optionsSetup.textAlign;
  190 + this.options.animationFrame=optionsSetup.animationFrame;
  191 + // const optionsDeep =this.deepClone(this.options);
  192 + // console.log("返回数据options",optionsDeep);
  193 + this.options={...this.options};
  194 + // this.options=optionsDeep;
  195 + },
  196 + }
  197 +};
  198 +</script>
  199 +
  200 +<style scoped lang="scss">
  201 +
  202 + .center-cmp {
  203 + width: 100%;
  204 + height: 100%;
  205 + margin: 0px;
  206 + padding: 0px;
  207 + display: flex;
  208 + flex-direction: column;
  209 + }
  210 + .cc-details {
  211 + display: flex;
  212 + justify-content: center;
  213 + align-items: center;
  214 + }
  215 +
  216 + .textStyle{
  217 + color: #08e5ff;
  218 + justify-content: center;
  219 + font-size: 45px;
  220 + font-weight: bold;
  221 + line-height: 70px;
  222 + text-align: left;
  223 + margin: 10px;
  224 + }
  225 +</style>
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetVideo.vue renamed to src/views/bigscreenDesigner/designer/widget/video/widgetVideo.vue
  View file @9652d5c
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @9652d5c
... ... @@ -20,7 +20,7 @@ import widgetHref from &quot;./text/widgetHref.vue&quot;;
20 20 import widgetText from "./text/widgetText.vue";
21 21 import WidgetMarquee from "./text/widgetMarquee.vue";
22 22 import widgetTime from "./text/widgetTime.vue";
23   -import widgetVideo from "./text/widgetVideo.vue";
  23 +import widgetVideo from "./video/widgetVideo.vue";
24 24 import WidgetIframe from "./text/widgetIframe.vue";
25 25 import widgetBarchart from "./bar/widgetBarchart.vue";
26 26 import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
... ... @@ -30,7 +30,7 @@ import WidgetPiechart from &quot;./pie/widgetPiechart.vue&quot;;
30 30 import WidgetFunnel from "./funnel/widgetFunnel.vue";
31 31 import WidgetGauge from "./percent/widgetGauge.vue";
32 32 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
33   -import widgetTable from "./text/widgetTable.vue";
  33 +import widgetTable from "./table/widgetTable.vue";
34 34 import widgetLineMap from "./map/widgetLineMap.vue";
35 35 import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
36 36 import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
... ... @@ -45,7 +45,6 @@ import widgetHeatmap from &quot;./heatmap/widgetHeatmap&quot;;
45 45 import widgetRadar from "./radar/widgetRadar";
46 46 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
47 47 import widgetDecorate from "./decorate/decorate.vue";
48   -// import widgetDiv from "./div/widgetDiv.vue";
49 48 import widgetImage from "./div/widgetImage.vue";
50 49 import widgetSlider from "./div/widgetSlider.vue";
51 50 import widgetBorderBox from "./div/widgetBorderBox.vue";
... ... @@ -54,9 +53,12 @@ import widgetCapsuleChart from &quot;./bar/widgetCapsuleChart&quot;;
54 53 import widgetProgress from "./percent/widgetProgress";
55 54 import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
56 55 import widgetDigitalFlop from "./text/widgetDigitalFlop";
57   -import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
  56 +import widgetScrollRankingBoard from "./table/widgetScrollRankingBoard";
58 57 import widgetActiveRingChart from "./pie/widgetActiveRingChart";
59 58 import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart";
  59 +import widgetBorderBoxFloat from "./div/widgetBorderBoxFloat";
  60 +import widgetDigitalFlopSingle from "./text/widgetDigitalFlopSingle";
  61 +import widgetSvg from "./div/widgetSvg";
60 62 export default {
61 63 name: "Widget",
62 64 components: {
... ... @@ -100,7 +102,10 @@ export default {
100 102 widgetDigitalFlop,
101 103 widgetScrollRankingBoard,
102 104 widgetActiveRingChart,
103   - widgetConicalColumnChart
  105 + widgetConicalColumnChart,
  106 + widgetBorderBoxFloat,
  107 + widgetDigitalFlopSingle,
  108 + widgetSvg,
104 109 },
105 110 model: {
106 111 prop: "value",
... ...
src/views/home/index.vue
  View file @9652d5c
... ... @@ -3,12 +3,12 @@
3 3 -->
4 4 <template>
5 5 <div class="index-container">
6   - <div class="center"></div>
7   -<!-- <el-row align="middle" justify="center">-->
8   -<!-- <el-col :span="24" :offset="0" class="position">-->
9   -<!-- <div class="center"></div>-->
10   -<!-- </el-col>-->
11   -<!-- </el-row>-->
  6 +<!-- <div class="center"></div>-->
  7 + <el-row align="middle" justify="center">
  8 + <el-col :span="24" :offset="0" class="position">
  9 + <div class="center"></div>
  10 + </el-col>
  11 + </el-row>
12 12 </div>
13 13 </template>
14 14  
... ... @@ -46,7 +46,7 @@ export default {
46 46 #e9f0fb,
47 47 #5bc4ef
48 48 ); /* Firefox 3.6 - 15 */
49   - background: linear-gradient(75deg, #e9f0fb, #e9f0fb);
  49 + background: linear-gradient(75deg, #010520, #020620);
50 50 .position {
51 51 padding-left: 10px;
52 52 padding-right: 10px;
... ...
src/views/layout/components/Sidebar/index.vue
  View file @9652d5c
... ... @@ -3,7 +3,7 @@
3 3 <div class="admin-title" @click="goBigScreen">
4 4 <div class="con">
5 5 <img src="../../../../../static/logo-dp.png" width="50" />
6   - <span class="version">V0.9.9</span>
  6 + <span class="version">V2023.1</span>
7 7 </div>
8 8 </div>
9 9 <el-menu
... ...
src/views/login.vue
  View file @9652d5c
... ... @@ -10,7 +10,7 @@
10 10 <div class="box">
11 11 <img src="../../static/logo-dp.png" alt="" />
12 12 </div>
13   - <div class="name">上海小羚羊大屏报表系统</div>
  13 + <div class="name">上海小羚羊数据可视化平台</div>
14 14 </div>
15 15 <!-- <img src="@/assets/images/home-logo.png" alt="logo" /> -->
16 16 </div>
... ...