zz--front/pages2/bank/question.vue

<template>
	<view class="bigBox">
		<view v-if="nowPageData.type === 4" class="contentList">
			<view class="headerTitle">
				<view class="leftIcon" v-for="(item, index) in titleS" :key="index" v-if="item.value === nowPageData.type">
					<span>{{ item.label }}</span>
				</view>
				<view class="right">
					{{ numIndex + 1 }}
					<span class="lengNum">/{{ list.length }}</span>
				</view>
			</view>
			<view class="content">
				<view class="contentTitle">{{ nowPageData.content }}</view>
				<view class="imageBox" v-if="nowPageData.imgUrl && nowPageData.imgUrl !== null">
					<image :src="$method.splitImgHost(nowPageData.imgUrl)" mode="aspectFit" @click="seeBigImage(nowPageData.imgUrl)"></image>
				</view>
			</view>
			<!---案例内容start -->
			<view class="contentList" v-for="(itemst, indexst) in nowPageData.jsonStr" :key="indexst">
				<view class="headerTitle">
					<view class="leftIcon" v-for="(item, index) in titleS" :key="index" v-if="item.value === itemst.type">
						<span>{{ item.label }}</span>
					</view>
				</view>
				<view class="content">
					<view class="contentTitle">{{ itemst.content }}</view>
					<view class="imageBox" v-if="itemst.imgUrl && itemst.imgUrl !== null">
						<image :src="$method.splitImgHost(itemst.imgUrl)" mode="aspectFit" @click="seeBigImage(itemst.imgUrl)"></image>
					</view>
				</view>
				<view
					class="banksChiList"
					v-for="(items, indexs) in itemst.answer"
					:key="indexs"
					@click="activeListSitem(items, indexs, indexst)"
					:class="replyL[indexst].selectId.indexOf(indexs) !== -1 ? 'activeListBt' : ''"
				>
					<view class="leftIndex">{{ alphabet[indexs] }}.</view>
					<view class="bankTie">
						<view>{{ items.content }}</view>
						<image v-if="items.imgUrl && items.imgUrl !== null" :src="$method.splitImgHost(items.imgUrl)" mode="aspectFit" @click="seeBigImage(items.imgUrl)"></image>
					</view>
				</view>
				<view v-if="itemst.type === 3" class="banksChiList" :class="isWrong === 1 ? 'activeListBt' : ''" @click="activePDs(1, indexst)">正确</view>
				<view v-if="itemst.type === 3" class="banksChiList" :class="isWrong === 0 ? 'activeListBt' : ''" @click="activePDs(0, indexst)">错误</view>
				<view class="jxTit" style="margin-bottom: 10rpx;" @click="showTitles(indexst)">
					<span class="jxSpan">查看解析</span>
					<u-icon name="info-circle" color="#999999" size="40"></u-icon>
				</view>
				<view v-if="showJXanli.indexOf(indexst) !== -1 ? true : false" class="jxslis">{{ itemst.analysisContent }}</view>
			</view>
			<!-- -案例内容end -->
			<view class="jxTit" @click="showTitle(nowPageData.questionId)">
				<span class="jxSpan">查看解析</span>
				<u-icon name="info-circle" color="#999999" size="40"></u-icon>
			</view>
			<view v-if="showJX.indexOf(nowPageData.questionId) !== -1 ? true : false" class="jxslis">{{ nowPageData.analysisContent }}</view>
			<u-button style="margin-top: 30rpx;" type="primary" @click="submitChi">提交</u-button>
		</view>
		<view v-else class="contentList">
			<view class="headerTitle">
				<view class="leftIcon" v-for="(item, index) in titleS" :key="index" v-if="item.value === nowPageData.type">
					<span>{{ item.label }}</span>
				</view>
				<view class="right">
					{{ numIndex + 1 }}
					<span class="lengNum">/{{ list.length }}</span>
				</view>
			</view>
			<view class="content">
				<view class="contentTitle">{{ nowPageData.content }}</view>
				<view class="imageBox" v-if="nowPageData.imgUrl && nowPageData.imgUrl !== null">
					<image :src="$method.splitImgHost(nowPageData.imgUrl)" mode="aspectFit" @click="seeBigImage(nowPageData.imgUrl)"></image>
				</view>
			</view>
			<view
				class="banksChiList"
				v-for="(items, indexs) in nowPageData.jsonStr"
				:key="indexs"
				:class="replyL.indexOf(indexs) !== -1 ? 'activeListBt' : ''"
				@click="activeList(items, indexs)"
			>
				<view class="leftIndex">{{ alphabet[indexs] }}.</view>
				<view class="bankTie">
					<view>{{ items.content }}</view>
					<image v-if="items.imgUrl && items.imgUrl !== null" :src="$method.splitImgHost(items.imgUrl)" mode="aspectFit" @click="seeBigImage(items.imgUrl)"></image>
				</view>
			</view>
			<view v-if="nowPageData.type === 3" class="banksChiList" :class="isWrong === 1 ? 'activeListBt' : ''" @click="activePD(1)">正确</view>
			<view v-if="nowPageData.type === 3" class="banksChiList" :class="isWrong === 0 ? 'activeListBt' : ''" @click="activePD(0)">错误</view>
			<view class="jxTit" @click="showTitle(nowPageData.questionId)">
				<span class="jxSpan">查看解析</span>
				<u-icon name="info-circle" color="#999999" size="40"></u-icon>
			</view>
			<view v-if="showJX.indexOf(nowPageData.questionId) !== -1 ? true : false" class="jxslis">{{ nowPageData.analysisContent }}</view>
			<u-button style="margin-top: 30rpx;" type="primary" @click="submitChi">下一题</u-button>
		</view>
		<view class="footer_tab">
			<u-line color="#D6D6DB" />
			<u-row gutter="16">
				<u-col span="4">
					<view class="box">
						<view style="text-align: center;margin-left: 30rpx;position: absolute;left: 20rpx;" @click="favorites">
							<image :src="collecStatus ? '/static/star.png' : '/static/sc.png'" class="sc"></image>
							<view class="sc_t">收藏</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="box">
						<view style="text-align: center;" @click="menu">
							<image src="/static/up.png" style="width: 58rpx;height: 22rpx;"></image>
							<view class="sc_t">答题卡</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="box">
						<view style="text-align: center;margin-right: 30rpx;position: absolute;right: 20rpx;" @click="carryOut">
							<image src="/static/jj.png" class="sc"></image>
							<view class="sc_t">交卷</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true">
			<view class="popup_box">
				<scroll-view scroll-y="true" class="popup_list">
					<view
						v-for="(item, index) in list"
						:key="index"
						class="btn_num"
						:class="index === numIndex ? 'btn_bac2' : isWrites.indexOf(item.questionId) !== -1 ? 'btn_bac3' : 'btn_bac1'"
						@click="changeTM(index, 2)"
					>
						<text class="">{{ index + 1 }}</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bankSectionId: null,
			examId: null,
			typeId: null,
			numIndex: 0,
			show: false,
			list: [],
			nowPageData: {
				jsonStr: []
			},
			titleS: [
				{
					label: '单选',
					value: 1
				},
				{
					label: '多选',
					value: 2
				},
				{
					label: '判断',
					value: 3
				},
				{
					label: '案例',
					value: 4
				}
			],
			alphabet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
			replyL: [],
			isWrong: -1,
			answerList: [], //总提交列表
			bankId: 0, //题库ID
			selects: [], //当前做了哪些题目
			showJX: [], // 展开解析列表
			showJXanli: [], // 展开案例解析列表
			collecStatus: false,
			isWrites: [], //已做的题目id
			sc: false, //收藏集进来的?
			ct: false, //错题进来的？
			simulateId: 0,
		};
	},
	onLoad(option) {
		this.bankId = option.bankId;
		this.typeId = option.typeId;
		this.sc = option.sc;
		this.ct = option.ct;
		if (option.bankSectionId) {
			this.bankSectionId = option.bankSectionId;
		}
		if (option.examId) {
			this.examId = option.examId;
		}
		this.titleListFn(option);
	},
	methods: {
		//预览图片
		seeBigImage(url) {
			var urlarr = [];
			urlarr.push(this.$method.splitImgHost(url));
			uni.previewImage({
				urls: urlarr
			});
		},
		favoritesStatus() {
			this.$api.questionsystems(this.nowPageData.questionId).then(result => {
				if (result.data.data === undefined) {
					this.collecStatus = false;
				} else {
					this.collecStatus = true;
				}
			});
		},
		//收藏
		favorites() {
			console.log(this.collecStatus);
			var self = this;
			if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				if (this.collecStatus) {
					this.$api.questionsystems(self.nowPageData.questionId).then(results => {
						self.$api.questionsystemdelete(results.data.data.collectQuestionId).then(resz => {
							self.favoritesStatus();
						});
					});
				} else {
					var data = {
						bankId: self.bankId,
						questionId: self.nowPageData.questionId
					};
					this.$api.questionsystemadd(data).then(res => {
						self.favoritesStatus();
					});
				}
			}
		},
		// 查看解析start
		showTitle(ids) {
			var self = this;
			if (this.showJX.indexOf(ids) !== -1) {
				var ats = self.showJX.indexOf(ids);
				self.showJX.splice(ats, 1);
			} else {
				self.showJX.push(ids);
			}
		},
		//案例解析
		showTitles(int) {
			var self = this;
			if (this.showJXanli.indexOf(int) !== -1) {
				var ats = self.showJXanli.indexOf(int);
				self.showJXanli.splice(ats, 1);
			} else {
				self.showJXanli.push(int);
			}
		},
		changeTM(index, int) {
			var self = this;
			if (int === 1) {
				this.numIndex = index + 1;
			} else {
				this.numIndex = index;
			}
			this.initDatas();
			this.initLint();
			this.getCooieds();
			this.favoritesStatus(self.nowPageData.questionId);
			this.getBGCchange();
			this.show = false;
		},
		//已做题目颜色变化
		getBGCchange() {
			var self = this;
			this.answerList.forEach((item, index) => {
				if (this.isWrites.indexOf(item.questionId) === -1) {
					self.isWrites.push(item.questionId);
				}
			});
		},
		//数据清空
		initDatas() {
			this.isWrong = -1;
			this.showJX = [];
			this.showJXanli = [];
			this.selects = [];
		},
		getCooieds() {
			var self = this;
			if (this.answerList.length) {
				self.answerList.forEach((item, index) => {
					if (item.questionId === self.nowPageData.questionId) {
						if (self.nowPageData.type === 4) {
							self.replyL = item.replyStr;
						} else if (self.nowPageData.type === 3) {
							self.isWrong = item.isRight;
						} else {
							self.replyL = item.selectIds;
						}
					}
				});
			}
		},
		initLint() {
			var self = this;
			self.replyL = [];
			if (self.list[self.numIndex].type === 4) {
				for (var i = 0; i < self.list[self.numIndex].jsonStr.length; i++) {
					self.replyL.push({ selectId: [] });
				}
			}
			self.nowPageData = self.list[self.numIndex];
		},
		submitChi() {
			var self = this;
			if (self.nowPageData.type === 1 || self.nowPageData.type === 2 || self.nowPageData.type === 3) {
				var yesList = []; //记录正确项索引
				self.nowPageData.jsonStr.forEach((item, index) => {
					if (item.optionAnswer === 1) {
						yesList.push(index);
					}
				});
				var strYesList = yesList.sort().toString();
				var isRight = strYesList == self.replyL.sort().toString() ? 1 : 0; //记录是否选择正确
				if (self.nowPageData.type === 3) {
					if (self.isWrong === self.nowPageData.answerQuestion) {
						isRight = 1;
					} else {
						isRight = 0;
					}
				}
				var objslit = []; //记录选中的选项对象
				for (let i = 0; i < self.replyL.length; i++) {
					objslit.push(self.nowPageData.jsonStr[self.replyL[i]]);
				}
				var objList = {
					bankId: self.bankId,
					questionId: self.nowPageData.questionId,
					selectIds: self.replyL,
					replyStr: objslit,
					isRight: isRight
				};
				self.answerList[self.numIndex] = objList;
			}
			if (self.nowPageData.type === 4) {
				for (var i = 0; i < self.replyL.length; i++) {
					if (self.replyL[i].selectId.length) {
						self.replyL[i].selectId = self.replyL[i].selectId;
					}
				}
				var objList = {
					bankId: self.bankId,
					isRight: -1,
					questionId: self.nowPageData.questionId,
					replyStr: self.replyL,
					selectIds: self.selects
				};
				self.answerList[self.numIndex] = objList;
			}
			if (self.numIndex === self.list.length - 1) {
				self.changeTM(self.numIndex, 2);
				self.carryOut();
				return;
			}
			self.changeTM(self.numIndex, 1);
		},
		titleListFn(option) {
			console.log(option);
			var self = this;
			if (option.sc === 'true') {
				var data = {
					bankId: self.bankId
				};
				self.$api.systemquestionList(data).then(res => {
					if (res.data.rows.length) {
						res.data.rows.forEach((items, indexs) => {
							items.jsonStr = JSON.parse(items.jsonStr);
						});
						if (res.data.rows[self.numIndex].type === 4) {
							self.replyL = [];
							for (var i = 0; i < res.data.rows[self.numIndex].jsonStr.length; i++) {
								self.replyL.push({ selectId: [] });
							}
						}
						self.nowPageData = res.data.rows[self.numIndex];
						self.favoritesStatus(res.data.rows[self.numIndex].questionId);
						self.list = res.data.rows;
					} else {
						uni.showModal({
							title: '提示',
							content: '没有题目',
							showCancel: false,
							confirmText: '返回上级',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				});
				return;
			}
			if (option.ct === 'true') {
				var data = {
					bankId: self.bankId
				};
				self.$api.questionListrecord(data).then(res => {
					if (res.data.rows.length) {
						res.data.rows.forEach((items, indexs) => {
							items.jsonStr = JSON.parse(items.jsonStr);
						});
						if (res.data.rows[self.numIndex].type === 4) {
							self.replyL = [];
							for (var i = 0; i < res.data.rows[self.numIndex].jsonStr.length; i++) {
								self.replyL.push({ selectId: [] });
							}
						}
						self.nowPageData = res.data.rows[self.numIndex];
						self.favoritesStatus(res.data.rows[self.numIndex].questionId);
						self.list = res.data.rows;
					} else {
						uni.showModal({
							title: '提示',
							content: '没有题目',
							showCancel: false,
							confirmText: '返回上级',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				});
				return;
			}
			if (this.typeId === '1') {
				self.$api.questionsimulate(self.bankId).then(res => {
					self.simulateId = res.data.data.simulateId
					if (res.data.data.list.length) {
						res.data.data.list.forEach((items, indexs) => {
							items.jsonStr = JSON.parse(items.jsonStr);
						});
						if (res.data.data.list[self.numIndex].type === 4) {
							self.replyL = [];
							for (var i = 0; i < res.data.data.list[self.numIndex].jsonStr.length; i++) {
								self.replyL.push({ selectId: [] });
							}
						}
						self.nowPageData = res.data.data.list[self.numIndex];
						self.favoritesStatus(res.data.data.list[self.numIndex].questionId);
						self.list = res.data.data.list;
					} else {
						uni.showModal({
							title: '提示',
							content: '没有题目',
							showCancel: false,
							confirmText: '返回上级',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				})
			} else {
				if (option.bankSectionId) {
					var data = {
						bankSectionId: option.bankSectionId
					};
				}
				if (option.examId) {
					var data = {
						examId: option.examId
					};
				}
				if (option.bankSectionId === undefined && (option.examId === undefined || option.examId.length === 0)) {
					uni.showModal({
						title: '提示',
						content: '没有题目',
						showCancel: false,
						confirmText: '返回上级',
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							}
						}
					});
					return;
				}
				console.log(option);
				self.$api.questiondetailList(data).then(res => {
					if (res.data.rows.length) {
						res.data.rows.forEach((items, indexs) => {
							items.jsonStr = JSON.parse(items.jsonStr);
						});
						if (res.data.rows[self.numIndex].type === 4) {
							self.replyL = [];
							for (var i = 0; i < res.data.rows[self.numIndex].jsonStr.length; i++) {
								self.replyL.push({ selectId: [] });
							}
						}
						self.nowPageData = res.data.rows[self.numIndex];
						self.favoritesStatus(res.data.rows[self.numIndex].questionId);
						self.list = res.data.rows;
					} else {
						uni.showModal({
							title: '提示',
							content: '没有题目',
							showCancel: false,
							confirmText: '返回上级',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				});
			}
		},
		activeList(data, int) {
			var self = this;
			if (self.nowPageData.type === 1) {
				self.replyL = [int];
			} else if (self.nowPageData.type === 2) {
				if (self.replyL.indexOf(int) !== -1) {
					for (var i = 0; i <= self.replyL.length; i++) {
						if (self.replyL[i] === int) {
							self.replyL.splice(i, 1);
						}
					}
				} else {
					self.replyL.push(int);
				}
			}
		},
		activePD(int) {
			this.isWrong = int;
		},
		activePDs(int, fatInt) {
			this.isWrong = int;
			if (this.replyL[fatInt] === undefined) {
				this.replyL[fatInt] = {};
			}
			if (int === this.nowPageData.jsonStr[fatInt].answerQuestion) {
				this.replyL[fatInt].isRight = 1;
			} else {
				this.replyL[fatInt].isRight = 0;
			}
			if (this.selects.indexOf(fatInt) === -1) {
				this.selects.push(fatInt);
			}
		},
		activeListSitem(data, int, fatInt) {
			var self = this;
			if (self.replyL[fatInt] === undefined) {
				self.replyL[fatInt] = {};
			}
			if (self.nowPageData.jsonStr[fatInt].type === 1) {
				self.replyL[fatInt].selectId = [int];

				var objNums = [];
				self.nowPageData.jsonStr[fatInt].answer.forEach((itemta, indexta) => {
					if (itemta.optionAnswer === 1) {
						objNums.push(indexta);
					}
				});
				var strYesList = objNums.sort().toString();
				var isRight = strYesList == self.replyL[fatInt].selectId.sort().toString();
				if (isRight) {
					self.replyL[fatInt].isRight = 1;
				} else {
					self.replyL[fatInt].isRight = 0;
				}
				self.replyL[fatInt].repley = [data];

				if (self.replyL[fatInt].repley.length) {
					if (self.selects.indexOf(fatInt) === -1) {
						self.selects.push(fatInt);
					}
				}
			} else if (self.nowPageData.jsonStr[fatInt].type === 2) {
				if (self.replyL[fatInt].selectId === undefined) {
					self.replyL[fatInt].selectId = [];
				}
				if (self.replyL[fatInt].selectId.indexOf(int) !== -1) {
					for (var i = 0; i < self.replyL[fatInt].selectId.length; i++) {
						if (self.replyL[fatInt].selectId[i] === int) {
							self.replyL[fatInt].selectId.splice(i, 1);
						}
					}
				} else {
					self.replyL[fatInt].selectId.push(int);
				}
				var objNums = [];
				self.nowPageData.jsonStr[fatInt].answer.forEach((itemta, indexta) => {
					if (itemta.optionAnswer === 1) {
						objNums.push(indexta);
					}
				});
				var strYesList = objNums.sort().toString();
				var isRight = strYesList == self.replyL[fatInt].selectId.sort().toString();
				if (isRight) {
					self.replyL[fatInt].isRight = 1;
				} else {
					self.replyL[fatInt].isRight = 0;
				}
				var objst = [];
				for (let i = 0; i < self.replyL[fatInt].selectId.length; i++) {
					objst.push(self.nowPageData.jsonStr[fatInt].answer[self.replyL[fatInt].selectId[i]]);
				}
				self.replyL[fatInt].repley = objst;

				if (self.replyL[fatInt].repley.length) {
					if (self.selects.indexOf(fatInt) === -1) {
						self.selects.push(fatInt);
					}
				} else {
					var numt = self.selects.indexOf(fatInt);
					self.selects.splice(numt, 1);
				}
			}
		},
		menu() {
			this.show = true;
		},
		//交卷
		carryOut() {
			var self = this;
			if (this.isWrites.length !== this.list.length) {
				uni.showModal({
					title: '提示',
					content: '请完成所有作答再交卷',
					showCancel: false,
					success: function(res) {}
				});
				return;
			}
			uni.showModal({
				title: '提示',
				content: '是否确定交卷',
				success: function(res) {
					if (res.confirm) {
						var correct = 0;
						var errorz = 0;
						var errorArrays = [];
						var answerListString = JSON.parse(JSON.stringify(self.answerList));
						answerListString.forEach((item, index) => {
							if (item.isRight !== undefined) {
								if (item.isRight === 1) {
									correct++;
								} else {
									errorArrays.push(item.questionId);
									errorz++;
								}
							}
							item.selectIds = item.selectIds.toString();
							item.replyStr.forEach((items, indexs) => {
								if (items.selectId) {
									items.selectId = items.selectId.toString();
								}
							});
							item.replyStr = JSON.stringify(item.replyStr);
						});
						var data = {
							bankId: self.bankId,
							type: self.typeId,
							answerList: answerListString
						};
						if (self.examId !== null) {
							data.examId = self.examId;
						}
						if (self.simulateId !== null) {
							data.simulateId = self.simulateId;
						}
						if (self.sc === 'true') {
							var num = 0;
							self.list.forEach((item, index) => {
								if (item.type !== 4) {
									num++;
								}
							});
							uni.redirectTo({
								url: `/pages2/bank/endBG?bankId=${self.bankId}&type=${
									self.typeId
								}&allIndex=${num}&correct=${correct}&error=${errorz}&errorArrayList=${errorArrays.toString()}&bankSectionId=${self.bankSectionId}&examId=${
									self.examId
								}`
							});
						} else {
							self.$api.questiondetailrecord(data).then(res => {
								if (res.data.code === 200) {
									var num = 0;
									self.list.forEach((item, index) => {
										if (item.type !== 4) {
											num++;
										}
									});
									uni.redirectTo({
										url: `/pages2/bank/endBG?bankId=${self.bankId}&type=${
											self.typeId
										}&allIndex=${num}&correct=${correct}&error=${errorz}&errorArrayList=${errorArrays.toString()}&bankSectionId=${self.bankSectionId}&examId=${
											self.examId
										}`
									});
								} else {
									uni.showToast({
										title: '提交失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.u-drawer-content-visible {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	overflow: hidden;
}
</style>
<style scope>
.bigBox > .contentList {
	padding-top: 15rpx;
	padding-bottom: 96rpx;
}
.activeListBt {
	border: 2rpx solid #32467b !important;
}
.contentList {
	padding: 0rpx 32rpx;
}
.contentList > .jxTit {
	margin-top: 35rpx;
}
.contentList > .jxTit > .jxSpan {
	color: #32467b;
	font-size: 34rpx;
	margin-right: 8rpx;
}
.contentList > .headerTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #32467b;
}
.contentList > .content {
	margin: 25rpx 0rpx;
}
.contentList > .content > .contentTitle {
	color: #333;
	font-size: 28rpx;
}
.contentList > .content > .imageBox {
	text-align: center;
}
.contentList > .content > .imageBox > image {
	max-height: 300rpx;
}
.headerTitle > .leftIcon {
	padding: 0rpx 10rpx;
	height: 36rpx;
	line-height: 36rpx;
	border: 1rpx solid #32467b;
	font-size: 28rpx;
	border-radius: 10rpx;
	background-color: rgba(50, 70, 123, 0.1);
}
.headerTitle > .right > .lengNum {
	font-size: 28rpx;
	color: #999999;
}
.banksChiList {
	border: 2rpx solid transparent;
	display: flex;
	margin-bottom: 8rpx;
	border-radius: 16rpx;
	font-size: 34rpx;
	width: 100%;
	background-color: #f7fbff;
	padding: 15rpx 18rpx;
	box-sizing: border-box;
}
.banksChiList > .leftIndex {
	width: 40rpx;
}
.banksChiList > .bankTie {
	flex: 1;
}
.banksChiList > .bankTie > image {
	max-width: 95%;
}
.btn_bac3 {
	background: #4d6dbd;
	color: #fff;
}
.btn_bac2 {
	background: #32467b;
	color: #fff;
}
.btn_bac1 {
	background: #f7f8ff;
	color: #666666;
}
.btn_num::before {
	content: '';
	padding-top: 100%;
	display: block;
}
.btn_num text {
	font-size: 24rpx;
	width: 100%;
	display: inline-block;
	text-align: center;
	top: 50%;
	position: absolute;
	height: 30rpx;
	line-height: 30rpx;
	margin-top: -15rpx;
}
.btn_num {
	border-radius: 32rpx;
	width: 16%;
	margin: 2%;
	display: inline-block;
	position: relative;
}
.popup_list {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	height: 899rpx;
	background: #f2f3f6;
	padding-bottom: 30rpx;
}
.popup_box {
	height: 899rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: #f2f3f6;
	padding: 30rpx;
}
.sc_t {
	font-size: 22rpx;
	color: #000000;
}
.box {
	height: 95rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.sc {
	width: 29rpx;
	height: 29rpx;
}
.footer_tab {
	position: fixed;
	z-index: 999;
	bottom: 0;
	height: 96rpx;
	width: 100%;
	background-color: #ffffff;
}
page {
	background: #ffffff;
}
</style>