jewelry-front/pages_order/mine/card.vue

<!-- 会员卡片页面
<template>
	<view class="member-card">
		导航栏
		<navbar title="会员" leftClick @leftClick="$utils.navigateBack" />

		会员列表
		<view class="member-list">
			<view v-for="item in memberList" :key="item.id" class="member-item">
				<image :src="item.memberBg" mode="widthFix" class="member-image"></image>
				<view class="member-info">
					<view class="profile-photo">
						<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
						<view class="open-status">
							暂未开通
						</view>
					</view>
					<view class="open">
						立即开通
					</view>
				</view>
			</view>
		</view>

		小会员列表
		<view class="member-list-min">
			<image v-for="item in minMemberList" :key="item.id" :src="item.icon" mode="heightFix" class="member-icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MenberCard',
		data() {
			return {
				memberList: [{
						id: 1,
						memberBg: "/pages_order/static/card/diamond.png",
					},
					{
						id: 2,
						memberBg: "/pages_order/static/card/gold.png",
					},
					{
						id: 3,
						memberBg: "/pages_order/static/card/silver.png",
					}
				],
				minMemberList: [{
						id: 1,
						icon: "/pages_order/static/card/diamond-min.png",
					},
					{
						id: 2,
						icon: "/pages_order/static/card/gold-min.png",
					},
					{
						id: 3,
						icon: "/pages_order/static/card/sliver-min.png",
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-card {
		background: white;
		min-height: 100vh;

		// 会员列表
		.member-list {
			padding: 20rpx;
			box-sizing: border-box;

			.member-item {
				position: relative;

				.member-image {
					width: 100%;
				}

				.member-info {
					position: absolute;
					bottom: 30rpx;
					left: 0rpx;
					display: flex;
					justify-content: space-between;
					padding: 0rpx 40rpx;
					box-sizing: border-box;
					width: 100%;

					.profile-photo {
						display: flex;
						justify-content: center;
						align-items: center;

						.pro-img {
							width: 60rpx;
							height: 60rpx;
						}

						.open-status {
							color: #F8A95F;
							border: 1px solid #F8A95F;
							border-radius: 30rpx;
							padding: 7rpx 20rpx;
							margin-left: 10rpx;
						}
					}

					.open {
						display: flex;
						align-items: center;
						justify-content: center;
						background: #F8A95F;
						color: white;
						border-radius: 30rpx;
						padding: 7rpx 20rpx;
					}
				}
			}
		}
		
		// 小会员列表
		.member-list-min {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx 0rpx 0rpx 0rpx;
			
			.member-icon {
				height: 80rpx;
			}
		}
	}
</style> -->