questionbankvue3/pages/exercises/brushQuestions/brushQuestions.vue

<template>
	<view class="content">
		<up-navbar leftText=" " title="" :safeAreaInsetTop="false" :autoBack="true">
			<template #center>
				<view class="u-nav-slot flex">
					<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">答题模式</view>
					<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">背题模式</view>
				</view>
			</template>
		</up-navbar>
		
		<u-button type="primary" text="去考试页面" @click="goEmam"></u-button>

		<view class="con padding">
			<view class="h1_row">
				<text class="tag">单选</text>
				<text class="h1">机动车驾驶人在实习期内驾驶机动车不得牵引挂车。</text>
			</view>
			<view class="option">
				<view class="optionItem flex">
					<view class="icon">
						<image src="@/static/logo.png" mode=""></image>
					</view>
					<view class="text">正确</view>
				</view>
			</view>
			<view class="answer flex">
				<view class="ans">正确答案是：<text>B</text></view>
				<view class="ans">您的答案是：<text>B</text></view>
			</view>
			<view class="analysis">
				<view class="tit">题目解析</view>
				<view class="txt">解析解析解析解析解析解析解析解析解析解析解析解析</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNav: '1'
			}
		},
		methods: {
			changeNav(val) {
				console.log(window)
				if(this.currentNav == val) return
				this.currentNav = val
			},
			goEmam() {
				uni.navigateTo({
					url: '/pages/exercises/exam/exam'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	image {display: block;width: 100%;height: 100%;}
.content {
	padding: 120rpx 0 0 0;
	.u-nav-slot {
		width: 306rpx;
		height: 54rpx;
		border-radius: 10rpx;
		border: 1px solid #333333;
		display: flex;

		.btn {
			font-size: 24rpx;
			color: #333333;
			flex: 1;
			text-align: center;
			line-height: 54rpx;

			&.active {
				background-color: #333333;
				color: #fff;
			}
		}
	}

	.con {
		.h1_row {
			margin-bottom: 50rpx;
			.tag {
				display: inline-block;
				// width: 66px;
				height: 36rpx;
				line-height: 36rpx;
				padding: 4rpx 6rpx;
				background: #63C168;
				border-radius: 6rpx;
				margin-top: -2rpx;
				margin-right: 16rpx;
				font-size: 28rpx;
				color: #fff;
			}

			text.h1 {
				font-size: 36rpx;
			}
		}

		.option {
			width: 100%;
			.optionItem {
				margin-bottom: 50rpx;
				align-items: center;
				.icon {
					width: 56rpx;
					height: 56rpx;
					margin-right: 36rpx;
					image {
						border-radius: 50%;
					}
				}

				.text {
					font-size: 32rpx;
				}
			}
		}

		.answer {
			height: 90rpx;
			background: #F4F4F4;
			line-height: 90rpx;
			padding: 0 30rpx;
			margin-top: 20rpx;
			.ans {
				margin-right: 60rpx;
				text {
					color: red;
				}
			}
		}

		.analysis {
			margin-top: 60rpx;
			.tit {
				font-weight: 700;
				font-size: 32rpx;
				position: relative;
				padding-left: 30rpx;
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 8rpx;
					width: 6rpx;
					height: 30rpx;
					background: linear-gradient(0deg, #43EA80 0%, #38F8D4 100%);
					border-radius: 3rpx;
				}
			}

			.txt {
				margin-top: 39rpx;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
}
</style>