From 396428104a510ae44e08187ce7397fba6c0eb516 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, 20 Mar 2022 18:59:20 +0800
Subject: [PATCH] =?UTF-8?q?mod:=20=E4=BF=AE=E6=94=B9=E5=B9=B6=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/index.vue | 67 ++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 98c5da9..a36c964 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,3 +1,68 @@
 <template>
-  <h1>首页</h1>
+  <div>
+    <n-card>
+      <div flex items-center>
+        <img width="60" style="border-radius: 50%" :src="userStore.avatar" />
+        <div ml20>
+          <p text-16>Hello, {{ userStore.name }}</p>
+          <p op80 text-12 mt5>今天又是元气满满的一天</p>
+        </div>
+        <div flex ml-auto>
+          <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>
+          <n-statistic ml80 label="Forks">
+            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="299" />
+          </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>
+  </div>
 </template>
+
+<script setup>
+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>