UA 添加一系列转场特效 对部分背景图作css实现

whychw

2021-01-07 b53df1bd5214caacf0c3c46e28e2e2f2e9f4d504

UA 添加一系列转场特效 对部分背景图作css实现

 package-lock.json

@@ -1687,6 +1687,16 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792266928&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1713,6 +1723,53 @@
            "unique-filename": "^1.1.1"
          }
        },
        "chalk": {
          "version": "4.1.0",
          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1727,6 +1784,16 @@
          "requires": {
            "figgy-pudding": "^3.5.1",
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1608035266405&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "terser-webpack-plugin": {
@@ -1744,6 +1811,18 @@
            "source-map": "^0.6.1",
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.1.2",
          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.2.tgz?cache=0&sync_timestamp=1608187947155&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.2.tgz",
          "integrity": "sha1-XAO2xQ0qX5g8fOuhXFDXjKKymPQ=",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -10501,87 +10580,6 @@
          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
          "dev": true
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.1.1",
      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.1.tgz?cache=0&sync_timestamp=1607093697210&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.1.tgz",
      "integrity": "sha1-9bKG1grGiGaExjoXoYQ5HMngGZo=",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792266928&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.0",
          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1606205060845&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },

 public/theme/normal.css

@@ -87,12 +87,60 @@
}

.contentBox {
    background: url('../../src/assets/images/contentBox-bg.jpg') 0 0 no-repeat;
    background-size: 100% 100%;
  background: /* 左上角 */radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) 14px 4px / 6px 6px
    ,linear-gradient(-45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) 1px 9px / 15px 15px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) 1px 23px / 1px 240px
    ,linear-gradient(-45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) 7px 0 / 24px 24px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) 6px 24px / 1px 88px
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) 3px 111px / 6px 6px
    ,linear-gradient(135deg, #171350 50%, transparent 50%) 0 0 / 38px 38px
    ,linear-gradient(0, #171350 0, #171350 0) 0 0 / 10px 290px
    ,linear-gradient(135deg, #171350 50%, transparent 50%) 0 290px / 10px 10px
    /* 右上角  */
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) right 20px top / 6px 6px
    ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) right 1px top 5px / 20px 20px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) right 1px top 24px / 1px 106px
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) right 3px top 97px / 6px 6px
    ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) right 5px top 1px / 26px 26px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) right 5px top 26px / 1px 72px
    ,linear-gradient(-135deg, #171350 50%, transparent 50%) right top / 38px 38px
    ,linear-gradient(0, #171350 0, #171350 0) right top / 10px 130px
    ,linear-gradient(-135deg, #171350 50%, transparent 50%) right top 130px / 10px 10px
    /*  左下角  */
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) left 20px bottom / 6px 6px
    ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left 1px bottom 5px / 20px 20px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) left 1px bottom 24px / 1px 106px
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) left 3px bottom 97px / 6px 6px
    ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left 5px bottom 1px / 26px 26px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) left 5px bottom 26px / 1px 72px
    ,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom / 38px 38px
    ,linear-gradient(0, #171350 0, #171350 0) left bottom / 10px 130px
    ,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom 130px / 10px 10px
    /* 右下角  */
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) right 14px bottom 4px / 6px 6px
    ,linear-gradient(-45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) right 1px bottom 9px / 15px 15px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) right 1px bottom 23px / 1px 240px
    ,linear-gradient(-45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) right 7px bottom / 24px 24px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) right 6px bottom 24px / 1px 88px
    ,radial-gradient(circle farthest-side, transparent 60%, #5282ee 60%, #5282ee 100%, transparent 50%) right 3px bottom 111px / 6px 6px
    ,linear-gradient(-45deg, #171350 50%, transparent 50%) right bottom / 38px 38px
    ,linear-gradient(0, #171350 0, #171350 0) right bottom / 10px 290px
    ,linear-gradient(-45deg, #171350 50%, transparent 50%) right bottom 290px / 10px 10px
    /* 底部中间 */
    ,linear-gradient(-36deg, #5282ee 50%, transparent 50%) calc(50% - 220px) 100% / 30px 8px
    ,linear-gradient(0, #5282ee 0, #5282ee 0) 50% 100% / 420px 8px
    ,linear-gradient(36deg, #5282ee 50%, transparent 50%) calc(50% + 220px) 100% / 30px 8px
    ,linear-gradient(-30deg, #171350 50%, transparent 50%) calc(50% - 222px) 100% / 30px 10px
    ,linear-gradient(0, #171350 0, #171350 0) 50% 100% / 420px 10px
    ,linear-gradient(30deg, #171350 50%, transparent 50%) calc(50% + 222px) 100% / 30px 10px
    /* 底色  */
    ,linear-gradient(90deg, #232163 0, #171350 50%, #232163 100%) 50% 50% / auto;/* no */
  background-repeat: no-repeat;
    /*background: url('../../src/assets/images/contentBox-bg.jpg') 0 0 no-repeat;
    background-size: 100% 100%;*/
    width: 100%;
    height: 100%;
    padding: 15px 20px;
    position: relative;
}

.diagram-stc canvas,
@@ -233,4 +281,5 @@
    background-color: #ffe329;
    display: inline-block;
    margin-right: 10px;
}
}


 src/assets/css/basic.css

@@ -124,4 +124,355 @@
html,
body {
    background-color: #171350;
}


.diagram-content {
    position: relative;
}

.diagram-stc {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.diagram-flush {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    overflow: hidden;
}

.page-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/**
 * 转场效果
 * -enter
 * -enter-to
 * -enter-active
 * -leave
 * -leave-to
 * -leave-active
 */
.slide-left-enter {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter-to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slide-left-enter-active {
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
}
.slide-left-leave {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slide-left-leave-to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.slide-left-leave-active {
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
}

.slide-right-enter {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.slide-right-enter-to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slide-right-enter-active {
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
}
.slide-right-leave {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slide-right-leave-to {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.slide-right-leave-active {
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
}


.clip-circle-in-enter-active {
    animation: clipCircleIn .3s linear;
    z-index: 1;
}
.clip-rect-in-leave,
.clip-diamond-in-leave,
.clip-rect-sp-in-leave,
.clip-sector-in-leave,
.seed-leave,
.seed-hor-leave,
.clip-rotate-in-leave,
.clip-triangle-in-leave,
.clip-circle-in-leave {
    opacity: 1;
}
.clip-rect-in-leave-to,
.clip-diamond-in-leave-to,
.clip-rect-sp-in-leave-to,
.clip-sector-in-leave-to,
.seed-leave-to,
.seed-hor-leave-to,
.clip-rotate-in-leave-to,
.clip-triangle-in-leave-to,
.clip-circle-in-leave-to {
    opacity: 0;
}
.clip-rect-in-leave-active,
.clip-diamond-in-leave-active,
.clip-rect-sp-in-leave-active,
.clip-sector-in-leave-active,
.seed-leave-active,
.seed-hor-leave-active,
.clip-rotate-in-leave-active,
.clip-triangle-in-leave-active,
.clip-circle-in-leave-active {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
@keyframes clipCircleIn {
    0%   {
        clip-path: circle(0 at 50% 50%);
    }
    100% {
        clip-path: circle(70% at 50% 50%);
    }    
}


.clip-triangle-in-enter-active {
    animation: clipTriangleIn .3s linear;
    z-index: 1;
}
@keyframes clipTriangleIn {
    0%   {
        clip-path: polygon(50% 50%, 49% 51%, 51% 51%);
    }
    100% {
        clip-path: polygon(50% -100%, -100% 150%, 200% 150%);
    }    
}

.clip-rect-in-enter-active {
    animation: clipRectIn .3s linear;
    z-index: 1;
}
@keyframes clipRectIn {
    0%   {
        clip-path: inset(50% round 10% 50%);
    }
    100% {
        clip-path: inset(0% round 0);
    }    
}

.clip-diamond-in-enter-active {
    animation: clipDiamondIn .3s;
    z-index: 1;
}
@keyframes clipDiamondIn {
    0%   {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    100% {
        clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
    }    
}

.clip-rect-sp-in-enter-active {
    animation: clipRectSpIn .3s;
    z-index: 1;
}
@keyframes clipRectSpIn {
    0%   {
        clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
    }
    100% {
        clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
    }
}

.clip-sector-in-enter-active {
    animation: clipSectorIn .3s linear;
    z-index: 1;
}
@keyframes clipSectorIn {
    0%   {
        clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);
    }
    50% {
        clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
    }
    100% {
        clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
    }
}

.clip-rotate-in-enter-active {
    animation: clipRotateIn .3s linear;
    z-index: 1;
}
@keyframes clipRotateIn {
    0%   {
        clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }
    12.5% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
    }
    37.5% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    }
    62.5% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
    }
    87.5% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
    }
}

.seed-enter-active {
    -webkit-mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    -webkit-mask-size: 40px;
    mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 40px;
    animation: seed .3s linear;
    z-index: 1;
}

.seed-hor-enter-active {
    -webkit-mask: linear-gradient(to bottom, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    -webkit-mask-size: auto 40px;
    mask: linear-gradient(to bottom, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: auto 40px;
    animation: seed .3s linear;
    z-index: 1;
}
@keyframes seed {
    0% {--seed:0}
    1% {--seed:1}
    2% {--seed:2}
    3% {--seed:3}
    4% {--seed:4}
    5% {--seed:5}
    6% {--seed:6}
    7% {--seed:7}
    8% {--seed:8}
    9% {--seed:9}
    10% {--seed:10}
    11% {--seed:11}
    12% {--seed:12}
    13% {--seed:13}
    14% {--seed:14}
    15% {--seed:15}
    16% {--seed:16}
    17% {--seed:17}
    18% {--seed:18}
    19% {--seed:19}
    20% {--seed:20}
    21% {--seed:21}
    22% {--seed:22}
    23% {--seed:23}
    24% {--seed:24}
    25% {--seed:25}
    26% {--seed:26}
    27% {--seed:27}
    28% {--seed:28}
    29% {--seed:29}
    30% {--seed:30}
    31% {--seed:31}
    32% {--seed:32}
    33% {--seed:33}
    34% {--seed:34}
    35% {--seed:35}
    36% {--seed:36}
    37% {--seed:37}
    38% {--seed:38}
    39% {--seed:39}
    40% {--seed:40}
    41% {--seed:41}
    42% {--seed:42}
    43% {--seed:43}
    44% {--seed:44}
    45% {--seed:45}
    46% {--seed:46}
    47% {--seed:47}
    48% {--seed:48}
    49% {--seed:49}
    50% {--seed:50}
    51% {--seed:51}
    52% {--seed:52}
    53% {--seed:53}
    54% {--seed:54}
    55% {--seed:55}
    56% {--seed:56}
    57% {--seed:57}
    58% {--seed:58}
    59% {--seed:59}
    60% {--seed:60}
    61% {--seed:61}
    62% {--seed:62}
    63% {--seed:63}
    64% {--seed:64}
    65% {--seed:65}
    66% {--seed:66}
    67% {--seed:67}
    68% {--seed:68}
    69% {--seed:69}
    70% {--seed:70}
    71% {--seed:71}
    72% {--seed:72}
    73% {--seed:73}
    74% {--seed:74}
    75% {--seed:75}
    76% {--seed:76}
    77% {--seed:77}
    78% {--seed:78}
    79% {--seed:79}
    80% {--seed:80}
    81% {--seed:81}
    82% {--seed:82}
    83% {--seed:83}
    84% {--seed:84}
    85% {--seed:85}
    86% {--seed:86}
    87% {--seed:87}
    88% {--seed:88}
    89% {--seed:89}
    90% {--seed:90}
    91% {--seed:91}
    92% {--seed:92}
    93% {--seed:93}
    94% {--seed:94}
    95% {--seed:95}
    96% {--seed:96}
    97% {--seed:97}
    98% {--seed:98}
    99% {--seed:99}
    100% {--seed:100}
}

 src/assets/js/event.js

New file
@@ -0,0 +1,2 @@
import Vue from 'vue';
export default new Vue();

 src/components/PageMenu.vue

@@ -22,6 +22,7 @@
</template>

<script>
    let menu_list = [];
    export default {
        data() {
            return {
@@ -49,17 +50,35 @@
                    name: "testMag",
                    src: "",
                    icon: "el-icon-s-platform",
                    childrens: [{
                        label: "拖动端与加载端转速设置",
                        icon: "el-icon-s-platform",
                        name: "dAndlSetSpeed",
                        src: "dAndlSetSpeed",
                    }, ]
                    childrens: [
                        {
                            label: "拖动端与加载端转速设置",
                            icon: "el-icon-s-platform",
                            name: "dAndlSetSpeed",
                            src: "dAndlSetSpeed",
                        }
                        ,{
                            label: "test1",
                            icon: "test1",
                            name: "test1",
                            src: "test1",
                        }
                        ,{
                            label: "test2",
                            icon: "test2",
                            name: "test2",
                            src: "test2",
                        }
                    ]
                }, ]
            }
        },
        methods: {
            select(data) {
                // 当前路由再点击 不处理 不然报错
                if (this.$route.path.indexOf(data.name) > -1) {
                    return false;
                }
                if (data.src) {
                    localStorage.setItem('activeMenu', data.name)
                    this.$router.push({
@@ -71,11 +90,43 @@
            },
        },
        computed: {
            nowAcTabs() {
                return localStorage.getItem('activeMenu') || this.acTabs;
            nowAcTabs: {
                get () {
                    return localStorage.getItem('activeMenu') || this.acTabs;
                }
                ,set (v) {
                    this.acTabs = v;
                    localStorage.setItem('activeMenu', v);
                }
            }
        },
        mounted() {},
        mounted () {
            /**
             * 取menu数组 路由变化时确定active用
             */
            this.menus.forEach((v) => {
                if (v.src) {
                    menu_list.push(v.src);
                }
                if (v.childrens.length) {
                    v.childrens.forEach((val) => {
                        if (val.src) {
                            menu_list.push(val.src);
                        }
                    });
                }
            });

            // 当路由变化 比如通过地址栏输入  确定当前菜单active
            this.$event.$on('routerChange', (data) => {
                // console.log(data, 'change');
                menu_list.forEach((v) => {
                    if (data.indexOf(v) > -1) {
                        this.nowAcTabs = v;
                    }
                });
            });
        }
    }
</script>


 src/main.js

@@ -9,6 +9,9 @@
import '../public/theme/normal.css'

import '@/assets/js/rem.js'
import event from '@/assets/js/event.js'

Vue.prototype.$event = event;

Vue.use(ElementUI, {
  zIndex: 99
@@ -16,6 +19,12 @@

Vue.config.productionTip = false

// 进入路由后
router.afterEach((to, from) => {
  // console.log(to, '----to------from----', from);
  event.$emit('routerChange', to.path);
});

new Vue({
  router,
  store,

 src/pages/home/UPSStateMonitor.vue

@@ -1,5 +1,5 @@
<template>
    <div class="contentBox">
    <div class="contentBox page-container">
        <div class="diagram-content">
            <div class="diagram-stc" ref="static"></div>
            <div class="diagram-flush" ref="flush"></div>
@@ -90,6 +90,7 @@
    import GradientsRing from '@/components/smallModule/gradientsRing.vue';
    import MarkProgress from '@/components/smallModule/markProgress.vue';
    let diagram;
    let handlerResiz;
    export default {
        components: {
            DiagramPanel,
@@ -152,32 +153,18 @@
        mounted() {
            diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
            this.setPanelPos();
            window.addEventListener('resize', () => {
            handlerResiz = () => {
                this.setPanelPos();
            });
            }
            window.addEventListener('resize', handlerResiz);
        },
        destroyed () {
            window.removeEventListener('resize', handlerResiz);
        }
    }
</script>
<style scoped>
    .diagram-content {
        position: relative;
    }

    .diagram-stc {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .diagram-flush {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        overflow: hidden;
    }
    

    .outputPanel.diagram-panel,
    .inputPanel.diagram-panel {

 src/pages/home/topoGraph.vue

@@ -1,5 +1,5 @@
<template>
    <div class="contentBox">
    <div class="contentBox page-container">
        <div class="tipTitle">系统拓扑</div>
        <div class="diagram-stc" ref="static"></div>
        <div class="diagram-flush" ref="flush"></div>

 src/pages/index.vue

@@ -6,8 +6,12 @@
    <div class="pageConten">
      <page-header></page-header>
      <div class="viewCon">
        <!--这里的router-view用来渲染子页面-->
        <router-view></router-view>
        <div class="inner">
          <transition :name="transitionName">
            <!--这里的router-view用来渲染子页面-->
            <router-view></router-view>
          </transition>
        </div>
      </div>
    </div>
  </div>
@@ -16,6 +20,8 @@
<script>
  import PageMenu from '@/components/PageMenu'
  import PageHeader from '@/components/PageHeader'
  const trsList = ['slide-left', 'slide-right', 'clip-circle-in', 'clip-triangle-in', 'clip-rect-in', 'clip-diamond-in', 'clip-rect-sp-in', 'clip-sector-in', 'seed', 'seed-hor', 'clip-rotate-in'];
  const trsLen = trsList.length;
  export default {
    components: {
      PageMenu,
@@ -23,28 +29,51 @@
    },
    data() {
      return {

        // transitionName: 'slide-left'
        transitionName: 'clip-rotate-in'
        ,idx: 0
      }
    },
    methods: {

      random () {
        let res = Math.floor(Math.random() * trsLen);
        if (this.idx == res) {
          return this.random();
        }
        return res;
      }
    },
    mounted () {
      this.$event.$on('routerChange', () => {
        this.idx = this.random();
        this.transitionName = trsList[this.idx];
      });
    },
    beforeCreate() { //设置子路由路径
      let activeMenu = localStorage.getItem('activeMenu');
      if (activeMenu) {
        this.$router.push({
          path: `/index/${activeMenu}`,
        }).catch(err => {

        });
      } else {
        this.$router.push({
          path: '/index/topoGraph',
        }).catch(err => {

        });
      // 当activeMenu 为 null时 输入的跳由应该不处理
      // 当activeMenu 和路径相同时也不处理
      // debugger;
      if (!activeMenu || this.$route.path.indexOf(activeMenu) > -1) {
        return false;
      }
    },
      if (this.$route.path.indexOf('/index') > -1) {
        if (activeMenu) {

          this.$router.push({
            path: `/index/${activeMenu}`,
          }).catch(err => {

          });
        } else {
          this.$router.push({
            path: '/index/topoGraph',
          }).catch(err => {

          });
        }
      }
    }
  }
</script>

@@ -65,11 +94,26 @@

  .pageConten {
    flex: 1;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }

  .viewCon {
    padding: 8px 8px 0 18px;
    width: 100%;
    height: calc(100% - 108px);
    flex: 1;
    /*padding: 8px 8px 0 18px;*/
    /*width: 100%;*/
    /*display: -webkit-flex;
    display: flex;*/
    position: relative;
    /*height: calc(100% - 108px);*/
  }
  .inner {
    position: absolute;
    left: 18px;
    top: 8px;
    right: 8px;
    bottom: 0;
    overflow: hidden;
  }
</style>

 src/pages/test/dAndlSetSpeed.vue

@@ -1,89 +1,96 @@
<template>
    <div class="dAndlSetSpeed">
        <div class="dAndlSetSpeed-left">
            <div class="dAndlSetSpeed-bg1">
                <div class="title">%POWER</div>
                <div class="circle RPM">
                    <div class="number">1200</div>
                    <div class="unit">RPM</div>
    <div class="main page-container">
        <div class="dAndlSetSpeed">
            <div class="dAndlSetSpeed-left">
                <div class="dAndlSetSpeed-row">
                    <div class="dAndlSetSpeed-bg1">
                        <div class="title">%POWER</div>
                        <div class="circle RPM">
                            <div class="number">1200</div>
                            <div class="unit">RPM</div>
                        </div>
                        <scale-bar direction="left" :value="1200" :splitNum="200"></scale-bar>
                        <img src="../../assets/images/dAndlSetSpeed-img1.png" class="img">
                        <scale-bar direction="right" :value="0.12" :splitNum="0.02"></scale-bar>
                        <div class="circle NM">
                            <div class="number">0.12</div>
                            <div class="unit">N/M</div>
                        </div>
                        <electric-choice class="speedChoice" :choiceData="speedChoice" @active="speedChoiceActive">
                        </electric-choice>
                        <electric-choice class="stateChoice" :choiceData="stateChoice" @active="stateChoiceActive">
                        </electric-choice>
                    </div>
                </div>
                <scale-bar direction="left" :value="1200" :splitNum="200"></scale-bar>
                <img src="../../assets/images/dAndlSetSpeed-img1.png" class="img">
                <scale-bar direction="right" :value="0.12" :splitNum="0.02"></scale-bar>
                <div class="circle NM">
                    <div class="number">0.12</div>
                    <div class="unit">N/M</div>
                </div>
                <electric-choice class="speedChoice" :choiceData="speedChoice" @active="speedChoiceActive">
                </electric-choice>
                <electric-choice class="stateChoice" :choiceData="stateChoice" @active="stateChoiceActive">
                </electric-choice>
            </div>
            <div class="dAndlSetSpeed-bg2">
                <div class="tipTitle">步骤提示</div>
                <div class="textContent">
                    <div class="text">
                        电机处于<span>前进档位</span>
                <div class="dAndlSetSpeed-row">
                    <div class="decorate"></div>
                    <div class="dAndlSetSpeed-bg2">
                        <div class="tipTitle">步骤提示</div>
                        <div class="textContent">
                            <div class="text">
                                电机处于<span>前进档位</span>
                            </div>
                            <div class="text">
                                电机状态为<span>电动状态</span>
                            </div>
                            <div class="text">
                                调节点击转速至<span>1800转</span>
                            </div>
                            <div class="text">
                                逐档增加负载控制条挡位，并依次记录数据
                            </div>
                        </div>
                    </div>
                    <div class="text">
                        电机状态为<span>电动状态</span>
                    </div>
                    <div class="text">
                        调节点击转速至<span>1800转</span>
                    </div>
                    <div class="text">
                        逐档增加负载控制条挡位，并依次记录数据
                    <div class="dAndlSetSpeed-bg3">
                        <div class="flexDiv">
                            <span v-for="(item,index) in operationData" :key="index" class="btn"
                                :class="{active:index==activeIndex }" @click="changeTab(index)">{{item}}</span>
                        </div>
                        <table class="customTable text-center">
                            <tr>
                                <th>转矩</th>
                                <th>转速</th>
                                <th>编辑</th>
                            </tr>
                            <tr>
                                <td>400</td>
                                <td>-0.2</td>
                                <td>
                                    <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                                </td>
                            </tr>
                            <tr>
                                <td>400</td>
                                <td>-0.2</td>
                                <td>
                                    <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                                </td>
                            </tr>
                            <tr>
                                <td>400</td>
                                <td>-0.2</td>
                                <td>
                                    <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                                </td>
                            </tr>
                            <tr>
                                <td>400</td>
                                <td>-0.2</td>
                                <td>
                                    <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="dAndlSetSpeed-bg3">
                <div class="flexDiv">
                    <span v-for="(item,index) in operationData" :key="index" class="btn"
                        :class="{active:index==activeIndex }" @click="changeTab(index)">{{item}}</span>
            <div class="dAndlSetSpeed-right">
                <div class="tipTitle">永磁同步电机-MOOEL</div>
                <div class="imgCon"><img src="../../assets/images/dAndlSetSpeed-img2.png" class="img"></div>
                <div class="sliderCon">
                    <span class="lable">电机转速：</span>
                    <el-slider v-model="motorSpeed" :max="1000" class="slider" tooltip-class="sliderTooltip"></el-slider>
                </div>
                <table class="customTable text-center">
                    <tr>
                        <th>转矩</th>
                        <th>转速</th>
                        <th>编辑</th>
                    </tr>
                    <tr>
                        <td>400</td>
                        <td>-0.2</td>
                        <td>
                            <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>400</td>
                        <td>-0.2</td>
                        <td>
                            <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>400</td>
                        <td>-0.2</td>
                        <td>
                            <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>400</td>
                        <td>-0.2</td>
                        <td>
                            <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="dAndlSetSpeed-right">
            <div class="tipTitle">永磁同步电机-MOOEL</div>
            <div class="imgCon"><img src="../../assets/images/dAndlSetSpeed-img2.png" class="img"></div>
            <div class="sliderCon">
                <span class="lable">电机转速：</span>
                <el-slider v-model="motorSpeed" :max="1000" class="slider" tooltip-class="sliderTooltip"></el-slider>
            </div>
        </div>
    </div>
@@ -131,30 +138,91 @@
</script>

<style scoped>
    .dAndlSetSpeed {
    .main {
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
        display: -webkit-flex;
        display: flex;
        height: calc(100vh - 120px);
        padding: 0 0 28px 40px;/* no */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: linear-gradient(0, #9896B1 0, #9896B1 0) left 0 bottom 18px / 100% 1px, linear-gradient(0, #7f7d9e 0, #7f7d9e 0) left 24px top 0 / 1px 100%;/* no */
        background-repeat: no-repeat;
    }
    .dAndlSetSpeed {
        /*height: 100%;*/
        flex: 1;
        display: flex;
        /*height: calc(100vh - 120px);*/
    }

    .dAndlSetSpeed-left {
        flex: 1;
        height: 100%;
        margin-right: 13px;
        /*height: 100%;*/
        margin-right: 16px;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    .dAndlSetSpeed-left .dAndlSetSpeed-bg1 {
        width: 100%;
        height: 50%;
        float: left;
        flex: 1;
        /*width: 100%;*/
        /*height: 50%;*/
        /*float: left;*/
        padding: 0 92px;
        background: url("../../assets/images/dAndlSetSpeed-bg1.png") 0 0 no-repeat;
        background-size: 100% 100%;
        background: /* 左上角 */radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) 15px 4px / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) 22px 8px / 170px 1px
                ,linear-gradient(0, #171350 0, #171350 0) 0 4px / 190px 18px
                ,linear-gradient(145deg, #171350 50%, transparent 50%) 190px 4px / 28px 18px
                /* 右上角  */
                ,radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) right 160px top 1px / 6px 6px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right  top 4px / 160px 1px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right top 4px / 1px 48px
                /*  左下角  */
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) left bottom 12px / 8px 8px
                ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left 6px bottom 0 / 14px 14px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 24px bottom 5px / 90px 1px
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) left 114px bottom 2px / 8px 8px
                ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left bottom 5px / 24px 24px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 20px bottom / 210px 1px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom / 38px 38px
                ,linear-gradient(0, #171350 0, #171350 0) left bottom / 240px 10px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left 240px bottom / 10px 10px
                /* 左侧中间 */
                ,linear-gradient(45deg, #5282ee 50%, transparent 50%) left calc(50% - 71px) / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 50% / 8px 134px
                ,linear-gradient(135deg, #5282ee 50%, transparent 50%) left calc(50% + 71px) / 8px 8px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left calc(50% - 73px) / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) left 50% / 10px 136px
                ,linear-gradient(135deg, #171350 50%, transparent 50%) left calc(50% + 73px) / 10px 10px
                /* 右侧中间 */
                ,linear-gradient(315deg, #5282ee 50%, transparent 50%) right calc(50% - 71px) / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 50% / 8px 134px
                ,linear-gradient(225deg, #5282ee 50%, transparent 50%) right calc(50% + 71px) / 8px 8px
                ,linear-gradient(315deg, #171350 50%, transparent 50%) right calc(50% - 73px) / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) right 50% / 10px 136px
                ,linear-gradient(225deg, #171350 50%, transparent 50%) right calc(50% + 73px) / 10px 10px
                /* 底色  */
                ,radial-gradient(circle closest-side, #171350 100%, #232163 220%) left 0 top 4px / auto; /* no */
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-top: 38px;
    }

    .dAndlSetSpeed-left .dAndlSetSpeed-row {
        flex: 1;
        /*flex-shrink: 0;*/
        display: -webkit-flex;
        display: flex;
        position: relative;
    }
    .dAndlSetSpeed-left .dAndlSetSpeed-row ~ .dAndlSetSpeed-row {
        margin-top: 16px;
    }
    .dAndlSetSpeed-left .dAndlSetSpeed-bg1 .img {
        width: 460px;
        height: 284px;
@@ -169,29 +237,135 @@
    }

    .dAndlSetSpeed-left .dAndlSetSpeed-bg2 {
        width: 65%;
        /*width: 65%;
        height: 50%;
        float: left;
        background: url("../../assets/images/dAndlSetSpeed-bg2.png") 0 0 no-repeat;
        background-size: 100% 100%;
        float: left;*/
        flex: 1.7;
        background: /* 左上角 */
                linear-gradient(145deg, #5282ee 50%, transparent 50%) 0 0 / 14px 14px
                ,linear-gradient(145deg, #171350 50%, transparent 50%) 0 0 / 16px 16px
                /* 右上角  */
                ,radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) right 1px top 32px / 6px 6px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px top / 236px 1px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px top / 1px 32px
                /*  左下角  */
                ,radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) left 182px bottom 1px / 6px 6px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left bottom 22px / 1px 56px
                ,linear-gradient(45deg, transparent 49%, #5282ee 40%, #5282ee 51%, transparent 40%, transparent 100%) left bottom 4px / 18px 18px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 18px bottom 4px / 168px 1px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom 4px / 18px 18px
                /*  右下角  */
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) right 144px bottom 2px / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px bottom 6px / 140px 1px
                ,linear-gradient(0, #171350 0, #171350 0) right 4px bottom 4px / 152px 12px
                ,linear-gradient(315deg, #171350 50%, transparent 50%) right 156px bottom 4px / 12px 12px
                /* 左侧中间 */
                ,linear-gradient(45deg, #5282ee 50%, transparent 50%) left calc(50% - 44px) / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 50% / 8px 80px
                ,linear-gradient(135deg, #5282ee 50%, transparent 50%) left calc(50% + 44px) / 8px 8px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left calc(50% - 46px) / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) left 50% / 10px 82px
                ,linear-gradient(135deg, #171350 50%, transparent 50%) left calc(50% + 46px) / 10px 10px
                /* 右侧中间 */
                ,linear-gradient(315deg, #5282ee 50%, transparent 50%) right 4px top calc(50% - 44px) / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 4px top 50% / 8px 80px
                ,linear-gradient(225deg, #5282ee 50%, transparent 50%) right 4px top calc(50% + 44px) / 8px 8px
                ,linear-gradient(315deg, #171350 50%, transparent 50%) right 4px top calc(50% - 46px) / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) right 4px top 50% / 10px 82px
                ,linear-gradient(225deg, #171350 50%, transparent 50%) right 4px top calc(50% + 46px) / 10px 10px
                /* 底色  */
                ,radial-gradient(circle closest-side, #171350 100%, #232163 168%) right 4px bottom 4px / auto; /* no */
        background-repeat: no-repeat;
        position: relative;
        padding: 105px 60px 50px 52px;
    }

    .dAndlSetSpeed-left .dAndlSetSpeed-bg3 {
        width: 35%;
        /* width: 35%;
        height: 50%;
        float: left;
        background: url("../../assets/images/dAndlSetSpeed-bg3.png") 0 0 no-repeat;
        background-size: 100% 100%;
        float: left; */
        margin-left: 16px;
        flex: 1;
        background: /* 左上角 */
                radial-gradient(circle farthest-side, #5282ee 60%, #5282ee 100%, transparent 100%) left 1px top 32px / 6px 6px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px top / 236px 1px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px top / 1px 32px
                /*  左下角  */
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 50%) left 144px bottom 2px / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px bottom 6px / 140px 1px
                ,linear-gradient(0, #171350 0, #171350 0) left 4px bottom 4px / 152px 12px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left 156px bottom 4px / 12px 12px
                /* 左侧中间 */
                ,linear-gradient(45deg, #5282ee 50%, transparent 50%) left 4px top calc(50% - 44px) / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 4px top 50% / 8px 80px
                ,linear-gradient(135deg, #5282ee 50%, transparent 50%) left 4px top calc(50% + 44px) / 8px 8px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left 4px top calc(50% - 46px) / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) left 4px top 50% / 10px 82px
                ,linear-gradient(135deg, #171350 50%, transparent 50%) left 4px top calc(50% + 46px) / 10px 10px
                /* 右侧中间 */
                ,linear-gradient(315deg, #5282ee 50%, transparent 50%) right top calc(50% - 44px) / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right top 50% / 8px 80px
                ,linear-gradient(225deg, #5282ee 50%, transparent 50%) right top calc(50% + 44px) / 8px 8px
                ,linear-gradient(315deg, #171350 50%, transparent 50%) right top calc(50% - 46px) / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) right top 50% / 10px 82px
                ,linear-gradient(225deg, #171350 50%, transparent 50%) right top calc(50% + 46px) / 10px 10px
                /* 底色  */
                ,radial-gradient(circle closest-side, #171350 50%, #232163 128%) left 4px bottom 4px / auto; /* no */
        background-repeat: no-repeat;
        padding: 50px 25px 50px 33px;
    }

    .dAndlSetSpeed-right {
        width: 560px;
        height: 100%;
        background: url("../../assets/images/dAndlSetSpeed-bg4.png") 0 0 no-repeat;
        background-size: 100% 100%;
        /*height: 100%;*/
        background:  /* 左上角 */
                radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) 0 234px / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) 4px 0 / 34px 1px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) 4px 0 / 1px 234px
                ,linear-gradient(135deg, #5282ee 50%, transparent 50%) 14px 4px / 24px 24px
                ,linear-gradient(135deg, #171350 50%, transparent 50%) 0 0 / 46px 46px
                ,linear-gradient(0, #171350 0, #171350 0) 0 0 / 14px 240px
                ,linear-gradient(135deg, #171350 50%, transparent 50%) 0 240px / 14px 14px
                /*  右上角  */
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) right 13px top / 8px 8px
                ,radial-gradient(circle farthest-side, transparent 80%, #5282ee 80%, #5282ee 100%, transparent 100%) right 3px top 88px / 6px 6px
                ,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 1px top 6px / 14px 14px
                ,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 5px top 0px / 25px 25px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 5px top 24px / 1px 64px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right top 20px / 1px 80px
                ,linear-gradient(0, #171350 0, #171350 0) right top 0 / 10px 104px
                ,linear-gradient(-135deg, #171350 50%, transparent 50%) right top / 40px 40px
                ,linear-gradient(-135deg, #171350 50%, transparent 50%) right top 104px / 10px 10px
                /*  左下角  */
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) left 13px bottom / 8px 8px
                ,radial-gradient(circle farthest-side, transparent 80%, #5282ee 80%, #5282ee 100%, transparent 100%) left 3px bottom 88px / 6px 6px
                ,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) left 1px bottom 6px / 14px 14px
                ,linear-gradient(45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) left 5px bottom 0px / 25px 25px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 5px bottom 24px / 1px 64px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left bottom 20px / 1px 80px
                ,linear-gradient(0, #171350 0, #171350 0) left bottom 0 / 10px 104px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom / 40px 40px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left bottom 104px / 10px 10px
                /* 右下角 */
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) right 13px bottom / 8px 8px
                ,radial-gradient(circle farthest-side, transparent 87%, #5282ee 87%, #5282ee 100%, transparent 100%) right 2px bottom 111px / 8px 8px
                ,linear-gradient(-45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 1px bottom 6px / 14px 14px
                ,linear-gradient(-45deg, transparent 49%, #5282ee 49%, #5282ee 51%, transparent 51%) right 5px bottom 0px / 25px 25px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right 5px bottom 24px / 1px 88px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) right bottom 20px / 1px 256px
                ,linear-gradient(0, #171350 0, #171350 0) right bottom 0 / 10px 280px
                ,linear-gradient(-45deg, #171350 50%, transparent 50%) right bottom / 40px 40px
                ,linear-gradient(-45deg, #171350 50%, transparent 50%) right bottom 280px / 10px 10px
                /* 底部中间 */
                ,linear-gradient(-45deg, #5282ee 50%, transparent 50%) left calc(50% - 95px) bottom / 8px 8px
                ,linear-gradient(0, #5282ee 0, #5282ee 0) left 50% bottom / 182px 8px
                ,linear-gradient(45deg, #5282ee 50%, transparent 50%) left calc(50% + 95px) bottom / 8px 8px
                ,linear-gradient(-45deg, #171350 50%, transparent 50%) left calc(50% - 97px) bottom / 10px 10px
                ,linear-gradient(0, #171350 0, #171350 0) left 50% bottom / 184px 10px
                ,linear-gradient(45deg, #171350 50%, transparent 50%) left calc(50% + 97px) bottom / 10px 10px
                /* 底色  */
                ,radial-gradient(circle closest-side, #171350 50%, #232163 128%) 50% 50% / auto; /* no */
        background-repeat: no-repeat;
        padding: 40px 50px;
    }

@@ -310,6 +484,29 @@
    .dAndlSetSpeed-right .sliderCon .slider {
        flex: 1;
    }
    .decorate {
        position: absolute;
        right: 0;
        bottom: 100%;
        width: 52px;
        height: 52px;
        -webkit-transform: translateY(18px);
        transform: translateY(18px);
        overflow: hidden;
    }
    .decorate::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        -webkit-transform: translateX(75%) rotate(45deg);
        transform: translateX(75%) rotate(45deg);
        background: #5282ee;
        -webkit-box-shadow: inset 4px -4px 0px 0px #5282ee, inset 7px -7px 0 0 #171350, -2px 2px #171350;
        box-shadow: inset 4px -4px 0px 0px #5282ee, inset 7px -7px 0 0 #171350, -2px 2px #171350;
    }
</style>
<style>
    .dAndlSetSpeed-right .sliderCon .slider .el-slider__runway {

 src/pages/test/test1.vue

New file
@@ -0,0 +1,30 @@
<template>
    <div class="main page-container">
        page-test1
    </div>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style scoped>
    .main {
        width: 100%;
        height: 100%;
        background: #090;
        color: #fff;
    }
</style>

 src/pages/test/test2.vue

New file
@@ -0,0 +1,30 @@
<template>
    <div class="main page-container">
        page-test2
    </div>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style scoped>
    .main {
        width: 100%;
        height: 100%;
        background: #009;
        color: #fff;
    }
</style>

 src/router/routes.js

@@ -10,6 +10,7 @@
    path: '/index',
    name: 'index',
    meta: {},
    redirect: '/index/topoGraph',
    component: (resolve) => require(['@/pages/index.vue'], resolve),
    children: [{ //系统拓扑图
        path: 'topoGraph',
@@ -26,5 +27,16 @@
        name: 'dAndlSetSpeed',
        meta: {},
        component: (resolve) => require(['@/pages/test/dAndlSetSpeed.vue'], resolve),
    }, ]
    }, { //test1
        path: 'test1',
        name: 'test1',
        meta: {},
        component: (resolve) => require(['@/pages/test/test1.vue'], resolve),
    }, { //test2
        path: 'test2',
        name: 'test2',
        meta: {},
        component: (resolve) => require(['@/pages/test/test2.vue'], resolve),
    }
    ]
}];