perf: 优化首页

admin_2/src/layouts/components/Header.vue

@@ -154,7 +154,7 @@ export default {
         content: "";
         display: inline-block;
         height: 4px;
-        width: 50%;
+        width: 30%;
         background: #ffffff;
         border-radius: 2px;
         position: absolute;
@@ -172,7 +172,7 @@ export default {
       content: "";
       display: inline-block;
       height: 4px;
-      width: 50%;
+      width: 30%;
       background: #ffffff;
       border-radius: 2px;
       position: absolute;

admin_2/src/pages/home/Home.vue

@@ -17,7 +17,7 @@
         </div>
       </div>
     </div>
-    <div class="main w-[80%]">
+    <div class="main w-[90%]">
       <!-- 主题数据分析 -->
       <div
         class="theme-data-analyse mb-[36px] flex w-full flex-col items-center"
@@ -235,4 +235,19 @@ export default {
     border-radius: 8px;
   }
 }
+@media screen and (max-width: 1700px) {
+  .area-list {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+@media screen and (max-width: 1480px) and (min-width: 1200px) {
+  .area-list {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+@media screen and (max-width: 1200px) {
+  .area-list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 </style>

admin_2/src/pages/home/components/AreaCard.vue

@@ -7,7 +7,9 @@
     ]"
     @click="handleClick"
   >
-    <img class="banner" :src="data.img" />
+    <div class="banner">
+      <img class="banner-img" :src="data.img" />
+    </div>
     <div class="content">
       <!-- 对接时间 -->
       <div class="w-full">
@@ -67,7 +69,12 @@ export default {
     position: absolute;
     left: 0px;
     top: 0px;
-    transition: all 0.5s;
+    overflow: hidden;
+    .banner-img {
+      width: 100%;
+      height: 100%;
+      transition: all 0.5s;
+    }
   }
   .content {
     width: 100%;
@@ -115,7 +122,7 @@ export default {
 }
 .is-hover {
   &:hover {
-    .banner {
+    .banner-img {
       transform: scale(1.1);
     }
   }