ProAdvanced/pages/friend-page/select/select.vue

<template>
	<view>
		<view class="friend-bg">
			<image style="width: 750rpx;height: 406rpx;" src="../../../static/friend/friend-bg.png"></image>
			<image style="position: absolute; left: 34rpx;top: 120rpx; width: 22rpx; height: 42rpx;"
				src="../../../static/friend/back.png" @click="onBack()"></image>
		</view>
		<view style="padding-top: 230rpx;">
			<view class="cu-list menu-avatar margin-top">
				<view class="cu-item card-view" :class=" index == selectIndex?' friend-select':''" style="height: 180rpx;" v-for="(item, index) in 4" :key="index" @click="onSelectIndex(index)">
					<view class="cu-avatar round lg"
						style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
						<view class="cu-tag badge-bottom" >
							<image style="height: 32rpx;width: 32rpx;" src="../../../static/friend/girl.png"></image>
						</view>
					</view>
					<view class="content" style="width: 360rpx;">
						<view class="text-grey">凯尔</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
							</view>

						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-infofill text-red  margin-right-xs"></text>
								我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
							</view>

						</view>
					</view>
					<view class="action" style="width: 160rpx; ">
						<image class=" make-lines-bPurple" style="width: 126rpx; height: 60rpx;"
							src="../../../static/friend/pk-button.png"></image>
					</view>
				</view>

			</view>
		</view>

		<view class="padding flex flex-direction" style="position: absolute;bottom: 34rpx; left: 0;right: 0;">
			<button class="cu-btn make-bg-bPurple text-white lg" style="border-radius: 20rpx;">健身模式</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:0,
			}
		},
		methods: {
			onSelectIndex(data){
				this.selectIndex = data;
				console.log(data);
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.friend-bg {
		position: absolute;
		top: -60rpx;
		left: 0;
		right: 0;
		/* bottom: 0; */
		margin: auto;

		width: 750rpx;
		height: 406rpx;
		background-color: #000000;
	}

	.friend-select {
		/* box-sizing: content-box; */
		border: 4rpx solid #9797FF;
	}
</style>