|
|
|
@ -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); |
|
|
|
position: fixed; |
|
|
|
background: rgba(0,0,0,0.6); |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 100000; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
.shengcheng{ |
|
|
|
width: 86%; |
|
|
|
height: 60%; |
|
|
|
position: fixed; |
|
|
|
top: 18%; |
|
|
|
width: 350px; |
|
|
|
height: 580px; |
|
|
|
position: absolute; |
|
|
|
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%; |
|
|
|
height: 75rpx; |
|
|
|
width: 70%; |
|
|
|
height: 90rpx; |
|
|
|
padding: 0; |
|
|
|
line-height: 75rpx; |
|
|
|
line-height: 90rpx; |
|
|
|
text-align: center; |
|
|
|
position: fixed; |
|
|
|
bottom: 50rpx; |
|
|
|
left: 10%; |
|
|
|
position: absolute; |
|
|
|
bottom: 10%; |
|
|
|
left: 15%; |
|
|
|
color: #fff; |
|
|
|
font-size: 32rpx; |
|
|
|
border-radius: 50rpx; |
|
|
|
|
