saas_miniprogram/pages2/wd/question_bank.vue

<template>
	<view style="padding: 32rpx;">
		<navigator  hover-class="none" url="/pages2/bank/my_question">
			<view class="my_question">
				<view class="flex">
					<view class="text">我的题库<u-icon name="arrow-right"></u-icon></view>
				</view>
				<image src="/static/questionBank.png" class="my_bg"></image>
			</view>
		</navigator>
		<view class="bottom">
			<navigator  hover-class="none" url="/pages2/subject/collect">
				<view class="item collect">
					<view class="text">收藏集<u-icon name="arrow-right"></u-icon></view>
					<image class="img" src="/static/questionBank_collect.png"></image>
				</view>
			</navigator>
			<view class="item list">
				<navigator  hover-class="none" url="/pages2/bank/question_record">
					<view class="list-in">
						<image class="img" src="/static/questionBank_record.png" ></image>
						<view class="text">
							做题记录 <u-icon name="arrow-right"></u-icon>
						</view>
						
					</view>
				</navigator>
				
				<navigator  hover-class="none" url="/pages2/subject/wrong">
					<view class="list-in">
						<image class="img" src="/static/questionBank_wrong.png"></image>
						<view class="text">
							错题集 <u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					1,2,3
				]
				
			}
		},
		onLoad(option) {
			// this.getDict()
		},
		onShow(){
			
		},
		methods: {
		},
		
	}
</script>
<style >
	page {
			background: #fff;
		}
</style>
<style lang="scss" scope>
	.my_question {
		position:relative;
		display: flex;
		width: 686rpx;
		height: 240rpx;
		border-radius: 24rpx;
		padding:0 40rpx;
		
		
		.my_bg {
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
		
		.flex {
			position: relative;
			z-index: 10;
			.text {
				padding-top:32rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

	}
	
	.bottom {
		margin-top:16rpx;
		display: flex;
		justify-content: space-between;
		.item {
			width: 335rpx;
			
			&.collect {
				position: relative;
				font-size: 32rpx;
				color: #FFFFFF;
				height: 240rpx;
				border-radius: 24rpx;
				padding:32rpx;
				
				.text {
					position:relative;
					z-index: 10;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				
				.img {
					position:absolute;
					left:0;
					top:0;
					width:100%;
					height:100%;
					
				}
			}
			
			&.list {
				.list-in {
					position:relative;
					width: 335rpx;
					height: 112rpx;
					background: #007AFF;
					border-radius: 24rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #fff;
					
					&:first-of-type {
						margin-bottom:16rpx;
					}
					
					.text {
						padding-left:91rpx;
						position:relative;
						z-index: 10;
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}
					
					.img {
						position:absolute;
						left:0;
						top:0;
						width:100%;
						height:100%;
					}
				}
			}
		}
	}
	
</style>