当前位置： 首页 > news >正文

个人博客静态样式部署

news 2024/11/15 9:30:07

首页部分

views/layout/layoutwave.vue

<script setup>
import router from '@/router';
import { ref, onMounted, onUnmounted } from 'vue'
import '@/assets/img/icons/font_p81061dps7l/iconfont.css'const canvas = ref(null)
const canvasFa = ref(null)
const fish = ref(null)
const { innerWidth, innerHeight } = window
// 小鱼是否被点击
const blue = '#41346A'// let isShow = 'true' 没有正确创建响应式变量
const isShow = ref(true)
// 六个盒子的
const boxShow = ref(false) 
let singleRemove = false// 绘制波浪图
onMounted(() => {// 绘制曲线if (canvas.value) {// 在初次进入页面的时候要有一个初始的曲线canvasSize()addListen()}
})onUnmounted(() => {removeListen()
})// 设置画布大小
function canvasSize() {const canvasWidth = canvasFa.value.clientWidthconst canvasHeight = canvasFa.value.clientHeightcanvas.value.width = canvasWidthcanvas.value.height = canvasHeightlet xOffset = 0let speed = 0.1requestAnimationFrame(() => draw(canvasWidth, canvasHeight, xOffset, speed))
}// 每帧
function draw(canvasWidth, canvasHeight, xOffset, speed) {const ctx = canvas.value.getContext('2d')ctx.strokeStyle = blue// 清除上一帧的图形ctx.clearRect(0, 0, canvasWidth, canvasHeight)// 图形重绘drawSin(ctx, xOffset, canvasWidth, canvasHeight)// 递归调用 -> 等到下一帧进行重绘xOffset += speedrequestAnimationFrame(() => draw(canvasWidth, canvasHeight, xOffset, speed))
}// 正弦
function drawSin(ctx, xOffset, canvasWidth, canvasHeight) {const points = []const startX = 0const waveHeight = 80const cycles = 4 // 四个周期const waveWidth = (2 * Math.PI) / (canvasWidth / cycles) // 计算每个周期的宽度ctx.beginPath()for (let x = startX; x < startX + canvasWidth; x += 20 / canvasWidth) {let y = waveHeight * Math.sin(waveWidth * x + xOffset)y += canvasHeight / 6points.push([x, y])ctx.lineTo(x, y)}// 封闭路径ctx.lineTo(canvasWidth, canvasHeight)ctx.lineTo(startX, canvasHeight)ctx.closePath()ctx.fillStyle = bluectx.fill()ctx.stroke()
}// 获取卷去的高度
function handleScroll() {const scrollTop = document.documentElement.scrollTop// console.log(profile.value.offsetHeight , canvasFa.value.offsetHeight); 这里使用offsetHeight可以但height不可以// 以及当我改变页面大小，这回重新调用handleScroll函数，打印对应页面大小的元素的宽高if (scrollTop >= canvasFa.value.clientTop + canvasFa.value.offsetHeight) {isShow.value = falseconsole.log(isShow);// 这里我如果想要false之后不再侦听scroll怎么办removeListen()}
}// 添加事件监听函数
function addListen() {if (!singleRemove) {window.addEventListener('resize', canvasSize)// 卷的高度window.addEventListener('scroll', handleScroll)singleRemove = true}
}// 移除事件函数
function removeListen() {if (singleRemove) {window.removeEventListener('resize', canvasSize)window.removeEventListener('scroll', handleScroll)singleRemove = false}
}// 页面下滑按钮小鱼
function fishDown() {fish.value.style.transform = 'rotateX(180deg)'console.log(innerHeight, innerWidth);window.scrollTo(0, document.documentElement.scrollHeight)// window.scrollTo({top: document.documentElement.scrollHeight, behavior: 'smooth'})// 到达底部,盒子动画boxShow.value = true
}
</script><template><!-- 波浪 --><div class="head-wavefish"><div ref="canvasFa" class="header" v-if="isShow"><canvas ref="canvas"></canvas></div><div class="tip" v-if="isShow"><B>点 击 翻 转 小 鱼&nbsp;</B><i class="iconfont icon-yewu_yu" style="font-size: 2.8333rem;" @click="fishDown" ref="fish"></i></div></div><div class="intro"><Transition name="introBox3"><div class="introEvery3" ref="introEvery33" v-if="boxShow" style="background-color: #BFACDA;color: #41346A;" @click="router.push('/project')"><span>项 目</span></div></Transition><Transition name="introBox2"><div class="introEvery2" ref="introEvery22" v-if="boxShow"  style="background-color: #9179B7;"  @click="router.push('/article')"><span>文 章</span></div></Transition><Transition name="introBox1"><div class="introEvery1" ref="introEvery11" v-if="boxShow">3</div></Transition><Transition name="introBox1"><div class="introEvery1" ref="introEvery1" v-if="boxShow">4</div></Transition><Transition name="introBox2"><div class="introEvery2" ref="introEvery2" v-if="boxShow" style="background-color: #9179B7;" @click="router.push('/pigeonhole')"><span>归 档</span></div></Transition><Transition name="introBox3"><div class="introEvery3" ref="introEvery3" v-if="boxShow" style="background-color: #BFACDA;color: #41346A;" @click="router.push('/friends')"><span>友 链</span></div></Transition></div>
</template> <style scoped>.header {position: relative;width: 100%;height: 30.6667rem;/* background-color: aqua; */transform: rotateZ(180deg);
}.tip{display: flex;position: absolute;width: 20.6667rem;top: 18.3333rem;left: 50%;font-size: 1.9333rem;color: rgba(254, 254, 254, 0.573);transform: translateX(-50%);transition:all 0.4s;border-radius: 20px;align-items: center;justify-content: center;.icon-yewu_yu{display: inline-block;transition:all 0.4s;}&:hover{color: rgba(255, 255, 255, 0.826);box-shadow: .3333rem .2333rem .7667rem .1033rem white;}
}/* 上滑主体部分 */
.intro {display: flex;height: 52.6667rem;justify-content: space-between;align-items: flex-end;[class^="introEvery"] {width: 12.6667rem;height: 8.6667rem;background-color: #41346A;margin-right: .08rem;border-radius: 1.1333rem;display: flex;justify-content: center;align-items: center;/* opacity: 0; */font-size: 1.2667rem;color: rgb(215,206,249);&:hover{cursor: pointer;&:nth-child(-n+3){box-shadow: -.6333rem .8333rem .7667rem .1033rem rgba(255, 255, 255, 0.571);}&:nth-last-child(-n+3){box-shadow: .6333rem .8333rem .7667rem .1033rem rgba(255, 255, 255, 0.571);}/* border: .1333rem solid #8b41e6e0; */}}.introEvery1{margin: 0 .8667rem;transform: translateY(-26.6667rem) scale(1);}.introEvery2{transform: translateY(-14.6667rem) scale(1);}.introEvery3{transform: translateY(-2.6667rem) scale(1);margin: 0 1.333rem;}
}@keyframes up {0%{transform: translateY(0) scale(0.5);opacity: 0;}100%{transform: translateY(-26.6667rem) scale(1);opacity: 1;}
}@keyframes up2 {0%{transform: translateY(0) scale(0.5);opacity: 0;}100%{transform: translateY(-14.6667rem) scale(1);opacity: 1;}
}@keyframes up3 {0%{transform: translateY(0) scale(0.5);opacity: 0;}100%{transform: translateY(-2.6667rem) scale(1);opacity: 1;}
}.introBox1-enter-active{animation: up 1.7s;
}.introBox2-enter-active{animation: up2 1.7s;
}.introBox3-enter-active{animation: up3 1.6s;
}
</style>

文章页面

<script setup>
import { ref} from 'vue'
// import axios from 'axios'
import baseNavigation from '@/components/baseNavigation.vue';
import '@/assets/img/icons/font_a32wm011gk/iconfont.css'
// document.querySelector('html').setAttribute('style', 'height: 100%;')
document.querySelector('html').style.height = '100%'
document.querySelector('body').style.height = '100%'
document.querySelector('.profile').setAttribute('style','background-color: #171717;')
document.getElementById('app').setAttribute('style', 'height:100%;display: flex;flex-direction: column;')const contentTypeShow = ref(false)
</script><template><baseNavigation><template #type-list><h2 class="type-title">栏目</h2><ul class="type-all"><!-- 这里是否可以包装成数据动态渲染呢 --><li @click="contentTypeShow = !contentTypeShow">前端</li><li @click="contentTypeShow = !contentTypeShow">请期待</li><li @click="contentTypeShow = !contentTypeShow">请期待</li><li @click="contentTypeShow = !contentTypeShow">请期待</li><li @click="contentTypeShow = !contentTypeShow">请期待</li><li @click="contentTypeShow = !contentTypeShow">请期待</li><li @click="contentTypeShow = !contentTypeShow">请期待</li></ul></template><template #type-every><div class="type-every" v-show="contentTypeShow"><ul class="type-every-content"><!-- 这里是佛瑞根据数据的不同渲染出不同的效果 --><!-- 超过多少个出现下滑 --><li>vue</li><li>vue</li><li>vue</li><li>vue</li><li>vue</li><li>vue</li><li>vue</li><li>vue</li><li>vue</li></ul><div class="moveDown"><i class="iconfont icon-xialia-jiantou"></i></div></div></template><template #router-content><div class="article-content"><div class="content1 contentBoxShow"><div class="box-wape"><span class="postTime" style="font-size: .6667rem;color: rgba(215, 206, 249, 0.589);">2024</span><h3 style="margin: .1rem 0;">标题</h3><span class="briefContent">哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span></div></div><div class="content1 contentBoxShow"><div class="box-wape"><span class="postTime" style="font-size: .6667rem;color: rgba(215, 206, 249, 0.589);">2024</span><h3 style="margin: .1rem 0;">标题</h3><span class="briefContent">哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span></div></div><div class="content1 contentBoxShow"><div class="box-wape"><span class="postTime" style="font-size: .6667rem;color: rgba(215, 206, 249, 0.589);">2024</span><h3 style="margin: .1rem 0;">标题</h3><span class="briefContent">哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span></div></div></div></template></baseNavigation>
</template><style scoped lang="less">
.type-title{flex: 1;color: rgb(220, 214, 240);/* margin-top: 20px; */
}
.type-all{flex: 7;display: flex;flex-direction: column;    li{cursor: pointer;flex: 1;}
}.type-every{flex: 0.8;height: 100%;background: #171717;display: flex;flex-direction: column;/* align-items: space; */justify-content: space-between;.type-every-content{flex-grow: 1;display: flex;/* justify-content: center; */flex-direction: column;justify-content: space-around;align-items: center; }.moveDown{display: flex;justify-content: center;padding-bottom: .1067rem;.iconfont{font-size: 1.2rem;&:hover{color: white;}}}
}
.article-content{height: 100%;flex: 6;background: linear-gradient(to right, #3d3264 5%, #bf9bd954);border-top-left-radius: 150px;display: flex; flex-wrap: wrap; overflow: auto;[class^="content"]{width: 50%;height: 11rem;display: flex;align-items: center;.box-wape{position: relative;z-index: 9;width: 100%;height: 8.3333rem;margin-right:1.5333rem;background: linear-gradient(to top left, #ffffff4d,#bf9bd909, #bf9bd900);border-bottom-right-radius: 3.6667rem;font-size: .75rem;/* padding-left: 1.2333rem; */padding: .4333rem 2.2333rem 0;.briefContent{color: rgba(215, 206, 249, 0.589);overflow: hidden;text-overflow: ellipsis;/* 以下代码有兼容性问题 *//*弹性伸缩盒子模型显示*/display: -webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 4;/*设置或检索伸缩盒对象的子元索的排列方式*/-webkit-box-orient: vertical;}}}/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/&::-webkit-scrollbar{width: 16px;height: 10px;/* background: linear-gradient(to top, #3d3264 5%, #bf9bd954); */background-color: transparent;}/*定义滑块 内阴影+圆角*/&::-webkit-scrollbar-thumb{width: 10px;background-color: #171717;}
}</style>

友链页面

<script setup>
import baseNavigation from '@/components/baseNavigation.vue';
import friendsNavigation from './components/friendsNavigation.vue';
</script><template><baseNavigation><template #type-list></template><template #router-content><div class="friends-content"><friendsNavigation><template #title-name>X U P T</template></friendsNavigation><friendsNavigation><template #title-name>Internet</template></friendsNavigation></div></template></baseNavigation>
</template><style scoped lang="less">
.friends-content{height: 100%;background: linear-gradient(to right, #3d3264 5%, #bf9bd954);border-top-left-radius: 150px;overflow: auto;&::-webkit-scrollbar{width: 16px;height: 10px;background-color: transparent;}
}
</style>

归档页面

<script setup>
import baseNavigation from '@/components/baseNavigation.vue';
import yearPigeonhole from './components/yearPigeonhole.vue';
</script><template><baseNavigation><template #router-content><div class="pigeonhole-content"><yearPigeonhole><template #pigeYear>2024</template></yearPigeonhole><yearPigeonhole><template #pigeYear>2023</template></yearPigeonhole><yearPigeonhole><template #pigeYear>2022</template></yearPigeonhole></div></template></baseNavigation>
</template><style scoped>
.pigeonhole-content{height: 100%;background: linear-gradient(to right, #3d3264 5%, #bf9bd954);border-top-left-radius: 150px;overflow: auto;/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/&::-webkit-scrollbar{width: 16px;height: 10px;/* background: linear-gradient(to top, #3d3264 5%, #bf9bd954); */background-color: transparent;}/*定义滑块 内阴影+圆角*/&::-webkit-scrollbar-thumb{width: 10px;/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */background-color: #171717;}
}
</style>

博客上线链接

目前路由配置有问题刚进去不是首页，点击一下其他功能才正常但到不了首页

 三元Blog


http://www.mrgr.cn/news/69940.html

相关文章：

  • leetcode268 丢失的数字
  • 蓝桥杯PythonB组扫盲
  • Chrome使用IE内核
  • Vue 学习随笔系列十四 -- JavaScript巧妙用法
  • 创新体验触手可及 紫光展锐携手影目科技推出AI眼镜开放平台
  • Tailwind 安装使用
  • IMX93适配4G网络
  • MATLAB课程：AI工具辅助编程——MATLAB+LLMs
  • redis开启远程登录
  • Jenkins安装自定义插件
  • 二叉树遍历/算法数据结构
  • 【系统架构设计师】2024年下半年真题论文: 论软件维护及其应用（包括参考素材）
  • 使用 MMDetection 实现 Pascal VOC 数据集的目标检测项目练习（五） pycharm
  • 渺小与伟大：人类的宇宙奇特之旅
  • C语言：文件操作2（又一万字？）
  • C++ : STL容器（适配器）之stack、queue剖析
  • LocalDate和LocalDateTime类
  • 「Mac玩转仓颉内测版3」入门篇3 - Cangjie的基本语法与结构
  • Jquery向指定HTML标签追加新元素教程
  • 005.精读《B-Tree vs LSM-Tree》
  • 浙江大学高等数学研究所已变样
  • 网站架构知识之Ansible模块（day021）
  • SpringBoot中的两种字段自动填充方式
  • HTTP —— OSI七层模型
  • 在 Mac 上使用 Docker 安装宝塔并部署 LNMP 环境
  • SCAU 华南农业大学 高级程序设计语言（C语言） 教材习题题解