dev/dcp-app-gate/pages/profile/personIntegrate/gradeDetails.vue

<template>
	<view class="text-body">
		<!-- 顶部导航 -->
		<view style="background-color: $color-white !important;">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('userGradeDetail')"></u-navbar>
		</view>
		<view class="body-null"></view>
		<view class="body-list">
			<view class="body-list-item">
				<view class="list-text">
					<img src="static/djui.png" alt=""
						style="width: 10%; height:40%;transform: translateY(15%);padding: 0 10rpx;">
					{{$i18n.locale=='zh'?'用户等级':'User level'}}
				</view>
				<view class="list-text">
					<img src="static/sharpicons_ribbon-2.png" alt=""
						style="width: 10%; height:40%;transform: translateY(15%);padding: 0 10rpx;">{{$i18n.locale=='zh'?'成长值(分)':'Growth (points)'}}
				</view>
			</view>
			<view class="body-list-item">
				<view class="list-text-1">{{$i18n.locale=='zh'?'V1白银用户':'VIP1 Silver User'}}</view>
				<view class="list-text-2">0-999</view>
			</view>
			<view class="body-list-item">
				<view class="list-text-1">{{$i18n.locale=='zh'?'V2黄金用户':'VIP2 Gold User'}}</view>
				<view class="list-text-2">1000-2999</view>
			</view>
			<view class="body-list-item">
				<view class="list-text-1">{{$i18n.locale=='zh'?'V3铂金用户':'VIP3 Platinum User'}}</view>
				<view class="list-text-2">3000-999999</view>
			</view>
			<view class="body-list-item">
				<view class="list-text-1">{{$i18n.locale=='zh'?'星钻用户':'Star User'}}</view>
				<view class="list-text-2">{{$i18n.locale=='zh'?'成为会员':'Become Member'}}</view>
			</view>
		</view>
		<view class="body-detail">
			<view class="detail-text">
				{{$i18n.locale=='zh'?'用户等级是基于用户一定期限使用能联全球平台业务累积获取的成长值决定,用户达到相应的等级门槛即可升级,用户可以通过做登录、留言和分享做任务来获取成长值,从而提升等级。':'The user level is determined based on the accumulated growth value obtained by users using nenglian global platform services within a certain period of time. Users can upgrade when they reach the corresponding threshold of the level. Users can log in, leave messages and share tasks to obtain the growth value and thus upgrade the level. '}}

			</view>
		</view>
		<view class="user-detail">
			<view class="user-title">
				<img src="static/huiafbe.png" alt=""
					style="width: 10%; height:55%;transform: translateY(20%);padding: 0 10rpx;">{{$i18n.locale=='zh'?'用户等级规则说明':'User level rules'}}
			</view>
			<view class="little-title">{{$i18n.locale=='zh'?'等级有效期':'Class validity'}}:</view>
			<view class="user-text">
				{{$i18n.locale=='zh'?'用户等级有效期为一年(365天),若用户升级,新等级有效期从升级当天开始计算。若您没有在当前有效期内升级,新等级有效期会在当前等级有效期到期日的次日。':'The validity period of a user level is one year (365 days). If a user upgrades, the validity period of a new level starts from the upgrade day.  If you do not upgrade within the current validity period, the new grade will expire the next day after the current grade expiration date. '}}
			</view>
			<view class="user-text">
				{{$i18n.locale=='zh'?'开始重新计算并变更为新的等级;同时,你在当前等级有效期变更前获取的成长值【含奖励的成长值(以成长值到账时间计算)】会自动清零。新等级有效期内获取的成长值,将计算在新的等级有效期内。':'Start recalculating and changing to a new level;  At the same time, the growth you earned before the current level expired will be reset automatically.  The growth value obtained during the new grade validity period will be calculated in the new grade validity period. '}}
			</view>
			<view class="little-title">{{$i18n.locale=='zh'?'升降级规则':'Up-and-down rule'}}</view>
			<view class="user-text">
				{{$i18n.locale=='zh'?" 用户在等级有效期内成长值达到升级门槛值,新等级立即生效。等级到期后,用户等级将根据上个有效期内获取的成长值重新计算。若跨等级有效期变更的出现扣值情况,成长值会在新等级有效期的成长值扣除(因为等级有效期前获取的成长值已计入上个等级有效期并影响用户升降级)。若当前等级有效期成长值不足抵扣跨等级有效期的成长值,则有多少扣多少,扣至为零后,后续获取的成长值不会在抵扣。":"If the user growth reaches the upgrade threshold during the upgrade period, the new upgrade takes effect immediately.  When the rating expires, the user rating will be recalculated based on the growth value obtained during the previous validity period.  If there is a deduction for the change across the level validity period, the growth value will be deducted from the growth value of the new level validity period (because the growth value obtained before the level validity period has been included in the last level validity period and affects the user's promotion and demotion).  If the growth value of the current level validity period is not enough to offset the growth value of the cross-level validity period, the deduction will be as much as possible. After the deduction reaches zero, the subsequent growth value will not be deducted. " }}

			</view>
		</view>
		<view class="user-info">
			<view class="info-title">{{$i18n.locale=='zh'?'成长值说明':'Growth value description'}}</view>
			<view class="info-text">
				{{$i18n.locale=='zh'?'用来评定用户等级的值称为成长值；用户可以通过做登录、留言和分享做任务等方式获取成长值，从而提升用户等级。':'The value used to rank users is called growth value;  Users can obtain growth values by logging in, leaving messages and sharing tasks, so as to improve user levels. '}}
			</view>
		</view>
		<view class="text-bottom">{{$i18n.locale=='zh'?'没有更多了......':'No more......'}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
			}
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.text-body {
		width: 100%;

		.body-null {
			width: 96%;
			margin-left: 2%;
			height: 20rpx;
		}

		.body-list {
			width: 92%;
			margin-left: 4%;
			background-color: #fffeff;
			border-radius: 20rpx;


			.body-list-item {
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 1rpx solid silver;

				.list-text {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 700;
					color: #000000FF;
				}

				.list-text-1 {
					width: 50%;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 28rpx;
					color: #9d9a90;
				}

				.list-text-2 {
					height: 100rpx;
					line-height: 100rpx;
					margin-left: 18%;
					font-size: 28rpx;
					color: #9d9a90;
				}
			}
		}

		.body-detail {
			margin-top: 40rpx;
			width: 92%;
			margin-left: 4%;
			color: #0B0B11FF;
			font-size: 30px;

			.detail-text {
				text-indent: 50rpx;
				font-size: 26rpx;
				padding: 30rpx 20rpx;
				color: #5e5b5e;
			}
		}

		.user-detail {
			width: 92%;
			margin-left: 4%;
			background-color: #fffeff;
			border-radius: 20rpx;

			.user-title {
				padding: 0 20rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 38rpx;
				font-weight: 700;
				color: #617190FF;
			}

			.little-title {
				padding: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 1%;
				font-size: 32rpx;
				font-weight: 700;
				color: black;
			}

			.user-text {
				text-indent: 50rpx;
				font-size: 26rpx;
				padding: 0 20rpx;
				color: #5e5b5e;
			}
		}

		.user-info {
			width: 92%;
			margin-left: 4%;
			background-color: #fffeff;

			.info-title {
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 1%;
				font-size: 32rpx;
				font-weight: 700;
				color: black;
				padding: 0 20rpx;
			}

			.info-text {
				text-indent: 50rpx;
				font-size: 26rpx;
				padding: 0 20rpx;
				color: #5e5b5e;
			}

		}

		.text-bottom {
			width: 96%;
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 2%;
			font-size: 32rpx;
			text-align: center;
			font-weight: 700;
			color: #0000004D;
		}

	}
</style>