qimall/addons/Happiness/backend/views/components/diy/style-components/style1.php

<template id="happiness-store-goods-style1">
    <div class="happiness-store-goods-style" :style="{background: bgColor}">
        <div :style="[groupBox]">
            <div class="happiness-goods-title" :style="[titleStyle]" v-if="showTitle">{{ title || '为您推荐' }}</div>
            <div class="happiness-store-goods-list" flex="main:justify wrap:wrap">
                <div class="happiness-goods-column" v-for="(it, i) in goodsList" :key="i" :style="[goodsStyle]">
                    <div class="column-imgs">
                        <el-image style="width: 100%;height: 171px;" class="goods-image" :src="it.cover_pic"></el-image>
                    </div>
                    <div class="goods-content">
                        <div class="goods-name over2">{{ it.goods_name }}</div>
                        <div class="goods-tags-item" flex="cross:center">
                            <div class="goods-save">下单可获得￥{{ it.sheng }}养老金</div>
                        </div>
                        <div class="goods-price">￥{{ it.group_buy_price }}</div>
                    </div>
                    <div class="goods-btn" :style="[btnStyle]">+</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('happiness-store-goods-style1', {
        name: "happiness-store-goods-style1",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            goodsList: {
                type: Array,
                default: () => []
            },
            showTitle: { // 是否展示标题
                type: Number,
                default: 0
            },
            title: { // 标题
                type: String,
                default: ''
            },
            titleStyle: { // 标题的样式
                type: Object,
                default: () => {}
            },
            groupBox: { // 最外层样式
                type: Object,
                default: () => {}
            },
            goodsStyle: { // 商品的样式
                type: Object,
                default: () => {}
            },
            btnStyle: { // 按钮的样式
                type: Object,
                default: () => {}
            },
            bgColor: {
                type: String,
                default: ''
            }
        },
        template: '#happiness-store-goods-style1',
        data() {
            return {
                imgUrl: '/resources/img/decorate/happiness/',
                defaultImg: '/resources/img/decorate/default_picture.png'
            }
        },
    });
</script>

<style>
    .happiness-store-goods-style {
        position: relative;
        overflow: hidden;
    }

    .happiness-store-goods-list {
        margin-left: 10px;
        margin-right: 10px;
        background-color: transparent;
    }

    .happiness-goods-column {
        position: relative;
        width: calc((100% - 8px) / 2);
        margin-bottom: 8px;
        border-radius: 8px;
        overflow: hidden;
        background-color: #fff;
    }

    .column-imgs {
        position: relative;
        width: 100%;
        height: 171px;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
    }

    .happiness-store-goods-list .goods-time {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(12, 12, 12, 0.4);
        color: #fff;
        font-size: 11px;
        padding: 8px 12px;
    }

    .happiness-store-goods-list .goods-content {
        padding: 8px;
    }

    .happiness-store-goods-list .goods-name {
        font-size: 13px;
        color: #0C0C0C;
        padding-top: 6px;
        min-height: 40px;
    }

    .happiness-store-goods-list .goods-tags-item {
        font-size: 10px;
        padding-top: 4px;
    }

    .happiness-store-goods-list .goods-people {
        min-width: 50px;
        padding: 2px 0;
        text-align: center;
        /* padding: 2px 8px; */
        color: #F69E19;
        border-radius: 16px;
    }

    .happiness-store-goods-list .goods-save {
        color: #DB0505;
        border-radius: 5px;
        overflow: hidden;
        padding: 2px 8px;
		white-space: nowrap;
        border:1px solid #DB0505;
    }

    .happiness-store-goods-list .goods-origin {
        font-size: 11px;
        color: #707070;
        padding-top: 12px;
    }

    .happiness-store-goods-list .goods-price {
        color: #DB0505;
        font-size: 16px;
        margin-top: 10px;
    }

    .happiness-store-goods-list .goods-btn {
        position: absolute;
        bottom: 5px;
        right: 12px;
        width: 25px;
        height: 25px;
        background: linear-gradient(32deg, #DB0505 0%, #EF5E1E 100%);
        border-radius:50px;
        text-align: center;
        line-height: 25px;
        color: #FEF8F8;
        font-size: 12px;
    }
</style>