样式优化

subpkg/complete/complete.vue

@@ -1,13 +1,15 @@
 <template>
 	<view class="wrap">
 		<view class="stabar"></view>
+		<view class="secbar"> 
+		<view class="title">恭喜完成演练！</view>
+		</view>
 		<view class="marsk" v-if="showLayer"></view>
 		<view class="popup-layer" v-if="showMedal">
 			<image class="animg" src="/static/images/joy.png"></image>
 		</view>
 
 		<view class="mainwrap2">
-		<view class="title">恭喜完成本次演练！</view>
 		<view class="question-wrap">
 		<view class="question-list">
 		  <view  :class="item.correct === 0 ? 'question-item erritem':'question-item'" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
@@ -66,7 +68,7 @@
 		  </view>
 		</view>
 	</view>
-	<canvas class="shengcheng" id="photo" type="2d" style="width: 600rpx;height: 1000rpx"></canvas>
+	<canvas class="shengcheng" id="photo" type="2d"></canvas>
 		<!--生成海报后的图  -->
 		<view v-if="showLoad">
 			<view class='imagePathBox'>
@@ -127,7 +129,7 @@
 			  this.showMedal = false
 			  this.showLayer = false
 			  clearTimeout(this.timer)
-			}, 5000)
+			}, 2000)
 			this.roleId = options.roleId !=null ? options.roleId : this.roleId
 			this.questionFreId = options.questionFreId!=null ? options.questionFreId : this.questionFreId
 			this.sceneId = options.sceneId;
@@ -323,10 +325,10 @@
 				  context.fillStyle ="#FFF" // 背景颜色
 				  context.fillRect(0, 0, 500, 800)              //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
 				  //绘制左下角文字
-				  context.fontSize = 12;
+				  context.fontSize = 16;
 				  context.fillStyle = '#333';
 				  context.textAlign ='left';
-				  context.fillText("长按识别小程序～", 10, 520);
+				  context.fillText("长按识别小程序～", 16, 520);
 				  context.stroke();
                   // 图片对象
                  const image = canvas.createImage()
@@ -443,18 +445,20 @@
 			width: 33%;
 		}
 	}
-
+	
+	.secbar {
+		height: 4vh;
+		text-align: center;
+		.title {
+			display: inline-block;
+			margin-top: 0;
+		}
+	}
+	
 	.mainwrap2 {
-	    height: 94vh;
+		height: 90vh;
 	}
 
-	.title {
-		margin: 50rpx 0;
-		color: #333;
-		font-size: 36rpx;
-		font-weight: bold;
-		text-align: center;
-	}
 
 	.question-wrap {
 		position: relative;
@@ -639,33 +643,34 @@
 	.imagePathBox{
 		  width: 100%;
 		  height: 100%;
-		  background: rgba(0,0,0,0.7);
+		  background: rgba(0,0,0,0.6);
-		  position: fixed;
+		  position: absolute;
 		  top: 0;
 		  left: 0;
 		  right: 0;
 		  bottom: 0;
-		  z-index: 100000;
+		  z-index: 100;
 		}
 		.shengcheng{
-		  width: 86%;
+		  width: 350px;
-		  height: 60%;
+		  height: 580px;
-		  position: fixed;
+		  position: absolute;
-		  top: 18%;
+		  top: 45%;
 		  left: 50%;
-		  margin-left: -43%;
+		  -webkit-transform: translate(-50%, -50%);
+		  transform: translate(-50%, -50%);
 		  z-index: 999;
 		}
-		.baocun{
+		.baocun {
 		  display: block;
-		  width: 80%;
+		  width: 70%;
-		  height: 75rpx;
+		  height: 90rpx;
 		  padding: 0;
-		  line-height: 75rpx;
+		  line-height: 90rpx;
 		  text-align: center;
-		  position: fixed;
+		  position: absolute;
-		  bottom: 50rpx;
+		  bottom: 10%;
-		  left: 10%;
+		  left: 15%;
 		  color: #fff;
 		  font-size: 32rpx;
 		  border-radius: 50rpx;