pet-front/otherPages/binding/grade/index.vue

<template>
	<!-- <div>我的等级</div> -->
	<view class="box box-size">
		<view class="level">
			<view class="picture" :style="{borderRadius:'50%'}">
				<image src="" mode="" shape="circle" withe="139rpx" height="139rpx"></image>
			</view>
			<view class="flex">
				<view class="name">
					猫小姐
				</view>
				<view class="level">
					<view class="title level" :style="{borderRadius:'19rpx'}">
						初级合伙人
					</view>
					<view class="time">
						已加入合伙人:130天
					</view>
				</view>
			</view>
		</view>
		<view class="top box-size" :style="{ borderRadius: '16rpx' }">
			<view class="form-title">
				当月数据
			</view>
			<view class="line1">
			</view>
			<view class="flex-b margin_top_3">
				<view class="justify col_999">
					<view >
						当月注册用户
					</view>
					<view class="margin_top_10">
						0个
					</view>
				</view>
				<view class="justify col_999">
					<view >
						当月下单用户
					</view>
					<view class="margin_top_10">
						0个
					</view>
				</view>
				<view class="justify col_999">
					<view >
						当月有效用户
					</view>
					<view class="margin_top_10">
						0个
					</view>
				</view>
			</view>
		</view>

		<view class=" top center box-size" :style="{ borderRadius: '16rpx' }">
			<view class="form-title">
				累积数据
			</view>
			<view class="line1">
			</view>
			<view class="flex-b margin_top_3">
				<view class="justify col_999">
					<view >
						累积注册用户
					</view>
					<view class="margin_top_10">
						0个
					</view>
				</view>
				<view class="justify col_999">
					<view >
						累积下单用户
					</view>
					<view class="margin_top_10">
						0个
					</view>
				</view>
				<view class="justify col_999">
					<view >
						累积有效用户
					</view>
					<view class="margin_top_10">
						0个
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom box-size child" :style="{ borderRadius: '16rpx' }" >
			<up-parse :content="configList.cumulative_data_statement.paramValueArea" containerStyle="{
				color: '#A55822',
				fontSize: '22rpx',
				lineHeight: '29rpx',
			}"></up-parse>
		</view>
	</view>
</template>

<script setup>
	import { useStore } from 'vuex'

	const store = useStore()

	const configList = computed(() => {
		return store.getters.configList
	})
</script>

<style scoped lang="scss">
	.box {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #ffbf60, #ffe6bf, #F5F5F7 433rpx);
		padding: 1% 2%;

		.picture {
			width: 139rpx;
			height: 139rpx;
			background-color: green;
			margin: 30rpx 20rpx 30rpx 30rpx;
		}

		.box-size {
			box-sizing: border-box;
		}

		.flex {
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
		}

		.level {
			display: flex;
		}

		.justify {
			width: 168rpx;
			display: grid;
			justify-content: center;
		}

		.name {
			font-size: 32rpx;
			margin-bottom: 15rpx;
		}

		.title {
			width: 143rpx;
			height: 38rpx;
			background-color: #FFA848;
			font-size: 22rpx;
			border: 1rpx solid #FFFFFF;
			line-height: 36rpx;
			color: #FFFFFF;
			justify-content: center;
			margin-right: 15rpx;
		}

		.time {
			color: #A55822;
			font-size: 22rpx;
			line-height: 36rpx;
		}

		.line1 {
			position: relative;
			margin-bottom: 50rpx;

			&::before {
				position: absolute;
				top: 25rpx;
				left: 0;
				content: "";
				width: 660rpx;
				height: 1rpx;
				background-color: #F5F5F7;
				// background-color: red;
			}
		}

		.top {
			width: 718rpx;
			height: 259rpx;
			background-color: #FFFFFF;
			padding: 3% 4%;

			.margin_top_3 {
				margin-top: 3%;
				font-weight: 0 important !important;

				.margin_top_10 {
					margin-top: 10%;
					color: #000000;
				}

				.col_999 {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.center {
			margin-top: 3%;
		}

		.bottom {
			width: 711rpx;
			height: 546rpx;
			background-color: #FFF4E6;
			padding: 3%;
			font-size: 22rpx;
			margin-top: 20rpx;

			.form_item {
				font-size: 22rpx;
				color: #A55822;
				position: relative;
				// padding: 38rpx 20rpx 0;
				margin-left: 10rpx;

				&::before {
					position: absolute;
					top: 5rpx;
					left: -18rpx;
					content: "*";
				}
			}
		}

		.child {
			display: grid;
			justify-content: space-between;
		}
	}
</style>