questionbankvue3/pages/exercises/exam/exam.vue

<template>
	<view class="content" id="brushQuestions">
		<view class="row row1">
			<view class="userInfoBox">
				<view class="examNo">
					<view class="h3">洛阳学车</view>
					<view class="card">第01号台</view>
					<view class="back">
						<u-icon name="arrow-left"  size="16"></u-icon>
					</view>
				</view>
				<view class="user">
					<view class="card">
						<view class="h3">考生信息</view>
						<view class="avatar">
							<image src="@/static/logo.png" mode=""></image>
						</view>
						<view class="txt">姓名：大乔</view>
						<view class="txt">性别：男</view>
						<view class="txt">类型：小车</view>
						<view class="txt">科目：科目一</view>
					</view>
				</view>
			</view>
			<view class="examConBox">
				<view class="leftBox">
					<view class="h3">考试题目</view>
					<view class="questionTxt">
						<view class="txt">32.如图所示，驾驶机动车遇到这种情况，以下做法正确的是？</view>
						<view class="txt">A:减速慢行</view>
						<view class="txt">B:减速慢行</view>
						<view class="txt">C:减速慢行</view>
						<view class="txt">D:减速慢行</view>
					</view>
					<view class="answer flex-b">
						<view class="lab">您的答案：</view>
						<view class="rightSelect flex">
							<view class="lab">选项：</view>
							<view class="optio flex">
								<view class="optionItem">A</view>
								<view class="optionItem">B</view>
								<view class="optionItem active">C</view>
								<view class="optionItem">D</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rightBox">
					<!-- 右边盒子 -->
					<table style="width: 100%;height: 100%;">
					  <tr>
					    <th class="blueItem br">题目</th>
					    <th v-for="(item,index) in 10" class="blueItem br">{{index+1}}列</th>
					  </tr>
					  <tr v-for="(item,index) in 10">
					    <td class="blueItem bb">{{index+1}}行</td>
					    <td v-for="(item2,index2) in 10" class="ansItem">{{ item2 }}</td>
					  </tr>
					</table>
				</view>
			</view>
		</view>
		
		<view class="row row2">
			<view class="timeBox">
				<view class="h3">考试时间</view>
				<view class="time">15：10</view>
			</view>
			<view class="leftTpsBox">
				<view class="card">
					<view class="h3">操作提示</view>
					<view class="txt">本题为单选题，请在备选答案中选择一个你认为正确的答案！</view>
				</view>
			</view>
			<view class="rightBtnBox">
				<view class="btn hui">上一题</view>
				<view class="btn hui">下一题</view>
				<view class="btn">交卷</view>
			</view>
		</view>
		
		<view class="picBox">
			<view class="h3">考题图片</view>
			<view class="imgBox">
				<image src="https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg"  @click="previewImg" mode="aspectFit"></image>
			</view>
			<u-popup :show="show" mode="center" :closeable="true" @close="show=false" bgColor="transparent">
				<view class="imgView">
					<!-- <view class="closeIcon" @click="show=false">
						<u-icon name="close-circle" color="#fff" size="28"></u-icon>
					</view> -->
					<view class="img">
						<image src="https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg" mode="aspectFit"></image>
					</view>
				</view>
			</u-popup>
		</view>
		

	</view>
	
</template>
<script setup>
	import { detectOrient } from '@/utils/utils.js'
	import { ref, onMounted, nextTick } from 'vue'
	const currentNav = ref('1')
	const show = ref(false)
	onMounted(()=>{
		detectOrient('#brushQuestions')
	})
	
	function previewImg() {
		show.value = true
	}
	
</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%;
	}
	.imgView {
		position: relative;
		background: none;
		// max-width: 80%;
		// padding: 50px;
		.closeIcon {
			position: absolute;
			color: #fff;
			top: 40rpx;
			left: 40rpx;
			z-index: 99;
			background-color: #333;
			border-radius: 50%;
		}
		.img {
			// width: calc(100vh - 200rpx);
			// height: calc(100vw - 100rpx);
			width: 750rpx;
			height: 750rpx;
		}
	}
	.content {
		padding: 30rpx 30rpx 0rpx 30rpx;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F7FBFE;
		font-size: 20rpx;
		
		// display: flex;
		.h3 {
			position: absolute;
			top: -16rpx;
			left: 0;
			width: 100%;
			text-align: center;
			color: $themC;
		}
		  .row {
			  width: 100%;
			  display: flex;
		    .userInfoBox {
				width: 140rpx;
				// height: 408rpx;
				// background-color: pink;
				display: flex;
				flex-direction: column;
				.examNo {
					width: 100%;
					height: 60rpx;
					background: #FFFFFF;
					border: 1px solid #F0F0F0;
					position: relative;
				  
				
				  .card {
					line-height: 70rpx;
					text-align: center;
					padding-left: 20rpx;
				  }
				
				  .back {
					  position: absolute;
					  left: -20rpx;
					  top: 50%;
					  transform: translateY(-50%);
					  width: 40rpx;
					  height: 40rpx;
					  background: #fff;
					  border-radius: 50%;
					  display: flex;
					  align-items: center;
					  justify-content: center;
				    u-icon {
						
				    }
				  }
				}
				
				.user {
					// position: relative;
					flex: 1;
					height: 0;
					padding: 10rpx 0 0 0rpx;
				  .h3 {
					
				  }
				
				  .card {
					padding-left: 15rpx;
					position: relative;
					background: #FFFFFF;
					border: 1px solid #F0F0F0;
					height: 100%;
				    .avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-top: 36rpx;
						margin-bottom: 20rpx;
				      img {
				
				      }
				    }
				
				    .txt {
						margin: 10px 0;
						font-size: 18rpx;
				    }
				  }
				}
				
		    }
		
		    .examConBox {
				width: 0;
				flex: 1;
				display: flex;
				// height: 408rpx;
				padding-left: 20rpx;
		      .leftBox {
				flex: 2;
				background-color: #fff;
				position: relative;
				display: flex;
				flex-direction: column;
				.h3 {
					left: 40rpx;
					text-align: left;
				}
				
				.questionTxt {
					padding: 30rpx;
					flex: 1;
					line-height: 2em;
				  .txt {
				
				  }
				}
				
				.answer.flex-b {
					height: 60rpx;
					border-top: 1px solid #F0F0F0;
					padding-left: 20rpx;
				  .lab {
					
				  }
				
				  .rightSelect {
					  
				    .lab {
				
				    }
				
				    .optio {
						padding-left: 20rpx;
				      .optionItem {
						width: 38rpx;
						height: 38rpx;
						border: 1px solid #F0F0F0;
						font-size: 18rpx;
						color: #333;
						text-align: center;
						line-height: 38rpx;
						margin-right: 20rpx;
						&.active {
							color: #fff;
							background-color: $themC;
						}
				      }
				    }
				  }
				}
				
		      }
		
		      .rightBox {
				flex: 1;
				background-color: #fff;
				
				table {
				  display: table;
				  border-collapse: collapse;
				  border-spacing: 0px;
				   table-layout: fixed;
				  td, th {
					  width: 9.09%;
					  // text-overflow: ellipsis;
					  overflow: hidden;
					  white-space: nowrap;
				  }
				  // border-color: gray;
				}
				
				.ansItem {
					font-size: 24rpx;
					text-align: center;
					border-bottom: 1px solid #E1DFDF;
					border-right: 1px solid #E1DFDF;
					color: green;
					&.green {
						color: green;
					}
					&.red {
						color: red;
					}
				}
				.blueItem {
					background-color: $themC;
					color: #fff;
					text-align: center;
					font-size: 24rpx;
					&.br {
						border-right: 1px solid #fff;
						&:last-child {
							border: none;
						}
					}
					&.bb {
						border-top: 1px solid #fff;
						// &:last-child {
						// 	border: none;
						// }
					}
				}
		      }
		    }
			&.row1 {
				flex: 4;
			}
			&.row2 {
				height: 100rpx;
				padding: 20rpx 0;
				.timeBox {
					width: 140rpx;
					height: 100%;
					background-color: #fff;
					border: 1px solid #F0F0F0;
					position: relative;
					.h3 {
						font-weight: 400;
					}
					.time {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						line-height: 60rpx;
						text-align: center;
					}
					
				}
				
				.leftTpsBox {
					padding-left: 20rpx;
					flex: 2;
					position: relative;
					.card {
						background-color: #fff;
						height: 100%;
					}
					.h3 {
						text-align: left;
						left: 40rpx;
					}
					.txt {
						padding: 14rpx 20rpx 0 20rpx;
					}
				}
				
				.rightBtnBox {
					flex: 1;
					padding-left: 20rpx;
					display: flex;
					// justify-content: space-between;
					justify-content: flex-end;
					.btn {
						width: 123rpx;
						// padding: 0 24rpx;
						margin-left: 20rpx;
						text-align: center;
						font-size: 24rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #F4F4F4;
						border: 1px solid #E1DFDF;
						line-height: 60rpx;
						background: #F4F4F4;
					}
				}
			}
			
			
		  }
		
		  .picBox {
			width: 100%;
			flex: 2;
			background-color: #fff;
			border: 1px solid #F0F0F0;
			padding: 20rpx;
			position: relative;
			.h3 {
				text-align: left;
				left: 40rpx;
			}
			.imgBox {
				width: 650px;
				// max-height: 163rpx;
				// background-color: skyblue;
				height: 100%;
				overflow: hidden;
				margin: 0 auto;
			}
		  }
	}
	
	
</style>