分类列表、商品列表样式调整

taiyuan
1 parent dce67cb7
Showing 4 changed files with 146 additions and 90 deletions
pages/goods/categoryList/categoryList.wxml
pages/goods/categoryList/categoryList.wxss
pages/goods/goodsList/goodsList.wxml
pages/goods/goodsList/goodsList.wxss
@@ -90,55 +90,60 @@
    <view class="no-data" wx:if="{{!is_date}}">
       <image class="cart-image" src="{{iurl}}/miniapp/images/cart-null.png"></image>
       <view class="no-data-title">暂无分类</view>
-      <navigator class="lookat"  url="/pages/index/index/index"> 去逛逛 </navigator>
+      <navigator class="lookat" url="/pages/index/index/index">去逛逛</navigator>
    </view>
   </block>
   <block wx:elif="{{is_do}}">
     <view class="no-data" >
       <image class="cart-image" src="{{iurl}}/miniapp/images/cart-null.png"></image>
       <view class="no-data-title">商家暂未设置分类</view>
-      <navigator class="lookat"  url="/pages/index/index/index"> 去逛逛 </navigator>
+      <navigator class="lookat" url="/pages/index/index/index">去逛逛</navigator>
    </view>
   </block>
 </block>
 <!-- 风格2 -->
 <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" style="position:fixed;top:0;z-index:99">
-                <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">
-                 扫一扫
-                </view>
-                </view>
-                <view class="xc-search-inner ">
-									<view class="search-img left">
-										<image class="wh100" src="{{iurl}}/miniapp/images/search.png"></image>
-									</view>
-									<input bindfocus="goseach" class="search-cont" placeholder="请输入您所搜索的商品" type="text"></input>
-                </view>
-        </view>
+			<!-- 新版分类头部 -->
+			<view class="xc-search-box flex jc_sb ai-center" style="position:fixed;top:0;z-index:99">
+				<!-- <view class="xc-search-inner ">
+					<view class="search-img left">
+						<image class="wh100" src="{{iurl}}/miniapp/images/search.png"></image>
+					</view>
+					<input bindfocus="goseach" class="search-cont" placeholder="搜索店铺商品" type="text"></input>
+				</view> -->
+				<!-- 搜索框 -->
+				<view class="search-container f1">
+					<view bindtap="goseach"><text class="iconfont icon-sousuo pdr10"></text>搜索店铺商品</view>
+				</view>
+				<view class="pdl30" bindtap="getScancode" >
+					<image class="scanning_black-img"src="{{iurl}}/miniapp/images/goodscategory/scanning_black.png"></image>
+				<!-- <view class="fs24">扫一扫</view> -->
+				</view>
+				
+		</view>
           <!-- 分类项目内容  22 -->
-          <view class="flex project_height" style="height:100%;box-sizing:border-box;padding-bottom:100rpx;padding-top:120rpx;"  id="two_type">
+          <view class="flex project_height" style="height:100%;box-sizing:border-box;padding-bottom:100rpx;padding-top:108rpx;"  id="two_type">
                <!-- 分类项目的类型 -->
-           <view class="project_type" style="background-color:#eee;<!-- height:88%; -->overflow-y:auto;position:fixed;left:0;z-index:99;top:120rpx;">
+           <view class="project_type" style="background-color:#f4f4f4;overflow-y:auto;position:fixed;left:0;z-index:99;top:108rpx;">
            <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  bindtap="click_classify"  style="{{status_show == 1?'margin-top:0':'margin-top:40rpx'}}" class="fs30  {{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  class="tab-bar-item sort-name ellipsis-1" style="letter-spacing:50rpx;">国家</view> -->
+              <view  class="tab-bar-item sort-name ellipsis-1" style="">国家</view>
               </view>
               </view>
               <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 bindtap="click_classify" class="{{select_classify_on==220?'select_classify':''}} fs30" wx:if="{{is_brand}}"data-index="220"data-name="品牌">
-              <view  class="tab-bar-item sort-name ellipsis-1" style="letter-spacing:50rpx;">品牌</view>
+							<!-- <view  class="tab-bar-item sort-name ellipsis-1" style="letter-spacing:50rpx;">品牌</view> -->
+              <view  class="tab-bar-item sort-name ellipsis-1" style="">品牌</view>
               </view>
               </view>
               <view wx:if="{{is_show_pl}}">
@@ -210,11 +215,11 @@
         <block  wx:if="{{is_show_pl}}">
         <block wx:if="{{select_classify_on!=220&&select_classify_on!=223&&is_level_three!=1}}">
              <view class="my-container">
-                 <view class="classify_name fs28 flex-space-between"data-pid="0"data-cid="{{cat_id}}" bindtap='select_more'>
+                 <view class="classify_name fs28 flex-space-between ai-center"data-pid="0"data-cid="{{cat_id}}" bindtap='select_more'>
             <view class="classify_title ellipsis-1">{{classify_name}}</view>
-              <view class="flex select_more" >
+              <view class="flex select_more ai-center" >
                 <view class="red-co fs24" >更多</view>
-                <view class="bg_right width_height"></view>
+                <view class="bg_right width_height" style="margin-top: 0;"></view>
               </view>
             </view>
              <!-- 显示2级列表 -->
@@ -223,7 +228,7 @@
                      <block  wx:for="{{goodslist}}" wx:for-item="goods" wx:for-index="indx">
                         <view  class="type_img_frame t-c ib" data-cid="{{goods.items.id}}" data-pid="{{goods.items.parent_id}}" bindtap="go_cate">
                           <image class=" type_img" src="{{goods.items.icoimg==null||goods.items.icoimg==''?iurl+'/miniapp/images/no_cate_def.png':goods.items.icoimg}}"binderror="goods_bnerr" data-err="goodslist[{{index}}].logo"></image>
-                            <view class="brand_img_name fs24 ellipsis-1">{{goods.items.name}}</view>
+                            <view class="brand_img_name fs24 ellipsis-1 pdh10">{{goods.items.name}}</view>
                         </view>
                      </block>
                  </block>
@@ -240,12 +245,12 @@
         <block wx:for="{{goodslist}}"wx:for-item="goods"wx:for-index="inds">
         <view>
-        <view class="classify_name fs28 flex-space-between"data-pid="{{goods.items.parent_id}}" data-cid="{{goods.items.id}}" bindtap='select_more'>
+        <view class="classify_name fs28 flex-space-between ai-center"data-pid="{{goods.items.parent_id}}" data-cid="{{goods.items.id}}" bindtap='select_more'>
         <view class="classify_title ellipsis-1">{{goods.items.name}}</view>
-        <view class="flex select_more" >
+        <view class="flex select_more ai-center" >
           <view class="red-co fs24" >更多</view>
-                    <view class="bg_right width_height"></view>
+                    <view class="bg_right width_height" style="margin-top: 0;"></view>
         </view>
         </view>
@@ -253,10 +258,10 @@
         <view class="classify_content-frame  flex-wrap">
           <view  class="type_img_frame t-c ib" data-cid="{{item.id}}" data-pid="three"  wx:for="{{goods.arrays}}" wx:for-index="index" wx:for-item="item" bindtap="go_cate">
              <image class=" type_img"src="{{item.icoimg==null||item.icoimg==''?iurl+'/miniapp/images/no_cate_def.png':item.icoimg}}"binderror="goods_bnerr" data-err="goodslist[{{index}}].logo"></image>
-           <view class="brand_img_name fs24 ellipsis-1">{{item.name}}</view>
+           <view class="brand_img_name fs24 ellipsis-1 pdh10">{{item.name}}</view>
           </view>
         </view>
-        <view class="divider_line"></view>
+        <!-- <view class="divider_line"></view> -->
         </block>
         </view>
@@ -270,7 +275,7 @@
         <view class="no-data" >
             <image class="cart-image" src="{{iurl}}/miniapp/images/cart-null.png"></image>
             <view class="no-data-title">商家暂未设置分类</view>
-            <navigator class="lookat"  url="/pages/index/index/index"> 去逛逛 </navigator>
+            <navigator class="lookat"  url="/pages/index/index/index">去逛逛</navigator>
         </view>
     </block>
@@ -280,7 +285,7 @@
     <block wx:if="{{is_show_pl || is_show_gb || is_show_pp }}">
       <!-- 头部 -->
       <view class="xc-search-box flex-center white_b" id="navbar" style="position:fixed;top:0;z-index:99">
-            <view class="share-height t-c" bindtap="getScancode" >
+            <!-- <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">
               扫一扫
@@ -291,23 +296,32 @@
                     <image class="wh100" src="{{iurl}}/miniapp/images/search.png"></image>
                 </view>
                 <input bindfocus="goseach" class="search-cont" placeholder="请输入您所搜索的商品" type="text"></input>
-            </view>
+            </view> -->
+						
+						<!-- 搜索框 -->
+						<view class="search-container f1">
+							<view bindtap="goseach"><text class="iconfont icon-sousuo pdr10"></text>搜索店铺商品</view>
+						</view>
+						<view class="pdl30" bindtap="getScancode" >
+							<image class="scanning_black-img"src="{{iurl}}/miniapp/images/goodscategory/scanning_black.png"></image>
+						<!-- <view class="fs24">扫一扫</view> -->
+						</view>
       </view>
       <!-- /头部 -->
           <!-- 分类项目内容 -->
-          <view class="flex project_height" style="margin-left:-10rpx;">
+          <view class="flex project_height" style="">
             <!-- 分类项目的类型 -->
-            <view class="project_type" style="background-color:#eee;height:88%;overflow-y:auto;position:fixed;left:0;z-index:99;top:120rpx;" id="thress_type3">
+            <view class="project_type" style="background-color:#f4f4f4;overflow-y:auto;position:fixed;left:0;z-index:99;top:108rpx;" 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 style="letter-spacing:50rpx;">国家</text>
+                    <text style="">国家</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 style="letter-spacing:50rpx;">品牌</text>
+                    <text style="">品牌</text>
                    </view>
                 </view>
                 <view wx:if="{{is_show_pl}}">
@@ -345,7 +359,7 @@
             </view>
              </view>
             <!-- 分类项目的内容 -->
-            <view class="classify_content" style="margin-left:27%;margin-top:120rpx">
+            <view class="classify_content" style="padding-left:26%;padding-top:108rpx;box-sizing: border-box;">
         <!-- 国家的样式 -->
         <block wx:if="{{select_classify_on==223&&is_show_gb}}">
         <view class="classify_name fs28 flex-space-between">
@@ -394,19 +408,19 @@
         <!-- 品类-->
         <block  wx:if="{{is_show_pl}}">
           <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 style="width:100%;height:100%;position: relative;">
+                <view class="classify_name fs28 flex ai-center flex-space-between" id="header" data-pid="0" data-cid="{{cat_id}}" bindtap='select_more' style="box-sizing:border-box;position:fixed;z-index: 999;width:74%;background-color:#ffffff;padding:0 20rpx;">
                   <view class="classify_title ellipsis-1">{{classify_name}}</view>
-                  <view class="flex select_more" >
+                  <view class="flex select_more ai-center" >
                     <view class="red-co fs24" >更多</view>
-                    <view class="bg_right width_height"></view>
+                    <view class="bg_right width_height" style="margin-top: 0;"></view>
                   </view>
                 </view>
                 <!-- 显示商品列表开始 -->
                 <!-- <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:140rpx;bottom:0;rigth:0;left:26%;width:73%;">
+                <scroll-view scroll-y scroll-top="{{scrollTop}}" bindscrolltolower='scrollLower' style="height:{{windowHeight}};position:absolute;margin-top:70rpx;top:0;bottom:0;left:0;width:100%;">
                 <view class="null" style="width:100%;height:1px;"></view>
                 <!-- goodslist -->
                     <view class="choice_list" style="height:{{msgStatus != true?'100%':''}}">
@@ -560,7 +574,7 @@
         <view class="no-data" >
             <image class="cart-image" src="{{iurl}}/miniapp/images/cart-null.png"></image>
             <view class="no-data-title">商家暂未设置分类</view>
-            <navigator class="lookat"  url="/pages/index/index/index"> 去逛逛 </navigator>
+            <navigator class="lookat"  url="/pages/index/index/index">去逛逛</navigator>
         </view>
     </block>
 </block>
@@ -47,6 +47,14 @@ swiper{
     border-radius: 50%;
     overflow: hidden;
 }
+.search-container {
+	color: #bbb;
+	font-size: 26rpx;
+	border-radius: 40rpx;
+	padding: 16rpx;
+	background-color: #f4f4f4;
+}
+
 .search-inner {
     display: flex;
@@ -176,25 +184,27 @@ line-height: 50rpx;
 /* 商品分类新的版本 */
 /* 分享样式*/
 .xc-search-box {
-    width: 100%;
-    height: 120rpx;
-    z-index: 10;
-		background: #fff;
-    /* border-top: 4rpx solid #eee; */
-    border-bottom: 1rpx solid #eee;
-
+	box-sizing: border-box;
+	width: 100%;
+	/* height: 120rpx; */
+	z-index: 10;
+	background: #fff;
+	/* border-top: 4rpx solid #eee; */
+	border-bottom: 1rpx solid #f4f4f4;
+	padding: 20rpx;
 }
 .share-height{
-  line-height: 20rpx;
+  /* line-height: 20rpx;
 margin-right: 15rpx;
-margin-top: 8rpx;
+margin-top: 8rpx; */
 }
-.scanning_black-img{
+.scanning_black-img {
+	display: block;
   width:50rpx;
-  height: 45rpx;
-  margin-bottom: 5rpx;
+  height: 50rpx;
+  /* margin-bottom: 5rpx; */
 }
 .search-img.left{
@@ -219,7 +229,7 @@ margin-top: 8rpx;
   width: 26%;
   height: 100%;
 	padding-bottom: 100rpx;
-  border-right: 1rpx solid #eee;
+  /* border-right: 1rpx solid #eee; */
   white-space: nowrap;
 	overflow: hidden;
 	overflow-y: scroll;
@@ -298,20 +308,20 @@ width: 60%;
    /* width: 90%;
    margin: auto; */
    height: 70rpx;
-   border-bottom: 1rpx solid #f5f6f6;
+   /* border-bottom: 1rpx solid #f5f6f6; */
    line-height: 70rpx;
    font-weight: 600;
    padding-left: 20rpx;
 	 padding-right: 20rpx;
  }
  .classify_content{
-   width: 100%
-   
+   width: 100%;
+	 box-sizing: border-box;
  }
 	.classify_content-frame{
 		box-sizing: border-box;
 		width: 100%;
-		padding: 0 20rpx;
+		padding: 0 12rpx;
 		flex-wrap:wrap;
 		overflow-y:scroll;
 	}
@@ -376,6 +386,7 @@ line-height: 65rpx;
  }
   .type_img_frame {
+		box-sizing: border-box;
    width: calc(100% / 3);
    height: 140rpx;
    margin-top: 20rpx;
@@ -386,8 +397,8 @@ line-height: 65rpx;
  .type_img{
-   width:80rpx;
-   height:80rpx;
+   width: 110rpx;
+   height: 110rpx;
    margin-bottom: 10rpx;
    margin-top: 10rpx;
@@ -408,9 +419,9 @@ width: 62%;
    margin-top:12rpx;
  }
  .select_more{
-line-height: 37rpx;
+/* line-height: 37rpx; */
 height: 35rpx;
-margin-top: 24rpx;
+/* margin-top: 24rpx; */
  }
  .divider_line{
    width: 100%;
@@ -431,7 +442,10 @@ margin: auto;
   /* width: 80%; */
 }
-.brand_img_name {color: #666;}
+.brand_img_name {
+	/* box-sizing: border-box; */
+	color: #8a8a8a;
+}
 .tab-view {
@@ -449,16 +463,16 @@ margin: auto;
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: left;
-  font-size: 30rpx;
-  padding-left: 30rpx;
-  color: #444;
-  font-weight: 400;
+  justify-content: center;
+  font-size: 28rpx;
+  padding: 0 20rpx;
+  color: #080808;
+  /* font-weight: 400; */
 } 
 #thress_type3 .active {
   position: relative;
-  color: #000;
+  color: #e83028;
   font-size: 30rpx;
   font-weight: 600;
   background: #fff;
@@ -467,9 +481,12 @@ margin: auto;
 #thress_type3 .active::before {
   content: "";
   position: absolute;
-  border-left: 8rpx solid #E41F19;
-  height: 50rpx;
+  border-left: 8rpx solid #e83028;
+	border-radius: 8rpx;
+  height: 40rpx;
   left: 0;
+	top: 50%;
+	transform: translateY(-50%);
 } 
@@ -483,11 +500,11 @@ margin: auto;
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: left;
-  font-size: 30rpx;
-  padding-left: 30rpx;
-  color: #444;
-  font-weight: 400;
+  justify-content: center;
+  font-size: 28rpx;
+  padding: 0 20rpx;
+  color: #080808;
+  /* font-weight: 600; */
 } 
 #two_type .select_classify {
   position: relative;
@@ -500,13 +517,18 @@ margin: auto;
 #two_type .select_classify::before {
   content: "";
   position: absolute;
-  border-left: 8rpx solid #E41F19;
-  height: 50rpx;
+  border-left: 8rpx solid #e83028;
+	border-radius: 8rpx;
+  height: 40rpx;
   left: 0;
   top:50%;
 	transform: translateY(-50%);
 } 
+#two_type .select_classify .tab-bar-item {
+	color: #e83028;
+}
+
 #two_type .is_show_class{
@@ -518,7 +540,7 @@ margin: auto;
   }
-	
+	.classify_content > view:last-of-type,
 	.classify_content > view:last-of-type .classify_content-frame {
 		padding-bottom: 100rpx;
 	}
@@ -293,8 +293,8 @@
     <view class="no-data" wx:if="{{(!requestData||requestData.length==0) && is_go}}">
       <image class="cart-image" src="{{iurl}}/miniapp/images/cart-null.png"></image>
-      <view class="no-data-title">没有相关的数据</view>
-      <navigator class="lookat"  url="/pages/index/index/index"> 去逛逛 </navigator>
+      <view class="no-data-title">暂无相关商品</view>
+      <navigator class="lookat" url="/pages/index/index/index">回到首页</navigator>
     </view>
   </view>
   <view hidden="{{!openFilterModal}}">
@@ -59,11 +59,11 @@ page {
 .search-box {
 	color: #BEBEBE;
-	font-size: 24rpx;
+	font-size: 26rpx;
 	/* border: 2rpx solid #f23030; */
 	border-radius: 40rpx;
 	padding: 16rpx;
-	background-color: #e0e0e0;
+	background-color: #e8e8e8;
 }
 .icon-sousuo {
@@ -266,7 +266,7 @@ page {
 .choice_list.on {
 	display: flex;
 	flex-wrap: wrap;
-	padding-bottom: 12rpx;
+	padding-bottom: 16rpx;
 	padding-left: 16rpx;
 	padding-right: 16rpx;
 	background-color: #f0f0f0;
@@ -293,7 +293,7 @@ page {
 }
 .choice_list.on .item-cont {
-	padding: 10rpx;
+	padding: 10rpx 14rpx;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -303,3 +303,23 @@ page {
 .choice_list.on .item-cont .flex.on {
 	display: block;
 }
+
+.no-data .cart-image {
+	width: 208rpx;
+	height: 202rpx;
+}
+
+.no-data .no-data-title {
+	font-size: 28rpx;
+	color: #b8b8b8;
+	margin-bottom: 50rpx;
+}
+
+.no-data .lookat {
+	display: inline-block;
+	font-size: 28rpx;
+	border-radius: 10rpx;
+	background-color: #e83028;
+	color: white;
+	padding: 20rpx 50rpx;
+}