wx-qhb/pageC/mineFollow/mineFollow.vue

<template>
	<view class="page">
		<u-navbar @leftClick="rightClick" :autoBack="true">
			<view class="tab" slot="center">
				<view :class="{commodity:follow==1}" @click="tabSwitch(1)">
					商品
				</view>
				<view :class="{commodity:follow==2}" @click="tabSwitch(2)">
					团长
				</view>
			</view>
		</u-navbar>
		<!-- 关注商品列表 -->
		<view class="content" v-if="follow==1">
			<view class="commodity-detail" v-for="item in commodityList">
				<image :src="item.img" class="commodity-img" mode=""></image>
				<view class="commodity-right">
					<view class="commodity-title">
						{{item.title}}
					</view>
					<view class="commodity-follow">
						<text v-show="item.followNum<=1000">{{item.followNum}} </text> <text
							v-show="item.followNum>1000">1000+</text>人关注
					</view>
					<view class="commodity-price">
						<text class="symbol">￥</text>
						<text class="integer">{{item.price[0]}}</text>.
						<text class="decimal">{{item.price[1]}}</text>
					</view>
				</view>

			</view>

		</view>
		<!-- 关注商品列表 -->
		
		<!-- 关注团长列表 -->
		<view class="content" v-if="follow==2">
			<view class="team-content" v-for="item in teamList">
				<image :src="item.img" class="header-img" mode=""></image>
				<view class="team-right">
					<view class="">
						<view class="name">
							{{item.name}}
						</view>
						<view class="score">
							<u-rate count="5" :allowHalf="true" :gutter="1" inactiveColor="#ffacab"
								activeColor="#FF1515" v-model="item.score" :size='14'></u-rate>
							<text class="num">{{item.score}}</text>

						</view>
					</view>
					<button class="check">查看主页</button>
				</view>
			</view>
		</view>
		<!-- 关注团长列表 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				follow: 1,
				commodityList: [{
					title: "OATLY 噢麦力 咖啡大师醇香燕麦奶早餐奶便携装植物蛋白饮料奶早餐奶便携装植物蛋奶早餐奶便携装植物蛋",
					followNum: 1001,
					price: ['100', '1'],
					img: 'https://img.shetu66.com/2023/04/26/1682496554628042.png'
				}],
				teamList: [{
					img: "http://pic.imeitou.com/uploads/allimg/240522/10-2405221F140.jpg",
					name: "张三",
					score: 4.5
				}, {
					img: "http://pic.imeitou.com/uploads/allimg/240522/10-2405221F140.jpg",
					name: "张三",
					score: 4.5
				}]
			}
		},
		methods: {
			tabSwitch(num) {
				this.follow = num
			},
			rightClick() {
				console.log(111)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		height: 100vh;
		position: relative;

		.tab {
			display: flex;
			justify-content: space-between;
			width: 240rpx;
			margin: 0 auto;
			font-size: 36rpx;

			.commodity {
				position: relative;
				font-weight: 600;

			}

			.commodity::before {
				content: '';
				display: block;
				height: 8rpx;
				width: 72rpx;
				background: linear-gradient(to right, #f83224, #fff);
				position: absolute;
				bottom: 5rpx;
				opacity: 0.8;
			}
		}

		.content {
			position: absolute;
			top: 190rpx;

			.team-content {
				display: flex;
				height: 168rpx;
				align-items: center;
				width: 702rpx;
				border-top: 2rpx solid rgba(151,151,151,0.2);
				margin-left: 24rpx;

				.team-right {
					display: flex;
					justify-content: space-between;
					width: 96%;
					align-items: center;

					.name {
						font-size: 30rpx;
						font-weight: 600;
						margin-bottom: 14rpx;
					}

					.score {
						width: 210rpx;
						height: 28rpx;
						background-color: rgba(255, 27, 0, 0.1);
						display: flex;
						border-radius: 12rpx;
						justify-content: space-around;

						.num {
							font-size: 22rpx;
							color: #ff1515;
							font-weight: 600;
						}
					}

					.check {
						width: 164rpx;
						height: 60rpx;
						border: 2rpx solid #f83224;
						color: #f83224;
						background-color: #fff;
						border-radius: 38rpx;
						font-size: 26rpx;
						margin: 0;
						padding: 0;
						text-align: center;
						line-height: 60rpx;
					}
				}
			}

			.header-img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.commodity-detail {
				display: flex;
				padding: 0 24rpx;
				margin: 16rpx auto;

				.commodity-img {
					width: 204rpx;
					height: 204rpx;
					border-radius: 16rpx;
					margin-right: 20rpx;
				}

				.commodity-right {
					width: 466rpx;
				}

				.commodity-title {
					color: #222;
					font-size: 28rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
					min-height: 78rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.commodity-follow {
					color: #777;
					font-size: 28rpx;
					margin-bottom: 14rpx;
				}

				.commodity-price {
					color: #f83224;
					font-weight: 600;
					margin-top: 20rpx;
				}

				.symbol,
				.decimal {
					font-size: 28rpx;
				}

				.integer {
					font-size: 36rpx;
				}
			}
		}
	}
</style>