jili2-screen/src/apps/home/components/screen-tem14.vue

<template>
    <div class="page">
        <div class="header">
            <div class="header-box">
                <img class="header-img" src="../images/screen-tem2/logo.png" alt="">
                <img class="header-line" src="../images/screen-tem2/line.png" alt="">

                <div class="header-right">
                    <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                    <span>{{time}}</span>
                    <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                    <span>{{day}}</span>
                    <img class="header-line" src="../images/screen-tem2/line.png" alt="">
                    <span>{{week}}</span>
                </div>
                <div class="header-title">{{data.orgName}}{{data.title}}</div>
                <img class="header-blue-line" src="../images/screen-tem2/blue-line.png" alt="">
            </div>

        </div>
        <div class="main">
            <div class="main-box main-box1">
                <div class="box-nums one">
                    <screen-module :data="data" style="width: 100%;height: 100%;" :cid="1"  />
                </div>
                <div class="box-nums two">
                    <screen-module :data="data" :cid="2"  />
                </div>

            </div>
            <div class="main-box main-box2">
                <div class="box-nums there">
                    <screen-module :data="data" :cid="3"  />
                </div>

            </div>
            <div class="main-box main-box3">
                <div class="box-nums fore">
                    <screen-module :data="data" :cid="4"  />
                </div>
                <div class="box-nums five">
                    <screen-module :data="data" :cid="5" />
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import ScreenModule from '@/apps/home/components/screen-module.vue';

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
    components: {
        ScreenModule,
    },
})
export default class Echarts extends Vue {
    week = '';

    day = '';

    time = '';

    created() {
        this.realSysTime();
        setInterval(() => {
            this.realSysTime();
        }, 1000);
    }

    realSysTime() {
        const now = new Date();
        const year = now.getFullYear(); // 获取年份
        let month = now.getMonth(); // 获取月份
        let date = now.getDate(); // 获取日期
        const day = now.getDay(); // 获取星期
        let hour = now.getHours(); // 获取小时
        let minute = now.getMinutes(); // 获取分钟
        let seconds = now.getSeconds(); // 获取秒
        month += 1;
        const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        this.week = arrWeek[day];
        if (month < 10) {
            month = `0${month}`;
        }
        if (date < 10) {
            date = `0${date}`;
        }
        if (hour < 10) {
            hour = `0${hour}`;
        }
        if (minute < 10) {
            minute = `0${minute}`;
        }
        if (seconds < 10) {
            seconds = `0${seconds}`;
        }
        this.day = `${year}.${month}.${date}`;
        this.time = `${hour}:${minute}:${seconds}`;
    }
}
</script>

<style scoped lang="scss">
    .page{
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #14111f;
        overflow: hidden;
        background-image: url(../images/screen-tem2/bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
    }
    .header{
        width: 100%;
        height: 10vh;
        position: relative;
        color: #ffffff;
    }
    .header-box{
        height: 6.8vh;
        line-height: 6.8vh;
        padding: 0 1.5vw;
        font-size: 22px;
    }
    .header-box .header-img{
        display: inline-block;
          /* width: 12.5vw; */
        width: 7.7vw;
        height: 2.8vh;
        vertical-align: middle;
        margin-top: -4px;
    }
    .header-line{
        display: inline-block;
        width: 0.6vw;
        height: 3.7vh;
        vertical-align: middle;
        margin: 0 10px;
    }
    .header-right{
        width: 28vw;
        text-align: right;
        height: 100%;
        float: right;
    }
    .header-blue-line{
        width: 100%;
        float: left;
    }
    .header-box .header-title{
        width: 43vw;
        text-align: center;
        height: 100%;
        float: right;
        display: inline-block;
        font-weight: 600;
        // font-size: 18px;
    }
    .main{
         /* width: 100%; */
        height: 90vh;
        /* border: 1px solid #fff;
           margin-top: 1vh; */
           margin: 0 1.5vw;
    }
    .main .main-box{
        display: inline-block;
        /* background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: rgba(29, 81, 156, 0.2); */
        float: left;
        position: relative;
    }
    .main .main-box1{
        width: 97vw;
        height: 21.6vh;
    }

    .main .main-box2{
        width: 97vw;
        height: 21.6vh;
        margin-top: 2vh;
    }
    .main .main-box3{
        width: 97vw;
        height: 41vh;
        margin-top: 2vh;
    }
    .main-box .box-nums{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: rgba(29, 81, 156, 0.2);
    }
    .main .main-box1 .one{
        width: 56% !important;
        height: 100% !important;
        position: relative;
        display: inline-block;
        float: left;
    }
    .main .main-box1 .two{
        width: 43% !important;
        height: 100% !important;
        position: relative;
        display: inline-block;
        float: right;
    }
    .main .main-box2 .there{
        width: 100% !important;
        height: 100% !important;
        position: relative;
    }

    .main .main-box3 .fore{
        width: 49.5% !important;
        height: 100% !important;
        position: relative;
        display: inline-block;
        float: left;
    }
    .main .main-box3 .five{
        width: 49.5% !important;
        height: 100% !important;
        position: relative;
        display: inline-block;
        float: right;
    }

</style>