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

<template>
	<view>
		<view class="contentList">
			<view class="headerTitle">
				<view class="leftIcon" v-for="(item, index) in titleS" :key="index" v-if="item.value === list[nowPageData].type">
					<span >{{ item.label }}</span>
				</view>
				<view class="right">
					1
					<span class="lengNum">/10</span>
				</view>
			</view>
		</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;">
							<image src="/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;">
							<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 % 2 == 0 ? 'btn_bac2' : 'btn_bac1'">
						<text class="">{{ index + 1 }}</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			show: false,
			list: [],
			nowPageData: 0,
			titleS: [
				{
					label: '单选题',
					value: 1
				},
				{
					label: '多选题',
					value: 2
				}
			]
		};
	},
	onLoad(option) {
		this.titleListFn(option);
	},
	onShow() {},
	methods: {
		titleListFn(option) {
			if (option.bankSectionId) {
				var data = {
					bankSectionId: option.bankSectionId
				};
			}
			if (option.examId) {
				var data = {
					examId: option.examId
				};
			}
			this.$api.questiondetailList(data).then(res => {
				this.list = res.data.rows;
			});
		},
		menu() {
			this.show = true;
		}
	}
};
</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>
.contentList {
	padding: 0rpx 32rpx;
}
.contentList > .headerTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #32467b;
}
.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;
}
.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;
	bottom: 0;
	height: 96rpx;
	width: 100%;
	background-color: #ffffff;
}
page {
	background: #ffffff;
}
</style>