#

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;