智慧画屏客户端
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.

167 lines
4.1 KiB

  1. <template>
  2. <view class="main_container">
  3. <!-- <view class="show-img animate__animated animate__fadeInLeft"><image src="../../static/images/switch/1.jpg"></image></view>
  4. <view class="show-img animate__animated animate__fadeInRight"><image src="https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png"></image></view> -->
  5. <view class="show-content">
  6. <view v-for="(item,index) in show_materials" :key="index" :class="['show-item',item.material_type==1?'show-video':'']">
  7. <image :class="['animate__animated',item.material_type==0 ? item.effect :'']" v-show="item.material_type==0 && itemIndex == index" :src='linkUrl'></image>
  8. <video v-if="item.material_type==1" :src="linkUrl" :autoplay="autoplay" :loop="true" :controls="false" object-fit="fill"></video>
  9. </view>
  10. </view>
  11. <!-- <view class="show-video">
  12. <video src="http://qiniu.aiyxlib.com/Atlas跑酷的成功与失败|2021【Boston Dynamics】.mp4" :autoplay="autoplay" :loop="true" :controls="false" object-fit="fill"></video>
  13. </view> -->
  14. <view class="show-audio"><image src="../../static/images/an-yy.png"></image></view>
  15. <!-- <view v-if="!deviceInfoShow" class="local-data">
  16. <text class="title">欢迎使用数字新视窗</text>
  17. <view class="data-info">设备ID : 123456789</view>
  18. <view class="data-info">设备账号 : 123456789</view>
  19. <view class="data-info">设备名称 : CVBBN2</view>
  20. <view class="count-down" @click="deviceInfoShow=true">{{ count }}</view>
  21. </view> -->
  22. </view>
  23. </template>
  24. <script>
  25. import one from './show.js'
  26. export default {
  27. components: {},
  28. data() {
  29. return {
  30. // 已登录情况显示6S得设备信息
  31. count: 6,
  32. deviceInfoShow: false,
  33. autoplay: false,
  34. // 素材
  35. show_materials: [],
  36. itemIndex: 0,
  37. linkUrl: '',
  38. timer: null,
  39. duration: null
  40. };
  41. },
  42. onLoad(){
  43. let result = one.data.data
  44. this.show_materials = result[1].show_materials
  45. },
  46. created(){
  47. this.atuo()
  48. },
  49. mounted() {
  50. // this.countdown();
  51. this.linkUrl = this.show_materials[this.itemIndex].deposit_url
  52. if(this.show_materials[this.itemIndex].material_type == 0){
  53. this.duration = this.show_materials[this.itemIndex].duration
  54. }
  55. this.changeImg()
  56. },
  57. methods: {
  58. changeImg(){
  59. const _this = this
  60. clearInterval(_this.timer);
  61. _this.timer = setInterval(()=>{
  62. _this.duration -= 1
  63. if(_this.itemIndex == this.show_materials.length){
  64. clearInterval(_this.timer)
  65. }else{
  66. if(_this.duration==0){
  67. _this.itemIndex ++
  68. _this.duration = this.show_materials[this.itemIndex].duration
  69. _this.linkUrl = this.show_materials[this.itemIndex].deposit_url
  70. }
  71. }
  72. },1000)
  73. },
  74. atuo() {
  75. this.autoplay = true;
  76. },
  77. countdown() {
  78. this.count = 6;
  79. const timer = setInterval(() => {
  80. this.count -= 1;
  81. if (this.count < 1) {
  82. clearInterval(timer);
  83. this.deviceInfoShow = true;
  84. console.log('倒计时结束');
  85. }
  86. }, 1000);
  87. }
  88. }
  89. };
  90. </script>
  91. <style scoped>
  92. .main_container {
  93. position: relative;
  94. overflow: hidden;
  95. background: #000;
  96. }
  97. .show-item {
  98. /* width: 100%;
  99. height: 100vh; */
  100. display: flex;
  101. flex-direction: column;
  102. align-items: center;
  103. justify-content: center;
  104. }
  105. .show-item uni-image {
  106. width: 100%;
  107. height: 100vh;
  108. object-fit: cover;
  109. }
  110. .show-item uni-video {
  111. width: 100%;
  112. }
  113. .show-video{
  114. width: 100%;
  115. height: 100vh;
  116. }
  117. .show-audio{
  118. position: fixed;
  119. bottom: 79.16rpx;
  120. right: 46.52rpx;
  121. width: 159.72rpx;
  122. height: 152.08rpx;
  123. }
  124. .show-audio uni-image{
  125. width: 159.72rpx;
  126. height: 152.08rpx;
  127. }
  128. .local-data {
  129. position: absolute;
  130. left: 50%;
  131. top: 50%;
  132. display: flex;
  133. flex-direction: column;
  134. justify-content: center;
  135. width: 625rpx;
  136. height: 555.55rpx;
  137. transform: translate(-50%, -50%);
  138. font-size: 27.77rpx;
  139. color: #333;
  140. border-radius: 27.77rpx;
  141. background: rgba(255, 255, 255, 0.85);
  142. }
  143. .title {
  144. margin-bottom: 32.63rpx;
  145. font-size: 56.94rpx;
  146. text-align: center;
  147. }
  148. .data-info {
  149. padding: 0 83.33rpx;
  150. margin-bottom: 32.63rpx;
  151. }
  152. .count-down {
  153. position: absolute;
  154. right: 34.72rpx;
  155. top: 27.77rpx;
  156. width: 48.61rpx;
  157. height: 48.61rpx;
  158. font-size: 30.55rpx;
  159. text-align: center;
  160. line-height: 48.61rpx;
  161. border: 1px solid #333;
  162. border-radius: 50%;
  163. }
  164. </style>