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

<template id="screen-contain">
    <div id="screen-contain">
        <div class="screen-container">
            <div class="screen-header">
                <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>
            <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%;
        min-width: 1620px;
        padding: 10px;
        background-color: #01021D;
        box-sizing: border-box;
    }

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

    .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;
    }

    .header-right .parallelogram {
        display: none;
        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%;
    }
    .header-left .right-top-button{
        border-radius: 12px;
        font-size: 24px;
        padding: 10px 65px;
        margin-top: 20px;
        margin-left: -15px;
        background: url("/resources/img/dirve/header_button.png") no-repeat;
        background-size: 100% 100%;
    }
    .header-right .right-top-button{
        position: relative;
        border-radius: 12px;
        font-size: 24px;
        padding: 10px 65px;
        margin-top: 20px;
        margin-left: -15px;
    }
    .header-right .right-top-button::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: url("/resources/img/dirve/header_button.png") no-repeat;
        background-size: 100% 100%;
        z-index: -1;
        transform: scaleY(-1);
    }
</style>