jufubao-mall 2.0.32 → 2.0.34

package/src/components/CusProduct/CusProduct.vue

@@ -1,12 +1,20 @@
 <template>
-  <view class="product" :class="{two: cell >= 2 , one: cell === 1}" @click="handleDetail()">
+  <view
+    class="product"
+    :class="{
+      two: cell >= 2 ,
+      one: (cell === 1 && columnOneLayout === 'H'),
+      oneV: (cell === 1 && columnOneLayout === 'V')
+    }"
+    @click="handleDetail()"
+  >
     <view
       class="product-image"
       :style="{
         marginRight: (cell === 1 ? (cellSpacing + 'rpx'):0),
-        marginBottom:  (cell === 1 ? 0: (cellSpacing + 'rpx')),
-        width: (cell === 1 ? '200rpx': '100%'),
-        height: (cell === 1 ? '200rpx': (height + 'rpx')),
+        marginBottom:  (cell === 1&& columnOneLayout ==='H' ? 0: (cellSpacing + 'rpx')),
+        width: (cell === 1 ? '240rpx': '100%'),
+        height: (cell === 1 && columnOneLayout ==='H' ? '240rpx': (height + 'rpx')),
         backgroundColor: '#f8f8f8',
         borderRadius: imageRadius + 'rpx',
       }"
@@ -14,54 +22,75 @@
       <image v-if="errorStatus" :src="errorImage" :alt="item['product_name']" ></image>
       <image v-if="!errorStatus" :src="imageUrl" :alt="item['product_name']" @error="handleError(item)"></image>
       <xd-product-status :status="item['status']"></xd-product-status>
+      <view class="tagL" :style="[imgLs.length?imgLs[0]['css']:{},{top:imageRadius + 'rpx'}]" v-if="imgLs.length">{{imgLs[0].label}}</view>
+      <view class="tagR" :style="[imgRs.length?imgRs[0]['css']:{},{top:imageRadius + 'rpx'}]" v-if="imgRs.length">{{imgRs[0].label}}</view>
     </view>
     <view class="product-content">
       <view class="product-content-info">
-
-        <view class="name" :style="[nameFont]" v-html="cusName" :class="{showOne: isOne}"></view>
         <view
-          class="brand"
-          v-if="productConfig.is_show_brand==='Y'"
-          :style="{color:brandColor}"
-        >{{item['brand_name']}}</view>
-        <view class="tags" :class="{showTwo:!isOne}">
-          <view
-            v-for="tag in tagsList"
-            :key="tag"
-            :style="{background:tagObjColor[tag]}"
-          >{{tagObj[tag]}}</view>
+          v-if="cell === 3"
+          class="name showThree"
+          :style="[nameFontComp,cutStringComp]"
+        >
+          <view class="nameTags" v-if="beTitles.length > 0">
+            <view :key="beTitle.label" :style="[beTitle.css,cusTagComp]" v-for="beTitle in beTitles">{{beTitle.label}}</view>
+          </view>
+          <view class="nameCont" :style="{fontSize:columnOneLayout !=='H'?'32rpx': '28rpx'}">{{cusName}}</view>
         </view>
-        <view class="_tag" v-for="(item,index) in item.postage_tags" :key="index">{{ item }}</view>
-      </view>
-      <view class="product-content-btn" v-if="isBtn">
-        <view :class="{onePrice: onePrice }">
-          <view v-if="productConfig.isPrice === 'Y'">
-            <xd-unit
-              :price="(item['promo_price'] || item['sale_price'])"
-              :isOld="false"
-              :iconSize="cell <= 2?0.3:0.26"
-              :fontSize="cell <= 2?36:26"
-            />
+        <view
+          v-else
+          class="name"
+          :style="[nameFontComp,cutStringComp]"
+          :class="{showOne: isOne}"
+        >
+          <view class="nameTags" :style="{verticalAlign:columnOneLayout ==='V'?'middle':'top'}" v-if="beTitles.length > 0">
+            <view :key="beTitle.label" :style="[beTitle.css,cusTagComp]" v-for="beTitle in beTitles">{{beTitle.label}}</view>
           </view>
+          <view class="nameCont" :style="{fontSize:columnOneLayout !=='H'?'32rpx': '28rpx'}">{{cusName}}</view>
+        </view>
+        <view class="brandBox" v-if="productConfig.is_show_brand==='Y' || params.length > 0">
           <view
-            v-if="productConfig.isShowDiscount==='Y' && checkDiscountPrice"
-            :style="{color:oldPriceColor}" class="oldPrice">
-            <xd-unit
-              :price="dividePrice"
-              :iconSize="0.21"
-              :fontSize="cell <= 2?24:22"
-              delete-line
-              is-gray
-            />
-          </view>
+            class="brand"
+            v-if="productConfig.is_show_brand==='Y'"
+            :style="[brandStyle]"
+          >{{item['brand_name']}}</view>
+          <template v-for="(param,pIndex) in params">
+            <view v-if="productConfig.is_show_brand==='Y' || pIndex >= 1" class="brand" :style="[param.css,{padding: '0 6rpx',fontSize: '20rpx'}]">|</view>
+            <view class="brand" :style="[param.css]">{{param.label}}</view>
+          </template>
+        </view>
+        <view
+          v-if="tags.length > 0"
+          class="tags"
+          :class="{showTwo:!isOne, showThree: cell === 3}"
+          :style="[showThreeTagsStyle]"
+        >
+          <view
+            v-for="(tag,index) in tags"
+            :key="index"
+            class="_tag"
+            :style="[tag.css]"
+          >{{tag.label}}</view>
+
+        </view>
+      </view>
+      <view class="product-content-btn" v-if="isBtn" :class="{twoThree: isBtnHasMarginTop}">
+        <view :class="{onePrice: onePrice, showThree: isPriceTwoRow }">
+          <CusPrice v-if="productConfig.isPrice === 'Y'" :type="priceType" :isPlus="isPlus" :key="priceKey" :showPrice="showPriceComp"></CusPrice>
         </view>
-        <view>
-          <view @click.stop="handleDetail('Y')" v-if="productConfig.isAddCart === 'Y'">
+        <view
+          :class="{'cart-btn-auto': !isIcon}"
+          :style="{height:cartSize+'rpx', width: cartSize + 'rpx',position:'absolute',right:0,bottom:'4rpx',zIndex: 300}"
+          v-if="isShowCart && colorComp"
+        >
+          <view @click.stop="handleDetail('Y')">
             <xd-font-icon
-              icon="icongouwuche-01"
-              :color="color"
-              size="40"
+              v-if="isIcon"
+              :icon="cartIcon"
+              :color="colorComp"
+              :size="cartSize"
             ></xd-font-icon>
+            <view v-else :style="[{color: colorComp},iconStyleComp,cartTextSize]" class="cart-btn">{{productConfig.cartName}}</view>
           </view>
         </view>
       </view>
@@ -74,20 +103,30 @@ import getServiceUrl from "@/common/getServiceUrl";
 import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
 import XdProductStatus from "@/components/XdProductStatus/XdProductStatus";
 import XdUnit from "@/components/XdUnit/XdUnit.vue";
-
+import Color from "color";
+import CusPrice from '@/components/CusPrice/CusPrice.vue'
+import {getParentsStyles} from "@/utils/xd.base";
+import mpLoadingGVarMixins from "@/mixins/mpLoadingGVarMixins";
 
 export default {
   name: "CusProduct",
   components:{
     XdFontIcon,
     XdUnit,
-    XdProductStatus
+    XdProductStatus,
+    CusPrice
   },
+  mixins:[mpLoadingGVarMixins],
   props:{
     keyword:{
       type:String,
       default:''
     },
+    //一列（水平/垂直）布局
+    columnOneLayout:{
+      type:String,
+      default:'H'
+    },
     nameFont: {
       type:Object,
       default(){
@@ -105,16 +144,12 @@ export default {
       type: Number|String,
       default: 20
     },
-    rowSpacing: {
-      type: Number|String,
-      default: 20
-    },
     color:{
       type:String,
-      default:'red',
+      default:'',
     },
     brandColor:{
-      type: String,
+      type: String|Object,
       default: '#999'
     },
     oldPriceColor: {
@@ -133,8 +168,138 @@ export default {
       type:Object|null,
       default: null
     },
+    isPlus: {
+      type: Boolean,
+      default: false
+    },
   },
   computed:{
+    cutStringComp(){
+      return this.$root.getCutString(this.cell === 3?1:2, this.columnOneLayout !=='H'?32: 28)
+    },
+    nameFontComp(){
+      if(this.$xdUniHelper.isEmpty(this.nameFont)) return {
+        color: '#333',
+        fontWeight: '500',
+
+      };
+      return {
+        color:  this.nameFont.color || '#333',
+        fontWeight: this.nameFont.fontWeight || '500',
+      }
+    },
+    isBtnHasMarginTop(){
+      return !(this.tags.length > 0 || (this.productConfig.is_show_brand === 'Y' || this.params.length > 0));
+    },
+    showPriceComp(){
+      if(this.$configProject['isPreview']) {
+        if(this.isPlus) return this.item['show_prices'];
+        else {
+          return this.item['show_prices'].map(it=>{
+            if(it.p > 1000000)  it.p = Math.floor(this.$xdUniHelper.divisionFloatNumber(it.p, 10));
+            return it
+          })
+        }
+      }
+      else return this.item['show_prices']
+    },
+    isShowCart(){
+      if(this.productConfig.isAddCart === 'N') return false;
+      else if(this.productConfig.isAddCart === 'Y') {
+        return !(this.cell === 3 && this.isPlus);
+      }else {
+        return false
+      }
+    },
+    cusTagComp(){
+      //debugger
+      if(this.cell === 1 && this.columnOneLayout !== 'H') {
+        return {
+          padding: '0 16rpx',
+          borderRadius: '12rpx',
+          fontSize: '28rpx',
+        }
+      }
+      return {
+        padding: '0 16rpx',
+      }
+    },
+    cartSize(){
+      let size = '52'
+      if(this.cell === 1) {
+        if(this.columnOneLayout === 'H') size = '52'
+        else  size = '64'
+      }
+      if(this.cell === 3) size = '40'
+      return size
+    },
+    cartTextSize(){
+      let size = '24rpx'
+      let lh = '44rpx'
+      let padding = '0 16rpx 0rpx';
+
+      if(this.cell === 1) {
+        if(this.columnOneLayout === 'H'){
+          lh = '44rpx'
+          size = '24rpx'
+          padding = '0 20rpx 0'
+        }
+        else {
+          size = '32rpx'
+          lh = '64rpx'
+          padding = '0 32rpx 0'
+        }
+      }
+      return {
+        fontSize:size,
+        lineHeight: lh,
+        padding,
+      }
+    },
+    brandStyle(){
+      if(typeof this.brandColor === 'string') return {color:this.brandColor}
+      else {
+        let isBgColor = true;
+        let isBorColor = true;
+
+        if(!this.brandColor.bgColor ||
+          (this.brandColor.bgColor && Color(this.brandColor.bgColor).toString() === 'rgba(0, 0, 0, 0)')
+        ) isBgColor = false;
+        if(!this.brandColor.borderColor ||
+          (this.brandColor.borderColor && Color(this.brandColor.borderColor).toString() === 'rgba(0, 0, 0, 0)')
+        ) isBorColor = false;
+
+        let padding = '0';
+        let bgColor = 'rgb(0, 0, 0, 0)';
+        let border = '0';
+        let borderRadius = 0
+        let marginTop = 0;
+        if(isBgColor || isBorColor){
+          padding = '0 10rpx';
+          borderRadius = '10rpx'
+          if(isBgColor) bgColor = this.brandColor.bgColor;
+          if(isBorColor){
+            border = `2rpx solid ${this.brandColor.borderColor}`;
+          }
+        }
+        return {
+          border: border,
+          backgroundColor: bgColor,
+          color: this.brandColor.color,
+          padding,
+          borderRadius,
+          marginTop
+        }
+      }
+    },
+    isPriceTwoRow(){
+      if(this.cell === 3) {
+        if(this.productConfig.isPrice === 'N') return false;
+        else if(this.productConfig.isShowDiscount === 'N') return false
+        return true;
+      }
+      return false
+    },
     onePrice(){
       if(this.cell === 1) return true;
       if(this.cell === 3) return false;
@@ -149,7 +314,7 @@ export default {
     },
     isOne(){
       let status = false;
-      if(this.cell === 1) status = false
+      if(this.cell === 1 && this.columnOneLayout ==='H') status = false
       return status
     },
     isBtn(){
@@ -158,26 +323,74 @@ export default {
     dividePrice() {
       return this.$xdUniHelper.divisionFloatNumber(this.item.market_price, 100);
     },
-
-    checkDiscountPrice() {
-      if(this.productConfig.isPrice === 'N') return  false
-      if (this.productConfig.isShowDiscount === 'Y') {
-        let price = Number(this.item.market_price) - Number(this.item.sale_price);
-        return this.$xdUniHelper.divisionFloatNumber(price,100) > Number(this.productConfig.differ);
+    colorComp(){
+      return this.color || this.mainColor
+    },
+    showThreeTagsStyle() {
+      if(this.cell === 3) {
+        return {height:'40rpx'}
       }
-      return false
+      return {}
     },
-
-    tagsList(){
-      return (this.item['market_tags']||[]).filter(tag=>{
-        if(tag === 'flashsale') {
-          return this.productConfig.showActivityPrice === 'Y'
+    priceType(){
+      if(this.cell === 3) return 'three'
+      if(this.cell === 2) return 'two'
+      if(this.cell === 1) return 'one'
+    },
+    cartIcon(){
+      return this.productConfig.cartIcon || 'icongouwuche-01';
+    },
+    isIcon(){
+      return this.cartIcon.indexOf('btn_cart') === -1
+    },
+    iconStyleComp(){
+      if(this.isIcon === false){
+        let css = this.cartIcon.split('_')[1];
+        let bgColor ='#fff', border = 0, radius = 0, color = this.color || this.m;
+        switch (css) {
+          case 'cartFPlain':
+            border = `1px solid ${color}`;
+            break;
+          case 'cartFFull':
+            color = '#fff'
+            bgColor = this.color;
+            break;
+          case 'cartCPlain':
+            border = `1px solid ${color}`;
+            radius = '22rpx';
+            if(this.cell === 1 && this.columnOneLayout !== 'H')  radius = '32rpx';
+            break;
+          case 'cartCFull':
+            color = '#fff'
+            bgColor = this.color;
+            radius = '22rpx';
+            if(this.cell === 1 && this.columnOneLayout !== 'H')  radius = '32rpx';
+            break;
+          default:
+            break;
         }
-        else {
-          return this.productConfig.isShowTag === 'Y'
+        return {
+          color: color,
+          backgroundColor: bgColor,
+          border,
+          borderRadius:radius,
         }
-      })
+      }
+      return {}
+    },
+  },
+  watch:{
+    item(){
+      this.tags = [];
+      this.beTitles = [];
+      this.imgRs = [];
+      this.imgLs = [];
+      this.params = [];
+      this.handleTagsInit();
     },
+    showPriceComp() {
+      this.priceKey = new Date().getTime();
+    }
   },
   data(){
     return {
@@ -185,20 +398,129 @@ export default {
       tagObjColor: null,
       errorStatus: false,
       errorImage:'',
+      tags:[],
+      beTitles:[],
+      imgRs:[],
+      imgLs:[],
+      params:[],
+      mainColor: '',
+      priceKey: 'priceKey'
     }
   },
-  created() {
+  async created() {
+    let style = await getParentsStyles(this.$parent);
+    this.mainColor = style.$mainColor;
     this.tagObj = this.$colorConfig.productTags;
     this.tagObjColor = this.$colorConfig.productTagsColor;
-    this.errorImage = getServiceUrl('/common/empty/product.png?v1=1','size4')
+    this.errorImage = getServiceUrl('/common/empty/product.png?v1=1','size4');
+    this.handleTagsInit();
   },
   methods:{
+    handleTagsInit(){
+      if(this.item.tags && this.item.tags.length > 0) {
+        this.item.tags.map(it=>{
+          if(it['style']){
+            let flag = this.$colorConfig['tagStyle'][it['style']];
+            if(flag.radius) {
+              it.css = this.btnStyleComp(flag,flag.radius);
+            }
+            else it.css = this.btnStyleComp(flag);
+          }
+          else {
+            it.css = this.btnStyleComp(this.$colorConfig['tagStyle']['GR4']);
+          }
+          if(it.pos === 'tag') this.tags.push(it);
+          else if(it.pos === 'beTitle') this.beTitles.push(it);
+          else if(it.pos === 'imgR') this.imgRs.push(it);
+          else if(it.pos === 'imgL') this.imgLs.push(it);
+          else if(it.pos === 'param') this.params.push(it);
+          else this.tags.push(it);
+        })
+      }
+    },
     handleError(item){
       this.errorStatus = true;
     },
     handleDetail(type='N'){
       this.$emit('on-product-detail', {isCart:type,...this.item});
-    }
+    },
+    btnStyleComp({style, color, bgColor}, cusRadius='8rpx'){
+      let c = '',bgc = '', border = 0, radius = 0, padding='0 10rpx';
+      if(style) {
+        switch (style) {
+          case 'css1':
+            c = color || '#999';
+            padding = 0;
+            break;
+          case 'css2':
+            c = color || '#999';
+            bgc = bgColor;
+            radius = cusRadius;
+            break;
+          case 'css3':
+            c = color || '#999';
+            bgc = bgColor;
+            break;
+          case 'css4':
+            c = color ||'#999';
+            bgc = bgColor ||'#fff';
+            radius = cusRadius;
+            border = `1px solid rgba(${Color(c).alpha(0.3).array().join(',')})`;
+            break;
+          case 'css5':
+            c = color ||'#999';
+            bgc = bgColor ||'#fff';
+            radius = '0';
+            border = `1px solid rgba(${Color(c).alpha(0.3).array().join(',')})`;
+            break;
+          case 'css6':
+            c = color ||'#999';
+            bgc = bgColor || '#fff';
+            radius = cusRadius;
+            border = `1px solid ${c}`
+            break;
+          case 'css7':
+            c = color ||'#999';
+            bgc = bgColor || '#fff';
+            radius = '0';
+            border = `1px solid ${c}`
+            break;
+          case 'css8':
+            c = color||'#fff';
+            bgc = bgColor;
+            radius = cusRadius;
+            break;
+          case 'css9':
+            c = color||'#fff';
+            bgc = bgColor;
+            break;
+          case 'cssL':
+            c = color;
+            bgc = bgColor;
+            radius = `0 ${cusRadius} ${cusRadius} 0`;
+            padding = '0 20rpx 0 10rpx'
+            break;
+          case 'cssR':
+            c = color;
+            bgc = bgColor;
+            radius = `${cusRadius} 0 0 ${cusRadius}`;
+            padding = '0 10rpx 0 20rpx'
+            break;
+          default:
+            c = color ||'#999'
+            padding = 0;
+            break;
+        }
+        return {
+          color: c,
+          backgroundColor: bgc,
+          border,
+          borderRadius:radius,
+          padding
+        }
+      }
+      else return {}
+    },
   }
 }
 </script>
@@ -206,167 +528,237 @@ export default {
 
 
 <style scoped lang="less">
-  .product {
-
-    &.one {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      min-height: 200rpx;
+.product {
 
-      .product-image {
-        flex-shrink: 0;
-        position: relative;
-      }
+  &.oneV {
+    .product-image {
+      flex-shrink: 0;
+      position: relative;
+      width: 100%!important;
+    }
 
-      .product-content {
-        flex: 1;
-        min-height: 200rpx;
-        display: flex;
-        justify-content: flex-start;
-        flex-flow: wrap;
-        align-content: space-between;
-      }
+    .product-content {
     }
+  }
 
-    &.two {
-      .product-image {
-        width: 100%;
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        & > image {
-          height: 100%;
-          width: 100%;
-        }
-      }
+  &.one {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .product-image {
+      flex-shrink: 0;
+      position: relative;
+    }
 
+    .product-content {
+      flex: 1;
+      min-height: 240rpx;
+      display: flex;
+      justify-content: flex-start;
+      flex-flow: wrap;
+      align-content: space-between;
     }
+  }
 
-    &-image {
-      overflow: hidden;
+  &.two {
+    .product-image {
+      width: 100%;
+      display: flex;
+      flex-shrink: 0;
+      justify-content: center;
+      align-items: center;
+      position: relative;
       & > image {
         height: 100%;
         width: 100%;
       }
     }
 
-    &-content {
-      overflow: hidden;
-      &-info {
+  }
+
+  &-image {
+    overflow: hidden;
+    & > image {
+      height: 100%;
+      width: 100%;
+    }
 
+    & .tagL {
+      position: absolute;
+      left: 0;
+      font-size: 20rpx;
+      line-height: 40rpx;
+    }
+
+    & .tagR {
+      position: absolute;
+      right: 0;
+      font-size: 20rpx;
+      line-height: 40rpx;
+    }
+  }
+
+  &-content {
+    overflow: hidden;
+    &-info {
+
+    }
+
+    &-btn {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+
+      &.twoThree {
+        margin-top: 18rpx;
       }
 
-      &-btn {
-        width: 100%;
+      & .showThree {
+        height: 72rpx;
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-start;
         align-items: center;
+        flex-flow: wrap;
+        & > view {
+          width: 100%;
+          flex-shrink: 0;
+        }
+      }
 
-        .onePrice {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
+      .onePrice {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
 
-          & > view:nth-child(2) {
-            margin-left: 20rpx;
-          }
+        & > view:nth-child(2) {
+          margin-left: 20rpx;
         }
+      }
 
+      & > view:first-child {
+        flex: 1;
         & > view:first-child {
-          flex: 1;
-          & > view:first-child {
-            height: 40rpx;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            overflow: hidden;
-          }
-          & > view:nth-child(2) {
-            line-height: 30rpx;
-          }
-        }
-
-
-
-        & > view:nth-child(2) {
-          flex-shrink: 0;
-          width: 40rpx;
-          height: 40rpx;
           display: flex;
-          justify-content: center;
+          justify-content: flex-start;
           align-items: center;
-          cursor: pointer;
+          overflow: hidden;
         }
-
-        .oldPrice {
-          margin-left: 6rpx;
+        & > view:nth-child(2) {
+          line-height: 30rpx;
         }
       }
 
-      & .name {
-        margin-bottom: 10rpx;
-        line-height: 40rpx;
-        .uni-max-cut(2,80);
-        word-wrap: break-word;
-        word-break: break-all;
 
-        & > text {
-          display: inline-block;
 
-        }
+      & > view:nth-child(2) {
+        flex-shrink: 0;
+        width: 40rpx;
+        height: 40rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
 
-        &.showOne {
-          .uni-max-cut(1,40);
-        }
+      .oldPrice {
+        margin-left: 6rpx;
       }
 
-      & .brand {
-        font-size: 22rpx;
-        line-height: 30rpx;
-        .uni-max-cut(1,30);
-        padding-bottom: 10rpx;
+      & .cart-btn-auto {
+        width: auto!important;
       }
+    }
 
-      .tags {
-        display: flex;
-        justify-content: flex-start;
-        align-content: flex-start;
-        flex-flow: wrap;
+    & .name {
+      margin-bottom: 10rpx;
 
-        &.showTwo {
-         & > view{
-           margin-bottom: 8rpx;
-         }
-        }
+      & .nameTags {
+        display: inline-block;
+        vertical-align: top;
 
         & > view {
-          padding: 0 14rpx;
-          height: 32rpx;
-          line-height: 31rpx;
-          font-size: 20rpx;
-          color:#fff;
-          border-radius: 16rpx;
+          display: inline-block;
+          vertical-align: top;
+          font-size: 22rpx;
           margin-right: 10rpx;
+        }
+      }
 
-          &:last-child {
-            margin-right: 0;
-          }
+      & .nameCont {
+        line-height: 1.5;
+        display: inline;
+      }
+
+      &.showThree {
+        .uni-max-cut(1,40);
+        margin-bottom: 10rpx;
+      }
+      &.showOne {
+        .uni-max-cut(1,40);
+      }
+    }
+
+
+
+    & .brandBox {
+      width: 100%;
+      margin-bottom: 16rpx;
+      font-size: 24rpx;
+      .uni-max-cut(1,40);
+      box-sizing: border-box;
+
+      & > view {
+        height: 36rpx;
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 36rpx;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+
+    }
 
+    & .tags {
+      display: flex;
+      justify-content: flex-start;
+      align-content: flex-start;
+      flex-flow: wrap;
+      width: 100%;
+
+      &.showThree {
+        overflow: hidden;
+        max-height: 40rpx;
+      }
+
+      &.showTwo {
+        & > view{
+          margin-bottom: 8rpx;
         }
       }
 
+      & > view {
+        padding: 0 16rpx;
+        line-height: 34rpx;
+        font-size: 20rpx;
+        color:#fff;
+        margin-right: 10rpx;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+      }
     }
-    ._tag{
-      color: #FF661A;
-      border: 1px solid #FF661A;
-      border-radius: 8rpx;
-      font-size: 24rpx;
-      margin-right: 24rpx;
-      padding: 0rpx 10rpx;
-      margin-bottom: 20rpx
+
+    & .cart-btn {
+      padding: 0 .5rem;
+      box-sizing: border-box;
     }
+
   }
+}
 </style>