gitea
/
blog_front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add news

master
panda 9 months ago
parent
d70bb3863a
commit
ded8edfe92
6 changed files with 243 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 103
      package-lock.json
  2. 4
      package.json
  3. BIN
      src/assets/front/Testimonia-3zp8X.ttf
  4. 114
      src/components/blogs/HomePage.vue
  5. 51
      src/components/blogs/ceshi.vue
  6. 4
      src/main.ts

103
package-lock.json
View File

@ -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",

4
package.json
View File

@ -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",

BIN
src/assets/front/Testimonia-3zp8X.ttf
View File

114
src/components/blogs/HomePage.vue
View File

@ -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>

51
src/components/blogs/ceshi.vue
View File

@ -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';
<script setup lang='ts'>
</script>
export default {
mounted() {
const textWrapper = this.$refs.animeRef;
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
<style>
.Typewriter__wrapper {
font-size: 100px;
font-family: 'Courier New', Courier, monospace
}
anime.timeline({loop: false})
.add({
targets: '.letter',
scale: [4,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 950,
delay: (el, i) => 70*i
});
.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;
}
@keyframes salon-light-animation {
0% {
background-position: 0% 50%;
}
</script>
<style>
.letter {
display: inline-block;
line-height: 1em;
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>

4
src/main.ts
View File

@ -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')
Write Preview
Loading…
Cancel
Save