From 41cbe0af0600d4209b688afb4b6acca93345f076 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 23 Dec 2023 22:17:22 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E5=90=8D=E7=89=87=E5=9B=BE?=
 =?UTF-8?q?=E9=89=B4=E5=AE=8C=E5=B7=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WIKI/Namecard.vue | 56 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/pages/WIKI/Namecard.vue b/src/pages/WIKI/Namecard.vue
index ad3ed7fb..e10f33d9 100644
--- a/src/pages/WIKI/Namecard.vue
+++ b/src/pages/WIKI/Namecard.vue
@@ -1,3 +1,57 @@
 <template>
-  <h1>WIKI-Namecard</h1>
+  <div class="tw-nc-box">
+    <v-virtual-scroll :items="AppNameCardsData" :item-height="80" class="cards-list">
+      <template #default="{ item }">
+        <v-list
+          :style="{ backgroundImage: `url(${item.bg})` }"
+          class="card-box"
+          @click="toNameCard(item)"
+        >
+          <v-list-item :title="item.name" :subtitle="item.desc">
+            <template #prepend>
+              <v-img width="80px" style="margin-right: 10px" :src="item.icon" />
+            </template>
+          </v-list-item>
+        </v-list>
+      </template>
+    </v-virtual-scroll>
+    <ToNamecard v-model="visible" :data="curNameCard" />
+  </div>
 </template>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+import ToNamecard from "../../components/overlay/to-namecard.vue";
+import { AppNameCardsData } from "../../data";
+
+const curNameCard = ref<TGApp.App.NameCard.Item>();
+const visible = ref(false);
+
+onMounted(() => {
+  curNameCard.value = AppNameCardsData[0];
+});
+
+function toNameCard(item: TGApp.App.NameCard.Item) {
+  curNameCard.value = item;
+  visible.value = true;
+}
+</script>
+<style lang="css" scoped>
+.tw-nc-box {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+}
+
+.card-box {
+  width: 100%;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 10px 50px 50px 10px;
+  margin-bottom: 10px;
+  background-position: right;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  font-family: var(--font-title);
+}
+</style>