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

<template>
    <div class="page">
        <div class="header">
            <img class="header-img" src="../images/screen-tem1/title.png" alt="">
            <div class="header-title">
                <div class="header-title1">
                    {{data.title}}
                </div>
                <div class="header-title2">
                    Visualization data of grid management module
                </div>
            </div>
        </div>
        <div class="main">
            <div class="main-box main-box1">
                <screen-module :data="data" :cid="1" />
            </div>
            <div class="main-box main-box2">
                <screen-module :data="data" :cid="2" />
            </div>
            <div class="main-box main-box3">
                <screen-module :data="data" :cid="3" />
            </div>
            <div class="main-box main-box4">
                <screen-module :data="data" :cid="4" />
            </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 {
    created() {

    }
}
</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-tem1/bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
    }
    .header{
        width: 100%;
        height: 12vh;
        // border: 1px solid #fff;
        text-align: center;
        position: relative;
        color: #ffffff;
        margin-top: 2vh;
    }
    .header .header-img{
        width: 58vw;
        height: 5.5vh;
        margin-top: 3.9vh;
    }
    .header .header-title{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .header .header-title .header-title1{
        font-family: Alibaba PuHuiTi;
        font-size: 28px;
        font-weight: 600;
        height: 6.7vh;
        line-height: 6.7vh;
        // border-bottom: 1px solid #fff;
    }
    .header .header-title .header-title2{
        font-family: Alibaba PuHuiTi;
        font-size: 18px;
        font-weight: 500;
        height: 2.9vh;
        padding-top: 0.3vh;
    }
    .main{
        width: 100%;
        height: 84vh;
        // border: 1px solid #fff;
        margin-top: 1vh;
    }
    .main .main-box{
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        float: left;
        position: relative;
    }
    .main .main-box1{
        width: 22vw;
        height: 83vh;
        background-image: url(../images/screen-tem1/left.png);
        margin: 0 1.5vw;
    }
    .main .main-box2{
        width: 22vw;
        height: 83vh;
        background-image: url(../images/screen-tem1/left.png);
        margin: 0 1.5vw;
        float: right;
    }
    .main-box3{
        width: 50vw;
        height: 40.7vh;
        background-image: url(../images/screen-tem1/middle.png);
        margin-bottom: 1.2vh;
    }
    .main-box4{
        width: 50vw;
        height: 40.7vh;
        background-image: url(../images/screen-tem1/middle.png);
    }
</style>