shanxi_control/src/components/panel/panel-sand-toolbar.vue

<template>
    <div class="com-panel-sand">
        <div class="com-panel-sand-header font-sm white">
            {{ title }}<div class="com-panel-sand-sub-title"><slot name="tools"></slot></div>
        </div>
        <div class="com-panel-body">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "com-panel-sand-toolbar",
    componentName: "com-panel-sand-toolbar",
    props: {
        // 标题
        title: {
            type: String,
            default: "",
        },
    },
};
</script>
<style lang="less">
.com-panel-sand {
    background: #1a1f2fCC;
    padding: 0 1.481vh 1.481vh 1.481vh;
    border-top: 1px solid #15a952;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: #15a952;
        right: -2.5px;
        top: -2.5px;
    }

    .com-panel-sand-header {
        text-align: center;
        position: relative;
        padding: 0.833vh 0;
        border-bottom: 1px solid #15a95266;

        &::after,
        &::before {
            content: "";
            position: absolute;
            bottom: -1px;
            width: 15px;
            height: 1px;
            background: #15a952;
        }

        &::after {
            left: 0;
        }

        &::before {
            right: 0;
        }

        .com-panel-sand-sub-title {
            position: absolute;
            right: 0;
            top: 0.833vh;
        }
    }
}
</style>