qimall/backend/views/components/common/diy/style-components/diy-center-menu.php

<template id="diy-center-menu">
    <div class="diy-center-box" :style="{background: bottomBg}">
        <div class="diy-center-list" :style="[computedStyle.searchIpts]">
            <div class="diy-center-cell" flex="cross:center" :style="{background: titleBg}" v-if="title">
                <div class="cell-title" :style="{color: titleColor}">{{ title }}</div>
                <div class="cell-subtitle" :style="{color: subtitleColor}" v-if="subTitle">{{ subTitle }}</div>
                <i v-if="icon" :class="icon" :style="{color: subtitleColor, fontSize: iconSize + 'px'}" style="margin-top: 2px;"></i>
            </div>
            <div class="diy-center-menu-box" flex="cross:center wrap:wrap" :style="[menuBoxStyle]">
                <div class="order-menu-items" :style="{width: itemWidth}" v-for="(item, index) in list" :key="index">
                    <el-image class="order-menu-img" :style="{maxWidth: widthImg + 'px', height: heightImg + 'px'}"  :src="imgToUrl(item.img)"></el-image>
                    <div class="order-menu-text" :style="{color: btnColor}">{{ item.btnText }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    Vue.component('diy-center-menu', {
        name: "diy-center-menu",
        template: "#diy-center-menu",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            list: { // 列表
                type: Array,
                default: () => []
            },
            title: { // 标题
                type: String,
                default: ''
            },
            subTitle: { // 副标题
                type: String,
                default: ''
            },
            icon: { // 图标
                type: String,
                default: ''
            },
            iconSize: { // 图标的大小
                type: Number,
                default: 12
            },
            bottomBg: { // 底部背景
                type: String,
                default: ''
            },
            titleBg: { // 标题背景
                type: String,
                default: ''
            },
            contentBg: { // 内容背景
                type: String,
                default: ''
            },
            titleColor: { // 标题颜色
                type: String,
                default: ''
            },
            subtitleColor: { // 副标题颜色
                type: String,
                default: ''
            },
            btnColor: { // 按钮
                type: String,
                default: ''
            },
            widthImg: { // 图片的宽度
                type: Number,
                default: 24
            },
            heightImg: { // 图片的高度
                type: Number,
                default: 24
            },
            itemWidth: { // 按钮的宽度
                type: String,
                default: '20%'
            },
        },
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle
            },
            menuBoxStyle(){
                let { conRadiusSets } = this.activeItem.computedStyle
                let result = {
                    background:this.contentBg,
                    ...conRadiusSets
                }
                return result
            }
        },
        data() {
            return {
                static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>'+'/static',
            }
        },
        methods: {
            imgToUrl(url){
                if(url && url.indexOf('http') ==-1 && url.indexOf('resources/img') == -1){
                    return this.static_img_prefix + url
                } 
                return url
               
            },

        }
    });
</script>

<style>
    .diy-center-box,
    .diy-center-list {
        position: relative;
        overflow: hidden;
    }
    .diy-center-cell {
        padding: 20px 10px 12px;
        align-items: center;
        font-size: 14px;
    }
    .cell-title {
        font-size: 15px;
        font-weight: 700;
    }
    .cell-subtitle {
        flex: 1;
        text-align: right;
        font-size: 13px;
        color: #666;
    }

    .diy-center-menu-box {
        padding: 0 0 20px;
        text-align: center;
        background: #fff;
    }
    .order-menu-items {
        padding: 20px 0 0;
    }
    .order-menu-img {
        max-width: 30px;
        height: 25px;
    }
    .order-menu-text {
        font-size: 12px;
        padding-top: 10px;
        color: #333;
    }
</style>