<template>
	<view class="user-grade">
		<view class="head">
			<view class="user-card">
				<view class="bg"></view>
				<view class="user-info acea-row">
					<image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar && userInfo.avatar !='/static/f.png'"></image>
					<image v-else class="avatar" src="/static/images/f.png"></image>
					<view class="info">
						<view class="name" v-if="userInfo.uid">
							{{userInfo.nickname}}
						</view>
					</view>
					<view class="grade"><image class="image" :src="(curLevel && curLevel.brokerage_icon) ? curLevel.brokerage_icon : '' " alt=""></view>
					<view class="vip" v-if="userInfo.is_svip > 0 && svip_switch_status == 1">
						<image src="/static/images/svip.png"></image>
					</view>
					<view @click="showProtocol=true" class="rule acea-row row-center-wrapper">
						<view>规则说明</view>
						<text class="iconfont wenhao">?</text>
					</view>
				</view>
			</view>
			<view v-if="next_level" class="card-wrapper" :style="'background-image: url('+brokerage_bg+')'">
				<view class="growth">
					<view class="info">今日获得成长值{{growthValue}}点</view>
				</view>
				<view class="wait">
					<view class="wait_count">
						<text class="value">{{member_value || 0}}</text>
						<text class="text">距{{next_level.brokerage_name ? next_level.brokerage_name : ''}}还需{{next_level.brokerage_rule && next_level.brokerage_rule.value ? next_level.brokerage_rule.value-member_value : 0 }}
						<navigator class="iconfont icon-gengduo3" url="/pages/users/user_grade_list/index" hover-class='none'></navigator></text>
					</view>
					<view class="progress"><text class="current_value" :style="'width:'+curPercent+'%'"></text></view>
				</view>
			</view>
		</view>
		<view class="grade_main">
			<view v-if="gradeList.length > 0" class="grade_privilege">
				<view class="title">会员可专项优质特权</view>
				<view class="grade_list acea-row row-between-wrapper">
					<view v-for="(item,index) in gradeList" class="item acea-row">
						<view class="picture" :class="item.status == 0 ? 'isLocked' : ''">
							<image class="bg_image" :src="item.pic"></image>
							<view class="suozi" v-if="item.status == 0">
								<image class="image" src="./images/suozi.png"></image>
							</view>
						</view>
						<view class="desc">
							<view class="name line1">{{item.name}}</view>
							<view class="detail line1">{{item.info}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="upgrade">
				<view class="title acea-row row-center-wrapper">
					<image src="./images/title.png"></image>
					<view class="name">快速升级技巧</view>
					<image src="./images/title.png" class="right"></image>
				</view>
				<view class="upgrade-svip acea-row">
					<view class="svip-view acea-row">
						<image src="../static/images/upgrade_icon.png"></image>
						<text>{{userInfo.is_svip > 0 && svip_switch_status == 1 ? 'SVIP 会员中心，惊喜多多！' : '升级成为SVIP，成长值奖励可翻倍哦！'}}</text>
					</view>
					<navigator v-if="userInfo.is_svip > 0 && svip_switch_status == 1" url="/pages/annex/vip_center/index" class="svip-btn" hover-class="none">去看看<text class="iconfont icon-jinru2"></text></navigator>
					<navigator v-else url="/pages/annex/vip_paid/index" class="svip-btn" hover-class="none">立即开通<text class="iconfont icon-jinru2"></text></navigator>
				</view>
				<view class="upgrade-main">
					<view class="item acea-row row-between-wrapper">
						<view class="item-icon"><text class="iconfont icon-qiandao"></text></view>
						<view>
							<view class="name">
								签到
								<text class="add"><text class="iconfont icon-chengchangzhi"></text>+{{valueList.member_sign_num}}点成长值</text>
							</view>
							<view class="text">每日签到可获得经验值</view>
						</view>
						<view v-if="userInfo.sign_status" class="get_btn">已完成</view>
						<navigator v-else class="get_btn" hover-class='none' url='/pages/users/user_sgin/index'>去完成</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="item-icon"><text class="iconfont icon-goumaishangpin"></text></view>
						<view>
							<view class="name">
								购买商品<text class="add"><text class="iconfont icon-chengchangzhi"></text>+{{valueList.member_pay_num}}点成长值</text></view>
							<view class="text">购买商品可获得对应的成长值</view>
						</view>
						<navigator class="get_btn" open-type='switchTab' hover-class='none' url='/pages/index/index'>去完成</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="item-icon"><text class="iconfont icon-pingjia3"></text></view>
						<view>
							<view class="name">
								评价商品<text class="add"><text class="iconfont icon-chengchangzhi"></text>+{{valueList.member_reply_num}}点成长值</text></view>
							<view class="text">评价商品可获得对应的成长值</view>
						</view>
						<navigator class="get_btn" hover-class='none' url='/pages/users/order_list/index?status=3'>去完成</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view class="item-icon"><text class="iconfont icon-yaoqing1"></text></view>
						<view>
							<view class="name">
								邀请好友<text class="add"><text class="iconfont icon-chengchangzhi"></text>+{{valueList.member_share_num}}点成长值</text></view>
							<view class="text">邀请好友注册商城可获得成长值</view>
						</view>
						<view class="get_btn" @click="shareIntegral">去完成</view>
					</view>
					<view v-if="valueList.member_community_num" class="item acea-row row-between-wrapper">
						<view class="item-icon"><text class="iconfont icon-fabu1"></text></view>
						<view>
							<view class="name">
								发布种草
								<text class="add">+{{valueList.member_community_num}}点成长值</text></view>
							<view class="text">发布一条种草可获得成长值</view>
						</view>
						<navigator class="get_btn" hover-class='none' url='/pages/plantGrass/plant_release/index'>去完成</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class='hotList'>
			<recommend v-if="recommend_switch == 1" :hostProduct='hostProduct' :isLogin="isLogin"></recommend>
		</view>
		<view class="instructions" v-if="showProtocol">
			<view class="setAgCount">
				<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
				<div class="title">会员规则</div>
				<view class="content">
					<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
		</view>
		<view class="success" v-if="isShowbox">
			<view class="bg"></view>
			<view class="con">
				<view class="title">恭喜您升级为</view>
				<view class="upgrade">
					{{upgradeInfo.brokerage_name}}
				</view>
				<view class="level">
					<image class="imgae" :src="upgradeInfo.brokerage_icon"></image>
				</view>
				<view class="btn" @click="close">查看我的权益</view>
				<view class='iconfont icon-guanbi3' @click="close"></view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>
<script>

	import { getUserInfo, getInstructions, memberInfo, brokerageNotice } from '@/api/user.js';
	import { openEextractSubscribe } from '@/utils/SubscribeMessage.js';
	import { getProductHot } from '@/api/store.js';
	import recommend from '@/components/recommend';
	import { mapGetters } from "vuex";
	import { configMap } from '@/utils';
	import authorize from '@/components/Authorize';
	import parser from "@/components/jyf-parser/jyf-parser";
  import spread from "../../../libs/spread";
	export default {
		components: {
			recommend,
			authorize,
			"jyf-parser": parser,
		},
		data() {
			return {
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				userInfo: {},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				protocol: '',
				showProtocol: false,
				tagStyle: {
					img: 'width:100%;display:block;',
					video: 'width:100%;'
				},
				gradeList: [],
				hostProduct: [],
				hotScroll: false,
				hotPage: 1,
				hotLimit: 10,
				isShowbox: false,
				curLevel: {},
				next_level: {},
				growthValue: '',
				brokerage_bg: '',
				member_value: '',
				curPercent: '',
				valueList: {},
				upgradeInfo: {}
			};
		},
		computed: configMap({hide_mer_status: 1,recommend_switch:0,svip_switch_status:0},mapGetters(['isLogin','uid'])),
		onLoad(options) {
			if (this.isLogin) {
				this.getInstructions();
				this.getUserInfo();
				this.getHostProduct();
				this.getMemberInfo();
				this.upgradeRemind();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}

      // 关系处理
      if(options.spread) spread(options.spread, this.isLogin)
		},
		methods: {
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
				});
			},
			shareIntegral(){
				uni.setStorageSync('isIntegral',true)
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 推荐列表
			getHostProduct: function() {
				let that = this;
				getProductHot(1,10).then(res => {
					that.hostProduct = res.data.list
				});
			},
			/*升级提醒*/
			upgradeRemind(){
				let that = this;
				brokerageNotice({type: 1}).then(function(res) {
					that.isShowbox = true;
					that.upgradeInfo = res.data.level;
				}).catch(res => {
					that.isShowbox = false;
				});
			},
			// 获取佣金说明
			getInstructions() {
				getInstructions('sys_member').then(res => {
					if(res.status == 200) {
						this.protocol = res.data.sys_member
					}
				})
			},
			onLoadFun: function() {
				this.isShowAuth = false;
				this.getInstructions();
				this.getUserInfo();
				this.getHostProduct();
				this.getMemberInfo();
				this.upgradeRemind();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 获取会员信息
			getMemberInfo(){
				let that = this;
				memberInfo().then(res => {
					let info = res.data
					let value = info.next_level && info.next_level.brokerage_rule || null;
					this.curLevel = info.member;
					this.gradeList = info.interests;
					this.next_level = info.next_level ? info.next_level : null;
					this.growthValue = info.today;
					this.brokerage_bg = value && value.image || '';
					this.member_value = info.member_value;
					this.curPercent = (value && value.value!=0) ? ((info.member_value/value.value)*100).toFixed(2) : 100;
					this.valueList = info.config;
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/user/index',
						});
					},1000)
				})
			},
			// 弹窗关闭
			close(){
				this.isShowbox = false
			},
		},
		// 滚动监听
		onPageScroll() {
			uni.$emit('scroll');
		},
    // #ifdef MP
    // 分享给好友
    onShareAppMessage () {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1]
      let shareData = {
        title: '我的等级',
        path: page.$page.fullPath || '/' + page.route,
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // 分享到朋友圈
    onShareTimeline() {
      let shareData = {
        title: '我的等级',
        query: {},
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.query.spread = this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // #endif
	}
</script>

<style scoped lang="scss">
	.user-grade {
		background: #fff;
		.head {
			height: 525rpx;
			.user-card {
				position: relative;
				width: 100%;
				padding: 60rpx 0 200rpx;
				background: #181818;
				.bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background-image: url('data:image/png;base64,[encoded data, 41164 characters]');
					background-size: 100% 100%;
				}
				.user-info {
					z-index: 20;
					position: relative;
					display: flex;
					padding: 0 40rpx;
					align-items: center;
					.vip {
						width: 82rpx;
						height: 36rpx;
						margin-left: 12rpx;
						image {
							width: 82rpx;
							height: 36rpx;
						}
					}
					.rule{
						color: #AAAAAA;
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						right: 40rpx;
						margin-top: -16rpx;
						.wenhao{
							width: 22rpx;
							height: 22rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 22rpx;
							border-radius: 50%;
							background-color: #AAAAAA;
							color: #181818;
							margin-left: 4rpx;
						}
					}
					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}
					.info {
						margin-left: 20rpx;
						padding: 15rpx 0;
						.name {
							display: flex;
							align-items: center;
							color: #fff;
							font-size: 31rpx;
							.vip {
								display: flex;
								align-items: center;
								height: 36rpx;
								padding: 0 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;
								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}
						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);
							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}
					.grade{
						width: 40rpx;
						height: 37rpx;
						margin-left: 10rpx;
						.image, uni-image{
							width: 40rpx;
							height: 37rpx;
						}
					}
				}
			}
		}
		.card-wrapper{
			background-size: cover;
			border-radius: 26rpx;
			width: 690rpx;
			height: 314rpx;
			margin: 0 auto;
			position: relative;
			top: -157rpx;
			padding: 100rpx 40rpx 45rpx;
			.title{
				font-size: 40rpx;
				color: #D16739;
			}
			.info{
				color: #333333;
				font-size: 26rpx;
				margin-top: 20rpx;
				opacity: .5;
			}
			.wait{
				margin-top: 50rpx;
				.wait_count{
					color: #333333;
					.text{
						opacity: .7;
						font-size: 24rpx;
					}
					.value{
						color: #282828;
						opacity: .7;
						font-weight: bold;
						font-size: 34rpx;
						margin-right: 6rpx;
					}
					.iconfont{
						font-size: 14rpx;
						color: #333333;
						display: inline-block;
						margin-left: 4rpx;
					}
				}
				.progress{
					width: 350rpx;
					height: 8rpx;
					margin-top: 15rpx;
					position: relative;
					&::after{
						content: "";
						display: inline-block;
						width: 350rpx;
						height: 8rpx;
						background-color: #333;
						border-radius: 13rpx;
						opacity: .3;
						position: absolute;
						top: 0;
						left: 0;
					}
					.current_value{
						display: inline-block;
						width: 240rpx;
						height: 8rpx;
						background-color: #333;
						border-radius: 13rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 5;
					}
				}
			}
			.brokerage_icon{
				width: 177rpx;
				height: 212rpx;
				position: absolute;
				right: 60rpx;
				top: 0;
			}
		}
		.grade_main{
			text-align: center;
			padding: 0 30rpx;
			.grade_privilege{
				.title{
					display: inline-block;
					color: #786046;
					font-size: 32rpx;
					font-weight: bold;
					padding: 44rpx 54rpx 20rpx;
					background: url('data:image/png;base64,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');
					background-size: 100%;
				}
				.grade_list {
					.item{
						width: 330rpx;
						height: 135rpx;
						box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08);
						background: #ffffff;
						border-radius: 10rpx;
						padding: 25rpx 25rpx;
						margin-top: 24rpx;
						.picture{
							width: 80rpx;
							height: 80rpx;
							border-radius: 100%;
							position: relative;
							background-color: #FAF1E4;
							image,uni-image{
								width: 80rpx;
								height: 80rpx;
								border-radius: 100%;
							}
							&.isLocked{
								background-color: #E8E8E8;
								image,uni-image{
									filter: grayscale(100%);
									filter: gray;
									opacity: .5;
								}
							}
							.suozi{
								width: 26rpx;
								height: 26rpx;
								position: absolute;
								bottom: 0;
								right: 0;
								.image,uni-image,image{
									width: 26rpx;
									height: 26rpx;
									filter: none;
									opacity: 1;
								}
							}
						}
						.desc{
							margin-left: 20rpx;
							text-align: left;
							.name{
								max-width: 180rpx;
								font-size: 32rpx;
								color: #282828;
							}
							.detail{
								font-size: 24rpx;
								color: #666666;
								max-width: 180rpx;
								margin-top: 6rpx;
							}
						}
					}
				}
			}
			.upgrade{
				margin-top: 60rpx;
				text-align: left;
				.title{
					font-size: 32rpx;
					color: #282828;
					font-weight: bold;
					.name{
						margin: 0 19rpx;
					}
					image {
						width: 119rpx;
						height: 15rpx;
						&.right {
							transform: rotate(180deg);
						}
					}
				}
				.upgrade-svip{
					margin: 40rpx 0;
					background: #FFF7EC;
					border-radius: 35rpx;
					padding: 16rpx 20rpx;
					font-size: 24rpx;
					justify-content: space-between;
					.svip-view{
						color: #AE6908;
						align-items: center;
						justify-content: center;
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 6rpx;
						}
					}	
					.svip-btn{
						color: #B37400;
						font-size: 22rpx;
						.icon-jinru2{
							margin-left: 6rpx;
							font-size: 16rpx;
						}
					}
				}
				.upgrade-main{
					margin-top: 15rpx;
				}
				.item{
					padding: 30rpx 0;
					border-bottom: 1px solid #F5F5F5;
					position: relative;
					padding-left: 100rpx;
					.item-icon{
						width: 78rpx;
						height: 78rpx;
						display: flex;
						background: #FFF7EC;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 26rpx;
						left: 0;
						border-radius: 100%;
						.iconfont{
							font-size: 40rpx;	
							color: #DFA759;
						}
					}
				}
				.name{
					font-size: 30rpx;
					color: #282828;
					.add{
						color: #AE6908;
						display: inline-block;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 0 6rpx 6rpx 6rpx;
						padding: 0 10rpx;
						font-size: 20rpx;
						margin-left: 12rpx;
						.iconfont{
							font-size: 26rpx;
							color: #FFBD09;
						}
					}
				}
				.text{
					font-size: 24rpx;
					color: #999999;
					margin-top: 5rpx;
				}
				.get_btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 136rpx;
					text-align: center;
					height: 58rpx;
					color: #AE6908;
					font-size: 26rpx;
					background: #FFDDAC;
					border-radius: 29rpx;
				}
			}
		}
	}
	.hotList{
		margin-top: 30rpx;
	}
	.success{
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.5);
		}
		.level{
			width: 222rpx;
			height: 203rpx;
			margin: 20rpx auto 0;
			uni-image,image{
				width: 222rpx;
				height: 203rpx;
			}
		}
		.title{
			color: #CD8D33;
			font-weight: bold;
			font-size: 36rpx;
			margin: 0 auto;
			display: inline-block;
			font-size: 26rpx;
			width: 285rpx;
			margin-top: 96rpx;
			position: relative;
			&:before,&:after{
				content: "";
				display: block;
				width: 52rpx;
				height: 10rpx;
				position: absolute;
				/* #ifdef MP || APP-PLUS */
				top: 9rpx;
				/* #endif */
				/* #ifdef H5 */
				top: 14rpx;
				/* #endif */
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAUCAMAAABWIogpAAAAwFBMVEUAAAAeGxsfHBwfHBwfHBwfGxsfHR0gHR0fGxsfHBwBAQH25tDz487v38ro2MPf0LzWyLXQwq+qn5BnYFdHQjwzMCssKSUWFBIQDw0LCgkHBgbCtaS9saBaU0zr3Mfj1cDazLnKvavHuqi4rJy0qJiwpZWkmouglYeckoSYjoCUinyQhnmLgnaHfnKDem5+dmp6cmd2bmRyamBsZVtfWFBUT0dQS0RMSEFBPTc8OTM5NTAnJCEkIR4dGxkaGRZjXVNX44A9AAAACXRSTlMAVPqA/IN8WITLwrIKAAAAr0lEQVRIx7XNRRLCQAAEwMVJiLvi7hLc/v8rODFVkOI2/YEWXKWqYMIjSdQJT7lMnfAUatQJjxDcCQ93wsOb8BTfD3fCQ5/wYBKNhqKoalPTWrreNgzT7HTjJOn1B5Y1HI0n09l8sVytN9udbWdZuj8cHed0vriu511v0v3h+0EQhlEky7KAyldUKOZHcX70TP9HvxOekiDAxH0wsR9M7AcT+8FEfjCRH0x4uOqf5wXaUhSOXi91TgAAAABJRU5ErkJggg==');
				background-size: cover;
			}
			&:before{
				/* #ifdef MP || APP-PLUS */
				left: 0;
				/* #endif */
				/* #ifdef H5 */
				left: 0;
				/* #endif */

			}
			&:after{
				/* #ifdef MP || APP-PLUS */
				right: 0;
				/* #endif */
				/* #ifdef H5 */
				right: 0;
				/* #endif */
				transform: rotateY(180deg);
			}
		}
		.upgrade{
			font-size: 60rpx;
			text-align: ceter;
			color: #CC6C34;
			text-align: center;
			width: 100%;
			font-weight: bold;
			margin-top: 10rpx;
			font-family: 'Tahoma, Geneva, Verdana, sans-serif';
		}
		.con{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width:557rpx;
			height:660rpx;
			background-image: url('data:image/png;base64,[encoded data, 45572 characters]');
			background-size: cover;
			.btn{
				position: absolute;
				width:380rpx;
				height:70rpx;
				left: 50%;
				margin-left: -185rpx;
				bottom: 77rpx;
				line-height: 70rpx;
				text-align: center;
				color: #9A5D08;
				background: linear-gradient(90deg, #EBBD7B 0%, #FFDDAC 100%);
				border-radius:35rpx;
				font-size: 28rpx;
			}
			.icon-guanbi3{
				color: #ffffff;
				font-size: 70rpx;
				position: absolute;
				bottom: -80rpx;
				left: 240rpx;
			}
		}
	}
	.instructions {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}
	.instructions .setAgCount {
		background: #fff;
		width: 656rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
		.content {
			height: 900rpx;
			overflow-y: scroll;
			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}
			/deep/ img {
				max-width: 100%;
			}
		}
	}
	.instructions .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
	.instructions .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
	.instructions .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
</style>
