持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
前言
又到了检验今日成果的时候了，今天可是写了不少页面，后面咱们很快就会更新有关于后端的内容了。 咱们的每日前端其实就是咱们WhiteHole的预览相关。
那么我们今天做的事情主要就是这样的：
首先是个人的主页展示，之后是咱们的一个萌娘。
这个的话我这边展示萌娘是很简陋的，后面等咱们有机会聊天机器人做好之后的话，那么咱们的这个就将具备交互功能了。现在只能跟着鼠标转动方向。
主页
我们先来看看这个主页怎么做的，首先的话是咱们的大头像，之后的话是咱们的一些文章，提问之类的显示。这个咱们做的多了，我就举一两个例子就好了。
个人主页
首先里面还有背景，但是这个背景的话，咱们昨天已经说了是咱做的，这里就不复述了。
<template>
<div style="width: 90%;margin: 0 auto">
<vue-particles
class="login-background"
color="#97D0F2"
:particleOpacity="0.7"
:particlesNumber="200"
shapeType="circle"
:particleSize="4"
linesColor="#97D0F2"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.8"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push">
</vue-particles>
<el-container style="text-align: center;width: 80%;margin: 0 auto" >
<div style="z-index: 1" >
<div class="show" style="width: 900px">
<div >
<div style="width:200px;height: 100%;border-radius: 100px;margin: 0 auto">
<img
style="width: 150px;height: 150px;border-radius: 100px;"
src="/static/temporary/headpic.jpg"
class="image"
>
</div>
<div>
<br>
<p>
<el-button @click="focusOn" v-if="focusOnFlag===false" icon="el-icon-plus" type="primary" plain >
<span>关注</span>
</el-button>
<el-button @click="focusOn" v-else icon="el-icon-check" type="primary" plain >
<span>已关注</span>
</el-button>
</p>
</div>
</div>
<div>
<p style="font-size: larger;font-family: 楷体;text-align: center">简介</p>
<p style="font-size: smaller;width: 65%;margin: 0 auto">
凭寄狂夫书一纸，
篇什纵横文案少。
世人见我轻鸿毛。
黄花冷落不成艳，
尔亦今年赐服章。
</p>
<br><br>
</div>
</div>
<div style="width: 30%;margin: 0 auto">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/userinfo'}">文章</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/userinfo/userquizList'}">提问</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/userinfo/useransList'}">回答</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/userinfo/userunityList'}">TA的社区</el-breadcrumb-item>
<el-breadcrumb-item ></el-breadcrumb-item>
</el-breadcrumb>
</div>
<div style="width: 100%;margin: 0 auto">
<router-view></router-view>
</div>
</div>
</el-container>
</div>
</template>
<script>
export default {
name: "userinfo",
data(){
return{
focusOnFlag:false,
}
},
methods:{
focusOn(){
this.focusOnFlag=!this.focusOnFlag;
if(this.focusOnFlag){
alert("关注成功")
}else {
alert("取关成功")
}
},
},
}
</script>
<style scoped>
.login-background {
width: 80%;
margin: 0 auto;
height: 1200px; /**宽高100%是为了图片铺满屏幕 */
z-index: 0;
position: absolute;
}
.show{
margin: 20px auto;
width: 100%;
border: 0px solid #81badc;
transition: all 0.9s;
border-radius: 10px;
}
.show:hover{
box-shadow: 0px 10px 30px rgb(12, 132, 224);
margin-top: 10px;
}
</style>
列表页面
之后是咱们的列表页面，在这里的话是这样的：
{
path: "/userinfo",
name: userinfo,
component: userinfo,
children:[
{
path: "",
name: "userblogList",
component: userblogList,
},
{
path: "useransList",
name: "useransList",
component: useransList,
},
{
path: "userquizList",
name: "userquizList",
component: userquizList,
},
{
path: "userunityList",
name: "userunityList",
component: userunityList,
}
]
},
他们的显示都是一样的，所以我这里就不复述了。 我们拿其中一个页面的编写拿过来就好了，这里的话也是我没有单独封装成一个组件，因为后面还有很多个性化之类的修改。当然也方便以后去copy页面，万一封装成组件然后忘记了里面的参数又是麻烦事。
<template>
<div style="background-color: rgba(239,250,246,0.53)">
<br>
<br>
<div style="width: 100%;margin-left: 1%" class="main">
<el-card shadow="hover" v-for="(message,index) in Messages" :key="index">
<div style="height:100px">
<div style="width:12%;height: 100%;border-radius: 100px;display:inline-block;">
<img
style="width:100%;height: 100%;border-radius: 100px"
src="/static/temporary/headpic.jpg"
class="image"
>
</div>
<div style="display:inline-block;margin-left: 5%;width: 60%">
<p class="message" style="font-weight:bold">
<router-link class="alink" to="/blogshow">
{{message.name}}
</router-link>
</p>
<p style="font-weight: lighter" class="message"
>
{{message.info}}
</p>
<p class="message">
阅读：
<i class="el-icon-view"></i>
{{message.number}}
收藏：
<i class="el-icon-star-off"></i>
{{message.favorite}}
<i>fork:{{message.fork}}</i>
</p>
</div>
<div style="width:18%;height: 100%;
display:inline-block;
"
>
<span style="text-align: center">{{message.data}}</span>
</div>
</div>
<br>
</el-card>
</div>
<br>
<div class="footer" style="margin: 0 auto;width: 100%;">
<div class="block" >
<el-pagination
background
layout="total, prev, pager, next, jumper"
:total=total>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: "userblogList",
data(){
return{
total: 999,
Messages:[
{"info":"Spring 是一个轻量级的开发框架",
"name":"Spring 5 核心原理解析",
"number": 999,"data":"2022-3-27",favorite: 999,
"fork": 2
},
{"info":"Spring 是一个轻量级的开发框架",
"name":"Spring 5 核心原理解析",
"number": 999,"data":"2022-3-27",favorite: 999,
"fork": 2
},
{"info":"Spring 是一个轻量级的开发框架",
"name":"Spring 5 核心原理解析",
"number": 999,"data":"2022-3-27",favorite: 999,
"fork": 2
},
{"info":"Spring 是一个轻量级的开发框架",
"name":"Spring 5 核心原理解析",
"number": 999,"data":"2022-3-27",favorite: 999,
"fork": 22
},
]
}
},
}
</script>
<style scoped>
.message{
width: 25em;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.alink{
text-decoration: none;
color: #333333;
}
</style>
Haru
这个是使用live2d做的，也是copy大哥的。资源获取如下： 链接：pan.baidu.com/s/1MPD5aVjY… 提取码：6666
之后下载解压，到这个目录
配置
之后的话咱们配置一下就好了。
在index.html下输入这个
<script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>
之后再App.vue下面输入这句话：
mounted() {
setTimeout(() => {
window.L2Dwidget.init({
pluginRootPath: '../static/live2dw/',
pluginJsPath: 'lib/',
pluginModelPath: 'live2d-widget-model-haru_1/assets/', //中间这个haru_1就是你的老婆,想换个老婆,换这个就可以了
tagMode: false,
debug: false,
model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_1/assets/haru01.model.json' },
display: { position: 'left', width: 220, height: 450 }, //调整大小,和位置
mobile: { show: true }, //要不要盯着你的鼠标看
log: false,
})
}, 1)
}
之后咱们是在app这个下的，所以的话基本上所有的页面都有。如果想要在单独的页面搞的话，把这个copy到单独的页面就可以了。
