<template>
	<view class="pr pb100 o-h box-s-b" style="width: 750rpx;">
		<view class="user-bg"></view>
		<view class="user-top d-b-s white">
			<view class="flex-1">
				<view class=" d-b-s ww100">
					<image class="user-ava" :src="userInfo.headPath || userInfo.countryCircularIcon" mode=""></image>
					<view class="user-info d-c d-b-s flex-1">
						<view class="d-s-c mb10">
							<text class="f28 fb mr20">{{ userInfo.memberName }}</text>
							<!-- 	<view class="grad-btn d-c-c">
								<image class="menber-icon" src="/static/icon/menber-icon.png" mode=""></image>
								<text>{{userData.awardsVal}}</text>
							</view> -->
							<view class="d-s-c">
								<image @click="gotoPage('/pages/user/grade/index')" class="vip-icon"
									v-if="userInfo.gradeIcon" :src="userInfo.gradeIcon" mode=""></image>
								<!-- <image class="vip-icon" v-if="userInfo.awardsIcon" :src="userInfo.awardsIcon" mode=""></image> -->
							</view>
						</view>
						<view class="f22">{{ $t('MN_T_1') }}:{{ userInfo.memberCode }}</view>
					</view>
				</view>
			</view>
			<view class="d-c d-b-e user-info">
				<view class="icon iconfont icon-shezhi1" @click="gotoPage('pages/user/set/index')"></view>
			</view>
		</view>
		<view class="f24 pr d-b-c" style="margin-top: 7rpx;z-index: 1;padding: 0 26rpx 0 22rpx;">
			<view class="flex-1 d-s-c ml105">
				<view class="grade-box" v-if="userData.registerAuthority != 0">
					<u-icon name="/static/icon/user-fw.png" size="24rpx"></u-icon>
					<text class="ml10">{{ userData.registerAuthorityVal }}</text>
				</view>
				<view class="grade-box" v-if="userData.isMakerSpace == 0">
					<u-icon name="/static/icon/user-ck.png" size="24rpx"></u-icon>
					<text class="ml10">{{ $t('MN_F_T_34') }}</text>
				</view>
			</view>
			<!-- <view class="d-c-c" @click="gotoPage('/pages/user/awardTitle/index')">
				<text class="mr10 white">{{ $t('ENU_MENU_103') }}</text>
				<u-icon name="arrow-right" size="26rpx" color="#fff"></u-icon>
			</view> -->
			<view class="d-c-c" @click="gotoPage('/pages/user/awards/index')">
				<text class="mr10 white">{{ $t('ENU_MENU_103') }}</text>
				<u-icon name="arrow-right" size="26rpx" color="#fff"></u-icon>
			</view>

		</view>
		<view class="my-grade">
			<view class="border-b grade-title">{{ userInfo.pkAwardsVal }}</view>
			<view class="d-b-c pt20">
				<view class="flex-1 silder-box d-c">
					<view class="f24 gray6" v-if="awardsinfo.targetPv != -1" >
						<text>{{ $t('S_L_1') }} {{ awardsinfo.tarAwardsName }} {{ $t('S_L_2') }}:</text>
						<text class="domation fb">
							{{ (awardsinfo.targetPv * 1 - awardsinfo.sumRealPv * 1 > 0 ? awardsinfo.targetPv * 1 - awardsinfo.sumRealPv * 1 : 0).toFixed(2) }}
						</text>
						<text class="domation fb">{{ $t('fn_136') }}</text>
					</view>
					<view class="f24 gray6" v-if="awardsinfo.targetPv == -1">{{ $t('S_L_3') }}</view>
					<view class="user-silder" v-if="awardsinfo.targetPv * 1 > 0">
						<view :style="'width: ' + ((awardsinfo.sumRealPv * 1) / (awardsinfo.targetPv * 1)) * 100 + '%;'"
							class="user-silder-active"></view>
					</view>
					<view class="user-silder all" v-else>
						<view style="width:100%" class="user-silder-active"></view>
					</view>
				</view>
				<image @click="gotoPage('/pages/user/grade/index?type=1')" class="my-grade-img"
					v-if="userInfo.awardsIcon" :src="userInfo.awardsIcon" mode=""></image>
			</view>
		</view>
		<annuity :userInfo="userInfo"></annuity>
		<view class="my-assets">
			<view class="my-assets-all">
				<view class="f28">{{ $t('N_I_247') }}</view>
				<view class="gray9 f24" @click="gotoPage('/pages/order/myorder')">
					{{ $t('MY_ORD_54') }}
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="d-b-c w100 p-20-0">
				<view v-for="(item,index) in orderStatus" :key="index" class="item" @click="gotoOrder(item.value)">
					<view class="icon-box pr">
						<image :src="'/static/icon/user/order0'+(index+1)+'.png'" mode=""></image>
						<text class="dot  d-c-c"
							v-if="item.value==0&&orderCount.waitPayNum != null && orderCount.waitPayNum > 0">{{ orderCount.waitPayNum }}</text>
						<text class="dot  d-c-c"
							v-if="item.value==1&&orderCount.payNum != null && orderCount.payNum > 0">{{ orderCount.payNum }}</text>
					</view>
					<text>{{item.label }}</text>
				</view>
				<!-- <view class="item" @click="gotoPage('/pages/order/myorder?dataType=1')">
					<view class="icon-box pr">
						<image src="/static/icon/user/order02.png" mode=""></image>
						<text class="dot  d-c-c"
							v-if="orderCount.payNum != null && orderCount.payNum > 0">{{ orderCount.payNum }}</text>
					</view>
					<text class="">{{ $t('ENU_ORDER_S_1') }}</text>
				</view>
				<view class="item" @click="gotoPage('/pages/order/myorder?dataType=4')">
					<view class="icon-box pr">
						<image src="/static/icon/user/order04.png" mode=""></image>
					</view>
					<text>{{ $t('ENU_ORDER_S_5') }}</text>
				</view> -->
			</view>
		</view>
		<view class="menu-list-2" v-if="listmenu">
			<view class="my-assets-all m-0-20">
				<view class="f28">{{ $t('ENU_MENU_50') }}</view>
			</view>
			<view class="menu-list-list">
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/index?openIndex=-1')"
					v-if="hasMenu('ConsanguinityCheck')">
					<image class="menu-icon" src="/static/icon/user/cc01.png" mode=""></image>
					<view>{{ $t('MN_F_49') }}</view>
				</view>
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/index?openIndex=0')"
					v-if="hasMenu('incomeDetail')">
					<image class="menu-icon" src="/static/icon/user/cc03.png" mode=""></image>
					<view>{{ $t('ENU_MENU_530') }}</view>
				</view>
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/bonus-source/index')"
					v-if="hasMenu('bonusSource')">
					<image class="menu-icon" src="/static/icon/user/cc08.png" mode=""></image>
					<view>{{ $t('ENU_MENU_540') }}</view>
				</view>
				<!-- 考核明细隐藏 -->
				<!-- <view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/index?openIndex=1')" v-if="hasMenu('appraisal')">
					<image class="menu-icon" src="/static/icon/user/cc04.png" mode=""></image>
					<view>{{ $t('ENU_MENU_560') }}</view>
				</view> -->
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/registration-list/index')"
					v-if="hasMenu('registration')">
					<image class="menu-icon" src="/static/icon/user/cc05.png" mode=""></image>
					<view>{{ $t('ENU_MENU_570') }}</view>
				</view>
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/index?openIndex=2')"
					v-if="hasMenu('investment')">
					<image class="menu-icon" src="/static/icon/user/cc06.png" mode=""></image>
					<view>{{ $t('ENU_MENU_580') }}</view>
				</view>
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/statistic-analysis/index')"
					v-if="hasMenu('statistics')">
					<image class="menu-icon" src="/static/icon/user/cc07.png" mode=""></image>
					<view>{{ $t('w_0420') }}</view>
				</view>
				<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/market/activity-zone/index')"
					v-if="hasMenu('activeZone')">
					<image class="menu-icon" src="/static/icon/user/cc02.png" mode=""></image>
					<view>{{ $t('ENU_MENU_520') }}</view>
				</view>
				<!-- <view class="d-c-c d-c menu-item" v-if="hasMenu('frame')" @click="gotoPage('/pages/member-area/architecture/index')">
					<image class="menu-icon" src="/static/icon/user/cc10.png" mode=""></image>
					<view>{{ $t('MN_F_T_42') }}</view>
				</view> -->
				<view class="d-c-c d-c menu-item" v-if="hasMenu('frame')"
					@click="gotoPage('/pages/architecture/architecture')">
					<image class="menu-icon" src="/static/icon/user/cc10.png" mode=""></image>
					<view>{{ $t('MN_F_T_42') }}</view>
				</view>
			</view>
		</view>
		<view class="menu-list" v-if="listmenu">
			<view class="d-c-c d-c menu-item" @click="openWallet" v-if="hasMenu('wallet')">
				<image class="menu-icon" src="/static/icon/user/gj01.png" mode=""></image>
				<view>{{ $t('N_I_246') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/pickup-area/index')" v-if="hasMenu('pickGoods')">
				<image class="menu-icon" src="/static/icon/user/gj02.png" mode=""></image>
				<view>{{ $t('N_I_248') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/electron-card/index')">
				<image class="menu-icon" src="/static/icon/user/electron.png" mode=""></image>
				<view>{{ $t('PER_DA_13') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/maker-space/index')" v-if="hasMenu('space')">
				<image class="menu-icon" src="/static/icon/user/gj03.png" mode=""></image>
				<view>{{ $t('ENU_APPROVE_B_141') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/self-service/index')" v-if="hasMenu('selfHelp')">
				<image class="menu-icon" src="/static/icon/user/gj04.png" mode=""></image>
				<view>{{ $t('ENU_MENU_905') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('pages/user/set/security')">
				<image class="menu-icon" src="/static/icon/user/gj05.png" mode=""></image>
				<view>{{ $t('w_0026') }}</view>
			</view>
			<!-- 隐藏地址管理 -->
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/address/address')">
				<image class="menu-icon" src="/static/icon/user/gj06.png" mode=""></image>
				<view>{{ $t('w_0027') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/card/list')">
				<image class="menu-icon" src="/static/icon/user/gj07.png" mode=""></image>
				<view>{{ $t('MY_WAL_3') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/feedback/feedback')">
				<image class="menu-icon" src="/static/icon/user/cc02.png" mode=""></image>
				<view>{{ $t('S_L_15') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="changelang()">
				<image class="menu-icon" src="/static/icon/user/gj08.png" mode=""></image>
				<view>{{ $t('MY_ORD_55') }}</view>
			</view>
			<!-- 关于我们 -->
			<!-- <view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/about/index')">
				<image class="menu-icon" src="/static/icon/user/gj09.png" mode=""></image>
				<view>{{ $t('w_0006') }}</view>
			</view> -->
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/affiliate/index')">
				<image class="menu-icon" src="/static/icon/user/address.png" mode=""></image>
				<view>{{ $t('MN_F_T_742') }}{{ $t('S_C_88')  }}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/honor/index')">
				<image class="menu-icon" src="/static/icon/user/honor.png" mode=""></image>
				<!-- <view>{{ $t('MN_F_T_137') }}</view> -->
				<view>{{ $t('APP_ADD_12') }}</view>
			</view>
			<!-- 创客空间隐藏 -->
			<!-- <view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/makerSpace/index')">
				<image class="menu-icon" src="/static/icon/user/makerSpace.png" mode=""></image>
				<view>{{ $t('ENU_G_C_7') }}</view>
			</view> -->
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/goal/list')" v-if="hasMenu('iTarget')">
				<image class="menu-icon" src="/static/icon/user/goal.png" mode=""></image>
				<view>{{ $t('S_C_1') }}</view>
			</view>
			<!-- 达人隐藏 -->
			<!-- <view class="d-c-c d-c menu-item" @click="openDetail()">
				<image class="menu-icon" src="/static/icon/user/gj05.png" mode=""></image>
				<view>{{ $t('APP_ADD_11') }}</view>
			</view> -->
			<!-- 礼品地址隐藏 -->
			<!-- <view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/gift/index')">
				<image class="menu-icon" src="/static/icon/user/gift.png" mode=""></image>
				<view>{{ $t('PER_DA_19') }}</view>
			</view> -->
			<!-- 公告 -->
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/notice/index')">
				<image class="menu-icon" src="/static/icon/user/gift.png" mode=""></image>
				<view>{{ $t('MN_F_T_82') }}</view>
			</view>

			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/performance/index')">
				<image class="menu-icon" src="/static/icon/user/performance.png" mode=""></image>
				<view>{{ $t('S_C_71') }}</view>
			</view>
			<view class="d-c-c d-c menu-item" v-if="userInfo.pkStore" @click="gotoPage('/pages/order/store')">
				<image class="menu-icon" src="/static/icon/user/dpdd.png" mode=""></image>
				<view>{{$t('fn_001')}}</view>
			</view>
			<view class="d-c-c d-c menu-item" v-if="userInfo.pkStore" @click="gotoPage('/pages/order/memberStoreOrder')">
				<image class="menu-icon" src="/static/icon/user/dpdd.png" mode=""></image>
				<view>{{$t('fn_146')}}</view>
			</view>
			<view class="d-c-c d-c menu-item" @click="gotoPage('/pages/user/personalServices/index')">
				<image class="menu-icon" src="/static/icon/user/grff.png" mode=""></image>
				<view>{{$t('fn_125')}}</view>
			</view>
		</view>
		<button @click="loginOut()" class="normal-sub-btn">{{ $t('w_0028') }}</button>
		<ranking :isPop="isDetail" :detail="detailModel" @close="closeDetail"></ranking>
		<popIntu :isShow="isWallet" :title="$t('MY_WAL_21')" password :placeholder="$t('PER_DA_50')"
			@close="closeWallet"></popIntu>
	</view>
</template>

<script>
	import popIntu from '@/components/pop-input.vue';
	import ranking from './detail.vue';
	import annuity from '@/components/annuity/index.vue';
	export default {
		components: {
			popIntu,
			ranking,
			annuity
		},
		data() {
			return {
				isDetail: false,
				detailModel: null,
				userInfo: {},
				userData: {},
				listmenu: [],
				orderCount: {
					waitPayNum: 0,
					payNum: 0
				},
				isWallet: false,
				awardsinfo: {
					pkTransaction: 0,
					pkTransactionVal: '',
					sumRealPv: '',
					tarAwardsName: '',
					targetPv: ''
				},
				orderStatus: []
			};
		},
		onLoad: function(options) {
			this.getMenu();
			this.getCartNum();
			this.getOrderStatus();
			this.getOrderNumData();
		},
		onShow() {
			this.getUserData();
			this.getUserInfoData();
			this.getAwards();
		},
		methods: {
			gotoOrder(e) {
				this.gotoPage('/pages/order/myorder?dataType=' + e)
			},
			getOrderStatus() {
				let self = this;
				self._get('system/pub/enums/order-status-api', {}, res => {
					self.orderStatus = res.data;
				})
			},
			closeDetail() {
				this.isDetail = false;
				this.detailModel = null;
			},
			openDetail(e) {
				this.detailModel = e;
				this.isDetail = true;
			},
			getAwards() {
				let self = this;
				self._get('member/api/member/index-member-awards', {}, res => {
					self.awardsinfo = res.data;
				});
			},
			getOrderNumData() {
				let self = this;
				self.loading = true;
				self._get(
					'sale/api/my-order/num', {},
					function(res) {
						self.orderCount = res.data;
					}, {},
					() => {
						self.loading = false;
					}
				);
			},
			getCartNum() {
				let self = this;
				self._get(
					'sale/api/shopping/getShoppingCount', {
						specialArea: '',
						pkCountry: ''
					},
					res => {
						uni.setTabBarBadge({
							index: 2,
							text: res.data.cont + ''
						});
					}
				);
			},
			hasMenu(key) {
				let self = this;
				let flag = false;
				self.listmenu.forEach((item, index) => {
					if (item.menuKey == key) {
						flag = true;
					}
				});
				return flag;
			},
			getMenu() {
				let self = this;
				self._get('system/api/menu/list', {}, res => {
					let list = [];
					let arr = res.data;
					arr.forEach((item, index) => {
						list.push(item);
					});
					self.listmenu = list;
				});
			},
			// 获取用户信息
			getUserInfoData() {
				let self = this;
				self.loadding = true;
				self._get('member/api/member/get-info', {}, function(res) {
					if (res.code == 200) {
						self.userInfo = res.data;
					}
					uni.setStorageSync('currencyIcon', res.data.currencyIcon);
					self.loadding = false;
					uni.hideLoading();
				});
			},
			// 获取用户信息
			getUserData() {
				let self = this;
				self.loadding = true;
				self._get('member/api/member/get-data', {}, function(res) {
					if (res.code == 200) {
						self.userData = res.data;
					}
					self.loadding = false;
					uni.hideLoading();
				});
			},
			openWallet() {
				this.isWallet = true;
			},
			closeWallet(e) {
				let self = this;
				if (e) {
					self._get(
						'/member/api/recharge/check-pwd', {
							pwd: e
						},
						res => {
							self.gotoPage('/pages/user/my-wallet/index');
						}
					);
				}
				this.isWallet = false;
			},
			/*发送短信*/
			loginOut() {
				let self = this;
				self._delete('member/auth/api/logout', '', result => {
					if (result.code == 200) {
						uni.removeStorageSync('Admin-Token');
						uni.removeStorageSync('expires_in');
						self.gotoPage('/login');
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.user-bg {
		position: absolute;
		left: -375rpx;
		top: -500rpx;
		z-index: 0;
		width: 1500rpx;
		height: 1060rpx;
		border-radius: 50%;
		background-color: #e74435;
	}

	.user-top {
		width: 750rpx;
		// height: 331rpx;
		position: relative;
		z-index: 1;
		padding: 77rpx 25rpx 0 22rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.grad-btn {
		// width: 146rpx;
		height: 46rpx;
		line-height: 46rpx;
		padding: 0 18rpx;
		background: rgba(#000, 0.25);
		border-radius: 23rpx;
		margin-left: 22rpx;
	}

	.menber-icon {
		width: 23rpx;
		height: 18rpx;
		margin-right: 7rpx;
	}

	.user-info {
		// height: 88rpx;
	}

	.user-ava {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: block;
		margin-right: 18rpx;
	}

	.icon.icon-shezhi1 {
		font-size: 44rpx;
		color: #fff;
	}

	.vip-icon {
		width: 59rpx;
		height: 59rpx;
		margin-right: 26rpx;
		display: block;
	}

	.menu-list {
		width: 708rpx;
		box-sizing: border-box;
		margin: 0 20rpx 0 22rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 32rpx 0 10rpx 0;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.menu-list-2 {
		width: 708rpx;
		box-sizing: border-box;
		margin: 0 20rpx 0 22rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 0 10rpx 0;
		position: relative;
		z-index: 2;
		margin-bottom: 24rpx;
	}

	.menu-list-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 20rpx;
	}

	.menu-item {
		width: 33.3%;
		font-size: 24rpx;
		flex-shrink: 0;
		margin-bottom: 28rpx;
		word-break: break-all;
		padding: 0 10rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.menu-item>view {
		line-height: 1.5;
		height: 64rpx;
	}

	.menu-title {
		height: 100rpx;
		line-height: 100rpx;
	}

	.menu-icon {
		width: 88rpx;
		height: 88rpx;
		display: block;
		margin-bottom: 6rpx;
	}

	.icon.icon-jiantou {
		font-size: 26rpx;
		color: #999;
	}

	.normal-sub-btn {
		margin: 50rpx auto;
	}

	.my-assets {
		width: 708rpx;
		box-sizing: border-box;
		margin: 0 20rpx 0 22rpx;
		padding: 22rpx;
		padding-top: 0;
		padding-bottom: 0;
		background: #ffffff;
		border-radius: 20rpx;
		z-index: 2;
		position: relative;
		margin-bottom: 24rpx;
	}

	.my-assets .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		word-break: break-all;
	}

	.my-assets .item>text {
		text-align: center;
	}

	.my-assets .icon-box image {
		width: 72rpx;
		height: 72rpx;
	}

	.my-assets .icon-box {
		// width: 60rpx;
		// height: 60rpx;
	}

	.my-assets .icon-box .iconfont {
		font-size: 50rpx;
		color: #333333;
	}

	.my-assets .icon-box .dot {
		position: absolute;
		top: 0rpx;
		right: -14rpx;
		height: 25rpx;
		min-width: 25rpx;
		padding: 4rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		background: #3d3d3d;
		color: #ffffff;
	}

	.my-assets-all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #eee;
	}

	.my-assets-all .icon.icon-jiantou {
		font-size: 12px;
		color: #999999;
	}

	.my-grade {
		width: 708rpx;
		box-sizing: border-box;
		margin: 0 20rpx 0 22rpx;
		padding: 22rpx;
		padding-top: 0;
		padding-bottom: 0;
		background: #ffffff;
		border-radius: 20rpx;
		// margin-top: -92rpx;
		z-index: 2;
		position: relative;
		margin-bottom: 24rpx;
		padding-bottom: 20rpx;
		// height: 134rpx;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		margin-top: 28rpx;
	}

	.grade-title {
		height: 77rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		color: #666;
		font-weight: bold;
	}

	.my-grade-img {
		width: 104rpx;
		height: 94rpx;
		margin-left: 4rpx;
	}

	.silder-box {
		height: 74rpx;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.user-silder {
		width: 100%;
		height: 18rpx;
		background: #eeeeee;
		border-radius: 9rpx;
		position: relative;
	}

	.user-silder-active {
		max-width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		height: 18rpx;
		background: #fb3024;
		border-radius: 9rpx;
	}

	.grade-box {
		color: #fb3024;
		font-size: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40rpx;
		background: #ffffff;
		border-radius: 20rpx 0 20rpx 20rpx;
		padding: 0 22rpx;
		margin-right: 30rpx;
	}

	.ml105 {
		margin-left: 105rpx;
	}
</style>
