完善

src/views/statisticView/Main.vue

@@ -1,7 +1,34 @@
 <template>
   <div class="main">
     <div class="header">
+      <span class="header-title">MES 生产执行 制造</span>
       <div class="stage"><div class="circle"><span class="shadow"></span></div></div>
+      <div class="planet">
+        <div class="ball">
+          <span class="title">设备系统</span>
+          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
+        </div>
+        <div class="ball second">
+          <span class="title">质量系统</span>
+          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
+        </div>
+        <div class="ball third">
+          <span class="title">生产系统</span>
+          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
+        </div>
+        <div class="ball four">
+          <span class="title">条码系统</span>
+          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
+        </div>
+        <div class="ball five">
+          <span class="title">排班系统</span>
+          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
+        </div>
+        <div class="ball six">
+          <span class="title">仓库系统</span>
+          <div class="stage1"><div class="circle"><span class="shadow"></span></div></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -17,13 +44,30 @@ export default {
   width: 1920px;
   height: 1080px;
   background: url(~@/assets/mine-bg.png);
+  overflow: hidden;
 
   .header {
     width: 100%;
     padding-top:200px;
     display:flex;
-   justify-content: center;
+    position: relative;
+    justify-content: center;
     align-items: center;
+    transform-style: preserve-3d;
+   perspective: 1500px;
+   .header-title {
+              position: absolute;
+              top:62%;
+              left:41%;
+              z-index:100000;
+              font-size: 40px;
+              color: #FFFFFF;
+              background: linear-gradient(0deg, #079cf1 20%, #FFFFFF 50%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              font-weight: bold;
+            }
+
   }
   .stage {
     width: 300px;
@@ -67,22 +111,142 @@ export default {
      background-size: auto 100%;
      z-index: 2222222;
      }
-     .shadow {
+
+  }
+  }
+  .stage1 {
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    margin: 20px;
+  perspective-origin: 50% 50%;
+    .circle{
+     background: url('~@/assets/earthpng.png') repeat-x;
+
+     background-size: auto 100%;
+     border-radius: 50%;
+     height: 200px;
+     width: 200px;
+     position: relative;
+     margin: 0;
+  animation: move-map 30s infinite linear;
+     &::before {
+      content:'';
       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;
-      }
+      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);
+     background: url('~@/assets/earth-bg.png') no-repeat;
+     background-size: 200%;
+     opacity: 0.8;
+     background-position: -100px -130px;
+
+     z-index: 222;
+     }
+
   }
   }
 }
+        .planet {
+            position: absolute;
+            left:390px;
+            top:30px;
+            border: 5px solid #13c2c2;
+            width: 1200px;
+            height: 1200px;
+            transform: scaleY(0.5) rotateZ(30deg);
+            border-radius: 50%;
+            transform-style: preserve-3d;
+
+        }
+
+        .ball {
+            width: 200px;
+            height: 200px;
+            position: absolute;
+            border-radius: 50%;
+            left: calc(50% - 25px);
+            top: -100px;
+            text-align: center;
+            line-height: 200px;
+            color: #13c2c2;
+            transform: rotateZ(-30deg) scaleY(2);
+            .title {
+              position: absolute;
+              top:20px;
+              left:20px;
+              width: 100%;
+              height: 100%;
+              z-index:100000;
+              font-size: 35px;
+              color: #FFFFFF;
+              background: linear-gradient(0deg, #079cf1 40%, #FFFFFF 50%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              font-weight: bold;
+            }
+        }
+        .second {
+            left: calc(50% + 450px);
+            top: 400px;
+        }
+        .third {
+            left: calc(50% + 230px);
+            top: 910px;
+        }
+        .four {
+            left: calc(50% - 300px);
+            top: 1030px;
+        }
+        .five {
+            left: calc(50% - 745px);
+            top: 480px;
+        }
+        .six {
+            left: calc(50% - 530px);
+            top: 10px;
+        }
+        .planet {
+            animation: planet-rotate 16s linear infinite;
+        }
+
+        .ball {
+            animation: self-rotate 16s linear infinite;
+        }
+        /* // 公转动画 */
+        @keyframes planet-rotate {
+        0% {
+            transform:  rotateX(60deg)scaleY(0.5) rotate(0);
+        }
+        100% {
+            transform:  rotateX(60deg) scaleY(0.5) rotate(360deg);
+        }
+        }
+
+        /* // 自转动画 */
+        @keyframes self-rotate {
+        0% {
+            transform: rotate(0) scaleY(2) rotateX(-60deg);
+        }
+        100% {
+            transform: rotate(-360deg) scaleY(2) rotateX(-60deg);
+        }
+        }
+
 @keyframes move-map {
   0% {
     background-position: -880px 0; }