专题首页特效修改

src/locales/lang/zh-CN/sys.json

@@ -100,6 +100,6 @@
     "header_logout": "退出系统",
     "bottom_copyright": "版权所有：临沂市自然资源和规划局",
     "bottom_support": "技术⽀持：山东慧创信息科技有限公司",
-    "bottom_version": "系统版本：v.10"
+    "bottom_version": "系统版本：V1.0"
   }
 }

src/views/subject/index.vue

@@ -17,6 +17,7 @@
         <div
           v-for="(item, index) in list"
           :key="item.id"
+          :id="item.id"
           class="subject_box_btn_div"
           @click="getHome(item)"
         >
@@ -76,7 +77,7 @@
 <script setup lang="ts">
   import { useUserStore } from '@/store/modules/user';
   import { getSpecialData } from '@/api/demo/system';
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, nextTick } from 'vue';
   import { message } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
   import { getAppEnvConfig } from '@/utils/env';
@@ -101,7 +102,29 @@
       }
     });
     list.value = res;
+    cardRotationLoop();
   }
+  // 旋转动画
+  async function cardRotationLoop() {
+    nextTick(() => {
+      list.value.forEach((item, index) => {
+        setTimeout(() => {
+          const element: any = document.getElementById(item.id);
+          element.classList.remove('cardRotationState');
+          element.classList.add('cardRotation');
+          setTimeout(() => {
+            element.classList.add('cardRotationState');
+          }, 5000);
+          if (index == list.value.length - 1) {
+            setTimeout(() => {
+              cardRotationLoop();
+            }, 8000);
+          }
+        }, index * 8000);
+      });
+    });
+  }
+
   onMounted(() => {
     getData();
   });
@@ -197,6 +220,7 @@
         }
 
         span {
+          cursor: pointer;
           display: inline-flex;
           align-items: center;
           text-align: center;
@@ -238,7 +262,7 @@
           // 添加过渡效果
           transition: transform 1s;
           // 定义旋转动画
-          animation: cardRotation 6s linear infinite;
+          // animation: cardRotation 5s linear infinite;
 
           &:hover {
             filter: brightness(150%);
@@ -248,10 +272,10 @@
             // 定义旋转
             // 暂停动画
             animation-play-state: paused;
+            // 过渡效果
+            transition: transform 1s ease;
             // 立即回到正面
-            transform: rotateY(0deg);
-            // 关闭过渡效果，确保立即变换
-            transition: none;
+            transform: rotateY(0deg) !important;
           }
 
           &_bg {
@@ -354,7 +378,7 @@
     top: -442px;
     left: 114px;
     clip-path: inset(0 55% 55% 0);
-    animation: rotateArc1 4s linear infinite;
+    animation: rotateArc1 8s linear infinite;
   }
 
   .arc2 {
@@ -363,7 +387,7 @@
     left: 114px;
     clip-path: inset(55% 0 0 55%);
     transform: rotate(90deg);
-    animation: rotateArc2 4s linear infinite;
+    animation: rotateArc2 8s linear infinite;
   }
 
   .arc3 {
@@ -372,7 +396,7 @@
     left: 114px;
     clip-path: inset(0 55% 55% 0);
     transform: rotate(180deg);
-    animation: rotateArc3 4s linear infinite;
+    animation: rotateArc3 8s linear infinite;
   }
 
   .arc4 {
@@ -381,7 +405,7 @@
     left: 114px;
     clip-path: inset(55% 0 0 55%);
     transform: rotate(270deg);
-    animation: rotateArc4 4s linear infinite;
+    animation: rotateArc4 8s linear infinite;
   }
 
   @keyframes rotateArc1 {
@@ -419,14 +443,23 @@
       transform: translate(-50%, -50%) rotate(630deg);
     }
   }
-
+  // 开启旋转动画
+  .cardRotation {
+    animation: cardRotation 5s linear infinite;
+  }
+  // 关闭旋转动画
+  .cardRotationState {
+    animation-play-state: paused;
+    transition: transform 3s ease;
+    transform: rotateY(0deg) !important;
+  }
   // 定义旋转动画
   @keyframes cardRotation {
     0% {
       transform: rotateY(0deg);
     }
     100% {
-      transform: rotateY(360deg);
+      transform: rotateY(-360deg);
     }
   }
 </style>