一个暗色的大屏框架demo

<template>
    <div class="datav">
        <dv-full-screen-container>
            <div class="main">
                <div class="header">
                    <div class="title">
                        <span class="title-text">DEMO</span>
                    </div>
                    <div class="header-left">
                        <el-button type="primary" round @click="onBack">返回</el-button>
                    </div>
                    <div class="header-right">
                        <span class="time">{{ time }}</span>
                    </div>
                </div>
                <div class="viewport">
                    <template>
                        <div class="screen-left">
                            <div class="panel top">
                            </div>
                            <div class="panel center">
                            </div>
                            <div class="panel bottom">
                            </div>
                        </div>
                    </template>
                    <template>
                        <div class="screen-center">

                        </div>
                    </template>
                    <template>
                        <div class="screen-right">
                            <div class="panel top">
                            </div>
                            <div class="panel center">
                            </div>
                            <div class="more">
                                <div class="panel left">
                                </div>
                                <div class="panel right">
                                </div>
                            </div>
                            <div class="panel bottom">
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </dv-full-screen-container>
    </div>

</template>

<script>
import { parseTime } from "@/utils/utils.js"
export default {
    name: "BigScreen",
    data() {
        return {
            time: "",
            timer: null,
        };
    },
    created() {
        this.getCurrentTime();
        this.createTimer();
    },
    beforeDestroy() {
        this.clearTimer();
    },
    methods: {
        getCurrentTime() {
            this.time = parseTime(new Date(), '{yy}-{mm}-{dd} {hh}:{ii}:{ss}')
        },
        createTimer() {
            this.timer = setInterval(() => {
                this.getCurrentTime();
            }, 1000);
        },
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        onBack() {
            this.$router.push({ path: "/index" });
        },
    }
};
</script>

<style lang="scss" scoped>
.title {
    position: relative;
    // width: 500px;
    text-align: center;
    background-size: cover;
    color: transparent;
    height: 60px;
    line-height: 50px;

    .title-text {
        font-size: 50px;
        font-weight: 900;
        letter-spacing: 10px;
        width: 100%;
        background: linear-gradient(
            92deg,
            #0072ff 0%,
            #00eaff 48.8525390625%,
            #01aaff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.datav {
    width: 100%;
    height: 100%;
    background-color: #101129;
}
#dv-full-screen-container {
    background-color: #101129;
    overflow-y: auto;
    position: unset;
}
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header {
    width: 100%;
    .header-center {
        width: 100%;
    }
    .header-left {
        position: absolute;
        top: 4%;
        left: 2%;
    }
    .header-right {
        position: absolute;
        top: 3%;
        right: 2%;
        height: 45px;
        display: flex;
        align-items: flex-end;
        justify-items: center;
        color: #ffffff;
        float: left;
        font-size: 16px;
        .time {
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            color: #fff; /* 文本颜色 */
        }
    }
}
.viewport {
    width: 100%;
    height: 93%;
    display: flex;
    position: absolute;
    top: 7%;
}
.screen-left {
    flex: 20;
    display: flex;
    flex-direction: column;
    .top {
        flex: 15;
    }
    .center {
        flex: 60;
    }
    .bottom {
        flex: 30;
    }
}

.screen-center {
    flex: 80;
    display: flex;
    flex-direction: column;
}
.screen-right {
    flex: 20;
    display: flex;
    flex-direction: column;
    .top {
        flex: 15;
    }
    .center {
        flex: 30;
    }
    .more {
        flex: 25;
        display: flex;
        flex-direction: row;
        .left {
            flex: 1;
        }
        .right {
            flex: 1;
        }
    }
    .bottom {
        flex: 30;
    }
}
.panel {
    /* 边框 */
    flex: 1;
    box-sizing: border-box;
    border: 2px solid rgb(0, 174, 255);
    border-image: url("~@/assets/images/border.png") 51 38 21 132;
    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
    position: relative;
    margin: 0.833rem;
    display: flex;
}
</style>

其中的parseTime方法：

// 日期格式化
export function parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
            // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}

效果：