From ac9ccbadf08dd45e719208e27dd349e6e2157690 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Sun, 19 Jun 2022 15:02:58 +0800
Subject: [PATCH] =?UTF-8?q?mod:=20=E4=BD=BF=E7=94=A8unocss=E9=87=8D?=
 =?UTF-8?q?=E5=86=99=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/index.scss         |  6 +--
 src/views/dashboard/index.vue | 82 +++++++++++++++--------------------
 unocss.config.js              |  4 +-
 3 files changed, 41 insertions(+), 51 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index f10f5cd..bc8ff0e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -30,12 +30,12 @@ body {
 /* 自定义滚动条样式 */
 .cur-scroll {
   &::-webkit-scrollbar{
-    width:8px;
-    height:6px;
+    width: 6px;
+    height: 6px;
   }
   &::-webkit-scrollbar-thumb{
     background-color: transparent;
-    border-radius:4px;
+    border-radius: 3px;
   }
   
   &::-webkit-scrollbar-corner{
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index a36c964..202288d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,42 +1,51 @@
 <template>
-  <div>
-    <n-card>
+  <div p-15>
+    <n-card rounded-10>
       <div flex items-center>
-        <img width="60" style="border-radius: 50%" :src="userStore.avatar" />
-        <div ml20>
+        <img rounded-full width="60" :src="userStore.avatar" />
+        <div ml-20>
           <p text-16>Hello, {{ userStore.name }}</p>
-          <p op80 text-12 mt5>今天又是元气满满的一天</p>
+          <p mt-5 text-12 op-60>今天又是元气满满的一天</p>
         </div>
-        <div flex ml-auto>
+        <div ml-auto flex items-center>
           <n-statistic label="待办" :value="4">
             <template #suffix> / 10 </template>
           </n-statistic>
-          <n-statistic ml80 label="Stars">
-            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="999" />
+          <n-statistic label="Stars" w-100 ml-80>
+            <a href="https://github.com/zclzone/vue-naive-admin">
+              <img allt="stars" src="https://badgen.net/github/stars/zclzone/vue-naive-admin" />
+            </a>
           </n-statistic>
-          <n-statistic ml80 label="Forks">
-            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="299" />
+          <n-statistic label="Forks" w-100 ml-80>
+            <a href="https://github.com/zclzone/vue-naive-admin">
+              <img allt="forks" src="https://badgen.net/github/forks/zclzone/vue-naive-admin" />
+            </a>
           </n-statistic>
         </div>
       </div>
     </n-card>
 
-    <div p15 flex>
-      <n-card title="项目" size="small" :segmented="true">
-        <template #header-extra>
-          <n-button text type="primary">更多</n-button>
-        </template>
-        <div class="card-list">
-          <n-card v-for="i in 10" :key="i" title="Vue Naive Admin" size="small">
-            <p op60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
-          </n-card>
-          <div class="blank"></div>
-          <div class="blank"></div>
-          <div class="blank"></div>
-          <div class="blank"></div>
-        </div>
-      </n-card>
-    </div>
+    <n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
+      <template #header-extra>
+        <n-button text type="primary">更多</n-button>
+      </template>
+      <div flex flex-wrap justify-between>
+        <n-card
+          v-for="i in 10"
+          :key="i"
+          class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
+          hover:card-shadow
+          title="Vue Naive Admin"
+          size="small"
+        >
+          <p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
+        </n-card>
+        <div w-300 h-0></div>
+        <div w-300 h-0></div>
+        <div w-300 h-0></div>
+        <div w-300 h-0></div>
+      </div>
+    </n-card>
   </div>
 </template>
 
@@ -45,24 +54,3 @@ import { useUserStore } from '@/store/modules/user'
 
 const userStore = useUserStore()
 </script>
-
-<style lang="scss" scoped>
-.card-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  .n-card {
-    width: 300px;
-    flex-shrink: 0;
-    margin: 10px 0;
-    cursor: pointer;
-    &:hover {
-      box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
-    }
-  }
-  .blank {
-    width: 300px;
-    height: 0;
-  }
-}
-</style>
diff --git a/unocss.config.js b/unocss.config.js
index 27f2a9b..1844097 100644
--- a/unocss.config.js
+++ b/unocss.config.js
@@ -3,11 +3,13 @@ import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
 export default defineConfig({
   shortcuts: [
     ['f-c-c', 'flex justify-center items-center'],
-    ['ellipsis', 'truncate'],
+    ['text-ellipsis', 'truncate'],
+    ['wh-full', 'w-full h-full'],
   ],
   rules: [
     ['color-primary', { color: 'var(--primaryColor)' }],
     ['bgc-primary', { backgroundColor: 'var(--primaryColor)' }],
+    ['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
   ],
   presets: [presetUno(), presetAttributify()],
 })