From e1f3a83449248608ea42495b2ea6c2723ed37b00 Mon Sep 17 00:00:00 2001
From: panda <7934952@qq.com>
Date: Thu, 6 Jun 2024 17:02:07 +0800
Subject: [PATCH] add news

---
 package-lock.json                 | 186 +++++++++++++------------
 package.json                      |   6 +-
 src/assets/index.ts               |  53 +++++--
 src/components/blogs/HomePage.vue | 221 ++++++++++++++++++++----------
 src/components/blogs/ceshi.vue    | 107 ++++++++++-----
 src/main.ts                       |   2 -
 6 files changed, 357 insertions(+), 218 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e896e25..8bab3ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,16 @@
       "version": "0.0.0",
       "dependencies": {
         "ant-design-vue": "^4.2.1",
+        "aplayer": "^1.10.1",
         "axios": "^1.7.2",
         "echarts": "^5.5.0",
         "normalize.css": "^8.0.1",
         "pinia": "^2.1.7",
         "simplebar-vue": "^2.3.4",
+        "typed.js": "^2.1.0",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0",
-        "vue-typewriter-effect": "^1.0.1"
+        "vue-audio-better": "^3.0.1",
+        "vue-router": "^4.3.0"
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
@@ -934,6 +936,16 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/aplayer": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/aplayer/-/aplayer-1.10.1.tgz",
+      "integrity": "sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==",
+      "dependencies": {
+        "balloon-css": "^0.5.0",
+        "promise-polyfill": "7.1.0",
+        "smoothscroll": "0.4.0"
+      }
+    },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
@@ -965,6 +977,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/balloon-css": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/balloon-css/-/balloon-css-0.5.2.tgz",
+      "integrity": "sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ=="
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1177,6 +1194,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
+      "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w=="
+    },
     "node_modules/is-plain-object": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
@@ -1344,14 +1366,6 @@
         "npm": ">= 8"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1367,11 +1381,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
-    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -1466,59 +1475,31 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-7.1.0.tgz",
+      "integrity": "sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
-    "node_modules/raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dependencies": {
-        "performance-now": "^2.1.0"
-      }
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
@@ -1577,15 +1558,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "2.2.31",
       "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
@@ -1689,6 +1661,19 @@
         }
       }
     },
+    "node_modules/smoothscroll": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/smoothscroll/-/smoothscroll-0.4.0.tgz",
+      "integrity": "sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ=="
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -1715,6 +1700,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
+    "node_modules/typed.js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.1.0.tgz",
+      "integrity": "sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ=="
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
@@ -1728,19 +1718,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/typewriter-effect": {
-      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
-      "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
-      "dependencies": {
-        "prop-types": "^15.8.1",
-        "raf": "^3.4.1"
-      },
-      "peerDependencies": {
-        "react": "^17.x || ^18.x",
-        "react-dom": "^17.x || ^18.x"
-      }
-    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -1822,6 +1799,38 @@
         }
       }
     },
+    "node_modules/vue-audio-better": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vue-audio-better/-/vue-audio-better-3.0.1.tgz",
+      "integrity": "sha512-rr0cItOgMHYOLy7VvIHowWGqm+qLcCpj4BZ+4saAHQCSwGcV8TTCefLyGpdIjlJtqL8ytBjjtObft6WSkQoAKQ==",
+      "dependencies": {
+        "howler": "^2.1.2",
+        "vue": "^2.6.10"
+      }
+    },
+    "node_modules/vue-audio-better/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/vue-audio-better/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
@@ -1877,17 +1886,6 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/vue-typewriter-effect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-typewriter-effect/-/vue-typewriter-effect-1.0.1.tgz",
-      "integrity": "sha512-Z154Ax79N66btsstF9X3yOY7cc+B8H5fJpcRxuJhcPQd5ii/yKAgwSXbRaT1lClnqwTcmzs1RG1ULqZKhC8UvQ==",
-      "dependencies": {
-        "typewriter-effect": "^2.19.0"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.45"
-      }
-    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
diff --git a/package.json b/package.json
index afc332d..62b1652 100644
--- a/package.json
+++ b/package.json
@@ -12,14 +12,16 @@
   },
   "dependencies": {
     "ant-design-vue": "^4.2.1",
+    "aplayer": "^1.10.1",
     "axios": "^1.7.2",
     "echarts": "^5.5.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "simplebar-vue": "^2.3.4",
+    "typed.js": "^2.1.0",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vue-typewriter-effect": "^1.0.1"
+    "vue-audio-better": "^3.0.1",
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 02f77a3..cfee6f7 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -1,23 +1,46 @@
 import { defineComponent, h } from 'vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
 
-function createIconComponent(iconType:string){
-  const IconComponent  = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/c/font_4513281_240ozh2p7bxh.js', // 在 iconfont.cn 上生成
+function createIconComponent(iconType: string) {
+  const IconComponent = createFromIconfontCN({
+    scriptUrl: '//at.alicdn.com/t/c/font_4513281_wqgw35udiqc.js', // 在 iconfont.cn 上生成
   });
-  
-  return  defineComponent({
+
+  return defineComponent({
     setup() {
-      return () => h(IconComponent , { type: iconType });
+      return () => h(IconComponent, { type: iconType });
     },
   });
 }
-const TitleOutLined = createIconComponent( 'icon-xiongmaochizhuye');
-const BlogOutLined=createIconComponent( 'icon-blog');
-const SystemOutLined=createIconComponent( 'icon-system');
-const PhotoOutLined=createIconComponent( 'icon-photo');
-const FileOutLined=createIconComponent( 'icon-file');
-const DiaryOutLined=createIconComponent( 'icon-diary');
-const CommentOutLined=createIconComponent( 'icon-comment');
-const TypeOutLined=createIconComponent( 'icon-type');
-export {TitleOutLined,BlogOutLined,SystemOutLined,PhotoOutLined,FileOutLined,DiaryOutLined,CommentOutLined,TypeOutLined}
\ No newline at end of file
+const TitleOutLined = createIconComponent('icon-xiongmaochizhuye');
+const BlogOutLined = createIconComponent('icon-blog');
+const SystemOutLined = createIconComponent('icon-system');
+const PhotoOutLined = createIconComponent('icon-photo');
+const FileOutLined = createIconComponent('icon-file');
+const DiaryOutLined = createIconComponent('icon-diary');
+const CommentOutLined = createIconComponent('icon-comment');
+const TypeOutLined = createIconComponent('icon-type');
+const MusicLined = createIconComponent('icon-musicfill');
+const EmailLined = createIconComponent('icon-youxiang');
+const GitHubLined = createIconComponent('icon-github');
+const QQLined = createIconComponent('icon-QQ');
+const WechatLined = createIconComponent('icon-wechat-fill');
+const GravatarLined = createIconComponent('icon-brand-gravatar');
+
+
+export {
+  TitleOutLined,
+  BlogOutLined,
+  SystemOutLined,
+  PhotoOutLined,
+  FileOutLined,
+  DiaryOutLined,
+  CommentOutLined,
+  TypeOutLined,
+  MusicLined,
+  EmailLined,
+  GitHubLined,
+  QQLined,
+  WechatLined,
+  GravatarLined
+}
\ No newline at end of file
diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index bc25c9b..46eb2a8 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -4,10 +4,7 @@
             <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;" />
             <a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" />
         </div>
-        <div class="salon-light-text">
-            <vue-typewriter-effect :strings="['SunFree']" :delay="150" :deleteSpeed="150" />
-        </div>
-
+        <div class="salon-light-text"></div>
         <div class="carouse">
             <a-carousel autoplay>
                 <div class="img"><img src="/src/assets/images/nav1.png" alt=""></div>
@@ -17,73 +14,141 @@
         </div>
         <a-button type="link" shape="circle" class="down_button" size="large" @click="downScroll">
             <template #icon>
-                <DownCircleOutlined style="font-size: 35px;color: aliceblue;" spin/>
+                <DownCircleOutlined style="font-size: 35px;color: aliceblue;" spin />
             </template>
         </a-button>
-        <div>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-            <p>ceshi</p>
-        </div>
+
+        <a-flex>
+            <a-flex vertical>
+                <a-card style="width: 350px;" hoverable>
+                    <template #cover>
+                        <img alt="example" :src="img" style="height: 350px;" />
+                    </template>
+                    <a-card-meta title="SunFree" style="height: 100px">
+                        <template #description>
+                            <div class="cardtext"></div>
+                        </template>
+                    </a-card-meta>
+
+                    <a-space wrap class="button-container">
+                        <a-button shape="circle" size="large">
+                            <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 class="custom-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>
+
+                </a-card>
+                <a-flex>
+
+                </a-flex>
+            </a-flex>
+            <a-flex style="height: 500px;width: 60%;background-color: black;border: solid 1px red;">
+                <div></div>
+            </a-flex>
+            <a-flex style="height: 500px;background-color: blue;border: solid 1px red;">
+                <div id="aplayer" style="width: 100%;"></div>
+            </a-flex>
+        </a-flex>
     </Simplebar>
 </template>
 <script lang="ts" setup>
 import Simplebar from 'simplebar-vue';
 import 'simplebar-vue/dist/simplebar.min.css';
-import { h, ref } from 'vue';
+import { h, reactive, ref } from 'vue';
 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 { CaretRightOutlined } from '@ant-design/icons-vue';
+import 'APlayer/dist/APlayer.min.css';
+import APlayer from 'APlayer';
+
+const activeKey = ref(['1']);
+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';
+onMounted(() => {
+    // 定义home页的博客标题名
+    new Typed('.salon-light-text', {
+        strings: ['SunFree.'],
+        typeSpeed: 200,
+        backSpeed: 150,
+        loop: true,
+        loopCount: Infinity,
+        showCursor: false
+    });
+    // 定义个人座右铭
+    new Typed('.cardtext', {
+        strings: ['品瀚霖人生'],
+        typeSpeed: 200,
+        backSpeed: 150,
+        loop: true, // 开启循环
+        loopCount: Infinity, // 无限循环
+        showCursor: false // 取消光标
+    });
+    new APlayer({
+    container: document.getElementById('aplayer'),
+    mini: false,
+    autoplay: false,
+    theme: '#FADFA3',
+    loop: 'all',
+    order: 'random',
+    preload: 'auto',
+    volume: 0.7,
+    mutex: true,
+    listFolded: true,
+    listMaxHeight: 90,
+    lrcType: 3,
+    audio: [
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg',
+            lrc: 'lrc1.lrc',
+            theme: '#ebd0c2'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg',
+            lrc: 'lrc2.lrc',
+            theme: '#46718b'
+        }
+    ]
+});
+})
 const current = ref<string[]>(['mail']);
 const show_menu = ref(false);
+// 定义滚动条滚到一半显示导航菜单
 const handleScroll = () => {
     const scrollbar = document.querySelector('.simplebar-content-wrapper');
     if (scrollbar) {
@@ -92,20 +157,21 @@ const handleScroll = () => {
         show_menu.value = scrollOffset > halfViewportHeight;
     }
 };
-const downScroll = () => {  
-    const scrollbar = document.querySelector('.simplebar-content-wrapper');  
-    if (scrollbar) {  
-        const scrollTop = scrollbar.scrollTop;  
-          
-        const viewportHeight = scrollbar.clientHeight;  
-        const scrollDistance = viewportHeight - scrollTop-60;  
-          
-        setTimeout(() => {  
-            scrollbar.scrollBy({ top: scrollDistance, behavior: 'smooth' });  
-        }, 300); 
-    }  
-};  
 
+// 点击按钮，实现滚动到视窗高度距离，如果已经滚动，只需要滚动视窗高度-已经滚动的距离
+const downScroll = () => {
+    const scrollbar = document.querySelector('.simplebar-content-wrapper');
+    if (scrollbar) {
+        const scrollTop = scrollbar.scrollTop;
+
+        const viewportHeight = scrollbar.clientHeight;
+        const scrollDistance = viewportHeight - scrollTop - 60;
+
+        setTimeout(() => {
+            scrollbar.scrollBy({ top: scrollDistance, behavior: 'smooth' });
+        }, 300);
+    }
+};
 
 const items = ref<MenuProps['items']>([
     {
@@ -163,6 +229,7 @@ const onSearch = (searchValue: string) => {
     console.log('or use this.value', value.value);
 };
 
+const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
 
 </script>
 <style scoped>
@@ -240,4 +307,12 @@ const onSearch = (searchValue: string) => {
         background-position: 0% 50%;
     }
 }
+
+.button-container button {
+    margin: 24px 6px;
+}
+.custom-collapse{
+    margin: 24px 0px;
+    background: rgb(255, 255, 255)
+}
 </style>
\ No newline at end of file
diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue
index 3ad3d4a..8b2cf8c 100644
--- a/src/components/blogs/ceshi.vue
+++ b/src/components/blogs/ceshi.vue
@@ -1,39 +1,82 @@
 <template>
-  <div class="salon-light-text">
-    <vue-typewriter-effect :strings="['SunFree']" :delay="150" :deleteSpeed="150" />
+  <div class="echarts-2">
+    <div ref="own" style="height: 500px;"></div>
   </div>
 </template>
 
 <script setup lang='ts'>
-</script>
-
-<style>
-.Typewriter__wrapper {
-  font-size: 100px;
-  font-family: 'Courier New', Courier, monospace
-}
-
-.salon-light-text {
-  display: inline-block;
-  background: linear-gradient(270deg, #eae7e4, #d6cdc7, #4b4949);
-  background-size: 400% 400%;
-  -webkit-background-clip: text;
-  color: transparent;
-  background-clip: text;
-  animation: salon-light-animation 3s ease infinite;
-}
+import { onMounted, ref } from "vue"
+import { createEcharts } from "@/hooks/intex"
+const own = ref(null);
+onMounted(() => {
+  const hours = [
+    '12a', '1a', '2a', '3a', '4a', '5a', '6a',
+    '7a', '8a', '9a', '10a', '11a',
+    '12p', '1p', '2p', '3p', '4p', '5p',
+    '6p', '7p', '8p', '9p', '10p', '11p'
+  ];
+  const days = [
+    'Saturday', 'Friday', 'Thursday',
+    'Wednesday', 'Tuesday', 'Monday', 'Sunday'
+  ];
+  // prettier-ignore
+  const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
+    .map(function (item) {
+      return [item[1], item[0], item[2] || '-'];
+    });
+  const option = {
+    tooltip: {
+      position: 'top',
+    },
+    grid: {
+      height: '50%',
+      top: '10%'
+    },
+    xAxis: {
+      type: 'category',
+      data: hours,
+      splitArea: {
+        show: true
+      },
+      show: false
+    },
+    yAxis: {
+      type: 'category',
+      data: days,
+      splitArea: {
+        show: true
+      },
+      show: false
+    },
+    visualMap: {
+      min: 0,
+      max: 10,
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: '15%',
+      show:false
+    },
+    series: [
+      {
+        name: 'Punch Card',
+        type: 'heatmap',
+        data: data,
+        label: {
+          show: true
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  };
+  createEcharts(own, option)
 
-@keyframes salon-light-animation {
-  0% {
-    background-position: 0% 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
+})
+</script>
 
-  100% {
-    background-position: 0% 50%;
-  }
-}
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index d8091d7..c0e0f67 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,9 +4,7 @@ import "normalize.css"
 import App from './App.vue'
 import router from './router'
 import Antd from 'ant-design-vue';
-import VueTypewriterEffect from "vue-typewriter-effect";
 const app = createApp(App)
-app.component("vue-typewriter-effect", VueTypewriterEffect)
 app.use(createPinia())
 app.use(router)
 app.use(Antd)