jufubao-mall 2.0.21 → 2.0.23-beta1

package/src/components/JfbMallBrandWall/JfbMallBrandWall.vue

@@ -16,103 +16,133 @@
     </view>
     <!-- #endif -->
     <view class="jfb-mall-brand-wall__body" >
-      <view
-        class="brand_wall_wrap"
-        :style="{
-          minHeight: layoutInfo.bodyMinHeightRpx + 'rpx',
-          backgroundImage:background?`url(${background})`: 'none',
-          backgroundSize: '100% auto',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition:'top left',
-          backgroundColor:contentBoxBgc
-        }
-      ">
-      <scroll-view scroll-x="true">
-        <view
-          class="tab_list"
-          v-if="loaded"
-          :style="{
-            background: titleBgc,
-            boxShadow: titleBoxShadow,
-            borderBottom:  titleBoxBorder,
-            marginBottom: titleBoxPadding + 'rpx',
-            justifyContent: showTabs.length>2?'space-between':'flex-start',
-            padding: tabPadding + 'rpx'
-          }"
-        >
-          <view
-            class="tab_item"
-            v-for="(tab, i) in showTabs"
-            :key="tab.value"
-            :style="{
-              background: i === tabIndex? titleBgcActColor: titleBgcColor,
-              color: i === tabIndex? titleActColor : titleColor,
-            }"
-            @click="switchTab(i)"
-          >{{tab.label}}</view>
-        </view>
-        <view v-else class="tab_list skeleton-wrap" :style="{
-            background: titleBgc,
-            boxShadow: titleBoxShadow,
-            borderBottom:  titleBoxBorder,
-            marginBottom: titleBoxPadding + 'rpx'
-          }"
-        >
-          <view class="tab_item" v-for="i in 4" :key="i"></view>
-        </view>
-      </scroll-view>
-
-        <view v-if="loaded" class="brand_list-box">
-          <view class="brand_list" :class="{isPreview: isPreview}">
+      <view class="x-line"></view>
+      <view class="brand_wall_wrap" :style="[boxStyleComp]">
+        <view id="elx-tab" class="brand-wall-tab" :style="[tabStyleComp]">
+          <scroll-view
+            :scroll-x="layout==='v1'"
+            :scroll-y="layout==='v2'"
+            :style="{height:layout==='v2'? tabStyleComp.height:'auto'}"
+            :class="{'tab-linex':layout==='v1' && hStyle ==='v3'}"
+          >
             <view
-              class="brand_item"
-              :style="[brandItemStyles]"
-              v-for="brand in brandList" :key="brand.brand_id"
-              @click="toBrand(brand)"
+              class="tab_list"
+              :class="{hStyle: layout === 'v1'}"
+              :style="[tabListComp]"
+              v-if="loaded"
             >
               <view
-                class="brand_icon"
-                :class="{brand_icon3: contentCell === 3,brand_icon4: contentCell === 4,brand_icon5: contentCell === 5}"
-                :style="{
-                  width: getItemWH,
-                  height:getItemWH,
-                  borderRadius: radius + 'rpx',
-                  background: contentBgc,
-                  border: contBoxBorder,
-                  boxShadow: contBoxShadow
-                }">
-                <image :src="brand.brand_icon" mode="aspectFill"></image>
+                class="tab_item"
+                :class="{
+                  'tab_item-lineY':layout === 'v2' && ['v1','v3','v4'].includes(vStyle),
+                  'tab_item-lineX':layout === 'v1'&&  ['v2','v3'].includes(hStyle),
+                }"
+                v-for="(tab, i) in showTabs"
+                :key="tab.value"
+                :style="[i === tabIndex?tabActItemStyleComp:tabItemStyleComp]"
+                @click="switchTab(i)"
+              >
+                <view
+                  v-if="(layout === 'v2' && ['v1','v3','v4'].includes(vStyle))
+                  || (layout === 'v1' && ['v2','v3'].includes(hStyle))"
+                  class="lineCom"
+                  :class="{lineSmall: ['v3'].includes(hStyle)}"
+                  :style="{backgroundColor: i === tabIndex?tabActItemNameStyle.color:'rgba(0,0,0,0)'}"
+                ></view>
+                <view :style="[i === tabIndex?tabActItemNameStyle:tabItemNameStyle]">{{tab.input}}</view>
               </view>
+            </view>
+            <view
+              v-else
+              class="tab_list skeleton-wrap"
+              :class="{hStyle: layout === 'v1'}"
+              :style="{
+                background: titleBgc,
+                boxShadow: titleShadow,
+               }"
+            >
               <view
-                class="brand_name"
-                :style="{color:brandNameColor}"
-                :class="{brand_name3: contentCell === 3,brand_name4: contentCell === 4,brand_name5: contentCell === 5}"
-              >{{brand.brand_name}}</view>
+                class="tab_item"
+                v-for="i in 4" :key="i"
+                :class="{
+                  'tab_item-lineY':layout === 'v2' && ['v1','v3','v4'].includes(vStyle),
+                  'tab_item-lineX':layout === 'v1'&&  ['v2','v3'].includes(hStyle),
+                }"
+                :style="[skeletonStyle]"
+              ></view>
             </view>
-            <view v-if="isPreview" class="brand_item_preview"></view>
-          </view>
+          </scroll-view>
         </view>
-        <view v-else class="brand_list-box">
-          <view class="brand_list">
-            <view class="brand_item skeleton-wrap"
-              :style="[brandItemStyles]"
-              v-for="i in 16" :key="i"
-            >
+        <view v-if="!isPreview && layout === 'v1'" :style="{height: hMaskHeigh + 'rpx'}"></view>
+        <view class="brand-wall-content" :style="[contStyleComp,minContentHeight]">
+          <view v-if="loaded" class="brand_list-box">
+            <view class="brand_list">
               <view
-                class="brand_icon"
-                :class="{brand_icon3: contentCell === 3,brand_icon4: contentCell === 4,brand_icon5: contentCell === 5}"
-                :style="{
-                  width: getItemWH,
-                  height:getItemWH,
-                  borderRadius: radius + 'rpx',
-                  border: contBoxBorder,
-                  boxShadow: contBoxShadow
-                }">
+                class="brand_item"
+                :style="[brandItemStyles]"
+                :class="{
+                  'n3': contentCell === 3,
+                  'n4': contentCell === 4,
+                  'n5': contentCell === 5,
+                }"
+                v-for="brand in brandList"
+                :key="brand.brand_id"
+                @click="toBrand(brand)"
+              >
+                <template v-if="brand.isEmpty === undefined">
+                  <view
+                    class="brand_icon"
+                    :class="{
+                      'brand_icon3': (layout === 'v1' && contentCell===3) || layout === 'v2',
+                      'brand_icon4': layout === 'v1' && contentCell===4,
+                      'brand_icon5': layout === 'v1' && contentCell===5 ,
+                    }"
+                    :style="[brandItemIconStyle]
+                ">
+                    <image v-if="brand.status===true" @error="brand.status = false" :src="brand.brand_icon" mode="aspectFill"></image>
+                    <image v-if="brand.status===false" :src="errorShopUrl" mode="aspectFill"></image>
+                  </view>
+                  <view
+                    class="brand_name"
+                    :style="[brandStyle]"
+                    :class="{brand_name3: contentCell === 3,brand_name4: contentCell === 4,brand_name5: contentCell === 5}"
+                  >{{brand.brand_name}}</view>
+                </template>
               </view>
+            </view>
+            <xd-no-data
+              :scale-size="2"
+              v-if="brandList && brandList.length === 0"
+              icon-type="empty"
+            >暂无品牌数据</xd-no-data>
+          </view>
+          <view v-else class="brand_list-box">
+            <view class="brand_list">
               <view
-                class="brand_name"
-                :class="{brand_name3: contentCell === 3,brand_name4: contentCell === 4,brand_name5: contentCell === 5}"
-              ></view>
+                class="brand_item skeleton-wrap"
+                :style="[brandItemStyles]"
+                v-for="i in skeletonNum"
+                :key="i"
+                :class="{
+                  'n3': contentCell === 3,
+                  'n4': contentCell === 4,
+                  'n5': contentCell === 5,
+                }"
+              >
+                <view
+                  class="brand_icon"
+                  :class="{brand_icon3: contentCell === 3,brand_icon4: contentCell === 4,brand_icon5: contentCell === 5}"
+                  :style="{
+                    width: getItemWH,
+                    height:getItemWH,
+                    borderRadius: radius + 'rpx',
+                  }"
+                ><view></view></view>
+                <view
+                  class="brand_name"
+                  :class="{brand_name3: contentCell === 3,brand_name4: contentCell === 4,brand_name5: contentCell === 5}"
+                ><view></view></view>
+              </view>
             </view>
           </view>
         </view>
@@ -125,15 +155,18 @@
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMallBrandWallMixin from "./JfbMallBrandWallMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import { getContainerPropsValue,gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl"
+  import XdNoData from "@/components/XdNoData/XdNoData.vue";
   import { mapState } from "vuex"
+
   export default {
     name: "JfbMallBrandWall",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdNoData
     },
     mixins: [
       componentsMixins, extsMixins, JfbMallBrandWallMixin
@@ -142,59 +175,62 @@
       return {
         isPreview: false,
         loaded: false,
-        tabs: [
-          {label: "全部", value: "all",sort:1,isShow: true},
-          {label: "线下", value: "sell",sort:2, isShow: true},
-          {label: "电子码", value: "code",sort:3, isShow: true},
-          {label: '线上-线上', sort:4, value: 'stod',isShow: true},
-          {label: '线上-同城配送', sort:5, value: 'stod-samecity',isShow: false},
-          {label: '线上-快递配送',sort:6, value: 'stod-logistics',isShow: false},
-          {label: '线上-门店自提',sort:7, value: 'stod-takeout',isShow: false},
-        ],
+        closeMask: true,
         has_sell: true,
         tabIndex: 0,
         brandList: [],
         loadIndex: 0,
-        brandNumber: 300,
 
-        //面板
+        //基础
+        skeletonNum: 0,
+        brandNumber: 300,
         xnamespace: "",
-        onlineBrandPath: "",  //线上品牌跳转地址
-        offlineBrandPath: "", //线下品牌跳转地址
-        isCityFilter: "N", //是否开启城市筛选
-        background: '',
-        brandNameColor:'#333',
+        category_ids: [],
+        layout:'v1', //v2=>左右 v1=>上下
+        vStyle:'v2',//左右结构样式变量
+        hStyle:'v1', //上下结构样式变量
+        hMaskHeigh: 110,
 
-        //内容
-        contentBgc: '',
+        //常规
+        bodyPadding:{},
+
+        //内容区域
         contentBoxBgc: '',
-        contentCell: '',
-        contentPadding: '',
-        isContShadow: '',
-        isContShadowBgc: '',
-        isContShadowBgcW: '',
-        isContBorder: '',
-        isContBorderW: '',
-        isContBorderColor: '',
-        radius: 0,
+        background: '',
+        contentBgc: '',
+        listMargin:{},
+        listPadding:{},
+        contRadius:0,
 
-        //标题
+        //选项卡信息
         titleBgc: '',
-        titleColor:'',
-        titleActColor:'',
-        isTitleShadow: '',
-        isTitleShadowBgc: '',
-        isTitleShadowBgcW: '',
-        isTitleBorder: '',
-        isTitleBorderW: '',
-        isTitleBorderColor:'',
-        titlePadding: '',
-        newLabel: [],
-        titleBgcColor:'',
+        tabPadding:{},//选项卡填充
+        titleStyle:{},
+        titleRadius:0,
+        titleShadow:'',
+        titleBorder:0,
+        titleBorderWidth:0,
         titleBgcActColor:'',
-        tabPadding: '',
-        category_ids: []
+        titlePadding: 0, //内容与选项卡填充
+        titleSp: 0, //选项卡间距
+
 
+        //内容
+        bindSize:32,
+        contentCell: 4,
+        brandShadow: 'none',
+        brandBorder:0,
+        radius: 0,
+        brandStyle:{},
+        newLabel: [],
+
+        errorShopUrl: getServiceUrl('/common/empty/shop.png','size2'),
+
+
+        //高级
+        onlineBrandPath: "",  //线上品牌跳转地址
+        offlineBrandPath: "", //线下品牌跳转地址
+        isCityFilter: "N", //是否开启城市筛选
 
       }
     },
@@ -202,75 +238,307 @@
       ...mapState({
         stateCity: state => state.cityLocation.city
       }),
-      showTabs(){
-        console.log(this.tabs,'showTabs');
 
-        this.tabs.forEach((item1, index) => {
-        const item2 = this.newLabel.find((item) => item.value === item1.value);
+      minContentHeight(){
+        if(this.layout === 'v1'){
+          return {
+            minHeight: (this.layoutInfo.bodyMinHeightRpx - this.hMaskHeigh - this.getPMValue(this.listPadding, 'TB',0)) + 'rpx'
+          }
+        }
+        return {}
+      },
 
-        if (item2) {
-          item1.label = item2.newLabel||item1.label;
-          item1.sort = item2.sort
-          item1.isShow = item2.isShow
+      skeletonStyle(){
+        let margin = 0;
+        if(this.layout === 'v1') {
+           margin = '0rpx 24rpx 0rpx 0';
+        }
+        if(this.layout === 'v2') {
+          margin = '12rpx'
+        }
+        return {
+          "color": "#999",
+          "fontSize": "32rpx",
+          "fontWeight": "400",
+          "height": this.layout === 'v1' ?"60rpx":'90rpx',
+          "minWidth": this.layout === 'v1'?'132rpx':'10rpx',
+          "padding":  this.layout === 'v1'?"0 16rpx":0,
+          "marginRight": this.layout === 'v1'?"20rpx":0,
+          "margin": margin,
+          "borderRadius": this.layout === 'v1'?"30rpx": this.radius + 'rpx'
         }
+      },
+      showTabs(){
+        let tabs = this.$xdUniHelper.cloneDeep(this.newLabel).filter(item=>{
+          return item.check === true
         });
-        this.tabs = this.tabs.filter(item =>{
-          if(item.label.includes('线上')){
-            item.label = item.label.replace('线上-','')
-          }
-          if(typeof item.isShow!=='boolean') {
-            return true
-          }
-          return item.isShow
-        })
 
-        this.tabs.sort((a,b)=>a.sort - b.sort)
-        console.log(this.tabs,this.has_sell,'pappapp');
         //线下签是否展示通过后台控制
-        if(this.has_sell) return this.tabs;
-        else return this.tabs.filter(item => item.value !== 'sell');
+        if(this.has_sell) return tabs;
+        else return tabs.filter(item => item.value !== 'sell');
+      },
+
+      //列表
+      getItemWH(){
+        let outWdith = 0;
+        if(this.layout === 'v2') {
+          outWdith += 172;
+          if(this.titleBorderWidth) outWdith += this.titleBorderWidth * 2;
+          if(this.titleBorderWidth === 0 && this.vStyle === 'v1') outWdith +=2
+        }
+        outWdith += this.getPMValue(this.listMargin, 'RL',0);
+        outWdith += this.getPMValue(this.listPadding, 'RL',0);
+        outWdith += this.getPMValue(this.bodyPadding, 'RL',0);
+        outWdith += (this.contentCell -1) * this.bindSize;
+        return (750 - outWdith)/this.contentCell + 'rpx'
       },
-      titleBoxShadow() {
-        if (this.isTitleShadow === 'Y') return `0 0 ${this.isTitleShadowBgcW}rpx ${this.isTitleShadowBgc}`;
-        else return '0 0 0 rgba(0,0,0,0)';
+      brandItemStyles(){
+        return {
+          width: this.getItemWH,
+          marginRight: this.bindSize + 'rpx',
+          marginTop: this.bindSize + 'rpx'
+        }
       },
-      titleBoxBorder() {
-        if (this.isTitleBorder === 'Y') return `${this.isTitleBorderW}rpx solid ${this.isTitleBorderColor}`;
-        else return '0';
+      brandItemIconStyle(){
+        return {
+          width: this.getItemWH,
+          height:this.getItemWH,
+          borderRadius: this.radius + 'rpx',
+          overflow:'hidden',
+          backgroundColor: this.contentBgc,
+          border: this.brandBorder,
+          boxShadow: this.brandShadow
+        }
       },
+      //列表
+
+      boxStyleComp(){
+        let url = 'none';
+        if(this.background) url = getServiceUrl(this.background);
+        let tb = this.getPMValue(this.bodyPadding, 'TB', 0) * this.$rpxNum;
+        let css = {
+          minHeight: `calc(${ this.layoutInfo.bodyMinHeightPx}px - ${tb}px)`,
+          backgroundImage: `url(${url})`,
+          backgroundSize: '100% auto',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition:'top left',
+          backgroundColor:this.contentBoxBgc,
+          padding: this.getMarginAndPadding(this.bodyPadding,0)
+        }
 
-      contBoxShadow() {
-        if (this.isContShadow === 'Y') return `0 0 ${this.isContShadowBgcW}rpx ${this.isContShadowBgc}`;
-        else return '0 0 0 rgba(0,0,0,0)';
+        if(this.layout === 'v2') {
+          css['display'] = 'flex';
+          css['justifyContent'] = 'flex-start';
+          css['alignItems'] = 'flex-start';
+        }
+
+        return css
       },
-      contBoxBorder() {
-        if (this.isContBorder === 'Y') return `${this.isContBorderW}rpx solid ${this.isContBorderColor}`;
-        else return '0';
+
+      //content
+      contStyleComp(){
+        let style = {
+          backgroundColor: this.contBgColor,
+          padding: this.getMarginAndPadding(this.listPadding, 0),
+          margin: this.getMarginAndPadding(this.listMargin, 0),
+          borderRadius: this.contRadius + 'rpx'
+        }
+
+        if(this.layout === 'v2'){
+          let outHeight = 0;
+          outHeight += this.getPMValue(this.listMargin, 'TB',0);
+          outHeight += this.getPMValue(this.listPadding, 'TB',0);
+          outHeight += this.getPMValue(this.bodyPadding, 'TB',0);
+          outHeight = outHeight * this.$rpxNum
+          if(['v1', 'v2'].includes(this.vStyle)) {
+            style['height'] = `${this.layoutInfo.bodyMinHeightPx - outHeight}px`;
+          }
+          style['overflowY'] = 'auto';
+          style['overflowX'] = 'hidden';
+        }
+        return style
       },
+      //content
+
+      //tab
+      getTabHeight(){
+        let style = {}
+        //上下结构
+        if(this.layout === 'v1') {
+
+          if(!this.isPreview) {
+            style['position'] = 'fixed';
+            style['zIndex'] = '10';
+            style['top'] = this.layoutInfo.top + 'rpx';
+            style['width'] = '100%';
+          }
+        }
 
-      titleBoxPadding(){
-        let padding = Number(this.titlePadding);
-        if(this.isTitleShadow === 'Y' && padding === 0) {
-          padding = this.isTitleShadowBgcW;
+        //左右结构
+        if(this.layout === 'v2') {
+          style['width'] = '172rpx';
+          style['flexShrink'] = 0;
+          style['overflow'] = 'hidden';
+          style['padding'] = 0;
+
+          if(['v1', 'v2'].includes(this.vStyle)) {
+            let tb = this.getPMValue(this.bodyPadding, 'TB', 0) * this.$rpxNum +  this.titleBorderWidth * 2 *this.$rpxNum;
+            style['height'] = `calc(${ this.layoutInfo.bodyMinHeightPx}px - ${tb}px)`;
+            style['borderRadius'] = `0 ${this.titleRadius}rpx  ${this.titleRadius}rpx  0`;
+          }
         }
-        return padding;
+        return style;
       },
+      tabListComp(){
+        let temp = {};
+        if(['v1','v2'].includes(this.layout)) {
+          temp['paddingLeft'] =  (this.tabPadding.left || 0) + 'rpx';
+          temp['paddingRight'] =  (this.tabPadding.right || 0) + 'rpx';
+          temp['paddingBottom'] =  (this.tabPadding.bottom || 0) + 'rpx';
+          temp['paddingTop'] =  (this.tabPadding.top || 0) + 'rpx';
+        }
+        return temp
+      },
+      tabStyleComp(){
+        let border = {};
+        if(this.layout === 'v2') border = {border: this.titleBorder}
+        else border = {borderBottom: this.titleBorder}
+        return {
+          boxShadow: this.titleShadow,
+          ...border,
+          backgroundColor: this.titleBgc,
+          //在模版二不使用内容与选项卡直接间距
+          marginBottom: this.layout === 'v2'?0:this.titlePadding + 'rpx',
+          ...this.getTabHeight,
+        };
+      },
+      getTabItemHeight(){
+        if(this.layout === 'v1'){
+          return  {
+            height: '60rpx',
+            lineHeight:'60rpx',
+            marginRight: this.titleSp + 'rpx',
+            minWidth: '80rpx'
+          }
+        }
 
+        if(this.layout === 'v2'){
+          return {
+            height: '100rpx',
+            lineHeight: '100rpx',
+            borderRadius:'0',
+            fontSize:'24rpx',
+            marginBottom: this.titleSp + 'rpx'
+          }
+        }
 
-      getItemWH(){
-        let maxW = 100 / this.contentCell;
-        let padding = this.$rpxNum * this.contentPadding + Math.ceil(this.$rpxNum * (this.contentPadding / this.contentCell));
-        return `calc(${maxW}vw - ${padding}px)`
+      },
+      tabItemStyleComp(){
+        let style = {
+          color: this.titleStyle.color,
+          fontWeight: this.titleStyle.fontWeight,
+        };
+        if(this.layout === 'v2') {
+          style['fontSize'] = '24rpx';
+          style = {...style,...this.getTabItemHeight}
+          if(['v2'].includes(this.vStyle)) {
+            style['backgroundColor'] = this.titleStyle.bgColor;
+          }
+        }
+        if(this.layout === 'v1') {
+          style['fontSize'] = parseInt(this.titleStyle.actFontSize)  + 'rpx';
+          style = {...style,...this.getTabItemHeight}
+        }
+        return style
+      },
+      tabActItemStyleComp(){
+        let style = {
+          color: this.titleStyle.actColor,
+          fontWeight: this.titleStyle.actFontWeight,
+        };
+        if(this.layout === 'v2') {
+          style = {...style,...this.getTabItemHeight}
+          if(['v2'].includes(this.vStyle)) {
+            if(this.titleStyle.actBgColor) style['backgroundColor'] = this.titleStyle.actBgColor;
+            else {
+              if(this.mainGradient && this.mainGradient.indexOf('gradient') !== -1){
+                style['backgroundImage'] = this.mainGradient;
+              }
+              else style['backgroundColor'] = this.mainColor;
+            }
+          }
+        }
+        if(this.layout === 'v1') {
+          style['fontSize'] = parseInt(this.titleStyle.actFontSize) + 'rpx';
+          style = {...style,...this.getTabItemHeight}
+        }
+        return style
       },
 
-      brandItemStyles(){
-        let padding = this.$rpxNum * this.contentPadding;
+      tabItemNameStyle(){
+        if(this.layout === 'v2') return {
+          fontSize: parseInt(this.titleStyle.fontSize) + 'rpx',
+          fontWeight: this.titleStyle.fontWeight,
+          color: this.titleStyle.color,
+        }
         return {
-          width: this.getItemWH,
-          marginLeft: `${padding}px`,
-          marginTop: `${padding}px`
+          borderRadius:['v1'].includes(this.hStyle)?'60rpx': 0,
+          backgroundColor: ['v1'].includes(this.hStyle) ? this.titleStyle.bgColor:'',
+          color: this.titleStyle.color,
+          padding:'0 32rpx',
+          fontSize: parseInt(this.titleStyle.fontSize) + 'rpx',
+          fontWeight: this.titleStyle.fontWeight,
+        }
+      },
+      tabActItemNameStyle(){
+        let bgColor = '';
+        let bgImage = 'none';
+        let color = this.mainColor;
+        if(this.layout === 'v2') {
+          if(['v2'].includes(this.vStyle)) {
+            //选项卡标签文字颜色
+            if(this.titleStyle.actColor) color = this.titleStyle.actColor;
+            else color = '#fff';
+
+            //选项卡标签背景颜色
+            if(this.titleStyle.actBgColor) bgColor = this.titleStyle.actBgColor;
+            else {
+              if(this.mainGradient && this.mainGradient.indexOf('gradient') !== -1)  bgImage = this.mainGradient;
+              else bgColor = this.mainColor;
+            }
+          }
+
+          return {
+            backgroundColor: bgColor,
+            color: color,
+            fontSize: parseInt(this.titleStyle.actFontSize) + 'rpx',
+            fontWeight: this.titleStyle.actFontWeight,
+          }
         }
-      }
+
+        if(['v1'].includes(this.hStyle)) {
+          //选项卡标签文字颜色
+          if(this.titleStyle.actColor) color = this.titleStyle.actColor;
+          else color = '#fff';
+
+          //选项卡标签背景颜色
+          if(this.titleStyle.actBgColor) bgColor = this.titleStyle.actBgColor;
+          else {
+            if(this.mainGradient && this.mainGradient.indexOf('gradient') !== -1)  bgImage = this.mainGradient;
+            else bgColor = this.mainColor;
+          }
+        }
+        return {
+          borderRadius:['v1'].includes(this.hStyle)?'60rpx': 0,
+          backgroundColor: bgColor,
+          backgroundImage: bgImage,
+          padding: '0 32rpx',
+          color: color,
+          fontSize:  parseInt(this.titleStyle.actFontSize) + 'rpx',
+          fontWeight: this.titleStyle.actFontWeight,
+        }
+      },
+      //tab
 
 
     },
@@ -278,33 +546,20 @@
       container(value,oldValue) {
         if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
-      },
-      newLabel: {
-        deep:true,
-        handler(n,o) {
-          if(this.isPreview) {
-            n = n.map(item=>{
-              if(!('isShow' in item)) {
-                item.isShow = true
-              }
-              return item;
-            })
-            n = n.filter(item => item.isShow)
-            this.tabs = n
-            this.tabs.sort((a,b)=>a.sort - b.sort)
-          }
-        }
       }
     },
+
     created() {
-      this.init(this.container);
       this.isPreview = this.$configProject.isPreview;
+      this.init(this.container);
+    },
+    mounted() {
+      this.$nextTick()
     },
     methods: {
       onJfbLoad(options) {
         //设置业务请求代码
         this.setNameSpace(options);
-
         this.getList();
       },
       /**
@@ -312,87 +567,264 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.onlineBrandPath = getContainerPropsValue(container, "content.onlineBrandPath", {value: ""}).value;
-        this.offlineBrandPath = getContainerPropsValue(container, "content.offlineBrandPath", {value: ""}).value;
-        this.xnamespace = getContainerPropsValue(container, 'content.xnamespace', this.projectAttr.business_code);
-        this.isCityFilter = getContainerPropsValue(container, 'content.isCityFilter', 'N');
-        this.background = getContainerPropsValue(container, "content.background", {path: "",}).path;
-        this.brandNameColor =  getContainerPropsValue(container, 'content.brandNameColor', '#333');
-        this.brandNumber = getContainerPropsValue(container, 'content.brandNumber', 300);
-
-        //标题
-        this.titleBgc = getContainerPropsValue(container, 'content.titleBgc', '#ffff');
-        this.isTitleShadow = getContainerPropsValue(container, 'content.isTitleShadow', 'N');
-        this.isTitleShadowBgc = getContainerPropsValue(container, 'content.isTitleShadowBgc', '#333');
-        this.isTitleShadowBgcW = getContainerPropsValue(container, 'content.isTitleShadowBgcW', 0);
-        this.isTitleBorder = getContainerPropsValue(container, 'content.isTitleBorder', 'N');
-        this.isTitleBorderColor = getContainerPropsValue(container, 'content.isTitleBorderColor', '#fff');
-        this.isTitleBorderW = getContainerPropsValue(container, 'content.isTitleBorderW', 0);
-        this.titlePadding = getContainerPropsValue(container, 'content.titlePadding', 0);
-        this.titleBgcColor = getContainerPropsValue(container, 'content.titleBgcColor', '#fff');
-        this.titleBgcActColor = getContainerPropsValue(container, 'content.titleBgcActColor', this.mainGradient);
-        this.tabPadding = getContainerPropsValue(container, 'content.tabPadding', 40);
-
-        this.titleColor = getContainerPropsValue(container, 'content.titleColor', '#333');
-        this.titleActColor = getContainerPropsValue(container, 'content.titleActColor', '#fff');
+        //基础
+        this.xnamespace = gCPVal(container, 'xnamespace', this.projectAttr.business_code||this.xnamespace);
+        this.category_ids = gCPVal(container, 'category_ids', []);
+        this.brandNumber = gCPVal(container, 'brandNumber', 300);
+        this.layout = gCPVal(container, 'layout', 'v1');
+        let vStyle = gCPVal(container, 'vStyle', 'v1'); //左右接口布局
+        if(['v3', 'v4'].includes(vStyle)) vStyle = 'v1';
+        this.vStyle = vStyle;
+
+        let hStyle = gCPVal(container, 'hStyle', 'v1'); //上下接口布局
+        if(['v2'].includes(hStyle)) hStyle = 'v1';
+        this.hStyle = hStyle;
+
+
+        if( this.layout === 'v1') {
+          this.contentCell = gCPVal(container, 'contentCell', 4);
+          this.skeletonNum = this.contentCell * 6;
+        }
+        if( this.layout === 'v2') {
+          this.contentCell = 3;
+          this.skeletonNum = 18;
+        }
+
+        //数据内容
+        let defNewLabel = [
+          {value:'all', label: '全部',input:'全部',check: true,},
+          {value:'sell', label: '线下',input:'线下',check: true},
+          {value:'code', label: '电子码',input:'电子码',check: true},
+          {value:'stod', label: '线上',input:'线上',check: true},
+          {value:'stod-samecity', label: '同城配送',input:'',check: false},
+          {value:'stod-logistics', label: '快递配送',input:'',check: false},
+          {value:'stod-takeout', label: '门店自提',input:'',check: false},
+        ]
+        let newLabel = this.$xdUniHelper.cloneDeep(gCPVal(container, 'newLabel', []))
+          .filter(item=>{
+            //更古老数据，相对新数据
+            return item['isShow'] === undefined || item['isShow'] === true
+          })
+          .sort((a,b)=>Number(a.sort)-Number(b.sort))
+          .map(item=>{
+            item['placeholder'] = '自定义名称';
+            delete item['sort'];
+            if(item['isShow'] !== undefined) {
+              item['check'] = item['isShow'];
+              delete item['isShow'];
+            }
+            else item['check'] = true;
+            if(item['newLabel'] !== undefined || item['label'] !== undefined) {
+              item['input'] = item['newLabel'] || item['label'];
+              delete item['newLabel'];
+              delete item['label'];
+            }
+            return item
+          });
+        let defValues = {
+          all: '全部',
+          sell:'线下',
+          code:'电子码',
+          stod:'线上',
+          'stod-samecity':'同城配送',
+          "stod-logistics":'快递配送',
+          'stod-takeout':'门店自提'
+        }
+
+        this.newLabel = gCPVal(container, 'tabContent', newLabel.length > 0 ? newLabel: defNewLabel).map(item=>{
+          if(item.input === '') item.input = defValues[item.value];
+          return item
+        });
+
+        //常规
+        let defBodyPadding= 0;
+        if(this.layout === 'v2') {
+          if(['v1','v2'].includes(this.vStyle)) defBodyPadding = 0;
+          if(['v3'].includes(this.vStyle)) defBodyPadding = {top:24,left:0, right:24, bottom:0};
+          if(['v4'].includes(this.vStyle)) defBodyPadding = {top:24,left:24, right:24, bottom:0};
+        }
+        this.bodyPadding = gCPVal(container, 'bodyPadding', [defBodyPadding,0], {sKey: 'bodyPaddingStatus', fields: ['bodyPadding'], isPMR: true});
+        let defContentBoxBgc = '#fff';
+        if(this.layout === 'v2'){
+          if(['v2','v3', 'v4'].includes(this.vStyle))defContentBoxBgc = '#f8f8f8'
+        }
+        if(this.layout === 'v1') defContentBoxBgc = '#f8f8f8'
+        this.contentBoxBgc = gCPVal(container, 'contentBoxBgc', [defContentBoxBgc,'rgba(0,0,0,0)'], {sKey: 'contentStyleStatus', fields: ['contentBoxBgc','background']});
+        this.background = gCPVal(container, 'background', [{url:''}], {sKey: 'contentStyleStatus', fields: ['contentBoxBgc','background']}).url;
+
+
+        //内容区域
+        let defContBgColor = '';
+        if(this.layout === 'v2'){
+          if(['v2','v3', 'v4'].includes(this.vStyle)) defContBgColor = '#fff'
+        }
+        if(this.layout === 'v1') defContBgColor = '#f8f8f8';
+        this.contBgColor = gCPVal(container, 'contBgColor', [defContBgColor,'rgba(0,0,0,0)'], {sKey: 'contBgColorStatus', fields: ['contBgColor']});
+        let defListPadding = {top:48,left:48, right:48, bottom:48};
+
+        if(this.layout === 'v2'){
+          if(['v2'].includes(this.vStyle)) defListPadding = {top:40,left:40, right:40, bottom:40};
+        }
+        if(this.layout === 'v1'){
+          if(this.contentCell === 3) defListPadding = {top:48,left:48, right:48, bottom:48};
+          else defListPadding = {top:40,left:40, right:40, bottom:40};
+        }
+
+        let defListMargin = 0;
+        if(this.layout === 'v2' && this.vStyle === 'v2') defListMargin = 24;
+
+        this.listPadding = gCPVal(container, 'listPadding', [defListPadding,24], {sKey: 'listPaddingStatus', fields: ['listPadding'], isPMR: true});
+        this.listMargin = gCPVal(container, 'listMargin', [defListMargin,0], {sKey: 'listMarginStatus', fields: ['listMargin'], isPMR: true});
+        this.contRadius = gCPVal(container, 'contRadius', [this.gStyleValue.radius,0],{sKey: 'contRadiusStatus', fields: ['contRadius']})||0;
+
+
+        //选项卡
+        let defTitleBgc = '#fff';
+        let defTabPadding = 0;
+        let oldTabPadding = 0;
+        if(this.layout === 'v2') {
+          if(['v1'].includes(this.vStyle)) defTitleBgc = '#f8f8f8';
+        }
+        if(this.layout === 'v1') {
+          defTabPadding =  {top:24,left:32, right:32, bottom:24};
+          oldTabPadding = {top:40,left:40, right:40, bottom:40};
+        }
+        this.tabPadding = gCPVal(container, 'tabPadding', [defTabPadding,oldTabPadding], {sKey: 'tabPaddingStatus', fields: ['tabPadding'], isPMR: true});
+        this.titleBgc = gCPVal(container, 'titleBgc', [defTitleBgc,'#fff'],{sKey: 'titleBgcStatus', fields: ['titleBgc']});
+        let titleColor =  gCPVal(container, 'titleColor', '');
+        let titleActColor =  gCPVal(container, 'titleActColor', '');
+        let titleBgcColor =  gCPVal(container, 'titleBgcColor', '');
+        this.titleBgcActColor  =  gCPVal(container, 'titleBgcActColor', '');
+        let titleStyleStatus =  gCPVal(container, 'titleStyleStatus', '');
+        if(titleStyleStatus === 'D') titleActColor = '';
+        let mainColor = titleActColor || this.mainColor;
+        //if(this.layout === 'v1' && this.hStyle === 'v1')  mainColor = '#fff';
+        if(this.layout === 'v2' && this.vStyle === 'v2')  mainColor = '#fff';
+        this.titleStyle = gCPVal(
+          container,
+          "titleStyle",
+          [{
+            color: titleColor || '#333',
+            bgColor: titleBgcColor || '#fff' ,
+            fontSize: this.layout === 'v2' ?'24':'32',
+            fontWeight: '400',
+            actColor: titleActColor || '',
+            actFontWeight: '500',
+            actFontSize: this.layout === 'v2' ?'24':'32',
+            actBgColor:this.titleBgcActColor || '',
+          }],
+          {sKey:'titleStyleStatus',fields:['titleStyle'],isMerge: true},
+        );
+        this.titleShadow = gCPVal(container, 'titleShadow', [this.gStyleValue.shadow , 'none'], {isShadow:true, bsOld:['isTitleShadow','isTitleShadowBgcW','isTitleShadowBgc']});
+        this.titleBorder = gCPVal(container, 'titleBorder', [{color: '#eee', width: '0', style: 'solid'},{color: '#eee', width: '0', style: 'solid'}], {isBorder:true, bsOld:['isTitleBorder','isTitleBorderW','isTitleBorderColor']});
+        this.titleBorderWidth = gCPVal(container, 'titleBorder', [{color: '#eee', width: '0', style: 'solid'},{color: '#eee', width: '0', style: 'solid'}], {isBorder:true,isBsWidth: true, bsOld:['isTitleBorder','isTitleBorderW','isTitleBorderColor']});
+
+        let defTitleRadius = null;
+        if(this.layout === 'v2'){
+          if(['v1','v2'].includes(this.vStyle)) defTitleRadius = '0';
+        }
+        this.titleRadius = gCPVal(container, 'titleRadius', [defTitleRadius,this.gStyleValue.radius,'0'],{sKey: 'titleRadiusStatus', fields: ['titleRadius']})||0;
+        this.titlePadding = gCPVal(container, 'titlePadding', 0,{sKey: 'titlePaddingStatus', fields: ['titlePadding']});
+        this.titleSp = gCPVal(container, 'titleSp', [(this.layout === 'v2'?0:48), 20],{sKey: 'titleSpStatus', fields: ['titleSp']});
 
         //内容
-        this.contentCell = getContainerPropsValue(container, 'content.contentCell', 4);
-        this.contentBgc = getContainerPropsValue(container, 'content.contentBgc', '#fff');
-        let contentPadding = 20;
-        if(this.contentCell === 4) contentPadding = 25;
-        if (this.contentCell === 3) contentPadding = 30;
-        this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', contentPadding);
-        this.isContShadow = getContainerPropsValue(container, 'content.isContShadow', 'N');
-        this.isContShadowBgc = getContainerPropsValue(container, 'content.isContShadowBgc', '#333');
-        this.isContShadowBgcW = getContainerPropsValue(container, 'content.isContShadowBgcW', 0);
-        this.isContBorder = getContainerPropsValue(container, 'content.isContBorder', 'N');
-        this.isContBorderColor = getContainerPropsValue(container, 'content.isContBorderColor', '#fff');
-        this.isContBorderW = getContainerPropsValue(container, 'content.isContBorderW', 0);
-        this.radius = getContainerPropsValue(container, 'content.radius', 0);
-        this.contentBoxBgc = getContainerPropsValue(container, 'content.contentBoxBgc', 'rgba(0,0,0,0)');
-        this.newLabel = getContainerPropsValue(container, 'content.newLabel', [
-          {label: "全部", value: "all",sort:1,isShow: true},
-          {label: "线下", value: "sell",sort:2, isShow: true},
-          {label: "电子码", value: "code",sort:3, isShow: true},
-          {label: '线上-线上', sort:4, value: 'stod',isShow: true},
-          {label: '线上-同城配送', sort:5, value: 'stod-samecity',isShow: false},
-          {label: '线上-快递配送',sort:6, value: 'stod-logistics',isShow: false},
-          {label: '线上-门店自提',sort:7, value: 'stod-takeout',isShow: false},
-        ]);
-        this.category_ids = getContainerPropsValue(container, 'content.category_ids', []);
-        console.log(this.newLabel,'newLabel');
+        this.contentBgc = gCPVal(container, 'contentBgc', '#fff',{sKey: 'contentBgcStatus', fields: ['contentBgc']} );
+        let contentPadding = gCPVal(container, 'contentPadding',''), bindSize = 68;
+        if(this.layout === 'v1' && this.contentCell === 3) bindSize = 28;
+        if(this.layout === 'v1' && this.contentCell === 5) bindSize = 60;
+        if(contentPadding) bindSize = 112 - Number(contentPadding);
+        this.bindSize = 112 - Number(gCPVal(container, 'bindSize', [bindSize,68],{sKey: 'bindSizeStatus', fields: ['bindSize']}));
+        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
+        this.brandShadow = gCPVal(container, 'brandShadow', [this.gStyleValue.shadow,'none'], {isShadow:true, bsOld:['isContShadow','isContShadowBgcW','isContShadowBgc']});
+        this.brandBorder = gCPVal(container, 'brandBorder', [{color: '#f8f8f8', width: '2', style: 'solid'},{color: '#eee', width: '0', style: 'solid'}], {isBorder:true, bsOld:['isContBorder','isContBorderW','isContBorderColor']});
+        this.brandStyle = gCPVal(
+          container,
+          "brandStyle",
+          [{
+            color: gCPVal(container, 'brandNameColor', '') || '#666',
+            fontSize: '28rpx',
+            fontWeight: '400',
+          }],
+          {sKey:'brandStyleStatus',fields:['brandStyle'],isMerge: true},
+        );
+
+
+        //高级
+        this.onlineBrandPath = gCPVal(container, "onlineBrandPath", {value: ""}).value;
+        this.offlineBrandPath = gCPVal(container, "offlineBrandPath", {value: ""}).value;
+        this.isCityFilter = gCPVal(container, 'isCityFilter', 'N');
+
+        if(this.isPreview) {
+          this.compTabHeight();
+        }
       },
+
+      /**
+       * @description 计算tab高度
+       */
+      compTabHeight(){
+        this.$xdUniHelper.getWindowHeight(['#elx-tab'], this)
+          .then(res => {
+            let tab = res['#elx-tab'];
+            if(tab && tab.height) {
+              this.hMaskHeigh = tab.height * this.$pxNum
+            }
+          })
+          .catch()
+      },
+
       switchTab(i){
         this.tabIndex = i;
+        this.brandList = null
         this.getList();
       },
+
       getList(){
         this.$xdShowLoading({});
-        console.log(this.showTabs,this.tabIndex,'this.tabIndex');
-        jfbRootExec("getNewBrandWallList", {
-          vm: this,
-          data: {
-            znamespace: this.xnamespace,
-            city_code: this.isCityFilter === "Y" ? this.stateCity.city_code : "",
-            page_size: this.brandNumber,
-            tab: this.showTabs[this.tabIndex].value,
-            category_ids: this.category_ids.join(","),
-          }
-        }).then(res => {
-          this.brandList = res.items.map(item => {
+        let params = {
+          page_size: this.brandNumber,
+          tab: this.showTabs[this.tabIndex].value,
+        }
+        if(this.xnamespace) params['znamespace'] = this.xnamespace;
+        if(this.isCityFilter === "Y") params['city_code'] = this.stateCity.city_code;
+        else params['city_code'] = '';
+        if(this.category_ids && this.category_ids.length > 0) params['category_ids'] = this.category_ids.join(",");
+
+        jfbRootExec("getNewBrandWallList", {vm: this,data: params}).then(res => {
+          this.$xdHideLoading();
+          let brandList = res.items.map(item => {
             item['brand_icon'] = item.brand_icon ? getServiceUrl(item.brand_icon, "size2") : "";
+            item['status'] = true;
             return item;
           });
+
+          //补缺
+          if(brandList.length >0) {
+            let differences = 0;
+            if( brandList.length % this.contentCell  > 0) {
+              differences = this.contentCell -  brandList.length % this.contentCell
+            }
+            for(let i =0; i < differences; i++) {
+              brandList.push({isEmpty: true});
+            }
+          }
+
+          this.brandList = brandList;
+
           //只限制第一次加载时设置
           if(this.loadIndex++ == 0){
             this.has_sell = res.has_sell;
           }
           this.loaded = true;
-          this.$xdHideLoading();
+
+          this.$nextTick(()=>{
+            this.compTabHeight()
+          })
         })
       },
+
       toBrand(brand){
+        if(this.isPreview) return;
         let { params , brand_id} = brand;
         let pa = Object.assign({brand_id}, params || {}) , otherP = '';
         if(!this.$xdUniHelper.isEmpty(pa)) otherP = `&${this.$xdUniHelper.jsonToParams(pa)}`
@@ -411,13 +843,11 @@
       },
     }
   }
-
 </script>
 
 <style scoped lang="less">
   @import "./JfbMallBrandWallLess.less";
   .brand_list-box {
-    width: 100vw;
 
     & > .brand_list {
       width: 100%;
@@ -427,39 +857,73 @@
     min-height: 100%;
     &__body{
       .brand_wall_wrap{
-        .tab_list{
-          width: 100%;
-          display: flex;
-          padding: unit(40, rpx);
-          justify-content: space-between;
-          white-space: nowrap;
-          min-width: fit-content;
-          box-sizing: border-box;
+        & .tab_list{
+
+          &.hStyle {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            white-space: nowrap;
+            min-width: fit-content;
+            box-sizing: border-box;
+          }
+
           &.skeleton-wrap{
             .tab_item{
               background: @xd-skeleton-color;
             }
           }
-          .tab_item{
-            padding: 0 unit(20, rpx);
-            height: unit(60, rpx);
-            border-radius: unit(60, rpx);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #333333;
-            font-size: unit(28, rpx);
-            white-space: nowrap;
-            margin-right: 20rpx;
+
+
+          & .tab_item{
+            text-align: center;
+            &-lineY {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              flex-flow: nowrap;
+              position: relative;
+              & > view {
+                text-align: center;
+                &.lineCom {
+                  position: absolute;
+                  left:0;
+                  top:50%;
+                  transform: translateY(-50%);
+                  width: 6rpx;
+                  height: 46rpx;
+                  border-radius: 4rpx;
+                }
+                &:last-child {
+                  flex: 1;
+                }
+              }
+            }
+            &-lineX {
+              position: relative;
+              & > view {
+                &.lineCom {
+                  position: absolute;
+                  left: 50%;
+                  width: 64rpx;
+                  transform: translateX(-50%);
+                  bottom: -16rpx;
+                  height: 6rpx;
+                  border-radius: 4rpx;
+                }
+              }
+
+            }
           }
-          .tab_item:last-child {
+          & .tab_item:last-child {
             margin-right: 0;
+            margin-bottom: 0;
           }
         }
 
         .brand_list{
           display: flex;
-          justify-content: flex-start;
+          justify-content: center;
           align-items: center;
           flex-flow: wrap;
 
@@ -472,14 +936,48 @@
             flex-shrink: 0;
             &.skeleton-wrap{
               .brand_icon{
-                background: @xd-skeleton-color;
+                width: 100%;
+                height: 100%;
+                & > view {
+                  width: 70%;
+                  height: 70%;
+                  background: @xd-skeleton-color;
+                  border-radius: 20rpx;
+                }
               }
               .brand_name{
+
                 .skeleton-item;
+                margin: 0 15%;
+                width: auto;
+              }
+            }
+            &.n3 {
+              &:nth-child(3n) {
+                margin-right: 0!important;
+              }
+              &:nth-child(1),&:nth-child(2),&:nth-child(3) {
+                margin-top: 0!important;
+              }
+            }
+            &.n4 {
+              &:nth-child(4n) {
+                margin-right: 0!important;
+              }
+              &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4) {
+                margin-top: 0!important;
+              }
+            }
+            &.n5 {
+              &:nth-child(5n) {
+                margin-right: 0!important;
+              }
+              &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5) {
+                margin-top: 0!important;
               }
             }
 
-            .brand_icon{
+            & .brand_icon{
               box-sizing: border-box;
               display: flex;
               justify-content: center;
@@ -505,39 +1003,16 @@
                   max-height: 70%;
                 }
               }
-
             }
-            .brand_name{
-              font-size: unit(24, rpx);
-              color: #666666;
+            & .brand_name{
+              font-size: 24rpx;
               text-align: center;
               line-height: unit(40, rpx);
               .uni-max-cut(1, 40);
-              margin: unit(12, rpx) 0 unit(5, rpx);
-
-              &.brand_name4 {
-                font-size: unit(26, rpx);
-                line-height: unit(50, rpx);
-                .uni-max-cut(1, 50);
-              }
-
-              &.brand_name3 {
-                font-size: unit(28, rpx);
-                line-height: unit(60, rpx);
-                .uni-max-cut(1, 60);
-                margin-bottom: unit(10, rpx);
-              }
+              margin: 10rpx 0 0;
             }
           }
 
-
-          & .brand_item_preview {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0
-          }
         }
       }
     }