动画改版

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;

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>