kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式优化

h5_css
蟑螂恶霸 2 years ago
parent
8c2937ba25
commit
6e397d7eea
5 changed files with 225 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 59
      components/s-video/res-s-video.vue
  2. 90
      components/s-video/s-video.vue
  3. BIN
      static/images/icon_play2.png
  4. BIN
      static/images/medal_1.png
  5. 185
      subpkg/review/review.vue

59
components/s-video/res-s-video.vue
View File

@ -7,7 +7,10 @@
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> --> <!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
<view class="popup-layer"> <view class="popup-layer">
<!-- <h2>请选择</h2> --> <!-- <h2>请选择</h2> -->
<view>{{ask}}</view> <view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<view class="antxt1">{{ask}}</view>
</view>
<view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList" :key="index"> <view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList" :key="index">
<image class="animg" src="/static/videos/skin_bg_1a.png"></image> <image class="animg" src="/static/videos/skin_bg_1a.png"></image>
<!-- <view class="antxt">{{item.channel}}</view> --> <!-- <view class="antxt">{{item.channel}}</view> -->
@ -22,15 +25,23 @@
<p>开始</p> <p>开始</p>
</view> </view>
</view> --> </view> -->
<view class="popup-layer-back" v-show="resCheck"> <!-- <view class="popup-layer-back" v-show="resCheck">
<view><image style="position: absolute; top: 20%; left: 10%;" :src="failUrl"></image></view> <view><image style="position: absolute; top: 20%; left: 10%;" :src="failUrl"></image></view>
<view class="popup-layer" style="color: red;" @click="toResVideo()"> <view class="popup-layer" style="color: red;" @click="toResVideo()">
<view class="anitem1"> <view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image> <image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<!-- <view class="antxt1">重新选择逃生路线</view> --> <!-- <view class="antxt1">重新选择逃生路线</view> -->
</view> <!-- </view>
</view> </view>
</view> </view> -->
<view class="popup-layer-back" v-show="resCheck">
<view class="failed-tip">
<image :src="failUrl"></image>
</view>
<view class="popup-layer fullbox" @click="toResVideo()">
<view class="btnsty">重新选择逃生路线</view>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -334,18 +345,14 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
/* background-color: #fff; */
color: #fff; color: #fff;
padding: 20px;
z-index: 9999; z-index: 9999;
} }
.popup-layer .anitem1 { .popup-layer .anitem1 {
position: relative; position: relative;
/* margin: 80rpx; */
width: 650rpx; width: 650rpx;
height: 200rpx; height: 200rpx;
/* text-align: center; */
} }
.popup-layer .anitem1 .animg1 { .popup-layer .anitem1 .animg1 {
@ -408,6 +415,42 @@
height: 50%; height: 50%;
} }
.failed-tip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 560rpx;
height: 400rpx;
}
.failed-tip image {
width: 100%;
height: 100%;
}
.fullbox {
width: 100%;
height: 100%;
}
.btnsty {
position: absolute;
left: 20%;
bottom: 10%;
width: 60%;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-size: 30rpx;
border-radius: 50rpx;
background: rgba(255, 255, 255, 0.2);
border: 1px solid #1367fe;
color: #fff;
white-space: nowrap;
}
/* 设置关闭按钮 */ /* 设置关闭按钮 */
.popup-layer-close { .popup-layer-close {
position: absolute; position: absolute;

90
components/s-video/s-video.vue
View File

@ -4,7 +4,9 @@
<image class="animg" src="/static/images/start.png"></image> <image class="animg" src="/static/images/start.png"></image>
</view> </view>
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> <view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
<video id="video_play" @click="stopPlay" :src="videoObj.videoUrl" :controls="false" @ended="videoEnded()" @loadedmetadata="onMetadataLoaded" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></video> <video id="video_play" @click="stopPlay" :src="videoObj.videoUrl" :controls="false" @ended="videoEnded()"
@loadedmetadata="onMetadataLoaded" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop"
style="width: 100%;height: 100%;" object-fit="cover"></video>
<view class="question"></view> <view class="question"></view>
<view class="popup-layer-back" v-if="!start" v-show="question"> <view class="popup-layer-back" v-if="!start" v-show="question">
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> --> <!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
@ -14,7 +16,8 @@
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image> <image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<view class="antxt1">{{ask}}</view> <view class="antxt1">{{ask}}</view>
</view> </view>
<view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList" :key="index"> <view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList"
:key="index">
<image class="animg" src="/static/videos/skin_bg_1a.png"></image> <image class="animg" src="/static/videos/skin_bg_1a.png"></image>
<view class="antxt">{{item.channel}}</view> <view class="antxt">{{item.channel}}</view>
<view class="judd jdok" v-show="isOk && item.choose === 'true'"> <view class="judd jdok" v-show="isOk && item.choose === 'true'">
@ -32,14 +35,13 @@
</view> </view>
</view> --> </view> -->
<view class="popup-layer-back" v-show="resCheck"> <view class="popup-layer-back" v-show="resCheck">
<view><image style="position: absolute; top: 20%; left: 10%;" :src="failUrl"></image></view> <view class="failed-tip">
<view class="popup-layer" @click="toResVideo()"> <image :src="failUrl"></image>
<view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<view class="antxt1">重新选择逃生路线</view>
</view>
</view> </view>
</view> <view class="popup-layer fullbox" @click="toResVideo()">
<view class="btnsty">重新选择逃生路线</view>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -76,7 +78,7 @@
resCheck: false, resCheck: false,
showLayer: false, showLayer: false,
isResVideo: false, isResVideo: false,
failUrl: uni.$http.baseUrl +"/profile//images/fail.gif", failUrl: uni.$http.baseUrl + "/profile//images/fail.gif",
innerAudioContext: null, innerAudioContext: null,
}; };
}, },
@ -106,7 +108,7 @@
this.videoHeight = res.screenHeight; this.videoHeight = res.screenHeight;
} }
}); });
this.innerAudioContext = uni.createInnerAudioContext(); this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = true; this.innerAudioContext.autoplay = true;
this.innerAudioContext.src = "/static/videos/supermario.mp3"; this.innerAudioContext.src = "/static/videos/supermario.mp3";
@ -183,7 +185,7 @@
this.innerAudioContext.stop(); this.innerAudioContext.stop();
}, },
onMetadataLoaded(event) { onMetadataLoaded(event) {
if(this.isResVideo) { if (this.isResVideo) {
this.isResVideo = false; this.isResVideo = false;
const duration = event.detail.duration; const duration = event.detail.duration;
this.videoContext.seek(duration); this.videoContext.seek(duration);
@ -196,7 +198,7 @@
this.$api.addQuestionFre({ this.$api.addQuestionFre({
roleId: this.jsonId, roleId: this.jsonId,
sceneId: this.sceneId, sceneId: this.sceneId,
userId : this.userId userId: this.userId
}) })
.then(res => { .then(res => {
this.questionFreId = res.data; this.questionFreId = res.data;
@ -207,7 +209,7 @@
// 先提交所选答案 // 先提交所选答案
if (null != obj) { if (null != obj) {
// 判断答题是否正确 // 判断答题是否正确
if(this.correct.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) { if (this.correct.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) {
// 控制选中答案单条显示对错 // 控制选中答案单条显示对错
this.$set(obj, 'choose', 'true'); this.$set(obj, 'choose', 'true');
isCorrect = 1 isCorrect = 1
@ -247,10 +249,10 @@
that.isError = false; that.isError = false;
that.isOk = false; that.isOk = false;
that.hasNodeId(outId); that.hasNodeId(outId);
if(!that.videoObj.videoUrl.includes("http")) { if (!that.videoObj.videoUrl.includes("http")) {
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl
} }
// 用于记录上一个视频 // 用于记录上一个视频
if (null == obj) { if (null == obj) {
that.resVideoUrl = that.videoObj.videoUrl; that.resVideoUrl = that.videoObj.videoUrl;
@ -328,14 +330,18 @@
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .35); background-color: rgba(0, 0, 0, .35);
} }
.animg { .animg {
position:absolute; position: absolute;
top:0;left:0;right:0;bottom:0; top: 0;
margin:auto; left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
/* 首先设置背景层 */ /* 首先设置背景层 */
.popup-layer-back { .popup-layer-back {
position: absolute; position: absolute;
@ -343,7 +349,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.8);
z-index: 9998; z-index: 9998;
} }
@ -353,18 +359,14 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
/* background-color: #fff; */
color: #fff; color: #fff;
padding: 20px;
z-index: 9999; z-index: 9999;
} }
.popup-layer .anitem1 { .popup-layer .anitem1 {
position: relative; position: relative;
/* margin: 80rpx; */
width: 650rpx; width: 650rpx;
height: 200rpx; height: 200rpx;
/* text-align: center; */
} }
.popup-layer .anitem1 .animg1 { .popup-layer .anitem1 .animg1 {
@ -421,12 +423,48 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 50%; width: 50%;
height: 50%; height: 50%;
} }
.failed-tip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 560rpx;
height: 400rpx;
}
.failed-tip image {
width: 100%;
height: 100%;
}
.fullbox {
width: 100%;
height: 100%;
}
.btnsty {
position: absolute;
left: 20%;
bottom: 10%;
width: 60%;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-size: 30rpx;
border-radius: 50rpx;
background: rgba(255, 255, 255, 0.2);
border: 1px solid #1367fe;
color: #fff;
white-space: nowrap;
}
/* 设置关闭按钮 */ /* 设置关闭按钮 */
.popup-layer-close { .popup-layer-close {
position: absolute; position: absolute;

BIN
static/images/icon_play2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/images/medal_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

185
subpkg/review/review.vue
View File

@ -2,25 +2,33 @@
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <view class="stabar"></view>
<view class="secbar"> <label class="back" @click="back()"></label> <view class="secbar"> <label class="back" @click="back()"></label>
<view class="title">演练回顾</view> <view class="title">演练回顾</view>
</view> </view>
<view class="mainwrap2"> <view class="mainwrap2">
<view class="background-info"> <view class="background-info">
您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下： 您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}
</view> </font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下：
<view class="thumbtack"> </view>
<label class="left"><image src="/static/images/tack.png"></image></label> <view class="thumbtack">
<label class="right"><image src="/static/images/tack.png"></image></label> <label class="left">
<image src="/static/images/tack.png"></image>
</label>
<label class="right">
<image src="/static/images/tack.png"></image>
</label>
</view> </view>
<scroll-view class="question-info" scroll-y> <scroll-view class="question-info" scroll-y>
<view class="question-list"> <view class="question-list" @click="respractice">
<image :src="imgUrl" @click="respractice"></image> <view class="revmarsk">
<!-- <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)"> <image class="playbtn" src="/static/images/icon_play2.png"></image>
</view>
<image :src="imgUrl"></image>
<!-- <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
</view> --> </view> -->
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
</template> </template>
@ -28,14 +36,14 @@
export default { export default {
data() { data() {
return { return {
"sceneName":"", "sceneName": "",
"roleName":"", "roleName": "",
"total":0, "total": 0,
questionFreId: "", questionFreId: "",
sceneId: "", sceneId: "",
roleId: "", roleId: "",
imgUrl: "", imgUrl: "",
questionList:[] questionList: []
} }
}, },
onLoad(options) { onLoad(options) {
@ -50,39 +58,43 @@
async getQuestionList() { async getQuestionList() {
const { const {
data: res data: res
} = await uni.$http.post('/small/questionAnswer/listAll',{questionFreId:this.questionFreId}) } = await uni.$http.post('/small/questionAnswer/listAll', {
questionFreId: this.questionFreId
})
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
this.questionList = res.data this.questionList = res.data
this.total = res.data.length this.total = res.data.length
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
async getRelationInfo() { async getRelationInfo() {
const { const {
data: res data: res
} = await uni.$http.post('/small/questionFre/getRelationInfo',this.questionFreId) } = await uni.$http.post('/small/questionFre/getRelationInfo', this.questionFreId)
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
if (res.data != null) { if (res.data != null) {
this.roleName = res.data.sceneRole != null ? res.data.sceneRole.name : "" this.roleName = res.data.sceneRole != null ? res.data.sceneRole.name : ""
this.sceneName = res.data.sceneManage != null ? res.data.sceneManage.name : "" this.sceneName = res.data.sceneManage != null ? res.data.sceneManage.name : ""
this.backgroundImg = res.data.file.length!=0 ? uni.$http.baseUrl +res.data.file[0].uploadPath : "" this.backgroundImg = res.data.file.length != 0 ? uni.$http.baseUrl + res.data.file[0].uploadPath :
""
} }
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
async getFiles() { async getFiles() {
const { const {
data: res data: res
} = await uni.$http.get('/small/scene/manage/queryFiles/'+this.sceneId); } = await uni.$http.get('/small/scene/manage/queryFiles/' + this.sceneId);
this.imgUrl = uni.$http.baseUrl + res.data.filePreview.fileList[0]; this.imgUrl = uni.$http.baseUrl + res.data.filePreview.fileList[0];
//uni.$showMsg('数据请求成功！') //uni.$showMsg('数据请求成功！')
}, },
respractice() { respractice() {
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/respractice/respractice?questionFreId=' + this.questionFreId +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId url: '/subpkg/respractice/respractice?questionFreId=' + this.questionFreId + '&sceneId=' + this
.sceneId + "&roleId=" + this.roleId
}) })
}, },
back(){ back() {
uni.navigateBack({ uni.navigateBack({
delta:1,//返回层数，2则上上页 delta: 1, //返回层数，2则上上页
}) })
}, },
} }
@ -91,8 +103,9 @@
<style> <style>
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.background-info, .question-info { .background-info,
.question-info {
margin: 0 3%; margin: 0 3%;
padding: 3%; padding: 3%;
width: 88%; width: 88%;
@ -104,47 +117,69 @@
font-size: 32rpx; font-size: 32rpx;
line-height: 1.5; line-height: 1.5;
} }
.question-info{ .question-info {
margin-top: 20rpx; margin-top: 20rpx;
padding-top: 50rpx; padding-top: 50rpx;
height: 62vh; height: 62vh;
overflow: hidden; overflow: hidden;
} }
.question-list { .question-list {
width: 100%; position: relative;
height: 100%; width: 100%;
height: 100%;
}
.question-list>image {
width: 100%;
height: 100%;
} }
.question-list image { .question-list .revmarsk {
width: 100%; position: absolute;
height: 100%; z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .45);
}
.question-list .playbtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120rpx;
height: 120rpx;
pointer-events: none;
} }
.thumbtack { .thumbtack {
position: relative; position: relative;
left: 5%; left: 5%;
width: 90%; width: 90%;
} }
.thumbtack .left, .thumbtack .right { .thumbtack .left,
display: inline-block; .thumbtack .right {
position: absolute; display: inline-block;
z-index: 100; position: absolute;
bottom: -50rpx; z-index: 100;
left: 5%; bottom: -50rpx;
width: 30rpx; left: 5%;
height: 80rpx; width: 30rpx;
height: 80rpx;
} }
.thumbtack .right { .thumbtack .right {
left: auto; left: auto;
right: 5%; right: 5%;
} }
.thumbtack .left image, .thumbtack .right image, .question-txt image { .thumbtack .left image,
width: 100%; .thumbtack .right image,
height: 100%; .question-txt image {
width: 100%;
height: 100%;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save