zc_saas_h5/pages2/subject/collect.vue

<template>
	<view class="safeArea">
		<view class="sceenBox">
			<view :class="['item', {'active':sceenType===1} ]" @click="showSceen(1)">全部题库记录<u-icon class="icon" name="arrow-down"></u-icon></view>
			<view :class="['item', {'active':sceenType===2} ]" @click="showSceen(2)">全部试卷类型<u-icon class="icon" name="arrow-down"></u-icon></view>
		</view>
		<view class="sceenModel" v-if="sceenType">
			<view class="sceenModelBg" @click="hideSceen"></view>
			<view class="sceenMain">
				<template v-if="sceenType===1">
					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList1" :key="index" @click="choSceen(index,'tk')">{{item.name}}</view>
				</template>
				<template v-if="sceenType===2">
					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList2" :key="index" @click="choSceen(index,'sj')">{{item.name}}</view>
				</template>
			</view>
		</view>
		<view class="wrap">
			<view class="wrongHead">
				<view class="title">收藏统计</view>
				<view class="progress">
					
				</view>
			</view>
			<view class="wrongTab">
				<view class="item active">试卷归类</view>
				<view class="item">题型归类</view>
			</view>
			<view class="wrongList">
				<view class="item" v-for="(item,index) in 5" :key="index">
					<view class="title">试卷名称可换行我也不知道最多多少个字总之可以换行就对了</view>
					<view class="bt">
						<view class="left">错题数<text class="num">23</text></view>
						<view class="right">
							<view class="btn">重做</view>
							<view class="btn">解析</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			sceenType: null,
			scennList1:[
				{id: 1, name: '全部题库记录', checked: true},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'}
			],
			scennList2:[
				{id: 1, name: '全部试卷类型', checked: true},{id: 1, name: '模拟卷'},{id: 1, name: '真题'},{id: 1, name: '练习'}
			],
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {},
	methods: {
		showSceen(type){
			this.sceenType = type
		},
		hideSceen(){
			this.sceenType = null
		},
		choSceen(index,type){
			if(type==='tk'){
				this.scennList1.forEach((item,idx)=>{
					this.$set(item, 'checked',false)
					if(index===idx){
						this.$set(item, 'checked',true)
					}
				})
			}
			if(type==='sj'){
				this.scennList2.forEach((item,idx)=>{
					this.$set(item, 'checked',false)
					if(index===idx){
						this.$set(item, 'checked',true)
					}
				})
			}
			this.sceenType = null
		}
	}
};
</script>
<style lang="scss">
page {
	background: #EAEEF1;
}

</style>
<style scoped lang="scss">
.sceenBox {
	width:100%;
	height: 80rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	position: fixed;
	z-index: 999;
	border-bottom: 1px solid #eee;
	.item{
		flex:1;
		text-align: center;
		&.active{
			color:#333;
			font-weight: bold;
			.icon{
				transform: rotate(180deg);
			}
		}
	}
}
.sceenModel{
	width:100%;
	height:100%;
	position: fixed;
	z-index: 998;
	.sceenModelBg{
		width:100%;
		height:100%;
		position: fixed;
		background: rgba(0,0,0,.3);
		z-index: 998;
	}
	.sceenMain{
		position: relative;
		z-index: 999;
		background: #fff;
		margin-top: 80rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 8rpx;
		justify-content: space-between;
		.item{
			width: 350rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			padding: 25rpx 19rpx;
			margin: 8rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
			&.active{
				background: #007AFF;
				color:#fff;
			}
			&:first-child{
				width:100%;
				text-align: center;
			}
		}
	}
}
.wrap{
	padding:96rpx 16rpx 16rpx;
}
.wrongHead{
	background: #FFFFFF;
	border-radius: 16px;
	padding:24rpx;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		.sub{
			font-size: 20rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.progress{
		width: 180rpx;
		height: 180rpx;
		border: 20rpx solid #EEEEEE;
		border-radius: 50%;
		margin: 24rpx auto;
	}
}
.wrongTab{
	display: flex;
	margin: 24rpx 0;
	.item{
		width: 144rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: #fff;
		border-radius: 16px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 15rpx;
		&.active{
			background: #007AFF;
			color: #fff;
		}
	}
}
.wrongList{
	.item{;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 30rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		.title{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin: 40rpx 0 17rpx;
		}
		.bt{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 24rpx;
			.left{
				width: 176rpx;
				height: 40rpx;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				border-radius: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				justify-content: center;
				align-items: center;
				.num{
					font-size: 26rpx;
					font-weight: bold;
					color: #FF3B30;
					margin-left: 16rpx;
				}
			}
			.right{
				display: flex;
				.btn{
					width: 100rpx;
					height: 48rpx;
					background: #FFFFFF;
					border: 1px solid #007AFF;
					border-radius: 16px;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #007AFF;
					margin-left:9rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}
</style>