优化

src/views/dashboard/index.vue

@@ -3,17 +3,18 @@
     <h1 class="welcome-title">Welcome to Funtime Design System</h1>
     <p class="subtitle">Select a module to get started</p>
     
-    <el-row :gutter="24">
+    <div class="modules-grid">
-      <el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="module in modules" :key="module.id">
+      <div class="module-item" v-for="module in modules" :key="module.id">
         <el-card class="module-card" shadow="hover" @click="navigateTo(module.path)">
-          <div class="module-icon">
+          <div class="card-content">
-            <component :is="module.icon" v-if="module.icon" />
+            <el-icon class="module-icon" v-if="module.icon">
+              <component :is="module.icon" />
+            </el-icon>
+            <h3 class="module-title">{{ module.title }}</h3>
           </div>
-          <h3 class="module-title">{{ module.title }}</h3>
-          <p class="module-desc">{{ module.description }}</p>
         </el-card>
-      </el-col>
+      </div>
-    </el-row>
+    </div>
   </div>
 </template>
 
@@ -68,53 +69,61 @@ onMounted(async () => {
   font-size: 16px;
   color: #909399;
 }
+.modules-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+  margin: 0 auto;
+  max-width: 1200px;
+}
+.module-item {
+  display: flex;
+  justify-content: center;
+}
 .module-card {
   cursor: pointer;
   transition: all 0.3s ease;
-  height: 100%;
+  width: 120px;
+  height: 120px;
   border: none;
   border-radius: 12px;
-  margin-bottom: 20px;
 }
 .module-card:hover {
-  transform: translateY(-8px);
+  transform: translateY(-5px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+:deep(.el-card__body) {
+  padding: 0 !important;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .card-content {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  width: 100%;
   padding: 10px;
 }
-.icon-wrapper {
+.module-icon {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background-color: #ecf5ff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   font-size: 36px;
   color: #409eff;
-  margin-bottom: 24px;
+  margin-bottom: 8px;
   transition: all 0.3s;
 }
-.module-card:hover .icon-wrapper {
+.module-card:hover .module-icon {
-  background-color: #409eff;
-  color: #ffffff;
   transform: scale(1.1);
 }
 .module-title {
-  margin: 0 0 12px;
-  font-size: 20px;
-  font-weight: 600;
-  color: #303133;
-}
-.module-desc {
   margin: 0;
   font-size: 14px;
-  color: #606266;
+  font-weight: 600;
-  line-height: 1.6;
+  color: #303133;
   text-align: center;
+  line-height: 1.2;
 }
 </style>