xuhuajiao
/
canvasScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

画屏动画展示

dev
xuhuajiao 3 years ago
parent
10827d8abd
commit
40c7ca5a00
7 changed files with 4540 additions and 151 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. 40
      App.vue
  2. 4074
      common/animate.css
  3. 4
      pages.json
  4. 121
      pages/bind/bind.vue
  5. 152
      pages/login/login.vue
  6. 133
      pages/show/show.js
  7. 167
      pages/show/show.vue

40
App.vue
View File

@ -15,10 +15,50 @@
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
@import './static/iconfont/iconfont.css'; @import './static/iconfont/iconfont.css';
@import '@/common/animate.css';
.main_container { .main_container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: url(./static/images/bg.png) no-repeat left top; background: url(./static/images/bg.png) no-repeat left top;
background-size: cover; background-size: cover;
} }
.login_bg {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 530rpx;
height: 648rpx;
margin: -423rpx 0 0 -265rpx;
background-color: #fcf4e8;
border-radius: 30rpx 30rpx 0 0;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
z-index: 9;
}
.login-bind {
position: absolute;
top: 50%;
left: 50%;
width: 625rpx;
height: 764rpx;
margin: -382rpx 0 0 -312rpx;
background-color: #fff;
border-radius: 30rpx;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.uni-login-btn {
width: 520rpx;
height: 86rpx;
margin-top: 69.44rpx;
font-size: 30.55rpx;
line-height: 86rpx;
background-color: #0096ff;
border-radius: 86rpx;
color: #fff;
}
</style> </style>

4074
common/animate.css
File diff suppressed because it is too large
View File

4
pages.json
View File

@ -13,6 +13,10 @@
{ {
"path" : "pages/bind/bind", "path" : "pages/bind/bind",
"style" : {} "style" : {}
},
{
"path" : "pages/show/show",
"style" : {}
} }
], ],
"globalStyle": { "globalStyle": {

121
pages/bind/bind.vue
View File

@ -1,9 +1,33 @@
<template> <template>
<view class="main_container"> <view class="main_container">
<Header></Header> <Header></Header>
<view class="login">
<form @submit="formSubmit">
</form>
<view class="login-bind">
<view class="bind">
<text class="bind-title">设备信息</text>
<form @submit="bindSubmit">
<view class="uni-form-item uni-column">
<view class="title">设备账号：</view>
<input class="uni-input" v-model="account" name="account" type="text" placeholder="设备账号" disabled />
</view>
<view class="uni-form-item uni-column">
<view class="title">设备名称：</view>
<input class="uni-input" name="name" placeholder="设备名称" />
</view>
<view class="uni-form-item uni-column" @click.native.stop="radioDirection = !radioDirection">
<view class="bind-radio-label" >
<view class="title" >选择设备方向</view>
<image class="select_img" src="../../static/images/bind-select.png"></image>
</view>
<view v-show="radioDirection" class="device_radio">
<radio-group name="device_direction">
<label class="radio"><radio value="0" checked="true" />竖屏</label>
<label class="radio"><radio value="1" />横屏</label>
</radio-group>
</view>
</view>
<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">授权绑定</button></view>
</form>
</view>
</view> </view>
<view class="login_bg"></view> <view class="login_bg"></view>
</view> </view>
@ -17,12 +41,103 @@ export default {
}, },
data() { data() {
return { return {
account: '1234568736',
radioDirection: false
}; };
}, },
mounted(){
// this.account = this.account.slice(-8)
},
methods: { methods: {
bindSubmit: function(e){
console.log(this.account.substring(this.account.length-8, this.account.length))
console.log(this.account.slice(-8))
console.log('bindform发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
}
} }
}; };
</script> </script>
<style scoped> <style scoped>
.bind-title{
display: block;
margin-bottom: 37.5rpx;
font-size: 37.5rpx;
font-weight: bold;
color: #333;
text-align: center;
}
.bind .uni-form-item{
position: relative;
display: flex;
justify-content: space-between;
width: 409.72rpx;
height: 86.11rpx;
padding: 0 55.55rpx;
line-height: 86.11rpx;
margin-bottom: 27.77rpx;
font-size: 27.77rpx;
background-color: #f6f6f6;
border-radius: 86.11rpx;
}
.bind .uni-form-item .title{
min-width: 138.88rpx;
}
.bind-radio-label{
display: flex;
justify-content: space-between;
width: 100%;
}
.bind .uni-input{
width: auto;
height: 86.11rpx;
font-size: 27.77rpx;
}
.select_img{
display: block;
width: 21.52rpx;
height: 13.88rpx;
margin-top: 36.8rpx;
}
.device_radio{
position: absolute;
bottom: -145.83rpx;
left: 0;
z-index: 99;
}
.device_radio uni-radio-group{
width: 520.83rpx;
height: 145.83rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 25rpx;
background-color: #FFFFFF;
border-radius: 13.88rpx;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
}
.device_radio .radio {
width: 50%;
text-align: center;
}
.device_radio /deep/ uni-radio .uni-radio-input{
width: 27.77rpx;
height: 27.77rpx;
background: url(../../static/images/an-wx.png) no-repeat left top;
background-size: 100% 100%;
border: none;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked{
background: none !important;
border: none !important;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before{
content: "";
width: 27.77rpx;
height: 27.77rpx;
background: url(../../static/images/an-xz.png) no-repeat left top;
background-size: 100% 100%;
transform: translate(-50%,-50%) scale(1);
}
</style> </style>

152
pages/login/login.vue
View File

@ -2,7 +2,7 @@
<view class="main_container"> <view class="main_container">
<Header></Header> <Header></Header>
<view class="login-bind"> <view class="login-bind">
<view v-if="!isLogin" class="login">
<view class="login">
<image class="logo" src="/static/logo.png"></image> <image class="logo" src="/static/logo.png"></image>
<form @submit="loginSubmit"> <form @submit="loginSubmit">
<view class="uni-form-item uni-column"> <view class="uni-form-item uni-column">
@ -14,30 +14,6 @@
<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view> <view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
</form> </form>
</view> </view>
<view v-else class="bind">
<text class="bind-title">设备信息</text>
<form @submit="bindSubmit">
<view class="uni-form-item uni-column">
<view class="title">设备账号：</view>
<input class="uni-input" name="phone" type="text" placeholder="设备账号" disabled />
</view>
<view class="uni-form-item uni-column">
<view class="title">设备名称：</view>
<input class="uni-input" name="name" placeholder="设备名称" />
</view>
<view class="uni-form-item uni-column">
<view class="title">选择设备方向</view>
<image class="select_img" src="../../static/images/bind-select.png"></image>
<view class="device_radio">
<radio-group>
<label class="radio"><radio value="r1" checked="true" />竖屏</label>
<label class="radio"><radio value="r2" />横屏</label>
</radio-group>
</view>
</view>
<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">授权绑定</button></view>
</form>
</view>
</view> </view>
<view class="login_bg"></view> <view class="login_bg"></view>
</view> </view>
@ -51,7 +27,6 @@ export default {
}, },
data() { data() {
return { return {
isLogin: false
}; };
}, },
methods: { methods: {
@ -62,48 +37,15 @@ export default {
// content: '表单数据内容：' + JSON.stringify(formdata), // content: '表单数据内容：' + JSON.stringify(formdata),
// showCancel: false // showCancel: false
// }); // });
// uni.navigateTo({
// url: '../bind/bind'
// });
this.isLogin = true
},
bindSubmit: function(e){
console.log('bindform发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
uni.navigateTo({
url: '../bind/bind'
});
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.login_bg {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 530rpx;
height: 648rpx;
margin: -423rpx 0 0 -265rpx;
background-color: #fcf4e8;
border-radius: 30rpx 30rpx 0 0;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
z-index: 9;
}
.login-bind {
position: absolute;
top: 50%;
left: 50%;
width: 625rpx;
height: 764rpx;
margin: -382rpx 0 0 -312rpx;
background-color: #fff;
border-radius: 30rpx;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login{ .login{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -114,7 +56,6 @@ export default {
width: 278rpx; width: 278rpx;
height: 52rpx; height: 52rpx;
margin-bottom: 69.44rpx; margin-bottom: 69.44rpx;
/* margin: 132rpx auto 70rpx auto; */
} }
.login .uni-input { .login .uni-input {
width: 520rpx; width: 520rpx;
@ -128,89 +69,4 @@ export default {
.fouce_txt{ .fouce_txt{
border-color: #363538; border-color: #363538;
} }
.uni-login-btn {
width: 520rpx;
height: 86rpx;
margin-top: 69.44rpx;
font-size: 30.55rpx;
line-height: 86rpx;
background-color: #0096ff;
border-radius: 86rpx;
color: #fff;
}
.bind-title{
display: block;
margin-bottom: 37.5rpx;
font-size: 37.5rpx;
font-weight: bold;
color: #333;
text-align: center;
}
.bind .uni-form-item{
position: relative;
display: flex;
justify-content: space-between;
width: 409.72rpx;
height: 86.11rpx;
padding: 0 55.55rpx;
line-height: 86.11rpx;
margin-bottom: 27.77rpx;
font-size: 27.77rpx;
background-color: #f6f6f6;
border-radius: 86.11rpx;
}
.bind .uni-form-item .title{
min-width: 138.88rpx;
}
.bind .uni-input{
width: auto;
height: 86.11rpx;
font-size: 27.77rpx;
}
.select_img{
display: block;
width: 21.52rpx;
height: 13.88rpx;
margin-top: 36.8rpx;
}
.device_radio{
position: absolute;
bottom: -145.83rpx;
left: 0;
z-index: 99;
}
.device_radio uni-radio-group{
width: 520.83rpx;
height: 145.83rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 25rpx;
background-color: #FFFFFF;
border-radius: 13.88rpx;
box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
}
.device_radio .radio {
width: 50%;
text-align: center;
}
.device_radio /deep/ uni-radio .uni-radio-input{
width: 27.77rpx;
height: 27.77rpx;
background: url(../../static/images/an-wx.png) no-repeat left top;
background-size: 100% 100%;
border: none;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked{
background: none !important;
border: none !important;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before{
content: "";
width: 27.77rpx;
height: 27.77rpx;
background: url(../../static/images/an-xz.png) no-repeat left top;
background-size: 100% 100%;
transform: translate(-50%,-50%) scale(1);
}
</style> </style>

133
pages/show/show.js
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
}

167
pages/show/show.vue
View File

@ -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