Anti-fraud-mobile/pages/exercise/components/questionCard/index.vue

<template>
	<view class="questionCard">
		<view class="title">专项答题</view>
		<view class="subTitle">术业有专攻，道义有精论</view>
		<view class="tipBox">
			<view class="tip" v-for="item in tipList" :key="item.id" :style="{backgroundColor:item.color}">
				{{item.val}}
			</view>
		</view>
		<view class="numberBox">
			<view 
			class="number" 
			v-for="item in 32" 
			:key="item" 
			style="background-color: #eeecec"
			@click="handleClick(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tipList: [{
						id: 1,
						val: "未答",
						color: "#eeecec"
					},
					{
						id: 2,
						val: "正确",
						color: "#22c134"
					},
					{
						id: 3,
						val: "错误",
						color: "#ff4d4f"
					},
				]
			};
		},
		methods:{
			handleClick(val){
				// 跳转到对应题号的题目	
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}

	.questionCard {
		padding: 40rpx;

		.title {
			font-size: 60rpx;
			font-weight: 900;
		}

		.subTitle {
			margin: 20rpx 0;
			color: #666;
		}

		.tipBox {
			// background-color: pink;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 50rpx 0;
		}

		.numberBox {
			display: grid;
			// grid-template-columns: 1fr 1fr 1fr;
			grid-template-columns: 100rpx 100rpx 100rpx 100rpx 100rpx;
			justify-content: space-between;
			row-gap: 30rpx;
		}

		.tip,
		.number {
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 20rpx;
		}
	}
</style>