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

演练成功动画样式优化

h5_css
蟑螂恶霸 3 years ago
parent
4fa10af1a5
commit
09d25e0a1f
3 changed files with 139 additions and 98 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. 65
      components/s-video/res-s-video.vue
  2. 39
      components/s-video/s-video.vue
  3. 11
      subpkg/complete/complete.vue

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

@ -1,7 +1,9 @@
<template> <template>
<view class="video-wrapper" id="video-container"> <view class="video-wrapper" id="video-container">
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> <view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
<video id="video_play" :controls="false" :src="videoObj.videoUrl" @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" :controls="false" :src="videoObj.videoUrl" @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> -->
@ -11,12 +13,17 @@
<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="autoChannel===item.channel?'antxtCheck':'antxt'">{{item.channel}}</view> <view :class="autoChannel===item.channel?'antxtCheck':'antxt'">{{item.channel}}</view>
<view class="judd jdok" v-show="isOk && item.choose === 'true'"><image class="judimg" src="/static/images/icon-ok.png"></image></view> <view class="judd jdok" v-show="isOk && item.choose === 'true'">
<view class="judd jderr" v-show="isError && item.choose === 'false'"><image class="judimg" src="/static/images/icon-err.png"></image></view> <image class="judimg" src="/static/images/icon-ok.png"></image>
</view>
<view class="judd jderr" v-show="isError && item.choose === 'false'">
<image class="judimg" src="/static/images/icon-err.png"></image>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -47,7 +54,10 @@
</template> </template>
<script> <script>
import { mapMutations, mapState } from 'vuex' import {
mapMutations,
mapState
} from 'vuex'
export default { export default {
name: "s-video", name: "s-video",
data() { data() {
@ -321,9 +331,13 @@
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;
left: 0;
right: 0;
bottom: 0;
margin: auto; margin: auto;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -351,9 +365,12 @@
} }
.popup-layer .anitem1 { .popup-layer .anitem1 {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
width: 650rpx; width: 100vw;
height: 200rpx; height: 240rpx;
} }
.popup-layer .anitem1 .animg1 { .popup-layer .anitem1 .animg1 {
@ -362,37 +379,45 @@
} }
.popup-layer .anitem1 .antxt1 { .popup-layer .anitem1 .antxt1 {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 45%; top: 45%;
left: 10%; left: 6%;
width: 100%; width: 90%;
font-size: 1.2rem; font-size: 1.1rem;
} }
.popup-layer .anitem { .popup-layer .anitem {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
margin: 80rpx; margin: 20rpx auto;
width: 600rpx; width: 100vw;
height: 100rpx; height: 180rpx;
text-align: center;
} }
.popup-layer .anitem .animg { .popup-layer .anitem .animg {
width: 100%; width: 98%;
height: 160rpx; height: 100%;
} }
.popup-layer .anitem .antxt { .popup-layer .anitem .antxt {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 30%; margin: 10%;
width: 100%; width: 82%;
font-size: 1.1rem; font-size: 1.1rem;
} }
.judd { .judd {
position: absolute; position: absolute;
top: -20rpx; top: -20rpx;
right: -50rpx; right: 0;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 50%; border-radius: 50%;

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

@ -365,9 +365,12 @@
} }
.popup-layer .anitem1 { .popup-layer .anitem1 {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
width: 650rpx; width: 100vw;
height: 200rpx; height: 240rpx;
} }
.popup-layer .anitem1 .animg1 { .popup-layer .anitem1 .animg1 {
@ -376,37 +379,45 @@
} }
.popup-layer .anitem1 .antxt1 { .popup-layer .anitem1 .antxt1 {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 45%; top: 45%;
left: 10%; left: 6%;
width: 100%; width: 90%;
font-size: 1.1rem; font-size: 1.1rem;
} }
.popup-layer .anitem { .popup-layer .anitem {
display: flex;
align-items: center;
justify-content: center;
position: relative; position: relative;
margin: 80rpx; margin: 20rpx auto;
width: 600rpx; width: 100vw;
height: 100rpx; height: 180rpx;
text-align: center;
} }
.popup-layer .anitem .animg { .popup-layer .anitem .animg {
width: 100%; width: 98%;
height: 160rpx; height: 100%;
} }
.popup-layer .anitem .antxt { .popup-layer .anitem .antxt {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
top: 30%; margin: 10%;
width: 100%; width: 82%;
font-size: 1.2rem; font-size: 1.1rem;
} }
.judd { .judd {
position: absolute; position: absolute;
top: -20rpx; top: -20rpx;
right: -50rpx; right: 0;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 50%; border-radius: 50%;

11
subpkg/complete/complete.vue
View File

@ -135,7 +135,7 @@
picStyle:"z-index:-99999", picStyle:"z-index:-99999",
timer:null, timer:null,
resCheck: true, resCheck: true,
successUrl: uni.$http.baseUrl + "/profile//images/success-2.gif", successUrl: uni.$http.baseUrl + "/profile/images/success-2.gif",
}; };
}, },
//分享到好友 //分享到好友
@ -407,10 +407,10 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9998;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
z-index: 9998;
} }
.failed-tip { .failed-tip {
@ -420,6 +420,11 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 560rpx; width: 560rpx;
height: 560rpx; height: 560rpx;
image {
width: 100%;
height: 100%;
}
} }
.popup-layer .animg:first-child { .popup-layer .animg:first-child {

Write Preview
Loading…
Cancel
Save