qimall/backend/views/components/common/diy/style-components/title-block/style1.php

<template id="title-block-style1">
    <div class="title-block-style1" flex="cross:center">
        <!-- 图片位置 -->
        <div class="title-block-line" :style="{background: computedStyle.titleColor}"></div>
        <div class="title" :style="{color: computedStyle.titleColor}">{{title}}</div>
        <div class="title-block-line" :style="{background: computedStyle.titleColor}"></div>
    </div>
</template>

<script>
    Vue.component('title-block-style1', {
        name: "title-block-style1",
        props: {
            title: {
                type: String,
                default () {
                    return "标题"
                }
            },
            computedStyle: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#title-block-style1',
    });
</script>

<style scoped lang="scss">
    .title-block-style1 {
        height: 33px;
        justify-content: center;
        .title-block-line {
            width: 29px;
            height: 1px;
            background-color: #000;
        }
        .title {
            margin: 0 10px;
            font-size: 14px;
        }
    }

</style>