Cold_putoutstorage_web/src/components/bg.vue

<template>
    <div class="bg">
        <div class="bg-tit">
            <div style="display: flex;align-items: center;flex: 1;">
                <markGreen></markGreen>
                <el-text style="margin-left: 20px;" tag="b">
                    <slot name="tit">{{props.istitle}}</slot>
                </el-text>
            </div>
            <slot name="btn"></slot>
        </div>
        <slot name="bg"></slot>
    </div>
</template>
<script setup lang="ts">
import markGreen from "@/components/mark-green.vue";
const props = defineProps({
  istitle: {
    type: String,
    default: () => '',
  },
})
</script>

<style lang="scss">
.bg {
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    overflow: hidden;
    color: var(--el-text-color-primary);
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light);
    --el-card-border-radius: 4px;
    --el-card-bg-color: var(--el-fill-color-blank);
    padding: var(--y-padding);
    margin-bottom: var(--y-margin);

    &-tit {
        padding: var(--y-padding) 0;
        border-bottom: 1px solid var(--el-card-border-color);
        box-sizing: border-box;
        margin-bottom: var(--y-margin);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}</style>