|
|
|
@ -1,17 +1,34 @@ |
|
|
|
<template> |
|
|
|
<view class="v-container"> |
|
|
|
<span class="title">本次演练完成</span> |
|
|
|
<view class="wrap"> |
|
|
|
<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>{{answer}}</view> |
|
|
|
<view class="qucont">{{ask}}</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> |
|
|
|
<span @click="review()">演练回顾</span> |
|
|
|
<span @click="reChallenge()">重新挑战</span> |
|
|
|
<!-- <label><button open-type="share"></button>炫耀一下</label> --> |
|
|
|
<view open-type="share"><label><image src="/static/images/btn-xy.png"></image></label>炫耀一下</view> |
|
|
|
</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":"", |
|
|
|
"roleId":"", |
|
|
|
"questionFreId":"59088ceb55644b03b8d0c7d48d2f7d39", |
|
|
|
"roleId":"5f96b1baae1a47fbb17215a5dc46f5ce", |
|
|
|
questionList: [], |
|
|
|
recordList: [], |
|
|
|
"ask":"", |
|
|
|
@ -53,8 +92,8 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
this.roleId = options.roleId |
|
|
|
this.questionFreId = options.questionFreId |
|
|
|
//this.roleId = options.roleId |
|
|
|
//this.questionFreId = options.questionFreId |
|
|
|
this.getQuestionList() |
|
|
|
this.getRecordList() |
|
|
|
}, |
|
|
|
@ -107,51 +146,201 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.title{ |
|
|
|
font-size: 18px; |
|
|
|
@import url("@/static/base_css.css"); |
|
|
|
|
|
|
|
/* 设置弹出层 */ |
|
|
|
.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; |
|
|
|
justify-content: space-around; |
|
|
|
margin: 15px 0; |
|
|
|
/*display: flex; |
|
|
|
justify-content: space-around;*/ |
|
|
|
margin: 0 2%; |
|
|
|
|
|
|
|
.question-item{ |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
align-items: center; |
|
|
|
background-color: lightgreen; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.question-item { |
|
|
|
display: inline-block; |
|
|
|
margin: 2% 1.5%; |
|
|
|
padding: 1% 3%; |
|
|
|
/* width: 60rpx; */ |
|
|
|
/* 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{ |
|
|
|
border: 1px solid lightgreen; |
|
|
|
width: 96%; |
|
|
|
margin-left: 2%; |
|
|
|
.answer-content { |
|
|
|
display: none; |
|
|
|
position: absolute; |
|
|
|
z-index: 100; |
|
|
|
margin: 2% 3%; |
|
|
|
padding: 2%; |
|
|
|
width: 90%; |
|
|
|
height: 400rpx; |
|
|
|
background: #fff; |
|
|
|
border: 1px solid #18c569; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.myitem span { |
|
|
|
position: relative; |
|
|
|
margin: 2% 17% 0 0; |
|
|
|
padding-right: 0.6rem; |
|
|
|
font-size: 0.8rem; |
|
|
|
color: #666; |
|
|
|
.qucont { |
|
|
|
margin: 1% 0 3% 0; |
|
|
|
color: #000; |
|
|
|
font-family: 30rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.corans { |
|
|
|
color: #18c569; |
|
|
|
font-weight: bold; |
|
|
|
label { |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.myitem span b { |
|
|
|
color: #333; |
|
|
|
font-size: 1.3rem; |
|
|
|
.youans { |
|
|
|
margin: 2% 0; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.myitem span i { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
border-radius: 100%; |
|
|
|
background-color: #fb3737; |
|
|
|
.analys { |
|
|
|
margin: 3% 0; |
|
|
|
|
|
|
|
label { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
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> |
|
|
|
|
