1、朋友界面功能与首页界面功能几乎一样，故只换了朋友界面的顶部导航栏。操作比较简单，代码略。效果图如下。
2、另补充写了几个朋友界面的评论等界面。
实现与之前的有较多相似性，不做赘述。
<template>
<div class="me">
<div class="me-middle">
<div class="me-content">->
<div class="me-tab">
<div class="me-navbar">
<div class="back">
<img src="@/static/img/back.jpg" alt="" @click="toBack()">
<!-- <span></span> -->
</div>
<div class="item" @click="changeTab(0)" :class="indexTab==0?'active':''">作品</div>
<div class="item" @click="changeTab(1)" :class="indexTab==1?'active':''">动态</div>
</div>
<!-- 下面的视频 -->
<div class="tabwrap">
<!-- 第一tab按下跳转 -->
<div class="tabcontent" v-show="indexTab===0">
<!-- 第一行的三张图 -->
<div class="tab-img">
<!-- 第1行 -->
<input class="sousuo" type="text" placeholder="请搜索用户备注或名字">
<!-- 第2行 -->
<div class="sousuo-text">
<span>我的朋友（已关注）</span>
<span class="name">设置备注名</span>
</div>
<!-- 第3行 -->
<div class="msg-list">
<!-- 第一行 -->
<img src='@/static/img/xxx.jpeg'>
<!-- 右侧文字 -->
<div class="user-des">
<!-- 右侧上半 -->
<div class="top">
<span>小可爱</span>
</div>
</div>
<!-- 右侧图标 -->
<div class="icon">
<span class="iconfont icon-pinglun"></span>
</div>
</div>
</div>
</div>
<!-- 第二tab按下跳转 -->
<div class="tabcontent" v-show="indexTab===1">
<!-- 第一行的三张图 -->
<div class="tab-img">
<img src="../../static/img/3.jpg" alt="">
<img src="../../static/img/4.jpg" alt="">
<img src="../../static/img/5.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
indexTab:0
}
},
methods:{
changeTab(index){
this.indexTab = index;
},
toBack(){
this.$router.push('/follow')
}
},
}
</script>
<style>
.me{
position: relative;
background-color: black;
height: 500px;
}
.info{
/* 弹性盒子，居中对齐，项目位于各行之间留有空白的容器内。*/
display: flex;
align-items: center;
justify-content: space-between;
/* padding-bottom:10px; */
}
.info img{
height: 70px;
width: 70px;
border-radius: 50%;
margin-left: 10px;
}
.info button{
height: 40px;
padding:0 14px;
background-color: #393842;
border:none;
color:#fff;
font-size: 12px;
}
.nameandid{
padding:0 0;
}
.nameandid .dyid{
color: rgba(204,204,204,0.7);
font-size: 12px;
}
/* 昵称 */
.nameandid h2{
font-size: 20px;
font-weight: bold;
color: #cccccc;
}
/* 介绍 */
.nameandid p{
/* line-height: 24px; */
font-size: 12px;
color: #cccccc;
}
.user-tag span{
font-size: 14px;
color: #cccccc;
margin-left: 20px;
/* padding-right: 20px; */
/* padding-bottom: 10px; */
background-color: rgba(0,0,0,.1);
padding:0px 0px 8px 0px;
/* align-content: center; */
/* justify-content: center; */
}
/* 视频的2个导航栏 */
.me-tab{
padding-top: 10px;
padding-bottom: 10px;
/* padding-right: 20px; */
/* height: 300px; */
color: #cccccc;
}
.me-navbar{
display: flex;
padding:0 20px;
justify-content: space-between;
align-items: center;
margin-right: 40px;
}
.me-navbar item{
padding:10px 25px;
color: #cccccc;
}
/* 边框点击效果 */
.me-navbar .active{
border-bottom: 2px #fff solid;
color: #fff;
}
/* 控制一下图片的大小 */
.tab-img img{
width:32%;
}
.fans{
background-color: black;
height: 1000px;
color: #cccccc;
}
.avatar img{
height:100px;
width:100px;
border-radius: 50%;
margin-bottom:16px;
opacity: .5;
}
.huiguan{
width: 50px;
height: 25px;
border-radius: 0;
background-color:#f15b6c;
text-align: center;
padding-top: 8px;
border-radius: 10%;
margin-right: 30px;
}
.middle{
margin-left: 10px;
font-size: 16px;
/* background-color: chartreuse; */
}
.tuijian{
font-size: 14px;
color: #666;
}
.myguanzhu{
width: 50px;
height: 25px;
border-radius: 0;
background-color:#f15b6c;
text-align: center;
padding-top: 8px;
border-radius: 10%;
margin-right: 30px;
}
.fans .msg-list img{
width:40px;
height:40px;
border-radius: 50%;
margin-left: 10px;
}
.tabwrap .sousuo{
width: 185px;
margin-left:20px;
margin-top: 10px;
/* padding: 20px; */
color:rgba(0,0,0,0.3);;
/* background-color: rgba(0,0,0,0.3); */
}
.tabwrap .sousuo-text{
font-size: 12px;
margin-left: 20px;
padding-top: 15px;
padding-bottom: 5px;
color:rgba(204,204,204,0.7);
}
.tabwrap .sousuo-text .name{
/* margin-right: 0px; */
padding-left: 40px;
/* color: #f15b6c; */
}
.msg-warp{
padding:0 20px;
color: #ffffff;
background-color: #101821;
/* height:-webkit-fill-available; */
height:1000px;
}
.msg-list{
display: flex;
padding:10px 0;
/* justify-content: space-between; */
}
.gonext{
width: 20px;
height: 20px;
}
.msg-list img{
width:40px;
height:40px;
margin-left: 10px;
border-radius: 50%;
/* margin-left: 10px; */
}
.user-des{
flex: 1;
height:60px;
/* padding-left: 10px; */
}
.user-des .top{
font-size: 14px;
margin-left: 15px;
display: flex;
padding-top: 15px
;
/* justify-content: space-between; */
/* line-height: 25px; */
}
.top-msg{
color: #666;
align-items: center;
/* font-size: 10px; */
}
.no-see{
width:8px;
height: 8px;
border-radius: 50%;
background-color:#face15 ;
}
.gonext{
width: 30px;
height: 5px;
}
.recommendtext{
font-size: 14px;
color: #cccccc;
}
.middle .age{
background-color: #cccccc;
font-size: 10px;
margin-left: 10px;
/* padding-left:15px; */
}
.middle .place{
background-color: #cccccc;
font-size: 10px;
margin-left: 3px;
/* padding-left:15px; */
}
.msg-list .no{
font-size: 30px;
width: 10px;
height: 3px;
border-radius: 15%;
/* margin-left: 10px; */
margin-top: -5px;
margin-right: 20px;
/* color:rgba(255,255,255,0.3); */
}
.icon{
font-size: 30px;
margin-right: 20px;
}
</style>
