ec.uniapp-master/pages/user/member/explain.vue

<template>
	<view>
		<lf-nav title="会员权益" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
		<view class="head">
			<view class="bg-left"></view>
			<view class="bg-right"></view>
			<scroll-view class="scroll-view" :scroll-x="true" :scroll-into-view="oView">
				<view class="head-content">
					<view class="item" :id="'view-'+ index"
						:style="{width: 100 / 4 +'%'}"
						v-for="(item, index) in 5" :key="index"
						@click="current = index">
						<view class="icon">
							<text class="lf-iconfont icon-huiyuan2 lf-color-primary lf-font-60"></text>
						</view>
						<view class="name">免费雨伞租赁</view>
						<view class="active" v-if="current == index"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="content">
			<view class="primary-title">平时2倍积分</view>
			<view class="secondary-title">适用人群</view>
			<view class="text">金卡</view>
			<view class="secondary-title">特权内容</view>
			<view class="text">
				<view>1、平日购物，结账时出示“会员码”，尊享2倍积分；</view>
				<view>2、平日购物，结账时出示“会员码”，尊享2倍积分；</view>
				<view>3、平日购物，结账时出示“会员码”，尊享2倍积分；平日购物，结账时出示“会员码”，尊享2倍积分</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				current: null, // 当前选中的下标
				oView: '' // scroll跳转到哪个view下
			}
		},
		onLoad(options){
			// TODO 待对接传入current
			// setTimeout(() => {
			// 	this.current = options.current;
			// 	this.oView = `view-${options.current}`;
			// }, 500);
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.head{
		width: 750rpx;
		height: 443rpx;
		background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		box-sizing: border-box;
		color: #FFFFFF;
		.bg-left{
			position: absolute;
			width: 196rpx;
			height: 196rpx;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.04);
			left: -92rpx;
			bottom: 60rpx;
		}
		.bg-right{
			position: absolute;
			width: 520rpx;
			height: 520rpx;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.04);
			right: -168rpx;
			top: -122rpx;
		}
		.scroll-view{
			height: 236rpx;
			width: 750rpx;
			.head-content{
				width: max-content;
				height: 236rpx;
				display: flex;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					padding: 0 20rpx;
					position: relative;
					.icon{
						width: 100rpx;
						height: 100rpx;
						background: #FFFFFF;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
					}
					.name{
						width: 148rpx;
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
					}
					.active{
						position: absolute;
						bottom: 0;
						left: calc(50% - 25rpx);
						width: 0rpx;
						height: 0rpx;
						border-left: 25rpx solid transparent;
						border-right: 25rpx solid transparent;
						border-bottom: 28rpx solid #FFFFFF;
					}
				}
			}
		}
	}
	
	.content{
		padding: 30rpx 32rpx;
		.primary-title{
			font-size: 32rpx;
			color: #222222;
			font-weight: bold;
			position: relative;
			width: max-content;
			z-index: 2;
			margin-bottom: 60rpx;
			&::before{
				position: absolute;
				content: '';
				bottom: 0;
				left: 0;
				width: 100%;
				height: 16rpx;
				border-radius: 8rpx;
				background-color: #8AB8B7;
				z-index: -1;
			}
		}
		.secondary-title{
			font-size: 28rpx;
			color: #777777;
			margin-bottom: 10rpx;
		}
		.text{
			font-size: 28rpx;
			color: #222222;
			margin-bottom: 40rpx;
		}
	}
</style>