diff --git a/package-lock.json b/package-lock.json
index 8bab3ac..6a9dcb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "typed.js": "^2.1.0",
         "vue": "^3.4.21",
         "vue-audio-better": "^3.0.1",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "wordcloud": "^1.2.2"
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
@@ -1909,6 +1910,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wordcloud": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/wordcloud/-/wordcloud-1.2.2.tgz",
+      "integrity": "sha512-fUnDsGrHXou+49j1OeKaC7nOeZPx+sWjIet0L/j6eAcm0nXy+a+AuUs/iDAX4PLBg1Zc6wgXWXhoXdQsXRWAEw=="
+    },
     "node_modules/zrender": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
diff --git a/package.json b/package.json
index 62b1652..cec4da3 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "typed.js": "^2.1.0",
     "vue": "^3.4.21",
     "vue-audio-better": "^3.0.1",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "wordcloud": "^1.2.2"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
diff --git a/src/assets/images/ceshi.png b/src/assets/images/ceshi.png
new file mode 100644
index 0000000..348422b
Binary files /dev/null and b/src/assets/images/ceshi.png differ
diff --git a/src/assets/index.ts b/src/assets/index.ts
index cfee6f7..ff6d7c4 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -3,7 +3,7 @@ import { createFromIconfontCN } from '@ant-design/icons-vue';
 
 function createIconComponent(iconType: string) {
   const IconComponent = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/c/font_4513281_wqgw35udiqc.js', // 在 iconfont.cn 上生成
+    scriptUrl: '//at.alicdn.com/t/c/font_4513281_r2toi9mpbha.js', // 在 iconfont.cn 上生成
   });
 
   return defineComponent({
@@ -26,6 +26,10 @@ const GitHubLined = createIconComponent('icon-github');
 const QQLined = createIconComponent('icon-QQ');
 const WechatLined = createIconComponent('icon-wechat-fill');
 const GravatarLined = createIconComponent('icon-brand-gravatar');
+const RiLiLined = createIconComponent('icon-rili');
+const YueDuLined = createIconComponent('icon-yuedu');
+const YanJingLined = createIconComponent('icon-yanjing');
+const XieZiLined = createIconComponent('icon-xiezi');
 
 
 export {
@@ -42,5 +46,9 @@ export {
   GitHubLined,
   QQLined,
   WechatLined,
-  GravatarLined
+  GravatarLined,
+  RiLiLined,
+  YueDuLined,
+  YanJingLined,
+  XieZiLined
 }
\ No newline at end of file
diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index f088326..f4f757d 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -26,47 +26,101 @@
 
         <!-- 主要内容区域 -->
         <div class="mainContainer">
-            <a-card hoverable>
-                    <img alt="example" :src="img" />
-                <a-card-meta title="SunFree" style="min-height: 100px">
-                    <template #description>
-                        <div class="cardtext"></div>
-                    </template>
-                </a-card-meta>
-                <a-space wrap>
-                    <a-button shape="circle" size="large" @click="gravatarClick">
-                        <GravatarLined />
-                    </a-button>
-                    <a-button shape="circle" size="large">
-                        <QQLined />
-                    </a-button>
-                    <a-button shape="circle" size="large">
-                        <WechatLined />
-                    </a-button>
-                    <a-button shape="circle" size="large">
-                        <MusicLined />
-                    </a-button>
-                    <a-button shape="circle" size="large">
-                        <GitHubLined />
-                    </a-button>
-                </a-space>
-                <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end">
-                    <template #expandIcon="{ isActive }">
-                        <caret-right-outlined :rotate="isActive ? 90 : 0" />
+            <div class="leftBar">
+                <a-card hoverable>
+                    <template #cover>
+                        <img alt="example" :src="img" />
                     </template>
-                    <a-collapse-panel key="1" header="内容1" :style="customStyle">
-                        <p>{{ text }}</p>
-                    </a-collapse-panel>
-                    <a-collapse-panel key="2" header="内容2" :style="customStyle">
-                        <p>{{ text }}</p>
-                    </a-collapse-panel>
-                    <a-collapse-panel key="3" header="内容3" :style="customStyle">
-                        <p>{{ text }}</p>
-                    </a-collapse-panel>
-                </a-collapse>
-            </a-card>
+                    <h1>sunfree</h1>
+                    <div class="cardText"></div>
+                    <div class="button-group">
+                        <a-button shape="circle" size="large" @click="gravatarClick">
+                            <GravatarLined />
+                        </a-button>
+                        <a-button shape="circle" size="large">
+                            <QQLined />
+                        </a-button>
+                        <a-button shape="circle" size="large">
+                            <WechatLined />
+                        </a-button>
+                        <a-button shape="circle" size="large">
+                            <MusicLined />
+                        </a-button>
+                        <a-button shape="circle" size="large">
+                            <GitHubLined />
+                        </a-button>
+                    </div>
+                    <div class="fold-panel">
+                        <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end">
+                            <template #expandIcon="{ isActive }">
+                                <caret-right-outlined :rotate="isActive ? 90 : 0" />
+                            </template>
+                            <a-collapse-panel key="1" header="内容1" :style="customStyle">
+                                <p>{{ text }}</p>
+                            </a-collapse-panel>
+                            <a-collapse-panel key="2" header="内容2" :style="customStyle">
+                                <p>{{ text }}</p>
+                            </a-collapse-panel>
+                            <a-collapse-panel key="3" header="内容3" :style="customStyle">
+                                <p>{{ text }}</p>
+                            </a-collapse-panel>
+                        </a-collapse>
+                    </div>
+                </a-card>
+                <a-card hoverable title="常用链接">
+                    <div class="button-group">
+                        <a-button type="dashed">Link</a-button>
+                        <a-button type="dashed">Link</a-button>
+                        <a-button type="dashed">Link</a-button>
+                        <a-button type="dashed">Link</a-button>
+                    </div>
+                </a-card>
+            </div>
+
             <div class="main">
-                <div></div>
+                <a-badge-ribbon text="Hippies" color="black">
+                    <a-card hoverable>
+                        <h2>操作系统的安装</h2>
+                        <div class="tag-group">
+                            <a-tag color="#E6E6FA">
+                                <template #icon>
+                                    <RiLiLined />
+                                </template>
+                                {{ mainStatistic.mainDate }}
+                            </a-tag>
+                            <a-tag color="#6495ED">
+                                <template #icon>
+                                    <YanJingLined />
+                                </template>
+                                {{ mainStatistic.mainWatchCount }}
+                            </a-tag>
+                            <a-tag color="#B0C4DE">
+                                <template #icon>
+                                    <XieZiLined />
+                                </template>
+                                字数≈{{ mainStatistic.mainWordCount }}字
+                            </a-tag>
+                            <a-tag color="#20B2AA">
+                                <template #icon>
+                                    <YueDuLined />
+                                </template>
+                                阅读时长≈{{ mainStatistic.mainReadCount }}分
+                            </a-tag>
+                        </div>
+                        <div class="blog-content">
+                            <div>
+                                <a-image :preview="false" :width="200"
+                                    src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
+                            </div>
+
+                            <span style="height: 160px">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span>
+                        </div>
+
+                        <div class="read-button">
+                            <a-button type="primary" shape="round">阅读全文</a-button>
+                        </div>
+                    </a-card>
+                </a-badge-ribbon>
             </div>
             <div class="rightBar">
                 <a-card hoverable style="width: 400px;">
@@ -108,19 +162,22 @@ import { MenuProps } from 'ant-design-vue/es/menu';
 import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
 import { MusicLined, EmailLined, QQLined, WechatLined, GravatarLined, GitHubLined } from "@/assets"
 import Typed from 'typed.js';
-import { onMounted } from 'vue'
+import { onMounted } from 'vue';
+import type { CSSProperties } from 'vue';
 import { CaretRightOutlined } from '@ant-design/icons-vue';
 import 'APlayer/dist/APlayer.min.css';
 import APlayer from 'APlayer';
 import { createEcharts } from "@/hooks/intex"
 import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
-import { useRouter } from 'vue-router'
+import { RiLiLined, YueDuLined, YanJingLined, XieZiLined } from '@/assets';
+import { useRouter } from 'vue-router';
+const random = ref();
 const router = useRouter()
 const heat = ref(null);
 const activeKey = ref(['']);
 const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
 const customStyle =
-    'background: #f7f7f7;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
+    'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
 onMounted(() => {
     // 定义home页的博客标题名
     new Typed('.author', {
@@ -132,7 +189,7 @@ onMounted(() => {
         showCursor: false
     });
     // 定义个人座右铭
-    new Typed('.cardtext', {
+    new Typed('.cardText', {
         strings: ['做三流测试，品瀚霖人生！'],
         typeSpeed: 200,
         backSpeed: 150,
@@ -298,6 +355,13 @@ const downScroll = () => {
     }
 };
 
+const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({
+    mainDate: "2024-06-11",
+    mainWatchCount: "9999",
+    mainWordCount: "9999",
+    mainReadCount: "9999"
+})
+
 const items = ref<MenuProps['items']>([
     {
         key: 'home',
@@ -433,37 +497,82 @@ const gravatarClick = () => {
     background-color: rgba(5, 5, 5, 0.08);
 }
 
-.mainContainer>:first-child {
+.leftBar {
     width: 15%;
 }
 
-.mainContainer img{
-    width: 100%;
-    /* 图片宽度占满容器 */
-    aspect-ratio: 1/1;
+.leftBar img {
     /* 图片自适应容器并保持宽高比例 */
+    aspect-ratio: 1/1;
+}
+
+.leftBar>* {
+    margin-bottom: 24px;
+}
+
+.leftBar h1 {
+    text-align: center;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.leftBar .cardText {
+    min-height: 60px;
+    text-align: center;
 }
 
+.leftBar>:first-child .button-group {
+    display: flex;
+    margin: 0 12px 24px 12px;
+    justify-content: space-between;
+}
+
+.leftBar>:nth-child(2) .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.leftBar>:nth-child(2) .button-group>* {
+    width: 40%;
+    margin: 12px;
+}
 
 .main {
-    height: 500px;
     width: 45%;
     margin: 0 24px;
-    background-color: black;
-    border: solid 1px red;
 }
 
-.rightBar {
-    width: 20%;
+.main h2 {
+    text-align: center;
+}
+
+.main .tag-group {
+    display: flex;
+    justify-content: center;
+}
+
+.main .tag-group>* {
+    color: black;
+    margin: 0 12px;
+}
+
+.main .blog-content {
+    display: flex;
+    margin: 48px;
+}
+.main .blog-content>:nth-child(2){
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre-wrap; /* 防止文本换行 */ 
 }
 
-.button-container button {
-    margin: 24px 6px;
+.main .read-button {
+    display: flex;
+    justify-content: center;
 }
 
-.custom-collapse {
-    margin: 24px 0px;
-    background: rgb(255, 255, 255)
+.rightBar {
+    width: 20%;
 }
 
 .aplayer {
diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue
index 4de8b8e..a27216f 100644
--- a/src/components/blogs/ceshi.vue
+++ b/src/components/blogs/ceshi.vue
@@ -1,109 +1,27 @@
 <template>
-  <div class="echarts-2">
-    <div ref="heat" style="height: 200px;width: 500px;"></div>
-  </div>
+  <div ref="wordcloud" style="width: 500px; height: 500px;"></div>
 </template>
 
-<script setup lang='ts'>
-import { onMounted, ref } from "vue";
-import { createEcharts } from "@/hooks/intex"
+<script setup>
+import { ref, onMounted } from 'vue';
+import wordcloud from 'wordcloud';
 
-const heat = ref(null);
+const wordcloudRef = ref(null);
 
-onMounted(() => {
-  function generateDates(numDays: number) {
-    const dates = [];
-    const currentDate = new Date();
-    for (let i = 0; i < numDays; i++) {
-      const date = new Date(currentDate);
-      date.setDate(currentDate.getDate() - i);
-      dates.push(
-        { date: date.toISOString().split('T')[0], blogCount: 0 }
-      ); // 包含日期和评论数
-    }
-
-    return dates.reverse();
-  }
-
-  // 初始化60天的数据
-  const data = generateDates(60);
-  console.log(data)
-  data[3].blogCount = 5;
-  data[15].blogCount = 10;
-  data[25].blogCount = 3;
-
-  const formattedData = data.map((value, index) => [index % 15, Math.floor(index / 15), value.blogCount]);
+const tags = [
+  { text: 'Java', weight: 5 },
+  { text: 'Python', weight: 3 },
+  { text: 'JavaScript', weight: 7 },
+  { text: 'Ant Design', weight: 2 },
+  { text: 'Vue.js', weight: 4 },
+  { text: 'React', weight: 6 },
+  { text: 'Angular', weight: 3 },
+  { text: 'CSS', weight: 4 },
+  { text: 'HTML', weight: 5 }
+];
 
-  const heatMapData = {
-    tooltip: {
-      position: 'top',
-      formatter: function (params) {
-        const item = data[params.dataIndex];
-        if (item.blogCount > 0) {
-          return `${item.date}<br/>COMMENTS: ${item.blogCount}`;
-        } else {
-          return `${item.date}`;
-        }
-      }
-    },
-    grid: {
-      left: '0',     // 左边距
-      right: '0',    // 右边距
-      top: '0',      // 上边距
-      bottom: '0',   // 下边距
-    },
-
-    xAxis: {
-      type: 'category',
-      data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`),
-      splitArea: {
-        show: true
-      },
-      show: false
-    },
-    yAxis: {
-      type: 'category',
-      data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'],
-      splitArea: {
-        show: false
-      },
-      show: false
-    },
-    visualMap: {
-      min: 0,
-      max: 10,
-      calculable: true,
-      orient: 'horizontal',
-      left: 'center',
-      bottom: '15%',
-      show: false,
-      inRange: {
-        color: ['#ffffff', '#000000'] // 0评论是白色, 非0评论是黑色
-      }
-    },
-
-    series: [{
-      type: 'heatmap',
-      data: formattedData,
-      itemStyle: {
-        borderColor: '#000', // 设置边框颜色
-        borderWidth: 1 // 设置边框宽度
-      },
-      label: {
-        show: false,
-      },
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
-          borderColor: '#fff', // 鼠标悬停时的边框颜色
-          borderWidth: 2 // 鼠标悬停时的边框宽度
-        }
-      }
-    }]
-  };
-  createEcharts(heat, heatMapData)
+onMounted(() => {
+  const canvas = wordcloudRef.value;
+  wordcloud(canvas, { list: tags });
 });
 </script>
-
-<style></style>