jufubao-mall 2.0.32-beta6 → 2.0.32

package/src/components/CusProduct/CusProduct.vue

@@ -1,20 +1,12 @@
 <template>
-  <view
-    class="product"
-    :class="{
-      two: cell >= 2 ,
-      one: (cell === 1 && columnOneLayout === 'H'),
-      oneV: (cell === 1 && columnOneLayout === 'V')
-    }"
-    @click="handleDetail()"
-  >
+  <view class="product" :class="{two: cell >= 2 , one: cell === 1}" @click="handleDetail()">
     <view
       class="product-image"
       :style="{
         marginRight: (cell === 1 ? (cellSpacing + 'rpx'):0),
-        marginBottom:  (cell === 1&& columnOneLayout ==='H' ? 0: (cellSpacing + 'rpx')),
-        width: (cell === 1 ? '240rpx': '100%'),
-        height: (cell === 1 && columnOneLayout ==='H' ? '240rpx': (height + 'rpx')),
+        marginBottom:  (cell === 1 ? 0: (cellSpacing + 'rpx')),
+        width: (cell === 1 ? '200rpx': '100%'),
+        height: (cell === 1 ? '200rpx': (height + 'rpx')),
         backgroundColor: '#f8f8f8',
         borderRadius: imageRadius + 'rpx',
       }"
@@ -22,75 +14,54 @@
       <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
-          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
-          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
-            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]"
-        >
+          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,index) in tags"
-            :key="index"
-            class="_tag"
-            :style="[tag.css]"
-          >{{tag.label}}</view>
-
+            v-for="tag in tagsList"
+            :key="tag"
+            :style="{background:tagObjColor[tag]}"
+          >{{tagObj[tag]}}</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" :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 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>
+          <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>
         </view>
-        <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')">
+        <view>
+          <view @click.stop="handleDetail('Y')" v-if="productConfig.isAddCart === 'Y'">
             <xd-font-icon
-              v-if="isIcon"
-              :icon="cartIcon"
-              :color="colorComp"
-              :size="cartSize"
+              icon="icongouwuche-01"
+              :color="color"
+              size="40"
             ></xd-font-icon>
-            <view v-else :style="[{color: colorComp},iconStyleComp,cartTextSize]" class="cart-btn">{{productConfig.cartName}}</view>
           </view>
         </view>
       </view>
@@ -103,30 +74,20 @@ 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,
-    CusPrice
+    XdProductStatus
   },
-  mixins:[mpLoadingGVarMixins],
   props:{
     keyword:{
       type:String,
       default:''
     },
-    //一列（水平/垂直）布局
-    columnOneLayout:{
-      type:String,
-      default:'H'
-    },
     nameFont: {
       type:Object,
       default(){
@@ -144,12 +105,16 @@ export default {
       type: Number|String,
       default: 20
     },
+    rowSpacing: {
+      type: Number|String,
+      default: 20
+    },
     color:{
       type:String,
-      default:'',
+      default:'red',
     },
     brandColor:{
-      type: String|Object,
+      type: String,
       default: '#999'
     },
     oldPriceColor: {
@@ -168,138 +133,8 @@ 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;
@@ -314,7 +149,7 @@ export default {
     },
     isOne(){
       let status = false;
-      if(this.cell === 1 && this.columnOneLayout ==='H') status = false
+      if(this.cell === 1) status = false
       return status
     },
     isBtn(){
@@ -323,74 +158,26 @@ export default {
     dividePrice() {
       return this.$xdUniHelper.divisionFloatNumber(this.item.market_price, 100);
     },
-    colorComp(){
-      return this.color || this.mainColor
-    },
-    showThreeTagsStyle() {
-      if(this.cell === 3) {
-        return {height:'40rpx'}
+
+    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);
       }
-      return {}
-    },
-    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
+      return false
     },
-    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;
+
+    tagsList(){
+      return (this.item['market_tags']||[]).filter(tag=>{
+        if(tag === 'flashsale') {
+          return this.productConfig.showActivityPrice === 'Y'
         }
-        return {
-          color: color,
-          backgroundColor: bgColor,
-          border,
-          borderRadius:radius,
+        else {
+          return this.productConfig.isShowTag === 'Y'
         }
-      }
-      return {}
-    },
-  },
-  watch:{
-    item(){
-      this.tags = [];
-      this.beTitles = [];
-      this.imgRs = [];
-      this.imgLs = [];
-      this.params = [];
-      this.handleTagsInit();
+      })
     },
-    showPriceComp() {
-      this.priceKey = new Date().getTime();
-    }
   },
   data(){
     return {
@@ -398,129 +185,20 @@ export default {
       tagObjColor: null,
       errorStatus: false,
       errorImage:'',
-      tags:[],
-      beTitles:[],
-      imgRs:[],
-      imgLs:[],
-      params:[],
-      mainColor: '',
-      priceKey: 'priceKey'
     }
   },
-  async created() {
-    let style = await getParentsStyles(this.$parent);
-    this.mainColor = style.$mainColor;
+  created() {
     this.tagObj = this.$colorConfig.productTags;
     this.tagObjColor = this.$colorConfig.productTagsColor;
-    this.errorImage = getServiceUrl('/common/empty/product.png?v1=1','size4');
-    this.handleTagsInit();
+    this.errorImage = getServiceUrl('/common/empty/product.png?v1=1','size4')
   },
   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>
@@ -528,237 +206,167 @@ export default {
 
 
 <style scoped lang="less">
-.product {
-
-  &.oneV {
-    .product-image {
-      flex-shrink: 0;
-      position: relative;
-      width: 100%!important;
-    }
+  .product {
 
-    .product-content {
-    }
-  }
+    &.one {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      min-height: 200rpx;
 
-  &.one {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
+      .product-image {
+        flex-shrink: 0;
+        position: relative;
+      }
 
-    .product-image {
-      flex-shrink: 0;
-      position: relative;
+      .product-content {
+        flex: 1;
+        min-height: 200rpx;
+        display: flex;
+        justify-content: flex-start;
+        flex-flow: wrap;
+        align-content: space-between;
+      }
     }
 
-    .product-content {
-      flex: 1;
-      min-height: 240rpx;
-      display: flex;
-      justify-content: flex-start;
-      flex-flow: wrap;
-      align-content: space-between;
+    &.two {
+      .product-image {
+        width: 100%;
+        display: flex;
+        flex-shrink: 0;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        & > image {
+          height: 100%;
+          width: 100%;
+        }
+      }
+
     }
-  }
 
-  &.two {
-    .product-image {
-      width: 100%;
-      display: flex;
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-      position: relative;
+    &-image {
+      overflow: hidden;
       & > image {
         height: 100%;
         width: 100%;
       }
     }
 
-  }
-
-  &-image {
-    overflow: hidden;
-    & > image {
-      height: 100%;
-      width: 100%;
-    }
+    &-content {
+      overflow: hidden;
+      &-info {
 
-    & .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;
-      }
-
-      & .showThree {
-        height: 72rpx;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-flow: wrap;
-        & > view {
-          width: 100%;
-          flex-shrink: 0;
-        }
       }
 
-      .onePrice {
+      &-btn {
+        width: 100%;
         display: flex;
-        justify-content: flex-start;
+        justify-content: space-between;
         align-items: center;
 
-        & > view:nth-child(2) {
-          margin-left: 20rpx;
-        }
-      }
-
-      & > view:first-child {
-        flex: 1;
-        & > view:first-child {
+        .onePrice {
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          overflow: hidden;
-        }
-        & > view:nth-child(2) {
-          line-height: 30rpx;
+
+          & > view:nth-child(2) {
+            margin-left: 20rpx;
+          }
         }
-      }
 
+        & > 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;
-        align-items: center;
-        cursor: pointer;
-      }
 
-      .oldPrice {
-        margin-left: 6rpx;
-      }
+        & > view:nth-child(2) {
+          flex-shrink: 0;
+          width: 40rpx;
+          height: 40rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
 
-      & .cart-btn-auto {
-        width: auto!important;
+        .oldPrice {
+          margin-left: 6rpx;
+        }
       }
-    }
-
-    & .name {
-      margin-bottom: 10rpx;
 
-      & .nameTags {
-        display: inline-block;
-        vertical-align: top;
+      & .name {
+        margin-bottom: 10rpx;
+        line-height: 40rpx;
+        .uni-max-cut(2,80);
+        word-wrap: break-word;
+        word-break: break-all;
 
-        & > view {
+        & > text {
           display: inline-block;
-          vertical-align: top;
-          font-size: 22rpx;
-          margin-right: 10rpx;
+
         }
-      }
 
-      & .nameCont {
-        line-height: 1.5;
-        display: inline;
+        &.showOne {
+          .uni-max-cut(1,40);
+        }
       }
 
-      &.showThree {
-        .uni-max-cut(1,40);
-        margin-bottom: 10rpx;
-      }
-      &.showOne {
-        .uni-max-cut(1,40);
+      & .brand {
+        font-size: 22rpx;
+        line-height: 30rpx;
+        .uni-max-cut(1,30);
+        padding-bottom: 10rpx;
       }
-    }
-
-
 
-    & .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;
 
+        &.showTwo {
+         & > view{
+           margin-bottom: 8rpx;
+         }
+        }
 
-    }
+        & > view {
+          padding: 0 14rpx;
+          height: 32rpx;
+          line-height: 31rpx;
+          font-size: 20rpx;
+          color:#fff;
+          border-radius: 16rpx;
+          margin-right: 10rpx;
 
-    & .tags {
-      display: flex;
-      justify-content: flex-start;
-      align-content: flex-start;
-      flex-flow: wrap;
-      width: 100%;
-
-      &.showThree {
-        overflow: hidden;
-        max-height: 40rpx;
-      }
+          &:last-child {
+            margin-right: 0;
+          }
 
-      &.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;
-        }
-
-      }
     }
-
-    & .cart-btn {
-      padding: 0 .5rem;
-      box-sizing: border-box;
+    ._tag{
+      color: #FF661A;
+      border: 1px solid #FF661A;
+      border-radius: 8rpx;
+      font-size: 24rpx;
+      margin-right: 24rpx;
+      padding: 0rpx 10rpx;
+      margin-bottom: 20rpx
     }
-
   }
-}
 </style>