hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-07 18:06:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

关注页面

Browse Source
This commit is contained in:
zhaofang
2022-11-01 17:34:33 +08:00
parent 6c3e762207
commit f5e5edb9d9
2 changed files with 148 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
pages/my/follow.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<view class="follow-info-page">
<view class="ub-content">
<view>
<view class="ub-tab" @click="ubtab(1)" :class="tab == 1 ? 'ub-tabactive' : ' ' ">关注我的<text></text></view>
<view class="ub-tab" @click="ubtab(2)" :class="tab == 2 ? 'ub-tabactive' : ' ' ">我关注的<text></text></view>
</view>
</view>
<view class="follow-list-box" v-show="tab == 1">
<view class="follow-info-list" v-for="item in 5">
<view class="img-info">
<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
</view>
<view class="name-and-sign">
<view class="name-text">李沐沐</view>
<view class="name-sign">相信美好的事情即将发生</view>
</view>
<view class="isFollow-btn">
<!-- <view class="on-follow">关注</view> -->
<view class="is-follow">已关注</view>
</view>
</view>
</view>
<view class="follow-list-box" v-show="tab == 2">
<view class="follow-info-list" v-for="item in 5">
<view class="img-info">
<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
</view>
<view class="name-and-sign">
<view class="name-text">李沐沐</view>
<view class="name-sign">相信美好的事情即将发生</view>
</view>
<view class="isFollow-btn">
<view class="on-follow">关注</view>
<!-- <view class="is-follow">已关注</view> -->
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tab:1,
}
},
methods: {
ubtab(num){
this.tab = num
}
}
}
</script>
<style lang="scss" scoped>
.follow-info-page{
background-color: #fff;
.ub-content{
// background-color: #fff;
margin: 0 140upx;
border-radius: 12upx;
padding: 45upx 30upx;
.ub-tab{
font-size: 32upx;
font-weight: 500;
color: #333333;
float: left;
font-size: 32upx;
margin: 0 36upx;
position: relative;
text{
width: 84upx;
height: 8upx;
background: linear-gradient(180deg, #007DFF 0%, #007DFF 100%);
border-radius: 26upx;
position: absolute;
left: 15%;
top: 120%;
display: none;
margin-top: 10upx;
}
}
.ub-tabactive{
font-weight: 500;
color: #333333;
text{
display: inline-block;
}
}
}
.follow-list-box{
margin-top: 26upx;
padding: 0 36upx 0 40upx;
}
.follow-info-list{
padding: 40upx 0 32upx 0;
display: flex;
border-bottom:2upx solid rgba(153,153,153,0.1);
.img-info{
width: 80upx;
}
.name-and-sign{
margin-left: 30upx;
width: 100%;
.name-text{
font-size: 28upx;
font-weight: 500;
color: #333333;
}
.name-sign{
margin-top: 4upx;
font-size: 24upx;
color: #999999;
}
}
.isFollow-btn{
width: 130upx;
margin-top: 14upx;
.on-follow{
width: 130upx;
height: 52upx;
line-height: 52upx;
border-radius: 26upx;
border: 2upx solid #007DFF;
text-align: center;
font-size: 28upx;
color: #387DF7;
}
.is-follow{
width: 130upx;
height: 52upx;
line-height: 52upx;
border-radius: 26upx;
border: 2upx solid #DCDCDC;
text-align: center;
font-size: 28upx;
color:#999999;
}
}
}
}
</style>