view-title公共组件添加

+Component({
+    properties: {
+        title: {
+            type: String,
+            value: '默认标题'
+        },
+        height: {
+            type: String,
+            value: 100,
+            observer: '_setHeight'
+        }
+    },
+    data: {
+        style: ''
+    },
+    methods: {
+        _setHeight: function(val) {
+            this.setData({
+                style: `height: ${val}rpx;line-height: ${val}rpx;`
+            });
+        }
+    }
+});

+{
+    "component": true
+}

+<view class="view-title" style="{{style}}">
+    <span class="title-text">{{title}}</span>
+</view>
+

+
+.view-title {
+    font-size: 0;
+    height: 88rpx;
+    line-height: 88rpx;
+    text-align: center;
+}
+
+.view-title .title-text {
+    position: relative;
+    font-family: PingFang-SC-Semibold;
+    font-size: 28rpx;
+    color: #222;
+    letter-spacing: -0.34px;
+}
+
+.view-title .title-text:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -40rpx;
+    display: inline-block;
+    margin-top: -2rpx;
+    height: 4rpx;
+    width: 20rpx;
+    background-color: #222;
+}
+
+.view-title .title-text:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -40rpx;
+    margin-top: -2rpx;
+    display: inline-block;
+    height: 4rpx;
+    width: 20rpx;
+    background-color: #222;
+}
\ No newline at end of file

+Component({
+    properties: {
+        floorData: {
+            type: Object,
+            value: {}
+        }
+    }
+});

+{
+    "component": true
+}

+<view class="product-list-filter">
+    <ul class="filter-items">
+        <li class="item">默认</li>
+        <li class="item">新品</li>
+        <li class="item">人气</li>
+        <li class="item">价格</li>
+        <li class="item">筛选</li>
+    </ul>
+</view>

+.resource-single-image {
+    font-size: 0;
+}
+
+.resource-single-image .single-image {
+    width: 100%;
+}

@@ -2,8 +2,10 @@
     "navigationBarTitleText": "红人小店",
     "enablePullDownRefresh": true,
     "usingComponents": {
-      "resources": "/components/resources/resources",
-      "copyright": "/components/copyright/copyright",
-      "quickNavigation": "/pages/quickNavigation/quickNavigation"
+        "resources": "/components/resources/resources",
+        "copyright": "/components/copyright/copyright",
+        "view-title": "/components/layout/view-title/view-title",
+        "quickNavigation": "/pages/quickNavigation/quickNavigation",
+        "product-list-filter": "/components/product-list-filter/product-list-filter"
     }
 }
\ No newline at end of file

 <view class="container">
-    <resources content-code="{{resource.home.top}}"></resources>
-    <view class='newtop'>
+    <view class='top-search'>
         <view class="search-section" bindtap="toSearch">
             <view class="tip">
             <span class="tip-text">潮流单品搜一下<image class="image-icon" src="./images/search@2x.png"></image>
@@ -8,9 +7,12 @@
             </view>
         </view>
     </view>
-    <view>
+    <resources content-code="{{resource.home.top}}"></resources>
+    <view class="recommend-product">
+        <view-title title="推荐商品" height="88"></view-title>
+        <product-list-filter></product-list-filter>
+        <div class="prd-list"></div>
     </view>
-    <view class='container_mask' bindtap='hiddenChannel' wx:if='{{channelSelect}}'></view>
     <view>
         <copyright></copyright>
     </view>

@@ -5,323 +5,13 @@
     background-color: white;
     display: flex;
     flex-direction: column;
+    padding-top: 110rpx;
 }
 .scrollview{
     background-color:white; 
 }
 
-.top {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: #3c3d3e;
-    padding-top: 30rpx;
-}
-
-.topIcon {
-    width: 240rpx;
-    height: 135rpx;
-}
-
-.serach {
-    margin-top: 30rpx;
-    margin-left: 35rpx;
-    margin-right: 35rpx;
-    margin-bottom: 30rpx;
-    background-color: white;
-    border-radius: 35rpx;
-    height: 70rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 90%;
-}
-
-.serachIcon {
-  width: 30rpx;
-  height: 30rpx;
-  margin-left: 20rpx;
-}
-
-.serach_view_show {
-    display: block;
-    color: #b0b0b0;
-    font-size: 30rpx;
-    font-family: PingFang SC;
-    padding-left: 10rpx;
-    font-weight: 500;
-    line-height: 2.57;
-    letter-spacing: 1.1px;
-    text-align: left;
-}
-
-.navigator {
-    background-color:white;
-    width:100%;
-    height:88rpx;
-    display:flex;
-    flex-direction:row;
-    justify-content: center;
-}
-
-.default {
-    line-height:88rpx;
-    text-align:center;
-    flex:1;
-    color:#b0b0b0;
-    font-size:30rpx;
-    width: 25%;
-}
-
-.navText {
-    padding-left: 10rpx;
-    padding-right: 10rpx;
-    padding-bottom: 18rpx;
-    color:#b0b0b0;
-    font-family: PingFang SC;
-}
-
-.navTextSelected {
-    font-size:36rpx;
-    font-weight:bold;
-    color:#444444;
-    border-bottom: 4rpx solid;
-}
-
-.sectionContainer {
-    position: relative;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-}
-
-.sectionLine {
-    background-color: #e0e0e0;
-    height: 3rpx;
-    width: 120rpx;
-    margin-left: 20rpx;
-    margin-right: 20rpx;
-}
-
-.sectionTitle {
-    line-height: 80rpx;
-    color: #444444;
-    text-align: center;
-    vertical-align: center;
-    font-family: PingFang SC;
-    font-size: 32rpx;
-    font-weight: bold;
-}
-
-.moreButtonContainer {
-    position: absolute;
-    right: 0rpx;
-    width: 100rpx;
-    height: 88rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.moreButton {
-    width: 44rpx;
-    height: 8rpx;
-}
-
-.brandContainer {
-    background-color: white;
-    width: 100%;
-    height: 250rpx;
-    white-space: nowrap;
-    padding-left: 8rpx;
-}
-
-.brandItem {
-    display: inline-block;
-    margin: 16rpx 8rpx 16rpx 8rpx; 
-}
-
-::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    color: transparent;
-}
-
-.brand {
-    white-space: wrap;
-    height: 220rpx;
-    width: 220rpx;
-}
-
-.brandImage {
-    width: 220rpx;
-    height: 220rpx;
-    border-radius: 10rpx;
-}
-
-.catgoryContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background-color: white;
-    border-top: 1rpx solid #dddddd;
-}
-
-.category {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-bottom: 1rpx solid #dddddd;
-}
-
-.categoryTitle {
-    margin-top: 15rpx;
-    margin-bottom: 15rpx;
-    line-height: 22rpx;
-    font-family: PingFang SC;
-    font-size: 22rpx;
-    color: rgb(68, 68, 68);
-}
-
-.categoryImage {
-    width: 100%;
-}
-
-.newArrivalContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background-color: white;
-}
-
-.likeContainer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background-color: white;
-}
-
-.like {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 20rpx;
-}
-
-.activities {
-    background-color: white;
-}
-
-.activity-container {
-
-}
-
-.activity-container-header {
-    width: 100%;
-    height: 324rpx;
-}
-
-.activity-banner {
-    width: 100%;
-    height: 100%;
-}
-
-.activity-container-footer {
-    white-space: nowrap;
-    background-color: white;
-}
-
-.activity-item {
-    width: 186rpx;
-    height: 296rpx;
-    display: inline-block;
-    margin-top: 30rpx;
-    margin-left: 32rpx;
-}
-
-.activity-item:last-child {
-    margin-right: 32rpx;    
-}
-
-.activity-item-img {
-    width: 100%;
-    height: 77%;
-}
-
-.activity-item-price {
-    width: 100%;
-    height: 23%;
-    text-align: center;
-    line-height: 50rpx;
-    color:#444444;
-    font-size: 24rpx;
-    font-family: PingFang SC;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-}
-
-.activities-footer {
-    height: 100rpx;
-    width: 100%;
-    line-height: 100rpx;
-    text-align: center;
-    font-family: PingFang SC;
-    font-size: 30rpx;
-    border-top: solid 1rpx gainsboro;
-}
-.new-focus-img{
-    width: 100%;
-    height: 100%;
-}
-.swiper-status{
-    width: 750rpx;
-    height:500rpx;
-   
-}
-.titleContainer{
-    background-color: white;
-    display: flex;
-    flex-direction: row;
-    height: 80rpx;
-    align-items:center;
-}
-.titleLine{
-    width: 4rpx;
-    height: 30rpx;
-    background-color: #444444;
-    margin-left: 20rpx;
-}
-.titleDesc{
-    flex: 1;
-    text-align: left;
-    color: #444444;
-    font-family: PingFang SC;
-    font-size:30rpx;
-    margin-left: 16rpx;
-    font-weight: 600;
-}
-.titleMore{
-    width: 48rpx;
-    height: 38rpx;
-    display: flex;
-    margin-right: 30rpx;
-    align-items: center;
-    justify-content: center;
-}
-
-.titleMoreIm{
-    width: 44rpx;
-    height: 8rpx;
-}
-
-.view-splite {
-    height:20rpx;
-}
-
-.newtop{
+.top-search {
     position: fixed;
     top: 0;
     left: 0;
@@ -365,75 +55,3 @@
     left: -40rpx;
 }
 
-.newsearch {
-    height: 70rpx;
-    width: 615rpx;
-    margin-left: 30rpx;
-    background-color: #ffffff;
-    display: flex;
-    flex-direction: row;
-    align-items: center; 
-    border-radius: 10rpx;
-    top: 0rpx;
-    left: 0rpx
-}
-
-.channelContainer {
-    width: 100%;
-    top: 96rpx;
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    height: wrap;
-    z-index: 1000;
-}
-
-.channelItem {
-    height: 100rpx;
-    width: 750rpx;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    align-items: center;
-}
-
-.channelBg {
-    position: fixed;
-    height: 201rpx;
-    width: 750rpx;
-    top: 96rpx;
-    z-index: 999;
-}
-
-.indicator {
-    width: 10rpx;
-    height: 10rpx;
-    background-color: white;
-}
-
-.channelText {
-    font-family: PingFang-SC;
-    font-size: 40rpx;
-    font-weight: 600;
-    text-align: left;
-    color: #ffffff;
-    margin-left: 20rpx;
-}
-
-.channelIcon {
-    width: 48rpx;
-    height: 38rpx;
-    margin-left: 30rpx;
-    margin-right: 30rpx
-}
-
-.container_mask {
-    position: fixed;
-    top: 96;
-    z-index: 555;
-    width: 100%;
-    height: 100%;
-    background: #333;
-    filter: alpha(opacity=0);
-    opacity: 0.0;
-}