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

<template id="title-block-style3">
    <div class="title-block-style3" flex="cross:center">
        <!-- 图片位置 -->
        <div class="title-block-line" :style="{background: computedStyle.titleColor}"></div>
        <div class="title-block-icon cust-icon icon-sijiaoxing" style="margin-left: 4px;"></div>
        <div class="title" :style="{color: computedStyle.titleColor}">{{title}}</div>
        <div class="title-block-icon cust-icon icon-sijiaoxing" style="margin-right: 4px;"></div>
        <div class="title-block-line" :style="{background: computedStyle.titleColor}"></div>
    </div>
</template>

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

<style scoped lang="scss">
    .title-block-style3 {
        height: 33px;
        justify-content: center;
        .title-block-line {
            width: 29px;
            height: 1px;
            background-color: #EB3534;
        }
        .title-block-icon {
            font-size: 10px;
			transform: scale(0.8, 0.8);
            color: #EB3534;
        }
        .title {
            margin: 0 10px;
            font-size: 14px;
        }
    }

</style>