完善

src/router/generator-platform-routers.js

@@ -471,7 +471,10 @@ export const constantRouterMap = [
   {
     path: '/StoreBigScreen',
     component: () => import('@/views/statisticView/9')
-
+  },
+  {
+    path: '/main',
+    component: () => import('@/views/statisticView/Main')
   },
   {
     path: '/single/login',

src/views/statisticView/Main.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="main">
+    <div class="header">
+      <div class="stage"><div class="circle"><span class="shadow"></span></div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.main{
+  width: 1920px;
+  height: 1080px;
+  background: url(~@/assets/mine-bg.png);
+
+  .header {
+    width: 100%;
+    padding-top:200px;
+    display:flex;
+   justify-content: center;
+    align-items: center;
+  }
+  .stage {
+    width: 300px;
+    height: 300px;
+    display: inline-block;
+    margin: 20px;
+  perspective: 1200px;
+  perspective-origin: 50% 50%;
+    .circle{
+     background: url('~@/assets/earth.png') repeat-x;
+
+     background-size: auto 100%;
+     border-radius: 50%;
+     height: 300px;
+     width: 300px;
+     position: relative;
+     margin: 0;
+  animation: move-map 30s infinite linear;
+     &::before {
+      content:'';
+      position: absolute;
+      top:0;
+      left:0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      box-shadow: -40px 10px 70px 10px RGBA(40, 83, 205, 0.7) inset;
+      z-index: 2;
+     }
+     &::after {
+      content:'';
+      position: absolute;
+      top:0;
+      left:0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      filter: blur(0);
+     opacity: 0.5;
+     background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
+     background-size: auto 100%;
+     z-index: 2222222;
+     }
+     .shadow {
+      position: absolute;
+       width: 400%;
+       border-radius: 50%;
+       border:1px solid #76deef;
+       height: 400%;
+       top:-400px;
+       left:-430px;
+       opacity: 0.5;
+       background: radial-gradient(circle at 50% 50%, #000 50%,  #188bef 100% );
+       transform: rotateX(85deg) translateZ(-130px);
+       z-index: -1;
+      }
+  }
+  }
+}
+@keyframes move-map {
+  0% {
+    background-position: -880px 0; }
+
+  100% {
+    background-position: 0 0; } }
+</style>