修改首页快捷入口

src/view/dashboard/home.vue

@@ -12,24 +12,12 @@
       <div class="gva-card quick-entrance">
         <div class="gva-card-title">快捷入口</div>
         <el-row :gutter="20">
-          <el-col
+          <el-col v-for="(card, key) in toolCards" :key="key" :span="4" :xs="8" class="quick-entrance-items"
-            v-for="(card, key) in toolCards"
+            @click="toTarget(card.name)">
-            :key="key"
-            :span="4"
-            :xs="8"
-            class="quick-entrance-items"
-            @click="toTarget(card.name)"
-          >
             <div class="quick-entrance-item">
-              <div
+              <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
-                class="quick-entrance-item-icon"
-                :style="{ backgroundColor: card.bg }"
-              >
                 <el-icon>
-                  <component
+                  <component :is="card.icon" :style="{ color: card.color }" />
-                    :is="card.icon"
-                    :style="{ color: card.color }"
-                  />
                 </el-icon>
               </div>
               <p>{{ card.label }}</p>
@@ -89,9 +77,9 @@ const toolCards = ref([
     bg: 'rgba(255, 133, 192,.3)'
   },
   {
-    label: '用户管理',
+    label: '部门管理',
     icon: 'monitor',
-    name: 'user',
+    name: 'organize',
     color: '#ff9c6e',
     bg: 'rgba(255, 156, 110,.3)'
   },
@@ -108,65 +96,83 @@ const toTarget = (name) => {
 <style lang="scss" scoped>
 .page {
   @apply p-0;
+
   .gva-card-box {
     @apply p-4;
+
     &+.gva-card-box {
       @apply pt-0;
     }
   }
+
   .gva-card {
     @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
+
     .gva-card-title {
       @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
     }
   }
+
   .gva-top-card {
     @apply h-48 flex items-center justify-between text-gray-500;
+
     &-left {
       @apply h-full flex flex-col w-auto;
+
       &-title {
         @apply text-3xl text-gray-600;
       }
+
       &-dot {
         @apply mt-4 text-gray-600 text-lg;
       }
+
       &-item {
         +.gva-top-card-left-item {
           margin-top: 24px;
         }
+
         margin-top: 14px;
       }
     }
+
     &-right {
       height: 600px;
       width: 600px;
       margin-top: 28px;
     }
   }
+
   ::v-deep(.el-card__header) {
     @apply p-0 border-gray-200;
   }
+
   .card-header {
     @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
   }
+
   .quick-entrance-items {
     @apply flex items-center justify-center text-center text-gray-800;
+
     .quick-entrance-item {
       @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
+
       &:hover {
         @apply shadow-lg;
       }
+
       &-icon {
         @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
       }
+
       p {
         @apply mt-2.5;
       }
     }
   }
 }
+
 .dashboard-icon {
   @apply flex items-center text-xl mr-2 text-blue-400;
 }
-
 </style>