saas_miniprogram/pages2/bank/questionBank.vue

<template>
	<view id="questionBank">
		<view class="pageContent">
			<view class="pad_8 titBox">
				<view class="firstLetter">
					<view class="leftLetters">
						<view class="btnType">单选</view>
						<text>1/10</text>
					</view>
					<view style="color: #666;font-size: 28rpx;">03:25:06</view>
					<view class="leftLetters"></view>
				</view>
				<view class="titles">建造师执业资格注册的有效期一般为（ ）年。</view>
				<view class="">
					<view v-for="(item, index) in bankList" :key="index" class="lisSty">
						<text class="activeTI">{{ ast[index] }}</text>
						{{ item.label }}
					</view>
				</view>
			</view>
			<view class="pad_8 answer">
				<view>正确答案：C</view>
				<view>我的答案：B</view>
			</view>
			<view class="pad_8 answerInfos">
				<view class="answerTitle">答案解析</view>
				<view class="answerContent">
					建造师执业资格注册有效期一般为3年，有效期满前3个月，持证者应到原注册管理机构办理再次注册手续。在注册有效期内，变更执业单位者，应当及时办理变更手续。
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view>收藏</view>
			<view @click="openFooterTab">答题卡</view>
			<view>交卷</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
			<view class="popupView">
				<view class="popupTops">
					<view class="topIcon"></view>
					点击编号即可跳转至对应题目
				</view>
				<view class="popupContent">
					<scroll-view scroll-y="true" style="height: 506rpx;">
						<view class="boxSty">
							<view v-for="(item, index) in 23" :key="index" class="liListSty">{{ index + 1 }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ast: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
			show: false,
			bankList: [
				{
					label: '我是选项一',
					value: 1
				},
				{
					label: '我是选项二',
					value: 2
				},
				{
					label: '我是选项三',
					value: 3
				},
				{
					label: '我是选项四',
					value: 4
				}
			]
		};
	},
	methods: {
		openFooterTab() {
			this.show = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.lisSty {
	margin-bottom: 16rpx;
}
.activeTI {
	display: inline-block;
	border: 1rpx solid #eee;
	border-radius: 50rpx;
	height: 48rpx;
	line-height: 46rpx;
	text-align: center;
	width: 48rpx;
	margin-right: 15rpx;
	color: #666;
	font-size: 30rpx;
}
.titles {
	margin-bottom: 24rpx;
}
.titBox {
	padding: 41rpx 25rpx 24rpx 25rpx;
}
.firstLetter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	.leftLetters {
		display: flex;
		align-items: center;
		width: 220rpx;
		.btnType {
			padding: 5rpx 10rpx;
			border: 1rpx solid #007aff;
			border-radius: 10rpx;
			background-color: rgba(0, 122, 255, 0.1);
			font-size: 28rpx;
			color: #007aff;
			margin-right: 15rpx;
		}
	}
}
.popupView {
	height: 100%;
	padding-bottom: 100rpx;
	.popupTops {
		height: 77rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;
		line-height: 77rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		.topIcon {
			position: absolute;
			top: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 80rpx;
			height: 8rpx;
			background-color: #999;
			border-radius: 4rpx;
		}
	}
	.popupContent {
	}
}
.pageContent {
	background-color: #eaeef1;
	min-height: 100vh;
	padding-top: 8rpx;
	padding-bottom: 100rpx;
}
.pad_8 {
	background-color: #fff;
	margin: 0rpx 8rpx 8rpx;
	border-radius: 16rpx;
}
.answer {
	height: 80rpx;
	line-height: 80rpx;
	padding: 0rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #666;
	font-size: 30rpx;
}
.footer_btn {
	background-color: #fff;
	z-index: 10078;
	position: fixed;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 98rpx;
	padding: 0rpx 38rpx;
	border-top: 1rpx solid #eee;
}
.boxSty {
	padding: 44rpx 41rpx 0rpx;
}
.liListSty {
	width: 88rpx;
	height: 88rpx;
	border-radius: 32rpx;
	background-color: #ff3b30;
	text-align: center;
	line-height: 88rpx;
	color: #fff;
	font-size: 32rpx;
	float: left;
	margin: 20rpx 23rpx;
}
.answerInfos {
	padding: 25rpx 25rpx 25rpx 23rpx;
}
.answerTitle {
	margin-bottom: 28rpx;
	color: #666;
	font-size: 30rpx;
}
.answerContent {
	font-size: 30rpx;
	color: #666;
}
</style>