考试静态页面

pages/exercises/exam/exam.vue

@@ -46,7 +46,17 @@
 					</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>
@@ -74,13 +84,13 @@
 			<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">
+			<u-popup :show="show" mode="center" :closeable="true" @close="show=false" bgColor="transparent">
 				<view class="imgView">
-					<view class="closeIcon" @click="show=false">
+					<!-- <view class="closeIcon" @click="show=false">
 						<u-icon name="close-circle" color="#fff" size="28"></u-icon>
-					</view>
-					<view class="imgBox">
-						<image src="https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg" mode="widthFix"></image>
+					</view> -->
+					<view class="img">
+						<image src="https://lyjp-bucket-main.oss-cn-beijing.aliyuncs.com/adf614ab07f86aebb0b7b3492e8ae500907389f08d238f49665e7ac47efd4bde.jpg" mode="aspectFit"></image>
 					</view>
 				</view>
 			</u-popup>
@@ -166,8 +176,8 @@
 	.imgView {
 		position: relative;
 		background: none;
-		max-width: 80%;
-		padding: 50px;
+		// max-width: 80%;
+		// padding: 50px;
 		.closeIcon {
 			position: absolute;
 			color: #fff;
@@ -177,8 +187,11 @@
 			background-color: #333;
 			border-radius: 50%;
 		}
-		.imgBox {
-			width: 100%;
+		.img {
+			// width: calc(100vh - 200rpx);
+			// height: calc(100vw - 100rpx);
+			width: 750rpx;
+			height: 750rpx;
 		}
 	}
 	.content {
@@ -340,7 +353,52 @@
 		
 		      .rightBox {
 				flex: 1;
-				background-color: blanchedalmond;
+				background-color: #fff;
+				
+				table {
+				  display: table;
+				  border-collapse: collapse;
+				  border-spacing: 0px;
+				  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 {
@@ -431,4 +489,6 @@
 			}
 		  }
 	}
+	
+	
 </style>