dev/dcp-web-gate/src_old/views/AddFeatures/ballot/ballotBillDirectoryInfo.vue

<template>
	 
	<div>
		<banners-zh v-if="language.value == 'CN'"></banners-zh>
		<banners-en v-if="language.value == 'EN'"></banners-en>
		<banners-fr v-if="language.value == 'FR'"></banners-fr>
		<banners-ru v-if="language.value == 'RU'"></banners-ru>
		<!-- 顶部图片 -->
		<div class="topimg">
			<img src="@/assets/ballot/未标题-6_画板 1.png" />
			<!-- <div class="backButton" @click="toHome">
                <img src="@/assets/ballot/编组 16.png"  >
            </div> -->
		</div>
		<!-- 选择区域 -->
		<div class="body-info">
			<div class="select-info">
				<el-select v-model="language.value" @change="getLanguage">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</div>
			<div class="main-info" v-if="language.value == 'CN'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title">
						<div class="title-text-cn">
							候选单位名单（候选单位按英文首字母顺序排列）
						</div>
						<div class="table-action">
							<span>赞成</span><span>反对</span><span>弃权</span>
						</div>
					</div>

					<div
						class="table-detail"
						v-for="(item, index) in optionList"
						:key="index"
					>
						<div class="detail-text-cn">{{ item.name }}</div>
						<div class="only-first" v-if="index == 0">
							<span class="action-only">
								<img src="@/assets/ballot/圆圈.png" />
							</span>
						</div>
						<div class="detail-action" v-if="index != 0">
							<span class="action-1">
								<img src="@/assets/ballot/圆圈 (1).png" v-if="item.type != 0" />
								<img src="@/assets/ballot/圆圈.png" v-else />
							</span>

							<span class="action-2">
								<img src="@/assets/ballot/叉.png" v-if="item.type != 1" />
								<img src="@/assets/ballot/叉 (1).png" v-else />
							</span>
							<span class="action-3">
								<img src="@/assets/ballot/分割线.png" v-if="item.type != 2" />
								<img src="@/assets/ballot/分割线 (1).png" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="return-btn">
					<div class="return-sub" @click="toSuccess">返回</div>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text1" v-if="num">
						您已选择：赞成{{ agreeNum }}项;反对{{ disNum }}项;弃权{{
							noNum
						}}项,是否确认提交？
					</div>
					<div class="user-btn-text1" v-else>
						您已选择：赞成{{ agreeNumInfo }}项;反对0项;弃权0项,是否确认提交？
					</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>确认</el-button
						>
						<div class="btn-user-info-canel" @click="notToGet">取消</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" class="pic-model" />
					<div class="text-success">提交成功!</div>
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'EN'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title">
						<div class="title-text">
							Candidates for the Second Council of GEIDCO (The candidates for
							group Council members are listed in alphabetical order)
						</div>
						<div class="table-action">
							<span>Agree</span><span>Disagree</span><span>Abstain</span>
						</div>
					</div>

					<div
						class="table-detail"
						v-for="(item, index) in optionList"
						:key="index"
					>
						<div class="detail-text">
							{{ item.nameEn }}
						</div>
						<div class="only-first" v-if="index == 0">
							<span class="action-only">
								<img src="@/assets/ballot/圆圈.png" />
							</span>
						</div>
						<div class="detail-action" v-if="index != 0">
							<span class="action-1">
								<img src="@/assets/ballot/圆圈 (1).png" v-if="item.type != 0" />
								<img src="@/assets/ballot/圆圈.png" v-else />
							</span>

							<span class="action-2">
								<img src="@/assets/ballot/叉.png" v-if="item.type != 1" />
								<img src="@/assets/ballot/叉 (1).png" v-else />
							</span>
							<span class="action-3">
								<img src="@/assets/ballot/分割线.png" v-if="item.type != 2" />
								<img src="@/assets/ballot/分割线 (1).png" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="return-btn">
					<div class="return-sub" @click="toSuccess">Back</div>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text" v-if="num">
						You've selected: Agree {{ agreeNum }}; Disagree {{ disNum }};
						Abstain {{ noNum }}. Are you sure you want to submit?
					</div>
					<div class="user-btn-text" v-else>
						You've selected: approve {{ agreeNumInfo }}; Against 0; 0
						abstentions, do you confirm submission?
					</div>
					<div class="btn-user-info1">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>Confirm</el-button
						>
						<div class="btn-user-info-canel" @click="notToGet">Cancel</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" class="pic-model" />
					<div class="text-success">Submission successful!</div>
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'FR'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title-info">
						<div class="title-text-info">
							Candidats au 2ème Conseil de la GEIDCO (Les candidats aux postes
							de membres du Conseil sont classés par ordre alphabétique)
						</div>
						<div class="table-action-info">
							<span>D'accord</span><span>S'opposer</span><span>S'abstenir</span>
						</div>
					</div>

					<div
						class="table-detail"
						v-for="(item, index) in optionList"
						:key="index"
					>
						<div class="detail-text-info">
							{{ item.nameFr }}
						</div>
						<div class="only-first" v-if="index == 0">
							<span class="action-only-fr">
								<img src="@/assets/ballot/圆圈.png" />
							</span>
						</div>
						<div class="detail-action-info" v-if="index != 0">
							<span class="action-1">
								<img src="@/assets/ballot/圆圈 (1).png" v-if="item.type != 0" />
								<img src="@/assets/ballot/圆圈.png" v-else />
							</span>

							<span class="action-2">
								<img src="@/assets/ballot/叉.png" v-if="item.type != 1" />
								<img src="@/assets/ballot/叉 (1).png" v-else />
							</span>
							<span class="action-3">
								<img src="@/assets/ballot/分割线.png" v-if="item.type != 2" />
								<img src="@/assets/ballot/分割线 (1).png" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="return-btn">
					<div class="return-sub" @click="toSuccess">Retour</div>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text" v-if="num">
						Vous avez choisi : D'accord {{ agreeNum }} ; S'opposer
						{{ disNum }} ; S'abstenir {{ noNum }}. Etes-vous sûr de vouloir
						soumettre ?
					</div>
					<div class="user-btn-text" v-else>
						Vous avez sélectionné: pour {{ agreeNumInfo }}; 0 objections;
						Renonciation 0 articles. Est-ce que la soumission est confirmée?
					</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>Confirmer
						</el-button>
						<div class="btn-user-info-canel" @click="notToGet">Annuler</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" class="pic-model" />
					<div class="text-success">Soumission réussie!</div>
				</div>
			</div>
			<div class="main-info" v-if="language.value == 'RU'">
				<div class="table-box"></div>
				<div class="table-info">
					<div class="table-title-info">
						<div class="title-text-info-fr">
							Кандидаты на должность директоров совета второго созыва GEIDCO
							(в алфавитном порядке)
						</div>
						<div class="table-action-info">
							<span>Согласиться</span><span>Несогласиться</span
							><span>Воздержаться</span>
						</div>
					</div>

					<div
						class="table-detail"
						v-for="(item, index) in optionList"
						:key="index"
					>
						<div class="detail-text-info">
							{{ item.nameRu }}
						</div>
						<div class="only-first" v-if="index == 0">
							<span class="action-only-fr">
								<img src="@/assets/ballot/圆圈.png" />
							</span>
						</div>
						<div class="detail-action-info" v-if="index != 0">
							<span class="action-1">
								<img src="@/assets/ballot/圆圈 (1).png" v-if="item.type != 0" />
								<img src="@/assets/ballot/圆圈.png" v-else />
							</span>

							<span class="action-2">
								<img src="@/assets/ballot/叉.png" v-if="item.type != 1" />
								<img src="@/assets/ballot/叉 (1).png" v-else />
							</span>
							<span class="action-3">
								<img src="@/assets/ballot/分割线.png" v-if="item.type != 2" />
								<img src="@/assets/ballot/分割线 (1).png" v-else />
							</span>
						</div>
					</div>
				</div>
				<div class="return-btn">
					<div class="return-sub" @click="toSuccess">Назад</div>
				</div>
				<div class="table-bottom"></div>
				<div class="user-btn" v-if="selectBtn">
					<div class="user-btn-text" v-if="num">
						Вы выбрали: Согласен {{ agreeNum }}; Не согласен {{ disNum }};
						Воздержаться {{ noNum }}. Вы уверены, что хотите отправить?
					</div>
					<div class="user-btn-text" v-else>
						Вы выбрали: {{ agreeNumInfo }} голоса за;Возражение по пункту
						0;Воздержание по пункту 0 подтверждено?
					</div>
					<div class="btn-user-info">
						<el-button
							class="btn-user-info-ok"
							@click="sureToGet"
							:disabled="disabled"
							>Подтвердить
						</el-button>
						<div class="btn-user-info-canel" @click="notToGet">Отменить</div>
					</div>
				</div>
				<div class="big-success" v-if="successUp">
					<img src="@/assets/ballot/success-ui.png" class="pic-model" />
					<div class="text-success">Вы успешно оформили!</div>
				</div>
			</div>
		</div>
		<div class="body-box"></div>
		<!-- 底部图片 -->
		<footer-zh v-if="language.value == 'CN'"></footer-zh>
		<footer-en v-if="language.value == 'EN'"></footer-en>
		<footer-fr v-if="language.value == 'FR'"></footer-fr>
		<footer-ru v-if="language.value == 'RU'"></footer-ru>
	</div>
</template>

<script>
import { getToken } from '@/api/token'
import footerZh from '@/components/footersNewZH'
import footerEn from '@/components/footersNewEN'
import footerFr from '@/components/footersNewFR'
import footerRu from '@/components/footersNewRU'
import bannersZh from '@/components/ballotTopBannerZH'
import bannersEn from '@/components/ballotTopBannerEN'
import bannersFr from '@/components/ballotTopBannerFR'
import bannersRu from '@/components/ballotTopBannerRU'

import { getMeetingGeidcoLeaders, saveOrUpdateLeader } from '@/api/vote/council'
export default {
	name: 'ballotBillDirectoryInfo',
	components: {
		footerZh,
		footerEn,
		footerFr,
		footerRu,
		bannersZh,
		bannersEn,
		bannersFr,
		bannersRu,
	},
	data() {
		return {
			num: true,
			disabled: false,
			agreeNum: 0,
			disNum: 0,
			noNum: 0,
			agreeNumInfo: 0,
			firstId: undefined,
			typeArr: [],
			selectBtn: false,
			first: undefined,
			second: undefined,
			third: undefined,
			successUp: false,
			options: [
				{
					value: 'CN',
					label: '中文',
				},
				{
					value: 'EN',
					label: 'English',
				},
				{
					value: 'FR',
					label: 'Français',
				},
				{
					value: 'RU',
					label: 'Русский',
				},
			],
			language: {
				value: 'CN',
			},
			optionList: [],
		}
	},
	mounted() {
		let user = JSON.parse(sessionStorage.getItem('mettingUser'))
		console.log(user)
		if (user == null) {
			this.$router.push({ path: 'home' })
		} else {
			console.log('你好')
		}
		let language = sessionStorage.getItem('language')
		this.language.value = language
		this.initData()
	},
	methods: {
		//全部赞成
		getAgrees() {
			this.num = false
			this.optionList.forEach((itema, index, array) => {
				if (itema.type != 0) {
					itema.type = 0
					this.agreeNumInfo += 1
				} else {
					this.agreeNumInfo += 1
				}
			})
		},
		allAgree() {
			let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
			let params = {
				language: this.language.value,
				meetingGeidcoUserId: id,
			}
			getMeetingGeidcoLeaders(params).then((res) => {
				console.log(res)
				console.log(this.language.value)
				this.optionList = res.data.meetingGeidcoLeaders
				this.firstId = res.data.meetingGeidcoLeaders[0].id
				//初始化投票
				this.optionList.forEach((itema, index, arry) => {
					this.typeArr.push({
						leaderId: itema.id,
						type: 0,
						language: this.language.value,
					})
					// console.log(this.typeArr);
				})
			})
		},
		getLanguage() {
			let language = this.language.value
			sessionStorage.setItem('language', language)

			console.log(this.language.value)
			if (language == 'CN') {
				console.log(111)
				this.$message.success('正在切换语言...')
			}
			if (language == 'EN') {
				this.$message.success('Switching languages...')
			}
			if (language == 'FR') {
				this.$message.success('Changer de langue...')
			}
			if (language == 'RU') {
				this.$message.success('Он меняет язык.')
			}
			setTimeout(() => {
				location.reload()
			}, 500)
			this.initData()
		},
		toSuccess() {
			this.$router.push({ path: 'ballotDrawingBoardPalette' })
		},
		initData() {
			let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
			let params = {
				language: this.language.value,
				meetingGeidcoUserId: id,
			}
			getMeetingGeidcoLeaders(params).then((res) => {
				console.log(res)
				console.log(this.language.value)
				this.optionList = res.data.meetingGeidcoLeaders
				this.firstId = res.data.meetingGeidcoLeaders[0].id
				//初始化投票
				this.optionList.forEach((itema, index, arry) => {
					this.typeArr.push({
						leaderId: itema.id,
						type: itema.type,
						language: this.language.value,
					})
					// console.log(this.typeArr);
				})
			})
		},
		// 返回首页
		toHome() {
			this.$router.push({ path: 'home' })
		},
		getSuccess() {
			this.selectBtn = true
			this.typeArr.forEach((itema, index, array) => {
				if (itema.type == 0) {
					this.agreeNum += 1
				} else if (itema.type == 1) {
					this.disNum += 1
				} else if (itema.type == 2) {
					this.noNum += 1
				}
				console.log(this.agreeNum, this.disNum, this.noNum, '事项总结')
			})
		},
		sureToGet() {
			let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
			let meetingGeidcoLeaderNumDetail = this.typeArr

			getToken()
				.then((res) => {
					let token = res.data
					console.log('token====', token)
					saveOrUpdateLeader(
						JSON.stringify(meetingGeidcoLeaderNumDetail),
						id,
						token
					).then((res) => {
						console.log(res)
						this.successUp = true
						this.selectBtn = false
						// this.$message.success('投票成功')
						this.disabled = true
						setTimeout(() => {
							this.$router.push({ path: 'ballotDrawingBoardPalette' })
						}, 1500)
					})
				})
				.catch((error) => {})

			// submitHandler((token) => {
			// saveOrUpdateLeader(JSON.stringify(meetingGeidcoLeaderNumDetail), id, token).then((res) => {
			//     console.log(res);
			//     this.successUp = true
			//     this.selectBtn = false
			//     // this.$message.success('投票成功')
			//     this.disabled = true
			//     setTimeout(() => {
			//         this.$router.push({ path: 'ballotDrawingBoardPalette' });
			//     }, 1500)
			// })
			// })
			this.disabled = true
		},
		notToGet() {
			this.selectBtn = false
			this.agreeNum = 0
			this.disNum = 0
			this.noNum = 0
		},
	},
}
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* vertical-align: text-top; */
}

html,
body,
#app {
	width: 100%;
	height: 100%;
}

.action-details1 {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	transform: translateX(-83px) translateY(20px);
}

.action-details2 {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	transform: translateX(-83px) translateY(20px);
}

.action-details3 {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	transform: translateX(-115px) translateY(20px);
}

.action-details4 {
	display: inline-block;
	width: 32px;
	height: 32px;
	text-align: center;
	transform: translateX(-115px) translateY(20px);
}

.action-details1 > img {
	width: 100%;
	height: 100%;
}

.action-details2 > img {
	width: 100%;
	height: 100%;
}

.action-details3 > img {
	width: 100%;
	height: 100%;
}

.action-details4 > img {
	width: 100%;
	height: 100%;
}

.topimg {
	width: 100%;
	/* height: 450px; */
	background-color: #cdebf7;
}

.topimg > img {
	width: 100%;
	padding: 0;
	position: relative;
}

.backButton {
	width: 134px;
	height: 41px;
	position: absolute;
	top: 46px;
	right: 380px;
}

.backButton:hover {
	cursor: pointer;
}

.backButton > img {
	width: 100%;
	height: 100%;
}

.body-info {
	padding: 0;
	width: 100%;
	background-color: #f2f2f2;
}

.body-box {
	width: 100%;
	height: 50px;
	background-color: #f2f2f2;
}

.main-info {
	width: 1178px;
	margin: 0 auto;
	transform: translateY(20px);
	background-color: #ffffff;
	position: relative;
}

.bottom-list {
	width: 100%;
	height: 300px;
	background-color: #f2f2f2;
}

.select-info {
	margin-left: 68%;
	margin-bottom: 70px;
	transform: translateY(40px);
}

.table-box {
	width: 100%;
	height: 39px;
}

.table-info {
	width: 1100px;
	margin: 0 auto;
}

.table-bottom {
	width: 100%;
	height: 50px;
}

.table-title {
	width: 100%;
	height: 77px;
	background-color: #e9e9e9;
	border: 1px solid #d3d3d3;
	display: flex;
}

.table-title-info {
	width: 100%;
	height: 90px;
	background-color: #e9e9e9;
	border: 1px solid #d3d3d3;
	display: flex;
}
.title-text {
	width: 72%;
	height: 77px;
	font-size: 25px;
	padding-left: 15px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	word-wrap: break-word;
	overflow: hidden;
}
.title-text-cn {
	width: 72%;
	height: 77px;
	line-height: 77px;
	text-align: center;
	font-size: 25px;
	padding-left: 15px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	word-wrap: break-word;
	overflow: hidden;
}
.table-action {
	width: 28%;
	height: 77px;
	line-height: 77px;
	font-size: 22px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	border-left: 1px solid #d3d3d3;
	display: flex;
	justify-content: space-around;
}

.table-detail:nth-child(2n + 1) {
	width: 100%;
	height: 77px;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	background-color: #f0f9fd;
	display: flex;
}

.table-detail {
	width: 100%;
	height: 77px;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	background-color: #fff;
	display: flex;
}

.table-detail:last-child {
	border-bottom: 1px solid #d3d3d3;
}

.detail-text {
	width: 72%;
	height: 77px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	padding-top: 18px;
	margin-left: 30px;
	padding-right: 35px;
	word-wrap: break-word;
	overflow: hidden;
}
.detail-text-cn {
	width: 72%;
	height: 77px;
	line-height: 77px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	margin-left: 30px;
	padding-right: 35px;
	word-wrap: break-word;
	overflow: hidden;
}
.title-text-info {
	width: 60%;
	height: 90px;
	font-size: 22px;
	padding-left: 15px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	word-wrap: break-word;
	overflow: hidden;
}
.title-text-info-fr {
	width: 60%;
	height: 90px;
	font-size: 22px;
	padding-left: 15px;
	padding-top: 18px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	word-wrap: break-word;
	overflow: hidden;
}

.table-action-info {
	width: 40%;
	height: 90px;
	line-height: 90px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	border-left: 1px solid #d3d3d3;
	display: flex;
	justify-content: space-around;
}

.detail-text-info {
	width: 60%;
	height: 77px;
	font-size: 20px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #666666;
	padding-top: 18px;
	margin-left: 30px;
	padding-right: 60px;
	word-wrap: break-word;
	overflow: hidden;
}

.detail-action-info {
	width: 40%;
	height: 77px;
	display: flex;
	margin-left: -30px;
	justify-content: space-around;
	border-left: 1px solid #d3d3d3;
}

.detail-action {
	width: 28%;
	height: 77px;
	display: flex;
	margin-left: -30px;
	justify-content: space-around;
	border-left: 1px solid #d3d3d3;
}
.only-first {
	width: 28%;
	height: 77px;
	margin-left: -30px;
	border-left: 1px solid #d3d3d3;
}
.action-only {
	width: 30px;
	height: 30px;
}
.action-only-fr {
	width: 30px;
	height: 30px;
}
.action-only > img {
	margin-left: 35px;
	transform: translateY(23px);
	width: 10%;
	height: 40%;
}
.action-only-fr > img {
	margin-left: 59px;
	transform: translateY(23px);
	width: 10%;
	height: 40%;
}
.action-1 {
	transform: translateY(23px);
	width: 30px;
	height: 30px;
}

.action-1 > img {
	width: 100%;
	height: 100%;
}

.action-2 {
	transform: translateY(26px);
	width: 24px;
	height: 24px;
}

.action-2 > img {
	width: 100%;
	height: 100%;
}

.action-3 {
	transform: translateY(23px);
	width: 30px;
	height: 20px;
}

.action-3 > img {
	width: 100%;
	height: 150%;
}

.sub-btn {
	width: 100%;
	height: 60px;
	margin-top: 45px;
	display: flex;
}

.return-btn {
	width: 100%;
	height: 60px;
	margin-top: 45px;
	cursor: pointer;
}

.return-sub {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 25px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #ffffff;
	background: #ff7648;
	border-radius: 10px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.success-btn {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background: #0099ff;
	border-radius: 10px;
	font-size: 22px;
	font-family: AlibabaPuHuiTiM;
	font-weight: 400;
	color: #ffffff;
	margin-left: 316px;
}

.up-sub {
	width: 200px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 25px;
	font-family: AlibabaPuHuiTiM;
	font-weight: 400;
	color: #ffffff;
	background: #ff7648;
	border-radius: 10px;
	/* margin-left: 139px; */
	margin-left: 50%;
	transform: translateX(-50%);
}

.big-success {
	width: 406px;
	height: 300px;
	background: #ffffff;
	box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
	z-index: 999 !important;
	border-radius: 20px;
	position: relative;
	position: absolute;
	top: 70%;
	left: 387px;
}

.user-btn {
	width: 406px;
	height: 300px;
	background: #ffffff;
	box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
	z-index: 999 !important;
	border-radius: 20px;
	position: relative;
	position: absolute;
	top: 70%;
	left: 387px;
}

.user-btn-text1 {
	width: 100%;
	padding: 0 30px;
	text-align: center;
	margin-top: 18%;
	font-size: 20px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
}

.btn-user-info1 {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-around;
	margin-top: 15%;
}

.user-btn-text {
	width: 100%;
	padding: 0 30px;
	text-align: center;
	margin-top: 10%;
	font-size: 20px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
}

.btn-user-info {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-around;
	margin-top: 12%;
}

.btn-user-info-ok {
	width: 106px;
	height: 56px;
	background: #00b4ff;
	border-radius: 6px;
	text-align: center;
	line-height: 56px;
	font-size: 20px;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #fff;
	cursor: pointer;
}

.btn-user-info-canel {
	width: 106px;
	height: 56px;
	background: #c0c0c0;
	border-radius: 6px;
	text-align: center;
	line-height: 56px;
	font-size: 20px;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #fff;
	cursor: pointer;
}

.pic-model {
	width: 86px;
	height: 85px;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 15%;
}

.text-success {
	width: 406px;
	height: 24px;
	line-height: 24px;
	font-size: 25px;
	text-align: center;
	margin-top: 30px;
	font-family: AlibabaPuHuiTiR;
	font-weight: 400;
	color: #65c823;
}

.pic-model > img {
	width: 100%;
	height: 100%;
}

.success-btn:hover {
	cursor: pointer;
}

.up-sub:hover {
	cursor: pointer;
}
</style>