lanan-repair/pages/my/myEquity.vue

<template>
	<view class="container">
		<VNavigationBar title="权益信息" background-color="rgba(0,0,0,0)" title-color="#333"></VNavigationBar>
		<view class="body">
			<view class="card1">
				<image class="card1Bg" src="../../static/images/image3.png" mode="aspectFit"></image>
				<view class="topLeft">
					当前等级
				</view>
				<view class="levelNum">
					Lv.2
				</view>
			</view>
			<view class="equityTitle">
				<image class="leftIcon" src="../../static/icons/my-icon1.png" mode="aspectFit"></image>
				<view class="">尊享<text class="colorTitle">4项</text>权益</view>
				<image class="rightIcon" src="../../static/icons/my-icon1.png" mode="aspectFit"></image>
			</view>
			<view class="card2">
				<view v-for="(item, index) in equityList" :key="index" class="cardItem">
					<view class="dian"></view>
					<text>{{ item.title }}</text>
				</view>
			</view>
			<view class="equityTitle">
				<image class="leftIcon" src="../../static/icons/my-icon1.png" mode="aspectFit"></image>
				<view class=""><text class="colorTitle">等级</text>介绍</view>
				<image class="rightIcon" src="../../static/icons/my-icon1.png" mode="aspectFit"></image>
			</view>

			<view class="card3">
				<view class="card3Header card3Tr">
					<view class="card3Td">
						等级标识
					</view>
					<view class="card3Td">
						权益信息
					</view>
				</view>
				<view v-for="(item, index) in levelEquityList" :key="index" class="card3Tr">
					<view class="card3Td">
						<image class="levelIcon" src="../../static/icons/my-icon2.png" mode="aspectFit"></image>
						<text>LV.{{item.level}}</text>
					</view>
					<view class="card3Td">
						{{ item.desc }}
					</view>
				</view>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	export default {
		components: {
			VNavigationBar,
		},
		data() {
			return {
				equityList: [{
						title: '进店送'
					},
					{
						title: '赠送原车'
					},
					{
						title: '赠送198'
					},
					{
						title: '赠送全车360'
					},
				],
				levelEquityList: [{
						level: '1',
						desc: '进店送精美礼品一份\n赠送原车配套空气滤芯一个\n赠送198空调雾化杀菌除味一次\n赠送全车360安全检测'
					},
					{
						level: '2',
						desc: '进店送精美礼品一份\n赠送原车配套空气滤芯一个\n赠送198空调雾化杀菌除味一次\n赠送全车360安全检测'
					},
					{
						level: '3',
						desc: '进店送精美礼品一份\n赠送原车配套空气滤芯一个\n赠送198空调雾化杀菌除味一次\n赠送全车360安全检测'
					},
					{
						level: '4',
						desc: '进店送精美礼品一份\n赠送原车配套空气滤芯一个\n赠送198空调雾化杀菌除味一次\n赠送全车360安全检测'
					},
					{
						level: '5',
						desc: '进店送精美礼品一份\n赠送原车配套空气滤芯一个\n赠送198空调雾化杀菌除味一次\n赠送全车360安全检测'
					},
				]
			};
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FFE8C2 0%, rgba(255, 255, 255, 0) 100%);
		background-size: 100% 750rpx;
		background-repeat: no-repeat;

		.body {
			flex: 1;
			height: 0;
			padding-bottom: 30rpx;
			overflow: auto;

			.card1 {
				margin: 40rpx auto;
				position: relative;
				width: 686rpx;
				// background: linear-gradient( 135deg, #FDF6EB 0%, #E6CB94 100%);
				// border-radius: 24rpx 24rpx 24rpx 24rpx;
				// border: 2rpx solid;
				// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(223, 189, 126, 1)) 2 2;

				.card1Bg {
					width: 100%;
					height: 200rpx;
				}

				.topLeft {
					width: 172rpx;
					height: 68rpx;
					background: rgba(0, 0, 0, 0.1);
					border-radius: 24rpx 0rpx 24rpx 0rpx;

					position: absolute;
					left: 0;
					top: 0;

					display: flex;
					align-items: center;
					justify-content: center;
				}

				.levelNum {
					position: absolute;
					left: 30rpx;
					bottom: 30rpx;

					font-weight: bold;
					font-size: 64rpx;
					color: #62440C;
				}
			}

			.card2 {
				box-sizing: border-box;
				width: 686rpx;
				padding: 30rpx;
				margin: 40rpx auto;
				background: #FFF5D0;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				font-size: 24rpx;
				color: #62440C;
				display: flex;
				flex-direction: column;
				row-gap: 24rpx;

				.cardItem {
					display: flex;
					align-items: center;
					column-gap: 16rpx;
				}

				.dian {
					width: 12rpx;
					height: 12rpx;
					background-color: #62440C;
					border-radius: 50%;
				}
			}

			.card3 {
				box-sizing: border-box;
				width: 686rpx;
				margin: 40rpx auto;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #FFF5D0;
				font-size: 28rpx;



				.card3Tr {
					background-color: #fff;
					box-sizing: border-box;
					display: flex;
					align-items: stretch;
					border-bottom: 1rpx solid #DDDDDD;

					&.card3Header {
						color: #62440C;
						background: #FFF5D0;
					}

					&:last-child {
						border: none;
					}

					.card3Td {
						box-sizing: border-box;
						padding: 30rpx;
						flex-shrink: 0;
						white-space: break-spaces;

						&:first-child {
							width: 200rpx;
							border-right: 1rpx solid #DDDDDD;

							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.levelIcon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 8rpx;
				}

			}
		}

		.equityTitle {
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 10rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;

			.leftIcon,
			.rightIcon {
				width: 28rpx;
				height: 28rpx;
			}

			.rightIcon {
				transform: scaleX(-1);
			}

			.colorTitle {
				color: #E8A321;
			}
		}
	}
</style>