qimall/backend/modules/mall/views/census/components/screen-contain.php

<template id="screen-contain">
    <div id="screen-contain">
        <div class="screen-container">
            <div class="header-left">
                <img src="/resources/img/dirve/triangle_left.png" class="triangle">
                <div class="parallelogram-c">
                    <div class="parallelogram">
                        <div class="paral-border paral-border-top"></div>
                        <div class="paral-border paral-border-right"></div>
                        <div class="paral-border paral-border-bottom"></div>
                        <div class="paral-border paral-border-left"></div>
                    </div>
                    <div class="text">
                        <slot v-if="$slots.left" name="left"></slot>
                        <span v-else>{{textLeft}}</span>
                    </div>
                </div>
            </div>
            <div class="header-right">
                <img src="/resources/img/dirve/triangle_right.png" class="triangle">
                <div class="parallelogram-c">
                    <div class="parallelogram">
                        <div class="paral-border paral-border-top"></div>
                        <div class="paral-border paral-border-right"></div>
                        <div class="paral-border paral-border-bottom"></div>
                        <div class="paral-border paral-border-left"></div>
                    </div>
                    <div class="text">
                        <slot v-if="$slots.right" name="right"></slot>
                        <span v-else>{{textRight}}</span>
                    </div>
                </div>
            </div>
            <div v-if="isFix" class="isFix"></div>
            <!-- 内容 -->
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('screen-contain', {
        name: "screen-contain",
        template: '#screen-contain',
        props: {
            textLeft: {
                type: String,
                default () {
                    return "总裁驾驶窗"
                }
            },
            textRight: {
                type: String,
                default () {
                    return "总裁驾驶窗"
                }
            },
            // 是否需要填充浮动空白
            isFix: {
                type: Boolean,
                default () {
                    return true
                }
            },
        },
        data() {
            return {}
        }
    })
</script>

<style>
    .el-main {
        padding: 0;
    }

    #screen-contain {
        min-height: 100%;
        padding: 10px;
        background-color: #01021D;
        box-sizing: border-box;
    }

    .screen-container {
        position: relative;
        min-height: 100%;
        min-width: 1800px;
        border-top: 4px #001A72 solid;
        background: url('/resources/img/dirve/dirve_bg.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .isFix {
        height: 80px;
    }

    .header-left,
    .header-right {
        position: absolute;
        display: flex;
        top: -4px;
        left: 0;
        height: 80px;
        padding: 0 40px;
        align-items: center;
        font-size: 30px;
        background-color: #01021D;
    }

    .header-right {
        left: initial;
        right: 0;
    }

    .header-left>.triangle,
    .header-right>.triangle {
        position: absolute;
        top: 0;
        left: 0;
        width: 70px;
        height: 70px;
    }

    .header-right>.triangle {
        left: initial;
        right: 0;
    }

    /* 平行四边形 */

    .header-left .parallelogram-c,
    .header-right .parallelogram-c {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        align-items: center;
        padding: 0 40px;
    }

    .parallelogram-c>.text {
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .header-left .parallelogram,
    .header-right .parallelogram {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: radial-gradient(circle, #001A72 0%, #02021F 100%);
        transform: skew(-45deg);
    }

    .header-right .parallelogram {
        transform: skew(45deg);
    }

    .header-left .paral-border,
    .header-right .paral-border {
        position: absolute;
        background: #001A72;
    }

    .header-left .paral-border-top,
    .header-right .paral-border-top {
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
    }

    .header-left .paral-border-right {
        bottom: 0;
        right: 0;
        width: 4px;
        height: 75%;
    }

    .header-right .paral-border-right {
        top: 0;
        right: 0;
        width: 4px;
        height: 75%;
    }

    .header-left .paral-border-bottom,
    .header-right .paral-border-bottom {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
    }

    .header-left .paral-border-left {
        top: 0;
        left: 0;
        width: 4px;
        height: 75%;
    }

    .header-right .paral-border-left {
        bottom: 0;
        left: 0;
        width: 4px;
        height: 75%;
    }
</style>