更改 HomeView.vue写法

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>