调整样式

App.vue

@@ -65,13 +65,13 @@ export default {
 <style lang="scss">
 @keyframes loading {
   0%{
-    background: #e7e7e7;
+    background: #FAFAFA;;
   }
   50%{
     background: #f8f8f8;
   }
   100%{
-    background: #e7e7e7;
+    background: #FAFAFA;
   }
 }
 // 自定义骨架屏

components/canvasShow/basics/classifyHeader/app/index.vue

@@ -15,13 +15,21 @@
 	<div class="hom-pro-list" v-if="productData.length>0">
 	    <div class="product-swiper">
 	      <div class="product-swiper-box">
-	        <div class="product-swiper-warp" v-for="(item,index) in productData.slice(0, 3)" :key="index">
+	        <div class="product-swiper-warp" v-for="(item,index) in productData" :key="index">
 	          <div class=" product-swiper-item" @click="jumpProductDetail(item)">
 	            <div class="product-swiper-img">
 	              <img class="img pic-img default-img" :src="item.image" onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
 	            </div>
 	            <div class="product-swiper-info">
+					<div class="product-info-content">
+						<div class="product-name-row">
 					  <label class="product-name">{{item.productName}}</label>
+						<image class="product-star" src="https://wechat.hnthee.com/ceres-local-file/image/icon_star.png"></image>
+					  <label class="product-star-text">3.5</label>
+					  </div>
+					  <div class="product-sku-row">
+						  </div>
+						  <div class="product-price-row">
 					  <div class="price-warp">
 						<!-- #ifdef MP-WEIXIN -->
 						<img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
@@ -52,6 +60,8 @@
 				  </div>
 	            </div>
 	          </div>
+	        </div>
+	      </div>
 	      <div class="pagination new-pagination"></div>
 	    </div>
 	    <button v-show="componentContent.showMore" class="btn-more" @click="jumpProList(componentContent.productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
@@ -157,12 +167,9 @@ export default {
     }
     /**横向滑动**/
     .product-swiper{
-      width: 100%;
       height: auto;
-      padding: 5upx 34upx 0;
-      background-size: 710upx 454upx;
-      box-sizing: border-box;
-      position: relative;
+	  overflow: hidden;
+	  margin: 5upx 34upx;
       
 	  &+.btn-more{
         margin-top: 20upx;
@@ -177,32 +184,38 @@ export default {
         }
       }
       &-box {
-        padding-bottom: 20upx;
+		  margin-top: 18upx;
+		  margin-bottom: 18upx;
+		  margin-left: 18upx;
+		  margin-right: 18upx;
+        height: 100%;
+		width: 100%;
         display: flex;
       }
       &-warp{
-        padding: 0 5upx;
+		height: 540upx;
+		width: 386upx !important;
+		margin-left: 18upx;
+		margin-right: 18upx;
       }
       &-item {
-        width: 220upx;
+        height: 540upx;
+        width: 386upx !important;
         position: relative;
-        background-color: #FFFFFF;
       }
+	  
       &-img {
-        width: 220upx;
-        height: 220upx;
+		  width: 286upx;
+		  height: 306upx;
+		  margin-left: auto;
+		  margin-right: auto;	
+		  background: #F6F6F8;
+		  border: 2upx solid #FFFFFF;
+		  border-radius: 30upx;
 			position: relative;
-        &:after{
-          content: '';
-          display: block;
-          width: 54upx;
-          height: 54upx;
-          background: url("../../../static/images/newProduct/flag-new.png") no-repeat;
-          background-size: 100% 100%;
-          position: absolute;
-          top: 0;
-          left: 0;
-        }
+			padding: 20upx;
+			z-index: 2;
+        
         .img {
           width: 100%;
           height: 100%;
@@ -210,19 +223,74 @@ export default {
         }
       }
       &-info {
-        background-color: #FFFFFF;
-        padding: 10upx;
+       width: 386upx;
+       height: 430upx;
+	      position: absolute;
+	      top: 110upx;
+       background: #FDFDFD;
+       box-shadow: 0upx 15upx 30upx 0upx #F6F6F6;
+       border-radius: 30upx;
        text-align: center;
+	   
+	   .product-info-content {
+		   margin-top: 270upx;
+		   
+		   .product-name-row{
+			   width: 100%;
+			   height: 33upx;
+			   line-height: 33upx;
+			   display: flex;
+			       flex-direction: row;
+			       flex-wrap: nowrap;
+			       align-content: center;
+			       justify-content: flex-start;
+			       align-items: center;
+			   
 			   .product-name{
-          font-size: 20upx;
-          color: #333;
+			   			width: 100%;
+			   			height: auto;
+			   			font-size: 28upx;
+			   			font-family: Source Han Sans CN;
+			   			font-weight: bold;
+			   			color: #252744;
+			   			
 			       display: block;
 			       overflow: hidden;
 			       text-overflow:ellipsis;
 			       white-space: nowrap;
-          margin-bottom: 6upx;
 			       line-height: 28upx;
+				   margin-left: 30upx;
+				   text-align: left;
+			     }
+					 
+				 .product-star{
+					 width: 33upx;
+					 height: 33upx;
+				 }
+				 
+				 .product-star-text{
+					 width: auto;
+					 height: 28upx;
+					 line-height: 28upx;
+					 font-size: 20rpx;
+					 font-family: Source Han Sans CN;
+					 font-weight: bold;
+					 color: #A5A5AD;
+					 margin-right: 30upx;
+					 margin-left: 5upx;
 				 }
+			}
+			.product-sku-row{
+				 width: 100%;
+				 height: 28upx;
+				 line-height: 28upx;
+				 margin-top: 15upx;
+			}
+			.product-price-row{
+				 width: 100%;
+				 height: 76upx;
+				 line-height: 76upx;
+				 
 				.price-warp{
 				  display: flex;
 				  justify-content: center;
@@ -245,6 +313,11 @@ export default {
 				  }
 				}
 			}
+		   
+		     
+		   }
+		}
+        
     }
   }
   

components/canvasShow/canvasShowPage.vue

@@ -215,7 +215,7 @@ export default {
 <style lang="scss"
        scoped>
 .hom-layout {
-  background-color: #ffffff;
+ 
   width: 100%;
   overflow: hidden;
 }

pages/tabbar/index/index.vue

@@ -199,8 +199,11 @@ export default {
     lang="scss"
     scoped
 >
+.home_page_content{
+	background: #FAFAFA;
+}
 .header {
-  background: #fff;
+  background: #FAFAFA;
 
   .toLive {
     height: 40px;