7 changed files with 4540 additions and 151 deletions
-
40App.vue
-
4074common/animate.css
-
4pages.json
-
121pages/bind/bind.vue
-
152pages/login/login.vue
-
133pages/show/show.js
-
167pages/show/show.vue
4074
common/animate.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,133 @@ |
|||
let data = { |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"relaase_id": "4028e3d47fd34b5d017fd34c08e60003", |
|||
"relaase_name": "fsfsdf", |
|||
"bgm_name": "null", |
|||
"bgm_main": "null", |
|||
"release_start": "2022-03-30 00:00:00.0", |
|||
"release_end": "2022-04-24 00:00:00.0", |
|||
"show_materials": [{ |
|||
"release_id": "4028e3d47fd34b5d017fd34c08e60003", |
|||
"material_name": "bg-index.jpg", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png", |
|||
"img_path": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png", |
|||
"device_direction": "1", |
|||
"duration": "6", |
|||
"effect": "animate__fadeInTopRight", |
|||
"bgm_name": null, |
|||
"bgm_url": 'https://qiniu.aiyxlib.com/yuekan-BGM16.mp3', |
|||
"ranking": "1" |
|||
}, |
|||
{ |
|||
"release_id": "4028e3d47fd34b5d017fd34c08e60003", |
|||
"material_name": "s-j1.png", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png", |
|||
"img_path": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png", |
|||
"device_direction": "1", |
|||
"duration": "3", |
|||
"effect": "animate__backInLeft", |
|||
"bgm_name": null, |
|||
"bgm_url": 'https://qiniu.aiyxlib.com/yuekan-BGM20-Chinap.mp3', |
|||
"ranking": "2" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"relaase_id": "4028e3d47fcfa36c017fd0063c4d001a", |
|||
"relaase_name": "111", |
|||
"bgm_name": "null", |
|||
"bgm_main": "null", |
|||
"release_start": "2022-03-28 00:00:00.0", |
|||
"release_end": "2022-03-28 00:00:00.0", |
|||
"show_materials": [{ |
|||
"release_id": "4028e3d47fcfa36c017fd0063c4d001a", |
|||
"material_name": "s-j3.png", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/bj45_1%402x.png", |
|||
"img_path": "https://qiniu.aiyxlib.com/bj45_1%402x.png", |
|||
"device_direction": "1", |
|||
"duration": "3", |
|||
"effect": "animate__flip", |
|||
"bgm_name": null, |
|||
"bgm_url": null, |
|||
"ranking": "1" |
|||
}, |
|||
{ |
|||
"release_id": "4028e3d47fcfa36c017fd0063c4d001a", |
|||
"material_name": "s-t3.png", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/yuekan-1-read.jpg", |
|||
"img_path": "https://qiniu.aiyxlib.com/yuekan-1-read.jpg", |
|||
"device_direction": "1", |
|||
"duration": "10", |
|||
"effect": "animate__rotateInUpRight", |
|||
"bgm_name": null, |
|||
"bgm_url": null, |
|||
"ranking": "2" |
|||
}, |
|||
{ |
|||
"release_id": "4028e3d47fcfa36c017fd0063c4d001a", |
|||
"material_name": "s-j1.png", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/bj_15%402x.png", |
|||
"img_path": "https://qiniu.aiyxlib.com/bj_15%402x.png", |
|||
"device_direction": "1", |
|||
"duration": "5", |
|||
"effect": "animate__jackInTheBox", |
|||
"bgm_name": null, |
|||
"bgm_url": null, |
|||
"ranking": "3" |
|||
}, |
|||
{ |
|||
"release_id": "4028e3d47fd34b5d017fd34c08e60003", |
|||
"material_name": "bg-index.jpg", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png", |
|||
"img_path": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png", |
|||
"device_direction": "1", |
|||
"duration": "10", |
|||
"effect": "animate__zoomInDown", |
|||
"bgm_name": null, |
|||
"bgm_url": null, |
|||
"ranking": "1" |
|||
}, |
|||
{ |
|||
"release_id": "4028e3d47fd34b5d017fd34c08e60003", |
|||
"material_name": "s-j1.png", |
|||
"material_type": "0", |
|||
"deposit_url": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png", |
|||
"img_path": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png", |
|||
"device_direction": "1", |
|||
"duration": "10", |
|||
"effect": "animate__slideInLeft", |
|||
"bgm_name": null, |
|||
"bgm_url": null, |
|||
"ranking": "2" |
|||
}, |
|||
{ |
|||
"release_id": "4028e3d47fcfa36c017fd0063c4d001a", |
|||
"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4", |
|||
"material_type": "1", |
|||
"deposit_url": "http://qiniu.aiyxlib.com/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4", |
|||
"img_path": "", |
|||
"device_direction": "1", |
|||
"duration": "0", |
|||
"effect": "false", |
|||
"bgm_name": null, |
|||
"bgm_url": null, |
|||
"ranking": "4" |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
|
|||
|
|||
module.exports = { |
|||
data |
|||
} |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<view class="main_container"> |
|||
<!-- <view class="show-img animate__animated animate__fadeInLeft"><image src="../../static/images/switch/1.jpg"></image></view> |
|||
<view class="show-img animate__animated animate__fadeInRight"><image src="https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png"></image></view> --> |
|||
<view class="show-content"> |
|||
<view v-for="(item,index) in show_materials" :key="index" :class="['show-item',item.material_type==1?'show-video':'']"> |
|||
<image :class="['animate__animated',item.material_type==0 ? item.effect :'']" v-show="item.material_type==0 && itemIndex == index" :src='linkUrl'></image> |
|||
<video v-if="item.material_type==1" :src="linkUrl" :autoplay="autoplay" :loop="true" :controls="false" object-fit="fill"></video> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="show-video"> |
|||
<video src="http://qiniu.aiyxlib.com/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4" :autoplay="autoplay" :loop="true" :controls="false" object-fit="fill"></video> |
|||
</view> --> |
|||
<view class="show-audio"><image src="../../static/images/an-yy.png"></image></view> |
|||
|
|||
<!-- <view v-if="!deviceInfoShow" class="local-data"> |
|||
<text class="title">欢迎使用数字新视窗</text> |
|||
<view class="data-info">设备ID : 123456789</view> |
|||
<view class="data-info">设备账号 : 123456789</view> |
|||
<view class="data-info">设备名称 : CVBBN2</view> |
|||
<view class="count-down" @click="deviceInfoShow=true">{{ count }}</view> |
|||
</view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import one from './show.js' |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
// 已登录情况显示6S得设备信息 |
|||
count: 6, |
|||
deviceInfoShow: false, |
|||
autoplay: false, |
|||
// 素材 |
|||
show_materials: [], |
|||
itemIndex: 0, |
|||
linkUrl: '', |
|||
timer: null, |
|||
duration: null |
|||
}; |
|||
}, |
|||
onLoad(){ |
|||
let result = one.data.data |
|||
this.show_materials = result[1].show_materials |
|||
}, |
|||
created(){ |
|||
this.atuo() |
|||
}, |
|||
mounted() { |
|||
// this.countdown(); |
|||
this.linkUrl = this.show_materials[this.itemIndex].deposit_url |
|||
if(this.show_materials[this.itemIndex].material_type == 0){ |
|||
this.duration = this.show_materials[this.itemIndex].duration |
|||
} |
|||
this.changeImg() |
|||
}, |
|||
methods: { |
|||
changeImg(){ |
|||
const _this = this |
|||
clearInterval(_this.timer); |
|||
_this.timer = setInterval(()=>{ |
|||
_this.duration -= 1 |
|||
if(_this.itemIndex == this.show_materials.length){ |
|||
clearInterval(_this.timer) |
|||
}else{ |
|||
if(_this.duration==0){ |
|||
_this.itemIndex ++ |
|||
_this.duration = this.show_materials[this.itemIndex].duration |
|||
_this.linkUrl = this.show_materials[this.itemIndex].deposit_url |
|||
} |
|||
} |
|||
},1000) |
|||
}, |
|||
atuo() { |
|||
this.autoplay = true; |
|||
}, |
|||
countdown() { |
|||
this.count = 6; |
|||
const timer = setInterval(() => { |
|||
this.count -= 1; |
|||
if (this.count < 1) { |
|||
clearInterval(timer); |
|||
this.deviceInfoShow = true; |
|||
console.log('倒计时结束'); |
|||
} |
|||
}, 1000); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.main_container { |
|||
position: relative; |
|||
overflow: hidden; |
|||
background: #000; |
|||
} |
|||
.show-item { |
|||
/* width: 100%; |
|||
height: 100vh; */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.show-item uni-image { |
|||
width: 100%; |
|||
height: 100vh; |
|||
object-fit: cover; |
|||
} |
|||
.show-item uni-video { |
|||
width: 100%; |
|||
} |
|||
.show-video{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
.show-audio{ |
|||
position: fixed; |
|||
bottom: 79.16rpx; |
|||
right: 46.52rpx; |
|||
width: 159.72rpx; |
|||
height: 152.08rpx; |
|||
} |
|||
.show-audio uni-image{ |
|||
width: 159.72rpx; |
|||
height: 152.08rpx; |
|||
} |
|||
.local-data { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
width: 625rpx; |
|||
height: 555.55rpx; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 27.77rpx; |
|||
color: #333; |
|||
border-radius: 27.77rpx; |
|||
background: rgba(255, 255, 255, 0.85); |
|||
} |
|||
.title { |
|||
margin-bottom: 32.63rpx; |
|||
font-size: 56.94rpx; |
|||
text-align: center; |
|||
} |
|||
.data-info { |
|||
padding: 0 83.33rpx; |
|||
margin-bottom: 32.63rpx; |
|||
} |
|||
.count-down { |
|||
position: absolute; |
|||
right: 34.72rpx; |
|||
top: 27.77rpx; |
|||
width: 48.61rpx; |
|||
height: 48.61rpx; |
|||
font-size: 30.55rpx; |
|||
text-align: center; |
|||
line-height: 48.61rpx; |
|||
border: 1px solid #333; |
|||
border-radius: 50%; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue