九、用户页面
该模块作为学生作业,不讲解,仅供源码参考。
创建组件并配置路由
1、创建 views/user/index.vue
<template>
<div class="user-container">用户页面</div>
</template>
<script>
export default {
name: 'UserPage',
components: {
},
props: {
},
data () {
return {
}
},
computed: {
},
watch: {
},
created () {
},
mounted () {
},
methods: {
}
}
</script>
<style scoped></style>
2、配置到根路由
{
path: '/user/:userId',
name: 'user',
component: () => import('@/views/user')
}
最后访问 /user/用户ID
测试。
页面布局
<template>
<div class="user-container">
<!-- 导航栏 -->
<van-nav-bar
class="page-nav-bar"
left-arrow
title="用户名"
@click-left="$router.back()"
></van-nav-bar>
<!-- /导航栏 -->
<div class="user-info">
<div class="base-info">
<van-image
class="avatar"
round
fit="cover"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<div class="right-area">
<div class="stats-wrap">
<div class="stats-item">
<span class="count">66</span>
<span class="text">发布</span>
</div>
<div class="stats-item">
<span class="count">88</span>
<span class="text">关注</span>
</div>
<div class="stats-item">
<span class="count">28</span>
<span class="text">粉丝</span>
</div>
<div class="stats-item">
<span class="count">160</span>
<span class="text">获赞</span>
</div>
</div>
<van-button class="follow-btn">关注</van-button>
</div>
</div>
<div class="label-info">
<div class="bio-wrap">
<span class="label">简介:</span>
<span class="text">这是用户简介</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UserIndex',
components: {
},
props: {
userId: {
type: [Number, String, Object],
required: true
}
},
data () {
return {
}
},
computed: {
},
watch: {
},
created () {
},
mounted () {
},
methods: {
}
}
</script>
<style scoped lang="less">
.user-container {
.user-info {
background-color: #fff;
padding: 25px 32px;
.base-info {
display: flex;
margin-bottom: 25px;
.avatar {
width: 155px;
height: 155px;
margin-right: 62px;
}
}
.label-info {
font-size: 25px;
.bio-wrap {
.label {
color: #646263;
}
.text {
color: #212121;
}
}
}
}
.right-area {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.stats-wrap {
display: flex;
justify-content: space-between;
.stats-item {
display: flex;
flex-direction: column