修改切换样式

后端研发-倪永富
1 parent 47696d43
Showing 3 changed files with 273 additions and 110 deletions
pages/goods/categoryList/categoryList.js
pages/goods/categoryList/categoryList.wxml
pages/goods/categoryList/categoryList.wxss
 var t = getApp(), e = t.request, oo = t.globalData.setting;
-
 var i = function (i) {
   return i && i.__esModule ? i : {
     default: i
@@ -7,65 +6,87 @@ var i = function (i) {
 }(require("../../../utils/LoadMore.js")), a = new i.default(), ut = require("../../../utils/util.js");
 //t = i,e = t
 Page({
-    data: {
-      is_date:true,
-      scrollHeight: 0,
-      currentTab:-1,
-      abc:0,
-      windowHeight:0,
-      windowWidth: 0,
-      eachLetterHeight:0,
-      lettersPosition:0, 
-      catelist:null,   //分类读取
-      nationlist: null,//国家读取
-      groups: null,    //品牌读取
-      iurl: oo.imghost,//图片地址
-
-      // 当前选择的导航字母
-      selected: 0,
-      // 选择字母视图滚动的位置id
-      scrollIntoView: 'A',
-      // 导航字母
-      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
-        'U', 'V', 'W', 'X', 'Y', 'Z'],
-     //控制新旧分类版本
-      is_used_share:0,
-      //国家的控制属性
-      is_country:1,
-      //品牌的控制属性
-      is_brand:1,
-      //选择分类的控制属性
-      select_classify_on:223,
-      index:223,
-      classify_name:"国家",//项目类型
-      brand_list:null,//品牌列表
-
-      one_level_classify:[],// 新的版本左边的边分类1级
-      is_level_three:0,//判断有没有3级
-      cat_id:0,
-      pl_timer: null,//只有品类的定时器
-      is_pl_time:0,
-      requestData:null, //风格三的商品数据列表 分页
-      stylePage:1, //商品列表分页标识
-
-      //风格三使用
-      url: t.globalData.setting.imghost,
-      currentPage: 1,
-      requestData: null,
-      allData: null,
-      openFilterModal: !1,
-      baseUrl: "api/weshop/goods/page?1=1&cat_id=1&parent_id=0&orderField=goods_id&orderType=desc&page=1&is_mainshow=1&isonsale=1&store_id="+oo.stoid+"&is_recommend=1",
-      requestUrl: "",
-      tabname: "goods_id",   //排序的字段
-      adname: "desc",        //升降的字段
-      is_new: 0,
-      is_hot: 0,
-      msgStatus:false,  //页面显示暂无数据状态
-      countDownNum: 3,
-      timer: '', //定时器
-      lastMsg:false,
-      toView:"",
-    },
+  data: {
+    is_date:true,
+    scrollHeight: 0,
+    currentTab:-1,
+    abc:0,
+    windowHeight:0,
+    windowWidth: 0,
+    eachLetterHeight:0,
+    lettersPosition:0, 
+    catelist:null,   //分类读取
+    nationlist: null,//国家读取
+    groups: null,    //品牌读取
+    iurl: oo.imghost,//图片地址
+
+    // 当前选择的导航字母
+    selected: 0,
+    // 选择字母视图滚动的位置id
+    scrollIntoView: 'A',
+    // 导航字母
+    letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
+      'U', 'V', 'W', 'X', 'Y', 'Z'],
+   //控制新旧分类版本
+    is_used_share:0,
+    //国家的控制属性
+    is_country:1,
+    //品牌的控制属性
+    is_brand:1,
+    //选择分类的控制属性
+    select_classify_on:223,
+    index:223,
+    classify_name:"国家",//项目类型
+    brand_list:null,//品牌列表
+
+    one_level_classify:[],// 新的版本左边的边分类1级
+    is_level_three:0,//判断有没有3级
+    cat_id:0,
+    pl_timer: null,//只有品类的定时器
+    is_pl_time:0,
+    requestData:null, //风格三的商品数据列表 分页
+    stylePage:1, //商品列表分页标识
+
+    //风格三使用
+    url: t.globalData.setting.imghost,
+    currentPage: 1,
+    allData: null,
+    openFilterModal: !1,
+    baseUrl: "api/weshop/goods/page?1=1&cat_id=1&parent_id=0&orderField=goods_id&orderType=desc&page=1&is_mainshow=1&isonsale=1&store_id="+oo.stoid+"&is_recommend=1",
+    requestUrl: "",
+    tabname: "goods_id",   //排序的字段
+    adname: "desc",        //升降的字段
+    is_new: 0,
+    is_hot: 0,
+    msgStatus:false,  //页面显示暂无数据状态
+    countDownNum: 3,
+    timer: '', //定时器
+    lastMsg:false,
+    toView:"",
+    is_show_class:false,//是否添加新样式
+    status_show:0,
+    currentTab: 0, //预设当前项的值
+  },
+
+
+  //判断当前滚动超过一屏时，设置tab标题滚动条。
+  checkCor: function() {
+    let that = this;
+    //这里计算按照实际情况进行修改，动态数据要进行动态分析
+    //思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
+    //数据很多可以多次if判断然后进行滚动距离计算即可
+    if (that.data.currentTab > 7) {
+      that.setData({
+        scrollTop: 500
+      })
+    } else {
+      that.setData({
+        scrollTop: 0
+      })
+    }
+  },
+
+
     onLoad: function(tt) { 
       var that = this;
       that.get_brand();
@@ -189,10 +210,14 @@ Page({
                          }
                          that.setData({ is_level_three: is_lev_thr });
                          if (is_lev_thr!=1) {
-                             that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name, goodslist: item.array });
-                         } else {
-                             that.setData({ select_classify_on: 0, index: 0, goodslist: arr });
-                         }
+                          that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name,cat_id: item.items.id,goodslist: item.array });
+                          console.log("id:="+item.items.id)
+                          that.style(that.data.stylePage,that.data.cat_id);
+                     } else {
+                          that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name,cat_id: item.items.id,goodslist: arr });
+                          console.log("id:="+item.items.id)
+                          that.style(that.data.stylePage,that.data.cat_id);
+                     }
                      }
                      else{
                          that.setData({ select_classify_on: 0, index: 0, goodslist: null,classify_name:item.items.name,is_level_three: 0});
@@ -222,6 +247,12 @@ Page({
         } else if (that.data.is_show_pl) {
           that.setData({ currentTab: 0 });
         }
+        // 获取默认选中的第一个
+        if(that.data.is_show_gb && that.data.select_classify_on == 223){
+          that.setData({ status_show: 1 });
+        }else if(that.data.is_show_pp && that.data.select_classify_on == 220){
+          that.setData({ status_show: 2 });
+        }
       })
  
     },
@@ -291,8 +322,18 @@ Page({
                     }
                   }
                 }
-
               }
+              for(var i=0;i<arr.length;i++){
+                arr[i]['items']['is_show_class'] = false;
+                var mobile_name = arr[i]['items']['name']
+                if(mobile_name.length > 4){
+                  arr[i]['items']['name'] = mobile_name.substring(0, 4)
+                }
+              }
+              if(t.data.is_show_pl==1 && t.data.is_show_pp != 1 && t.data.is_show_gb != 1){
+                arr[0]['items']['is_show_class'] = true;
+              }
+              //console.log(arr)
                 t.setData({one_level_classify:arr});
  
               } 
@@ -557,6 +598,37 @@ Page({
   },
   // 新的版本分类点击一级分类
  click_classify:function(e){
+  let cur = e.currentTarget.dataset.current;
+  if (this.data.currentTab == cur) {
+    return false;
+  } else {
+    wx.pageScrollTo({
+      scrollTop: 0
+    })
+    this.setData({
+      currentTab: cur,
+      select_classify_on:cur
+    })
+    this.checkCor();
+  }
+  // if(e.currentTarget.dataset.index == 223){
+  //   this.setData({ status_show: 1});
+  //  }else if(e.currentTarget.dataset.index == 220){
+  //   this.setData({ status_show: 2});
+  //  }else{
+  //   this.setData({ status_show: 0});
+  //  }
+   var arr2 = this.data.one_level_classify
+   for(var i=0;i<arr2.length;i++){
+     if(i == e.currentTarget.dataset.index){
+      arr2[i]['items']['is_show_class'] = true
+     }else{
+      arr2[i]['items']['is_show_class'] = false
+     }
+   }
+   this.setData({ one_level_classify: arr2});
+   //this.data.one_level_classify[e.currentTarget.dataset.index]['items']['is_show_class'] = true
+  console.log(e.currentTarget.dataset.index)
    clearInterval(this.data.timer);
    this.setData({ countDownNum: 3, stylePage: 1, scrollTop: 0});
    this.data.ishaf_three = 0;
@@ -565,12 +637,13 @@ Page({
    var cid = e.currentTarget.dataset.cid;
    var pid = e.currentTarget.dataset.pid;
    var arr = e.currentTarget.dataset.arr;
-   console.log("cid:=" + cid)
+   console.log("cid:=" + name)
    if (indexs == 220) { this.get_brand(); }
    //==2的时候 请求数据为商品，不为分类
    if (this.data.is_used_share == 2) {
-     this.style(this.data.stylePage, cid)
-     this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid,lastMsg: false, });
+    this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid,lastMsg: false, });
+    console.log("edqdqw:="+this.data.select_classify_on)
+    this.style(this.data.stylePage, cid)
    }else{
      if (arr != "undefined" && arr != undefined) {
        if (arr.length == 0) {
@@ -588,10 +661,10 @@ Page({
          this.setData({ is_level_three: is_lev_thr });
  
          if (this.data.is_level_three != 1) {
-           this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, goodslist: arr });
-         } else {
-           this.setData({ select_classify_on: indexs, index: indexs, goodslist: arr });
-         }
+          this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, goodslist: arr });
+        } else {
+          this.setData({ select_classify_on: indexs, index: indexs, goodslist: arr });
+        }
        }
      }
      this.setData({ select_classify_on: indexs, index: indexs, classify_name: name, cat_id: cid, stylePage: 1,lastMsg: false,});
@@ -756,6 +829,8 @@ Page({
           if (page != 1) {
             var dataArray = s.data.one_level_classify
             var index = s.data.index
+            dataArray[index]['items']['is_show_class'] = false
+            dataArray[index+1]['items']['is_show_class'] = true
             console.log(dataArray[index + 1]['items'])
             s.setData({
               msgStatus: true,
@@ -763,7 +838,8 @@ Page({
               index: index + 1,
               select_classify_on: index + 1,
               cat_id: dataArray[index + 1]['items']['id'],
-              classify_name: dataArray[index + 1]['items']['name']
+              classify_name: dataArray[index + 1]['items']['name'],
+              one_level_classify: dataArray
             });
             s.style(s.data.stylePage, dataArray[index + 1]['items']['id'])
           }else{
@@ -798,12 +874,15 @@ Page({
                     lastMsg: true
                   });
                 }else{
+                  dataArray[index]['items']['is_show_class'] = false
+                  dataArray[index+1]['items']['is_show_class'] = true
                   s.setData({
                     stylePage: 1,
                     index: index + 1,
                     select_classify_on: index + 1,
                     cat_id: dataArray[index + 1]['items']['id'],
-                    classify_name: dataArray[index + 1]['items']['name']
+                    classify_name: dataArray[index + 1]['items']['name'],
+                    one_level_classify:dataArray
                   });
                   s.style(s.data.stylePage, dataArray[index + 1]['items']['id']);
                 }
@@ -813,6 +892,15 @@ Page({
               s.setData({
                 countDownNum: countDownNum
               })
+              var arr2 = s.data.one_level_classify
+              for(var i=0;i<arr2.length;i++){
+                if(i == s.data.index){
+                arr2[i]['items']['is_show_class'] = true
+                }else{
+                arr2[i]['items']['is_show_class'] = false
+                }
+              }
+              s.setData({ one_level_classify: arr2});
             }, 1000)
           }
  
-<!-- 风格1 -->
+<!-- 风格1 --> 
 <block wx:if="{{is_used_share==0}}">
   <view class='top_view' wx:if="{{is_show_pl || is_show_gb || is_show_pp }}">
     <view class="swiper-tab" >
@@ -118,21 +118,26 @@
                <!-- 分类项目的类型 -->
                <view class="project_type" style="background-color:#eee">
            <view class="project_type-frame" style="margin-bottom:120rpx">
-           <view wx:if="{{is_show_gb}}">
-              <view  bindtap="click_classify"  class="share_type fs30 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}">
+           <view wx:if="{{is_show_gb}}" class="{{status_show == 1?'is_show_class':''}}">
+           <view  style="{{status_show == 1?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view>
+              <view  bindtap="click_classify"  style="{{status_show == 1?'margin-top:0':'margin-top:40rpx'}}" class="share_type fs30 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}">
                <text>国</text><text>家</text>
  
               </view>
               </view>
-              <view wx:if="{{is_show_pp}}">
-                  <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs30 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220"data-name="品牌">
+              <view wx:if="{{is_show_pp}}" class="{{status_show == 2?'is_show_class':''}}">
+              <view  style="{{status_show == 2?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view>
+                <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs30 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220"data-name="品牌">
              <text>品</text><text>牌</text>
               </view>
               </view>
               <view wx:if="{{is_show_pl}}">
  
                 <view wx:for="{{one_level_classify}}" wx:for-item="ittms" >
-                 <view bindtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.name}}">
+                <view class="{{ittms.items.is_show_class == true?'is_show_class':''}}">
+                 <!-- 添加左边红色条 -->
+                 <view  style="{{ittms.items.is_show_class == true?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view>
+                 <view bindtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.mobile_name}}">
                  <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}">
                  <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index">
                  <view>
@@ -141,12 +146,11 @@
                  </view>
  
                  </view>
-                   <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}
-                 </view>
+                   <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</view>
                  </view>
  
               </view>
-
+          </view>
         </view>
            </view>
  
@@ -288,21 +292,25 @@
           <!-- 分类项目内容 -->
           <view class="flex project_height" style="margin-left:-10rpx;">
             <!-- 分类项目的类型 -->
-            <view class="project_type" style="background-color:#eee;height:88%;overflow-y:auto;position:fixed;left:0;z-index:999999;top:120rpx;">
+            <view class="project_type" style="background-color:#eee;height:88%;overflow-y:auto;position:fixed;left:0;z-index:999999;top:126rpx;">
               <view class="project_type-frame" style="margin-bottom:120rpx;">
                 <view wx:if="{{is_show_gb}}">
-                  <view  bindtap="click_classify"  class="share_type fs30 flex-space-between xc-letter-spacing {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}">
+                  <view  bindtap="click_classify"  class="tab-bar-item {{select_classify_on==223 ? 'active' : ''}}"  data-current="223" data-index="223" data-name="国家" wx:if="{{is_country}}">
                     <text>国</text><text>家</text>
                   </view>
                 </view>
                 <view wx:if="{{is_show_pp}}">
-                  <view bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} share_type fs30 flex-space-between xc-letter-spacing" wx:if="{{is_brand}}"data-index="220"data-name="品牌">
+                
+                  <view bindtap="click_classify"  class="tab-bar-item {{select_classify_on==220 ? 'active' : ''}}" wx:if="{{is_brand}}"  data-current="220" data-index="220" data-name="品牌">
                     <text>品</text><text>牌</text>
                    </view>
                 </view>
                 <view wx:if="{{is_show_pl}}">
-                  <view wx:for="{{one_level_classify}}" wx:for-item="ittms" >
-                    <view bindtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.name}}">
+                  <!-- <view wx:for="{{one_level_classify}}" wx:for-item="ittms" class="class_set_height"> -->
+                  <!-- <view class="{{ittms.items.is_show_class == true?'is_show_class':''}}"> -->
+                    <!-- 添加左边红色条 -->
+                    <!-- <view  style="{{ittms.items.is_show_class == true?'position: absolute;height: 52rpx;width: 6rpx;background-color: red;left: 0; margin-top: 24rpx;':''}}"></view> -->
+                    <!-- <view bindtap="click_classify"  style="{{status_show == 0 && ittms == 0 ?'margin-top:0':'margin-top:0rpx'}}" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" class="{{select_classify_on==index?'select_classify width80':''}} share_type fs30 t-c {{ittms.items.name.length==2? 'world_sn':''}} {{select_classify_on==index&&ittms.items.name.length==2?'text-indent':''}} {{select_classify_on==index&&ittms.items.name.length==3?'text3':''}}"data-index="{{index}}"data-name="{{ittms.items.mobile_name}}">
                       <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}">
                         <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index">
                           <view>
@@ -311,11 +319,26 @@
                         </view>
                       </view>
                       <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</view>
+                    </view> -->
+                  <!-- </view> -->
+                  <scroll-view scroll-y scroll-with-animation class="tab-view" scroll-top="{{scrollTop}}" style="height:88%">
+                    <view wx:for="{{one_level_classify}}" wx:for-item="ittms" wx:key="{{index}}" class="tab-bar-item {{select_classify_on==index ? 'active' : ''}}" data-current="{{index}}" catchtap="click_classify" data-arr="{{ittms.array}}" data-cid="{{ittms.items.id}}" data-pid="0" data-index="{{index}}"data-name="{{ittms.items.mobile_name}}">
+                      <text>{{ittms.items.name}}</text>
+                      <!-- <view class="{{ittms.items.name.length==3?'flex-center-around':'flex-space-between'}}" wx:if="{{ittms.items.name.length<4}}">
+                        <view wx:for="{{ittms.items.name}}" wx:for-item="name"wx:for-index="index">
+                          <text>
+                          {{name}}
+                          </text>
+                        </view>
+                      </view>
+                      <text wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</text> -->
                     </view>
-                  </view>
-                </view>
+                  </scroll-view>
+                  
+                <!-- </view> -->
               </view>
             </view>
+             </view>
             <!-- 分类项目的内容 -->
             <view class="classify_content" style="margin-left:27%;margin-top:130rpx">
         <!-- 国家的样式 -->
@@ -364,7 +387,7 @@
         </block>
         <!-- 品类-->
         <block  wx:if="{{is_show_pl}}">
-          <block wx:if="{{select_classify_on!=220&&select_classify_on!=223&&is_level_three!=1}}">
+          <block wx:if="{{select_classify_on!=220&&select_classify_on!=223}}">
               <view style="width:100%;height:100%;">
                 <view class="classify_name fs28 flex-space-between" id="header" data-pid="0" data-cid="{{cat_id}}" bindtap='select_more' style="position:fixed;z-index:999999;top:130rpx;width:70%;background-color:#ffffff;left:27%;padding:0 10rpx;">
                   <view class="classify_title ellipsis-1">{{classify_name}}</view>
@@ -377,7 +400,7 @@
                 <!-- <view class="classify_content-frame flex-wrap" style="width:100%;overflow:hidden;heigth:100%;"> -->
  
                <!-- <view class="null" style="width:100%;margin-top:70rpx;"></view> -->
-                <scroll-view scroll-y scroll-top="{{scrollTop}}" bindscrolltolower='scrollLower' style="height:{{windowHeight}};position:absolute;margin-top:70rpx;top:120rpx;bottom:0;rigth:0;left:26%;width:73%;margin-bottom:50px;">
+                <scroll-view scroll-y scroll-top="{{scrollTop}}" bindscrolltolower='scrollLower' style="height:{{windowHeight}};position:absolute;margin-top:70rpx;top:120rpx;bottom:0;rigth:0;left:26%;width:73%;margin-bottom:100rpx;">
                 <view class="null" style="width:100%;height:1px;"></view>
                 <!-- goodslist -->
                     <view class="choice_list" style="height:{{msgStatus != true?'100%':''}}">
@@ -20,7 +20,7 @@ page{height: 100%; background: #fff;}
 }
 .active{
     color:#F65959;
-    border-bottom: 4rpx solid #F65959;
+    /* border-bottom: 4rpx solid #F65959; */
 }
 swiper{
   text-align: center;
@@ -223,7 +223,7 @@ overflow-y: scroll;
 .share_type{
   margin: auto;
   width: 58%;
-  margin-top: 40rpx;
+  /* margin-top: 40rpx; */
 }
 .xc-letter-spacing{
 padding-left: 20rpx;
@@ -231,10 +231,19 @@ padding-right: 29rpx;
 width: 58%;
 margin: auto;
 margin-top: 40rpx;
-margin-left:28rpx; 
-
+margin-left:28rpx;
+}
  
+/* 左边菜单点击样式 20200601 luca */
+.is_show_class{
+width: 100%;
+background-color: white;
+height: 50rpx;
+line-height: 50rpx;
+color:black;
+font-weight: 700;
 }
+
 .world_sn{
 white-space: nowrap;
 overflow: hidden;
@@ -243,25 +252,28 @@ width: 58%;
 margin: auto;
 margin-top: 35rpx;
 }
-.select_classify{
-  /* 20200530 update */
-/* background: #d60021; */
-background:white;
-/* border-radius: 30rpx; */
-/* color: #fff; */
-color:black;
+/* .select_classify{ */
+  /* 20200530 update 转用.is_show_class*/
+/* background: #d60021;
+border-radius: 30rpx;
+color: #fff;
 height: 48rpx;
-line-height: 45rpx;
-font-weight:700;
+line-height: 45rpx; */
+/* font-weight:700; */
  
-}
-.select_classify.width80{
+/* } */
+/* .select_classify.width80{ */
   /* 20200530updata */
   /* width: 74.5%; */
-  width: 100%;
-  height: 100rpx;
-  line-height: 100rpx;
+  /* height: 100rpx;
+  line-height: 100rpx; */
+/* } */
+.class_set_height{
+  height: 50rpx;
+  line-height: 50rpx;
+  padding: 20rpx 0;
 }
+
  .select_classify.width80.text-indent{
  text-indent: 38rpx;
  padding-right: 20px;
@@ -412,5 +424,45 @@ margin: auto;
  
 .brand_img_name {color: #666;}
  
+
+.tab-view {
+  /* height: 100%; */
+  width: 200rpx;
+  /* position: fixed;
+  left: 0;
+  top: 92rpx;
+  z-index: 10; */
+}
+
+.tab-bar-item {
+  width: 200rpx;
+  height: 110rpx;
+  /* background: #f6f6f6; */
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #444;
+  font-weight: 400;
+}
+
+.active {
+  position: relative;
+  color: #000;
+  font-size: 30rpx;
+  font-weight: 600;
+  background: #fcfcfc;
+}
+
+.active::before {
+  content: "";
+  position: absolute;
+  border-left: 8rpx solid #E41F19;
+  height: 50rpx;
+  left: 0;
+}
+
+
 /* 风格三商品列表样式引入 */
 @import "../goodsList/goodsList.wxss";
 \ No newline at end of file