shop-applet/pages/users/user_grade/index.vue

980 lines
111 KiB
Vue
Raw Normal View History

2024-05-14 17:25:13 +08:00
<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>
<!-- <el-button type="primary" icon="ios-search" label="default" class="mr15" size="small" @click="createUser">创建用户</el-button> -->
</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="title">{{curLevel&&curLevel.brokerage_name || ''}}</view> -->
<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>
<!-- <image :src="next_level ? next_level.brokerage_icon : ''" class="brokerage_icon"></image> -->
</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>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
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";
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'])),
onLoad() {
if (this.isLogin) {
this.getInstructions();
this.getUserInfo();
this.getHostProduct();
this.getMemberInfo();
this.upgradeRemind();
} else {
this.isAuto = true;
this.isShowAuth = true
}
},
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 => {
// console.log(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');
},
}
</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,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
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,iVBORw0KGgoAAAANSUhEUgAAAmoAAALjCAMAAACVs9ldAAACZ1BMVEUAAAAiGiD66crysFD60o3604/72qLz4bIeGSAeGCD63a0cFx8cFx/726T85sD66cr85b7758T74rX11KAdGCD61ZX72Jz726b86cr86MX80Yj8363847j836376sv83an86sv6z4j83af84K/96MX84bL83qr86sn81JD84bLi28v81ZLCkFj86sr968v80Yf968v968r96sjTqmvaqmUvKi3Sl1GWc0s+NDDyzIr86sr947bYs3jerGgqJir968uxhVMsJyv804vysFD70o3ysFApJSjysFDGnWOxZzL94rbysFCxaDMsKCv/9u/NlVfCi1D+9/D67+H47d3/+fT99ez78uU1MzYxLzL88+klIib369opJSkuLC84NjkfHiA9Oz46ODssKSz16dj98ufy3b8aGRv25M3x5dX14sj67Nrz38P359L56dbw2Ljn2svXy77f08UVFBbs4NDu4tLq3s7i1sjw1bPbz8Hqyp/pvnHSx7nszaXv2aXt0arv1p7u0pbtzY7syIbrxH/qwXnq1bfu0q7l0rT+36KwZjHds3DVq2XRpl7oyZH97M7NoFfYxanft3jLnE7hzbDdyazXr2zkxIrqzZnLwLPFlEvn1Kb847rSvZThvoFIREHhxJe3bzn8362rdjbw3avTv6XNu6Ht0aDgzaH96MVUTkdgV0trYVKzlWSEd1++eUK1fzjDjkHDua2UfFaDbEzbx513a1iQg2lyXkTJsoqiiF5USTz0zpHCom/Nj1bZu4WunXqfkHI9NjBiUjzXyLLPsHvWnGFKPzTGhEu7iUK8qYK6sKWebDTdp2uNk3CVAAAAUXRSTlMADX36/n18/joeEBcx+UH6TTUZBSf8/QkhKvxkfVlXcWIk4bRtoMl1M418SDyM52a+rZ7YVLYeZVLB2c2bbtvNjIHaoJl96Oe43eDIncmx47DKDwqUAACCeElEQVR42uzdzW6qQBjGcUOsJiR8GnSwiqi0aAwK7I4sTE668uK8AVbueg/e3HlmGNr1iePu+VW5gn/ed0DbDoj+12RA9GqTma3MmBu90sQOhYjjWIgwtBkbvQhCE3EQuK4bBEEsQns2IHoFWwSu7ydJ4vuoDbFxrtErTETgJ2kHtSG2OLQHRKbZsZ9muQV5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
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>