SxsnWechat/pagesMy/levelDetail.vue

<template>
	<view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="等级详情" bgColor="#FFFFFF"></cus-header>
		<div class="box">
			<div class="box-title adfacjb">
				<div class="box-title-text">等级</div>
				<div class="box-title-text">捐赠爱心值</div>
			</div>
			<div class="box-level">
				<div class="box-level-pre adfacjb" v-for="item in list" :key="item.level">
					<div class="box-level-pre-text">Lv.{{item.level}}</div>
					<div class="box-level-pre-text">{{item.tip}}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref } from 'vue'
	
	const list = ref([
		{level:0,tip:'0'},
		{level:1,tip:'<1000'},
		{level:2,tip:'1000<=X <5000'},
		{level:3,tip:'5000<=X<10000'},
		{level:4,tip:'10000<=X<30000'},
		{level:5,tip:'30000<=X<100000'},
		{level:6,tip:'1000000<=X'}
	])
</script>

<style scoped lang="scss">
	.common_page{
		padding: 0 24rpx 12rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		
		.box{
			flex: 1;
			overflow-y: auto;
			margin-top: 21rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			
			&-title{
				width: 100%;
				height: 110rpx;
				padding: 0 24rpx;
				box-sizing: border-box;
				background: #B7F358;
				&-text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 45rpx;
					&:last-child{
						text-align: right;
					}
				}
			}
			
			&-level{
				padding: 0 24rpx;
				&-pre{
					padding: 33rpx 0;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6E6E6;
					&-text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #252525;
						line-height: 45rpx;
						&:last-child{
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>