静态页面

src/app.config.js

       },
       {
         pagePath: "pages/chat/index",
-        text: "聊天",
+        text: "消息",
         iconPath: './assets/tabbar/chat1.png',
         selectedIconPath: './assets/tabbar/chat2.png',
       },

src/assets/css/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2603904 */
-  src: url('iconfont.eot?t=1623340225195'); /* IE9 */
-  src: url('iconfont.eot?t=1623340225195#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-       url('iconfont.woff?t=1623340225195') format('woff'),
-       url('iconfont.ttf?t=1623340225195') format('truetype'),
-       url('iconfont.svg?t=1623340225195#iconfont') format('svg');
+  src: url('iconfont.eot?t=1624086408943'); /* IE9 */
+  src: url('iconfont.eot?t=1624086408943#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('iconfont.woff?t=1624086408943') format('woff'),
+       url('iconfont.ttf?t=1624086408943') format('truetype'),
+       url('iconfont.svg?t=1624086408943#iconfont') format('svg');
 }
 
 .iconfont {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gou:before {
+  content: "\e60c";
+}
+
+.icon-bangzhu:before {
+  content: "\e712";
+}
+
+.icon-shoucang1:before {
+  content: "\e614";
+}
+
+.icon-paixu:before {
+  content: "\e689";
+}
+
+.icon-sanjiaoxingdown:before {
+  content: "\e602";
+}
+
+.icon-sanjiaoxingup:before {
+  content: "\e890";
+}
+
 .icon-bianji:before {
   content: "\e608";
 }

src/assets/css/iconfont.json

   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "9055670",
+      "name": "勾",
+      "font_class": "gou",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "13312722",
+      "name": "帮 助",
+      "font_class": "bangzhu",
+      "unicode": "e712",
+      "unicode_decimal": 59154
+    },
+    {
+      "icon_id": "9664796",
+      "name": "收 藏",
+      "font_class": "shoucang1",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "1984404",
+      "name": "排序",
+      "font_class": "paixu",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "12198242",
+      "name": "三角形",
+      "font_class": "sanjiaoxingdown",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "22258201",
+      "name": "三角形",
+      "font_class": "sanjiaoxingup",
+      "unicode": "e890",
+      "unicode_decimal": 59536
+    },
     {
       "icon_id": "11745026",
       "name": "编辑",

src/assets/css/iconfont.svg

   />
     <missing-glyph />
     
+    <glyph glyph-name="gou" unicode="&#58892;" d="M511.9990625 821.8303125C270.6059375 821.8303125 74.1696875 625.4034375 74.1696875 384c0-241.404375 196.4353125-437.8303125 437.829375-437.8303125 241.41374999 0 437.83125001 196.4259375 437.83125 437.8303125 0 241.4034375-196.4175 437.8303125-437.83125 437.8303125m0-807.4275c-203.7675 0-369.598125 165.808125-369.598125 369.5971875 0 203.788125 165.8315625 369.59625001 369.598125 369.59625001 203.8115625 0 369.59625001-165.808125 369.59625-369.59625001 0-203.7890625-165.7846875-369.5971875-369.59625-369.5971875M646.55375001 510.62624999L442.0325 308.65874999000005l-55.726875 63.68062501c-12.3946875 14.17125001-33.9628125 15.646875-48.1546875 3.2325-14.1703125-12.41625001-15.6140625-33.9834375-3.219375-48.15375l79.603125-90.9778125a34.284375 34.284375 0 0 1 24.4771875-11.6184375c0.40124999-0.0215625 0.79874999-0.0215625 1.220625-0.0215625 8.9521875 0 17.56875001 3.4978125 23.968125 9.8278125l230.2875 227.445c13.415625 13.2609375 13.5478125 34.8375 0.309375 48.2540625-13.2365625 13.404375-34.8271875 13.5375-48.24375001 0.29906249"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bangzhu" unicode="&#59154;" d="M512-37.875A421.875 421.875 0 1 0 512 805.875a421.875 421.875 0 0 0 0-843.75z m0 56.20660401a365.66839599 365.66839599 0 1 1 0 731.33679198 365.66839599 365.66839599 0 0 1 0-731.33679198z m10.90365601 571.86804198c38.42358398 0 69.64233398-10.125 93.591156-31.80294799 24.01473999-20.96438599 36.021698-49.78125 36.021698-85.802948 0-29.33679199-7.788208-53.93490601-22.78125-73.146698-5.38632202-6.61981201-22.26132202-22.197052-50.42971801-46.79598999a101.444458 101.444458 0 0 1-25.18313599-31.153656 80.740448 80.740448 0 0 1-9.67016602-39.65625v-10.190094h-64.25518799v10.190094c0 22.19787598 3.56945801 41.40884399 11.94268799 56.98608398 7.788208 16.74481201 30.634552 41.40802002 67.82382202 74.38018798l10.190094 11.35766602c10.83938599 13.88891602 16.74563599 28.16839599 16.74563598 43.80990601 0 21.02865601-6.03643799 37.19009399-17.46002197 49.13195801-11.94186401 12.00778198-29.33596802 17.97912598-51.01391601 17.97912597-27 0-46.79516602-8.37322998-58.73785401-25.76733398-10.83856201-14.40884399-16.225708-34.85412598-16.225708-61.20483398h-62.95660401c0 43.81072998 12.59033203 77.94964599 37.70837402 103.19787598 25.44268799 25.896698 60.29598999 38.48785401 104.625 38.48785399z m-10.70919801-350.934906c12.59197998 0 23.365448-3.57028198 31.80294801-11.94268799 8.4375-7.788208 12.65625-17.978302 12.65625-30.634552a42.51214599 42.51214599 0 0 0-13.17535401-31.15447998 44.913208 44.913208 0 0 0-31.15447997-11.94186401 43.09634399 43.09634399 0 0 0-43.80908204 43.225708c0 12.59197998 4.21875 22.71697998 12.59033204 30.56945801a42.1875 42.1875 0 0 0 31.08938597 11.87841797z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shoucang1" unicode="&#58900;" d="M737-16.5c-9 0-19.5 3-28.5 7.5l-195 97.5-196.5-97.5c-19.5-10.5-45-9-63 4.5-18 13.5-28.5 37.5-24 60l40.5 210L116 409.5C99.5 426 93.5 451.5 99.5 472.5c7.5 22.5 25.5 39 49.5 42l214.5 39 96 195c10.5 21 31.5 34.5 54 34.5s45-13.5 54-34.5l96-195 214.5-37.5c22.5-3 42-19.5 48-42 7.5-22.5 1.5-46.5-15-63L756.5 265.5l39-210c4.5-24-6-46.5-24-60-9-7.5-21-12-34.5-12z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="paixu" unicode="&#59017;" d="M403.4375 741.9375c-11.25 4.59375-24.1875 1.96875-32.71875-6.65625L101.75 462.5625c-11.625-11.8125-11.53125-30.75 0.28125-42.46875 11.8125-11.625 30.75-11.53125 42.46875 0.28125l217.59375 220.59375v-585.84375c0-16.59375 13.40625-30 30-30s30 13.40625 30 30v659.0625c0 12.1875-7.40625 23.15625-18.65625 27.75zM922.15625 349.3125c-11.8125 11.625-30.75 11.53125-42.46875-0.28125l-217.5-220.6875V714.1875c0 16.59375-13.40625 30-30 30s-30-13.40625-30-30v-658.96875c0-12.1875 7.3125-23.15625 18.65625-27.75 3.65625-1.5 7.5-2.25 11.34375-2.25 7.875 0 15.65625 3.09375 21.375 8.90625l268.96875 272.71875c11.625 11.8125 11.4375 30.75-0.375 42.46875z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sanjiaoxingdown" unicode="&#58882;" d="M146.21177467 616.92168889L856.79806105 616.92168889a28.25055836 28.25055836 0 0 0 21.69642846-46.33091529l-355.30726831-426.35742188a28.25055836 28.25055836 0 0 0-43.3928577-1e-8L124.51534619 570.59077359A28.25055836 28.25055836 0 0 0 146.21177467 616.92168889z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sanjiaoxingup" unicode="&#59536;" d="M877.78822533 151.07831110999996L167.20193895 151.07831110999996a28.25055836 28.25055836 0 0 0-21.69642846 46.33091529l355.30726831 426.35742188a28.25055836 28.25055836 0 0 0 43.3928577 1e-8L899.48465381 197.40922640999997A28.25055836 28.25055836 0 0 0 877.78822533 151.07831110999996z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="bianji" unicode="&#58888;" d="M797.86880407 541.08664501L669.1300934 669.86880407 717.1844352 718.05349239a45.66465922 45.66465922 0 0 0 64.95591337-0.08689746l63.82624636-63.78279729a45.62121016 45.62121016 0 0 0 0.0434484-64.95591405l-48.0977902-48.14123858z m-64.39107954-64.43452859L362.94659898 106.07754179999995c-8.77665177-8.77665177-25.46098003-19.55194721-36.71421252-23.89682438l-103.36462809-39.712178c-47.01157089-18.074689-70.3870105 5.64834045-52.39921895 52.39921896l39.7556264 103.32117968c4.38832623 11.5139242 15.5112115 28.32859899 23.89682436 36.71421184l370.6180237 370.61802303 128.78215905-128.86905651z"  horiz-adv-x="1024" />
 
     

src/components/ProjectListItem/index.jsx

 import React, { useState, useEffect } from 'react'
 import './index.scss'
+import Taro from '@tarojs/taro'
 
 export default function ProjectListItem (props) {
   const { Data = {} } = props
   return (
-    <view className='components ProjectListItem flex-h'>
+    <view className='components ProjectListItem flex-h' onClick={() => {Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${Data.id}` })}}>
       <view className='Img'>
         <view>
           {

src/components/ProjectListItem/index.scss

 .components.ProjectListItem {
   padding-bottom: 30px;
-  border-bottom: 2px solid #eee;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
   > .Img {
     width: 260px;
     position: relative;

src/pages/chat/index.config.js

 export default {
-  navigationBarTitleText: '聊天'
+  navigationBarTitleText: '聊天记录'
 }

src/pages/chat/index.jsx

 import React, { useState, useEffect } from 'react'
 import withLayout from '@/layout'
 import './index.scss'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, Image } from '@tarojs/components'
 
 export default withLayout((props) => {
 
   // const [PageProps] = useState(props)
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', ''])
 
   const PageRefresh = () => { // 页面下拉刷新回调
     setPull(true)
 
       <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
         <view className='PageContent'>
-          聊天
+          {
+            PageList.map((item, index) => (
+              <view className='ListItem flex-h' key={`ListItem-${index}`}>
+                <view className='Icon'>
+                  <view>
+                    <Image mode='aspectFill' className='centerLabel' src={item.img || require('../../assets/mine-icon18.png')} />
+                  </view>
+                  <text className='Num'>99</text>
+                </view>
+                <view className='flex-item'>
+                  <view className='flex-h'>
+                    <text className='flex-item'>张三</text>
+                    <text>刚刚</text>
+                  </view>
+                  <view className='Msg'>
+                    <text>户型很好，很满意</text>
+                  </view>
+                </view>
+              </view>
+            ))
+          }
         </view>
       </ScrollView>
 

src/pages/chat/index.scss

       position: relative;
       overflow: hidden;
       min-height: 100vh;
+      > .ListItem {
+        padding: 20px 30px;
+        position: relative;
+        overflow: hidden;
+        align-items: center;
+        border-top: 2px solid rgba(0, 0, 0, 0.05);
+        &:first-child {
+          border: none;
+        }
+        > .Icon {
+          width: 80px;
+          height: 80px;
+          position: relative;
+          overflow: visible;
+          > view {
+            width: 100%;
+            height: 100%;
+            border-radius: 6px;
+            background: #ccc;
+            position: relative;
+            overflow: hidden;
+            z-index: 1;
+            > image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          >.Num {
+            width: 30px;
+            line-height: 30px;
+            display: inline-block;
+            text-align: center;
+            color: #fff;
+            background: #F02222;
+            border-radius: 100%;
+            position: absolute;
+            z-index: 2;
+            right: -10px;
+            top: -10px;
+            font-size: 18px;
+          }
+        }
+        >.flex-item {
+          margin-left: 20px;
+          >.flex-h {
+            align-items: center;
+            >text {
+              font-size: 20px;
+              color: #888;
+              line-height: 40px;
+              &:first-child {
+                font-size: 28px;
+                color: #333;
+              }
+            }
+          }
+          >.Msg {
+            >text {
+              display: block;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font-size: 24px;
+              color: #888;
+              line-height: 40px;
+            }
+          }
+        }
+      }
     }
   }
 }

src/pages/index/buildingDetail/components/BasicInfo/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import '../../../../../assets/css/iconfont.css'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function BasicInfo (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components BasicInfo'>
+
+      {/* 标题名称 */}
+      <view className='Title flex-h'>
+        <view className='flex-item'>
+          <text>葛洲坝·南京中国府高档小区</text>
+        </view>
+        <view className='Collect'>
+          <text className='iconfont icon-shoucang'></text>
+          <text>收藏</text>
+        </view>
+      </view>
+
+      {/* 标签 */}
+      <view className='Tags'>
+        {
+          ['全朝南', '品牌开发商', '轨交房'].map((item, index) => (
+            <text key={`TagItem-${index}`}>{item}</text>
+          ))
+        }
+      </view>
+
+      {/* 项目列表 */}
+      <view className='ProjectList'>
+        <ScrollView scroll-x={true}>
+          {
+            ['', '', ''].map((item, index) => (
+              <view className='ListItem' key={`List-${index}`}>
+                <Image mode='heightFix' src={require('../../../../../assets/buildingDetail-icon4.jpg')} />
+                <view>
+                  <view>
+                    <text>项目类型：</text>
+                    <text className='active black'>公寓</text>
+                  </view>
+                  <view>
+                    <text>房屋产权：</text>
+                    <text className='active'>40年</text>
+                    <text>装修标准：</text>
+                    <text className='active'>毛坯</text>
+                  </view>
+                  <view>
+                    <text>项目参考价格：</text>
+                    <text className='active'>45-75万/套</text>
+                  </view>
+                  <text className='SaleStatus active'>在售</text>
+                </view>
+              </view>
+            ))
+          }
+        </ScrollView>
+      </view>
+
+      {/* 隔断 */}
+      <view className='CutLine'></view>
+
+      {/* 更多信息 */}
+      <view className='MoreInfo'>
+        <view className='flex-h'>
+          <view className='flex-item'>
+            <text>楼盘地址：</text>
+          </view>
+          <view className='flex-item3'>
+            <text className='active'>南京市建邺区友谊街与建邺路交汇处235号</text>
+          </view>
+        </view>
+        <view className='flex-h'>
+          <view className='flex-item'>
+            <text>开盘时间：</text>
+          </view>
+          <view className='flex-item3'>
+            <text className='active'>2019年8月5日</text>
+          </view>
+        </view>
+        <view className='flex-h'>
+          <view className='flex-item'>
+            <text>容积率：</text>
+          </view>
+          <view className='flex-item'>
+            <text className='active'>1.5</text>
+          </view>
+          <view className='flex-item'>
+            <text>车位比率：</text>
+          </view>
+          <view className='flex-item'>
+            <text className='active'>1 : 200</text>
+          </view>
+        </view>
+        <view className='flex-h'>
+          <view className='flex-item'>
+            <text>绿化率：</text>
+          </view>
+          <view className='flex-item'>
+            <text className='active'>40%</text>
+          </view>
+          <view className='flex-item'>
+            <text>物业费：</text>
+          </view>
+          <view className='flex-item'>
+            <text className='active'>1.9元/㎡/月</text>
+          </view>
+        </view>
+        <view className='flex-h'>
+          <view className='flex-item'>
+            <text>规划户数：</text>
+          </view>
+          <view className='flex-item'>
+            <text className='active'>2000</text>
+          </view>
+          <view className='flex-item'>
+            <text>物业：</text>
+          </view>
+          <view className='flex-item'>
+            <text className='active'>万科物业</text>
+          </view>
+        </view>
+      </view>
+
+      {/* 围观 */}
+      <view className='Views flex-h'>
+          <text>28人围观</text>
+          <view className='flex-item'>
+            {
+              ['', '', '', '', '', ''].map((item, index) => (
+                <view key={`ViewsItem-${index}`}>
+                  <Image mode='aspectFill' className='centerLabel' src={null} />
+                </view>
+              ))
+            }
+            <text>...</text>
+          </view>
+      </view>
+
+      {/* 互动 */}
+      <view className='Interact flex-h'>
+        <text className='flex-item'>更多楼盘信息</text>
+        <text className='flex-item active'>订阅活动通知</text>
+      </view>
+
+      {/* 提示 */}
+      <view className='Tips'>
+        <text className='iconfont icon-bangzhu'></text>
+        <text>查看报备规则？</text>
+      </view>
+
+    </view>
+  )
+}

src/pages/index/buildingDetail/components/BasicInfo/index.scss

+.components.BasicInfo {
+  position: relative;
+  overflow: hidden;
+  >.Title {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    align-items: flex-start;
+    margin-top: 40px;
+    >.flex-item {
+      margin-right: 20px;
+      >text {
+        display: block;
+        font-size: 40px;
+        line-height: 56px;
+        color: #000;
+      }
+    }
+    >.Collect {
+      width: 80px;
+      >text {
+        display: block;
+        text-align: center;
+        font-size: 24px;
+        line-height: 34px;
+        &.iconfont {
+          font-size: 40px;
+          line-height: 50px;
+        }
+      }
+    }
+  }
+  >.Tags {
+    padding: 0 30px;
+    font-size: 0;
+    position: relative;
+    overflow: hidden;
+    >text {
+      display: inline-block;
+      vertical-align: middle;
+      margin-top: 20px;
+      margin-right: 6px;
+      font-size: 22px;
+      color: #666;
+      padding: 0 12px;
+      line-height: 36px;
+      color: #666;
+      background: rgba(251, 171, 87, 0.3);
+      border-radius: 8px;
+    }
+  }
+  >.ProjectList {
+    position: relative;
+    overflow: hidden;
+    margin-top: 40px;
+    height: 200px;
+    >scroll-view {
+      width: 100%;
+      height: 100%;
+      font-size: 0;
+      white-space: nowrap;
+      .ListItem {
+        width: 572px;
+        height: 100%;
+        box-sizing: border-box;
+        border: 2px dashed rgba(0, 0, 0, 0.2);
+        margin-right: 30px;
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        overflow: hidden;
+        border-radius: 20px;
+        &:first-child {
+          margin-left: 30px;
+        }
+        >image {
+          height: 180px;
+          z-index: 1;
+          display: block;
+          position: absolute;
+          left: 50%;
+          bottom: 0;
+          transform: translateX(-50%);
+          -webkit-transform: translateX(-50%);
+        }
+        >view {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          z-index: 2;
+          overflow: hidden;
+          >.SaleStatus {
+            display: inline-block;
+            position: absolute;
+            right: 0;
+            top: 0;
+            line-height: 50px;
+            font-size: 24px;
+            color: #999;
+            background: #ccc;
+            padding: 0 20px;
+            border-radius: 25px 0 0 25px;
+            z-index: 2;
+            &.active {
+              background: #1a3b83;
+              color: #fff;
+            }
+          }
+          >view {
+            font-size: 0;
+            white-space: nowrap;
+            padding-left: 20px;
+            &:first-child {
+              margin-top: 16px;
+            }
+            >text {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 26px;
+              line-height: 54px;
+              color: #666;
+              &.active {
+                color: #1a3b83;
+                margin-right: 20px;
+              }
+              &.black {
+                color: #000 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  >.CutLine {
+    position: relative;
+    overflow: hidden;
+    margin-top: 28px;
+    height: 8px;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 200px;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.12);
+      border-radius: 8px;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      -webkit-transform: translateX(-50%);
+    }
+  }
+  >.MoreInfo {
+    position: relative;
+    overflow: hidden;
+    margin-top: 40px;
+    padding: 0 30px;
+    >view {
+      align-items: center;
+      margin-top: 20px;
+      &:first-child {
+        margin-top: 0;
+      }
+      >view {
+        min-width: 25%;
+        &.flex-item3 {
+          flex: 3;
+          -webkit-flex: 3;
+        }
+        >text {
+          display: block;
+          font-size: 32px;
+          line-height: 44px;
+          color: #999;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          text-align: justify;
+          text-align-last: justify;
+          &.active {
+            color: #000;
+            text-align: left;
+            text-align-last: left;
+          }
+        }
+      }
+    }
+  }
+  >.Views {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    margin-top: 20px;
+    align-items: center;
+    >text {
+      font-size: 26px;
+      color: #999;
+      line-height: 44px;
+    }
+    >.flex-item {
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      white-space: nowrap;
+      >view {
+        display: inline-block;
+        vertical-align: middle;
+        width: 52px;
+        height: 52px;
+        border-radius: 100%;
+        position: relative;
+        overflow: hidden;
+        background: #eee;
+        margin-left: -16px;
+        &:first-child {
+          margin-left: 30px;
+        }
+        >image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      >text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 24px;
+        color: #999;
+        margin-left: 20px;
+      }
+    }
+  }
+  >.Interact {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    margin-top: 40px;
+    >text {
+      margin-left: 30px;
+      font-size: 36px;
+      line-height: 90px;
+      border: 2px solid #979797;
+      color: #333;
+      text-align: center;
+      border-radius: 8px;
+      &:first-child {
+        margin-left: 0;
+      }
+      &.active {
+        border-color: #1a3b83;
+        color: #1a3b83;
+      }
+    }
+  }
+  .Tips {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    font-size: 0;
+    white-space: nowrap;
+    margin-top: 30px;
+    margin-bottom: 40px;
+    >text {
+      display: inline-block;
+      vertical-align: middle;
+      color: #1a3b83;
+      font-size: 28px;
+      line-height: 40px;
+      margin-right: 10px;
+      &.iconfont {
+        font-size: 32px;
+      }
+    }
+  }
+}

src/pages/index/buildingDetail/components/DetailBottom/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Image } from '@tarojs/components'
+
+export default function DetailBottom (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components DetailBottom flex-h'>
+      <view className='Item'>
+        <Image mode="heightFix" src={require('../../../../../assets/buildingDetail-icon3.png')}></Image>
+        <text>一键海报</text>
+      </view>
+      <view className='Item'>
+        <Image mode="heightFix" src={require('../../../../../assets/buildingDetail-icon1.png')}></Image>
+        <text>一键带看</text>
+      </view>
+      <view className='Item'>
+        <Image mode="heightFix" src={require('../../../../../assets/buildingDetail-icon2.png')}></Image>
+        <text>一键推荐</text>
+      </view>
+      <view className='flex-item'></view>
+      <view className='Btn'>
+        <text>一键咨询</text>
+        <text className='active'>一键电话</text>
+      </view>
+    </view>
+  )
+}

src/pages/index/buildingDetail/components/DetailBottom/index.scss

+.components.DetailBottom {
+  position: relative;
+  overflow: hidden;
+  padding: 15px;
+  padding-left: 0;
+  align-items: center;
+  background: #fff;
+  > .Item {
+    text-align: center;
+    margin-left: 24px;
+    > image {
+      width: 40px;
+      height: 40px;
+    }
+    > text {
+      display: block;
+      text-align: center;
+      font-size: 22px;
+      color: #666;
+      line-height: 30px;
+    }
+  }
+  > .Btn {
+    font-size: 0;
+    white-space: nowrap;
+    border: 2px solid #1a3b83;
+    border-radius: 46px;
+    position: relative;
+    overflow: hidden;
+    > text {
+      display: inline-block;
+      vertical-align: middle;
+      width: 180px;
+      text-align: center;
+      line-height: 92px;
+      color: #1a3b83;
+      font-size: 32px;
+      &.active {
+        color: #fff;
+        background: #1a3b83;
+      }
+    }
+  }
+}

src/pages/index/buildingDetail/index.jsx

 import React, { useState, useEffect } from 'react'
 import withLayout from '@/layout'
 import './index.scss'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, Image } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
+import DetailBottom from './components/DetailBottom/index'
+import BasicInfo from './components/BasicInfo/index'
 
 export default withLayout((props) => {
 
   }, [IsPull])
 
   return (
-    <view className='Page buildingDetail'>
+    <view className='Page buildingDetail flex-v'>
 
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
-        <view className='PageContent'>
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y={true} refresher-enabled={false} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#f8f8f8'>
+            <view className='PageContent'>
 
-          楼盘详情
+              {/* banner */}
+              <view className='BannerContainer'>
+                <view>
+                  <view>
 
-          {/* bottom */}
-          <view className='PageBottom'>
-            <text>已经到底了~</text>
-          </view>
+                  </view>
+                </view>
+              </view>
 
+              {/* content */}
+              <view className='DetailContent'>
+
+                {/* 基本信息 */}
+                <view className='BasicInfo'>
+                  <BasicInfo></BasicInfo>
+                </view>
+
+              </view>
+
+              {/* bottom */}
+              <view className='ScrollBottom'>
+                <text>已经到底了~</text>
+              </view>
+
+            </view>
+          </ScrollView>
         </view>
-      </ScrollView>
+      </view>
+
+      <view className='PageBottom'>
+        <DetailBottom></DetailBottom>
+      </view>
 
     </view>
   )

src/pages/index/buildingDetail/index.scss

 .Page.buildingDetail {
-  background: #fff;
-  > scroll-view {
-    width: 100%;
-    height: 100%;
-    .PageContent {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
+  background: #f8f8f8;
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .PageContent {
+          position: relative;
+          overflow: hidden;
+          min-height: 100vh;
+          > .BannerContainer {
+            width: 100%;
+            position: fixed;
+            overflow: hidden;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            > view {
+              width: 100%;
+              padding-bottom: 80%;
+              position: relative;
+              overflow: hidden;
+              background: #eee;
+              > view {
+                width: 100%;
+                position: absolute;
+                overflow: hidden;
+                left: 0;
+                top: 0;
+                bottom: 0;
+              }
+            }
+          }
+          >.DetailContent {
+            position: relative;
+            overflow: hidden;
+            z-index: 2;
+            margin-top: 71.5vw;
+            >view {
+              position: relative;
+              overflow: hidden;
+              background: #fff;
+              margin-top: 20px;
+              min-height: 60px;
+              &:first-child {
+                margin-top: 0;
+              }
+              &.BasicInfo {
+                border-radius: 40px 40px 0 0;
+                min-height: 200px;
+              }
+            }
+          }
+        }
+      }
     }
   }
+  > .PageBottom {
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+  }
 }

src/pages/index/buildingList/index.jsx

 import './index.scss'
 import { ScrollView } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
+import ProjectListItem from '../../../components/ProjectListItem/index'
 
 export default withLayout((props) => {
 
   }, [IsPull])
 
   return (
-    <view className='Page buildingList'>
+    <view className='Page buildingList flex-v'>
 
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
-        <view className='PageContent'>
-
-          楼盘列表
+      <view className='Search'>
+        <view>
+          <text className='iconfont icon-sousuo'></text>
+          <text>输入项目名称或直播标题</text>
+        </view>
+      </view>
 
-          {/* bottom */}
-          <view className='PageBottom'>
-            <text>已经到底了~</text>
+      <view className='Filter'>
+        <view className='flex-h'>
+          <view className='flex-item'>
+            <text>区域</text>
+            <text className='iconfont icon-sanjiaoxingdown'></text>
+          </view>
+          <view className='flex-item'>
+            <text>价格</text>
+            <text className='iconfont icon-sanjiaoxingdown'></text>
+          </view>
+          <view className='flex-item'>
+            <text>户型</text>
+            <text className='iconfont icon-sanjiaoxingdown'></text>
           </view>
+          <view className='flex-item'>
+            <text>更多</text>
+            <text className='iconfont icon-sanjiaoxingdown'></text>
+          </view>
+          <text className='iconfont icon-paixu Sort'></text>
+        </view>
+      </view>
+
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+            <view className='PageContent'>
+              <view className='ProjectList'>
+                {
+                  PageList.map((item, index) => (
+                    <ProjectListItem Data={item} key={`ProjectListItem-${index}`}></ProjectListItem>
+                  ))
+                }
+              </view>
+
+              {/* bottom */}
+              <view className='PageBottom'>
+                <text>已经到底了~</text>
+              </view>
 
+            </view>
+          </ScrollView>
         </view>
-      </ScrollView>
+      </view>
 
     </view>
   )

src/pages/index/buildingList/index.scss

 .Page.buildingList {
   background: #fff;
-  > scroll-view {
-    width: 100%;
-    height: 100%;
-    .PageContent {
+  > .Search {
+    padding: 0 50px;
+    position: relative;
+    overflow: hidden;
+    > view {
+      text-align: center;
+      background: #f8f8f8;
+      font-size: 0;
+      white-space: nowrap;
+      border-radius: 44px;
+      >text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 20px;
+        color: #999;
+        margin-left: 10px;
+        line-height: 44px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  >.Filter {
+    padding: 0 30px;
+    position: relative;
+    margin-top: 20px;
+    >view {
       position: relative;
       overflow: hidden;
-      min-height: 100vh;
+      border-bottom: 2px solid rgba(25, 60, 131, 0.1);
+      align-items: center;
+      >view {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: left;
+        padding: 15px 0;
+        >text {
+          font-size: 30px;
+          line-height: 40px;
+          color: #333;
+          &.iconfont {
+            font-size: 20px;
+            color: #ccc;
+            margin-left: 10px;
+          }
+        }
+      }
+      >.Sort {
+        font-size: 32px;
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .PageContent {
+          position: relative;
+          overflow: hidden;
+          min-height: 100vh;
+          >.ProjectList {
+            padding: 0 30px;
+            position: relative;
+            overflow: hidden;
+            >view {
+              margin-top: 30px;
+            }
+          }
+          > .PageBottom {
+            text-align: center;
+            font-size: 0;
+            white-space: nowrap;
+            > text {
+              display: inline-block;
+              font-size: 28px;
+              color: #666;
+              line-height: 40px;
+              margin: 20px auto;
+            }
+          }
+        }
+      }
     }
   }
 }

src/pages/index/components/ActivityListItem/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+
+export default function ActivityListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components ActivityListItem' onClick={() => { Taro.navigateTo({ url: `/pages/index/newsDetail/index?id=${Data.id}` }) }}>
+      <view className='Img'>
+        <Image mode='aspectFill' src={null} className='centerLabel'></Image>
+      </view>
+      <view className='Info'>
+        <view className='Name flex-h'>
+          <view className='flex-item'>
+            <text>5D沉浸式剧场</text>
+          </view>
+          <text className='yellow'>立即参与</text>
+        </view>
+        <view className='Time'>
+          <text>活动时间：2019/10/20 10:00 - 2019/10/22 10:00</text>
+        </view>
+      </view>
+    </view>
+  )
+}

src/pages/index/components/ActivityListItem/index.scss

+.components.ActivityListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  background: #fff;
+  >.Img {
+    width: 100%;
+    padding-bottom: 56.25%;
+    position: relative;
+    overflow: hidden;
+    background: #eee;
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  >.Info {
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+    >.Name {
+      align-items: flex-start;
+      >.flex-item {
+        margin-right: 10px;
+        >text {
+          display: block;
+          font-size: 34px;
+          font-weight: bold;
+          color: #333;
+          line-height: 60px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      >text {
+        font-size: 30px;
+        color: #fff;
+        line-height: 60px;
+        text-align: center;
+        border-radius: 60px;
+        background: #B9B2B2;
+        width: 144px;
+        &.yellow {
+          background: #FA9730;
+        }
+        &.blue {
+          background: #193C83;
+        }
+      }
+    }
+    >.Time {
+      >text {
+        font-size: 24px;
+        color: #999;
+        line-height: 40px;
+      }
+    }
+  }
+}

src/pages/index/components/NewsListItem/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+
+export default function NewsListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components NewsListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/index/newsDetail/index?id=${Data.id}` }) }}>
+      <view className='Img'>
+        <Image mode='aspectFill' src={null} className='centerLabel'></Image>
+      </view>
+      <view className='flex-item'>
+        <text>破晓·内容生态下半场的版权之道2019企业版权</text>
+        <text>于2019-12-12 14:20:30发布</text>
+      </view>
+    </view>
+  )
+}

src/pages/index/components/NewsListItem/index.scss

+.components.NewsListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+  >.Img {
+    width: 220px;
+    height: 176px;
+    position: relative;
+    overflow: hidden;
+    background: #eee;
+    margin-right: 20px;
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  >.flex-item {
+    >text {
+      display: block;
+      font-size: 24px;
+      color: #666;
+      line-height: 30px;
+      &:first-child {
+        font-size: 30px;
+        line-height: 40px;
+        max-height: 80px;
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}

src/pages/index/encyDetail/index.config.js

+export default {
+  navigationBarTitleText: '百科详情'
+}

src/pages/index/encyDetail/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+import { Image, RichText } from '@tarojs/components'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+
+  return (
+    <view className='Page encyDetail flex-v'>
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
+            <view className='PageContent'>
+
+              <view className='Info'>
+                <view>
+                  <text className='Title'>公积金又有新变化，附最新南京公积金贷款和提取方法。</text>
+                  <view>
+                    <text>阅读：28</text>
+                    <text>点赞15</text>
+                    <text>收藏22</text>
+                  </view>
+                  <text className='Time'>时间：2019-10-20 10:00 </text>
+                  <text className='Share'>分享好友</text>
+                </view>
+              </view>
+
+              <view className='Content'>
+                <RichText nodes={'<p>这是内容</p>'}></RichText>
+              </view>
+
+            </view>
+          </ScrollView>
+        </view>
+      </view>
+      <view className='Bottom'>
+        <view>
+          <Image mode='heightFix' src={require('../../../assets/buildingDetail-icon3.png')}></Image>
+          <text>生成海报</text>
+        </view>
+        <view>
+          <text className='iconfont icon-shoucang'></text>
+          <text>收藏</text>
+        </view>
+      </view>
+    </view>
+  )
+})

src/pages/index/encyDetail/index.scss

+.Page.encyDetail {
+  background: #fff;
+  >.flex-item {
+    position: relative;
+    z-index: 1;
+    >view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .PageContent {
+          position: relative;
+          overflow: hidden;
+          min-height: 100vh;
+          >.Info {
+            padding: 0 30px;
+            position: relative;
+            overflow: visible;
+            margin-top: 30px;
+            >view {
+              background: #fff;
+              position: relative;
+              overflow: hidden;
+              box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+              padding: 20px;
+              >.Title {
+                display: block;
+                font-size: 34px;
+                font-weight: bold;
+                color: #333;
+                line-height: 40px;
+              }
+              >view {
+                font-size: 0;
+                white-space: nowrap;
+                margin-top: 30px;
+                >text {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 28px;
+                  color: #333;
+                  margin-left: 40px;
+                  &:first-child {
+                    margin-left: 0;
+                  }
+                }
+              }
+              >.Time {
+                display: block;
+                font-size: 28px;
+                color: #333;
+                margin-top: 20px;
+              }
+              >.Share {
+                display: block;
+                text-align: center;
+                font-size: 32px;
+                line-height: 92px;
+                background: #F2F2F2;
+                border-radius: 92px;
+                margin-top: 30px;
+                margin-bottom: 20px;
+              }
+            }
+          }
+          >.Content {
+            padding: 0 30px;
+            position: relative;
+            overflow: hidden;
+            margin-top: 30px;
+          }
+        }
+      }
+    }
+  }
+  >.Bottom {
+    font-size: 0;
+    white-space: nowrap;
+    position: relative;
+    z-index: 2;
+    background: #fff;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+    text-align: center;
+    padding: 20px 0;
+    >view {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 74px;
+      &:first-child {
+        margin-left: 0;
+      }
+      >image {
+        width: 40px;
+        height: 40px;
+        display: block;
+        margin: 0 auto;
+      }
+      >text {
+        display: block;
+        font-size: 30px;
+        text-align: center;
+        margin-top: 10px;
+        line-height: 40px;
+        &:first-child {
+          margin-top: 0;
+          font-size: 44px;
+        }
+      }
+    }
+  }
+}

src/pages/index/encyclopediasOfBuyHouse/index.jsx

 import React, { useState, useEffect } from 'react'
 import withLayout from '@/layout'
 import './index.scss'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, Image } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
+import Taro from '@tarojs/taro'
 
 export default withLayout((props) => {
 
   // const [PageProps] = useState(props)
-  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
-  const [IsPull, setPull] = useState(false)
-  const [PullTimer, setPullTimer] = useState(null)
-
-  const PageRefresh = () => { // 页面下拉刷新回调
-    setPull(true)
-  }
-
-  useEffect(() => { // 下拉刷新触发
-    if (IsPull) {
-      clearTimeout(PullTimer)
-      setPullTimer(setTimeout(() => {
-        setPull(false)
-      }, 2000))
-    }
-  }, [IsPull])
+  const [PageList] = useState([
+    {name: '准备买房', icon: require('../../../assets/ency-icon3.png'), list: [{name: '买房资质查询', id: 1, tips: 'HOT', tipsColor: '#FF0000', icon: ''}, {name: '22个房产名词', id: 2, tips: 'NEW', tipsColor: '#30CFCF', icon: ''}]},
+    {name: '看房选房', icon: require('../../../assets/ency-icon4.png'), list: [{name: '热门楼盘地图', id: 3, tips: '', icon: ''}, {name: '选户型攻略', id: 4, tips: '实用', tipsColor: '#62D547', icon: ''}, {name: '期房新房怎么选', id: 5, tips: '', icon: ''}]},
+    {name: '认筹签约', icon: require('../../../assets/ency-icon5.png'), list: [{name: '买房签约流程', id: 6, tips: '哇！', tipsColor: '#FF396C', icon: require('../../../assets/ency-icon2.png')}, {name: '契税征收标准', id: 7, tips: '', icon: ''}, {name: '公司名义买房', id: 8, tips: '', icon: ''}]},
+    {name: '贷款买房', icon: require('../../../assets/ency-icon6.png'), list: [{name: '新房贷政策', id: 9, tips: '', icon: ''}, {name: '贷款查征信', id: 10, tips: '', icon: require('../../../assets/ency-icon1.png')}]}
+  ])
 
   return (
     <view className='Page encyclopediasOfBuyHouse'>
 
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+      <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
         <view className='PageContent'>
-
-          购房百科
-
-          {/* bottom */}
-          <view className='PageBottom'>
-            <text>已经到底了~</text>
-          </view>
-
+          {
+            PageList.map((item, index) => (
+              <view key={`ListItem-${index}`}>
+                <view className='Title'>
+                  <text>{index + 1 > 9 ? index + 1 : `0${index + 1}`}</text>
+                  <text>/{item.name}</text>
+                  <Image mode='heightFix' src={item.icon}></Image>
+                </view>
+                <view className='List'>
+                  {
+                    item.list.map((subItem, subIndex) => (
+                      <view key={`subItem-${subIndex}`} onClick={() => { Taro.navigateTo({ url: `/pages/index/encyDetail/index?id=${subItem.id}` }) }}>
+                        <text className='Name'>{subItem.name}</text>
+                        {
+                          subItem.tips !== '' &&
+                          <text className='Tips' style={{background: subItem.tipsColor}}>{subItem.tips}</text>
+                        }
+                        {
+                          subItem.icon !== '' &&
+                          <Image mode='heightFix' src={subItem.icon}></Image>
+                        }
+                      </view>
+                    ))
+                  }
+                </view>
+              </view>
+            ))
+          }
         </view>
       </ScrollView>
 

src/pages/index/encyclopediasOfBuyHouse/index.scss

       position: relative;
       overflow: hidden;
       min-height: 100vh;
+      >view {
+        position: relative;
+        overflow: visible;
+        margin-top: 40px;
+        padding: 0 30px;
+        >.Title {
+          font-size: 0;
+          white-space: nowrap;
+          position: relative;
+          overflow: visible;
+          >text {
+            display: inline-block;
+            vertical-align: bottom;
+            font-size: 34px;
+            font-weight: bold;
+            line-height: 40px;
+            position: relative;
+            z-index: 2;
+            &:first-child {
+              font-size: 48px;
+              line-height: 50px;
+            }
+          }
+          >image {
+            display: block;
+            width: 28px;
+            height: 28px;
+            position: absolute;
+            left: -10px;
+            z-index: 1;
+            bottom: -10px;
+          }
+        }
+        >.List {
+          font-size: 0;
+          >view {
+            display: inline-block;
+            vertical-align: middle;
+            margin-top: 30px;
+            margin-right: 30px;
+            background: rgba(25, 60, 131, 0.08);
+            min-width: 268px;
+            text-align: center;
+            border-radius: 6px;
+            position: relative;
+            overflow: hidden;
+            >.Name {
+              display: inline-block;
+              vertical-align: middle;
+              max-width: 100%;
+              font-size: 30px;
+              line-height: 80px;
+              font-weight: bold;
+              color: #333;
+              position: relative;
+              z-index: 1;
+            }
+            >.Tips {
+              display: inline-block;
+              position: absolute;
+              z-index: 2;
+              left: 0;
+              top: 0;
+              width: 60px;
+              font-size: 16px;
+              text-align: center;
+              white-space: nowrap;
+              color: #fff;
+              background: #ccc;
+              line-height: 24px;
+              border-radius: 0 0 6px 0;
+            }
+            >image {
+              display: inline-block;
+              vertical-align: middle;
+              height: 24px;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
     }
   }
 }

src/pages/index/helpToFindHouse/components/BuyHouse/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import '../../../../../assets/css/iconfont.css'
+import { Image, Input, Slider, Textarea } from '@tarojs/components'
+import SubmitBuyHouseResult from '../SubmitBuyHouseResult/index'
+
+export default function BuyHouse (props) {
+  const { change = () => { } } = props
+
+  const [SingleList] = useState([
+    { name: '首套', id: 1 },
+    { name: '二套', id: 2 }
+  ])
+  const [CurrnetSingleId, setCurrnetSingleId] = useState(null)
+
+  const [NewOldList] = useState([
+    { name: '新房', id: 1 },
+    { name: '二手房', id: 2 }
+  ])
+  const [CurrnetNewOldId, setCurrnetNewOldId] = useState(null)
+
+  const [HouseTypeList] = useState([
+    { name: '一室一厅', id: 1 },
+    { name: '二室一厅', id: 2 },
+    { name: '二室二厅', id: 3 },
+    { name: '三室一厅', id: 4 },
+    { name: '三室二厅', id: 5 },
+    { name: '四室一厅', id: 6 },
+    { name: '四室二厅', id: 7 },
+    { name: '五室及以上', id: 8 }
+  ])
+  const [CurrnetHouseTypeId, setCurrnetHouseTypeId] = useState(null)
+
+  const [AreaList] = useState([
+    { name: '60㎡以下', id: 1 },
+    { name: '60-90㎡', id: 2 },
+    { name: '90-110㎡', id: 3 },
+    { name: '110-130㎡', id: 4 },
+    { name: '130-150㎡', id: 5 },
+    { name: '150-200㎡', id: 6 },
+    { name: '200㎡以上', id: 7 }
+  ])
+  const [CurrnetAreaId, setCurrnetAreaId] = useState(null)
+
+  const [PreferenceList] = useState([
+    { name: '南北通透', id: 1 },
+    { name: '朝南', id: 2 },
+    { name: '低楼层', id: 3 },
+    { name: '高楼层', id: 4 },
+    { name: '精装修', id: 5 },
+    { name: '电梯房', id: 6 },
+    { name: '近地铁', id: 7 },
+    { name: '满五年', id: 8 },
+    { name: '满两年', id: 9 },
+    { name: '楼龄5年内', id: 10 },
+    { name: '楼龄10年内', id: 11 }
+  ])
+  const [CurrnetPreferenceId, setCurrnetPreferenceId] = useState(null)
+
+  const [GoalList] = useState([
+    { name: '刚需', id: 1 },
+    { name: '结婚', id: 2 },
+    { name: '养老', id: 3 },
+    { name: '改善', id: 4 },
+    { name: '教育', id: 5 },
+    { name: '投资', id: 6 }
+  ])
+  const [CurrnetGoalId, setCurrnetGoalId] = useState(null)
+
+  const [LongTimeList] = useState([
+    { name: '1月内', id: 1 },
+    { name: '6个月', id: 2 },
+    { name: '1年内', id: 3 },
+    { name: '1年后', id: 4 }
+  ])
+  const [CurrnetLongTimeId, setCurrnetLongTimeId] = useState(null)
+
+  const [StepId, setStepId] = useState(1)
+
+  const [ShowPopup, setShowPopup] = useState(false)
+
+  useEffect(() => {
+    change(StepId)
+  }, [StepId])
+
+  const CutSingleId = (id) => {
+    return () => {
+      setCurrnetSingleId(id === CurrnetSingleId ? null : id)
+    }
+  }
+
+  const CutNewOldId = (id) => {
+    return () => {
+      setCurrnetNewOldId(id === CurrnetNewOldId ? null : id)
+    }
+  }
+
+  const CutHouseTypeId = (id) => {
+    return () => {
+      setCurrnetHouseTypeId(id === CurrnetHouseTypeId ? null : id)
+    }
+  }
+
+  const CutAreaId = (id) => {
+    return () => {
+      setCurrnetAreaId(id === CurrnetAreaId ? null : id)
+    }
+  }
+
+  const CutPreferenceId = (id) => {
+    return () => {
+      setCurrnetPreferenceId(id === CurrnetPreferenceId ? null : id)
+    }
+  }
+
+  const CutGoalId = (id) => {
+    return () => {
+      setCurrnetGoalId(id === CurrnetGoalId ? null : id)
+    }
+  }
+
+  const CutLongTimeId = (id) => {
+    return () => {
+      setCurrnetLongTimeId(id === CurrnetLongTimeId ? null : id)
+    }
+  }
+
+  const PriceRangehange = (e) => {
+    console.log(e)
+  }
+
+  const NextStep = () => {
+    if (StepId < 4) {
+      setStepId(StepId + 1)
+    }
+  }
+
+  const PrevStep = () => {
+    if (StepId > 1) {
+      setStepId(StepId - 1)
+    }
+  }
+
+  return (
+    <view className='components BuyHouse'>
+      {
+        ShowPopup && 
+        <SubmitBuyHouseResult></SubmitBuyHouseResult>
+      }
+      {
+        StepId === 1 &&
+        <view className='Step'>
+          <view>
+            <text>意向区域</text>
+            <view className='Area'>
+              <view className='flex-h'>
+                <text className='iconfont icon-dingwei'></text>
+                <text>不限</text>
+                <view className='flex-item'></view>
+                <text className='iconfont icon-jiantoudown'></text>
+              </view>
+            </view>
+          </view>
+
+          <view>
+            <text>意向楼盘</text>
+            <view className='Purpose'>
+              <view>
+                <Input placeholder="请输入意向楼盘" />
+              </view>
+            </view>
+          </view>
+
+          <view>
+            <text>您想购买的是首套房还是二套房？</text>
+            <view className='CheckList'>
+              {
+                SingleList.map((item, index) => (
+                  <view key={`SingleItem-${index}`} className={CurrnetSingleId === item.id ? 'active' : ''} onClick={CutSingleId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+
+          <view>
+            <text>总价预算范围</text>
+            <view className='PriceRange'>
+              <view className='flex-h'>
+                <view className='flex-item'>
+                  <Input placeholder="最小面积㎡" />
+                </view>
+                <text>-</text>
+                <view className='flex-item'>
+                  <Input placeholder="最大面积㎡" />
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 2 &&
+        <view className='Step'>
+          <view>
+            <text>您想购买的是二手房还是新房？</text>
+            <view className='CheckList'>
+              {
+                NewOldList.map((item, index) => (
+                  <view key={`NewOldItem-${index}`} className={CurrnetNewOldId === item.id ? 'active' : ''} onClick={CutNewOldId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>居室要求</text>
+            <view className='CheckList'>
+              {
+                HouseTypeList.map((item, index) => (
+                  <view key={`HouseTypeItem-${index}`} className={CurrnetHouseTypeId === item.id ? 'active' : ''} onClick={CutHouseTypeId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>面积要求</text>
+            <view className='CheckList'>
+              {
+                AreaList.map((item, index) => (
+                  <view key={`AreaItem-${index}`} className={CurrnetAreaId === item.id ? 'active' : ''} onClick={CutAreaId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 3 &&
+        <view className='Step'>
+          <view>
+            <text>价格要求</text>
+            <view className='RangeList'>
+              <Slider activeColor="#193C83" block-color="#193C83" change={PriceRangehange} min="50" max="200" show-value />
+            </view>
+          </view>
+          <view>
+            <text>偏好设置</text>
+            <view className='CheckList'>
+              {
+                PreferenceList.map((item, index) => (
+                  <view key={`PreferenceItem-${index}`} className={CurrnetPreferenceId === item.id ? 'active' : ''} onClick={CutPreferenceId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>购房目的</text>
+            <view className='CheckList'>
+              {
+                GoalList.map((item, index) => (
+                  <view key={`GoalItem-${index}`} className={CurrnetGoalId === item.id ? 'active' : ''} onClick={CutGoalId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 4 &&
+        <view className='Step'>
+          <view>
+            <text>计划在多久购房？</text>
+            <view className='CheckList'>
+              {
+                LongTimeList.map((item, index) => (
+                  <view key={`LongTimeItem-${index}`} className={CurrnetLongTimeId === item.id ? 'active' : ''} onClick={CutLongTimeId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>您还有哪些需要备注的信息？</text>
+            <view className='Textarea'>
+              <Textarea placeholder="请说出您的其他需求，让我们更好的为您服务！" />
+            </view>
+          </view>
+        </view>
+      }
+
+      <view className='Btn'>
+        <text className='active' onClick={NextStep}>下一步</text>
+        <text onClick={PrevStep}>返回</text>
+      </view>
+    </view>
+  )
+}

src/pages/index/helpToFindHouse/components/BuyHouse/index.scss

+.components.BuyHouse {
+  position: relative;
+  overflow: hidden;
+  margin-top: 0 !important;
+  z-index: 1;
+  > .Step {
+    position: relative;
+    overflow: hidden;
+    > view {
+      position: relative;
+      overflow: hidden;
+      margin-top: 30px;
+      > text {
+        display: block;
+        font-size: 34px;
+        font-weight: bold;
+        color: #333;
+        line-height: 40px;
+      }
+      > view {
+        position: relative;
+        overflow: hidden;
+        margin-top: 20px;
+      }
+      > .Area {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 20px;
+          > text {
+            font-size: 26px;
+            color: #333;
+            line-height: 40px;
+            margin-left: 20px;
+            &:first-child {
+              margin-left: 0;
+              color: #193c83;
+            }
+          }
+        }
+      }
+      > .Purpose {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 20px;
+          > input {
+            font-size: 26px;
+            color: #333;
+            line-height: 40px;
+            display: block;
+            width: 100%;
+            background: none;
+          }
+        }
+      }
+      > .CheckList {
+        font-size: 0;
+        margin-top: 0;
+        > view {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 30px;
+          font-weight: bold;
+          color: #333;
+          line-height: 40px;
+          padding: 20px 0;
+          min-width: 194px;
+          box-sizing: border-box;
+          white-space: nowrap;
+          text-align: center;
+          border: 2px solid #193c83;
+          border-radius: 4px;
+          margin-right: 54px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 20px;
+          &:nth-child(3n+3) {
+            margin-right: 0;
+          }
+          &.active {
+            > image {
+              display: block;
+            }
+          }
+          > image {
+            display: none;
+            width: 36px;
+            height: 36px;
+            position: absolute;
+            right: -2px;
+            bottom: -2px;
+          }
+        }
+      }
+      > .PriceRange {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 0;
+          > view {
+            > input {
+              font-size: 26px;
+              color: #333;
+              line-height: 40px;
+              display: block;
+              width: 100%;
+              background: none;
+              text-align: center;
+            }
+          }
+        }
+      }
+      >.Textarea {
+        background: #f8f8f8;
+        border-radius: 12px;
+        padding: 20px;
+        >textarea {
+          font-size: 26px;
+          color: #333;
+          line-height: 40px;
+          display: block;
+          width: 100%;
+          background: none;
+        }
+      }
+    }
+  }
+  >.Btn {
+    padding: 0 30px;
+    margin: 150px auto 60px;
+    > text {
+      display: block;
+      text-align: center;
+      font-size: 32px;
+      line-height: 92px;
+      box-sizing: border-box;
+      border: 2px solid #193c83;
+      color: #193c83;
+      border-radius: 92px;
+      margin-top: 20px;
+      text-indent: 0;
+      font-weight: normal;
+      &.active {
+        background: #193c83;
+        color: #fff;
+      }
+    }
+  }
+}

src/pages/index/helpToFindHouse/components/HousePurchasing/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import '../../../../../assets/css/iconfont.css'
+import { Image, Input, Slider, Textarea } from '@tarojs/components'
+import SubmitBuyHouseResult from '../SubmitBuyHouseResult/index'
+
+export default function HousePurchasing (props) {
+  const { change = () => { } } = props
+
+  const [SingleList] = useState([
+    { name: '首套', id: 1 },
+    { name: '二套', id: 2 }
+  ])
+  const [CurrnetSingleId, setCurrnetSingleId] = useState(null)
+
+  const [NewOldList] = useState([
+    { name: '新房', id: 1 },
+    { name: '二手房', id: 2 }
+  ])
+  const [CurrnetNewOldId, setCurrnetNewOldId] = useState(null)
+
+  const [HouseTypeList] = useState([
+    { name: '一室一厅', id: 1 },
+    { name: '二室一厅', id: 2 },
+    { name: '二室二厅', id: 3 },
+    { name: '三室一厅', id: 4 },
+    { name: '三室二厅', id: 5 },
+    { name: '四室一厅', id: 6 },
+    { name: '四室二厅', id: 7 },
+    { name: '五室及以上', id: 8 }
+  ])
+  const [CurrnetHouseTypeId, setCurrnetHouseTypeId] = useState(null)
+
+  const [AreaList] = useState([
+    { name: '60㎡以下', id: 1 },
+    { name: '60-90㎡', id: 2 },
+    { name: '90-110㎡', id: 3 },
+    { name: '110-130㎡', id: 4 },
+    { name: '130-150㎡', id: 5 },
+    { name: '150-200㎡', id: 6 },
+    { name: '200㎡以上', id: 7 }
+  ])
+  const [CurrnetAreaId, setCurrnetAreaId] = useState(null)
+
+  const [PreferenceList] = useState([
+    { name: '南北通透', id: 1 },
+    { name: '朝南', id: 2 },
+    { name: '低楼层', id: 3 },
+    { name: '高楼层', id: 4 },
+    { name: '精装修', id: 5 },
+    { name: '电梯房', id: 6 },
+    { name: '近地铁', id: 7 },
+    { name: '满五年', id: 8 },
+    { name: '满两年', id: 9 },
+    { name: '楼龄5年内', id: 10 },
+    { name: '楼龄10年内', id: 11 }
+  ])
+  const [CurrnetPreferenceId, setCurrnetPreferenceId] = useState(null)
+
+  const [GoalList] = useState([
+    { name: '刚需', id: 1 },
+    { name: '结婚', id: 2 },
+    { name: '养老', id: 3 },
+    { name: '改善', id: 4 },
+    { name: '教育', id: 5 },
+    { name: '投资', id: 6 }
+  ])
+  const [CurrnetGoalId, setCurrnetGoalId] = useState(null)
+
+  const [LongTimeList] = useState([
+    { name: '1月内', id: 1 },
+    { name: '6个月', id: 2 },
+    { name: '1年内', id: 3 },
+    { name: '1年后', id: 4 }
+  ])
+  const [CurrnetLongTimeId, setCurrnetLongTimeId] = useState(null)
+
+  const [StepId, setStepId] = useState(1)
+
+  const [ShowPopup, setShowPopup] = useState(false)
+
+  useEffect(() => {
+    change(StepId)
+  }, [StepId])
+
+  const CutSingleId = (id) => {
+    return () => {
+      setCurrnetSingleId(id === CurrnetSingleId ? null : id)
+    }
+  }
+
+  const CutNewOldId = (id) => {
+    return () => {
+      setCurrnetNewOldId(id === CurrnetNewOldId ? null : id)
+    }
+  }
+
+  const CutHouseTypeId = (id) => {
+    return () => {
+      setCurrnetHouseTypeId(id === CurrnetHouseTypeId ? null : id)
+    }
+  }
+
+  const CutAreaId = (id) => {
+    return () => {
+      setCurrnetAreaId(id === CurrnetAreaId ? null : id)
+    }
+  }
+
+  const CutPreferenceId = (id) => {
+    return () => {
+      setCurrnetPreferenceId(id === CurrnetPreferenceId ? null : id)
+    }
+  }
+
+  const CutGoalId = (id) => {
+    return () => {
+      setCurrnetGoalId(id === CurrnetGoalId ? null : id)
+    }
+  }
+
+  const CutLongTimeId = (id) => {
+    return () => {
+      setCurrnetLongTimeId(id === CurrnetLongTimeId ? null : id)
+    }
+  }
+
+  const PriceRangehange = (e) => {
+    console.log(e)
+  }
+
+  const NextStep = () => {
+    if (StepId < 4) {
+      setStepId(StepId + 1)
+    }
+  }
+
+  const PrevStep = () => {
+    if (StepId > 1) {
+      setStepId(StepId - 1)
+    }
+  }
+
+  return (
+    <view className='components HousePurchasing'>
+      {
+        ShowPopup && 
+        <SubmitBuyHouseResult></SubmitBuyHouseResult>
+      }
+      {
+        StepId === 1 &&
+        <view className='Step'>
+          <view>
+            <text>意向区域</text>
+            <view className='Area'>
+              <view className='flex-h'>
+                <text className='iconfont icon-dingwei'></text>
+                <text>不限</text>
+                <view className='flex-item'></view>
+                <text className='iconfont icon-jiantoudown'></text>
+              </view>
+            </view>
+          </view>
+
+          <view>
+            <text>意向楼盘</text>
+            <view className='Purpose'>
+              <view>
+                <Input placeholder="请输入意向楼盘" />
+              </view>
+            </view>
+          </view>
+
+          <view>
+            <text>您想购买的是首套房还是二套房？</text>
+            <view className='CheckList'>
+              {
+                SingleList.map((item, index) => (
+                  <view key={`SingleItem-${index}`} className={CurrnetSingleId === item.id ? 'active' : ''} onClick={CutSingleId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+
+          <view>
+            <text>总价预算范围</text>
+            <view className='PriceRange'>
+              <view className='flex-h'>
+                <view className='flex-item'>
+                  <Input placeholder="最小面积㎡" />
+                </view>
+                <text>-</text>
+                <view className='flex-item'>
+                  <Input placeholder="最大面积㎡" />
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 2 &&
+        <view className='Step'>
+          <view>
+            <text>您想购买的是二手房还是新房？</text>
+            <view className='CheckList'>
+              {
+                NewOldList.map((item, index) => (
+                  <view key={`NewOldItem-${index}`} className={CurrnetNewOldId === item.id ? 'active' : ''} onClick={CutNewOldId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>居室要求</text>
+            <view className='CheckList'>
+              {
+                HouseTypeList.map((item, index) => (
+                  <view key={`HouseTypeItem-${index}`} className={CurrnetHouseTypeId === item.id ? 'active' : ''} onClick={CutHouseTypeId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>面积要求</text>
+            <view className='CheckList'>
+              {
+                AreaList.map((item, index) => (
+                  <view key={`AreaItem-${index}`} className={CurrnetAreaId === item.id ? 'active' : ''} onClick={CutAreaId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 3 &&
+        <view className='Step'>
+          <view>
+            <text>价格要求</text>
+            <view className='RangeList'>
+              <Slider activeColor="#193C83" block-color="#193C83" change={PriceRangehange} min="50" max="200" show-value />
+            </view>
+          </view>
+          <view>
+            <text>偏好设置</text>
+            <view className='CheckList'>
+              {
+                PreferenceList.map((item, index) => (
+                  <view key={`PreferenceItem-${index}`} className={CurrnetPreferenceId === item.id ? 'active' : ''} onClick={CutPreferenceId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>购房目的</text>
+            <view className='CheckList'>
+              {
+                GoalList.map((item, index) => (
+                  <view key={`GoalItem-${index}`} className={CurrnetGoalId === item.id ? 'active' : ''} onClick={CutGoalId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 4 &&
+        <view className='Step'>
+          <view>
+            <text>计划在多久购房？</text>
+            <view className='CheckList'>
+              {
+                LongTimeList.map((item, index) => (
+                  <view key={`LongTimeItem-${index}`} className={CurrnetLongTimeId === item.id ? 'active' : ''} onClick={CutLongTimeId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>您还有哪些需要备注的信息？</text>
+            <view className='Textarea'>
+              <Textarea placeholder="请说出您的其他需求，让我们更好的为您服务！" />
+            </view>
+          </view>
+        </view>
+      }
+
+      <view className='Btn'>
+        <text className='active' onClick={NextStep}>下一步</text>
+        <text onClick={PrevStep}>返回</text>
+      </view>
+    </view>
+  )
+}

src/pages/index/helpToFindHouse/components/HousePurchasing/index.scss

+.components.HousePurchasing {
+  position: relative;
+  overflow: hidden;
+  margin-top: 0 !important;
+  z-index: 1;
+  > .Step {
+    position: relative;
+    overflow: hidden;
+    > view {
+      position: relative;
+      overflow: hidden;
+      margin-top: 30px;
+      > text {
+        display: block;
+        font-size: 34px;
+        font-weight: bold;
+        color: #333;
+        line-height: 40px;
+      }
+      > view {
+        position: relative;
+        overflow: hidden;
+        margin-top: 20px;
+      }
+      > .Area {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 20px;
+          > text {
+            font-size: 26px;
+            color: #333;
+            line-height: 40px;
+            margin-left: 20px;
+            &:first-child {
+              margin-left: 0;
+              color: #193c83;
+            }
+          }
+        }
+      }
+      > .Purpose {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 20px;
+          > input {
+            font-size: 26px;
+            color: #333;
+            line-height: 40px;
+            display: block;
+            width: 100%;
+            background: none;
+          }
+        }
+      }
+      > .CheckList {
+        font-size: 0;
+        margin-top: 0;
+        > view {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 30px;
+          font-weight: bold;
+          color: #333;
+          line-height: 40px;
+          padding: 20px 0;
+          min-width: 194px;
+          box-sizing: border-box;
+          white-space: nowrap;
+          text-align: center;
+          border: 2px solid #193c83;
+          border-radius: 4px;
+          margin-right: 54px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 20px;
+          &:nth-child(3n+3) {
+            margin-right: 0;
+          }
+          &.active {
+            > image {
+              display: block;
+            }
+          }
+          > image {
+            display: none;
+            width: 36px;
+            height: 36px;
+            position: absolute;
+            right: -2px;
+            bottom: -2px;
+          }
+        }
+      }
+      > .PriceRange {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 0;
+          > view {
+            > input {
+              font-size: 26px;
+              color: #333;
+              line-height: 40px;
+              display: block;
+              width: 100%;
+              background: none;
+              text-align: center;
+            }
+          }
+        }
+      }
+      >.Textarea {
+        background: #f8f8f8;
+        border-radius: 12px;
+        padding: 20px;
+        >textarea {
+          font-size: 26px;
+          color: #333;
+          line-height: 40px;
+          display: block;
+          width: 100%;
+          background: none;
+        }
+      }
+    }
+  }
+  >.Btn {
+    padding: 0 30px;
+    margin: 150px auto 60px;
+    > text {
+      display: block;
+      text-align: center;
+      font-size: 32px;
+      line-height: 92px;
+      box-sizing: border-box;
+      border: 2px solid #193c83;
+      color: #193c83;
+      border-radius: 92px;
+      margin-top: 20px;
+      text-indent: 0;
+      font-weight: normal;
+      &.active {
+        background: #193c83;
+        color: #fff;
+      }
+    }
+  }
+}

src/pages/index/helpToFindHouse/components/RentingHouse/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import '../../../../../assets/css/iconfont.css'
+import { Image, Input, Slider, Textarea } from '@tarojs/components'
+import SubmitBuyHouseResult from '../SubmitBuyHouseResult/index'
+
+export default function RentingHouse (props) {
+  const { change = () => { } } = props
+
+  const [SingleList] = useState([
+    { name: '首套', id: 1 },
+    { name: '二套', id: 2 }
+  ])
+  const [CurrnetSingleId, setCurrnetSingleId] = useState(null)
+
+  const [NewOldList] = useState([
+    { name: '新房', id: 1 },
+    { name: '二手房', id: 2 }
+  ])
+  const [CurrnetNewOldId, setCurrnetNewOldId] = useState(null)
+
+  const [HouseTypeList] = useState([
+    { name: '一室一厅', id: 1 },
+    { name: '二室一厅', id: 2 },
+    { name: '二室二厅', id: 3 },
+    { name: '三室一厅', id: 4 },
+    { name: '三室二厅', id: 5 },
+    { name: '四室一厅', id: 6 },
+    { name: '四室二厅', id: 7 },
+    { name: '五室及以上', id: 8 }
+  ])
+  const [CurrnetHouseTypeId, setCurrnetHouseTypeId] = useState(null)
+
+  const [AreaList] = useState([
+    { name: '60㎡以下', id: 1 },
+    { name: '60-90㎡', id: 2 },
+    { name: '90-110㎡', id: 3 },
+    { name: '110-130㎡', id: 4 },
+    { name: '130-150㎡', id: 5 },
+    { name: '150-200㎡', id: 6 },
+    { name: '200㎡以上', id: 7 }
+  ])
+  const [CurrnetAreaId, setCurrnetAreaId] = useState(null)
+
+  const [PreferenceList] = useState([
+    { name: '南北通透', id: 1 },
+    { name: '朝南', id: 2 },
+    { name: '低楼层', id: 3 },
+    { name: '高楼层', id: 4 },
+    { name: '精装修', id: 5 },
+    { name: '电梯房', id: 6 },
+    { name: '近地铁', id: 7 },
+    { name: '满五年', id: 8 },
+    { name: '满两年', id: 9 },
+    { name: '楼龄5年内', id: 10 },
+    { name: '楼龄10年内', id: 11 }
+  ])
+  const [CurrnetPreferenceId, setCurrnetPreferenceId] = useState(null)
+
+  const [GoalList] = useState([
+    { name: '刚需', id: 1 },
+    { name: '结婚', id: 2 },
+    { name: '养老', id: 3 },
+    { name: '改善', id: 4 },
+    { name: '教育', id: 5 },
+    { name: '投资', id: 6 }
+  ])
+  const [CurrnetGoalId, setCurrnetGoalId] = useState(null)
+
+  const [LongTimeList] = useState([
+    { name: '1月内', id: 1 },
+    { name: '6个月', id: 2 },
+    { name: '1年内', id: 3 },
+    { name: '1年后', id: 4 }
+  ])
+  const [CurrnetLongTimeId, setCurrnetLongTimeId] = useState(null)
+
+  const [StepId, setStepId] = useState(1)
+
+  const [ShowPopup, setShowPopup] = useState(false)
+
+  useEffect(() => {
+    change(StepId)
+  }, [StepId])
+
+  const CutSingleId = (id) => {
+    return () => {
+      setCurrnetSingleId(id === CurrnetSingleId ? null : id)
+    }
+  }
+
+  const CutNewOldId = (id) => {
+    return () => {
+      setCurrnetNewOldId(id === CurrnetNewOldId ? null : id)
+    }
+  }
+
+  const CutHouseTypeId = (id) => {
+    return () => {
+      setCurrnetHouseTypeId(id === CurrnetHouseTypeId ? null : id)
+    }
+  }
+
+  const CutAreaId = (id) => {
+    return () => {
+      setCurrnetAreaId(id === CurrnetAreaId ? null : id)
+    }
+  }
+
+  const CutPreferenceId = (id) => {
+    return () => {
+      setCurrnetPreferenceId(id === CurrnetPreferenceId ? null : id)
+    }
+  }
+
+  const CutGoalId = (id) => {
+    return () => {
+      setCurrnetGoalId(id === CurrnetGoalId ? null : id)
+    }
+  }
+
+  const CutLongTimeId = (id) => {
+    return () => {
+      setCurrnetLongTimeId(id === CurrnetLongTimeId ? null : id)
+    }
+  }
+
+  const PriceRangehange = (e) => {
+    console.log(e)
+  }
+
+  const NextStep = () => {
+    if (StepId < 4) {
+      setStepId(StepId + 1)
+    }
+  }
+
+  const PrevStep = () => {
+    if (StepId > 1) {
+      setStepId(StepId - 1)
+    }
+  }
+
+  return (
+    <view className='components RentingHouse'>
+      {
+        ShowPopup && 
+        <SubmitBuyHouseResult></SubmitBuyHouseResult>
+      }
+      {
+        StepId === 1 &&
+        <view className='Step'>
+          <view>
+            <text>意向区域</text>
+            <view className='Area'>
+              <view className='flex-h'>
+                <text className='iconfont icon-dingwei'></text>
+                <text>不限</text>
+                <view className='flex-item'></view>
+                <text className='iconfont icon-jiantoudown'></text>
+              </view>
+            </view>
+          </view>
+
+          <view>
+            <text>意向楼盘</text>
+            <view className='Purpose'>
+              <view>
+                <Input placeholder="请输入意向楼盘" />
+              </view>
+            </view>
+          </view>
+
+          <view>
+            <text>您想购买的是首套房还是二套房？</text>
+            <view className='CheckList'>
+              {
+                SingleList.map((item, index) => (
+                  <view key={`SingleItem-${index}`} className={CurrnetSingleId === item.id ? 'active' : ''} onClick={CutSingleId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+
+          <view>
+            <text>总价预算范围</text>
+            <view className='PriceRange'>
+              <view className='flex-h'>
+                <view className='flex-item'>
+                  <Input placeholder="最小面积㎡" />
+                </view>
+                <text>-</text>
+                <view className='flex-item'>
+                  <Input placeholder="最大面积㎡" />
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 2 &&
+        <view className='Step'>
+          <view>
+            <text>您想购买的是二手房还是新房？</text>
+            <view className='CheckList'>
+              {
+                NewOldList.map((item, index) => (
+                  <view key={`NewOldItem-${index}`} className={CurrnetNewOldId === item.id ? 'active' : ''} onClick={CutNewOldId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>居室要求</text>
+            <view className='CheckList'>
+              {
+                HouseTypeList.map((item, index) => (
+                  <view key={`HouseTypeItem-${index}`} className={CurrnetHouseTypeId === item.id ? 'active' : ''} onClick={CutHouseTypeId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>面积要求</text>
+            <view className='CheckList'>
+              {
+                AreaList.map((item, index) => (
+                  <view key={`AreaItem-${index}`} className={CurrnetAreaId === item.id ? 'active' : ''} onClick={CutAreaId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 3 &&
+        <view className='Step'>
+          <view>
+            <text>价格要求</text>
+            <view className='RangeList'>
+              <Slider activeColor="#193C83" block-color="#193C83" change={PriceRangehange} min="50" max="200" show-value />
+            </view>
+          </view>
+          <view>
+            <text>偏好设置</text>
+            <view className='CheckList'>
+              {
+                PreferenceList.map((item, index) => (
+                  <view key={`PreferenceItem-${index}`} className={CurrnetPreferenceId === item.id ? 'active' : ''} onClick={CutPreferenceId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>购房目的</text>
+            <view className='CheckList'>
+              {
+                GoalList.map((item, index) => (
+                  <view key={`GoalItem-${index}`} className={CurrnetGoalId === item.id ? 'active' : ''} onClick={CutGoalId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+        </view>
+      }
+
+      {
+        StepId === 4 &&
+        <view className='Step'>
+          <view>
+            <text>计划在多久购房？</text>
+            <view className='CheckList'>
+              {
+                LongTimeList.map((item, index) => (
+                  <view key={`LongTimeItem-${index}`} className={CurrnetLongTimeId === item.id ? 'active' : ''} onClick={CutLongTimeId(item.id)}>
+                    {item.name}
+                    <Image mode='heightFix' src={require('../../../../../assets/findHouse-icon1.png')}></Image>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+          <view>
+            <text>您还有哪些需要备注的信息？</text>
+            <view className='Textarea'>
+              <Textarea placeholder="请说出您的其他需求，让我们更好的为您服务！" />
+            </view>
+          </view>
+        </view>
+      }
+
+      <view className='Btn'>
+        <text className='active' onClick={NextStep}>下一步</text>
+        <text onClick={PrevStep}>返回</text>
+      </view>
+    </view>
+  )
+}

src/pages/index/helpToFindHouse/components/RentingHouse/index.scss

+.components.RentingHouse {
+  position: relative;
+  overflow: hidden;
+  margin-top: 0 !important;
+  z-index: 1;
+  > .Step {
+    position: relative;
+    overflow: hidden;
+    > view {
+      position: relative;
+      overflow: hidden;
+      margin-top: 30px;
+      > text {
+        display: block;
+        font-size: 34px;
+        font-weight: bold;
+        color: #333;
+        line-height: 40px;
+      }
+      > view {
+        position: relative;
+        overflow: hidden;
+        margin-top: 20px;
+      }
+      > .Area {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 20px;
+          > text {
+            font-size: 26px;
+            color: #333;
+            line-height: 40px;
+            margin-left: 20px;
+            &:first-child {
+              margin-left: 0;
+              color: #193c83;
+            }
+          }
+        }
+      }
+      > .Purpose {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 20px;
+          > input {
+            font-size: 26px;
+            color: #333;
+            line-height: 40px;
+            display: block;
+            width: 100%;
+            background: none;
+          }
+        }
+      }
+      > .CheckList {
+        font-size: 0;
+        margin-top: 0;
+        > view {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 30px;
+          font-weight: bold;
+          color: #333;
+          line-height: 40px;
+          padding: 20px 0;
+          min-width: 194px;
+          box-sizing: border-box;
+          white-space: nowrap;
+          text-align: center;
+          border: 2px solid #193c83;
+          border-radius: 4px;
+          margin-right: 54px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 20px;
+          &:nth-child(3n+3) {
+            margin-right: 0;
+          }
+          &.active {
+            > image {
+              display: block;
+            }
+          }
+          > image {
+            display: none;
+            width: 36px;
+            height: 36px;
+            position: absolute;
+            right: -2px;
+            bottom: -2px;
+          }
+        }
+      }
+      > .PriceRange {
+        > view {
+          align-items: center;
+          background: #f8f8f8;
+          border-radius: 12px;
+          padding: 24px 0;
+          > view {
+            > input {
+              font-size: 26px;
+              color: #333;
+              line-height: 40px;
+              display: block;
+              width: 100%;
+              background: none;
+              text-align: center;
+            }
+          }
+        }
+      }
+      >.Textarea {
+        background: #f8f8f8;
+        border-radius: 12px;
+        padding: 20px;
+        >textarea {
+          font-size: 26px;
+          color: #333;
+          line-height: 40px;
+          display: block;
+          width: 100%;
+          background: none;
+        }
+      }
+    }
+  }
+  >.Btn {
+    padding: 0 30px;
+    margin: 150px auto 60px;
+    > text {
+      display: block;
+      text-align: center;
+      font-size: 32px;
+      line-height: 92px;
+      box-sizing: border-box;
+      border: 2px solid #193c83;
+      color: #193c83;
+      border-radius: 92px;
+      margin-top: 20px;
+      text-indent: 0;
+      font-weight: normal;
+      &.active {
+        background: #193c83;
+        color: #fff;
+      }
+    }
+  }
+}

src/pages/index/helpToFindHouse/components/SubmitBuyHouseResult/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import '../../../../../assets/css/iconfont.css'
+import { Image } from '@tarojs/components'
+
+export default function SubmitBuyHouseResult (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components SubmitBuyHouseResult'>
+      <view className='centerLabel'>
+        <view>
+          <view>
+
+            <view className='Status'>
+              <text className='iconfont icon-gou'></text>
+              <text>提交成功</text>
+            </view>
+
+            <view className='Tips'>
+              <text>已接收到您的需求我们预计将在48小时内联系您！</text>
+              <text>客服工作时间为周一至周五9:00-17:00</text>
+              <text>请保持电话畅通；谢谢！</text>
+            </view>
+
+            <view className='Btn flex-h'>
+              <text className='flex-item'>一键咨询</text>
+              <text className='flex-item active'>一键电话</text>
+            </view>
+
+            {/* 匹配楼盘 */}
+            <view className='Recommend'>
+              <view className='Title'>
+                <view>
+                  <text>匹配楼盘</text>
+                </view>
+              </view>
+              <view className='PlanTitle'>“方案一：综合匹配度<text>99%</text>”</view>
+              <view className='RecommendBuildingItem'>
+                <view>
+                  <view className='Img'>
+                    <Image mode='aspectFill' src={null} className='centerLabel'></Image>
+                  </view>
+                  <view className='Title flex-h'>
+                    <view className='flex-item'>
+                      <text>奥园金基天著尚居</text>
+                    </view>
+                    <view className='Price'>约<text>20000/㎡</text></view>
+                  </view>
+                  <text className='Address'>江宁禄口云熙99路号（诚信大道）</text>
+                </view>
+              </view>
+            </view>
+
+          </view>
+        </view>
+      </view>
+    </view>
+  )
+}

src/pages/index/helpToFindHouse/components/SubmitBuyHouseResult/index.scss

+.components.SubmitBuyHouseResult {
+  width: 100%;
+  position: fixed !important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  margin: 0 !important;
+  padding: 0 !important;
+  z-index: 100 !important;
+  >view {
+    width: 100%;
+    >view {
+      padding: 0 30px;
+      position: relative;
+      overflow: hidden;
+      >view {
+        position: relative;
+        overflow: hidden;
+        min-height: 80px;
+        background: #fff;
+        border-radius: 24px;
+        >.Status {
+          text-align: center;
+          margin-top: 40px;
+          >text {
+            font-size: 34px;
+            font-weight: bold;
+            color: #193C83;
+            display: block;
+            text-align: center;
+            line-height: 34px;
+            &.iconfont {
+              font-size: 100px;
+              line-height: 100px;
+              font-weight: normal;
+              margin-bottom: 22px;
+            }
+          }
+        }
+        >.Tips {
+          position: relative;
+          overflow: hidden;
+          margin-top: 30px;
+          >text {
+            display: block;
+            text-align: center;
+            font-size: 26px;
+            color: #666;
+            line-height: 50px;
+            white-space: nowrap;
+          }
+        }
+        >.Btn {
+          padding: 0 80px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 40px;
+          align-items: center;
+          margin-bottom: 60px;
+          >text {
+            font-size: 30px;
+            line-height: 78px;
+            border-radius: 78px;
+            margin-left: 60px;
+            text-align: center;
+            border: 2px solid #193C83;
+            box-sizing: border-box;
+            color: #193C83;
+            font-weight: bold;
+            &:first-child {
+              margin-left: 0;
+            }
+            &.active {
+              background: #193C83;
+              color: #fff;
+            }
+          }
+        }
+        >.Recommend {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          >.Title {
+            position: relative;
+            overflow: hidden;
+            &::after {
+              content: '';
+              width: 100%;
+              display: block;
+              position: absolute;
+              left: 0;
+              top: 14px;
+              height: 2px;
+              background: rgba(0, 0, 0, 0.12);
+              z-index: 1;
+            }
+            >view {
+              display: block;
+              position: relative;
+              z-index: 2;
+              margin: 0 auto;
+              width: 260px;
+              background: #fff;
+              text-align: center;
+              font-size: 0;
+              &::after {
+                content: '';
+                width: 100%;
+                display: block;
+                position: absolute;
+                left: 0;
+                top: 14px;
+                height: 0;
+                z-index: 2;
+                border-bottom: 2px dashed #333;
+              }
+              >text {
+                display: inline-block;
+                position: relative;
+                z-index: 3;
+                font-size: 30px;
+                line-height: 30px;
+                font-weight: bold;
+                color: #666;
+                background: #fff;
+                padding: 0 40px;
+              }
+            }
+          }
+          >.PlanTitle {
+            font-size: 30px;
+            font-weight: bold;
+            white-space: nowrap;
+            position: relative;
+            overflow: hidden;
+            margin-top: 40px;
+            text-align: center;
+            >text {
+              color: #FC3838;
+            }
+          }
+          >.RecommendBuildingItem {
+            position: relative;
+            overflow: hidden;
+            padding: 0 60px;
+            margin-top: 30px;
+            margin-bottom: 50px;
+            >view {
+              position: relative;
+              overflow: hidden;
+              >.Img {
+                width: 100%;
+                padding-bottom: 60%;
+                position: relative;
+                overflow: hidden;
+                background: #eee;
+                >image {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+              >.Title {
+                align-items: flex-start;
+                margin-top: 24px;
+                >.flex-item {
+                  >text {
+                    display: block;
+                    font-size: 32px;
+                    font-weight: bold;
+                    color: #333;
+                    line-height: 40px;
+                  }
+                }
+                >.Price {
+                  font-size: 22px;
+                  font-weight: bold;
+                  color: #333;
+                  margin-left: 10px;
+                  line-height: 40px;
+                  >text {
+                    color: #FC2C2C;
+                  }
+                }
+              }
+              >.Address {
+                font-size: 22px;
+                color: #666;
+                line-height: 30px;
+                margin-top: 20px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/index/helpToFindHouse/index.jsx

 import React, { useState, useEffect } from 'react'
 import withLayout from '@/layout'
 import './index.scss'
-import { ScrollView } from '@tarojs/components'
+import { ScrollView, Image, Input } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
+import BuyHouse from './components/BuyHouse/index'
+import RentingHouse from './components/RentingHouse/index'
+import HousePurchasing from './components/HousePurchasing/index'
 
 export default withLayout((props) => {
 
   // const [PageProps] = useState(props)
-  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
-  const [IsPull, setPull] = useState(false)
-  const [PullTimer, setPullTimer] = useState(null)
+  const [DemandList] = useState([
+    { name: '我要买房', id: 1, icon: '', spell: 'MAI FANG' },
+    { name: '我要租房', id: 2, icon: '', spell: 'ZU FANG' },
+    { name: '海外置业', id: 3, icon: '', spell: 'ZHI YE' }
+  ])
+  const [CurrentDemandId, setCurrentDemandId] = useState(2)
+  const [ShowDemand, setShowDemand] = useState(true)
 
-  const PageRefresh = () => { // 页面下拉刷新回调
-    setPull(true)
+  const CutDemandId = (id) => {
+    return () => {
+      setCurrentDemandId(id)
+    }
   }
 
-  useEffect(() => { // 下拉刷新触发
-    if (IsPull) {
-      clearTimeout(PullTimer)
-      setPullTimer(setTimeout(() => {
-        setPull(false)
-      }, 2000))
-    }
-  }, [IsPull])
+  const StepChange = (id) => {
+    setShowDemand(id === 1)
+  }
 
   return (
     <view className='Page helpToFindHouse'>
 
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+      <ScrollView scroll-y={true} refresher-enabled={false}>
         <view className='PageContent'>
 
-          帮我找房
+          {
+            ShowDemand &&
+            <view>
+              <text>选择您的需求</text>
+              <view className='Demand flex-h'>
+                {
+                  DemandList.map((item, index) => (
+                    <view key={`DemandItem-${index}`} className={CurrentDemandId === item.id ? 'flex-item active' : 'flex-item'} onClick={CutDemandId(item.id)}>
+                      <Image mode='heightFix' src={item.icon || null}></Image>
+                      <text>{item.name}</text>
+                      <text>{item.spell}</text>
+                    </view>
+                  ))
+                }
+              </view>
+            </view>
+          }
+
+          {/* 买房 */}
+          {
+            CurrentDemandId === 1 &&
+            <BuyHouse change={StepChange}></BuyHouse>
+          }
+
+          {/* 租房 */}
+          {
+            CurrentDemandId === 2 &&
+            <RentingHouse></RentingHouse>
+          }
 
-          {/* bottom */}
-          <view className='PageBottom'>
-            <text>已经到底了~</text>
-          </view>
+          {/* 置业 */}
+          {
+            CurrentDemandId === 3 &&
+            <HousePurchasing></HousePurchasing>
+          }
 
         </view>
       </ScrollView>

src/pages/index/helpToFindHouse/index.scss

       position: relative;
       overflow: hidden;
       min-height: 100vh;
+      > view {
+        position: relative;
+        overflow: hidden;
+        &:first-child {
+          margin-top: 30px;
+        }
+        > text {
+          display: block;
+          font-size: 34px;
+          font-weight: bold;
+          color: #333;
+          line-height: 40px;
+          text-indent: 30px;
+        }
+        > view {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 20px;
+        }
+        > .Demand {
+          align-items: center;
+          > view {
+            box-sizing: border-box;
+            border: 2px solid #333;
+            border-radius: 8px;
+            margin-left: 30px;
+            position: relative;
+            overflow: hidden;
+            padding: 0 20px;
+            &:first-child {
+              margin-left: 0;
+            }
+            &.active {
+              border-color: #193c83;
+              > text {
+                color: #193c83;
+              }
+            }
+            > image {
+              width: 24px;
+              height: 24px;
+              display: block;
+              margin: 10px auto 0;
+            }
+            > text {
+              font-size: 30px;
+              line-height: 30px;
+              display: block;
+              text-align: center;
+              margin-top: 10px;
+              &:last-child {
+                font-size: 24px;
+                font-weight: bold;
+                color: #ccc;
+                padding: 6px 0;
+                border-top: 2px solid #eee;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

src/pages/index/newsDetail/index.jsx

 import './index.scss'
 import { ScrollView } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
+import { Image, RichText } from '@tarojs/components'
 
 export default withLayout((props) => {
 
   }, [IsPull])
 
   return (
-    <view className='Page newsDetail'>
+    <view className='Page newsDetail flex-v'>
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+            <view className='PageContent'>
 
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
-        <view className='PageContent'>
+              <view className='Info'>
+                <view>
+                  <text className='Title'>公积金又有新变化，附最新南京公积金贷款和提取方法。</text>
+                  <view>
+                    <text>阅读：28</text>
+                    <text>点赞15</text>
+                    <text>收藏22</text>
+                  </view>
+                  <text className='Time'>时间：2019-10-20 10:00 </text>
+                  <text className='Share'>分享好友</text>
+                </view>
+              </view>
 
-          资讯详情
-
-          {/* bottom */}
-          <view className='PageBottom'>
-            <text>已经到底了~</text>
-          </view>
+              <view className='Content'>
+                <RichText nodes={'<p>这是内容</p>'}></RichText>
+              </view>
 
+            </view>
+          </ScrollView>
         </view>
-      </ScrollView>
-
+      </view>
+      <view className='Bottom'>
+        <view>
+          <Image mode='heightFix' src={require('../../../assets/buildingDetail-icon3.png')}></Image>
+          <text>生成海报</text>
+        </view>
+        <view>
+          <text className='iconfont icon-shoucang'></text>
+          <text>收藏</text>
+        </view>
+      </view>
     </view>
   )
 })

src/pages/index/newsDetail/index.scss

 .Page.newsDetail {
   background: #fff;
-  > scroll-view {
-    width: 100%;
-    height: 100%;
-    .PageContent {
-      position: relative;
+  >.flex-item {
+    position: relative;
+    z-index: 1;
+    >view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
       overflow: hidden;
-      min-height: 100vh;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .PageContent {
+          position: relative;
+          overflow: hidden;
+          min-height: 100vh;
+          >.Info {
+            padding: 0 30px;
+            position: relative;
+            overflow: visible;
+            margin-top: 30px;
+            >view {
+              background: #fff;
+              position: relative;
+              overflow: hidden;
+              box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+              padding: 20px;
+              >.Title {
+                display: block;
+                font-size: 34px;
+                font-weight: bold;
+                color: #333;
+                line-height: 40px;
+              }
+              >view {
+                font-size: 0;
+                white-space: nowrap;
+                margin-top: 30px;
+                >text {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 28px;
+                  color: #333;
+                  margin-left: 40px;
+                  &:first-child {
+                    margin-left: 0;
+                  }
+                }
+              }
+              >.Time {
+                display: block;
+                font-size: 28px;
+                color: #333;
+                margin-top: 20px;
+              }
+              >.Share {
+                display: block;
+                text-align: center;
+                font-size: 32px;
+                line-height: 92px;
+                background: #F2F2F2;
+                border-radius: 92px;
+                margin-top: 30px;
+                margin-bottom: 20px;
+              }
+            }
+          }
+          >.Content {
+            padding: 0 30px;
+            position: relative;
+            overflow: hidden;
+            margin-top: 30px;
+          }
+        }
+      }
+    }
+  }
+  >.Bottom {
+    font-size: 0;
+    white-space: nowrap;
+    position: relative;
+    z-index: 2;
+    background: #fff;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+    text-align: center;
+    padding: 20px 0;
+    >view {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 74px;
+      &:first-child {
+        margin-left: 0;
+      }
+      >image {
+        width: 40px;
+        height: 40px;
+        display: block;
+        margin: 0 auto;
+      }
+      >text {
+        display: block;
+        font-size: 30px;
+        text-align: center;
+        margin-top: 10px;
+        line-height: 40px;
+        &:first-child {
+          margin-top: 0;
+          font-size: 44px;
+        }
+      }
     }
   }
 }

src/pages/index/newsList/index.jsx

 import './index.scss'
 import { ScrollView } from '@tarojs/components'
 import '../../../assets/css/iconfont.css'
+import NewsListItem from '../components/NewsListItem/index'
 
 export default withLayout((props) => {
 
       <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
         <view className='PageContent'>
 
-          新闻资讯
+          {
+            PageList.map((item, index) => (
+              <NewsListItem></NewsListItem>
+            ))
+          }
 
           {/* bottom */}
           <view className='PageBottom'>

src/pages/index/newsList/index.scss

       position: relative;
       overflow: hidden;
       min-height: 100vh;
+      padding: 0 30px;
+      >view {
+        margin-top: 30px;
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
     }
   }
 }

src/pages/mine/components/MyActivityListItem/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+
+export default function MyActivityListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components MyActivityListItem' onClick={() => { Taro.navigateTo({ url: `/pages/index/activityDetail/index?id=${Data.id}` }) }}>
+      <view className='Img'>
+        {
+          Data.img &&
+          <Image mode='aspectFill' className='centerLabel' src={Data.img || null} />
+        }
+      </view>
+      <view className='Info'>
+        <text className='Name'>5D沉浸式剧场</text>
+        <text className='Address'>江宁禄口云熙99路号（诚信大道）</text>
+        <text className='Time'>活动时间：2019/10/20 10:00 - 2019/10/22 10:00</text>
+      </view>
+    </view>
+  )
+}

src/pages/mine/components/MyActivityListItem/index.scss

+.components.MyActivityListItem {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+  >.Img {
+    width: 100%;
+    padding-bottom: 56.25%;
+    background: #eee;
+    position: relative;
+    overflow: hidden;
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  >.Info {
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+    >text {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1;
+      &.Name {
+        font-size: 34px;
+        margin-top: 6px;
+        font-weight: bold;
+      }
+      &.Address {
+        font-size: 22px;
+        color: #666;
+        margin-top: 30px;
+      }
+      &.Time {
+        font-size: 24px;
+        color: #999;
+        margin-top: 30px;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}

src/pages/mine/components/MyCollectForActivity/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import ActivityListItem from '../../../index/components/ActivityListItem/index'
+
+export default function MyCollectForActivity (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components MyCollectForActivity'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+          <view className='List'>
+            {
+              PageList.map((item, index) => (
+                <ActivityListItem Data={item} key={`ActivityListItem-${index}`}></ActivityListItem>
+              ))
+            }
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/MyCollectForActivity/index.scss

+.components.MyCollectForActivity {
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+  >scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      min-height: 100vh;
+      position: relative;
+      overflow: visible;
+      padding: 0 30px;
+      >.List {
+        >view {
+          margin-top: 30px;
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/MyCollectForBuilding/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import MyShareListItem from '../MyShareListItem/index'
+
+export default function MyCollectForBuilding (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components MyCollectForBuilding'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+          <view className='List'>
+            {
+              PageList.map((item, index) => (
+                <MyShareListItem Data={item} key={`MyShareListItem-${index}`}></MyShareListItem>
+              ))
+            }
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/MyCollectForBuilding/index.scss

+.components.MyCollectForBuilding {
+  position: relative;
+  overflow: hidden;
+  >scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      min-height: 100vh;
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      >.List {
+        >view {
+          margin-top: 30px;
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/MyCollectForCourse/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import MyCourseListItem from '../../components/MyCourseListItem/index'
+
+export default function MyCollectForCourse (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components MyCollectForCourse'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+          <view className='List'>
+            {
+              PageList.map((item, index) => (
+                <MyCourseListItem Data={item} key={`MyCourseListItem-${index}`}></MyCourseListItem>
+              ))
+            }
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/MyCollectForCourse/index.scss

+.components.MyCollectForCourse {
+  position: relative;
+  overflow: hidden;
+  >scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      min-height: 100vh;
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      >.List {
+        >view {
+          margin-top: 30px;
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/MyCollectForNews/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import NewsListItem from '../../../index/components/NewsListItem/index'
+
+export default function MyCollectForNews (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components MyCollectForNews'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+          <view className='List'>
+            {
+              PageList.map((item, index) => (
+                <NewsListItem Data={item} key={`NewsListItem-${index}`}></NewsListItem>
+              ))
+            }
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/MyCollectForNews/index.scss

+.components.MyCollectForNews {
+  position: relative;
+  overflow: hidden;
+  >scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      min-height: 100vh;
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      >.List {
+        >view {
+          margin-top: 30px;
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/MyCourseListItem/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+
+export default function MyCourseListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components MyCourseListItem flex-h' onClick={() => {Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${Data.id}` })}}>
+      <view className='Img'>
+        <view>
+          {
+            Data.img &&
+            <Image mode='aspectFill' className='centerLabel' src={Data.img || null} />
+          }
+        </view>
+      </view>
+      <view className='flex-item'>
+        <view className='Name flex-h'>
+          <view className='flex-item'>
+            <text>课程名称</text>
+          </view>
+        </view>
+        <text className='Address'>课程描述...</text>
+        <view className='ShareInfo'>
+          <view className='Users'>
+            <view></view>
+            <view></view>
+            <view></view>
+          </view>
+          <text>...9人查看</text>
+        </view>
+      </view>
+    </view>
+  )
+}

src/pages/mine/components/MyCourseListItem/index.scss

+.components.MyCourseListItem {
+  padding-bottom: 30px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  > .Img {
+    width: 260px;
+    position: relative;
+    overflow: hidden;
+    margin-right: 20px;
+    > view {
+      width: 100%;
+      padding-bottom: 60%;
+      background: #eee;
+      position: relative;
+      overflow: hidden;
+      border-radius: 8px;
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  > .flex-item {
+    > .Name {
+      align-items: center;
+      > .flex-item {
+        margin-right: 10px;
+        > text {
+          display: block;
+          font-size: 28px;
+          font-weight: bold;
+          color: #000;
+          line-height: 40px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      > text {
+        font-size: 24px;
+        line-height: 40px;
+        color: #000;
+        &:last-child {
+          color: red;
+        }
+      }
+    }
+    > .Address {
+      display: block;
+      font-size: 24px;
+      color: #666;
+      line-height: 40px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    > .Tags {
+      font-size: 0;
+      white-space: nowrap;
+      > text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 16px;
+        padding: 0 10px;
+        line-height: 36px;
+        background: #FBAB57;
+        color: #333;
+        margin-right: 10px;
+      }
+    }
+    > .ShareInfo {
+      font-size: 0;
+      white-space: nowrap;
+      margin-top: 10px;
+      > text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 24px;
+        color: #333;
+        line-height: 40px;
+        margin-left: 10px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+      > .Users {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 0;
+        white-space: nowrap;
+        > view {
+          display: inline-block;
+          vertical-align: middle;
+          width: 40px;
+          height: 40px;
+          background: #eee;
+          border-radius: 100%;
+          margin-left: -10px;
+          position: relative;
+          &:nth-child(1) {
+            z-index: 1;
+            margin-left: 0;
+          }
+          &:nth-child(2) {
+            z-index: 2;
+          }
+          &:nth-child(3) {
+            z-index: 3;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/MyCustomerListItem/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+
+export default function MyCustomerListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components MyCustomerListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/index/activityDetail/index?id=${Data.id}` }) }}>
+      <view className='Img'>
+        {
+          Data.img &&
+          <Image mode='aspectFill' className='centerLabel' src={Data.img || null} />
+        }
+      </view>
+      <view className='flex-item'>
+        <view className='Name flex-h'>
+          <text className='flex-item'>徐慧慧</text>
+          <text>11/11 15:12:58收回</text>
+        </view>
+        <view className='Time flex-h'>
+          <text className='flex-item'>136 **** 9434</text>
+          <text>跟进状态</text>
+        </view>
+      </view>
+    </view>
+  )
+}

src/pages/mine/components/MyCustomerListItem/index.scss

+.components.MyCustomerListItem {
+  position: relative;
+  overflow: hidden;
+  padding: 12px 0;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+  align-items: center;
+  >.Img {
+    width: 92px;
+    height: 92px;
+    min-width: 92px;
+    background: #eee;
+    position: relative;
+    overflow: hidden;
+    border-radius: 100%;
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+    margin-left: 30px;
+    >view {
+      align-items: center;
+      &.Name {
+        >text {
+          font-size: 20px;
+          color: #999;
+          white-space: nowrap;
+          line-height: 1;
+          &:first-child {
+            font-size: 32px;
+            color: #333;
+          }
+        }
+      }
+      &.Time {
+        margin-top: 16px;
+        >text {
+          font-size: 28px;
+          color: #666;
+          white-space: nowrap;
+          line-height: 1;
+          &.active {
+            color: #193C83;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/MyShareListItem/index.jsx

+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+
+export default function MyShareListItem (props) {
+  const { Data = {} } = props
+  return (
+    <view className='components MyShareListItem flex-h' onClick={() => {Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${Data.id}` })}}>
+      <view className='Img'>
+        <view>
+          {
+            Data.img &&
+            <Image mode='aspectFill' className='centerLabel' src={Data.img || null} />
+          }
+        </view>
+      </view>
+      <view className='flex-item'>
+        <view className='Name flex-h'>
+          <view className='flex-item'>
+            <text>楼盘名称</text>
+          </view>
+        </view>
+        <view className='Price'>约<text>20000m²</text></view>
+        <text className='Address'>楼盘地址sdsdsdsdsds</text>
+        <view className='ShareInfo'>
+          <view className='Users'>
+            <view></view>
+            <view></view>
+            <view></view>
+          </view>
+          <text>...9人查看</text>
+        </view>
+      </view>
+    </view>
+  )
+}

src/pages/mine/components/MyShareListItem/index.scss

+.components.MyShareListItem {
+  padding-bottom: 30px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  > .Img {
+    width: 260px;
+    position: relative;
+    overflow: hidden;
+    margin-right: 20px;
+    > view {
+      width: 100%;
+      padding-bottom: 60%;
+      background: #eee;
+      position: relative;
+      overflow: hidden;
+      border-radius: 8px;
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  > .flex-item {
+    > .Name {
+      align-items: center;
+      > .flex-item {
+        margin-right: 10px;
+        > text {
+          display: block;
+          font-size: 28px;
+          font-weight: bold;
+          color: #000;
+          line-height: 30px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      > text {
+        font-size: 24px;
+        line-height: 40px;
+        color: #000;
+        &:last-child {
+          color: red;
+        }
+      }
+    }
+    >.Price {
+      font-size: 22px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 8px;
+      >text {
+        color: #FC2C2C;
+      }
+    }
+    > .Address {
+      display: block;
+      font-size: 22px;
+      color: #666;
+      line-height: 28px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-top: 8px;
+    }
+    > .ShareInfo {
+      font-size: 0;
+      white-space: nowrap;
+      margin-top: 10px;
+      > text {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 24px;
+        color: #333;
+        line-height: 40px;
+        margin-left: 10px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+      > .Users {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 0;
+        white-space: nowrap;
+        > view {
+          display: inline-block;
+          vertical-align: middle;
+          width: 40px;
+          height: 40px;
+          background: #eee;
+          border-radius: 100%;
+          margin-left: -10px;
+          position: relative;
+          &:nth-child(1) {
+            z-index: 1;
+            margin-left: 0;
+          }
+          &:nth-child(2) {
+            z-index: 2;
+          }
+          &:nth-child(3) {
+            z-index: 3;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/feedBack/index.config.js

+export default {
+  navigationBarTitleText: '意见反馈'
+}

src/pages/mine/feedBack/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView, Input } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+
+  return (
+    <view className='Page feedBack flex-v'>
+
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
+            <view className='PageContent'>
+              <text className='Title'>问题描述</text>
+              <view>
+                <Input placeholder='请填写10个字以上的问题描述以便我们提供更好的帮助'></Input>
+              </view>
+              <text className='Title'>联系方式（选填）</text>
+              <view>
+                <Input placeholder='输入邮箱/手机号方便联系'></Input>
+              </view>
+            </view>
+          </ScrollView>
+        </view>
+      </view>
+
+      <view className='Bottom'>
+        <text>提交</text>
+      </view>
+
+    </view>
+  )
+})

src/pages/mine/feedBack/index.scss

+.Page.feedBack {
+  background: #fff;
+  > .flex-item {
+    position: relative;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .PageContent {
+          position: relative;
+          overflow: hidden;
+          min-height: 100vh;
+          > .Title {
+            font-size: 34px;
+            font-weight: bold;
+            color: #333;
+            display: block;
+            text-indent: 38px;
+            margin-top: 30px;
+          }
+          > view {
+            padding: 15px 38px;
+            border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+            margin-top: 10px;
+            > input {
+              display: block;
+              width: 100%;
+              background: none;
+              font-size: 26px;
+              line-height: 30px;
+              height: 30px;
+            }
+          }
+        }
+      }
+    }
+  }
+  >.Bottom {
+    padding: 40px;
+    >text {
+      display: block;
+      text-align: center;
+      font-size: 32px;
+      line-height: 92px;
+      color: #fff;
+      font-weight: bold;
+      background: #193C83;
+      border-radius: 92px;
+    }
+  }
+}

src/pages/mine/index.jsx

 import { ScrollView, Image } from '@tarojs/components'
 import '../../assets/css/iconfont.css'
 import MineMenuList from './tabData'
+import Taro from '@tarojs/taro'
 
 export default withLayout((props) => {
 
     }
   }, [IsPull])
 
+  const MenuClick = (router) => {
+    return () => {
+      if (router) {
+        Taro.navigateTo({ url: router })
+      }
+    }
+  }
+
   return (
     <view className='Page Mine'>
 
                     <view>
                       <text>用户姓名</text>
                       <view>
-                        <text className='iconfont icon-bianji'></text>
-                        <text>个人信息资料修改</text>
+                        <text className='iconfont icon-bianji' onClick={() => { Taro.navigateTo({ url: `/pages/mine/userInfo/index` }) }}></text>
+                        <text onClick={() => { Taro.navigateTo({ url: `/pages/mine/userInfo/index` }) }}>个人信息资料修改</text>
                       </view>
                     </view>
                     <text className='Role'>{UserRole === 1 ? '客户' : UserRole === 2 ? '经纪人' : UserRole === 3 ? '置业顾问' : '驻场管理'}</text>
                     <view>
                       {
                         item.map((subItem, subIndex) => (
-                          <view key={`MenuItem-${index}-${subIndex}`} className='flex-h'>
+                          <view key={`MenuItem-${index}-${subIndex}`} className='flex-h' onClick={MenuClick(subItem.router)}>
                             <view className='Icon'>
                               <Image mode='aspectFit' className='centerLabel' src={subItem.icon} />
                             </view>

src/pages/mine/myActivity/index.config.js

+export default {
+  navigationBarTitleText: '我的活动'
+}

src/pages/mine/myActivity/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+import MyActivityListItem from '../components/MyActivityListItem/index'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page myActivity'>
+
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#f8f8f8'>
+        <view className='PageContent'>
+          <view className='List'>
+            {
+              PageList.map((item, index) => (
+                <view>
+                  <text>2021-05-23 12:00</text>
+                  <MyActivityListItem Data={item} key={`MyActivityListItem-${index}`}></MyActivityListItem>
+                </view>
+              ))
+            }
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+
+        </view>
+      </ScrollView>
+
+    </view>
+  )
+})

src/pages/mine/myActivity/index.scss

+.Page.myActivity {
+  background: #f8f8f8;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+      padding: 0 30px;
+      >.List {
+        >view {
+          margin-top: 30px;
+          position: relative;
+          overflow: visible;
+          >text {
+            display: block;
+            font-size: 28px;
+            line-height: 40px;
+            margin-bottom: 30px;
+          }
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}

src/pages/mine/myCollect/index.config.js

+export default {
+  navigationBarTitleText: '我的收藏'
+}

src/pages/mine/myCollect/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import '../../../assets/css/iconfont.css'
+import MyCollectForBuilding from '../components/MyCollectForBuilding/index'
+import MyCollectForNews from '../components/MyCollectForNews/index'
+import MyCollectForActivity from '../components/MyCollectForActivity/index'
+import MyCollectForCourse from '../components/MyCollectForCourse/index'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [MenuList] = useState([
+    { name: '项目', id: 1 },
+    { name: '资讯', id: 2 },
+    { name: '活动', id: 3 },
+    { name: '课程', id: 4 }
+  ])
+  const [CurrentMenuId, setCurrentMenuId] = useState(1)
+
+  const CutMenu = (id) => {
+    return () => {
+      if (id !== CurrentMenuId) {
+        setCurrentMenuId(id)
+      }
+    }
+  }
+
+  return (
+    <view className='Page MyCollect flex-v'>
+      <view className='Menu'>
+        <view className='flex-h'>
+          {
+            MenuList.map((item, index) => (
+              <view className={item.id === CurrentMenuId ? 'flex-item active' : 'flex-item'} key={`MenuItem-${index}`} onClick={CutMenu(item.id)}>
+                <text>{item.name}</text>
+              </view>
+            ))
+          }
+        </view>
+      </view>
+      <view className='flex-item'>
+        <view>
+
+          {/* 项目 */}
+          {
+            CurrentMenuId === 1 &&
+            <MyCollectForBuilding></MyCollectForBuilding>
+          }
+
+          {/* 资讯 */}
+          {
+            CurrentMenuId === 2 &&
+            <MyCollectForNews></MyCollectForNews>
+          }
+
+          {/* 活动 */}
+          {
+            CurrentMenuId === 3 &&
+            <MyCollectForActivity></MyCollectForActivity>
+          }
+
+          {/* 课程 */}
+          {
+            CurrentMenuId === 4 &&
+            <MyCollectForCourse></MyCollectForCourse>
+          }
+          
+        </view>
+      </view>
+    </view>
+  )
+})

src/pages/mine/myCollect/index.scss

+.Page.MyCollect {
+  background: #fff;
+  >.Menu {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    >view {
+      position: relative;
+      overflow: hidden;
+      align-items: center;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+      >view {
+        text-align: center;
+        font-size: 0;
+        &.active {
+          >text {
+            font-weight: bold;
+            &::after {
+              content: '';
+              width: 100%;
+              height: 4px;
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              background: #193C83;
+              display: block;
+            }
+          }
+        }
+        >text {
+          font-size: 32px;
+          line-height: 1;
+          display: inline-block;
+          position: relative;
+          padding: 20px 0;
+        }
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      >view {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/pages/mine/myCustomer/index.config.js

+export default {
+  navigationBarTitleText: '我的客户'
+}

src/pages/mine/myCustomer/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+import MyCustomerListItem from '../components/MyCustomerListItem/index'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page myCustomer flex-v'>
+
+      <view className='Filter'>
+        <view className='flex-h'>
+          <view className='Time'>
+            <text>全部时间</text>
+            <text className='iconfont icon-sanjiaoxingdown'></text>
+          </view>
+          <view className='Type'>
+            <text>全部类型</text>
+            <text className='iconfont icon-sanjiaoxingdown'></text>
+          </view>
+          <view className='flex-item'></view>
+          <text className='iconfont icon-sousuo'></text>
+        </view>
+      </view>
+
+      <view className='flex-item'>
+        <view>
+
+          <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+            <view className='PageContent'>
+              <view className='List'>
+                {
+                  PageList.map((item, index) => (
+                    <view>
+                      <MyCustomerListItem Data={item} key={`MyCustomerListItem-${index}`}></MyCustomerListItem>
+                    </view>
+                  ))
+                }
+              </view>
+
+              {/* bottom */}
+              <view className='PageBottom'>
+                <text>已经到底了~</text>
+              </view>
+
+            </view>
+          </ScrollView>
+        </view>
+      </view>
+
+    </view>
+  )
+})

src/pages/mine/myCustomer/index.scss

+.Page.myCustomer {
+  background: #fff;
+  > .Filter {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    > view {
+      align-items: center;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+      padding: 20px 0;
+      >view {
+        font-size: 0;
+        white-space: nowrap;
+        padding-right: 30px;
+        position: relative;
+        overflow: hidden;
+        margin-left: 30px;
+        &:first-child {
+          margin-left: 0;
+        }
+        &::after {
+          content: '';
+          width: 2px;
+          height: 30px;
+          background: rgba(0, 0, 0, 0.12);
+          display: block;
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+        &:nth-child(2) {
+          &::after {
+            display: none;
+          }
+        }
+        >text {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 30px;
+          line-height: 1;
+          margin-left: 10px;
+          &:first-child {
+            margin-left: 0;
+          }
+          &.iconfont {
+            font-size: 20px;
+            color: #666;
+          }
+        }
+      }
+      >text {
+        font-size: 40px;
+        color: #666;
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      > scroll-view {
+        width: 100%;
+        height: 100%;
+        .PageContent {
+          position: relative;
+          overflow: hidden;
+          min-height: 100vh;
+          padding: 0 30px;
+          > .List {
+            > view {
+              margin-top: 20px;
+              position: relative;
+              overflow: visible;
+            }
+          }
+          > .PageBottom {
+            text-align: center;
+            font-size: 0;
+            white-space: nowrap;
+            > text {
+              display: inline-block;
+              font-size: 28px;
+              color: #666;
+              line-height: 40px;
+              margin: 20px auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/myShare/index.config.js

+export default {
+  navigationBarTitleText: '我的分享'
+}

src/pages/mine/myShare/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+import MyShareListItem from '../components/MyShareListItem/index'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page MyShare'>
+
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+          <view className='List'>
+            {
+              PageList.map((item, index) => (
+                <MyShareListItem Data={item} key={`MyShareListItem-${index}`}></MyShareListItem>
+              ))
+            }
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+
+        </view>
+      </ScrollView>
+
+    </view>
+  )
+})

src/pages/mine/myShare/index.scss

+.Page.MyShare {
+  background: #fff;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+      padding: 0 30px;
+      >.List {
+        >view {
+          margin-top: 30px;
+        }
+      }
+      > .PageBottom {
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        > text {
+          display: inline-block;
+          font-size: 28px;
+          color: #666;
+          line-height: 40px;
+          margin: 20px auto;
+        }
+      }
+    }
+  }
+}

src/pages/mine/partnerChannel/index.config.js

+export default {
+  navigationBarTitleText: '合作渠道'
+}

src/pages/mine/partnerChannel/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView, Image } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [RankingList, setRankingList] = useState([
+    { name: '范丞丞', id: '', icon: '', num: '5', department: '销售部' },
+    { name: '范丞丞', id: '', icon: '', num: '6', department: '销售部' },
+    { name: '范丞丞', id: '', icon: '', num: '3', department: '销售部' }
+  ])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='Page partnerChannel'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          {/* 排行榜 */}
+          <view className='Ranking'>
+            <view className='Top flex-h'>
+              <text className='flex-item'>龙虎榜</text>
+              <Image mode='heightFix' src={require('../../../assets/mine-icon23.png')}></Image>
+            </view>
+            <view className='List flex-h'>
+              {
+                RankingList.map((item, index) => (
+                  <view className={index === 1 ? 'flex-item active' : 'flex-item'} key={`ListItem-${index}`}>
+                    {
+                      index === 0 &&
+                      <Image mode='heightFix' src={require('../../../assets/mine-icon21.png')}></Image>
+                    }
+                    {
+                      index === 1 &&
+                      <Image mode='heightFix' src={require('../../../assets/mine-icon20.png')}></Image>
+                    }
+                    {
+                      index === 2 &&
+                      <Image mode='heightFix' src={require('../../../assets/mine-icon22.png')}></Image>
+                    }
+                    <view className='Icon'>
+                      <Image mode='aspectFill' src={item.icon || null}></Image>
+                    </view>
+                    <view className='Index'>
+                      <text>{item.name}</text>
+                      <text>{index === 0 ? 2 : index === 1 ? 1 : 3}</text>
+                    </view>
+                    <view className='Num'>
+                      <text>{item.department}</text>
+                      <text>{item.num}</text>
+                    </view>
+                  </view>
+                ))
+              }
+            </view>
+          </view>
+
+          {/* 销售简报 */}
+          <view className='SaleNews'>
+            <view className='Top flex-h'>
+              <text>销售简报</text>
+              <Image mode='heightFix' src={require('../../../assets/mine-icon23.png')}></Image>
+              <view className='flex-item'></view>
+              <text>更多</text>
+              <text className='iconfont icon-jiantouright'></text>
+            </view>
+            <view className='List'>
+              <view className='flex-h'>
+                <text className='flex-item'>新增客户</text>
+                <text>34人</text>
+                <text className='iconfont icon-jiantouright'></text>
+              </view>
+              <view className='flex-h'>
+                <text className='flex-item'>跟进客户</text>
+                <text>34人</text>
+                <text className='iconfont icon-jiantouright'></text>
+              </view>
+              <view className='flex-h'>
+                <text className='flex-item'>成交客户</text>
+                <text>34人</text>
+                <text className='iconfont icon-jiantouright'></text>
+              </view>
+            </view>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+})

src/pages/mine/partnerChannel/index.scss

+.Page.partnerChannel {
+  background: #fff;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: visible;
+      min-height: 100vh;
+      padding: 0 30px;
+      >view {
+        box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+        position: relative;
+        overflow: hidden;
+        background: #fff;
+        border-radius: 16px;
+        margin-top: 30px;
+        &.Ranking {
+          >.Top {
+            align-items: center;
+            padding: 0 30px;
+            margin-top: 30px;
+            >text {
+              font-size: 34px;
+              color: #333;
+              line-height: 1;
+              font-weight: bold;
+            }
+            >image {
+              height: 34px;
+            }
+          }
+          >.List {
+            position: relative;
+            overflow: visible;
+            margin-top: 30px;
+            >.flex-item {
+              position: relative;
+              overflow: hidden;
+              z-index: 1;
+              &.active {
+                z-index: 2;
+                border-radius: 16px 16px 0 0;
+                box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+                >image {
+                  margin-top: 30px;
+                }
+                >.Icon {
+                  width: 120px;
+                  height: 120px;
+                  margin-top: 24px;
+                }
+                >.Index {
+                  margin-top: 20px;
+                  >text {
+                    &:first-child {
+                      font-size: 24px;
+                    }
+                  }
+                }
+                >.Num {
+                  margin-top: 30px;
+                  >text {
+                    font-size: 24px;
+                  }
+                }
+              }
+              >image {
+                height: 66px;
+                display: block;
+                margin: 60px auto 0;
+              }
+              >.Icon {
+                width: 100px;
+                height: 100px;
+                position: relative;
+                overflow: hidden;
+                border-radius: 100%;
+                background: #eee;
+                margin: 34px auto 0;
+              }
+              >.Index {
+                width: 148px;
+                text-align: center;
+                white-space: nowrap;
+                position: relative;
+                overflow: hidden;
+                margin: 30px auto 0;
+                background: #193C83;
+                border-radius: 34px;
+                font-size: 0;
+                >text {
+                  display: inline-block;
+                  color: #fff;
+                  font-size: 20px;
+                  font-weight: bold;
+                  line-height: 34px;
+                  text-indent: 34px;
+                  &:last-child {
+                    width: 34px;
+                    line-height: 34px;
+                    border-radius: 34px;
+                    background: #FA9730;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    text-align: center;
+                    text-indent: 0;
+                  }
+                }
+              }
+              >.Num {
+                font-size: 0;
+                white-space: nowrap;
+                text-align: center;
+                margin: 30px auto 42px;
+                >text {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 20px;
+                  font-weight: bold;
+                  color: #333;
+                  line-height: 1;
+                }
+              }
+            }
+          }
+        }
+        &.SaleNews {
+          >.Top {
+            align-items: center;
+            margin-top: 40px;
+            padding: 0 20px;
+            >text {
+              font-size: 24px;
+              color: #333;
+              &:first-child {
+                font-size: 34px;
+                font-weight: bold;
+                line-height: 1;
+              }
+            }
+            >image {
+              height: 34px;
+              margin-left: 30px;
+            }
+          }
+          >.List {
+            padding: 0 20px;
+            >view {
+              align-items: center;
+              border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+              padding: 30px 0;
+              margin-top: 20px;
+              &:last-child {
+                border-bottom: none;
+              }
+              >text {
+                font-size: 30px;
+                font-weight: bold;
+                line-height: 1;
+                color: #193C83;
+                &.iconfont {
+                  font-weight: normal;
+                }
+                &:first-child {
+                  color: #333;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/recommendUser/index.config.js

+export default {
+  navigationBarTitleText: '推荐客户'
+}

src/pages/mine/recommendUser/index.jsx

+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import { ScrollView, Input, Image } from '@tarojs/components'
+import '../../../assets/css/iconfont.css'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+
+  return (
+    <view className='Page recommendUser'>
+
+      <ScrollView scroll-y={true} refresher-enabled={false} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <text>客户姓名</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入客户真实姓名'></Input>
+            </view>
+          </view>
+
+          <text>客户电话</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入手机号码'></Input>
+            </view>
+          </view>
+
+          <text>客户性别</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <text className='iconfont icon-jiantoudown'></text>
+          </view>
+
+          <text>意向楼盘</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='请输入意向楼盘'></Input>
+            </view>
+          </view>
+
+          <text>置业顾问（选填）</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <text>请选择</text>
+            </view>
+            <Image mode='heightFix' src={require('../../../assets/mine-icon19.png')}></Image>
+            <text>选择</text>
+          </view>
+
+          <text>备注</text>
+          <view className='FormLine flex-h'>
+            <view className='flex-item'>
+              <Input placeholder='补充说明（选填）'></Input>
+            </view>
+          </view>
+
+          <view className='Btn'>
+            <text>提交</text>
+          </view>
+
+        </view>
+      </ScrollView>
+
+    </view>
+  )
+})

src/pages/mine/recommendUser/index.scss

+.Page.recommendUser {
+  background: #fff;
+  height: 100vh;
+  width: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+      > text {
+        font-size: 34px;
+        font-weight: bold;
+        color: #333;
+        display: block;
+        text-indent: 40px;
+        margin-top: 30px;
+      }
+      > .flex-h {
+        padding: 20px 40px;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+        margin-top: 10px;
+        align-items: center;
+        > view {
+          > input {
+            display: block;
+            width: 100%;
+            background: none;
+            font-size: 26px;
+            line-height: 40px;
+            height: 40px;
+          }
+          > text {
+            display: block;
+            width: 100%;
+            background: none;
+            font-size: 26px;
+            line-height: 40px;
+            height: 40px;
+          }
+        }
+        > text {
+          font-size: 26px;
+          &.iconfont {
+            font-size: 30px;
+          }
+        }
+        >image {
+          height: 30px;
+          margin-right: 10px;
+        }
+      }
+      .Btn {
+        padding: 40px;
+        position: relative;
+        overflow: hidden;
+        > text {
+          display: block;
+          text-align: center;
+          font-size: 32px;
+          line-height: 92px;
+          background: #193c83;
+          color: #fff;
+          font-weight: bold;
+          border-radius: 92px;
+        }
+      }
+    }
+  }
+}