From ac53d63b78d2900c96f01acaceb64be16448cf48 Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Mon, 22 Apr 2024 13:02:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/dashboard/home.vue | 150 +++++++++++++++++++-----------------
 1 file changed, 78 insertions(+), 72 deletions(-)

diff --git a/src/view/dashboard/home.vue b/src/view/dashboard/home.vue
index e0611f6..f3cf53c 100644
--- a/src/view/dashboard/home.vue
+++ b/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
-            v-for="(card, key) in toolCards"
-            :key="key"
-            :span="4"
-            :xs="8"
-            class="quick-entrance-items"
-            @click="toTarget(card.name)"
-          >
+          <el-col v-for="(card, key) in toolCards" :key="key" :span="4" :xs="8" class="quick-entrance-items"
+            @click="toTarget(card.name)">
             <div class="quick-entrance-item">
-              <div
-                class="quick-entrance-item-icon"
-                :style="{ backgroundColor: card.bg }"
-              >
+              <div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
                 <el-icon>
-                  <component
-                    :is="card.icon"
-                    :style="{ color: card.color }"
-                  />
+                  <component :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)'
   },
@@ -107,66 +95,84 @@ const toTarget = (name) => {
 
 <style lang="scss" scoped>
 .page {
-    @apply p-0;
-    .gva-card-box{
-      @apply p-4;
-      &+.gva-card-box{
-        @apply pt-0;
+  @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;
       }
     }
-    .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;
+
+    &-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;
       }
     }
-    .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>