diff --git a/src/components/HotItemBox.vue b/src/components/HotItemBox.vue
new file mode 100644
index 0000000..834e865
--- /dev/null
+++ b/src/components/HotItemBox.vue
@@ -0,0 +1,58 @@
+<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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ba8dcd0..7b6581f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,45 +1,9 @@
 <script setup>
-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/')
-    ]
-  }
-]
+import HotItemBox from '@/components/HotItemBox.vue'
 </script>
 
 <template>
-  <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>
+  <HotItemBox />
 </template>
 
-<style scoped>
-
-.card_div {
-  width: 100%;
-}
-
-ul {
-  list-style: none;
-}
-.card_style {
-  width: 90%;
-  margin: 10px auto;
-}
-</style>
+<style scoped></style>