Merge branch 'dev' of http://git.ycjcjy.com/shigongli/miniapp-v2 into dev

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package.json

@@ -41,19 +41,20 @@
     "@tarojs/react": "3.3.2",
     "@tarojs/runtime": "3.3.2",
     "@tarojs/taro": "3.3.2",
-    "react": "^17.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^17.0.2",
-    "@tarojs/mini-runner": "3.3.2",
     "@babel/core": "^7.8.0",
+    "@tarojs/mini-runner": "3.3.2",
     "@tarojs/webpack-runner": "3.3.2",
+    "@types/react": "^17.0.2",
+    "@types/webpack-env": "^1.13.6",
     "babel-preset-taro": "3.3.2",
-    "eslint-config-taro": "3.3.2",
     "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.3.2",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "stylelint": "9.3.0"
   }

src/app.config.js

@@ -2,6 +2,13 @@ export default {
   pages: [
     'pages/index/index',
     'pages/test/index',
+    'pages/search/search',
+    'pages/searchResult/searchResult',
+    'pages/details/foodDetails/foodDetails',
+    'pages/details/mjDetails/sceneryDetails',
+    'pages/login/login',
+    'pages/spread/spreadIndex',
+    'pages/landlord/landlord',
     'pages/PayOrder/index',
     'pages/MineUserAll/ContactMe/index',
     'pages/MineUserAll/HomeLogo/index',

src/components/CustTabBar/index.jsx

@@ -0,0 +1,39 @@
+
+import React from 'react'
+import './style.less'
+
+export default (props) => {
+  const { extClass = '', current, onChange, children } = props
+
+  const handleTabChange = (e, index) => {
+    if (e) {
+      e.detail = {
+        ...e.detail || {},
+        index,
+      }
+      // Object.assign(e.detail, { index })
+    }
+
+    if (onChange) {
+      onChange(e)
+    }
+  }
+
+  const className = `weui-tabbar cust-tabbar ${extClass}`
+
+  return (
+    <view className={className}>
+      {
+        React.Children.toArray(children).map((child, index) => {
+          const itemClass = `weui-tabbar__item cust-tabbar-item`
+
+          return (
+            <view className={itemClass} onClick={(e) => handleTabChange(e, index)}>
+              {child}
+            </view>
+          )
+        })
+      }
+    </view>
+  )
+}

src/components/CustTabBar/style.less

@@ -0,0 +1,6 @@
+.cust-tabbar {
+  &-item {
+    font-size: 1em;
+    padding: 0;
+  }
+}

src/components/Landlord/HouseManage/houseManage.jsx

@@ -0,0 +1,51 @@
+import Taro from '@tarojs/taro'
+import CustomNav from '@/components/CustomNav'
+import pImg from '../../../assets/icons/landlord/定位 位置.png'
+import see from '../../../assets/icons/landlord/查看入住人.png'
+import share from '../../../assets/icons/landlord/分享链接.png'
+import del from '../../../assets/icons/landlord/删除.png'
+import addImg from '../../../assets/icons/landlord/添加.png'
+import iconsearch from '../../../assets/icons/housemantj/search.png'
+import './houseManage.less'
+
+
+export default (props) => {
+  const toIncome=()=>{
+    Taro.redirectTo({url:'/pages/landlord/income/income'})
+  }
+  return (
+    <view>
+      <view>
+        <CustomNav logo={null} title='十公里周边指南' />
+      </view>
+      <view style={{ padding: '0 30rpx', height: '100%' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 204px)' }}>
+          <view className='position'>
+            <image className='pImg' src={pImg} />
+            当前店铺：<text>南京紫荆国际公寓酒店</text>
+          </view>
+          <view className='search'>
+            <input className='searchInput' disabled />
+            <image className='searchicon' src={iconsearch} />
+            <view className="searchword">请输入关键字搜索</view>
+          </view>
+          <view>
+            <view className='houseCard'>
+              <view className='houseName'>南京紫荆国际公寓酒店</view>
+              <view className='operation'>
+                <view><image src={see} /><text>查看入住人</text></view>
+                <view><image src={share} /><text>分享链接</text></view>
+                <view><image src={del} /><text>删除房源</text></view>
+              </view>
+            </view>
+           
+          </view>
+        </scroll-view>        
+      </view>
+      <view className='addHouse'>
+        <image className='addImg' src={addImg} />添加房源
+      </view>
+    
+      </view>
+  )
+}

src/components/Landlord/HouseManage/houseManage.less

@@ -0,0 +1,89 @@
+.position{
+  height: 27px;
+  font-size: 28px;
+  color: #202020;
+  padding-left: 25px;
+  .pImg{
+    width: 35px;
+    height: 42px;
+    position: relative;
+    top: 10px;
+    right: 21px;
+  }
+}
+.search{
+  padding: 40px 0  30px 0;
+  position: relative;
+  .searchInput{    
+    height: 68px;
+    background: #F8F8F8;
+    border-radius: 34px;
+    box-sizing: border-box;
+  }
+  .searchicon{
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    left: calc(50% - 135px);
+    top: 64px;
+  }
+  .searchword{
+    height: 23px;
+    font-size: 24px;
+    color: #C0C8D3;
+    position: absolute;
+    left: calc(50% - 100px);
+    bottom: 60px;
+  }
+}
+.houseCard{
+  background: #FFFFFF;
+  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  padding: 40px 30px 41px 30px;
+  text-align: center;
+  .houseName{
+    height: 122px;
+    font-size: 32px;
+    font-weight: bold;
+    color: #202020;
+    width:100%;
+  }
+  .operation{
+    column-count: 3;
+    image{
+      width: 28px;
+      height: 28px;
+      margin-right: 10px;
+      position: relative;
+      top: 5px;
+    }
+    text{      
+      font-size: 28px;
+      color: #202020;
+    }
+  }
+}
+.addHouse{
+  width: calc(100% - 60px);
+  margin: 0 30px;
+  height: 88px;
+  background: #274291;
+  border-radius: 12px;
+  font-family: DengXian;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 88px;
+  position: absolute;
+  bottom: 178px;
+  image{
+    width: 32px;
+    height: 32px;
+    border: 2px solid #FFFFFF;
+    border-radius: 4px;
+    position: relative;
+    right: 11px;
+    top: 6px;
+  }
+}

src/components/Landlord/Income/income.jsx

@@ -0,0 +1,96 @@
+import Taro from '@tarojs/taro'
+import CustomNav from '@/components/CustomNav'
+import './income.less'
+import eyes from '../../../assets/icons/shopKeeper/小眼睛.png'
+import ceyes from '../../../assets/icons/shopKeeper/小眼睛-闭上.png'
+import sImg from '../../../assets/icons/landlord/我的收入2.png'
+
+
+export default (props) => {
+  const toHouse=()=>{
+    Taro.navigateTo({url:'/pages/landlord/houseManage/houseManage'})
+  }
+  return (
+    <view>
+      <view>
+        <CustomNav title='十公里' />
+      </view>
+      <view style={{ padding: '30rpx', height: '100%' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
+          <view className='storexx'>
+              <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></view>
+              <view className='money'>
+                <view className='sleft'>
+                  <view className='lword'>全年收入（税前）</view>
+                  <view className='yearMoney'>
+                    <text>2800000</text>元
+                    <image className='micon' src={eyes}></image>
+                  </view>
+                </view>
+                <view className='line' />
+                <view className='sright'>
+                  <view className='rword'>当月收入（税前）</view>
+                  <view className='monthMoney'>
+                    <text>******</text>元
+                    <image className='micon2' src={ceyes}></image>
+                  </view></view>
+              </view>
+            </view>
+          <view className='title'>推广收入记录</view>
+          <view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+                <image className='spreadImg' src={sImg} />
+              </view>
+            </view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+                <image className='spreadImg' src={sImg} />
+              </view>
+            </view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+                <image className='spreadImg' src={sImg} />
+              </view>
+            </view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+                <image className='spreadImg' src={sImg} />
+              </view>
+            </view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+                <image className='spreadImg' src={sImg} />
+              </view>
+            </view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+                <image className='spreadImg' src={sImg} />
+              </view>
+            </view>
+          </view>
+          <view className='botton'>已经到底了~</view>
+        </scroll-view>        
+      </view>
+      
+      </view>
+  )
+}

src/components/Landlord/Income/income.less

@@ -0,0 +1,120 @@
+.storexx{
+  text-align: center;
+  height: 302px;
+  background: #FFFFFF;
+  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 24px;
+  padding: 50px 30px 64px 40px;
+  box-sizing: border-box;
+  .storeName{
+    height: 26px;
+    font-size: 28px;
+    font-weight: bold;
+    color: #202020;
+    margin-bottom:58px;
+  }
+  
+  .sleft{
+    float: left;
+    .lword{
+      height: 25px;
+      font-size: 26px;
+      color: #666666;
+      margin-bottom: 40px;      
+      margin-left: 1px;
+    }
+    .yearMoney{
+      height: 30px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      text{
+        font-size: 40px;
+        color: #FF3434
+      }
+      .micon{
+        width: 38px;
+        height: 22px;
+        margin-left: 19px;
+      }
+    }
+  }
+  .line{
+    width: 2px;
+    height: 128px;
+    border-right: 2px dotted #202020;
+    opacity: 0.5;
+    position: absolute;
+    left: calc(50% - 1px);
+    display: block;
+  }
+  .sright{
+    float: right;
+    text-align: left;
+    .rword{
+      font-size: 26px;
+      color: #666666;
+      margin: 0 25px 47px 0;
+      text-align: center;
+    }
+    .monthMoney{
+      height: 24px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      line-height: 24px;
+      text{
+        font-size: 40px;
+        color: #FF3434;
+      }
+      .micon2{
+        width: 34px;
+        height: 16px;
+        margin-left: 23px;
+        margin-bottom: 7px;
+      }
+    }
+  }
+}
+.title{
+  font-size: 28px;
+  color: #202020;
+  line-height: 60px;
+  margin: 62px 0 10px 1px;
+}
+.spreadCard{
+  margin-bottom: 1px;
+  .spreadDate{
+    font-size: 20px;
+    color: #202020;
+    line-height: 60px;
+  }
+  .card{
+    height: 166px;
+    background: #FFF;
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    padding: 40px 0 43px 22px;
+    font-size: 24px;
+    color: #202020;
+    box-sizing: border-box;
+    position: relative;
+    .spreadMoney{
+      line-height: 60px;
+    }
+    .spreadImg{
+      width: 105px;
+      height: 100px;
+      position: absolute;
+      right: 61px;
+      top: 33px;
+    }
+  }
+}
+.botton{
+  font-size: 28px;   
+  color: #C0C8D3;
+  line-height: 34px;
+  text-align: center;
+  padding:40px 0 100px 0;
+}

src/components/spreads/ShopKeeper/shopKeeper.jsx

@@ -0,0 +1,112 @@
+import CustomNav from '@/components/CustomNav'
+import './shopKeeper.less'
+import eyes from '@/assets/icons/shopKeeper/小眼睛.png'
+import ceyes from '@/assets/icons/shopKeeper/小眼睛-闭上.png'
+import iconsearch from '@/assets/icons/housemantj/search.png'
+import ms from '@/assets/icons/housemantj/ms3.jpg'
+
+
+export default (props) => {
+  return (
+    <view>
+      <view>
+        <CustomNav title='十公里' />
+      </view>
+
+
+      <view style={{ padding: '30rpx', height: '100%' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
+          <view className='storexx'>
+            <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></view>
+            <view className='tip'>（计算收入以核销为准）</view>
+            <view className='money'>
+              <view className='sleft'>
+                <view className='lword'>全年订单收入（税前）</view>
+                <view className='yearMoney'>
+                  <text>2800000</text>元
+                  <image className='micon' src={eyes}></image>
+                </view>
+              </view>
+              <view className='line' />
+              <view className='sright'>
+                <view className='rword'>当月订单收入（税前）</view>
+                <view className='monthMoney'>
+                  <text>******</text>元
+                  <image className='micon2' src={ceyes}></image>
+                </view></view>
+            </view>
+          </view>
+          <view className='search'>
+            <input className='searchInput' disabled />
+            <image className='searchicon' src={iconsearch} />
+            <view className="searchword">搜索订单(输入客户手机号码)</view>
+          </view>
+          <view className='orderTab'>
+            <view className='unCheck'>未核销订单</view>
+            <view className='lClickLine'></view>
+            <view className='line' />
+            <view className='check'>已核销订单</view>
+            <view className='rClickLine'></view>
+          </view>
+          <view>
+            <view className='orderCard'>
+              <view style={{ overflow: 'hidden' }}>
+                <view className='orderId'>订单编号：<text>ABC123456789</text></view>
+                <view className='orderTime'>下单日期：<text>2021-06-22 12:35</text></view>
+              </view>
+              <view className='order'>
+                <image className='orderImg' src={ms} mode='aspectFit' />
+                <view className='orderRight'>
+                  <view className='foodName'>【SEOUL.创意韩国料理】火爆全南京，
+                    新街口又开新店啦...</view>
+                  <view className='price'>合计金额：￥<text style={{ fontSize: '24rpx' }}>88</text>元 <text className='pnum'>数量：<text>1</text>张</text> </view>
+                  <view>已下单：等待客户上门就餐</view>
+                </view>
+                <view className='line' />
+                <view className='phone'>客户手机：<text>136****9434</text></view>
+                <view className='tripTime'>客户行程日期：预计在<text>2021-06-21中下午10:30-16:30</text></view>
+              </view>
+            </view>
+            <view className='orderCard'>
+              <view style={{ overflow: 'hidden' }}>
+                <view className='orderId'>订单编号：<text>ABC123456789</text></view>
+                <view className='orderTime'>下单日期：<text>2021-06-22 12:35</text></view>
+              </view>
+              <view className='order'>
+                <image className='orderImg' src={ms} mode='aspectFit' />
+                <view className='orderRight'>
+                  <view className='foodName'>【SEOUL.创意韩国料理】火爆全南京，
+                    新街口又开新店啦...</view>
+                  <view className='price'>合计金额：￥<text style={{ fontSize: '24rpx' }}>88</text>元 <text className='pnum'>数量：<text>1</text>张</text> </view>
+                  <view>已下单：等待客户上门就餐</view>
+                </view>
+                <view className='line' />
+                <view className='phone'>客户手机：<text>136****9434</text></view>
+                <view className='tripTime'>客户行程日期：预计在<text>2021-06-21中下午10:30-16:30</text></view>
+              </view>
+            </view>
+            <view className='orderCard'>
+              <view style={{ overflow: 'hidden' }}>
+                <view className='orderId'>订单编号：<text>ABC123456789</text></view>
+                <view className='orderTime'>下单日期：<text>2021-06-22 12:35</text></view>
+              </view>
+              <view className='order'>
+                <image className='orderImg' src={ms} mode='aspectFit' />
+                <view className='orderRight'>
+                  <view className='foodName'>【SEOUL.创意韩国料理】火爆全南京，
+                    新街口又开新店啦...</view>
+                  <view className='price'>合计金额：￥<text style={{ fontSize: '24rpx' }}>88</text>元 <text className='pnum'>数量：<text>1</text>张</text> </view>
+                  <view>已下单：等待客户上门就餐</view>
+                </view>
+                <view className='line' />
+                <view className='phone'>客户手机：<text>136****9434</text></view>
+                <view className='tripTime'>客户行程日期：预计在<text>2021-06-21中下午10:30-16:30</text></view>
+              </view>
+            </view>
+          </view>
+          <view className='botton'>已经到底了~</view>
+        </scroll-view>        
+      </view>      
+      </view>
+  )
+}

src/components/spreads/ShopKeeper/shopKeeper.less

@@ -0,0 +1,247 @@
+.storexx{
+  text-align: center;
+  height: 342px;
+  background: #FFFFFF;
+  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 24px;
+  padding: 50px 30px 64px 40px;
+  box-sizing: border-box;
+  .storeName{
+    height: 26px;
+    font-size: 28px;
+    font-weight: bold;
+    color: #202020;
+    margin-bottom:27px;
+  }
+  .tip{
+    height: 23px;
+    font-size: 24px;
+    color: #666666;
+    margin-bottom: 48px;
+  }
+  .sleft{
+    float: left;
+    .lword{
+      height: 25px;
+      font-size: 26px;
+      color: #666666;
+      margin-bottom: 40px;      
+      margin-left: 1px;
+    }
+    .yearMoney{
+      height: 30px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      text{
+        font-size: 40px;
+        color: #FF3434
+      }
+      .micon{
+        width: 38px;
+        height: 22px;
+        margin-left: 19px;
+      }
+    }
+  }
+  .line{
+    width: 2px;
+    height: 128px;
+    border-right: 2px dotted #202020;
+    opacity: 0.5;
+    position: absolute;
+    left: calc(50% - 1px);
+    display: block;
+  }
+  .sright{
+    float: right;
+    text-align: left;
+    .rword{
+      font-size: 26px;
+      color: #666666;
+      margin: 0 1px 47px 0;
+      text-align: center;
+    }
+    .monthMoney{
+      height: 24px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      line-height: 24px;
+      text{
+        font-size: 40px;
+        color: #FF3434;
+      }
+      .micon2{
+        width: 34px;
+        height: 16px;
+        margin-left: 23px;
+        margin-bottom: 7px;
+      }
+    }
+  }
+}
+
+.search{
+  padding: 40px 0  30px 0;
+  position: relative;
+  .searchInput{    
+    height: 68px;
+    background: #F8F8F8;
+    border-radius: 34px;
+    box-sizing: border-box;
+  }
+  .searchicon{
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    left: 136px;
+    top: 61px;
+  }
+  .searchword{
+    height: 25px;
+    font-size: 24px;
+    color: #C0C8D3;
+    position: absolute;
+    left: calc(50% - 141rpx);
+    bottom: 60px;
+  }
+}
+.orderTab{
+  background: #FFFFFF;
+  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 24px;
+  font-size: 28px;
+  font-weight: bold;
+  color: #C0C8D3;
+  line-height: 60px;
+  position: relative;
+  .unCheck{    
+    font-size: 32px;
+    color: #404040;
+    display: inline-block;
+    margin: 29px 0 33px 101px;
+    line-height: 35px;
+    height: 30px;
+  }
+  .lClickLine{
+    position: absolute;
+    width: 60px;
+    height: 6px;
+    background: #000;
+    left: 20%;
+    bottom: 0;
+  }
+  .line{
+    width: 2px;
+    height: 56px;
+    background: #000;
+    opacity: 0.1;
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+  }
+  .check{
+    display:inline-block;
+    line-height: 35px;
+    height: 27px;
+    font-weight: bold;
+    font-size: 28px;
+    float: right;
+    margin: 33px 105px 32px 0;
+  }
+  .rClickLine{
+    position: absolute;
+    width: 60px;
+    height: 6px;
+    right: 20%;
+    bottom: 0;
+  }
+}
+.orderCard{
+  margin-bottom: 20px;
+  .orderId{
+    font-size: 20px;
+    color: #666666;
+    line-height: 44px;
+    float: left;
+    margin: 60px 0 32px 0;
+
+  }
+  .orderTime{    
+    font-size: 20px;
+    color: #666666;
+    line-height: 44px;
+    float: right;
+    margin: 60px 0 32px 0;
+  }
+  .order{
+    background: #FFFFFF;
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    padding: 20px;
+    .orderImg{
+      width: 194px;
+      height: 194px;
+      border-radius: 22px;
+      float: left;
+      margin:0 26px 30px 0;
+    }
+    .orderRight{
+      .foodName{
+        height: 63px;
+        font-size: 24px;
+        color: #333333;
+        line-height: 40px;
+      }
+      .price{
+        font-size: 20px;
+        font-weight: bold;
+        color: #202020;
+        line-height: 44px;
+        margin: 37px 0 40px 0;
+        height: 19px;
+        .pnum{
+          color: #333333;
+          font-weight: 400;
+          margin-left: 47px;         
+        }
+      }
+      .price+view{
+        font-size: 20px;
+        font-weight: bold;
+        color: #FF3434;
+        line-height: 44px;
+        margin-bottom: 35px;
+        height: 19px;
+      }
+    }
+    .line{
+      width: 100%;
+      height: 2px;
+      background: #000;
+      opacity: 0.1;
+    }
+    .phone{
+      font-size: 24px;
+      color: #666666;
+      line-height: 44px;
+      height: 23px;
+      margin: 30px 0;
+    }
+    .tripTime{
+      font-size: 24px;
+      color: #666666;
+      line-height: 44px;
+      margin-bottom: 30px;
+    }
+  }
+}
+.botton{
+  font-size: 28px;   
+  color: #C0C8D3;
+  line-height: 34px;
+  text-align: center;
+  padding:40px 0 100px 0;
+}
+

src/components/spreads/Sparead/spreadMoney.jsx

@@ -0,0 +1,58 @@
+import CustomNav from '@/components/CustomNav'
+import './spreadMoney.less'
+import eyes from '@/assets/icons/shopKeeper/小眼睛.png'
+import ceyes from '@/assets/icons/shopKeeper/小眼睛-闭上.png'
+
+
+export default (props) => {
+  return (
+    <view>
+      <view>
+        <CustomNav title='十公里' />
+      </view>
+      <view style={{ padding: '30rpx', height: '100%' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
+          <view className='storexx'>
+              <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></view>
+              <view className='tip'>（计算收入以核销为准）</view>
+              <view className='money'>
+                <view className='sleft'>
+                  <view className='lword'>全年推广收入（税前）</view>
+                  <view className='yearMoney'>
+                    <text>2800000</text>元
+                    <image className='micon' src={eyes}></image>
+                  </view>
+                </view>
+                <view className='line' />
+                <view className='sright'>
+                  <view className='rword'>当月推广收入（税前）</view>
+                  <view className='monthMoney'>
+                    <text>******</text>元
+                    <image className='micon2' src={ceyes}></image>
+                  </view></view>
+              </view>
+            </view>
+          <view className='title'>推广收入记录</view>
+          <view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+              </view>
+            </view>
+            <view className='spreadCard'>
+              <view className='spreadDate'>日期：<text>2021-06-24</text></view>
+              <view className='card'>
+                <view className='spreadTime'>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：<text>2021-06-24  20:45</text></view>
+                <view className='spreadMoney'>收入金额：<text>5.00</text>元</view> 
+              </view>
+            </view>
+          </view>
+          <view className='botton'>已经到底了~</view>
+        </scroll-view>        
+      </view>
+      
+      </view>
+  )
+}

src/components/spreads/Sparead/spreadMoney.less

@@ -0,0 +1,117 @@
+.storexx{
+  text-align: center;
+  height: 342px;
+  background: #FFFFFF;
+  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 24px;
+  padding: 50px 30px 64px 40px;
+  box-sizing: border-box;
+  .storeName{
+    height: 26px;
+    font-size: 28px;
+    font-weight: bold;
+    color: #202020;
+    margin-bottom:27px;
+  }
+  .tip{
+    height: 23px;
+    font-size: 24px;
+    color: #666666;
+    margin-bottom: 48px;
+  }
+  .sleft{
+    float: left;
+    .lword{
+      height: 25px;
+      font-size: 26px;
+      color: #666666;
+      margin-bottom: 40px;      
+      margin-left: 1px;
+    }
+    .yearMoney{
+      height: 30px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      text{
+        font-size: 40px;
+        color: #FF3434
+      }
+      .micon{
+        width: 38px;
+        height: 22px;
+        margin-left: 19px;
+      }
+    }
+  }
+  .line{
+    width: 2px;
+    height: 128px;
+    border-right: 2px dotted #202020;
+    opacity: 0.5;
+    position: absolute;
+    left: calc(50% - 1px);
+    display: block;
+  }
+  .sright{
+    float: right;
+    text-align: left;
+    .rword{
+      font-size: 26px;
+      color: #666666;
+      margin: 0 1px 47px 0;
+      text-align: center;
+    }
+    .monthMoney{
+      height: 24px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #202020;
+      line-height: 24px;
+      text{
+        font-size: 40px;
+        color: #FF3434;
+      }
+      .micon2{
+        width: 34px;
+        height: 16px;
+        margin-left: 23px;
+        margin-bottom: 7px;
+      }
+    }
+  }
+}
+.title{
+  font-size: 28px;
+  color: #202020;
+  line-height: 60px;
+  margin: 62px 0 10px 1px;
+}
+.spreadCard{
+  margin-bottom: 1px;
+  .spreadDate{
+    font-size: 20px;
+    color: #202020;
+    line-height: 60px;
+  }
+  .card{
+    height: 166px;
+    background: #FFF;
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    padding: 40px 0 43px 22px;
+    font-size: 24px;
+    color: #202020;
+    box-sizing: border-box;
+    .spreadMoney{
+      line-height: 60px;
+    }
+  }
+}
+.botton{
+  font-size: 28px;   
+  color: #C0C8D3;
+  line-height: 34px;
+  text-align: center;
+  padding:40px 0 100px 0;
+}

src/pages/details/foodDetails/foodDetails.config.js

@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '美食详情',
+    navigationStyle: 'custom',
+  }

src/pages/details/foodDetails/foodDetails.jsx

@@ -0,0 +1,304 @@
+import CustomNav from '@/components/CustomNav'
+import { Icon } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import fd from '../../../assets/icons/housemantj/fd.jpg'
+import ax from '../../../assets/icons/housemantj/onlove.png'
+import huangxin from '../../../assets/icons/housemantj/已收藏.png'
+import baixin from '../../../assets/icons/housemantj/收藏.png'
+import yysj from '../../../assets/icons/housemantj/营业时间.png'
+import dw from '../../../assets/icons/housemantj/地址.png'
+import zhuandao from '../../../assets/icons/housemantj/backTop.png'
+import titlezs from '../../../assets/icons/housemantj/标题装饰.png'
+import pay from '../../../assets/icons/housemantj/pay.png'
+import ms2 from '../../../assets/icons/housemantj/ms2.jpg'
+import msTip from '../../../assets/icons/housemantj/foodtip.png'
+import wz from '../../../assets/icons/housemantj/location.png'
+import showMore from '../../../assets/icons/housemantj/查看更多.png'
+import dp from '../../../assets/icons/housemantj/dp.jpg'
+import znz from '../../../assets/icons/housemantj/znz.png'
+import location from '../../../assets/icons/housemantj/location.png'
+import mjImage from '../../../assets/icons/housemantj/mj.jpg'
+import glImage from '../../../assets/icons/housemantj/gl.jpg'
+import glTip from '../../../assets/icons/housemantj/gltip.png'
+import onlove from '../../../assets/icons/housemantj/爱心.png'
+import './foodDetails.less'
+
+
+export default (props) => {
+  return (
+    <view className='page-index'>
+      <view className='index-navbar'>
+        <CustomNav title='十公里' />
+      </view>
+      <view style={{overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
+          <view className='storeDetails'>
+            <image src={fd} className='storeImage' >
+              <view className='tpPage'>
+                <text>1</text><text>/</text><text>64</text>
+              </view>
+            </image>
+            <view className='storeJs'>
+              <view style={{ overflow: 'hidden' }}>
+                <view className='introduce'>
+                  <text className='storeName'>clip coffee</text>
+                  <text>￥</text><text className='price'><text>88</text>/人</text>
+                </view>
+                <view className='bz'>
+                  <image src={ax} style={{ width: '15px', height: '15px', marginRight: '11rpx', marginBottom: '-2px' }} />
+                  <text className='bzRight'>爆赞<text>9999+</text></text>
+                </view>
+              </view>
+              <view className='appraise'>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={baixin}></image>
+                <text className='storezf'>4.5</text>
+                <view style={{float:'right',marginTop:'5px'}}>
+                  <text className='comment'>点评：</text>
+                  <text className='t1'>口味：</text>
+                  <text className='flavor'>4</text>
+                  <text className='t1'>环境：</text>
+                  <text className='storehj'>3</text>
+                  <text className='t1'>服务</text>
+                  <text className='service'>4.5</text>
+                </view>
+              </view>
+              <view className='yysj'>
+                <image src={yysj} className='yysjImg' />
+                <text>营业时间：周一至周日 06:00-20:00</text>
+              </view>
+              <view className='dpPosition'>
+                <image src={dw} className='dwTip' />
+                <view>
+                  <text>马道街夫子庙老门东小吃街三条营47号（地铁3号线武定门3号口步行8分钟）</text>
+                  <image src={zhuandao} className='zhuandao' />
+                </view>
+              </view>
+            </view>
+          </view>
+          <view style={{ position: 'relative' }}>
+            <view className='title'>
+              <image src={titlezs}></image>
+              <text>返现套餐</text>
+            </view>
+            
+            <view className='foodCard'>
+              <view className='fCleft'>
+                <view className='backMoney'>
+                  返现￥2.04
+                </view>
+                <view className='appraise'>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={baixin}></image>
+                  <text className='storezf'>4.5</text>
+                </view>
+                <view>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
+                  </view>
+                  <view className='neirong'>
+                    <view className='textword'>
+                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
+                    </view>
+                    <view className='jiage'>
+                      <text className='rmb' >￥&nbsp;&nbsp;</text>
+                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
+                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
+                    </view>
+                    <view className='address'>
+                      <image className='dw' src={wz} />
+                      <text className='wz'>南京市/秦淮区</text>
+                      <image className='star' src={huangxin}></image>
+                      <text className='collection'>已收藏</text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view className='fCright'>
+                <image src={pay} />
+                <view>支付</view>
+              </view>
+              <view className='columnLine'></view>
+            </view>
+            <view className='foodCard'>
+              <view className='fCleft'>
+                <view className='backMoney'>
+                  返现￥2.04
+                </view>
+                <view className='appraise'>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={baixin}></image>
+                  <text className='storezf'>4.5</text>
+                </view>
+                <view style={{ overflow: 'hidden' }}>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
+                  </view>
+                  <view className='neirong'>
+                    <view className='textword'>
+                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
+                    </view>
+                    <view className='jiage'>
+                      <text className='rmb' >￥&nbsp;&nbsp;</text>
+                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
+                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
+                    </view>
+                    <view className='address'>
+                      <image className='dw' src={wz} />
+                      <text className='wz'>南京市/秦淮区</text>
+                      <image className='star' src={huangxin}></image>
+                      <text className='collection'>已收藏</text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view className='fCright'>
+                <image src={pay} />
+                <view>支付</view>
+              </view>
+              <view className='columnLine'></view>
+            </view>
+            <view className='showMore'>
+              <view>查看更多</view>
+              <image src={showMore} className='moreTip' />
+            </view>
+          </view>
+
+          <view style={{ position: 'relative' }}>
+            <view className='title'>
+              <image src={titlezs}></image>
+              <text>本店指南</text>
+            </view>
+            <view className='storezn'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Quis ipsum suspendisse ultrices gravida.
+              Risus commodo viverra maecenas accumsan lacus vel
+              facilisis.
+            </view>
+            <image src={dp} mode='widthFix' />
+            <view className='storezn'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Quis ipsum suspendisse ultrices gravida.
+              Risus commodo viverra maecenas accumsan lacus vel
+              facilisis.
+            </view>
+            <view className='foodCard'>
+              <view className='fCleft'>
+                <view className='backMoney'>
+                  返现￥2.04
+                </view>
+                <view className='appraise'>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={baixin}></image>
+                  <text className='storezf'>4.5</text>
+                </view>
+                <view style={{ overflow: 'hidden' }}>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
+                  </view>
+                  <view className='neirong'>
+                    <view className='textword'>
+                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
+                    </view>
+                    <view className='jiage'>
+                      <text className='rmb' >￥&nbsp;&nbsp;</text>
+                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
+                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
+                    </view>
+                    <view className='address'>
+                      <image className='dw' src={wz} />
+                      <text className='wz'>南京市/秦淮区</text>
+                      <image className='star' src={huangxin}></image>
+                      <text className='collection'>已收藏</text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view className='fCright'>
+                <image src={pay} />
+                <view>支付</view>
+              </view>
+              <view className='columnLine'></view>
+            </view>
+            <view className='storezn'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Quis ipsum suspendisse ultrices gravida.
+            </view>
+            <view className='showMore'>
+              <view>查看更多</view>
+              <image src={showMore} className='moreTip' />
+            </view>
+          </view>
+
+          <view className='title'>
+            <image src={znz} className='gltitle'></image>
+            <text>老板推荐的攻略</text>
+          </view>
+
+
+          <view className="waterfall">
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={glTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+                </view>
+                <view className='cCright'>
+                  <view className='money'>￥</view>
+                  <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={glImage} className='cCardimg' />
+                <image className='lefttips' src={glTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'>9.99公里</view>
+                </view>
+                <view className='cCright'>
+                  <view className='money'>￥</view>
+                  <view className='price'>999/人</view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view className='botton'>已经到底了~</view>
+        </scroll-view>
+      </view>
+    </view>
+  )
+}

src/pages/details/foodDetails/foodDetails.less

@@ -0,0 +1,406 @@
+.storeDetails{
+  background-color: #fff;  
+  border-radius: 12px;
+  .storeImage{
+    position: relative;
+    border-radius: 22px;
+    width: 100%;
+    .tpPage{
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      background: #000000;
+      border-radius: 16px;  
+      font-size: 24px;       
+      color: #FFFFFF;
+      padding:0 7px;
+      opacity: 0.4;  
+      line-height: 32px;
+      padding: 7px 8px 8px 7px;
+      text{
+        opacity: 0.64;
+      }
+    }
+  }  
+  .storeJs{
+    padding: 20px;
+    .introduce{
+      float: left;
+      .storeName{
+        font-size: 32px;         
+        font-weight: bold;
+        color: #020200;
+        padding-right: 60px;
+      }
+      .storeName+text{
+        font-size: 24px;         
+        font-weight: bold;
+        color: #202020;
+        padding-right: 10px;
+      }
+      .price{
+        font-size: 32px;         
+        font-weight: bold;
+        color: #202020;
+      }
+    }
+    .bz{
+      float: right;
+      .bzRight{
+        font-size: 24px;         
+        color: #202020;
+        line-height: 34px;
+        height: 23px;
+      }
+    }
+    .appraise{
+      line-height: 0;
+      margin-top: 28px;
+      margin-bottom: 37px;
+      image{
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+      }
+      text{
+        font-size: 24px;         
+        font-weight: bold;
+        color: #020200;
+      }
+      .t1{
+        margin-left: 10px;
+      }
+      .storezf{
+        color: #020200;
+        margin-left: 7px ;
+      }
+      .comment{
+        color: #666;
+      }
+    }
+    .yysj{
+      line-height: 0;
+      .yysjImg{
+        width: 26px;
+        height: 26px;
+        position: relative;
+        top: 5px;
+      }
+      text{
+        font-size: 24px;
+        color: #666;
+        padding-left: 10px;
+      }
+    }
+    .dpPosition{
+      margin-top: 40px;
+      position: relative;
+      .dwTip{
+        width: 28px;
+        height: 28px;
+        position: absolute;
+        top: 4px;
+        left:0;
+      }
+      view{
+        font-size: 24px;         
+        color: #666666;
+        padding-left: 34px;
+        height: 97px;
+        .zhuandao{
+          width: 14px;
+          height: 24px;
+          transform: rotate(180deg);
+          position: absolute;
+          bottom: 25px;
+        }        
+      }
+      
+    }
+  }
+}
+.title{
+  margin: 59px 0 41px 0;
+  image{
+    width: 30px;
+    height: 30px;
+    position: relative;
+    top: 5px;
+  }
+  text{
+    font-size: 34px;       
+    font-weight: bold;
+    color: #202020;
+    margin-left: 10px;
+  }
+  .gltitle{
+    width: 32px;
+    height: 32px;
+    position: relative;
+    top: 5px;
+  }
+}
+.cs{
+  height: 500px;
+  // background: rgb(240, 142, 142);
+  // background: radial-gradient(circle at top left, transparent 15px, rgb(240, 142, 142) 0) top left,
+  //           radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
+  //           radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
+  //           radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
+
+
+  background: radial-gradient(circle at 82% top,transparent 15px,rgb(240,140,140) 0) top,
+              radial-gradient(circle at 82% bottom,transparent 15px,rgb(230,120,120) 0) bottom;
+
+background-repeat: no-repeat;
+background-size: auto 50%;
+}
+.foodCard{
+  background: #FFF;
+  box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  position: relative;
+  margin-bottom: 30px;
+  overflow: hidden;
+  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
+              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
+  .fCleft{
+    float: left;
+    width: 82%;
+    .backMoney{
+      font-size: 24px;
+      font-weight: bold;
+      color: #FFF;
+      margin: 22px 40px 20px 0;        
+      padding: 12px 17px 9px 6px;
+      background:url('../../../assets/icons/housemantj/fximg.png') no-repeat;    
+      display: inline-block;
+      background-size: 100% 100%;
+    }
+    .appraise{
+      display: inline-block;
+      image{
+        width: 21px;
+        height: 21px;
+        margin-right: 10px;
+      }
+      text{
+        font-size: 24px;           
+        font-weight: bold;
+        color: #020200;
+      }
+    }
+    .contentImg{
+      margin: 0 20px 43px 20px;
+      position: relative;
+      display: inline-block;
+      .img1{
+        width: 144px;
+        height: 144px;
+        border-radius: 24px;
+      }
+      .mstip{
+          width:99px;
+          height:37px;
+          position: absolute;
+          left: 0;          
+      }
+    }
+    .neirong{
+      display: inline-block;
+      width: 65%;
+      .textword{
+        font-size: 24px;           
+        color: #333;
+        margin: 0 21px 0 0;
+        height: 84px;
+      }
+      .jiage{
+        line-height: 20px;
+        font-weight: bold;
+        color: #333;
+        .rmb{
+          font-size: 20px;             
+          margin: 0 8px 0 7px;
+        }
+        .p1{
+          font-size: 24px;     
+        }
+        .p2{
+          font-size: 18px;             
+          text-decoration: line-through;
+          color: #666;
+        }
+      }
+      .address{
+        line-height: 0;
+        margin-top: 18px;
+        .dw{
+          width: 16px;
+          height: 20px;
+          position: relative;
+          top:3px;
+          margin-right: 10px;
+        }
+        .wz{
+          font-size: 20px;             
+          color: #333;
+        }
+        .star{
+          width: 21px;
+          height: 21px;
+          margin: 0 10px 0 40px;
+          position: relative;
+          top: 3px;
+        }
+        .collection{
+          font-size: 20px;             
+          color: #333333;
+        }
+      }
+    }
+  }
+  .fCright{
+    float: right;
+    width: 18%;
+    line-height: 0;
+    image{
+      width:35px;
+      height:32px;
+      margin-top: 120%;
+      margin-left:calc(50% - 15px)
+    }
+    view{
+      font-size: 24px;
+      line-height: 23px;
+      font-weight: bold;
+      color: #202020;
+      margin-top: 19px;
+      text-align: center;
+    }
+  }
+  .columnLine{
+    height: 50%;
+    border-right: 2px dashed #595959;
+    opacity: 0.12;
+    position: absolute;
+    right: 18%;
+    bottom:15%;
+  }
+}
+.showMore{
+  width: 100%;
+  background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
+  font-size: 28px;
+  font-weight: bold;
+  color: #202020;
+  text-align: center;
+  position: absolute;
+  bottom: -40px;
+  padding-top: 77px;
+  padding-bottom: 20px;
+  .moreTip{
+    width: 38px;
+    height: 19px;
+    margin-top: 14px;
+  }
+}
+.storezn{
+  font-size: 28px;    
+  color: #202020;
+  line-height: 54px;
+  margin-bottom: 44px;
+}
+.storezn+image{
+  width: 100%;
+  margin-bottom: 40px;
+}
+.waterfall{
+  column-count: 2;      //分两列
+  column-gap: 30px;    //列间距
+  background-color: #F8F8F8;
+  padding:30px 30px 0 30px;
+  
+  .contentCard{
+    background: #FFF;
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 24px;
+    overflow: hidden;
+    margin-bottom:50px;
+    break-inside: avoid;
+    position: relative;
+
+    .cardTop{
+      border-radius: 24px 24px 0px 0px;
+      .cCardimg{
+        width: 100%;
+        border-radius: 24px 24px 0px 0px;
+      }
+      .lefttips{
+        width:99px;
+        height:37px;
+        position: absolute;
+        left: 0;
+      }
+      .loveharde{
+        width: 22px;
+        height: 20px;
+        position: absolute;
+        right: 20px;
+        top: 10px;
+      }
+    }
+    .bContent{
+      padding:20px;
+      .cCword{
+        font-size: 24px;
+        font-weight: bold;
+        color: #404040;
+      }
+      
+      .cCleft{
+        float: left;
+        position: relative;
+        padding:40px 0 30px 0;
+        .cCicon{
+          width: 17px;
+          height: 21px;
+          position: absolute;
+          left: 0;
+          top: 48px;
+        }
+        .distance{
+          padding-left: 24px;
+          font-size: 24px;
+          color: #C0C8D3;
+        }
+      }
+      .cCright{
+        position: relative;
+        float: right;
+        padding:40px 0 30px 0;
+        .money{
+          font-size: 20px;
+          color: #FF3434;          
+          position: absolute;
+          right: 78px;
+          bottom: 32px;
+        }
+        .price{
+          font-size: 24px;
+          color: #FF3434;
+        }
+      }
+    }
+  }
+}
+.botton{
+  font-size: 28px;   
+  color: #C0C8D3;
+  line-height: 34px;
+  text-align: center;
+  padding:40px 0 68px 0;
+  background-color: #F8F8F8;
+}

src/pages/details/mjDetails/sceneryDetails.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '美景详情',
+  navigationStyle: 'custom',
+}

src/pages/details/mjDetails/sceneryDetails.jsx

@@ -0,0 +1,247 @@
+import CustomNav from '@/components/CustomNav'
+import mj from '../../../assets/icons/housemantj/mj2.jpg'
+import ax from '../../../assets/icons/housemantj/onlove.png'
+import huangxin from '../../../assets/icons/housemantj/已收藏.png'
+import baixin from '../../../assets/icons/housemantj/收藏.png'
+import dw from '../../../assets/icons/housemantj/地址.png'
+import titlezs from '../../../assets/icons/housemantj/推荐景点.png'
+import titlems from '../../../assets/icons/housemantj/推荐美食.png'
+import pay from '../../../assets/icons/housemantj/pay.png'
+import ms2 from '../../../assets/icons/housemantj/ms2.jpg'
+import msTip from '../../../assets/icons/housemantj/foodtip.png'
+import wz from '../../../assets/icons/housemantj/location.png'
+import showMore from '../../../assets/icons/housemantj/查看更多.png'
+import dp from '../../../assets/icons/housemantj/dp.jpg'
+import znz from '../../../assets/icons/housemantj/znz.png'
+import location from '../../../assets/icons/housemantj/location.png'
+import mjImage from '../../../assets/icons/housemantj/mj.jpg'
+import glImage from '../../../assets/icons/housemantj/gl.jpg'
+import glTip from '../../../assets/icons/housemantj/gltip.png'
+import onlove from '../../../assets/icons/housemantj/爱心.png'
+import share from '../../../assets/icons/housemantj/景点分享.png'
+import good from '../../../assets/icons/housemantj/景点爆赞.png'
+import collection from '../../../assets/icons/housemantj/景点收藏.png'
+import './sceneryDetails.less'
+
+
+export default (props) => {
+  return (
+    <view className='page-index'>
+      <view className='index-navbar'>
+        <CustomNav title='十公里' />
+      </view>
+      <view style={{overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
+          <view className='storeDetails'>
+            <image src={mj} className='storeImage' >
+              <view className='tpPage'>
+                <text>1</text><text>/</text><text>64</text>
+              </view>
+            </image>
+            <view className='storeJs'>
+              <view className='introduce'>
+                <text className='storeName'>玄武湖</text>
+              </view>
+              <view className='bz'>
+                  <image src={ax} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
+                  <text className='bzRight'>爆赞<text>9999+</text></text>
+                </view>
+              <view className='wz'>凤游寺52号悦动新门西15栋111号</view>
+              <view className='dpPosition'>
+                <image src={dw} className='dwTip' />
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+            </view>
+          </view>
+          <view className='jdjs'>
+            <view>
+              到了10月下旬的深秋时节，“不觉初秋夜渐长，清风习习重凄
+              凉”，秋天的美，毫不输给繁花似锦的春天11月栖霞山枫叶最
+              佳观赏期快要来了，赶紧提前收藏这些吧！
+              </view>
+              <view className='line'></view>
+              <view className='sc'>
+                <image className='scTip' src={baixin} /><text>加入收藏</text>
+              </view>
+          </view>
+          <view style={{ position: 'relative' }}>
+            <view className='title'>
+              <image src={titlezs}></image>
+              <text>景点介绍</text>
+            </view>
+            <view className='storezn'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Quis ipsum suspendisse ultrices gravida.
+              Risus commodo viverra maecenas accumsan lacus vel
+              facilisis.
+            </view>
+            <image src={dp} mode='widthFix' />
+            <view className='storezn'>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Quis ipsum suspendisse ultrices gravida.
+            </view>
+            <view className='showMore'>
+              <view>点击查看更多</view>
+              <image src={showMore} className='moreTip' />
+            </view>
+          </view>
+          <view style={{ position: 'relative' }}>
+            <view className='title'>
+              <image src={titlems}></image>
+              <text>老板推荐好吃的</text>
+            </view>
+            <view className='foodCard'>
+              <view className='fCleft'>
+                <view className='backMoney'>
+                  返现￥2.04
+                </view>
+                <view className='appraise'>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={baixin}></image>
+                  <text className='storezf'>4.5</text>
+                </view>
+                <view style={{ overflow: 'hidden' }}>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
+                  </view>
+                  <view className='neirong'>
+                    <view className='textword'>
+                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
+                    </view>
+                    <view className='jiage'>
+                      <text className='rmb' >￥&nbsp;&nbsp;</text>
+                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
+                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
+                    </view>
+                    <view className='address'>
+                      <image className='dw' src={wz} />
+                      <text className='wz'>南京市/秦淮区</text>
+                      <image className='star' src={huangxin}></image>
+                      <text className='collection'>已收藏</text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view className='fCright'>
+                <image src={pay} />
+                <view>支付</view>
+              </view>
+              <view className='columnLine'></view>
+            </view>
+            <view className='foodCard'>
+              <view className='fCleft'>
+                <view className='backMoney'>
+                  返现￥2.04
+                </view>
+                <view className='appraise'>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={huangxin}></image>
+                  <image className='star' src={baixin}></image>
+                  <text className='storezf'>4.5</text>
+                </view>
+                <view style={{ overflow: 'hidden' }}>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
+                  </view>
+                  <view className='neirong'>
+                    <view className='textword'>
+                      探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
+                    </view>
+                    <view className='jiage'>
+                      <text className='rmb' >￥&nbsp;&nbsp;</text>
+                      <text className='p1'><text className='price' >55</text>元&nbsp;&nbsp;</text>
+                      <text className='p2'>门市价<text className='oldprice' >78</text>元</text>
+                    </view>
+                    <view className='address'>
+                      <image className='dw' src={wz} />
+                      <text className='wz'>南京市/秦淮区</text>
+                      <image className='star' src={huangxin}></image>
+                      <text className='collection'>已收藏</text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view className='fCright'>
+                <image src={pay} />
+                <view>支付</view>
+              </view>
+              <view className='columnLine'></view>
+            </view>
+            <view className='showMore'>
+              <view>查看更多</view>
+              <image src={showMore} className='moreTip' />
+            </view>
+          </view>
+          <view className='title'>
+            <image src={znz} className='gltitle'></image>
+            <text>老板推荐的攻略</text>
+          </view>
+          <view className="waterfall">
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={glTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+                </view>
+                <view className='cCright'>
+                  <view className='money'>￥</view>
+                  <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={glImage} className='cCardimg' />
+                <image className='lefttips' src={glTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'>9.99公里</view>
+                </view>
+                <view className='cCright'>
+                  <view className='money'>￥</view>
+                  <view className='price'>999/人</view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view className='bottom'>已经到底了~</view>
+        </scroll-view>
+        </view>
+        <view className='bottomTab'>
+          <view className='tab'>
+            <image className='share' src={share} /><text>分享</text>
+          </view>
+          <view className='tab'>
+            <image className='good' src={good} /><text>爆赞</text>
+          </view>
+          <view className='tab'>
+            <image className='collection' src={collection} /><text>加入收藏</text>
+          </view>
+        </view>
+      
+    </view>
+  )
+}

src/pages/details/mjDetails/sceneryDetails.less

@@ -0,0 +1,384 @@
+.storeDetails{
+  background-color: #fff;  
+  border-radius: 12px;
+  margin-bottom: 20px;
+  .storeImage{
+    position: relative;
+    border-radius: 22px;
+    width: 100%;
+    .tpPage{
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      background: #000000;
+      border-radius: 16px;  
+      font-size: 24px;       
+      color: #FFFFFF;
+      padding:0 7px;
+      opacity: 0.4;  
+      line-height: 32px;
+      padding: 7px 8px 8px 7px;
+      text{
+        opacity: 0.64;
+      }
+    }
+  }  
+  .storeJs{
+    padding: 22px;
+    .introduce{
+      display: inline-block;
+      .storeName{
+        font-size: 32px;         
+        font-weight: bold;
+        color: #020200;
+      }
+    }
+    .bz{
+      float: right;
+      .bzRight{
+        font-size: 24px;         
+        color: #202020;
+        line-height: 34px;
+        height: 23px;
+      }
+    }
+    .wz{
+      font-size: 24px;      
+      line-height: 0;
+      padding: 30rpx 0 32rpx 0;
+      font-weight: bold;
+      color: #404040;
+    }
+    .dpPosition{
+      position: relative;
+      .dwTip{
+        width: 28px;
+        height: 28px;
+        position: absolute;
+        top: 4px;
+        left:0;
+      }
+      .distance{
+        padding-left: 38px;
+        font-size: 24px;         
+        color: #C0C8D3;
+      }
+    }
+  }
+}
+.jdjs{
+  background: #FFF;
+  border-radius: 12px 12px 0px 0px;
+  padding: 30px 20px 43px 20px;
+  font-size: 24px;   
+  font-weight: bold;
+  color: #202020;
+  line-height: 54px;
+  overflow: hidden;
+  .line{
+    height: 1px;
+    background: #000;
+    opacity: 0.1;
+    margin:57px 20px 42px 20px;
+  }
+  .sc{
+    font-size: 20px;     
+    font-weight: bold;
+    color: #333;
+    float: right;
+    line-height: 0;
+    margin-right: 4px;
+    .scTip{
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+    }
+  }
+}
+.title{
+  margin: 60px 0 40px 0;
+  image{
+    width: 30px;
+    height: 30px;
+  }
+  text{
+    font-size: 34px;      
+    font-weight: bold;
+    color: #202020;
+    margin-left: 10px;
+  }
+  .gltitle{
+    width: 32px;
+    height: 32px;
+    position: relative;
+    top: 5px;
+  }
+}
+.foodCard{
+  background: #FFF;
+  box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  position: relative;
+  margin-bottom: 30px;
+  overflow: hidden;
+  background: radial-gradient(circle at 82% top,transparent 20px,#fff 0) top,
+              radial-gradient(circle at 82% bottom,transparent 20px,#fff 0) bottom;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
+  .fCleft{
+    float: left;
+    width: 82%;
+    .backMoney{
+      font-size: 24px;
+      font-weight: bold;
+      color: #FFF;
+      margin: 22px 40px 20px 0;        
+      padding: 12px 17px 9px 6px;
+      background:url('../../../assets/icons/housemantj/fximg.png') no-repeat;    
+      display: inline-block;
+      background-size: 100% 100%;
+    }
+    .appraise{
+      display: inline-block;
+      image{
+        width: 21px;
+        height: 21px;
+        margin-right: 10px;
+      }
+      text{
+        font-size: 24px;           
+        font-weight: bold;
+        color: #020200;
+      }
+    }
+    .contentImg{
+      margin: 0 20px 43px 20px;
+      position: relative;
+      display: inline-block;
+      .img1{
+        width: 144px;
+        height: 144px;
+        border-radius: 24px;
+      }
+      .mstip{
+          width:99px;
+          height:37px;
+          position: absolute;
+          left: 0;          
+      }
+    }
+    .neirong{
+      display: inline-block;
+      width: 65%;
+      .textword{
+        font-size: 24px;           
+        color: #333;
+        margin: 0 21px 0 0;
+        height: 84px;
+      }
+      .jiage{
+        line-height: 20px;
+        font-weight: bold;
+        color: #333;
+        .rmb{
+          font-size: 20px;             
+          margin: 0 8px 0 7px;
+        }
+        .p1{
+          font-size: 24px;     
+        }
+        .p2{
+          font-size: 18px;             
+          text-decoration: line-through;
+          color: #666;
+        }
+      }
+      .address{
+        line-height: 0;
+        margin-top: 18px;
+        .dw{
+          width: 16px;
+          height: 20px;
+          position: relative;
+          top:3px;
+          margin-right: 10px;
+        }
+        .wz{
+          font-size: 20px;             
+          color: #333;
+        }
+        .star{
+          width: 21px;
+          height: 21px;
+          margin: 0 10px 0 40px;
+          position: relative;
+          top: 3px;
+        }
+        .collection{
+          font-size: 20px;             
+          color: #333333;
+        }
+      }
+    }
+  }
+  .fCright{
+    float: right;
+    width: 18%;
+    line-height: 0;
+    image{
+      width:35px;
+      height:32px;
+      margin-top: 120%;
+      margin-left:calc(50% - 15px)
+    }
+    view{
+      font-size: 24px;
+      line-height: 23px;
+      font-weight: bold;
+      color: #202020;
+      margin-top: 19px;
+      text-align: center;
+    }
+  }
+  .columnLine{
+    height: 50%;
+    border-right: 2px dashed #595959;
+    opacity: 0.12;
+    position: absolute;
+    right: 18%;
+    bottom:15%;
+  }
+}
+.showMore{
+  width: 100%;
+  background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
+  font-size: 28px;
+  font-weight: bold;
+  color: #202020;
+  text-align: center;
+  position: absolute;
+  bottom: -40px;
+  padding-top: 77px;
+  padding-bottom: 20px;
+  .moreTip{
+    width: 38px;
+    height: 19px;
+    margin-top: 14px;
+  }
+}
+.storezn{
+  font-size: 28px;
+    
+    color: #202020;
+  line-height: 54px;
+  margin-bottom: 40px;
+}
+.storezn+image{
+  width: 100%;
+}  
+.waterfall{
+  column-count: 2;      //分两列
+  column-gap: 30px;    //列间距
+  background-color: #F8F8F8;
+  
+  .contentCard{
+    background: #FFF;
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 24px;
+    overflow: hidden;
+    margin-bottom:50px;
+    break-inside: avoid;
+    position: relative;
+
+    .cardTop{
+      border-radius: 24px 24px 0px 0px;
+      .cCardimg{
+        width: 100%;
+        border-radius: 24px 24px 0px 0px;
+      }
+      .lefttips{
+        width:99px;
+        height:37px;
+        position: absolute;
+        left: 0;
+      }
+      .loveharde{
+        width: 22px;
+        height: 20px;
+        position: absolute;
+        right: 20px;
+        top: 10px;
+      }
+    }
+    .bContent{
+      padding:20px;
+      .cCword{
+        font-size: 24px;
+        font-weight: bold;
+        color: #404040;
+      }
+      
+      .cCleft{
+        float: left;
+        position: relative;
+        padding:40px 0 30px 0;
+        .cCicon{
+          width: 17px;
+          height: 21px;
+          position: absolute;
+          left: 0;
+          top: 48px;
+        }
+        .distance{
+          padding-left: 24px;
+          font-size: 24px;
+          color: #C0C8D3;
+        }
+      }
+      .cCright{
+        position: relative;
+        float: right;
+        padding:40px 0 30px 0;
+        .money{
+          font-size: 20px;
+          color: #FF3434;          
+          position: absolute;
+          right: 78px;
+          bottom: 32px;
+        }
+        .price{
+          font-size: 24px;
+          color: #FF3434;
+        }
+      }
+    }
+  }
+}
+.bottom{
+  font-size: 28px;    
+  color: #C0C8D3;
+  line-height: 34px;
+  text-align: center;
+  padding:40px 0 60px 0;
+  background-color: #F8F8F8;
+}
+
+.bottomTab{
+  background: #FFF;
+  border-radius: 12px;
+  column-count: 3;
+  text-align: center;  
+  .tab{
+    line-height: 96px;
+    font-size: 28px;     
+    font-weight: bold;
+    color: #202020;
+    image{
+      width: 31px;
+      height: 31px;
+      position: relative;
+      top: 7px;
+      margin-right: 12px;
+    }
+  }
+}

src/pages/index/index.config.js

@@ -1,5 +1,5 @@
 export default {
-  navigationBarTitleText: '首页',
+  navigationBarTitleText: '十公里',
   navigationStyle: 'custom',
   styleIsolation: 'shared',
   usingComponents: {

src/pages/index/index.jsx

@@ -14,6 +14,7 @@ import Strategy from './tabs/Strategy'
 // const Strategy = lazy(() => import('./tabs/Strategy'))
 // const Mine =  import'./tabs/Mine'
 
+
 export default (props) => {
   const { params } = useRouter()
   const { tab } = params || {}
@@ -35,7 +36,7 @@ export default (props) => {
   return (
     <view className='page-index'>
       <view className='index-navbar'>
-        <CustomNav logo={logo} title='首页' />
+        <CustomNav logo={logo} title='十公里' />
       </view>
       <view className='index-container'>
         {currentTab === 0 && <Recommend />}

src/pages/index/index.less

@@ -16,6 +16,7 @@
 
   .index-container {
     flex: auto;
+    overflow: hidden;
   }
 }
 

src/pages/index/tabs/Recommend.jsx

@@ -1,7 +1,335 @@
 import React from 'react'
+// .就是当前路径
+import './less/Recommend.less'
+import iconsearch from '../../../assets/icons/housemantj/search.png'
+import icontip from '../../../assets/icons/housemantj/tip.png'
+import location from '../../../assets/icons/housemantj/location.png'
+import msImage from'../../../assets/icons/housemantj/ms.jpg'
+import mjImage from'../../../assets/icons/housemantj/mj.jpg'
+import glImage from'../../../assets/icons/housemantj/gl.jpg'
+import msTip from'../../../assets/icons/housemantj/foodtip.png'
+import mjTip from'../../../assets/icons/housemantj/mjtip.png'
+import glTip from'../../../assets/icons/housemantj/gltip.png'
+import onlove from'../../../assets/icons/housemantj/onlove.png'
+import Taro from '@tarojs/taro'
 
 export default (props) => {
+  const onSearch=()=>{
+    // 用绝对路径
+    Taro.navigateTo({ url:'/pages/search/search'});
+  }
+  const toDetails=()=>{
+    // 用绝对路径
+    Taro.navigateTo({ url:'/pages/details/foodDetails/foodDetails'});
+  }
+  const toDetails2=()=>{
+    // 用绝对路径
+    Taro.navigateTo({ url:'/pages/details/mjDetails/sceneryDetails'});
+  }
+  const onLogin=()=>{
+    // 用绝对路径
+    Taro.navigateTo({ url:'/pages/login/login'});
+  }
   return (
-    <view>房东推荐</view>
+    <view style={{height: '100%',overflow:'auto'}}>
+      <view className='search' onClick={onSearch}>
+        <input className='searchInput' disabled />
+        <image className='searchicon' src={iconsearch} />
+        <view className="searchword">搜索</view>
+      </view>
+      <view className='tip' onclick={onLogin}>
+        <image className='tipicon' src={icontip} />
+        <view className='tipword' >Tip : 饮食无大小，疫情防控请大家认真对待！</view>
+      </view>
+      <view className='nav'>
+        <view className='dinwei'>
+          <image className='location' src={location} />
+          <view className='city'>南京</view>
+        </view>
+        <view className='line' />
+        <view className='list'>
+          <view className='bdattractions' >
+            <view className='acname'>附近</view>
+            <view className='buttonline' ></view>
+          </view>
+          <view className='bdattractions'>
+            <view className='acname'>全城</view>
+            <view className='buttonline'></view>
+          </view><view className='bdattractions'>
+            <view className='acname'>夫子庙</view>
+            <view className='buttonline'></view>
+          </view><view className='bdattractions'>
+            <view className='acname'>新街口</view>
+            <view className='buttonline'></view>
+          </view>
+        </view>
+      </view>
+      <scroll-view  scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" className='content'>
+        <view className="waterfall">
+          
+          <view className='contentCard' onClick={toDetails2}>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+            <view className='cardTop'>
+              <image mode='widthFix' src={msImage} className='cCardimg'/>
+              <image  className='lefttips' src={msTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+            <view className='cardTop'>
+              <image mode='widthFix' src={glImage} className='cCardimg'/>
+              <image  className='lefttips' src={glTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'>9.99公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'>999/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>         
+          <view className='contentCard'>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+            <view className='cardTop'>
+              <image mode='widthFix' src={msImage} className='cCardimg'/>
+              <image  className='lefttips' src={msTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'onClick={toDetails}>
+            <view className='cardTop'>
+              <image mode='widthFix' src={msImage} className='cCardimg'/>
+              <image  className='lefttips' src={msTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+            <view className='cardTop'>
+              <image mode='widthFix' src={msImage} className='cCardimg'/>
+              <image  className='lefttips' src={msTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+            <view className='cardTop'>
+              <image mode='widthFix' src={msImage} className='cCardimg'/>
+              <image  className='lefttips' src={msTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+          <view className='contentCard'>
+             <view className='cardTop'>
+              <image mode='widthFix' src={mjImage} className='cCardimg'/>
+            <image  className='lefttips' src={mjTip} />
+              <image src={onlove} className='loveharde'></image>
+            </view>
+            <view className='bContent'>
+              <view className='cCword'>
+                超划算套餐？这么便宜也是第一次见6荤6素1...
+              </view>
+              <view className='cCleft'>
+                <image src={location} className='cCicon'></image>
+                <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view className='botton'>已经到底了~</view>
+       </scroll-view> 
+    </view>
   )
 }

src/pages/index/tabs/less/Recommend.less

@@ -0,0 +1,196 @@
+.search{
+    padding: 10px 30px 0 30px;
+    position: relative;
+    .searchInput{    
+        width: 690px;
+        height: 68px;
+        background: #F8F8F8;
+        border-radius: 34px;
+        padding-left: 30px;
+        box-sizing: border-box;
+    }
+    .searchicon{
+      width: 25px;
+      height: 25px;
+      position: absolute;
+      bottom: 24px;
+      left: 50%;
+      margin-left: -40px;
+    }
+    .searchword{
+      height: 23px;
+      font-size: 24px;
+      position: absolute;
+      bottom: 34px;
+      left: 50%;
+      margin-left: -5px;
+      color: #C0C8D3;
+      letter-spacing: 0.2em;
+    }
+}
+.tip{
+  padding:23px 0 22px 31px;
+  height: 70px;
+
+  .tipicon{
+    width: 17px;
+    height: 19px;
+    margin-right: 10px;
+  }
+  .tipword{
+    display:inline-block;
+    font-size: 24px;
+    color: #999;
+  }
+}
+.nav{
+  margin-left: 36px;
+  .dinwei{
+    float: left;
+    position: relative;
+    top: 4px;
+    .location{
+      width: 35px;
+      height: 42px;
+    }
+    .city{
+      width: 40px;
+      font-size: 20px;
+      font-weight: bold;
+      color: #4C4C4C;
+      position: relative;
+      left: -2px;
+      bottom: 11px;
+    }
+  }
+  .line{
+    float: left;
+    width: 1px;
+    height: 68px;
+    background: #4C4C4C;
+    opacity: 0.1;
+    display: inline-block;
+    position: relative;
+    left: 19px;
+    top: 4px;
+    
+  }
+  .list{
+    float: left;
+    .bdattractions{
+      float: left;
+      padding:28px 20px 27px 49px ;
+      .acname{
+        font-size: 28px;
+        font-weight: bold;
+        color: #C0C8D3;      
+      }
+      .buttonline{
+        width: 30px;
+        height: 6px;
+        position: relative;
+        bottom:-27px;
+        left: 0;
+        margin: 0 auto;
+      }
+      
+    }
+    .bdattractions:first-child .acname{
+        font-size: 32px;
+        color: #4C4C4C;
+    }
+    .bdattractions:first-child .buttonline{
+        background: #4C4C4C;
+    }
+  }
+}
+.content{
+  width: 100%;
+  height: calc(100vh - 120px);
+  .waterfall{
+    column-count: 2;      //分两列
+    column-gap: 30px;    //列间距
+    background-color: #F8F8F8;
+    padding:30px 30px 0 30px;
+    
+    .contentCard{
+      background: #FFF;
+      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 24px;
+      overflow: hidden;
+      margin-bottom:50px;
+      break-inside: avoid;
+      position: relative;
+
+      .cardTop{
+        border-radius: 24px 24px 0px 0px;
+        .cCardimg{
+          width: 100%;
+          border-radius: 24px 24px 0px 0px;
+        }
+        .lefttips{
+          width:99px;
+          height:37px;
+          position: absolute;
+          left: 0;
+        }
+        .loveharde{
+          width: 22px;
+          height: 20px;
+          position: absolute;
+          right: 20px;
+          top: 10px;
+        }
+      }
+      .bContent{
+        padding:20px;
+        .cCword{
+          font-size: 24px;
+          font-weight: bold;
+          color: #404040;
+        }
+        
+        .cCleft{
+          float: left;
+          position: relative;
+          padding:40px 0 30px 0;
+          .cCicon{
+            width: 17px;
+            height: 21px;
+            position: absolute;
+            left: 0;
+            top: 48px;
+          }
+          .distance{
+            padding-left: 24px;
+            font-size: 24px;
+            color: #C0C8D3;
+          }
+        }
+        .cCright{
+          position: relative;
+          float: right;
+          padding:40px 0 30px 0;
+          .money{
+            font-size: 20px;
+            color: #FF3434;          
+            position: absolute;
+            right: 78px;
+            bottom: 32px;
+          }
+          .price{
+            font-size: 24px;
+            color: #FF3434;
+          }
+        }
+      }
+    }
+  } 
+  .botton{
+    font-size: 28px;
+    color: #C0C8D3;
+    text-align: center;
+    padding:40px 0 50px 0;
+    background-color: #F8F8F8;
+  } 
+}

src/pages/landlord/landlord.config.js

@@ -0,0 +1,8 @@
+export default {
+  navigationBarTitleText: '十公里',
+  navigationStyle: 'custom',
+  styleIsolation: 'shared',
+  usingComponents: {
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
+  }
+}

src/pages/landlord/landlord.jsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react'
+import { useRouter } from '@tarojs/taro'
+import HouseManage from '@/components/Landlord/HouseManage/houseManage'
+import Income from '@/components/Landlord/Income/income'
+import TabBar from '@/components/CustTabBar'
+import incomeImg from '@/assets/icons/landlord/我的收入.png'
+import onincomeImg from '@/assets/icons/landlord/我的收入按下.png'
+import houseImg from '@/assets/icons/landlord/房源管理.png'
+import onhouseImg from '@/assets/icons/landlord/房源管理按下.png'
+import './landlord.less'
+
+export default (props) => {
+  const { params } = useRouter()
+  const { tab } = params || {}
+
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const handleTabChange = (e) => {
+    const { index } = e.detail
+    setCurrentTab(index)
+  }
+
+  useEffect(() => {
+    if (tab) {
+      setCurrentTab(tab - 0)
+    }
+  }, [tab])
+
+  return (
+    <view className='page-index'>
+      <view className='index-container'>
+        {currentTab === 0 && <Income />}
+        {currentTab === 1 && <HouseManage />}
+      </view>
+      <view className='index-tabbar'>
+        <TabBar extClass='custom-tabbar bottomTab' current={currentTab} onChange={handleTabChange}>
+          <view className={`${currentTab === 0 ? 'incomeTab' : ''}`}>
+            <image className='incomes' src={currentTab === 0 ? onincomeImg : incomeImg} /><text>我的收入</text>
+          </view>
+          <view className={`${currentTab === 1 ? 'houseTab' : ''}`}>
+            <image className='house' src={currentTab === 1 ? onhouseImg : houseImg} /><text>房源管理</text>
+          </view>
+        </TabBar>
+      </view>
+    </view>
+
+  )
+
+}

src/pages/landlord/landlord.less

@@ -0,0 +1,20 @@
+.bottomTab{
+  height: 98px;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .incomeTab{
+    color: #666;
+  }
+  .houseTab{
+    color: #666;
+  }
+  image{
+    width: 31px;
+    height: 31px;
+    position: relative;
+    top: 7px;
+    margin-right: 12px;
+  }
+}

src/pages/login/login.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '登录',
+  navigationStyle: 'custom',
+}

src/pages/login/login.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import CustomNav from '@/components/CustomNav'
+import index from '../../assets/icons/login/LOGO.png'
+import '../index/index.less'
+import './login.less'
+
+
+export default (props) => {
+return (
+  <view className='page-index'>
+    <view className='index-navbar'>
+        <CustomNav title='登录' />                 
+    </view>
+    <image className='logo' src={index} />
+    <view className='v1'>登录后可继续当前操作</view>
+    <view className='login'>微信手机号一键登录</view>
+    <view className='buttom'>
+      <radio />
+    我已阅读知晓并同意 <text>《平台用户服务协议》</text>
+    </view>
+  </view>
+  
+)}

src/pages/login/login.less

@@ -0,0 +1,42 @@
+.logo{
+  width: 320px;
+  height: 320px;
+  margin: 21px auto;
+  margin-top: 100px;
+}
+.v1{
+  font-size: 28px;
+   line-height: 0;
+  color: #999;
+  text-align: center;
+}
+.login{
+  width: calc(100% - 60px);
+  background: #274190;
+  border-radius: 12px;
+  font-size: 30px;   
+  font-weight: bold;
+  color: #FFF;
+  text-align: center;
+  line-height: 92px;
+  margin:80px auto;
+}
+.buttom{
+  font-size: 24px;   
+  color: #666;  
+  position: absolute;
+  text-align: center;
+  bottom: 80px;
+  width: 100%;
+  radio{
+    transform:scale(0.5);
+    margin-right: -9px;
+    position: relative;
+    bottom: 4px;
+    right: -8px;
+  }
+  text{
+    color: #274190;
+    text-decoration: underline;
+  }
+}

src/pages/search/search.config.js

@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '搜索',
+    navigationStyle: 'custom',
+  }

src/pages/search/search.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import iconsearch from '../../assets/icons/housemantj/search.png'
+import './search.less'
+import CustomNav from '@/components/CustomNav'
+import '../index/index.less'
+import Taro from '@tarojs/taro'
+
+
+
+
+
+export default (props) => {
+    const goLook=()=>{
+        Taro.navigateTo({ url:'/pages/searchResult/searchResult'});
+    }
+    
+return (
+        <view className='page-index'>
+            <view className='index-navbar'>
+                <CustomNav title='搜索' />                 
+            </view>
+            
+            <view className='search'>
+                <input className='searchInput' placeholder='请输入景区/城市搜索'/>
+                <image className='searchicon' src={iconsearch} />
+                <view className='lineSearch'></view>
+            </view>
+            <view className='content'>
+                <view className='hotSearch'>热门搜索</view>
+                <view className='hotSearchtip'>
+                    <view onClick={goLook}>小龙虾</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                    <view>小笼包</view>
+                </view>
+            </view>  
+
+        </view>
+    )
+}

src/pages/search/search.less

@@ -0,0 +1,61 @@
+.search{
+  padding: 10px 30px 0 30px;
+  position: relative;
+  .searchInput{    
+      height: 68px;
+      background: #F8F8F8;
+      border-radius: 34px;
+      padding-left: 86px;
+      box-sizing: border-box;
+      font-size: 24px;
+  }
+  .searchicon{
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    bottom: 21px;
+    left: 50px;
+  }
+  .lineSearch{      
+    position: absolute;
+    bottom: 19px;
+    left: 95px;
+    width: 1px;
+    height: 28px;
+    background: #000;
+    opacity: 0.2;
+  }    
+}
+.content{
+  padding: 60px 30px;
+  .hotSearch{
+    font-size: 34px;     
+    font-weight: bold;
+    color: #202020;
+    margin-bottom:58.4px;
+  }
+  .hotSearchtip view{
+    border-radius: 30px;
+    font-size: 24px;     
+    font-weight: bold;
+    margin:0 40px 40px 0;
+    padding:18px 23px;
+    float: left;
+    color: #666666;
+    border: 1px solid #999999;
+  }
+  .hotSearchtip view:first-child{
+    border: 2px solid #274190;
+    border-radius: 30px;
+    font-size: 24px;
+     
+    font-weight: bold;
+    color: #0C297F;
+    display: block;
+    margin:0 40px 40px 0;
+    padding:19px 25px;
+    float: left;    
+  }
+  
+  
+}

src/pages/searchResult/searchResult.config.js

@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '搜索',
+    navigationStyle: 'custom',
+  }

src/pages/searchResult/searchResult.jsx

@@ -0,0 +1,267 @@
+import React from 'react'
+// .就是当前路径
+import iconsearch from '../../assets/icons/housemantj/search.png'
+import location from '../../assets/icons/housemantj/location.png'
+import msImage from '../../assets/icons/housemantj/ms.jpg'
+import mjImage from '../../assets/icons/housemantj/mj.jpg'
+import glImage from '../../assets/icons/housemantj/gl.jpg'
+import msTip from '../../assets/icons/housemantj/foodtip.png'
+import mjTip from '../../assets/icons/housemantj/mjtip.png'
+import glTip from '../../assets/icons/housemantj/gltip.png'
+import onlove from '../../assets/icons/housemantj/onlove.png'
+import CustomNav from '@/components/CustomNav'
+import Taro from '@tarojs/taro'
+import './searchResult.less'
+
+
+export default (props) => {
+  const onSearch = () => {
+    // 用绝对路径
+    Taro.navigateTo({ url: '/pages/search/search' });
+  }
+
+
+
+
+
+  return (
+    <view className='page-index'>
+      <view className='index-navbar'>
+        <CustomNav title='搜索' />
+      </view>
+      <view style={{ height: '100%',overflow:'auto'}}>
+        <view className='search'>
+          <input className='searchInput' placeholder='请输入景区/城市搜索' disabled onClick={onSearch} />
+          <image className='searchicon' src={iconsearch} />
+          <view className='lineSearch'></view>
+        </view>
+        <view className='nav'>
+          <view className='list'>
+            <view className='bdattractions' >
+              <view className='acname'>全部</view>
+              <view className='buttonline' ></view>
+            </view>
+            <view className='bdattractions'>
+              <view className='acname'>美食</view>
+              <view className='buttonline'></view>
+            </view>
+            <view className='bdattractions'>
+              <view className='acname'>景点</view>
+              <view className='buttonline'></view>
+            </view>
+            <view className='bdattractions'>
+              <view className='acname'>攻略</view>
+              <view className='buttonline'></view>
+            </view>
+          </view>
+        </view>
+
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" className='content'>
+          <view className="waterfall">
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={msImage} className='cCardimg' />
+                <image className='lefttips' src={msTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={mjTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={glImage} className='cCardimg' />
+                <image className='lefttips' src={glTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={mjTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={msImage} className='cCardimg' />
+                <image className='lefttips' src={msTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={mjTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={msImage} className='cCardimg' />
+                <image className='lefttips' src={msTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={mjTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={msImage} className='cCardimg' />
+                <image className='lefttips' src={msTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+            <view className='contentCard'>
+              <view className='cardTop'>
+                <image mode='widthFix' src={mjImage} className='cCardimg' />
+                <image className='lefttips' src={mjTip} />
+                <image src={onlove} className='loveharde'></image>
+              </view>
+              <view className='bContent'>
+                <view className='cCword'>
+                  超划算套餐？这么便宜也是第一次见6荤6素1...
+                </view>
+                <view className='cCleft'>
+                  <image src={location} className='cCicon'></image>
+                  <view className='distance'><text>9.99</text>公里</view>
+              </view>
+              <view className='cCright'>
+                <view className='money'>￥</view>
+                <view className='price'><text>999</text>/人</view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view className='botton'>已经到底了~</view>
+        </scroll-view>
+      </view>
+    </view>
+  )
+}

src/pages/searchResult/searchResult.less

@@ -0,0 +1,153 @@
+.search{
+    padding: 10px 30px 0 30px;
+    position: relative;
+    .searchInput{    
+        height: 68px;
+        background: #F8F8F8;
+        border-radius: 34px;
+        padding-left: 86px;
+        box-sizing: border-box;
+        font-size: 24px;
+    }
+    .searchicon{
+      width: 25px;
+      height: 25px;
+      position: absolute;
+      bottom: 21px;
+      left: 50px;
+    }
+    .lineSearch{      
+      position: absolute;
+      bottom: 19px;
+      left: 95px;
+      width: 1px;
+      height: 28px;
+      background: #000;
+      opacity: 0.2;
+    }    
+}
+.nav{
+  margin-left: 36px;
+  .list{
+    float: left;
+    .bdattractions{
+      float: left;
+      padding:28px 49px 27px 20px ;
+      box-sizing: border-box;  
+      .acname{
+        font-size: 28px;         
+        font-weight: bold;
+        color: #C0C8D3;      
+      }
+      .buttonline{
+        width: 30px;
+        height: 6px;
+        position: relative;
+        top:27px;
+        margin: 0 auto;
+      }
+    }
+    .bdattractions:first-child .acname{
+        font-size: 32px;
+        color: #4C4C4C;
+    }
+    .bdattractions:first-child .buttonline{
+        background: #4C4C4C;
+    }
+  }
+}
+
+
+
+.content{
+  width: 100%;
+  height: calc(100vh - 120px);
+  .waterfall{
+    column-count: 2;      //分两列
+    column-gap: 30px;    //列间距
+    background-color: #F8F8F8;
+    padding:30px 30px 0 30px;
+    
+    .contentCard{
+      background: #FFF;
+      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 24px;
+      overflow: hidden;
+      margin-bottom:50px;
+      break-inside: avoid;
+      position: relative;
+
+      .cardTop{
+        border-radius: 24px 24px 0px 0px;
+        .cCardimg{
+          width: 100%;
+          border-radius: 24px 24px 0px 0px;
+        }
+        .lefttips{
+          width:99px;
+          height:37px;
+          position: absolute;
+          left: 0;
+        }
+        .loveharde{
+          width: 22px;
+          height: 20px;
+          position: absolute;
+          right: 20px;
+          top: 10px;
+        }
+      }
+      .bContent{
+        padding:20px;
+        .cCword{
+          font-size: 24px;
+          font-weight: bold;
+          color: #404040;
+        }
+        
+        .cCleft{
+          float: left;
+          position: relative;
+          padding:40px 0 30px 0;
+          .cCicon{
+            width: 17px;
+            height: 21px;
+            position: absolute;
+            left: 0;
+            top: 48px;
+          }
+          .distance{
+            padding-left: 24px;
+            font-size: 24px;
+            color: #C0C8D3;
+          }
+        }
+        .cCright{
+          position: relative;
+          float: right;
+          padding:40px 0 30px 0;
+          .money{
+            font-size: 20px;
+            color: #FF3434;          
+            position: absolute;
+            right: 78px;
+            bottom: 32px;
+          }
+          .price{
+            font-size: 24px;
+            color: #FF3434;
+          }
+        }
+      }
+    }
+  } 
+  .botton{
+    font-size: 28px;
+    color: #C0C8D3;
+    text-align: center;
+    padding:40px 0 50px 0;
+    background-color: #F8F8F8;
+  } 
+}
+
+

src/pages/spread/spreadIndex.config.js

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '十公里',
+  navigationStyle: 'custom',
+  usingComponents: {
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
+  }
+}

src/pages/spread/spreadIndex.jsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react'
+import { useRouter } from '@tarojs/taro'
+import ShopKeeper from '@/components/spreads/ShopKeeper/shopKeeper'
+import Sparead from '@/components/spreads/Sparead/spreadMoney'
+import TabBar from '@/components/CustTabBar'
+import shopImg from '@/assets/icons/shopKeeper/订单收入.png'
+import onShopImg from '@/assets/icons/shopKeeper/订单收入按下.png'
+import spareadImg from '@/assets/icons/shopKeeper/推广收入.png'
+import onSpareadImg from '@/assets/icons/shopKeeper/推广收入按下.png'
+import './spreadIndex.less'
+
+export default (props) => {
+  const { params } = useRouter()
+  const { tab } = params || {}
+
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const handleTabChange = (e) => {
+    const { index } = e.detail
+    setCurrentTab(index)
+  }
+
+  useEffect(() => {
+    if (tab) {
+      setCurrentTab(tab - 0)
+    }
+  }, [tab])
+
+  return (
+    <view className='page-index'>
+      <view className='index-container'>
+        {currentTab === 0 && <ShopKeeper />}
+        {currentTab === 1 && <Sparead />}
+      </view>
+      <view className='index-tabbar'>
+        <TabBar extClass='custom-tabbar bottomTab' current={currentTab} onChange={handleTabChange}>
+          <view className={`${currentTab === 0 ? 'orderstab' : ''}`}>
+            <image className='incomes' src={currentTab === 0 ? onShopImg : shopImg} /><text>订单收入</text>
+          </view>
+          <view className={`${currentTab === 1 ? 'spreadtab' : ''}`}>
+            <image className='house' src={currentTab === 1 ? onSpareadImg : spareadImg} /><text>推广收入</text>
+          </view>
+        </TabBar>
+      </view>
+    </view>
+
+  )
+
+}

src/pages/spread/spreadIndex.less

@@ -0,0 +1,20 @@
+.bottomTab{
+  height: 98px;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .orderstab{
+    color: #666;
+  }
+  .spreadtab{
+    color: #666;
+  }
+  image{
+    width: 31px;
+    height: 31px;
+    position: relative;
+    top: 7px;
+    margin-right: 12px;
+  }
+}