qimall/addons/Store/backend/views/components/diy/store-commodity-group/preview.php

<template id="store-commodity-group-preview">
    <div class="store-commodity-group-preview" :style="{background: computedStyle.searchBox, }">
    <div class="filter-box" v-if="filterList.length">
            <div class="filter-item" :style="[sortType == item.code ? selectedFilterStyle:filterStyle]"   v-for="item in filterList">
                {{item.name}}
                <div class="filter-arrow">
                    <div class="icon up" :class="{ active: sortType == item.code && sortOrder == 'asc' }">
                        <i class="el-icon-arrow-up"></i>
                    </div>
                    <div class="icon down active" :class="{ active: sortType == item.code && sortOrder == 'desc' }">
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 默认数据 -->
        <div class="flex-wrap" :style="{flexWrap: flexWrap, ...contianStyle}" v-if="showDefaultData">
            <div :class="[styleTypeClassArr, zoomComputed(index)]" v-for="(item,index) in defaultList" :key="index">
                <div class="diy-goods-basic" :style="goodsStyle">
                    <div class="diy-goods-image">
                        <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                        <el-image :src="default_src"></el-image>
                        <div class="store_distance" v-if="permession.store_distance.show">
                            <span class="store_distance_text"  :style="{backgroundColor: permession.store_distance.color }">门店</span>
                            <span class="store_distance_num">12.5km</span>
                        </div>
                    </div>
                    <div class="detail">
                        <div class="name" style="color: rgb(55, 56, 58);" :style="{color: permession.showTitle.color }" v-if="permession.showTitle.show">
                            这里是商品标题
                        </div>
                        <div class="subtitle" style="color: rgb(153, 156, 167);" :style="{color: permession.showSubTitle.color }" v-if="permession.showSubTitle.show">
                            这里是商品副标题
                        </div>
                        <div class="diy-sale">
                            <div class="diy-info">
                                <div class="diy-price">
                                    <span class="diy-sale-price" style="color: rgb(253, 70, 62);" :style="{color: permession.goodsPrice.color }" v-if="permession.goodsPrice.show && (activeItem.data.style != 6 || index == 1) ">
                                        ￥<span>20</span>
                                    </span>
                                    <span class="diy-original-price" style="color: rgb(153, 156, 167);" :style="{color: permession.originalPrice.color }" v-if="!permession.memberPrice.show && permession.originalPrice.show">
                                        <span>￥40</span>
                                    </span>
                                    <span class="member-price" v-if="permession.memberPrice.show">
                                        <span class="member-price-box">
                                            <span class="price-icon">VIP</span>
                                        <span class="price-num" :style="{color: permession.memberPrice.color }"><span class="price-unit">￥</span><span>13</span></span>
                                        </span>
                                    </span>
                                    <span v-for="(value, index) in addonsPermessionFields">
                                        <span v-if="permession[value.key].show" :style="{color: permession[value.key].color }">
                                            <span>{{value.prefix_text}}{{value.name}}</span><span>25</span>
                                        </span>
                                    </span>
                                </div>
                                <div class="diy-sold">
                                    <span class="diy-sales"  :style="{color: permession.goodsSales_num.color || '#999'}" v-if="permession.goodsSales_num.show">已售88</span>
                                </div>
                            </div>
                            <div class="goods-buy" :style="goodsBuyStyle" v-if="isShowGoodsBuy">
                                <span v-if="!goodsBuySrc">{{goodsBuyText}}</span>
                                <img :src="goodsBuySrc" v-else>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 有数据 -->
        <div class="flex-wrap" :style="{flexWrap: flexWrap, ...contianStyle}" v-else>
            <div :class="[styleTypeClassArr, zoomComputed(index)]" v-for="(item,index) in goodsList" :key="index">
                <div class="diy-goods-basic" :style="goodsStyle">
                    <div class="diy-goods-image">
                        <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                        <div class="img-contain">
                            <el-image class="test-img" :src="item.cover_pic" :style="goodsStyle"></el-image>
                        </div>
                        <view class="store_distance" v-if="permession.store_distance.show">
                                <span class="store_distance_text"  :style="{backgroundColor: permession.store_distance.color }">门店</span>
                                <span class="store_distance_num">{{item.distance}}km</span>
                        </view>
                    </div>
                    <div class="detail" v-if="showDetail(index)">
                        <div class="name" style="color: rgb(55, 56, 58);" :style="{color: permession.showTitle.color }" v-if="permession.showTitle.show">
                            {{item.goods_name}}
                        </div>
                        <div class="subtitle" style="color: rgb(153, 156, 167);" :style="{color: permession.showSubTitle.color }" v-if="permession.showSubTitle.show">
                            {{item.subtitle || '暂未设置副标题'}}
                        </div>
                        <div class="diy-sale">
                            <div class="diy-info">
                                <div class="diy-price">
                                    <span class="diy-sale-price" style="color: rgb(253, 70, 62);" :style="{color: permession.goodsPrice.color }" v-if="permession.goodsPrice.show && (activeItem.data.style != 6 || index == 1) ">
                                        ￥<span>{{item.price}}</span>
                                    </span>
                                    <span class="diy-original-price" style="color: rgb(153, 156, 167);" :style="{color: permession.originalPrice.color }" v-if="!permession.memberPrice.show && permession.originalPrice.show">
                                        <span>￥{{item.original_price}}</span>
                                    </span>
                                    <span class="member-price" v-if="permession.memberPrice.show">
                                        <span class="member-price-box">
                                            <span class="price-icon">VIP</span>
                                        <span class="price-num" :style="{color: permession.memberPrice.color }"><span class="price-unit">￥</span><span>{{item.member_price}}</span></span>
                                        </span>
                                    </span>
                                    <div class="store_distance" style="color: rgb(153, 156, 167);" :style="{color: permession.store_distance.color }" v-if="permession.store_distance.show">
                                    {{item.distance}}km
                                    </div>
                                    <span v-for="(value, index) in addonsPermessionFields">
                                        <span v-if="permession[value.key].show" :style="{color: permession[value.key].color }">
                                            <span>{{value.prefix_text}}{{value.name}}</span><span>{{item[value.key]}}</span>
                                        </span>
                                    </span>
                                </div>
                                <div class="diy-sold">
                                    <span class="diy-sales" style="color: rgb(153, 156, 167);" :style="{color: permession.goodsSales_num.color }" v-if="permession.goodsSales_num.show">已售{{item.sales_num}}</span>
                                </div>
                            </div>
                            <div class="goods-buy" :style="goodsBuyStyle" v-if="isShowGoodsBuy">
                                <span v-if="!goodsBuySrc">{{goodsBuyText}}</span>
                                <img :src="goodsBuySrc" v-else>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('store-commodity-group-preview', {
        name: "store-commodity-group-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#store-commodity-group-preview',
        computed: {
            showDefaultData() {
                var boo = true
                if (this.activeItem.data.chooseGoods != 2) {
                    boo = false
                    if (!this.goodsList.length) {
                        boo = true
                    }
                }
                return boo
            },
            flexWrap() {
                let acceptArr = [6, 7]
                return acceptArr.indexOf(this.activeItem.data.style) != -1 ? 'nowrap' : ''
            },
            default_src() { // 默认图片
                var type = this.activeItem.data.style || 1
                return type == 1 ? 'resources/img/decorate/default_img.png' : 'resources/img/decorate/default_picture.png'
            },
            contianStyle() {
                var style = this.filterKey(this.activeItem.computedStyle.searchIpts, ["margin"])
                return style
            },
            goodsStyle() {
                let tabItem = this.computedStyle.tabItem
                let other = this.filterKey(this.computedStyle.searchIpts, ["border"])
                let style = {
                    'background': this.computedStyle.iptBg,
                    ...other
                }
                if (tabItem && tabItem.value == 'border') style.border = '1px solid ' + (tabItem ? tabItem.color : 'transparent')
                if (tabItem && tabItem.value == 'shandow') style.boxShadow = tabItem ? '0 0 10px ' + tabItem.color : '0 0 10px rgba(226, 231, 244, 0.7)'
                return style
            },
            styleTypeClassArr() {
                var type = this.activeItem.data.style || 1
                var contentClass = []
                var result = {
                    1: 'diy-goods-contain-full',
                    2: 'diy-goods-contain',
                    3: 'diy-goods-contain1',
                    4: 'diy-goods-contain2',
                    5: 'diy-goods-contain3',
                    6: 'diy-goods-contain4',
                    7: 'diy-goods-contain5'
                }
                return contentClass.concat(result[type])
            },
            computedStyle() {
                return this.activeItem.computedStyle
            },
            searchData() {
                return this.activeItem.data
            },
            // 角标
            isShowHot() {
                var angleMark = this.activeItem.data.angleMark || null
                return angleMark && angleMark.label != 1
            },
            hotStyle() {
                var angleMark = this.activeItem.data.angleMark || null
                if (angleMark.label == 3 && angleMark.customImgUrl) {
                    return {
                        width: "76px",
                        height: "76px",
                        background: `url(${angleMark.customImgUrl}) no-repeat`,
                        backgroundSize: "76px"
                    }
                }
                return {}
            },
            hotClass() {
                var angleMark = this.activeItem.data.angleMark || null
                var obj = ["diy-goods-hot"]
                if (angleMark) {
                    var name = ["", "diy-goods-hot3", "diy-goods-hot2", "diy-goods-hot1"]
                    if (angleMark.label == 2 && angleMark.angleMarkStyle) {
                        var key = name[angleMark.angleMarkStyle.label]
                        obj.push(key)
                    }
                }
                return obj
            },
            hotName() {
                var angleMark = this.activeItem.data.angleMark || null
                if (angleMark && !angleMark.angleMarkText && angleMark.label == 2) {
                    return "热卖"
                }
                return angleMark.angleMarkText
            },
            // 购物车
            isShowGoodsBuy() { // 是否显示购物车按钮
                var showShopCart = this.activeItem.data.showShopCart
                var type = this.activeItem.data.style || 1
                if (type == 6) {
                    return false
                }
                return !(showShopCart == 2)
            },
            goodsBuySrc() {
                var shopCartData = this.activeItem.data.shopCartStyle || {}
                var imgUrl = shopCartData.src
                if (shopCartData.label == 3 || shopCartData.label == 4) {
                    return imgUrl
                }
                return ""
            },
            goodsBuyStyle() {
                var shopCartStyle = this.activeItem.computedStyle.shopCartStyle || {}
                var shopCartData = this.activeItem.data.shopCartStyle || {}
                // 类型1尺寸
                var size = ["", "3px 7px", "6px 10px", "10px 16px"]
                var small = size[shopCartStyle.sizeType] || size[1]
                // 类型2/3/4尺寸
                var size1 = ["", "22px", "28px", " 36px"]
                var small1 = size1[shopCartStyle.sizeType] || size1[1]
                var imgUrl = shopCartData.src

                // 1 2 3 4
                var handleList = [{}, {
                    borderRadius: `${shopCartStyle.borderReduis || 0}px`,
                    backgroundColor: `${shopCartStyle.backgroundColor || '#fd463e'}`,
                    color: `${shopCartStyle.color || '#fff'}`,
                    border: `1px solid ${shopCartStyle.borderColor}`,
                    padding: small
                }, {
                    borderRadius: `50%`,
                    backgroundColor: `${shopCartStyle.backgroundColor || '#fd463e'}`,
                    color: `${shopCartStyle.color || '#fff'}`,
                    border: `1px solid ${shopCartStyle.borderColor}`,
                    width: small1,
                    height: small1,
                    lineHeight: small1
                }, ]
                if (shopCartData.label == 3 || shopCartData.label == 4) {
                    return {
                        width: small1,
                        height: small1,
                        lineHeight: small1
                    }
                }
                var result = handleList[shopCartData.label || 1]
                return result
            },
            goodsBuyText() {
                var shopCartStyle = this.activeItem.data.shopCartStyle || {}
                if (shopCartStyle.label == 2) {
                    return '+'
                } else if (shopCartStyle.label == 3 || shopCartStyle.label == 4) {
                    return ""
                }
                return shopCartStyle.text || "购买"
            },
            // 几种类型变化样式
            // 权限列表
            permession() {
                var obj = {
                    showTitle: {
                        show: true,
                        color: ""
                    },
                    showSubTitle: {
                        show: true,
                        color: ""
                    },
                    goodsPrice: {
                        show: true,
                        color: ""
                    },
                    originalPrice: {
                        show: true,
                        color: ""
                    },
                    memberPrice: {
                        show: true,
                        color: ""
                    },
                    goodsSales_num: {
                        show: true,
                        color: ""
                    },
                    store_distance: {
                        show: false,
                        color: ""
                    },
                }
                let addonsPermessionFields = this.addonsPermessionFields;

                addonsPermessionFields.forEach(function(value, index, arr) {
                    obj[value.key] = {
                        show: true,
                        color: ""
                    }
                })

                var data = this.activeItem.data.showContent || []
                var style = this.activeItem.data.style
                if (data.length) {
                    for (const key in obj) {
                        obj[key].show = false
                    }
                }
                data.map(item => {
                    var keyObj = {
                        1: {
                            key: 'showTitle',
                            filter: [1, 2, 3, 4, 5, 6, 7] // style支持的权限标识
                        },
                        2: {
                            key: 'showSubTitle',
                            filter: [1, 2]
                        },
                        3: {
                            key: 'goodsPrice',
                            filter: [1, 2, 3, 4, 5, 6, 7]
                        },
                        4: {
                            key: 'originalPrice',
                            filter: [1, 2, 3]
                        },
                        5: {
                            key: 'goodsSales_num',
                            filter: [1, 2, 3]
                        },
                        6: {
                            key: 'store_distance',
                            filter: [1, 2, 3, 4, 5, 6, 7]
                        },
                        0: {
                            key: 'memberPrice',
                            filter: [1, 2, 3]
                        }
                    }
                    addonsPermessionFields.forEach(function(value, index, arr) {
                        keyObj[value.label] = {
                            key: value.key,
                            filter: [1, 3]
                        }
                    })
                    var target = keyObj[item.label]
                    // 存在选中 - 继续style判断是否支持
                    if (style && target) {
                        if (target.filter.indexOf(style) != -1) {
                            obj[target.key].show = true
                            obj[target.key].color = item.color
                        }
                    }
                })
                return obj
            } ,
            filterStyle(){
                return {
                    borderColor:this.activeItem.computedStyle.titleColor,
                    color:this.activeItem.computedStyle.titleColor
                }
            },
            selectedFilterStyle(){
                return {
                    color:'#EB3534'
                }
            },
            filterList(){
                let defaultList = [{
                    name:'距离',
                    code:'distance'
                },
                {
                    name:'价格',
                    code:'price'
                },
                {
                    name:'销量',
                    code:'sales_num'
                },
                {
                    name:'评论',
                    code:'comment_num'   
                }]
                let { filterList } = this.activeItem.data
                let newFilterList = [];
                if(filterList){
                    defaultList.forEach(item=>{
                       if(filterList.includes(item.code)){
                        newFilterList.push(item)
                       }
                         
                    })
                } else {
                   newFilterList = defaultList;
                }
                if(newFilterList.length>0){
                    this.sortType = newFilterList[0].code
                }
                return newFilterList
            }
        },
        watch: {
            "activeItem.data.goods": {
                handler(newVal, oldVal) {
                    if (newVal && !deepEqual(newVal, oldVal)) {
                        const ids = newVal.map(item => {
                            return item.params.id
                        })
                        this.InitData(1, ids);
                        this.getGoodsList(ids)
                    }
                },
                immediate: true,
            },
            'activeItem.data': {
                handler(newVal, oldVal) {
                    if (!newVal) {
                        return false
                    }
                    
                    var newCommCate = newVal && newVal.commCate
                    var oldCommCate = oldVal && oldVal.commCate
                    if (newVal.chooseGoods == 2 && newCommCate) {
                        let { commCate } = newVal,count = 10;
                        if(commCate){
                            if(Array.isArray(commCate)){
                                count = newVal.cateNum
                            }else { //兼容原有逻辑
                                count = newCommCate.count
                            } 
                        }
                        this.defaultList = new Array(count).fill({})
                    } else {
                        this.defaultList = [{}]
                    }

                    // 会抛出警告
                    // if (newCommCate && newCommCate.count && (newCommCate.count == oldCommCate.count)) return false
                    // if (newCommCate && newCommCate.count) {
                    //     this.defaultList = new Array(newCommCate.count).fill({})
                    // } else {
                    //     this.defaultList = [{}]
                    // }
                },
                immediate: true
            }
        },
        data() {
            return {
                defaultList: [],
                goodsList: [],
                addonsPermessionFields: [],
                isExec: 0,
                sortType: 'distance',
				sortOrder: 'desc',
            }
        },
        mounted() {
            this.InitData(0);
        },
        methods: {
            async InitData(from, ids = []) {
                if (from == 1) {
                    await this.getBaseAddonsFields();
                    this.getGoodsList(ids);
                } else {
                    await this.getBaseAddonsFields();
                }

            },
            getGoodsList: function(ids) {
                console.log('ids',ids);
                let idsArray = ids.length>10?ids.slice(0,10):ids;
                let that = this;
                let limit = ids.length;
                let data = {
                    "site": 1,
                    "component": "goods",
                    "identify": "store-goods",
                    "limit": ids.length,
                    "id": JSON.stringify(idsArray)
                }
                let addonsFields = [];
                that.addonsPermessionFields.forEach(function(value, index, arr) {
                    addonsFields.push(value.key);
                })
                data['addonsFields'] = addonsFields;
                request({
                    params: {
                        r: '/mall/diy/get-components-data',
                        form: JSON.stringify([data])
                    },
                    method: 'get',
                }).then(res => {
                    const {
                        data
                    } = res.data
                    const result = []
                    ids.forEach((id, index) => {
                        if (data[id]) {
                            result.push(data[id])
                        }
                    })
                    that.goodsList = result
                })
            },
            zoomComputed(index) {
                const type = this.activeItem.data.style
                if (type == 6) {
                    if (index % 2 == 0) {
                        return "zoom"
                    }
                }
                return ""
            },
            showDetail(index) {
                const type = this.activeItem.data.style
                return !(type == 6 && index > 2)
            },
            filterKey(obj, keys) {
                var result = {}
                keys.forEach(key => {
                    for (const k in obj) {
                        if (k.indexOf(key) != -1) {
                            result[k] = obj[k]
                        }
                    }
                })
                return result
            },
            getBaseAddonsFields() {
                if (this.isExec == 1) return;
                return new Promise((resolve, reject) => {
                    request({
                        params: {
                            r: 'mall/diy/get-addons-fields',
                            type: 'permession_fields'
                        },
                        method: 'get',
                    }).then(e => {
                        if (e.data.code === 0) {
                            resolve()
                            if (e.data.data.length > 0 && this.isExec == 0) {
                                let that = this
                                e.data.data.forEach(function(value, index, arr) {
                                    that.addonsPermessionFields.push(value);
                                })
                            }
                        }
                        this.isExec = 1;
                    }).catch(e => {
                        console.log(e);
                        reject();
                    })
                })

            },
        }
    });
</script>

<style lang="scss" scoped>
    .store-commodity-group-preview {
        box-sizing: border-box;
        overflow: hidden;

        .flex-wrap {
            display: flex;
            flex-wrap: wrap;
        }

        .diy-goods-image {
            position: relative;
        }

        /* 角标 */
        .diy-goods-hot {
            position: absolute;
            top: 0;
            left: 0;
            transform: scale(.5);
            transform-origin: top left;
            color: #fff;
            font-size: 22px;
            z-index: 99;
        }

        .diy-goods-hot1 {
            width: 64px;
            height: 44px;
            line-height: 44px;
            padding-left: 4px;
            background: url("resources/img/decorate/store-commodity-group/common_label2_3.png") no-repeat;
        }

        .diy-goods-hot2 {
            width: 52px;
            height: 56px;
            line-height: 44px;
            text-align: center;
            background: url("resources/img/decorate/store-commodity-group/common_label2_2.png") no-repeat;
            background-size: 52px 56px;
        }

        .diy-goods-hot3 {
            top: -3px;
            width: 60px;
            height: 60px;
            line-height: 50px;
            background-size: 60px;
            padding-left: 4px;
            background: url("resources/img/decorate/store-commodity-group/common_label2.png") no-repeat;
        }

        /* 购物车按钮 */
        .diy-sale {
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }

        .diy-sale .diy-info {
            /* flex: 1; */
        }
        .diy-info {
            .diy-sales {
                font-size: 11px;
            }
        }

        .goods-buy {
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            align-self: flex-end;
        }

        .goods-buy img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .detail {
            display: flex;
            flex-wrap: wrap;
            padding: 8px 12px;
        }

        .detail .name {
            font-size: 14px;
            line-height: 18px;
            height: 36px;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .detail .subtitle {
            font-size: 12px;
            height: 16px;
            line-height: 16px;
            width: 100%;
            color: #999ca7;
            margin-bottom: 4px;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
        }
        .store_distance {
            position: absolute;
            bottom: 0;
            font-size: 11px;
            color: #FFF;
            border-radius: 2px;
            overflow: hidden;
            display: flex;
            .store_distance_text {
                background-color: #FF7300;
                padding: 0 6px;
            }
            .store_distance_num {
                background-color: rgba(000,000,000,0.6);
                padding: 0 4px 0 2px;
            }
        }
        .diy-sale-price {
            color: #fd463e;
            font-weight: 700;
        }

        .diy-sale-price span {
            font-size: 16px;
            line-height: 16px;
        }

        .diy-original-price {
            text-decoration: line-through;
        }

        .member-price {
		    height: 18px;
		    display: flex;
		    line-height: 18px;
		    border-radius: 4px;
		    display: inline-flex;
		    margin-top: 10px;
		    margin-bottom: 5px;
		    overflow: hidden;
	    }
	    .member-price-box {
		    display: flex;
		    border-radius: 5px;
		    background-color: #FCECD6;
	    }
	    .price-icon {
		    color: #FCECD6;
		    font-size: 11px;
		    font-weight: bold;
		    text-align:center;
		    background: linear-gradient( 90deg, #292220 0%, #4E372D 100%);
		    border-radius: 5px;
		    border-bottom-right-radius: 0;
		    padding: 0 6px;
	    }
	    .price-num {
		    color: #333;
		    font-size: 14px;
		    word-break: break-all;
		    line-height: 18px;
		    padding-left: 8px;
		    padding-right: 8px;
		    .price-unit {
			    font-size: 12px;
			    margin-left: -4px;
			    margin-right: -1px;
		    }
	    }

        /* 样式1 */
        .diy-goods-contain-full {
            width: 100%;
            margin: 0;
        }

        .diy-goods-contain-full .detail .name {
            height: 20px;
            max-height: 20px;
            margin-bottom: 4px;
        }

        /* 样式2 */
        .diy-goods-contain {
            width: 100%;
        }

        .diy-goods-contain .detail .name {
            height: 20px;
            max-height: 20px;
            margin-bottom: 4px;
        }

        .diy-goods-contain .diy-goods-image {
            float: left;
            width: 130px;
            height: 130px;
        }

        .diy-goods-contain .detail {
            margin-left: 130px;
            height: 130px;
            padding: 10px;
        }


        .diy-goods-contain .diy-original-price {
            display: block;
        }

        .diy-goods-image .el-image {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* 样式3 */
        .diy-goods-contain1 {
            width: 50%;
        }

        .diy-goods-contain1 .diy-original-price {
            display: block;
        }

        .diy-goods-contain1 .subtitle {
            display: none;
        }

        .diy-goods-contain1 .diy-sale {
            margin-top: 16px;
        }

        /* 样式4 */

        .diy-goods-contain2 {
            width: 50%;
        }

        .diy-goods-contain2 .diy-goods-image {
            float: left;
            width: 80px;
            height: 80px;
        }

        .diy-goods-contain2 .detail {
            margin-left: 80px;
            padding: 4px;
            height: 80px;
        }

        .diy-goods-contain2 .detail .goods-buy {
            display: none;
        }

        .diy-goods-contain2 .detail .subtitle {
            display: none;
        }

        .diy-goods-contain2 .detail .diy-sold {
            display: none;
        }

        .diy-goods-contain2 .detail .diy-original-price {
            display: none;
        }

        /* 样式5 */
        .diy-goods-contain3 {
            width: 33.33%;
        }

        .diy-goods-contain3 .el-image__error {
            min-height: 100px;
        }

        .diy-goods-contain3 .detail .subtitle {
            display: none;
        }

        .diy-goods-contain3 .detail .goods-buy {
            display: none;
        }

        .diy-goods-contain3 .detail .diy-sold {
            display: none;
        }

        .diy-goods-contain3 .detail .diy-original-price {
            display: none;
        }

        /* 样式6 */
        .diy-goods-contain4 {
            width: 33.33%;
            flex: 0 0 33.33%;
        }

        /* 样式7 */
        .diy-goods-contain5 {
            width: 30%;
            flex: 0 0 30%;
        }


        .diy-goods-contain5 .name {
            height: 36px;
        }

        .diy-goods-contain5 .el-image__error {
            min-height: 100px;
        }

        .diy-goods-contain5 .detail .subtitle {
            display: none;
        }

        .diy-goods-contain5 .detail .diy-sold {
            display: none;
        }

        .diy-goods-contain5 .detail .diy-original-price {
            display: none;
        }

        .diy-goods-contain5 .detail .goods-buy {
            display: none;
        }

        /* 基础样式 */
        .diy-goods-basic {
            margin: 0 4px 4px 0;
            overflow: hidden;
        }

        .diy-goods-contain-full .diy-goods-basic,
        .diy-goods-contain .diy-goods-basic {
            margin: 0 0 6px 0;
        }

        /* 图片自适应 */
        .img-contain {
            padding-top: 100%;
            position: relative
        }

        .img-contain .test-img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .zoom {
            transform: scale(1, 0.9);
        }


        .filter-box {
                display: flex;
                font-size: 12px;
                margin: 12px;
                .filter-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 82px;
                    height: 25px;
                    color: #999;
                }

                .filter-item+.filter-item {
                    margin-left: 16px;
                }
                .filter-arrow {
                    margin-left: 4px;
                    position: relative;
                    height: 14px;
                    width: 8px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    .el-icon-arrow-up,.el-icon-arrow-down{
                        font-size: 8px;
                        position: absolute;
                        opacity: 0.4;
                        font-weight: bold;
                    }
                    .icon {
                        &.active {
                            .el-icon-arrow-up,.el-icon-arrow-down{
                            opacity: 1;
                            }
                        }
                        .el-icon-arrow-up {
                            top:1px;
                        }

                        .el-icon-arrow-down {
                            bottom: -2px;
                        }
                    }
                }
            }
    }

  
</style>