Skip to content

N
new_taobao
Commit 30cbd042 authored by AU-Pro-mac's avatar AU-Pro-mac
Browse files
Options

video options

parent 532aafc2
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 111 deletions
taobao_mini/client/components/comPrizesModal/comPrizesModal.acss
View file @ 30cbd042
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
height: 672rpx; height: 672rpx;
opacity: 1; opacity: 1;
left: 125rpx; left: 125rpx;
top: calc(50% - 336rrpx); top: calc(50% - 336rpx);
position: absolute; position: absolute;
} }
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
left: 0; left: 0;
top: 96rpx; top: 80rpx;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
font-size: 50rpx; font-size: 50rpx;
...@@ -58,12 +58,29 @@ ...@@ -58,12 +58,29 @@
-webkit-background-clip: text; -webkit-background-clip: text;
font-weight: 700; font-weight: 700;
} }
.hao_yun_lai_lin_02 {
width: 100%;
height: 36rpx;
line-height: 36rpx;
left: 0;
top: 164rpx;
position: absolute;
display: inline-block;
font-size: 32rpx;
text-align: center;
color: transparent;
color: rgba(200, 82, 73, 1);
font-weight: 500;
}
.cha_kan_jiang_pin { .cha_kan_jiang_pin {
width: 299rpx; width: 299rpx;
height: 88rpx; height: 88rpx;
opacity: 1; opacity: 1;
left: 102rpx; left: 102rpx;
top: 581rpx; bottom: 22rpx;
position: absolute; position: absolute;
} }
.shang_pin { .shang_pin {
...@@ -77,7 +94,8 @@ ...@@ -77,7 +94,8 @@
.an_niu_guan_bi_dan_chuang_kao_bei24 { .an_niu_guan_bi_dan_chuang_kao_bei24 {
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
opacity: 0.5019607843137255; opacity: 0.5;
left: 514rpx; right: -50rpx;
top: -50rpx;
position: absolute; position: absolute;
} }
taobao_mini/client/components/comPrizesModal/comPrizesModal.axml
View file @ 30cbd042
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
<view class="prizes-modal__shade modal-animate-fade-in"> <view class="prizes-modal__shade modal-animate-fade-in">
<view class="jiang_pin_dan_chuang"> <view class="jiang_pin_dan_chuang">
<image class="dan_chuang_bei_jing01" src="{{resList['c34046a2-1b15-47e8-95f3-376deb238e43'].url}}" /> <image class="dan_chuang_bei_jing01" src="{{resList['2e62917e-4616-4290-96d6-b44345488506'].url}}" />
<image class="tai_zi_kao_bei3" src="{{resList['d3e951d6-4d66-4f5b-b0f0-47e28ff04614'].url}}" /> <!-- <image class="tai_zi_kao_bei3" src="{{resList['d3e951d6-4d66-4f5b-b0f0-47e28ff04614'].url}}" /> -->
<text class="hao_yun_lai_lin">好运来临</text> <text class="hao_yun_lai_lin">好运来临</text>
<text class="hao_yun_lai_lin_02">恭喜您获得粉胶一瓶</text>
<image class="cha_kan_jiang_pin" src="{{resList['715120cb-b41f-425f-b8fa-bce3f4a6680a'].url}}" /> <image class="cha_kan_jiang_pin" src="{{resList['715120cb-b41f-425f-b8fa-bce3f4a6680a'].url}}" />
<image class="shang_pin" src="{{resList['bf24cd04-e4f7-4859-beb6-212aa712f48e'].url}}" /> <image class="shang_pin" src="{{resList['bf24cd04-e4f7-4859-beb6-212aa712f48e'].url}}" />
<image onTap="onModalClose" <image onTap="onModalClose"
......
taobao_mini/client/pages/homePage/homePage.acss
View file @ 30cbd042
.homepage_wrapper { .homepage_wrapper {
width: 750rpx; width: 100%;
height: 1624rpx; height: 100%;
top: calc(50% - 812rpx); top: 0;
left: 0rpx; left: 0rpx;
display: block; display: block;
position: fixed; position: absolute;
} }
.homepage_mian { .homepage_mian {
width: 750rpx; width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.homepage_back {
width: 100%;
height: 1624rpx; height: 1624rpx;
opacity: 1; left: 0rpx;
top: calc(50% - 812rpx);
position: absolute; position: absolute;
} }
.bei_jing80 { .bei_jing80 {
width: 750rpx; width: 750rpx;
height: 1624rpx; height: 1624rpx;
opacity: 1; left: 0;
top: 0;
position: absolute; position: absolute;
} }
...@@ -28,7 +39,7 @@ ...@@ -28,7 +39,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
position: fixed; position: absolute;
} }
.head_ruler { .head_ruler {
width: 141rpx; width: 141rpx;
...@@ -46,8 +57,8 @@ ...@@ -46,8 +57,8 @@
opacity: 1; opacity: 1;
left: 42rpx; left: 42rpx;
bottom: 22rpx; bottom: 22rpx;
position: fixed; position: absolute;
z-index: 2; z-index: 5;
} }
.turntable_block { .turntable_block {
width: 194rpx; width: 194rpx;
...@@ -174,8 +185,9 @@ ...@@ -174,8 +185,9 @@
height: 408rpx; height: 408rpx;
opacity: 1; opacity: 1;
left: 160rpx; left: 160rpx;
top: 640rpx; top: calc(632rpx + (50% - 812rpx));
position: absolute; position: absolute;
z-index: 3;
} }
.video_block_wrapper { .video_block_wrapper {
width: 100%; width: 100%;
...@@ -200,13 +212,14 @@ ...@@ -200,13 +212,14 @@
} }
.video_block_text { .video_block_text {
width: 100%; width: 100%;
height: 60rpx; height: 64rpx;
line-height: 30rpx; line-height: 32rpx;
text-align: center; text-align: center;
left: 0; left: 0;
top: 281rpx; top: 280rpx;
position: absolute; position: absolute;
font-size: 25.6rpx; font-size: 26rpx;
font-weight: 500;
color: rgba(200, 82, 73, 1); color: rgba(200, 82, 73, 1);
} }
.video_block_up { .video_block_up {
...@@ -221,18 +234,6 @@ ...@@ -221,18 +234,6 @@
color: rgba(203, 165, 112, 1); color: rgba(203, 165, 112, 1);
text-decoration: underline; text-decoration: underline;
} }
.video_block_tips {
width: 100%;
height: 22rpx;
line-height: 22rpx;
left: 0rpx;
bottom: 10rpx;
text-align: center;
position: absolute;
font-size: 22rpx;
color: rgba(200, 82, 73, 1);
opacity: 0;
}
.video_btn_left { .video_btn_left {
width: 83rpx; width: 83rpx;
height: 84rpx; height: 84rpx;
...@@ -251,78 +252,56 @@ ...@@ -251,78 +252,56 @@
} }
.video_block_small {
width: 174rpx;
height: 330rpx;
opacity: 1;
left: 557rpx;
top: 900rpx;
position: absolute;
transition: all .5s linear;
}
.video_block_wrapper_small {
border-radius: 6rpx;
box-shadow: 0 0 8rpx rgba(159, 87, 85, .36);
transition: transform .5s linear;
}
.video_block_text_opciaty0 { .video_block_text_opciaty0 {
opacity: 0; opacity: 0;
transition: transform .5s linear; transition: opacity .2s linear;
} }
.video_block_text_opciaty1 { .video_block_text_opciaty1 {
opacity: 1; opacity: 1;
transition: transform .5s linear; transition: opacity .2s linear;
} }
.shi_pin_xiao_tu { .video_block_s {
width: 174rpx; width: 168rpx;
height: 329rpx; height: 136rpx;
opacity: 1;
left: 557rpx;
top: 900rpx;
position: absolute;
}
.yuan_jiao_ju_xing477 {
width: 171rpx;
height: 138rpx;
opacity: 1; opacity: 1;
top: 47rpx; right: 24rpx;
top: calc(930rpx + (50% - 812rpx));
box-shadow: 0 0 8rpx rgba(159, 87, 85, .36);
position: absolute; position: absolute;
border-radius: 6rpx;
z-index: 6;
background: #fff;
} }
.shi_pin_xiao_tu_zu35 { .video_s {
width: 170rpx; width: 156rpx;
height: 329rpx; height: 90rpx;
opacity: 1; opacity: 1;
left: 4rpx; margin: 6rpx auto;
position: absolute; background-color: rgba(0, 0, 0, 0.5);
} }
.yuan_jiao_ju_xing5_kao_bei {
width: 159rpx; .video_block_tips {
height: 93rpx; width: 100%;
opacity: 1; height: 30rpx;
left: 2rpx; line-height: 30rpx;
top: 53rpx; left: 0rpx;
position: absolute; bottom: 4rpx;
background-color: rgba(36, 36, 36, 1); text-align: center;
}
.yuan_jiao_ju_xing5_kao_bei276 {
width: 159rpx;
height: 93rpx;
opacity: 0.6;
left: 6rpx;
top: 53rpx;
position: absolute; position: absolute;
background-color: rgba(36, 36, 36, 1); font-size: 24rpx;
font-weight: 500;
color: rgba(200, 82, 73, 1);
} }
.bo_fang_an_niu { .bo_fang_an_niu {
width: 37rpx; width: 40rpx;
height: 37rpx; height: 40rpx;
opacity: 1; opacity: 1;
left: 68rpx; left: 68rpx;
top: 82rpx; top: 30rpx;
position: absolute; position: absolute;
} }
.biao_ti75 { .biao_ti75 {
......
taobao_mini/client/pages/homePage/homePage.axml
View file @ 30cbd042
<view class="homepage_wrapper"> <view class="homepage_wrapper">
<view class="homepage_mian"> <view class="homepage_mian">
<image class="bei_jing80" src="{{resList['abe2084e-ff0b-454d-ad6e-a9117e44bdaa'].url}}" /> <view class="homepage_back">
<image class="biao_ti75" src="{{resList['3e2471e2-f271-4931-8665-0c2d7fe332b4'].url}}" /> <image class="bei_jing80" src="{{resList['abe2084e-ff0b-454d-ad6e-a9117e44bdaa'].url}}" />
<image class="biao_ti75" src="{{resList['3e2471e2-f271-4931-8665-0c2d7fe332b4'].url}}" />
</view>
<!-- 头部 规则-奖品 按钮 --> <!-- 头部 规则-奖品 按钮 -->
...@@ -14,37 +16,35 @@ ...@@ -14,37 +16,35 @@
<!-- 视频部分 --> <!-- 视频部分 -->
<view class="video_block {{ videoBottom ? 'video_block_small' : ''}}"> <view hidden="{{videoBottom_timeout}}" class="video_block {{ videoBottom ? 'video_block_text_opciaty0' : ''}}">
<view class="video_block_wrapper {{ videoBottom ? 'video_block_wrapper_small' : ''}}"> <view class="video_block_wrapper">
<video class="video" src="{{videoSrc}}" />
<!-- <image class="an_niu" src="{{resList['ff8b9fa2-f6e7-4bc9-803d-8ee626803e52'].url}}" /> --> <video
class="video"
<view class="video_block_text {{ videoBottom ? 'video_block_text_opciaty0' : ''}}"> src="{{videoSrc}}"
controls="{{videoOps.showAllControls}}"
loop="{{videoOps.isLooping}}"
/>
<view class="video_block_text">
<view>观看XXXXX视频</view> <view>观看XXXXX视频</view>
<view>领取20雅顿币</view> <view>领取20雅顿币</view>
</view> </view>
<view class="video_block_up {{ videoBottom ? 'video_block_text_opciaty0' : ''}}" onTap="onVideoTurnSmall">收起视频</view> <view class="video_block_up" onTap="onVideoTurnSmall">收起视频</view>
<view class="video_block_tips {{ videoBottom ? 'video_block_text_opciaty1' : ''}}" onTap="onVideoTurnSmall">看视频 赢金币</view>
</view> </view>
<!-- 按钮组 --> <!-- 按钮组 -->
<image class="video_btn_left {{ videoBottom ? 'video_block_text_opciaty0' : ''}}" src="{{resList['70006ad9-e7aa-4121-8493-c3c0afa94608'].url}}" /> <image class="video_btn_left" src="{{resList['70006ad9-e7aa-4121-8493-c3c0afa94608'].url}}" />
<image class="video_btn_right {{ videoBottom ? 'video_block_text_opciaty0' : ''}}" src="{{resList['cf73af84-5751-4aee-a754-9106162786d9'].url}}" /> <image class="video_btn_right" src="{{resList['cf73af84-5751-4aee-a754-9106162786d9'].url}}" />
</view> </view>
<view class="shi_pin_xiao_tu" a:if='{{false}}'> <view hidden="{{!videoBottom_timeout}}" onTap="onVideoTurnBig" class="video_block_s {{ !videoBottom ? 'video_block_text_opciaty0' : ''}}" >
<image <!-- <image class='video_s' src='' /> -->
class="yuan_jiao_ju_xing477" <view class='video_s'></view>
src="{{resList['9f33f047-5281-4f62-a56d-19080de0250f'].url}}"
/>
<view class="shi_pin_xiao_tu_zu35">
<view class="yuan_jiao_ju_xing5_kao_bei" />
</view>
<view class="yuan_jiao_ju_xing5_kao_bei276" />
<image class="bo_fang_an_niu" src="{{resList['8d5b83a6-59d9-484c-a74e-99f13ba20b02'].url}}" /> <image class="bo_fang_an_niu" src="{{resList['8d5b83a6-59d9-484c-a74e-99f13ba20b02'].url}}" />
<view class="kan_shi_pin_ying_jin_bi">看视频 赢金币</view> <view class="video_block_tips">看视频 赢金币</view>
</view> </view>
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
<view class="gameChoose_mask" onTap="closeShowChooseGame"></view> <view class="gameChoose_mask" onTap="closeShowChooseGame"></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
......
taobao_mini/client/pages/homePage/homePage.js
View file @ 30cbd042
...@@ -21,8 +21,13 @@ Page({ ...@@ -21,8 +21,13 @@ Page({
btnText: '' btnText: ''
}, },
showChooseGame: false, showChooseGame: false,
videoBottom: false, videoBottom: false, // 视频收起 - flag
videoBottom_timeout: false, // 具有延迟的 视频收起 - flag
videoSrc: 'https://cloud.video.taobao.com/play/u/20446068/p/1/e/6/t/1/239271757987.mp4', videoSrc: 'https://cloud.video.taobao.com/play/u/20446068/p/1/e/6/t/1/239271757987.mp4',
// video 配置
videoOps: {
},
commonModalConfirm: null, commonModalConfirm: null,
commonModalVisible: false, commonModalVisible: false,
ruleModalVisible: false, ruleModalVisible: false,
...@@ -49,6 +54,12 @@ Page({ ...@@ -49,6 +54,12 @@ Page({
onVideoTurnSmall () { onVideoTurnSmall () {
this.setData({ videoBottom: true }) this.setData({ videoBottom: true })
setTimeout(() => { this.setData({ videoBottom_timeout: true }) }, 350)
},
onVideoTurnBig () {
this.setData({ videoBottom_timeout: false })
setTimeout(() => { this.setData({ videoBottom: false }) }, 350)
}, },
......
taobao_mini/client/resconfig/resList.js
View file @ 30cbd042
...@@ -304,6 +304,12 @@ const resList = { ...@@ -304,6 +304,12 @@ const resList = {
ext: '.png', ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/bg1.d818f787351875b0982937d8bb68b0655febec3c.png', url: '//yun.duiba.com.cn/spark/assets/bg1.d818f787351875b0982937d8bb68b0655febec3c.png',
uuid: 'd6cab856-721b-4788-abdc-2f06536d963e' uuid: 'd6cab856-721b-4788-abdc-2f06536d963e'
},
'2e62917e-4616-4290-96d6-b44345488506': {
name: '弹窗背景_奖品',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/弹窗背景_奖品.dce4e3dd9a3fcae166dfbd934b714ce1bc7fa5c9.png',
uuid: '2e62917e-4616-4290-96d6-b44345488506'
} }
}; };
export default resList; export default resList;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment