zhishifufei_uniapp/pages/learningCenter/brushQuestion.vue

<template>
	<BaseContainer class="brush-question">
		<NavBar title="刷题过关" />
		<advert :img="'/static/frontend/learning-advert.png'" :height="140" />
		<view class="exam flex flex-center-x">
				<image src="" mode="aspectFill"></image>
				<view class="intro">
					<view>组合卷考试</view>
					<view>完成付费试题后可参加</view>
				</view>
				<view class="exam-btn"></view>
		</view>
		<view class="list">
			<template v-if="list.length > 0">
				<view v-for="(item, index) in list" class="list-item flex flex-center-x" @click="toContent">
					<view class="item-left">
						<view class="title">
							<image src="@/static/images/learning/icon.png" mode="aspectFill"></image>
							<text>{{ item.name }}</text>
						</view>
						<view class="content">
							<view>词汇量：{{ item.count }}</view>
						</view>
					</view>
					<view class="item-right">
						<image v-if="item.type === 1" src="@/static/images/learning/nolock.png" mode="aspectFill"></image>
						<image v-if="item.type === 2" src="@/static/images/learning/lock.png" mode="aspectFill"></image>
						<view class="list-more"></view>
					</view>
				</view>
			</template>
		</view>
	</BaseContainer>
</template>

<script>
import Advert from '@/components/Advert/index.vue';
	export default {
		components: {
			Advert,
		},
		data() {
			return {
				list: [ // 0：免费 1：解锁 2：锁住
					{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 0 },
					{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 0 },
					{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 1 },
					{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 1 },
					{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 2 },
					{ name: '2021-2022大学英语四级词汇背诵', count: '1000', type: 2 }
				],
			};
		},
		methods: {
			toContent() {
				uni.navigateTo({
					url: '/pages/learningCenter/reciteContent',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.brush-question {
		background: #f6f6f6;
		.exam {
			width: 690rpx;
			margin: 32rpx 30rpx 0;
			height: 180rpx;
			background: #386FF4;
			border-radius: 10rpx;
			padding: 0 65rpx 0 50rpx;
			>image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 55rpx;
			}
			.intro {
				margin-right: auto;
				view {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #fff;
					&:first-child {
						font-size: 34rpx;
						line-height: 34rpx;
						font-weight: bold;
						margin-bottom: 17rpx;
					}
				}
			}
			.exam-btn {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
				background: #fff;
			}
		}
		.list {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			.list-item {
				width: 100%;
				height: 158rpx;
				background: #fff;
				border-radius: 8rpx;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				.item-left {
					flex: 1;
					.title {
						color: #333;
						font-size: 30rpx;
						display: flex;
						align-items: center;
						image {
							width: 44rpx;
							height: 44rpx;
							margin-right: 15rpx;
						}
						text {
							width: 420rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.content {
						display: flex;
						align-items: center;
						margin-top: 20rpx;
						>view {
							font-size: 20rpx;
							color: #666666;
						}
					}
				}
				.item-right {
					display: flex;
					align-items: center;
					.status {
						width: 76rpx;
						height: 39rpx;
						background: #FFEDE9;
						border-radius: 6rpx 0rpx 6rpx 0rpx;
						text-align: center;
						line-height: 39rpx;
						font-size: 22rpx;
					}
					image {
						width: 44rpx;
						height: 44rpx;
					}
					.list-more {
						width: 14rpx;
						height: 14rpx;
						border-width: 2px 2px 0 0;
						border-color: #ccc;
						border-style: solid;
						-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
						transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
						vertical-align: top;
						margin-left: 13rpx;
					}
				}
			}
		}
	}
</style>