zhishifufei_uniapp/pages/learningCenter/reciteContent.vue

<template>
	<BaseContainer class="recite-content flex">
		<NavBar title="内容列表" />
		<view class="content-box">
			<view class="content-info">
				<view class="info-top flex">
					<image src="@/static/images/learning/icon.png" mode="aspectFill"></image>
					{{ info.name }}
					<view class="change">修改</view>
				</view>
				<view class="info-center">
					<view class="center-percent" :style="{ width: `${ info.hasRecite / info.count * 100 }%`}"></view>
				</view>
				<view class="info-bottom flex flex-center-x">
					<view>已练习：{{ info.hasRecite }}/{{ info.count }}</view>
					<view>试看剩余：{{ info.surplus }}</view>
				</view>
			</view>
			<view class="list-content">
				<template v-if="info.contentList.length > 0">
					<view v-for="(item, index) in info.contentList" :key="index" class="list-box">
						<view class="title flex flex-center-x">
							{{ item.title }}
							<image v-if="item.isLock" src="@/static/images/learning/lock.png" mode="aspectFill"></image>
							<image v-else src="@/static/images/learning/nolock.png" mode="aspectFill"></image>
						</view>
						<view class="list">
							<view v-for="(con, k) in item.list" class="list-item flex flex-center-x" @click="toDetail(con, item.isLock)">
								<view class="item-name">{{ k + 1 < 10 ? `0${k+1}` : k }}.{{ con }}</view>
								<view class="list-more"></view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</BaseContainer>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					name: '大学英语四级词汇背诵',
					count: 1000,
					hasRecite: 120,
					surplus: '00:12:12',
					contentList: [
						{
							title: '第一章节',
							isLock: false,
							list: ['goods', 'administration', 'goods', 'administration', 'goods', 'administration']
						},
						{
							title: '第二章节',
							isLock: true,
							list: ['goods', 'administration', 'goods', 'administration', 'goods', 'administration']
						}
					]
				},
				list: [],
			};
		},
		methods: {
			toDetail(con, isLock) {
				console.log(isLock);
				if (isLock) {
					this.$util.showMsg('还未解锁');
				} else {
					uni.navigateTo({
						url: '/pages/learningCenter/reciteDetail',
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.recite-content {
		background: #f6f6f6;
		flex-direction: column;
		.content-box {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			flex: 1;
			.content-info {
				height: 178rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
				border-radius: 8rpx;
				padding: 27rpx 30rpx 0;
				.info-top {
					color: #333;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 14rpx;
					}
					.change {
						width: 100rpx;
						height: 36rpx;
						background: #0F74BB;
						border-radius: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 20rpx;
						margin-left: auto;
						line-height: 36rpx;
					}
				}
				.info-center {
					margin: 13rpx 0 18rpx;
					height: 20rpx;
					background: rgba(255, 149, 0, 0.1);
					border-radius: 10rpx;
					position: relative;
					.center-percent {
						background: #FF9500;
						border-radius: 10rpx;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				.info-bottom {
					justify-content: space-between;
					color: #666;
					font-size: 20rpx;
				}
			}
		}
		.list-content {
			.list-box {
				margin-top: 50rpx;
				.title {
					color: #333;
					font-size: 30rpx;
					justify-content: center;
					margin-bottom: 25rpx;
					image {
						width: 44rpx;
						height: 44rpx;
						margin-left: 14rpx;
					}
				}
				.list {
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
					border-radius: 8rpx;
					padding: 0 30rpx;
					.list-item {
						height: 100rpx;
						border-bottom: 2rpx solid #F6F6F6;
						padding-left: 15rpx;
						.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;
						}
						.item-name {
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>