qimall/addons/DepositPresale/backend/views/default/components/style-components/diy-style-contain.php

<template id="diy-style-contain">
    <div class="diy-style-contain" :style="containStyle">
        <div class="flex flex-y-center flex-x-sw" :style="defaultStyle">
            <div v-if="showTitle" class="dsc-title" :style="titleStyle">{{title}}</div>
            <div>
                <slot name="right"></slot>
            </div>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    /**
     * 样式容器组件
     *
     */
    Vue.component('diy-style-contain', {
        template: '#diy-style-contain',
        name: 'diy-style-contain',
        props: {
            showTitle: {
                type: Boolean,
                default: true,
            },
            title: {
                type: String,
                default: () => "标题"
            },
            titleStyle: {
                type: Object,
                default: () => {}
            },
            containStyle: {
                type: Object,
                default: () => {}
            },
        },
        computed: {
            defaultStyle() {
                var obj = {}
                if (this.showTitle) {
                    obj = {
                        margin: "0 0 20px"
                    }
                }
                return obj
            },
        }
    });
</script>

<style scoped>
    .diy-style-contain {
        position: relative;
        padding: 20px;
    }

    .dsc-title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
    }

    .flex {
        display: flex;
    }

    .flex-y-center {
        align-items: center;
    }

    .flex-x-sw {
        justify-content: space-between;
    }
</style>