saas_miniprogram/pages2/bank/question_record.vue

<template>
	<view>
		<view class="tabs">
			<view class="tab" :class="{active:index==1}" data-index="1" @click="tab">全部题库记录</view>
			<view class="tab" :class="{active:index==2}" data-index="2" @click="tab">全部试卷类型</view>
		</view>
		
		<view class="record">
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷名称可换行我也不知道最多多少个字试卷名称可换行我也不知道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷名称可换行我也不知道最多多少个字试卷名称可换行我也不知道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷道最多多字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷名称可换行我也不知道最多多少个字试卷名称可换行我也不知道最多多少个字试卷名称可换行我也不知道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷名称可换行我也不知道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="note">真题</view>
				<view class="title">试卷道最多多少个字</view>
				<view class="desc">
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>2021/12/20  14:30</text>
					</view>
					<view>
						<image src="/static/icon/wk_icon2.png"></image>
						<text>总共 95 题 做对 0 题</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						重做
					</view>
					<view class="btn">
						解析
					</view>
					<view class="btn">
						报告
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="modal" v-if="index==1">
			<view class="content">
				<view class="top">全部题库记录</view>
				<view class="list">
					<view class="item">试卷名称可换行并完整显示</view>
					<view class="item">试卷名称可换行并完整显示</view>
					<view class="item">试卷名称可换行并完整显示</view>
					<view class="item">试卷名称单行卡片变小</view>
				</view>
			</view>
			<view class="modal_wrap" @click="index=0"></view>
		</view>
		
		<view class="modal" v-if="index==2">
			<view class="content">
				<view class="top">全部试卷类型</view>
				<view class="list">
					<view class="item">模拟卷</view>
					<view class="item">真题</view>
					<view class="item">练习</view>
				</view>
			</view>
			<view class="modal_wrap" @click="index=0"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
			}
		},
		onLoad(option) {
			// this.getDict()
		},
		onShow(){
			
		},
		methods: {
			tab(e) {
				this.index = e.currentTarget.dataset.index;
			}
		},
		
	}
</script>
<style >
	page {
			background: #EAEEF1;
		}
</style>
<style lang="scss" scope>
	
	.tabs {
		position:fixed;
		left:0;
		width:100%;
		top:0;
		display: flex;
		z-index: 10;
		.tab {
			flex:1;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #FFFFFF;
			font-size: 32rpx;
			color: #999999;
			
			&.active {
				color:#333333;
			}
		}
	}
	
	.record {
		margin-top:80rpx;
		padding:16rpx 8rpx;
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari 和 Chrome */
		column-count:2;
		-moz-column-gap: 16rpx;
		-webkit-column-gap: 16rpx;
		column-gap: 16rpx;
		.item {
			margin-bottom:16rpx;
			-moz-page-break-inside: avoid;
			-webkit-column-break-inside: avoid;
			break-inside: avoid;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding:65rpx 20rpx 22rpx;
			position: relative;
			overflow: hidden;
			
			.note {
				color:#fff;
				position:absolute;
				left:0;
				top:0;
				width: 112rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				background: linear-gradient(0deg, #4FACFE, #007AFF);
				border-radius: 16rpx 0px 16rpx 0rpx;
			}
			
			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}
			
			.desc {
				margin-top:26rpx;
				view {
					margin:16rpx 0;
					
					image {
						width: 23rpx;
						height: 24rpx;
					}
					
					text {
						margin-left:15rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
					}
				}
			}
			
			.btns {
				margin-top:26rpx;
				display: flex;
				justify-content: space-around;
				.btn {
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					color:#007AFF;
					background: #FFFFFF;
					border: 1rpx solid #007AFF;
					border-radius: 16rpx;
				}
			}
		}
	}
	
	.modal {
		position:fixed;
		left:0;
		width:100%;
		top:80rpx;
		bottom:0;
		
		.content {
			position: relative;
			z-index: 10;
			background:#fff;
			padding:8rpx 12rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			
			.top {
				margin:0 auto;
				width: 726rpx;
				height: 80rpx;
				background: #007AFF;
				border-radius: 16rpx;
				color:#fff;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
			}
			
			.list {
				margin-top:16rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.item {
					padding:25rpx 20rpx;
					width: 359rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					font-size: 32rpx;
					color: #666666;
					margin:8rpx 0;
				}
			}
		}
		
		.modal_wrap {
			position: absolute;
			left:0;
			width:100%;
			top:0;
			height:100%;
			background:rgba(0,0,0,0.3)
		}
	}
</style>