dykj-football/pages/user/compontents/VIPMember.vue

<template>
	<view style="background-color: #fff;">
		<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">会员中心</view>
	</view>
	<u-line></u-line>
	<view class="VIPBox">
		<u-swiper style="width: 94%;" :list="list3" indicatorMode="line" interval="3000" circular autoplay indicator />
		<view class="content">
			<span style="font-size: 14px;">{{'所需成长值200 当前成长值为0'}}</span>
			<u-icon name="question-circle" color="#646668" size="18" style="position: absolute; right: 0;"
				@click="gotoBack" />
		</view>
		<view class="process">
			<uni-section padding>
				<uni-steps :options="list1" :active="-1" />
			</uni-section>
		</view>
		<view class="setMeal">
			<view v-for="(item,index) in 5" :key="index" class="grid-item">
				<view class="content1">
					<view class="integralImg">
						<u-avatar shape="shape" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
					</view>
					<view class="contentText">
						<span style="font-size: 10px;">{{'vip1(7天9折卷*1)'}}</span>
						<u-button text="兑换(100积分)" @click="convert(index)" size="mini" color="#969799" />
					</view>
				</view>
		</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	// 使用 ref 创建响应式引用  
	const list3 = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	]);
	const list1 = ref([
		{title: 'VIP1'},
		{title: 'VIP2'},
		{title: 'VIP3'},
		{title: 'VIP4'},
		{title: 'VIP5'},
		{title: 'VIP6'},
		{title: 'VIP7'},
		{title: 'VIP8'},
		{title: 'VIP9'},
		{title: 'VIP10'},
	])
	const gotoBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.VIPBox {
		width: 100%;
		min-height: 91.5vh;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 3% 0;

		.content {
			margin-top: 3%;
			width: 94%;
			height: 10vh;
			border-radius: 10px;
			background-color: #FFF;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.process {
			margin-top: 3%;
			width: 94%;
			height: 10vh;
			background-color: #FFF;
		}
		.setMeal {
			margin: 3%;
			padding: 3%;
			width: 88%;
			min-height: 40vh;
			background-color: #fff;
			border-radius: 10px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			/* 创建两列 */
			grid-gap: 15px;
		
			/* 列间隔 */
			.grid-item {
				height: 15vh;
				border-radius: 5px;
			}
			.content1 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
			}
		}
		.integralImg{
			width: 100%;
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.contentText{
			text-align: center;
			padding: 3%;
			height: 8vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}
	:deep(.uni-steps__row-title){
		font-size: 10px;
	}
</style>