提交代码

web/src/views/index.vue

@@ -47,7 +47,7 @@
                   <img :src="menu.logoUrl" :alt="menu.title" class="menu-logo" />
                 </div>
                 <span class="action-title" :class="{ 'disabled': !menu.available }">{{ menu.title }}</span>
-                <span class="action-desc" :class="{ 'disabled': !menu.available }">{{ menu.description }}</span>
+                <!-- <span class="action-desc" :class="{ 'disabled': !menu.available }">{{ menu.description }}</span> -->
                 <!-- 移除层级路径显示 -->
                 <el-tag v-if="!menu.available" type="info" size="small" class="status-tag">开发中</el-tag>
               </div>
@@ -946,24 +946,36 @@ onMounted(async () => {
 }
 
 .menu-card-wrapper {
-  flex: 0 0 calc(20% - 16px); // 每行5个，减去间隔
-  min-width: 180px;
+  flex: 0 0 calc((100% - 140px) / 8); // 每行8个，精确计算：(100% - 7个间隔*20px) / 8
+  min-width: 100px;
   margin-bottom: 20px;
 
+  @media (max-width: 1600px) {
+    flex: 0 0 calc((100% - 120px) / 7); // 中大屏幕每行7个
+  }
+
   @media (max-width: 1400px) {
-    flex: 0 0 calc(25% - 15px); // 中等屏幕每行4个
+    flex: 0 0 calc((100% - 100px) / 6); // 中等屏幕每行6个
   }
 
   @media (max-width: 1200px) {
-    flex: 0 0 calc(33.333% - 14px); // 小屏幕每行3个
+    flex: 0 0 calc((100% - 80px) / 5); // 小屏幕每行5个
+  }
+
+  @media (max-width: 992px) {
+    flex: 0 0 calc((100% - 60px) / 4); // 平板每行4个
   }
 
   @media (max-width: 768px) {
-    flex: 0 0 calc(50% - 10px); // 移动端每行2个
+    flex: 0 0 calc((100% - 40px) / 3); // 移动端每行3个
+  }
+
+  @media (max-width: 600px) {
+    flex: 0 0 calc((100% - 20px) / 2); // 小手机每行2个
   }
 
   @media (max-width: 480px) {
-    flex: 0 0 100%; // 超小屏幕每行1个
+    flex: 0 0 calc(100% - 20px); // 超小屏幕每行1个
   }
 }
 
@@ -972,7 +984,7 @@ onMounted(async () => {
   border: none;
   transition: all 0.3s ease;
   cursor: pointer;
-  height: 140px;
+  height: 110px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -995,7 +1007,7 @@ onMounted(async () => {
 
 .menu-action {
   text-align: center;
-  padding: 15px 10px;
+  padding: 10px 8px;
   width: 100%;
 }
 
@@ -1011,15 +1023,15 @@ onMounted(async () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 12px;
-  height: 48px;
+  margin-bottom: 8px;
+  height: 36px;
 }
 
 .menu-logo {
-  width: 48px;
-  height: 48px;
+  width: 36px;
+  height: 36px;
   object-fit: contain;
-  border-radius: 8px;
+  border-radius: 6px;
   transition: all 0.3s ease;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
 
@@ -1041,16 +1053,16 @@ onMounted(async () => {
 }
 
 .action-title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: #333;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   display: block;
   line-height: 1.3;
 }
 
 .action-desc {
-  font-size: 12px;
+  font-size: 11px;
   color: #666;
   display: block;
   line-height: 1.4;
@@ -1140,29 +1152,29 @@ onMounted(async () => {
   }
 
   .menu-action-card {
-    height: 120px;
+    height: 100px;
   }
 
   .menu-action {
-    padding: 10px 5px;
+    padding: 8px 5px;
   }
 
   .menu-logo-wrapper {
-    height: 36px;
-    margin-bottom: 8px;
+    height: 30px;
+    margin-bottom: 6px;
   }
 
   .menu-logo {
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
   }
 
   .action-title {
-    font-size: 14px;
+    font-size: 13px;
   }
 
   .action-desc {
-    font-size: 11px;
+    font-size: 10px;
   }
 
   .loading-state {