底部导航和分类样式调整

season
1 parent 38b6bdf1
Showing 4 changed files with 104 additions and 46 deletions
pages/goods/categoryList/categoryList.wxml
pages/goods/categoryList/categoryList.wxss
pages/tabbar/tabbar.wxml
pages/tabbar/tabbar.wxss
@@ -98,7 +98,7 @@
 <block wx:elif="{{is_used_share == 1}}">
     <block wx:if="{{is_show_pl || is_show_gb || is_show_pp }}">
           <!-- 新版分类头部 -->
-          <view class="xc-search-box flex-center white_b">
+          <view class="xc-search-box flex-center white_b" style="position:fixed;top:0;z-index:99999">
                 <view class="share-height t-c" bindtap="getScancode" >
                 <image class="scanning_black-img"src="{{iurl}}/miniapp/images/goodscategory/scanning_black.png"></image>
                 <view class="fs24">
@@ -113,22 +113,25 @@
                 </view>
         </view>
-          <!-- 分类项目内容 -->
-          <view class="flex project_height" style="margin-left:-10rpx;margin-bottom:120rpx">
+        
+          <!-- 分类项目内容  22 -->
+          <view class="flex project_height" style="margin-left:-10rpx;margin-bottom:120rpx"  id="two_type">
                <!-- 分类项目的类型 -->
-               <view class="project_type" style="background-color:#eee">
-           <view class="project_type-frame" style="margin-bottom:120rpx">
-           <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 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}}" class="{{status_show == 1?'':''}}">
+           <!-- <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="fs30 flex-space-between  {{select_classify_on==223?'select_classify':''}}"data-index="223"data-name="国家" wx:if="{{is_country}}">
+            
+              <view  class="tab-bar-item sort-name ellipsis-1" style="letter-spacing:50rpx;">国家</view>
               </view>
               </view>
-              <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 wx:if="{{is_show_pp}}" class="{{status_show == 2?'':''}}">
+              <!-- <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':''}}   fs30 flex-space-between " wx:if="{{is_brand}}"data-index="220"data-name="品牌">
+              
+              <view  class="tab-bar-item sort-name ellipsis-1" style="letter-spacing:50rpx;">品牌</view>
               </view>
               </view>
               <view wx:if="{{is_show_pl}}">
@@ -136,17 +139,10 @@
                 <view wx:for="{{one_level_classify}}" wx:for-item="ittms" >
                 <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>
-                 {{name}}
-                 </view>
-                 </view>
-
-                 </view>
-                   <view wx:else class="sort-name ellipsis-1">{{ittms.items.name}}</view>
+                 <!-- <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':''}}  fs30 t-c  {{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="tab-bar-item sort-name ellipsis-1">{{ittms.items.name}}</view>
                  </view>
               </view>
@@ -156,7 +152,7 @@
         </view>
                <!-- 分类项目的内容 -->
-                <view class="classify_content">
+                <view class="classify_content" style="margin-left:27%;margin-top:130rpx">
         <!-- 国家的样式 -->
         <block wx:if="{{select_classify_on==223&&is_show_gb}}">
         <view class="classify_name fs28 flex-space-between">
@@ -292,17 +288,17 @@
           <!-- 分类项目内容 -->
           <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:126rpx;">
+            <view class="project_type" style="background-color:#eee;height:88%;overflow-y:auto;position:fixed;left:0;z-index:999999;top:126rpx;" id="thress_type3">
               <view class="project_type-frame" style="margin-bottom:120rpx;">
                 <view wx:if="{{is_show_gb}}">
                   <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>
+                    <text style="letter-spacing:50rpx;">国家</text>
                   </view>
                 </view>
                 <view wx:if="{{is_show_pp}}">
                   <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>
+                    <text style="letter-spacing:50rpx;">品牌</text>
                    </view>
                 </view>
                 <view wx:if="{{is_show_pl}}">
@@ -400,7 +396,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:100rpx;">
+                <scroll-view scroll-y scroll-top="{{scrollTop}}" bindscrolltolower='scrollLower' style="height:{{windowHeight}};position:absolute;margin-top:70rpx;top:140rpx;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%':''}}">
@@ -234,6 +234,16 @@ margin-top: 40rpx;
 margin-left:28rpx;
 }
+
+#two_type .xc-letter-spacing{
+  padding-left: 20rpx;
+  padding-right: 29rpx;
+  width: 58%;
+  margin: auto;
+  margin-top: 40rpx;
+  margin-left:28rpx;
+  }
+
 /* 左边菜单点击样式 20200601 luca */
 .is_show_class{
 width: 100%;
@@ -434,35 +444,79 @@ margin: auto;
   z-index: 10; */
 }
-.tab-bar-item {
+#thress_type3 .tab-bar-item {
   width: 200rpx;
   height: 110rpx;
-  /* background: #f6f6f6; */
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 26rpx;
+  justify-content: left;
+  font-size: 30rpx;
+  padding-left: 30rpx;
   color: #444;
   font-weight: 400;
-}
+} 
-.active {
+#thress_type3 .active {
   position: relative;
   color: #000;
   font-size: 30rpx;
   font-weight: 600;
-  background: #fcfcfc;
-}
+  background: #fff;
+} 
-.active::before {
+#thress_type3 .active::before {
   content: "";
   position: absolute;
   border-left: 8rpx solid #E41F19;
   height: 50rpx;
   left: 0;
-}
+} 
+
+
+
+
+
+
+#two_type .tab-bar-item {
+  width: 200rpx;
+  height: 110rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 30rpx;
+  padding-left: 30rpx;
+  color: #444;
+  font-weight: 400;
+} 
+#two_type .select_classify {
+  position: relative;
+  color: #000;
+  font-size: 30rpx;
+  font-weight: 600;
+  background: #fff;
+} 
+
+#two_type .select_classify::before {
+  content: "";
+  position: absolute;
+  border-left: 8rpx solid #E41F19;
+  height: 50rpx;
+  left: 0;
+  top:26rpx;
+} 
+
+
+
+#two_type .is_show_class{
+  width: 100%;
+  background-color: white;
+  color:black;
+  font-weight: 700;
+  height: 110rpx;
+  }
 /* 风格三商品列表样式引入 */
 @import "../goodsList/goodsList.wxss";
 \ No newline at end of file
 <!--pages/tabbar.wxml-->
   <template name="tabBar">
     <!-- 如果是自定义的话 -->
-    <view hidden="{{tabBar.iscustom=='2'}}" class="tab-bar" style="width:100%;height:{{tabBar.isIpx ? '168rpx' : '100rpx'}};position:fixed;color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; bottom: 0;z-index:9999999;padding:2px 0;">
+    <view hidden="{{tabBar.iscustom=='2'}}" class="tab-bar" style="width:100%;height:{{tabBar.isIpx ? '168rpx' : '100rpx'}};position:fixed;color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; bottom: 0;z-index:9999999;">
       <block wx:for="{{tabBar.list}}" wx:key="weappurl">
        <block wx:if="{{!item.active}}">
-            <navigator url="{{item.weappurl}}" open-type="redirect"  class="tabbar_item {{item.clas}}" style="position:relative;width:{{100 / tabBar.length}}%;height:100%;float:left;text-align:center;padding:2px 0;">
-                <view wx:if="{{item.nav_name=='购物车'}}" style="background-color: red;color: #fff;font-size: 20rpx;border-radius: 40rpx;width: 50rpx;height: 30rpx;padding: 5rpx;position: absolute;z-index: 100;right: 0">
+            <navigator url="{{item.weappurl}}" open-type="redirect"  class="tabbar_item {{item.clas}}" style="position:relative;width:{{100 / tabBar.length}}%;height:100%;float:left;text-align:center;padding:5px 0;">
+                <view wx:if="{{item.nav_name=='购物车'}}"  class="menu_red">
                     {{tabBar.cartGoodsNum}}
                 </view>
               <view style="width:35%;height:30px;margin-left:33%;">
@@ -16,8 +16,8 @@
             </navigator>
        </block>
        <block wx:else>
-           <view  class="tabbar_item {{item.clas}}" style="color: {{item.selectedColor? item.selectedColor :tabBar.selectedColor}};position:relative;width:{{100 / tabBar.length}}%;height:100%;float:left;text-align:center;padding:2px 0;">
-               <view wx:if="{{item.nav_name=='购物车'}}" style="background-color: red;color: #fff;font-size: 20rpx;border-radius: 40rpx;width: 50rpx;height: 30rpx;padding: 5rpx;position: absolute;z-index: 100;right:0">
+           <view  class="tabbar_item {{item.clas}}" style="color: {{item.selectedColor? item.selectedColor :tabBar.selectedColor}};position:relative;width:{{100 / tabBar.length}}%;height:100%;float:left;text-align:center;padding:5px 0;">
+               <view wx:if="{{item.nav_name=='购物车'}}"  class="menu_red">
                    {{tabBar.cartGoodsNum}}
                </view>
                <view style="width:35%;height:30px;margin-left:33%;">
@@ -81,7 +81,7 @@
     <!-- 3 -->
     <block wx:if="{{tabBar.active!='/pages/cart/cart/cart'}}">
         <navigator url="/pages/cart/cart/cart" open-type="redirect" class="tabbar_item {{tabBar.clas}}" style="position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-          <view style="background-color: red;color: #fff;font-size: 20rpx;border-radius: 40rpx;width: 50rpx;height: 30rpx;padding: 5rpx;position: fixed;z-index: 100;left:63%">
+          <view class="menu_default_red">
           {{tabBar.cartGoodsNum}}
           </view><view style="width:30%;height:57rpx;margin-left:35%;">
               <image src="{{tabBar.url}}/miniapp/images/bar/car.png"  class="img" style="width:100%;height:100%"></image>
@@ -91,7 +91,7 @@
      </block>
      <block wx:else>
           <view class="tabbar_item {{tabBar.clas}}" style="color:  #f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-             <view style="background-color: red;color: #fff;font-size: 20rpx;border-radius: 40rpx;width: 50rpx;height: 30rpx;padding: 5rpx;position: fixed;z-index: 100;left:63%">
+             <view class="menu_default_red">
                     {{tabBar.cartGoodsNum}}
              </view><view style="width:30%;height:57rpx;margin-left:35%;">
                     <image src="{{tabBar.url}}/miniapp/images/bar/car_on.png"  class="img" style="width:100%;height:100%"></image>
+.menu_red{
+
+  top:0;background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;line-height:40rpx;height: 40rpx;position: absolute;z-index: 100;right:30rpx;
+}
+
+.menu_default_red{
+  background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;height: 40rpx;line-heith:40rpx;position: fixed;z-index: 100;left:63%
+}
 \ No newline at end of file