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

样式优化

h5_css
蟑螂恶霸 3 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      components/s-video/res-s-video.vue
  2. 66
      components/s-video/s-video.vue
  3. BIN
      static/images/icon_play2.png
  4. BIN
      static/images/medal_1.png
  5. 59
      subpkg/review/review.vue

55
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">
<!-- <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">
<image class="animg" src="/static/videos/skin_bg_1a.png"></image>
<!-- <view class="antxt">{{item.channel}}</view> -->
@ -22,13 +25,21 @@
<p>开始</p>
</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="popup-layer" style="color: red;" @click="toResVideo()">
<view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<!-- <view class="antxt1">重新选择逃生路线</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>
@ -334,18 +345,14 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* background-color: #fff; */
color: #fff;
padding: 20px;
z-index: 9999;
}
.popup-layer .anitem1 {
position: relative;
/* margin: 80rpx; */
width: 650rpx;
height: 200rpx;
/* text-align: center; */
}
.popup-layer .anitem1 .animg1 {
@ -408,6 +415,42 @@
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 {
position: absolute;

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

@ -4,7 +4,9 @@
<image class="animg" src="/static/images/start.png"></image>
</view>
<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="popup-layer-back" v-if="!start" v-show="question">
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
@ -14,7 +16,8 @@
<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>
<view class="antxt">{{item.channel}}</view>
<view class="judd jdok" v-show="isOk && item.choose === 'true'">
@ -32,12 +35,11 @@
</view>
</view> -->
<view class="popup-layer-back" v-show="resCheck">
<view><image style="position: absolute; top: 20%; left: 10%;" :src="failUrl"></image></view>
<view class="popup-layer" @click="toResVideo()">
<view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
<view class="antxt1">重新选择逃生路线</view>
<view class="failed-tip">
<image :src="failUrl"></image>
</view>
<view class="popup-layer fullbox" @click="toResVideo()">
<view class="btnsty">重新选择逃生路线</view>
</view>
</view>
</view>
@ -328,9 +330,13 @@
height: 100%;
background-color: rgba(0, 0, 0, .35);
}
.animg {
position: absolute;
top:0;left:0;right:0;bottom:0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
@ -343,7 +349,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.8);
z-index: 9998;
}
@ -353,18 +359,14 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* background-color: #fff; */
color: #fff;
padding: 20px;
z-index: 9999;
}
.popup-layer .anitem1 {
position: relative;
/* margin: 80rpx; */
width: 650rpx;
height: 200rpx;
/* text-align: center; */
}
.popup-layer .anitem1 .animg1 {
@ -421,12 +423,48 @@
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 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 {
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

59
subpkg/review/review.vue
View File

@ -6,15 +6,23 @@
</view>
<view class="mainwrap2">
<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}}
</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下：
</view>
<view class="thumbtack">
<label class="left"><image src="/static/images/tack.png"></image></label>
<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>
<scroll-view class="question-info" scroll-y>
<view class="question-list">
<image :src="imgUrl" @click="respractice"></image>
<view class="question-list" @click="respractice">
<view class="revmarsk">
<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> -->
@ -50,7 +58,9 @@
async getQuestionList() {
const {
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()
this.questionList = res.data
this.total = res.data.length
@ -64,7 +74,8 @@
if (res.data != null) {
this.roleName = res.data.sceneRole != null ? res.data.sceneRole.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('数据请求成功！')
},
@ -77,7 +88,8 @@
},
respractice() {
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() {
@ -92,7 +104,8 @@
<style>
@import url("@/static/base_css.css");
.background-info, .question-info {
.background-info,
.question-info {
margin: 0 3%;
padding: 3%;
width: 88%;
@ -113,22 +126,42 @@
}
.question-list {
position: relative;
width: 100%;
height: 100%;
}
.question-list image {
.question-list>image {
width: 100%;
height: 100%;
}
.question-list .revmarsk {
position: absolute;
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 {
position: relative;
left: 5%;
width: 90%;
}
.thumbtack .left, .thumbtack .right {
.thumbtack .left,
.thumbtack .right {
display: inline-block;
position: absolute;
z-index: 100;
@ -143,7 +176,9 @@
right: 5%;
}
.thumbtack .left image, .thumbtack .right image, .question-txt image {
.thumbtack .left image,
.thumbtack .right image,
.question-txt image {
width: 100%;
height: 100%;
}

Write Preview
Loading…
Cancel
Save