src/components/HotItemBox.vue

@@ -1,58 +0,0 @@
-<script setup>
-function createHotItemBox(data = {}) {
-  return {
-    num: data.num || 1,
-    title: data.title || '',
-    content: data.content || '',
-    imgUrl: data.imgUrl || '',
-    hotValue: data.hotValue || 0
-  }
-}
-
-var hotItemBox = createHotItemBox({
-  num: 1,
-  title: 'test',
-  content: 'test content',
-  imgUrl: 'test img url',
-  hotValue: 200
-})
-</script>
-
-<template>
-  <div id="hot-item-box">
-    <div id="hot-item-header">
-      <span>{{ hotItemBox.num }}</span>
-    </div>
-    <div id="hot-item-body">
-      <h1>{{ hotItemBox.title }}</h1>
-      <div id="content">{{ hotItemBox.content }}</div>
-      <div id="ext">
-        <span>✨{{ hotItemBox.hotValue }}</span>
-        <span>✈分享</span>
-      </div>
-    </div>
-    <div id="hot-item-footer">
-      <img :src="hotItemBox.imgUrl" alt="测试" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-#hot-item-box {
-  width: 600px;
-  height: 150px;
-  border: solid 1px red;
-  display: flex;
-  padding: 16px 0;
-}
-#hot-item-header {
-  width: 10%;
-  text-align: center;
-}
-#hot-item-body {
-  width: 60%;
-}
-#hot-item-footer {
-  width: 30%;
-}
-</style>

src/views/HomeView.vue

@@ -1,9 +1,45 @@
 <script setup>
-import HotItemBox from '@/components/HotItemBox.vue'
+import { createLinkCard } from '../models/LinkCard'
+
+const modules = [
+  {
+    title: '',
+    content: [
+      createLinkCard('gitea', '', 'http://10.120.20.137:3000/'),
+      createLinkCard('pve', '', 'http://10.120.20.15:8006/'),
+      createLinkCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
+      createLinkCard('gitea', '', 'https://gitea.yulinling.asia/')
+    ]
+  }
+]
 </script>
 
 <template>
-  <HotItemBox />
+  <div v-for="(item, index) in modules" :key="index" class="card_div">
+    <a-typography-title>{{ item.title }}</a-typography-title>
+    <ul>
+      <a-card v-for="(item, index) in item.content" :key="index" hoverable class="card_style">
+        <a-card-meta :title="item.title">
+          <template #description>
+            <a-typography-link :href="item.link" target="_blank">{{ item.link }}</a-typography-link>
+          </template>
+        </a-card-meta>
+      </a-card>
+    </ul>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+.card_div {
+  width: 100%;
+}
+
+ul {
+  list-style: none;
+}
+.card_style {
+  width: 90%;
+  margin: 10px auto;
+}
+</style>