vue.js项目实战运用篇之抖音视频APP-第十二节： 用户信息页面功能
Posted enjsky.G
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js项目实战运用篇之抖音视频APP-第十二节： 用户信息页面功能相关的知识，希望对你有一定的参考价值。
【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。
【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub
第十二节： 用户信息页面功能
页面分析
用户信息页面是底部导航我的跳转到用户信息，其中包含了个人资料编辑、个人信息展示、作品管理区能功能。
实现步骤：
1.页面布局及样式
2.资料编辑
功能实现
页面布局及样式
1.页面布局，代码如下：
<template>
<!-- 我的页面内容 -->
<div class="me">
<!-- 背景图内容 -->
<div class="me-top" :style="bgPic">
<!-- 右侧菜单栏 -->
<div class="menu-box">
<i class="iconfont icon-update"></i>
</div>
<div class="menu-box">
<div class="menu-icon"></div>
</div>
</div>
<!-- 信息内容 -->
<div class="me-wrap">
<!-- 个人信息 -->
<div class="me-content">
<div class="info">
<!-- 头像 -->
<img class="info_img" src="../../assets/images/avatar-1.jpg" alt />
<button class="btn" @click="editInfo">编辑资料</button>
<button class="btn">+朋友</button>
</div>
<!-- 标签内容 -->
<div class="des">
<span class="dy_name">enjsky</span>
<span class="span_dy">私密账号 · 抖音号：xxxxxx <i class="iconfont icon-erweima"></i></span>
</div>
<div class="user-tag">
<p>你还没有填写个人简介，点击添加...</p>
<span>23岁</span>
<span>深圳</span>
<span>+添加学校等标签</span>
</div>
<!-- 人气信息 -->
<div class="user-tag2">
<span>
<a>5200</a>获赞
</span>
<span>
<a>150</a>关注
</span>
<span>
<a>520W</a>+粉丝
</span>
</div>
<div class="me-ab">
<div class="me_ab_i"><i class="iconfont icon-gouwuche"></i></div>
<div class="me_ab_span">
<span class="span_title">抖音商城</span>
<span class="span_tab">发现超值好物</span>
</div>
</div>
</div>
<!-- 个人作品收藏信息 -->
<div class="me-tab">
<!-- 导航栏 -->
<div class="me-navbar">
<div class="item" @click="changeTab(0)" :class="indexTab === 0? 'active' :'' ">作品</div>
<div class="item" @click="changeTab(1)" :class="indexTab === 1? 'active' :'' ">私密</div>
<div class="item" @click="changeTab(2)" :class="indexTab === 2 ? 'active' :'' ">喜欢</div>
<div class="item" @click="changeTab(3)" :class="indexTab === 3 ? 'active' :'' ">相册</div>
</div>
<!-- 导航内容 -->
<div class="tab-wrap">
<div class="tab-con" v-show="indexTab === 0">
<div class="tab-img">
<img src="../../assets/images/1.jpg" />
<img src="../../assets/images/2.jpg" />
<img src="../../assets/images/3.jpg" />
</div>
</div>
<div class="tab-con" v-show="indexTab === 1">
<div class="tab-img">
<img src="../../assets/images/4.jpg" />
<img src="../../assets/images/5.jpg" />
<img src="../../assets/images/6.jpg" />
</div>
</div>
<div class="tab-con" v-show="indexTab === 2">
<div class="tab-img">
<img src="../../assets/images/7.jpg" />
<img src="../../assets/images/8.jpg" />
<img src="../../assets/images/9.jpg" />
</div>
</div>
<div class="tab-con" v-show="indexTab === 3">
<div class="tab-img">
<img src="../../assets/images/10.jpg" />
<img src="../../assets/images/11.jpg" />
<img src="../../assets/images/12.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
2.样式，代码如下：
<style lang="less" scoped>
.me
position: relative;
.me-top
height: 160px;
display: flex;
justify-content: flex-end;
padding: 20px;
.menu-box
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
margin: 0 4px;
.iconfont
font-size: 25px;
color: #ffffff;
.menu-icon
background: #ffffff;
border-top: 2px solid #ffffff;
background-clip: content-box;
border-bottom: 2px solid #ffffff;
width: 16px;
height: 2px;
padding: 5px 0;
.me-wrap
position: absolute;
top: 140px;
width: 100%;
background-color: #101821;
color: #ffffff;
.me-content
padding: 0 10px;
.info
display: flex;
align-items: flex-start;
justify-content: space-between;
.info_img
height: 100px;
width: 100px;
border-radius: 50%;
margin-right: 20px;
position: relative;
bottom: 25px;
button
height: 35px;
width: 120px;
margin: 15px 4px;
background-color: #393842;
border: none;
color: #ffffff;
border-radius: 5px;
button:nth-child(2)
.des
padding: 10px 0 0 0;
flex-direction: column;
display: flex;
border-bottom: 1px solid #686868;
.dy_name
font-size: 15px;
font-weight: bold;
.span_dy
padding: 10px 0 10px 0;
display: block;
color: #686868;
.iconfont
font-size: 10px;
color: #686868;
.user-tag p
font-size: 15px;
padding: 10px 0;
.user-tag span
font-size: 10px;
color: #686868;
margin-right: 5px;
background: rgba(0, 0, 0, 0.6);
padding: 5px 8px;
.user-tag2
padding: 20px 0;
color: #686868;
span
font-size: 14px;
margin-right: 15px;
a
margin-right: 5px;
.me-ab
display: flex;
.me_ab_i
width: 35px;
height: 35px;
background: #25252F;
border-radius: 2px;
margin: 2px 0;
.iconfont
font-size: 30px;
.me_ab_span
display: flex;
flex-direction: column;
justify-content: center;
margin: 2px 5px;
.span_title
font-size: 15px;
.span_tab
color: #686868;
margin: 5px 0;
.me-tab
height: 300px;
.me-navbar
display: flex;
padding: 0 20px;
justify-content: center;
align-items: center;
.item
padding: 10px 25px;
color: #686868;
font-size: 16px;
.active
border-bottom: 2px solid #0563a1;
color: #ffffff;
.tab-wrap
.tab-con img
width: 30%;
padding: 5px;
border-radius: 7px;
</style>
3.完成效果
资料编辑
1.页面布局及样式
首先在me文件夹中创建一个Edit页面，路径如下图：
代码如下：
<template>
<div class="edit">
<Header hasLeft="true" title="编辑资料"></Header>
<div class="edit-wrap">
<div class="avatar-box">
<div class="avatar">
<img src="../../assets/images/avatar-1.jpg" alt=""/>
<span class="iconfont icon-xiangji"></span>
<input type="file">
<p>点击更换头像</p>
</div>
</div>
<div class="edit-box">
<div class="edit-item">
<span class="label">名称</span>
<span>昵称<span class="iconfont icon-arrow-left"></span></span>
</div>
<div class="edit-item">
<span class="label">抖音号</span>
<span>63807476<span class="iconfont icon-arrow-left"></span></span>
</div>
<div class="edit-item">
<span class="label">抖音号</span>
<span>填写个人简介更容易获取别人关注哦<span class="iconfont icon-arrow-left"></span></span>
</div>
<div class="edit-item">
<span class="label">生日</span>
<span>点击设置<span class="iconfont icon-arrow-left"></span></span>
</div>
<div class="edit-item">
<span class="label">地区</span>
<span>中国.辽宁.沈阳<span class="iconfont icon-arrow-left"></span></span>
</div>
<div class="edit-item">
<span class="label">学校</span>
<span>点击设置<span class="iconfont icon-arrow-left"></span></span>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from '../../common/components/header/Header.vue';
export default
name: 'Edit',
components:
Header,
,
;
</script>
<style lang="less" scoped>
.edit
background-color: #101821;
height: 670px;
.edit-wrap
padding: 0 10px;
box-sizing: border-box;
.avatar-box
color: #686868;
text-align: center;
padding: 20px;
.avatar
position: relative;
.iconfont
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 26px;
color: #686868;
input
position: absolute;
left: 50%;
top: 50%;
width: 50%;
transform: translate(-50%, -50%);
opacity: 0;
img
height: 100px;
width: 100px;
border-radius: 50%;
margin-bottom: 16px;
opacity: .5;
.edit-box
border-top: 1px solid #292831;
color: #686868;
.edit-item
display: flex;
justify-content: space-between;
line-height: 60px;
.label
color: #ffffff;
.icon-arrow-left
margin-left: 10px;
vue.js项目实战运用篇之抖音视频APP-第十节： 评论列表功能
vue.js项目实战运用篇之抖音视频APP-第十节： 评论列表功能
vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能