questionbankvue3/pages/exercises/brushQuestions/brushQuestions - 副本 (2).vue

<template>
	<view class="content" id="brushQuestions">
		<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>

		<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 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 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>
		<u-popup :show="show" mode="center">
		            <view>
		                <text>出淤泥而不染，濯清涟而不妖</text>
		            </view>
				</u-popup>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNav: '1',
				show: true,
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.detectOrient();
			})
			 
		},
		methods: {
			changeNav(val) {
				console.log(window)
				if(this.currentNav == val) return
				this.currentNav = val
			},
			detectOrient() {
				var width = document.documentElement.clientWidth,
						height = document.documentElement.clientHeight,
						// $wrapper = document.getElementsByTagName('body')[0],
					    $wrapper = document.querySelector('#brushQuestions'),
						style = "";
					if (width >= height) { // 横屏
						style += "width:" + width + "px;"; // 注意旋转后的宽高切换
						style += "height:" + height + "px;";
						style += "-webkit-transform: rotate(0); transform: rotate(0);";
						style += "-webkit-transform-origin: 0 0;";
						style += "transform-origin: 0 0;";
						console.log(1)
					} else { // 竖屏
						style += "width:" + height + "px;";
						style += "height:" + width + "px;";
						style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
						// 注意旋转中点的处理
						style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
						style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
						console.log(2)
					}
					$wrapper.style.cssText = style;
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		width: 100%;
		height: 100%;
	}
		html{
			width: 100vh;
			height: 100vw;
			-webkit-transform: rotate(90deg);
			-webkit-transform-origin: 50vw 50vw;
			transform: rotate(90deg);
			transform-origin: 50vw 50vw;
			
		}

	image {display: block;width: 100%;height: 100%;}
.content {
	padding: 0rpx 0 0rpx 0rpx;
	width: 100%;
	height: 100%;
	overflow: auto;
	.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>