#

whycq

2022-04-18 18205dbe3091e701243fadeba8c063e149b729b2

 Monitor-APP/pages/index/index.vue

@@ -1,6 +1,7 @@
<template>
   <view class="container">
      <view class="curtain"></view>
      <view class="upper " :class="mmm" ></view>
      <view class="lower" :class="fff">
         <view class="head">
            <text>自动仓库WCS监控平台</text>
            <view class="time-tools">{{year}}-{{month}}-{{day}}&nbsp{{hours}}:{{minutes}}:{{seconds}}&nbsp{{week}}</view>
@@ -150,6 +151,7 @@
               </view>
            </view>
         </view>
      </view>
         <view>
            <!-- 输入url -->
            <uni-popup ref="url" type="dialog">
@@ -208,6 +210,10 @@
            minutes:38,
            seconds:13,
            week:'星期四',
            ani:'',
            move: 'upMove 1.5s 1;',
            mmm:'upup',
            fff:''
         }
      },
      mounted() {
@@ -235,9 +241,22 @@
         setInterval(() => {
            this.getDate();
         },1000)
			
         setInterval(() => {
            this.animation();
         },3000)
      },
      methods: {
         animation() {
            if (this.ani) {
               this.ani = ''
               this.mmm = 'upup'
               this.fff = 'down'
            } else {
               this.ani = 1
               this.mmm = 'down'
               this.fff = 'upup'
            }
         },
         getDateFormat(value) {
            var date = new Date();// 获取当前时间
            date.setDate(date.getDate() + value);// 设置天数 -1 天
@@ -349,16 +368,27 @@
</script>

<style>
   .curtain {
   /* animation:upMove 1.5s 1; */
   /* downMove */
   .upup {
      animation: upMove 1.5s 1;
      animation-fill-mode: both;
   }
   .down {
      animation: downMove 1.5s 1;
      animation-fill-mode: both;
   }
   .upper {
      position: fixed;
      width: 1920px;
      height: 1080px;
      /* top: -1000px; */
      background-image: url(../../static/background.png);
      /* background:red; */
      animation:move 1.5s 1;
      /* animation:upMove 1.5s 1; */
      z-index: 999;
   }
   @keyframes mymove
   @keyframes downMove
      {
      from {
         opacity: 1;
@@ -368,14 +398,14 @@
      to {
         opacity: 0.5;
         /* background-color:blue; */
         top:-900px
         top:-1080px
      }
   }
   @keyframes move {
   @keyframes upMove {
      from {
         opacity: 0.5;
         /* background-color:blue; */
         top:-900px
         top:-1080px
         }
      to {
         opacity: 1;
@@ -383,6 +413,11 @@
         top: 0;
      }
   }
   .lower {
      width: 1920px;
      height: 1080px;
      position: relative;
   }
   .container {
      width: 1920px;
      height: 1080px;