questionbankvue3/pages/exercises/chapter/chapter.vue

<template>
	<view class="content">
		<view class="ul padding">
			<view class="li" v-for="(item,index) in 7" :key="index" @click="goPage(index)">
				<view class="num" :style="{background: colorArr[index]}">{{index+1}}</view>
				<view class="rightTxt">
					<view class="h1">安全行车常识</view>
					<view class="flex">
						<view class="proccess">
							<up-line-progress :percentage="80" height="8" activeColor="#3776FF" :showText="false"></up-line-progress>
						</view>
						<view class="rate">60/260</view>
						<view class="rate">正确率 100%</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorArr: ['#3776FF', '#64C76C', '#8484FF', '#F05C1C', '#FDD650', '#6FD568', '#52C1D0']
			}
		},
		methods: {
			goPage(index) {
				console.log(index)
				this.$goPage('/pages/exercises/brushQuestions/brushQuestions')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
	  .ul {
		  width: 100%;
	    .li {
			width: 100%;
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1px solid #F4F4F4;
			.num {
				height: 34rpx;
				width: 34rpx;
				// padding: 10rpx 10rpx;
				text-align: center;
				background: #3776FF;
				border-radius: 50%;
				font-size: 24rpx;
				color: #fff;
				line-height: 34rpx;
				margin-top: 8rpx;
			}
			.h1 {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			.rightTxt {
				padding-left: 20rpx;
			}
	      .flex {
			.proccess {
				margin-right: 20rpx;
				width: 120rpx;
			}
			.rate {
				font-size: 24rpx;
				color: #CCCCCC;
				margin-right: 30rpx;
			}
	      }
	    }
	  }
	}
</style>