Merge branch 'yantai_master' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov

src/assets/scss/pages/yantai-index.scss

@@ -68,16 +68,16 @@
       width: 123px;
     }
     &:nth-child(1) {
-      transform: rotateY(90deg) translateZ(502px);
+      transform: rotateY(90deg) translateZ(622px);
     }
     &:nth-child(2) {
-      transform: rotateY(180deg) translateZ(502px);
+      transform: rotateY(180deg) translateZ(622px);
     }
     &:nth-child(3) {
-      transform: rotateY(270deg) translateZ(502px);
+      transform: rotateY(270deg) translateZ(622px);
     }
     &:nth-child(4) {
-      transform: rotateY(360deg) translateZ(502px);
+      transform: rotateY(360deg) translateZ(622px);
     }
   }
 }
@@ -277,7 +277,7 @@
       }
       &:nth-child(3) {
         top: 600px;
-        left: 681px;
+        left: 674px;
         width: 180px;
         height: 110px;
       }
@@ -291,7 +291,7 @@
       }
       &:nth-child(5) {
         top: 600px;
-        right: 681px;
+        right: 674px;
         width: 180px;
         height: 110px;
       }
@@ -349,7 +349,7 @@
   .platform-top-2 {
     position: absolute;
     z-index: 20;
-    top: 270px;
+    top: 238px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -360,7 +360,7 @@
   .platform-top-1 {
     position: absolute;
     z-index: 30;
-    top: 171px;
+    top: 129px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -371,7 +371,7 @@
   .lines {
     position: absolute;
     z-index: 10;
-    top: 424px;
+    top: 433px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -383,7 +383,7 @@
     .pillar {
       position: absolute;
       z-index: 40;
-      width: 100px;
+      width: 130px;
       text-align: center;
       font-size: 20px;
       font-family: PingFang SC;
@@ -397,44 +397,47 @@
         transform: translateY(-10px);
       }
       span {
-        position: relative;
+        position: absolute;
         z-index: 1;
+        left: 0;
+        right: 0;
+        bottom: 16px;
       }
       img {
         margin: 0 auto;
         margin-top: -6px;
       }
       &:nth-child(1) {
-        top: 225px;
-        left: 636px;
+        top: 165px;
+        left: 575px;
       }
       &:nth-child(2) {
-        top: 306px;
-        left: 531px;
+        top: 257px;
+        left: 444px;
       }
       &:nth-child(3) {
-        top: 356px;
-        left: 657px;
+        top: 320px;
+        left: 622px;
       }
       &:nth-child(4) {
-        top: 376px;
-        left: 822px;
+        top: 343px;
+        left: 801px;
       }
       &:nth-child(5) {
-        top: 376px;
-        right: 822px;
+        top: 343px;
+        right: 801px;
       }
       &:nth-child(6) {
-        top: 356px;
-        right: 657px;
+        top: 320px;
+        right: 622px;
       }
       &:nth-child(7) {
-        top: 306px;
-        right: 531px;
+        top: 257px;
+        right: 444px;
       }
       &:nth-child(8) {
-        top: 225px;
-        right: 636px;
+        top: 165px;
+        right: 575px;
       }
     }
   }
@@ -460,7 +463,7 @@
   .btn {
     position: absolute;
     z-index: 100;
-    top: 300px;
+    top: 269px;
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -509,3 +512,159 @@
     }
   }
 }
+
+.m-arc {
+  position: absolute;
+  z-index: 60;
+  left: 0;
+  right: 0;
+  top: 650px;
+  margin: 0 auto;
+  width: 160px;
+  height: 160px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 400px;
+  perspective: 400px;
+  pointer-events: none;
+  margin-bottom: 40px;
+
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 1.5px solid rgba(#83fbfe, 0.7);
+  }
+
+  .line:first-child {
+    -webkit-animation: rotate1 1.15s linear infinite;
+    animation: rotate1 1.15s linear infinite;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation: rotate2 1.15s linear infinite;
+    animation: rotate2 1.15s linear infinite;
+  }
+
+  .line:nth-child(3) {
+    -webkit-animation: rotate3 1.15s linear infinite;
+    animation: rotate3 1.15s linear infinite;
+  }
+
+  .line:first-child {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation-delay: -0.4s;
+    animation-delay: -0.4s;
+  }
+
+  .line:nth-child(3) {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+  }
+
+  @keyframes rotate1 {
+    0% {
+      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+      transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+      transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate2 {
+    0% {
+      -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
+      transform: rotateX(50deg) rotateY(10deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+      transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate3 {
+    0% {
+      -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
+      transform: rotateX(35deg) rotateY(55deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+      transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+    }
+  }
+}
+
+.m-arc2 {
+  position: absolute;
+  z-index: 60;
+  left: 0;
+  right: 0;
+  top: 210px;
+  margin: 0 auto;
+  width: 120px;
+  height: 120px;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 400px;
+  perspective: 400px;
+  pointer-events: none;
+  margin-bottom: 40px;
+
+  /* 第二个 */
+  .line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-bottom: 1px solid rgba(#83fbfe, 0.5);
+    border-top: 1px solid rgba(#83fbfe, 0.5);
+  }
+
+  .line:first-child {
+    -webkit-animation: rotate4 1.15s linear infinite;
+    animation: rotate4 1.15s linear infinite;
+  }
+
+  .line:nth-child(2) {
+    -webkit-animation: rotate5 1.15s linear infinite;
+    animation: rotate5 1.15s linear infinite;
+  }
+
+  @keyframes rotate4 {
+    0% {
+      -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+      transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+      transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+    }
+  }
+
+  @keyframes rotate5 {
+    0% {
+      -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);
+      transform: rotateX(55deg) rotateY(30deg) rotate(0);
+    }
+
+    to {
+      -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+      transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+    }
+  }
+}

src/views/pages/yantai-index.vue

@@ -27,7 +27,7 @@
             <span>人房信息</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/1.png"
             />
           </div>
           <div
@@ -37,7 +37,7 @@
             <span>社区查询</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/2.png"
             />
           </div>
           <div
@@ -47,7 +47,7 @@
             <span>社区党建</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/3.png"
             />
           </div>
           <div
@@ -57,7 +57,7 @@
             <span>社区治理</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/4.png"
             />
           </div>
           <div
@@ -67,14 +67,14 @@
             <span>社区服务</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/5.png"
             />
           </div>
           <div class="pillar" @click="toPage('/main/base-epidemic-antiInfo')">
             <span>疫情防控</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/6.png"
             />
           </div>
           <div
@@ -84,14 +84,14 @@
             <span>便携工具</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/7.png"
             />
           </div>
           <div class="pillar" @click="toPage('/main/workSys-mapConfig')">
             <span>系统管理</span>
             <img
               class="pillar-bg"
-              src="@/assets/img/yantai/index2/pillar.png"
+              src="@/assets/img/yantai/index2/pillar/8.png"
             />
           </div>
         </div>
@@ -146,7 +146,10 @@
               src="@/assets/img/yantai/index2/platform/right-1.png"
             />
           </div>
-          <div class="plate" @click="toPage('/main-shuju/visual-basicinfo-peopleSearch')">
+          <div
+            class="plate"
+            @click="toPage('/main-shuju/visual-basicinfo-peopleSearch')"
+          >
             <img
               class="plate-bg"
               src="@/assets/img/yantai/index2/platform/right-2.png"
@@ -229,6 +232,17 @@
           <div class="anime"></div>
           <div class="anime"></div>
         </div>
+
+        <div class="m-arc">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
+
+        <div class="m-arc2">
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
       </div>
     </div>
   </fixed1920>