新增房东端店主端一键登录房东推荐

.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

@@ -36,24 +36,25 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
+    "@miniprogram-component-plus/tabs": "^1.0.0",
     "@tarojs/components": "3.3.2",
+    "@tarojs/react": "3.3.2",
     "@tarojs/runtime": "3.3.2",
     "@tarojs/taro": "3.3.2",
-    "@tarojs/react": "3.3.2",
-    "react-dom": "^17.0.0",
-    "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,15 @@ 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/shopKeeper/shopKeeper',
+    'pages/spread/spreadMoney',
+    'pages/landlord/income/income',
+    'pages/landlord/houseManage/houseManage'
   ],
   window: {
     backgroundTextStyle: 'light',

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,309 @@
+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={{height: '100%',overflow:'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+          <scroll-view  scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" className='content'>
+            <view className='storeDetails'>
+          <image src={fd} className='storeImage' >
+            <view className='tpPage'>
+              <text>1</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:'13rpx',height:'13rpx',marginRight:'11rpx',marginBottom:'-2rpx'}}/>
+              <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>
+              <text className='comment'>点评：</text>
+              <text>口味：</text>
+              <text className='flavor'>4</text>
+              <text>环境：</text>
+              <text className='storehj'>3</text>
+              <text>服务</text>
+              <text className='service'>4.5</text>
+            </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 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='circleTop'></view>
+              <view className='circleBottom'></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='circleTop'></view>
+              <view className='circleBottom'></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='circleTop'></view>
+              <view className='circleBottom'></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,440 @@
+.storeDetails{
+  background-color: #fff;  
+  border-radius: 12px;
+  .storeImage{
+    position: relative;
+    border-radius: 22px;
+    width: 100%;
+      .tpPage{
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+      width: 60px;
+      background: #000000;
+      border-radius: 16px;  
+      font-size: 24px;
+       
+          color: #FFFFFF;
+      padding:0 7px;
+      text-align: center;
+      opacity: 0.4;  
+      text{
+        opacity: 0.64;
+      }
+    }
+  }
+  
+  .storeJs{
+    padding: 20px;
+    .introduce{
+      float: left;
+      .storeName{
+        font-size: 32px;
+         
+        font-weight: bold;
+        color: #020200;
+        padding-right: 60px;
+      }
+      .storeName+text{
+        width: 12px;
+        height: 17px;
+        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{
+      image{
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+      }
+      text{
+        font-size: 24px;
+         
+        font-weight: bold;
+        color: #020200;
+      }
+      .storezf{
+        height: 17px;
+        color: #020200;
+        margin:0 24px 0 0 ;
+      }
+      .comment{
+        color: #666;
+      }
+    }
+    .yysj{
+      .yysjImg{
+        width: 26px;
+        height: 26px;
+        position: relative;
+        top: 5px;
+      }
+      text{
+        font-size: 24px;
+         
+              color: #666666;
+        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;
+        line-height: 44px;
+        padding-left: 34px;
+        .zhuandao{
+          width: 14px;
+          height: 24px;
+          transform: rotate(180deg);
+          position: absolute;
+          bottom: 10px;
+        }        
+      }
+      
+    }
+  }
+}
+
+.content{
+  width: 100%;
+  height: calc(100vh - 120px);
+  .title{
+    margin: 60px 0 40px 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;
+    }
+  }
+
+  .foodCard{
+    background: #FFFFFF;
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 12px;
+    position: relative;
+    margin-bottom: 30px;
+    overflow: hidden;
+    .fCleft{
+      float: left;
+      width: 82%;
+      height: 100%;
+      .backMoney{
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin: 22px 40px 30px 0;        
+        display: block;
+        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: 24px;
+          height: 24px;
+          margin-right: 10px;
+        }
+        text{
+          font-size: 24px;
+           
+          font-weight: bold;
+          color: #020200;
+        }
+      }
+      .contentImg{
+        margin: 0 0 43px 20px;
+        position: relative;
+        float: left;
+        .img1{
+          width: 144px;
+          height: 144px;
+          border-radius: 24px;
+        }
+        .mstip{
+            width:99px;
+            height:37px;
+            position: absolute;
+            left: 0;          
+        }
+      }
+      .neirong{
+        float: right;
+        width: 65%;
+        .textword{
+          font-size: 24px;
+           
+                  color: #333333;
+          margin: 0 21px 0 0;
+        }
+        .jiage{
+          .rmb{
+            font-size: 20px;
+             
+            font-weight: bold;
+            color: #333333;
+          }
+          .p1{
+            font-size: 24px;
+             
+            font-weight: bold;
+            color: #333333;
+          }
+          .p2{
+            font-size: 18px;
+             
+                      text-decoration: line-through;
+            color: #666666;
+          }
+        }
+        .address{
+          line-height: 10px;
+          .dw{
+            width: 16px;
+            height: 20px;
+            position: relative;
+            top:3px;
+            margin-right: 10px;
+          }
+          .wz{
+            font-size: 20px;
+             
+                      color: #333333;
+          }
+          .star{
+            width: 21px;
+            height: 21px;
+            margin: 0 10px 0 30px;
+            position: relative;
+            top: 3px;
+          }
+          .collection{
+            font-size: 20px;
+             
+                      color: #333333;
+          }
+        }
+      }
+    }
+    .fCright{
+      float: right;
+      width: 18%;
+      height: 100%;
+      image{
+        width: 35px;
+        height:32px;
+        margin-top: 135%;
+        margin-left:calc(50% - 15px)
+      }
+      view{
+        font-size: 24px;
+         
+        font-weight: bold;
+        color: #202020;
+        text-align: center;
+      }
+    }
+    .circleTop{
+      width: 30px;
+      height: 16px;
+      border-radius: 15px 15px 0 0;
+      background-color: #F8F8F8;
+      position: absolute;
+      bottom: 0;
+      right: 16%;
+      
+    }
+    .circleBottom{
+      width: 30px;
+      height: 16px;
+      border-radius:0 0 15px 15px;
+      background-color: #F8F8F8;
+      position: absolute;
+      top: 0;
+      right: 16%;
+      
+    }
+    .columnLine{
+      height: 50%;
+      border-right: 5px dashed #595959;
+      opacity: 0.12;
+      position: absolute;
+      right: 18%;
+      bottom:15%;
+    }
+  }
+  .showMore{
+    width: 100%;
+    height: 156px;
+    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: -25px;
+    view{
+      padding-top: 77px;
+    }
+    .moreTip{
+      width: 38px;
+      height: 19px;
+    }
+  }
+  .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{
+        height: auto;
+        border-radius: 24px 24px 0px 0px;
+        position: relative;
+        
+
+        .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;
+        overflow: hidden;
+        .cCword{
+          font-size: 24px;
+           
+          font-weight: bold;
+          color: #404040;
+          line-height: 46px;
+        }
+        
+        .cCleft{
+          float: left;
+          position: relative;
+          padding:40px 0 30px 0;
+          .cCicon{
+            width: 17px;
+            height: 21px;
+            position: absolute;
+            left: 0;
+            top: 48px;
+          }
+          .distance{
+            padding-left: 30px;
+            font-size: 24px;
+             
+                      color: #C0C8D3;
+          }
+        }
+        .cCright{
+          position: relative;
+          float: right;
+          padding:40px 0 30px 0;
+          .money{
+            font-size: 20px;
+             
+                      color: #FF3434;          
+            position: absolute;
+            right: 80px;
+            top: 45px;
+          }
+          .price{
+            height: 21px;
+            font-size: 24px;
+             
+                      color: #FF3434;
+          }
+        }
+      }
+    }
+  }
+  .botton{
+    font-size: 28px;
+     
+      color: #C0C8D3;
+    line-height: 34px;
+    text-align: center;
+    padding:40px 0 50px 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,253 @@
+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={{ height: '100%', overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" className='content'>
+          <view className='storeDetails'>
+            <image src={mj} className='storeImage' >
+              <view className='tpPage'>
+                <text>1</text>/<text>64</text>
+              </view>
+            </image>
+            <view className='storeJs'>
+              <view style={{ overflow: 'hidden' }}>
+                <view className='introduce'>
+                  <text className='storeName'>玄武湖</text>
+                </view>
+                <view className='bz'>
+                  <image src={ax} style={{ width: '13rpx', height: '13rpx', marginRight: '11rpx', marginBottom: '-2rpx' }} />
+                  <text className='bzRight'>爆赞<text>9999+</text></text>
+                </view>
+              </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='circleTop'></view>
+              <view className='circleBottom'></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='circleTop'></view>
+              <view className='circleBottom'></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,440 @@
+.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;
+      width: 60px;
+      background: #000000;
+      border-radius: 16px;  
+      font-size: 24px;
+       
+          color: #FFFFFF;
+      padding:0 7px;
+      text-align: center;
+      opacity: 0.4;  
+      text{
+        opacity: 0.64;
+      }
+    }
+  }  
+  .storeJs{
+    padding: 20px;
+    .introduce{
+      float: left;
+      .storeName{
+        font-size: 32px;
+         
+        font-weight: bold;
+        color: #020200;
+        padding-right: 60px;
+      }
+    }
+    .bz{
+      float: right;
+      .bzRight{
+        font-size: 24px;
+         
+              color: #202020;
+        line-height: 34px;
+        height: 23px;
+      }
+    }
+    .wz{
+      font-size: 24px;
+       
+      font-weight: bold;
+      color: #404040;
+      line-height: 46px;
+    }
+    .dpPosition{
+      position: relative;
+      .dwTip{
+        width: 28px;
+        height: 28px;
+        position: absolute;
+        top: 4px;
+        left:0;
+      }
+      .distance{
+        padding-left: 30px;
+        font-size: 24px;
+         
+              color: #C0C8D3;
+      }
+    }
+  }
+}
+.jdjs{
+  height: 325px;
+  background: #FFFFFF;
+  border-radius: 12px 12px 0px 0px;
+  padding: 30px 25px 40px 20px;
+  font-size: 24px;
+   
+  font-weight: bold;
+  color: #202020;
+  line-height: 54px;
+  overflow: hidden;
+  .line{
+    width: calc(100% - 40px);
+    height: 1px;
+    background: #000000;
+    opacity: 0.1;
+    margin:57px 20px 42px 20px;
+  }
+  .sc{
+    font-size: 20px;
+     
+    font-weight: bold;
+    color: #333333;
+    float: right;
+    line-height: 0;
+    margin-right: 20px;
+    .scTip{
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+.content{
+  width: 100%;
+  height: calc(100vh - 120px);
+  .title{
+    margin: 60px 0 40px 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;
+    }
+  }
+
+  .foodCard{
+    background: #FFFFFF;
+    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 12px;
+    position: relative;
+    margin-bottom: 30px;
+    overflow: hidden;
+    .fCleft{
+      float: left;
+      width: 82%;
+      height: 100%;
+      .backMoney{
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+        margin: 22px 40px 30px 0;        
+        display: block;
+        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: 24px;
+          height: 24px;
+          margin-right: 10px;
+        }
+        text{
+          font-size: 24px;
+           
+          font-weight: bold;
+          color: #020200;
+        }
+      }
+      .contentImg{
+        margin: 0 0 43px 20px;
+        position: relative;
+        float: left;
+        .img1{
+          width: 144px;
+          height: 144px;
+          border-radius: 24px;
+        }
+        .mstip{
+            width:99px;
+            height:37px;
+            position: absolute;
+            left: 0;          
+        }
+      }
+      .neirong{
+        float: right;
+        width: 65%;
+        .textword{
+          font-size: 24px;
+           
+                  color: #333333;
+          margin: 0 21px 0 0;
+        }
+        .jiage{
+          .rmb{
+            font-size: 20px;
+             
+            font-weight: bold;
+            color: #333333;
+          }
+          .p1{
+            font-size: 24px;
+             
+            font-weight: bold;
+            color: #333333;
+          }
+          .p2{
+            font-size: 18px;
+             
+                      text-decoration: line-through;
+            color: #666666;
+          }
+        }
+        .address{
+          line-height: 10px;
+          .dw{
+            width: 16px;
+            height: 20px;
+            position: relative;
+            top:3px;
+            margin-right: 10px;
+          }
+          .wz{
+            font-size: 20px;
+             
+                      color: #333333;
+          }
+          .star{
+            width: 21px;
+            height: 21px;
+            margin: 0 10px 0 30px;
+            position: relative;
+            top: 3px;
+          }
+          .collection{
+            font-size: 20px;
+             
+                      color: #333333;
+          }
+        }
+      }
+    }
+    .fCright{
+      float: right;
+      width: 18%;
+      height: 100%;
+      image{
+        width: 35px;
+        height:32px;
+        margin-top: 135%;
+        margin-left:calc(50% - 15px)
+      }
+      view{
+        font-size: 24px;
+         
+        font-weight: bold;
+        color: #202020;
+        text-align: center;
+      }
+    }
+    .circleTop{
+      width: 30px;
+      height: 16px;
+      border-radius: 15px 15px 0 0;
+      background-color: #F8F8F8;
+      position: absolute;
+      bottom: 0;
+      right: 16%;
+      
+    }
+    .circleBottom{
+      width: 30px;
+      height: 16px;
+      border-radius:0 0 15px 15px;
+      background-color: #F8F8F8;
+      position: absolute;
+      top: 0;
+      right: 16%;
+      
+    }
+    .columnLine{
+      height: 50%;
+      border-right: 5px dashed #595959;
+      opacity: 0.12;
+      position: absolute;
+      right: 18%;
+      bottom:15%;
+    }
+  }
+  .showMore{
+    width: 100%;
+    height: 156px;
+    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: -25px;
+    view{
+      padding-top: 77px;
+    }
+    .moreTip{
+      width: 38px;
+      height: 19px;
+    }
+  }
+  .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{
+        height: auto;
+        border-radius: 24px 24px 0px 0px;
+        position: relative;
+        
+
+        .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;
+        overflow: hidden;
+        .cCword{
+          font-size: 24px;
+           
+          font-weight: bold;
+          color: #404040;
+          line-height: 46px;
+        }
+        
+        .cCleft{
+          float: left;
+          position: relative;
+          padding:40px 0 30px 0;
+          .cCicon{
+            width: 17px;
+            height: 21px;
+            position: absolute;
+            left: 0;
+            top: 48px;
+          }
+          .distance{
+            padding-left: 30px;
+            font-size: 24px;
+             
+                      color: #C0C8D3;
+          }
+        }
+        .cCright{
+          position: relative;
+          float: right;
+          padding:40px 0 30px 0;
+          .money{
+            font-size: 20px;
+             
+                      color: #FF3434;          
+            position: absolute;
+            right: 80px;
+            top: 45px;
+          }
+          .price{
+            height: 21px;
+            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{
+  width: 100%;
+  height: 96px;
+  background: #FFFFFF;
+  border-radius: 12px;
+  .tab{
+    line-height: 96px;
+    margin: 0 60px;
+    font-size: 28px;
+     
+    font-weight: bold;
+    color: #202020;
+    display: inline-block;
+    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

@@ -10,6 +10,7 @@ const Guide = lazy(() => import('./tabs/Guide'))
 const Strategy = lazy(() => import('./tabs/Strategy'))
 const Mine = lazy(() => import('./tabs/Mine'))
 
+
 export default (props) => {
   const [currentTab, setCurrentTab] = useState(0)
 
@@ -21,7 +22,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'>
         <Suspense fallback='loading...'>

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,201 @@
+.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;
+            top: 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/houseManage/houseManage.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '十公里周边指南',
+  navigationStyle: 'custom',
+}

src/pages/landlord/houseManage/houseManage.jsx

@@ -0,0 +1,61 @@
+import Taro from '@tarojs/taro'
+import CustomNav from '@/components/CustomNav'
+import income from '../../../assets/icons/landlord/我的收入.png'
+import house from '../../../assets/icons/landlord/房源管理按下.png'
+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 className='bottomTab'>
+          <view className='incometab' onClick={toIncome}>
+            <image className='incomes' src={income} /><text>我的收入</text>
+          </view>
+          <view className='housetab'>
+            <image className='house' src={house} /><text>房源管理</text>
+          </view>
+        </view>
+    
+      </view>
+  )
+}

src/pages/landlord/houseManage/houseManage.less

@@ -0,0 +1,118 @@
+.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;
+  }
+}
+.bottomTab{
+  width: 100%;
+  height: 98px;
+  background: #FFFFFF;
+  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .incometab{
+    display: inline-block;
+    margin-left: 17%;
+    color: #666;
+  }
+  .housetab{
+    margin-right:17%;
+    float: right;
+  }
+  image{
+    width: 31px;
+    height: 31px;
+    position: relative;
+    top: 7px;
+    margin-right: 12px;
+  }
+}

src/pages/landlord/income/income.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '十公里',
+  navigationStyle: 'custom',
+}

src/pages/landlord/income/income.jsx

@@ -0,0 +1,106 @@
+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 income from '../../../assets/icons/landlord/我的收入按下.png'
+import house from '../../../assets/icons/landlord/房源管理.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 className='bottomTab'>
+          <view className='incometab'>
+            <image className='incomes' src={income} /><text>我的收入</text>
+          </view>
+          <view className='housetab' onClick={toHouse}>
+            <image className='house' src={house} /><text>房源管理</text>
+          </view>
+        </view>
+    
+      </view>
+  )
+}

src/pages/landlord/income/income.less

@@ -0,0 +1,149 @@
+.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;
+}
+.bottomTab{
+  width: 100%;
+  height: 98px;
+  background: #FFFFFF;
+  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .incometab{
+    display: inline-block;
+    margin-left: 17%;
+  }
+  .housetab{
+    color: #666;
+    margin-right:17%;
+    float: right;
+  }
+  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,47 @@
+.logo{
+  width: 320px;
+  height: 320px;
+  margin: 21px auto;
+  margin-top: 100px;
+}
+.v1{
+  font-size: 28px;
+   
+  font-weight: 400;
+  color: #999999;
+  text-align: center;
+}
+.login{
+  width: calc(100% - 60px);
+  height: 92px;
+  background: #274190;
+  border-radius: 12px;
+  font-size: 30px;
+   
+  font-weight: bold;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 92px;
+  margin:80px auto;
+}
+.buttom{
+  height: 25px;
+  font-size: 24px;
+   
+  font-weight: 400;
+  color: #666666;  
+  position: relative;
+  top: 350px;
+  text-align: center;
+  bottom: 0;
+  radio{
+    transform:scale(0.5);
+    margin-right: -9px;
+    position: relative;
+    bottom: 1px;
+  }
+  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,66 @@
+.search{
+    padding: 10px 30px 0 30px;
+    position: relative;
+    .searchInput{    
+        width: 690px;
+        height: 68px;
+        background: #F8F8F8;
+        border-radius: 34px;
+        padding-left: 106px;
+        box-sizing: border-box;
+        font-size: 24px;
+    }
+    .searchicon{
+      width: 25px;
+      height: 25px;
+      position: absolute;
+      bottom: 22px;
+      left: 54px;
+    }
+    .lineSearch{      
+      position: absolute;
+      bottom: 19px;
+      left: 100px;
+      width: 1px;
+      height: 28px;
+      background: #000000;
+      opacity: 0.2;
+    }    
+}
+.content{
+  padding: 60px 30px;
+  .hotSearch{
+    font-size: 34px;
+     
+    font-weight: bold;
+    color: #202020;
+    display: block;
+    margin: 0 0 60px 0;
+  }
+  .hotSearchtip view{
+    border-radius: 30px;
+    font-size: 24px;
+     
+    font-weight: bold;
+    display: block;
+    margin:0 40px 40px 0;
+    padding:19px 25px;
+    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,170 @@
+  .search{
+    padding: 10px 30px 0 30px;
+    position: relative;
+    .searchInput{    
+        width: 690px;
+        height: 68px;
+        background: #F8F8F8;
+        border-radius: 34px;
+        padding-left: 106px;
+        box-sizing: border-box;
+        font-size: 24px;
+    }
+    .searchicon{
+      width: 25px;
+      height: 25px;
+      position: absolute;
+      bottom: 22px;
+      left: 54px;
+    }
+    .lineSearch{      
+      position: absolute;
+      bottom: 19px;
+      left: 100px;
+      width: 1px;
+      height: 28px;
+      background: #000000;
+      opacity: 0.2;
+    }    
+}
+.nav{
+  height: 91px;
+  margin-left: 36px;
+  .list{
+    float: left;
+    .bdattractions{
+      float: left;
+      padding:28px 20px 27px 49px ;
+      box-sizing: border-box;  
+      .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{
+        height: auto;
+        border-radius: 24px 24px 0px 0px;
+        position: relative;
+        
+
+        .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;
+        overflow: hidden;
+        .cCword{
+          font-size: 24px;
+           
+          font-weight: bold;
+          color: #404040;
+          line-height: 46px;
+        }
+        
+        .cCleft{
+          float: left;
+          position: relative;
+          padding:40px 0 30px 0;
+          .cCicon{
+            width: 17px;
+            height: 21px;
+            position: absolute;
+            left: 0;
+            top: 48px;
+          }
+          .distance{
+            padding-left: 30px;
+            font-size: 24px;
+             
+                      color: #C0C8D3;
+          }
+        }
+        .cCright{
+          position: relative;
+          float: right;
+          padding:40px 0 30px 0;
+          .money{
+            font-size: 20px;
+             
+                      color: #FF3434;          
+            position: absolute;
+            right: 80px;
+            top: 45px;
+          }
+          .price{
+            height: 21px;
+            font-size: 24px;
+             
+                      color: #FF3434;
+          }
+        }
+      }
+    }
+  } 
+  .botton{
+    font-size: 28px;
+     
+      color: #C0C8D3;
+    line-height: 34px;
+    text-align: center;
+    padding:40px 0 50px 0;
+    background-color: #F8F8F8;
+  } 
+}
+
+

src/pages/shopKeeper/shopKeeper.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '十公里',
+  navigationStyle: 'custom',
+}

src/pages/shopKeeper/shopKeeper.jsx

@@ -0,0 +1,127 @@
+import Taro from '@tarojs/taro'
+import CustomNav from '@/components/CustomNav'
+import './shopKeeper.less'
+import eyes from '../../assets/icons/shopKeeper/小眼睛.png'
+import ceyes from '../../assets/icons/shopKeeper/小眼睛-闭上.png'
+import orders from '../../assets/icons/shopKeeper/订单收入按下.png'
+import spread from '../../assets/icons/shopKeeper/推广收入.png'
+import iconsearch from '../../assets/icons/housemantj/search.png'
+import ms from '../../assets/icons/housemantj/ms3.jpg'
+
+
+export default (props) => {
+  const toSpread=()=>{
+    Taro.redirectTo({url:'/pages/spread/spreadMoney'})
+  }
+  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 className='bottomTab'>
+          <view className='orderstab'>
+            <image className='orders' src={orders} /><text>订单收入</text>
+          </view>
+          <view className='spreadtab' onClick={toSpread}>
+            <image className='spread' src={spread} /><text>推广收入</text>
+          </view>
+        </view>
+    
+      </view>
+  )
+}

src/pages/shopKeeper/shopKeeper.less

@@ -0,0 +1,276 @@
+.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;
+}
+
+.bottomTab{
+  width: 100%;
+  height: 98px;
+  background: #FFFFFF;
+  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .orderstab{
+    display: inline-block;
+    margin-left: 17%;
+  }
+  .spreadtab{
+    margin-right:17%;
+    float: right;
+    color: #666;
+  }
+  image{
+    width: 31px;
+    height: 31px;
+    position: relative;
+    top: 7px;
+    margin-right: 12px;
+  }
+}

src/pages/spread/spreadMoney.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '十公里',
+  navigationStyle: 'custom',
+}

src/pages/spread/spreadMoney.jsx

@@ -0,0 +1,72 @@
+import Taro from '@tarojs/taro'
+import CustomNav from '@/components/CustomNav'
+import './spreadMoney.less'
+import eyes from '../../assets/icons/shopKeeper/小眼睛.png'
+import ceyes from '../../assets/icons/shopKeeper/小眼睛-闭上.png'
+import orders from '../../assets/icons/shopKeeper/订单收入.png'
+import spread from '../../assets/icons/shopKeeper/推广收入按下.png'
+
+
+export default (props) => {
+  const toOrders=()=>{
+    Taro.redirectTo({url:'/pages/shopKeeper/shopKeeper'})
+  }
+  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 className='bottomTab'>
+          <view className='orderstab' onClick={toOrders}>
+            <image className='orders' src={orders} /><text>订单收入</text>
+          </view>
+          <view className='spreadtab'>
+            <image className='spread' src={spread} /><text>推广收入</text>
+          </view>
+        </view>
+    
+      </view>
+  )
+}

src/pages/spread/spreadMoney.less

@@ -0,0 +1,146 @@
+.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;
+}
+.bottomTab{
+  width: 100%;
+  height: 98px;
+  background: #FFFFFF;
+  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .orderstab{
+    display: inline-block;
+    margin-left: 17%;
+    color: #666;
+  }
+  .spreadtab{
+    margin-right:17%;
+    float: right;
+  }
+  image{
+    width: 31px;
+    height: 31px;
+    position: relative;
+    top: 7px;
+    margin-right: 12px;
+  }
+}