pingAnQiYeWeb/src/views/archives/monitor.vue

<template>
    <div class="mainBox">
        <div class="topZS"></div>
        <div class="title">
            实时监控（<span>{{ }}</span>）
        </div>
        <div class="bottomZS"></div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 300px;
    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
    background-size: 100% 100%;
    padding: 55px 20px 20px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    margin-top: 20px;

    .bottomZS {
        position: absolute;
        width: 100%;
        height: 30px;
        bottom: 3px;
        left: 0;
        background: url("~@/assets/companyFile/装饰0921.png") no-repeat;
        background-size: 100% 100%;
        transform: rotateX(180deg);
    }

    .topZS {
        position: absolute;
        width: 100%;
        height: 30px;
        top: 3px;
        left: 0;
        background: url("~@/assets/companyFile/装饰0921.png") no-repeat;
        background-size: 100% 100%;
    }

    .title {
        position: absolute;
        top: 14px;
        left: 20px;
        width: 122px;
        height: 36px;
        line-height: 36;
        text-align: center;
        font-size: 16px;
        color: #EBFFF4;
        letter-spacing: 2px;
        line-height: 36px;
        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
        font-weight: 400;

        span {
            color: #FF9191;
        }
    }

}
</style>