From 3706d4bd7a89997111c8e36ad3fcd7751b27c43a Mon Sep 17 00:00:00 2001
From: LingandRX <rsgltzyd@hotmail.com>
Date: Sun, 15 Dec 2024 21:24:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=20HomeView.vue=E5=86=99?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue | 61 +++++++++---------------------------------
 1 file changed, 12 insertions(+), 49 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 207e696..32432cb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,8 +1,4 @@
 <script setup>
-const cardStyle = {
-  width: '200px'
-}
-
 class moduleCard {
   title
   content
@@ -13,23 +9,14 @@ class moduleCard {
     this.content = content
     this.url = url
   }
-
-  introduceSelf() {
-    console.log(`title:${this.title}\ncontent:${this.content}\nurl:${this.url}`)
-  }
 }
 
 const modules = [
   {
-    title: 'zero tier',
+    title: '',
     content: [
       new moduleCard('gitea', '', 'http://10.120.20.137:3000/'),
-      new moduleCard('pve', '', 'http://10.120.20.15:8006/')
-    ]
-  },
-  {
-    title: '腾讯云服务',
-    content: [
+      new moduleCard('pve', '', 'http://10.120.20.15:8006/'),
       new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
       new moduleCard('gitea', '', 'https://gitea.yulinling.asia/')
     ]
@@ -38,47 +25,23 @@ const modules = [
 </script>
 
 <template>
-  <div v-for="(item, index) in modules" :key="index">
-    <h2>{{ item.title }}</h2>
-    <ul>
+  <div v-for="(item, index) in modules" :key="index" :style="{ width: 100 + '%' }">
+    <a-typography-title>{{ item.title }}</a-typography-title>
+    <ul :style="{ display: 'flex', flexWrap: 'wrap', margin: 'auto', justifyContent: 'center' }">
       <a-card
         v-for="(item, index) in item.content"
         :key="index"
-        :style="cardStyle"
-        :body-style="{ padding: 0, overflow: 'hidden' }"
+        :style="{ width: 18 + '%', margin: '10px' }"
         hoverable
       >
-        <a-flex justify="space-between">
-          <a-flex
-            vertical
-            align="flex-end"
-            justify="space-between"
-            :style="{ padding: '32px', margin: 'auto', alignItems: 'center' }"
-          >
-            <a-typography :style="{ margin: 'auto' }">
-              <a-typography-title :level="3"> “{{ item.title }}”</a-typography-title>
-            </a-typography>
-            <a-button type="primary" :href="item.url" target="_blank">Get Start</a-button>
-          </a-flex>
-        </a-flex>
+        <a-card-meta :title="item.title">
+          <template #description>
+            <a-typography-link :href="item.url" target="_blank">{{ item.url }}</a-typography-link>
+          </template>
+        </a-card-meta>
       </a-card>
     </ul>
   </div>
 </template>
 
-<style scoped>
-h2 {
-  margin: 10px;
-}
-
-ul {
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  padding: 0;
-}
-
-ul > div {
-  margin: 0 10px;
-}
-</style>
+<style scoped></style>