qimall/backend/views/components/common/diy/style-components/merchant-info/style3.php

<template id="merchant-info-style3">
    <div class="merchant-info-style3">
        <diy-store-info 
            :list="merchData.merchantList" 
            :component-style="componentStyle" 
            :computed-style="computedStyle" 
            :merch-data="merchData"
            :btn-style="btnStyle"
            :width="40"
            :height="40"
            :sale-type="2"
            :show-address="false"
            :show-desc="false"
        >
            <template v-slot="{ goodsTitleColor, goodsPriceColor }">
                <div class="merch-info-goods">
                    <div class="info-goods-item" v-for="(it, i) in 5">
                        <div class="goods-img" style="background: url(/resources/img/decorate/default_picture.png)"></div>
                        <div class="goods-title over2" :style="{color: goodsTitleColor}">这里是商品标题这里是商品标题这里是商品标题</div>
                        <div class="goods-price" :style="{color: goodsPriceColor}">￥20</div>
                    </div>
                </div>
            </template>
        </diy-store-info>
    </div>
</template>

<script>
    Vue.component('merchant-info-style3', {
        name: "merchant-info-style3",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            btnStyle: {
                type: Object,
                default: () => {}
            },
            componentStyle: {
                type: Object,
                default: () => {}
            },
            computedStyle: {
                type: Object,
                default: () => {}
            },
            merchData: {
                type: Object,
                default: () => {}
            }
        },
        template: '#merchant-info-style3',
    });
</script>

<style>
    .merch-info-goods {
        position: relative;
        width: 100%;
        display: flex;
        overflow-x: auto;
        box-sizing: border-box;
        margin: 0 12px;
    }
    .info-goods-item {
        width: 100px;
        height: 164px;
        border-radius: 4px;
        float: none;
        flex-shrink: 0;
        margin-right: 8px;
        overflow: hidden;
    }
    .info-goods-item .goods-img {
        width: 100px;
        height: 100px;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: 50%;
    }
    .info-goods-item .goods-title {
        font-size: 12px;
        margin-top: 4px;
    }
    .info-goods-item .goods-price {
        font-size: 11px;
        font-weight: 700;
        color: #fd463e;
        margin-top: 4px;
    }
    ::-webkit-scrollbar {
        height: 5px;
    }
</style>