zhishifufei_uniapp/pages/learningCenter/recite.vue

<template>
	<BaseContainer class="recite">
		<NavBar title="背诵过关" />
		<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>
							{{ item.name }}
						</view>
						<view class="content">
							<view :style="{ borderColor: item.todayRecite ? '' : '#FFC067', color: item.todayRecite ? '': '#FFBF66' }">今日{{ item.todayRecite ? '已' : '未' }}背诵</view>
							<view>词汇量：{{ item.count }}</view>
						</view>
					</view>
					<view class="item-right">
						<view
							v-if="item.type < 2"
							class="status"
							:style="{ background: item.type === 0 ? '#FFEDE9' : '#EFF8FE', color: item.type === 0 ? '#FF4B33': '#0F74BB' }">{{ item.type === 0 ? '免费' : '试看' }}</view>
						<image v-if="item.type === 2" src="@/static/images/learning/nolock.png" mode="aspectFill"></image>
						<image v-if="item.type === 3" src="@/static/images/learning/lock.png" mode="aspectFill"></image>
						<view class="list-more"></view>
					</view>
				</view>
			</template>
		</view>
	</BaseContainer>
</template>

<script>
	export default {
		data() {
			return {
				list: [ // 0：免费 1：试看 2：解锁 3：锁住
					{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: true, type: 0 },
					{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 0 },
					{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 1 },
					{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 1 },
					{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 2 },
					{ name: '大学英语四级词汇背诵', count: '1000', todayRecite: false, type: 3 }
				],
			};
		},
		methods: {
			toContent() {
				uni.navigateTo({
					url: '/pages/learningCenter/reciteContent',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recite {
		background: #f6f6f6;
		.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;
						}
					}
					.content {
						display: flex;
						align-items: center;
						margin-top: 20rpx;
						>view {
							font-size: 20rpx;
							color: #666666;
							&:first-child {
								width: 112rpx;
								height: 33rpx;
								border-radius: 5rpx;
								border: 1px solid #2DD092;
								font-size: 20rpx;
								color: #2DD092;
								text-align: center;
								line-height: 33rpx;
								margin-right: 24rpx;
							}
						}
					}
				}
				.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>