完成

pageD/attention/attention.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="attention">
+		<view class="attention_box" v-for="(item,index) in attention" :key="index">
+			<view>
+				<image :src="item.url"></image>
+			</view>
+			<view>{{item.name}}</view>
+			<view>状态：{{item.type}}</view>
+			<view  class="cur_two"  @click="tapClick(index)" v-if = "item.about == 1">已关注</view>
+			<view class="cur"   @click="tapClick(index)" v-else = "item.about == 2">未关注</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "attention",
+		data() {
+			return {
+				rSelect:[],
+				type : '未关注',
+				attention: [{
+						url: '../../pageE/static/mine/1.png',
+						name: '达人昵称',
+						type: '正在直播',
+						about: 1
+					},
+					{
+						url: '../../pageE/static/mine/1.png',
+						name: '达人昵称',
+						type: '正在直播',
+						about: 2
+					},
+					{
+						url: '../../pageE/static/mine/1.png',
+						name: '达人昵称',
+						type: '正在直播',
+						about: 1
+					},
+					{
+						url: '../../pageE/static/mine/1.png',
+						name: '达人昵称',
+						type: '正在直播',
+						about: 1
+					},
+					{
+						url: '../../pageE/static/mine/1.png',
+						name: '达人昵称',
+						type: '正在直播',
+						about: 1
+					}
+				]
+			};
+		},
+		methods: {
+			// 点击切换颜色
+			tapClick(index) {
+				console.log(index)
+				if (this.rSelect.indexOf(index) == -1) {
+					console.log(index) //打印下标
+					this.rSelect.push(index); //选中添加到数组里
+				} else {
+					this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
+					
+				}
+			}
+		},
+		components: {
+
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.attention {
+		 display: flex;
+		flex-wrap: wrap;
+		justify-content: initial;
+		padding: 30rpx 30rpx 0 30rpx;
+		border-top: 1px #ECECEC solid;
+		.attention_box:nth-child(3n+3){
+			margin-right: 0;
+		}
+		.attention_box {
+			width: 215rpx;
+			height: 282rpx;
+			background: rgba(255, 255, 255, 1);
+			box-shadow: 0px 3px 7px 0px rgba(153, 153, 153, 0.35);
+			border-radius: 10rpx;
+			margin-right: 24rpx;
+			margin-bottom: 33rpx;
+			float: left;
+			view image {
+				width: 80rpx;
+				height: 80rpx;
+				display: block;
+				margin: 24rpx auto 0;
+			}
+
+			view {
+				text-align: center;
+			}
+
+			view:nth-child(2) {
+				font-size: 26rpx;
+				font-weight: 400;
+				color: rgba(51, 51, 51, 1);
+				margin: 20rpx 0;
+				text-align: center;
+			}
+
+			view:nth-child(3) {
+				font-size: 22rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: rgba(153, 153, 153, 1);
+			}
+
+			view:nth-child(4) {
+				width: 130rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				background: rgba(221, 221, 221, 1);
+				border-radius: 25rpx;
+				font-size: 26rpx;
+				color: rgba(255, 255, 255, 1);
+				margin: 19rpx auto;
+			}
+		}
+	}
+	// 选中的样式
+	.cur {
+			background-color: #ff5d00!important;
+			color: #fff!important;
+	}
+	
+</style>