<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>
