add news

package-lock.json

@@ -8,7 +8,6 @@
       "name": "blog_front",
       "version": "0.0.0",
       "dependencies": {
-        "animejs": "^3.2.2",
         "ant-design-vue": "^4.2.1",
         "axios": "^1.7.2",
         "echarts": "^5.5.0",
@@ -16,7 +15,8 @@
         "pinia": "^2.1.7",
         "simplebar-vue": "^2.3.4",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "vue-typewriter-effect": "^1.0.1"
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
@@ -883,11 +883,6 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
-    "node_modules/animejs": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz",
-      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
-    },
     "node_modules/ansi-styles": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
@@ -1349,6 +1344,14 @@
         "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",
@@ -1364,6 +1367,11 @@
         "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",
@@ -1458,11 +1466,59 @@
         "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/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",
@@ -1521,6 +1577,15 @@
         "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",
@@ -1663,6 +1728,19 @@
         "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",
@@ -1799,6 +1877,17 @@
         "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",

package.json

@@ -11,7 +11,6 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "animejs": "^3.2.2",
     "ant-design-vue": "^4.2.1",
     "axios": "^1.7.2",
     "echarts": "^5.5.0",
@@ -19,7 +18,8 @@
     "pinia": "^2.1.7",
     "simplebar-vue": "^2.3.4",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue-typewriter-effect": "^1.0.1"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",

src/components/blogs/HomePage.vue

@@ -4,13 +4,75 @@
             <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="carouse">
             <a-carousel autoplay>
                 <div class="img"><img src="/src/assets/images/nav1.png" alt=""></div>
                 <div class="img"><img src="/src/assets/images/nav10.png" alt=""></div>
                 <div class="img"><img src="/src/assets/images/nav13.png" alt=""></div>
             </a-carousel>
-            
+        </div>
+        <a-button type="link" shape="circle" class="down_button" size="large" @click="downScroll">
+            <template #icon>
+                <DownCircleOutlined style="font-size: 35px;color: aliceblue;" />
+            </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>
     </Simplebar>
 </template>
@@ -19,7 +81,7 @@ import Simplebar from 'simplebar-vue';
 import 'simplebar-vue/dist/simplebar.min.css';
 import { h, ref } from 'vue';
 import { MenuProps } from 'ant-design-vue/es/menu';
-import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined } from '@ant-design/icons-vue';
+import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
 const current = ref<string[]>(['mail']);
 const show_menu = ref(false);
 const handleScroll = () => {
@@ -30,6 +92,17 @@ const handleScroll = () => {
         show_menu.value = scrollOffset > halfViewportHeight;
     }
 };
+const downScroll = () => {
+    const scrollbar = document.querySelector('.simplebar-content-wrapper');
+    if (scrollbar) {
+        setTimeout(() => {
+            const scrollOffset = scrollbar.scrollTop;
+            const halfViewportHeight = scrollbar.clientHeight / 6;
+            scrollOffset==halfViewportHeight
+            console.log(scrollOffset)
+        }, 1500)
+    }
+}
 const items = ref<MenuProps['items']>([
     {
         key: 'home',
@@ -120,12 +193,47 @@ const onSearch = (searchValue: string) => {
     color: #fff;
 }
 
-button {
+.down_button {
     position: absolute;
     bottom: 100px;
     left: 50%;
+    border-style: hidden;
+    transform: translateX(-50%);
+}
+
+.Typewriter__wrapper {
+    font-size: 100px;
+    font-family: 'Courier New', Courier, monospace
+}
+
+.salon-light-text {
+    position: absolute;
+    display: inline-block;
+    font-size: 100px;
+    font-family: 'Courier New', Courier, monospace;
+    background: linear-gradient(270deg, #f5f4f2, #d6cdc7, #4b4949);
+    background-size: 400% 400%;
+    -webkit-background-clip: text;
+    color: transparent;
+    background-clip: text;
+    animation: salon-light-animation 3s ease infinite;
+    top: 50%;
+    left: 50%;
     transform: translateX(-50%);
+    z-index: 999;
 }
 
+@keyframes salon-light-animation {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
 
+    100% {
+        background-position: 0% 50%;
+    }
+}
 </style>

src/components/blogs/ceshi.vue

@@ -1,32 +1,39 @@
 <template>
-  <div ref="animeRef" style="font-size: 36px;">你石头很大的朱</div>
+  <div class="salon-light-text">
+    <vue-typewriter-effect :strings="['SunFree']" :delay="150" :deleteSpeed="150" />
+  </div>
 </template>
 
-<script>
-import anime from 'animejs';
-
-export default {
-  mounted() {
-    const textWrapper = this.$refs.animeRef;
-    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
-
-    anime.timeline({loop: false})
-      .add({
-        targets: '.letter',
-        scale: [4,1],
-        opacity: [0,1],
-        translateZ: 0,
-        easing: "easeOutExpo",
-        duration: 950,
-        delay: (el, i) => 70*i
-      });
-  }
-}
+<script setup lang='ts'>
 </script>
 
 <style>
-.letter {
+.Typewriter__wrapper {
+  font-size: 100px;
+  font-family: 'Courier New', Courier, monospace
+}
+
+.salon-light-text {
   display: inline-block;
-  line-height: 1em;
+  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;
+}
+
+@keyframes salon-light-animation {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
 }
-</style>
+</style>

src/main.ts

@@ -4,9 +4,11 @@ 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)
+
 app.mount('#app')