You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<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>
|