小程序完成页面样式

components/s-video/s-video.vue

@@ -93,13 +93,12 @@
 					this.end = true;
 					this.answerList = [];
 					this.question = false;
-					// uni.navigateTo({
+					uni.navigateTo({
-					//   url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId
+					  url: '/subpkg/complete/complete?questionFreId='+this.questionFreId+'&roleId='+this.jsonId
-					// })
+					})
 				}
 			},
 			nextQuestion(outId, obj) {
-				// 点击开始后先增加题次
 				if(2==outId) {
 					this.$api.addQuestionFre({
 						roleId : this.jsonId,

pages.json

@@ -136,7 +136,8 @@
 			"style" : 
 			{
 				"navigationBarTitleText" : "",
-				"enablePullDownRefresh" : false
+				"enablePullDownRefresh" : false,
+				"navigationStyle": "custom"
 			}
 		},
 		{

subpkg/complete/complete.vue

@@ -1,17 +1,34 @@
 <template>
-	<view class="v-container">
+	<view class="wrap">
-		<span class="title">本次演练完成</span>
+		<view class="stabar"></view>
+		<view class="marsk"></view>
+		<view class="popup-layer">
+			<image class="animg" src="/static/images/joy.png"></image>
+		</view>
+
+		<view class="mainwrap">
+		<view class="title">恭喜完成本次演练！</view>
+		<view class="question-wrap">
 		<view class="question-list">
 		  <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
-		    <span class="question-num">{{i+1}}</span>
+				<span class="question-num">{{i+1}}</span>
 		  </view>
+		  <view class="question-item erritem" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
+			<span class="question-num">{{i+1}}</span>
+		  </view>  
+			  
 		</view>
 		<view class="answer-content">
-			<view>{{ask}}</view>
+			<view class="qucont">{{ask}}</view>
-			<view>{{answer}}</view>
+			<view class="youans"><label>您的答案：</label>{{answer}}</view>
+			<view class="corans"><label>正确答案：</label>{{answer}}</view>
+			<view class="analys"><label>解析：</label>
+			<view>解析内容解析内容……</view>
+			</view>
+		</view>
 		</view>
 	    <view class="question-record">
-			<span>演练记录：</span>
+			<label>演练记录：</label>
 	    	<view class="list">
 	    	  <view class="item" v-for="(item, i) in recordList" :key="i">
 	    	    <span>{{item.createTime}}</span>
@@ -23,20 +40,42 @@
 		</view>
 		<view class="perinfo">
 		  <view class="myitem"> 
-			<span><button open-type="share"></button>炫耀一下</span>
+			<!-- <label><button open-type="share"></button>炫耀一下</label> -->
-			<span @click="review()">演练回顾</span>
+			<view open-type="share"><label><image src="/static/images/btn-xy.png"></image></label>炫耀一下</view>
-			<span @click="reChallenge()">重新挑战</span> 
+		  </view>
+		  <view class="myitem"> 
+			<view @click="review()"><label><image src="/static/images/btn-hg.png"></image></label>演练回顾</view>
+		  </view>
+		  <view class="myitem"> 
+			<view @click="reChallenge()"><label><image src="/static/images/btn-cx.png"></image></label>重新挑战</view>
+		  </view>
+		</view>
+	</view>
+	<view class="popup-share">
+		<label class="medimg"><image src="/static/images/medal_1.png"></image></label>
+		<view class="congrat">恭喜你获得1枚成就勋章！</view>
+		<view class="perinfo">
+		  <view class="myitem"> 
+			<view @click=""><label><image src="/static/images/btn-wx.png"></image></label>分享给微信好友</view>
+		  </view>
+		  <view class="myitem"> 
+			<view @click=""><label><image src="/static/images/btn-pyq.png"></image></label>分享到朋友圈</view>
+		  </view>
+		  <view class="myitem"> 
+			<view @click=""><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
 		  </view>
 		</view>
 	</view>
+	</view>
+	
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-			   "questionFreId":"",
+			   "questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39",
-			   "roleId":"",
+			   "roleId":"5f96b1baae1a47fbb17215a5dc46f5ce",
 			   questionList: [],
 			   recordList: [],
 			   "ask":"",
@@ -53,8 +92,8 @@
 		    }
 		},
 		onLoad(options) {
-			this.roleId = options.roleId
+			//this.roleId = options.roleId
-			this.questionFreId = options.questionFreId
+			//this.questionFreId = options.questionFreId
 			this.getQuestionList()
 			this.getRecordList()
 		},
@@ -107,51 +146,201 @@
 </script>
 
 <style lang="scss">
-	.title{
+	@import url("@/static/base_css.css");
-		font-size: 18px;
+	
+	/* 设置弹出层 */
+	.marsk {
+		display: none;
+		position: absolute;
+		z-index: 999;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, .5);
+	}
+	.popup-layer, .popup-share {
+		display: none;
+		position: absolute;
+		top: 45%;
+		left: 50%;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		width: 600rpx;
+		height: 400rpx;
+		padding: 30rpx;
+		z-index: 9999;
+	}
+	
+	.popup-layer .animg {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.popup-share {
+		height: 500rpx;
+		background-color: #e4eafe;
+		border-radius: 30rpx;
+		.medimg {
+			position: absolute;
+			top: -15%;
+			left: 50%;
+			transform: translate(-50%, -10%);
+			width: 300rpx;
+			height: 230rpx;
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.congrat {
+			margin: 25% auto 10%;
+			color: #ff6b08;
+			font-size: 40rpx;
+			text-align: center;
+		}
+		.myitem {
+		    margin: 0;
+		    width: 33%;
+		}
+	}
+	
+	.title {
+		margin: 50rpx 0;
+		color: #333;
+		font-size: 36rpx;
+		font-weight: bold;
 		text-align: center;
 	}
+	
+	.question-wrap {
+		position: relative;
+		width: 100%;
+	}
 	.question-list {
-	  display: flex;
+	  /*display: flex;
-	  justify-content: space-around;
+	  justify-content: space-around;*/
-	  margin: 15px 0;
+	  margin: 0 2%;
 	  
-	  .question-item{
+	  .question-item {
-	    width: 60rpx;
+			display: inline-block;
-	    height: 60rpx;
+			margin: 2% 1.5%;
-		align-items: center;
+			padding: 1% 3%;
-	    background-color: lightgreen;
+			/* width: 60rpx; */
-	    color: white;
+			/* height: 60rpx; */
-	  }
+			align-items: center;
+			background-color: #18c569;
+			border-radius: 20rpx;
+			color: #fff;
+			font-size: 40rpx;
+			font-weight: bold;
+			text-align: center;	
+		}
+	    .erritem {
+			background-color: #fb3737;
+		}	
 	}
-   .answer-content{
+   .answer-content {
-	   border: 1px solid lightgreen;
+	   display: none;
-	   width: 96%;
+	   position: absolute;
-	   margin-left: 2%;
+	   z-index: 100; 
+	   margin: 2% 3%;
+	   padding: 2%;
+	   width: 90%;
 	   height: 400rpx;
+	   background: #fff;
+	   border: 1px solid #18c569;
 	   border-radius: 10px;
    }
    
-   .myitem span {
+   .qucont {
-   	position: relative;
+	   margin: 1% 0 3% 0;
-   	margin: 2% 17% 0 0;
+	   color: #000;
-   	padding-right: 0.6rem;
+	   font-family: 30rpx;
-   	font-size: 0.8rem;
+	   font-weight: bold;
-   	color: #666;
+   }
+   
+   .corans {
+	   color: #18c569;
+	   font-weight: bold;
+	   label {
+		  font-size: 36rpx;  
+	   }
    }
    
-   .myitem span b {
+   .youans {
-   	color: #333;
+	   margin: 2% 0;
-   	font-size: 1.3rem;
+	   color: #999;
    }
    
-   .myitem span i {
+   .analys {
-   	position: absolute;
+       margin: 3% 0;
-   	top: 0;
+	   
-   	right: 0;
+	   label {
-   	width: 8px;
+		  font-size: 36rpx; 
-   	height: 8px;
+		  font-weight: bold;
-   	border-radius: 100%;
+	   }
-   	background-color: #fb3737;
+	   view {
+		   color: #666;
+		   line-height: 1.75;
+	   }
+   }
+   
+   .question-record {
+		margin: 6% 3% 10%;
+		width: 94%;
+		height: 45%;
+		overflow: hidden;
+		label {
+		  font-size: 32rpx; 
+		  font-weight: bold;
+		  line-height: 2;  
+		}
+		.list {
+			width: 100%;
+			height: calc(100% - 80rpx);
+			line-height: 1.75;
+			overflow-y: auto;
+			.item {
+				margin: 2% 0;
+				border-bottom: 1px dotted #ddd;
+			}
+		}
+   }
+   .backIndex {
+       margin: 2% auto;
+       width: 86%;
+	   button {
+		   background-color: #1367fe !important;
+		   border-radius: 50rpx !important;
+		   color: #fff !important;
+	   }
    }
+   
+   .perinfo {
+		display: flex;
+		margin: 5% 0;
+		width: 100%;
+		justify-content: center;
+	}
+   
+   .myitem {
+		margin: 3% 8%;
+		width: 15%;
+		text-align: center;
+		font-size: 0.8rem;
+		color: #666;
+	}
+   
+   .myitem > view > label {
+		display: block;
+		position: relative;
+		margin: 20rpx auto;
+		width: 100rpx;
+		height: 100rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+   }
+   
+
 </style>