改距离

src/pages/details/foodDetails/foodDetails.jsx

 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 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 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'
 
 
       <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 style={{overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
+          <view className='storeDetails'>
+            <image src={fd} className='storeImage' >
+              <view className='tpPage'>
+                <text>1</text><text>/</text><text>64</text>
+              </view>
+            </image>
+            <view className='storeJs'>
+              <view style={{ overflow: 'hidden' }}>
+                <view className='introduce'>
+                  <text className='storeName'>clip coffee</text>
+                  <text>￥</text><text className='price'><text>88</text>/人</text>
+                </view>
+                <view className='bz'>
+                  <image src={ax} style={{ width: '15px', height: '15px', marginRight: '11rpx', marginBottom: '-2px' }} />
+                  <text className='bzRight'>爆赞<text>9999+</text></text>
+                </view>
+              </view>
+              <view className='appraise'>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={huangxin}></image>
+                <image className='star' src={baixin}></image>
+                <text className='storezf'>4.5</text>
+                <view style={{float:'right',marginTop:'5px'}}>
+                  <text className='comment'>点评：</text>
+                  <text className='t1'>口味：</text>
+                  <text className='flavor'>4</text>
+                  <text className='t1'>环境：</text>
+                  <text className='storehj'>3</text>
+                  <text className='t1'>服务</text>
+                  <text className='service'>4.5</text>
+                </view>
+              </view>
+              <view className='yysj'>
+                <image src={yysj} className='yysjImg' />
+                <text>营业时间：周一至周日 06:00-20:00</text>
+              </view>
+              <view className='dpPosition'>
+                <image src={dw} className='dwTip' />
+                <view>
+                  <text>马道街夫子庙老门东小吃街三条营47号（地铁3号线武定门3号口步行8分钟）</text>
+                  <image src={zhuandao} className='zhuandao' />
                 </view>
+              </view>
             </view>
           </view>
-        </view>
-            <view style={{position:'relative'}}>
+          <view style={{ position: 'relative' }}>
             <view className='title'>
               <image src={titlezs}></image>
               <text>返现套餐</text>
                   <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>
+                  <text className='storezf'>4.5</text>
                 </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='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
                   </view>
-                  <view className='address'>
-                    <image className='dw' src={wz} />
-                    <text className='wz'>南京市/秦淮区</text>
-                    <image className='star' src={huangxin}></image>
-                    <text className='collection'>已收藏</text>
+                  <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>
               <view className='fCright'>
-                <image src={pay}/>
+                <image src={pay} />
                 <view>支付</view>
               </view>
               <view className='circleTop'></view>
                   <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>
+                  <text className='storezf'>4.5</text>
                 </view>
-                <view className='neirong'>
-                  <view className='textword'>
-                  探店拥有“蓝色波浪”的咖啡店连手提袋都很特别手绘的...
+                <view style={{ overflow: 'hidden' }}>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
                   </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 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 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}/>
+                <image src={pay} />
                 <view>支付</view>
               </view>
               <view className='circleTop'></view>
             <view className='showMore'>
               <view>查看更多</view>
               <image src={showMore} className='moreTip' />
-            </view>          
             </view>
+          </view>
 
-            <view style={{position:'relative'}}>
+          <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. 
+              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'/>
+            <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. 
+              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'>
                   <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>
+                  <text className='storezf'>4.5</text>
                 </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 style={{ overflow: 'hidden' }}>
+                  <view className='contentImg'>
+                    <image src={ms2} className='img1' ></image>
+                    <image src={msTip} className='mstip'></image>
                   </view>
-                  <view className='address'>
-                    <image className='dw' src={wz} />
-                    <text className='wz'>南京市/秦淮区</text>
-                    <image className='star' src={huangxin}></image>
-                    <text className='collection'>已收藏</text>
+                  <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>
               <view className='fCright'>
-                <image src={pay}/>
+                <image src={pay} />
                 <view>支付</view>
               </view>
               <view className='circleTop'></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>            
+              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='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='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 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 className='contentCard'>
+            </view>
+            <view className='contentCard'>
               <view className='cardTop'>
-                <image mode='widthFix' src={glImage} className='cCardimg'/>
-                <image  className='lefttips' src={glTip} />
+                <image mode='widthFix' src={glImage} className='cCardimg' />
+                <image className='lefttips' src={glTip} />
                 <image src={onlove} className='loveharde'></image>
               </view>
               <view className='bContent'>
                 </view>
               </view>
             </view>
-              </view>
-            <view className='botton'>已经到底了~</view>
-          </scroll-view>
+          </view>
+          <view className='botton'>已经到底了~</view>
+        </scroll-view>
       </view>
     </view>
   )

src/pages/details/foodDetails/foodDetails.less

     position: relative;
     border-radius: 22px;
     width: 100%;
-      .tpPage{
+    .tpPage{
       position: absolute;
       right: 20px;
       bottom: 20px;
-      width: 60px;
       background: #000000;
       border-radius: 16px;  
-      font-size: 24px;
-       
-          color: #FFFFFF;
+      font-size: 24px;       
+      color: #FFFFFF;
       padding:0 7px;
-      text-align: center;
       opacity: 0.4;  
+      line-height: 32px;
+      padding: 7px 8px 8px 7px;
       text{
         opacity: 0.64;
       }
     }
-  }
-  
+  }  
   .storeJs{
     padding: 20px;
     .introduce{
       float: left;
       .storeName{
-        font-size: 32px;
-         
+        font-size: 32px;         
         font-weight: bold;
         color: #020200;
         padding-right: 60px;
       }
       .storeName+text{
-        width: 12px;
-        height: 17px;
-        font-size: 24px;
-         
+        font-size: 24px;         
         font-weight: bold;
         color: #202020;
         padding-right: 10px;
       }
       .price{
-        font-size: 32px;
-         
+        font-size: 32px;         
         font-weight: bold;
         color: #202020;
       }
     .bz{
       float: right;
       .bzRight{
-        font-size: 24px;
-         
-              color: #202020;
+        font-size: 24px;         
+        color: #202020;
         line-height: 34px;
         height: 23px;
       }
     }
     .appraise{
+      line-height: 0;
+      margin-top: 28px;
+      margin-bottom: 37px;
       image{
         width: 24px;
         height: 24px;
         margin-right: 10px;
       }
       text{
-        font-size: 24px;
-         
+        font-size: 24px;         
         font-weight: bold;
         color: #020200;
       }
+      .t1{
+        margin-left: 10px;
+      }
       .storezf{
-        height: 17px;
         color: #020200;
-        margin:0 24px 0 0 ;
+        margin-left: 7px ;
       }
       .comment{
         color: #666;
       }
     }
     .yysj{
+      line-height: 0;
       .yysjImg{
         width: 26px;
         height: 26px;
       }
       text{
         font-size: 24px;
-         
-              color: #666666;
+        color: #666;
         padding-left: 10px;
       }
     }
         left:0;
       }
       view{
-        font-size: 24px;
-         
-              color: #666666;
-        line-height: 44px;
+        font-size: 24px;         
+        color: #666666;
         padding-left: 34px;
+        height: 97px;
         .zhuandao{
           width: 14px;
           height: 24px;
           transform: rotate(180deg);
           position: absolute;
-          bottom: 10px;
+          bottom: 25px;
         }        
       }
       
     }
   }
 }
-
-.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;
-       
+.title{
+  margin: 59px 0 41px 0;
+  image{
+    width: 30px;
+    height: 30px;
+    position: relative;
+    top: 5px;
+  }
+  text{
+    font-size: 34px;       
+    font-weight: bold;
+    color: #202020;
+    margin-left: 10px;
+  }
+  .gltitle{
+    width: 32px;
+    height: 32px;
+    position: relative;
+    top: 5px;
+  }
+}
+.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%;
+    .backMoney{
+      font-size: 24px;
       font-weight: bold;
-      color: #202020;
-      margin-left: 10px;
+      color: #FFF;
+      margin: 22px 40px 20px 0;        
+      padding: 12px 17px 9px 6px;
+      background:url('../../../assets/icons/housemantj/fximg.png') no-repeat;    
+      display: inline-block;
+      background-size: 100% 100%;
+    }
+    .appraise{
+      display: inline-block;
+      image{
+        width: 21px;
+        height: 21px;
+        margin-right: 10px;
+      }
+      text{
+        font-size: 24px;           
+        font-weight: bold;
+        color: #020200;
+      }
     }
-    .gltitle{
-      width: 32px;
-      height: 32px;
+    .contentImg{
+      margin: 0 20px 43px 20px;
       position: relative;
-      top: 5px;
+      display: inline-block;
+      .img1{
+        width: 144px;
+        height: 144px;
+        border-radius: 24px;
+      }
+      .mstip{
+          width:99px;
+          height:37px;
+          position: absolute;
+          left: 0;          
+      }
     }
-  }
-
-  .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%;
+    .neirong{
+      display: inline-block;
+      width: 65%;
+      .textword{
+        font-size: 24px;           
+        color: #333;
+        margin: 0 21px 0 0;
+        height: 84px;
       }
-      .appraise{
-        display: inline-block;
-        image{
-          width: 24px;
-          height: 24px;
-          margin-right: 10px;
+      .jiage{
+        line-height: 20px;
+        font-weight: bold;
+        color: #333;
+        .rmb{
+          font-size: 20px;             
+          margin: 0 8px 0 7px;
         }
-        text{
-          font-size: 24px;
-           
-          font-weight: bold;
-          color: #020200;
+        .p1{
+          font-size: 24px;     
         }
-      }
-      .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;          
+        .p2{
+          font-size: 18px;             
+          text-decoration: line-through;
+          color: #666;
         }
       }
-      .neirong{
-        float: right;
-        width: 65%;
-        .textword{
-          font-size: 24px;
-           
-                  color: #333333;
-          margin: 0 21px 0 0;
+      .address{
+        line-height: 0;
+        margin-top: 18px;
+        .dw{
+          width: 16px;
+          height: 20px;
+          position: relative;
+          top:3px;
+          margin-right: 10px;
         }
-        .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;
-          }
+        .wz{
+          font-size: 20px;             
+          color: #333;
         }
-        .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;
-          }
+        .star{
+          width: 21px;
+          height: 21px;
+          margin: 0 10px 0 40px;
+          position: relative;
+          top: 3px;
+        }
+        .collection{
+          font-size: 20px;             
+          color: #333333;
         }
       }
     }
-    .fCright{
-      float: right;
-      width: 18%;
-      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%;
-      
+  }
+  .fCright{
+    float: right;
+    width: 18%;
+    line-height: 0;
+    image{
+      width: 35px;
+      height:32px;
+      margin-top: 135%;
+      margin-left:calc(50% - 15px)
     }
-    .columnLine{
-      height: 50%;
-      border-right: 5px dashed #595959;
-      opacity: 0.12;
-      position: absolute;
-      right: 18%;
-      bottom:15%;
+    view{
+      font-size: 24px;
+      line-height: 23px;
+      font-weight: bold;
+      color: #202020;
+      margin-top: 19px;
+      text-align: center;
     }
   }
-  .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;
+  .circleTop{
+    width: 30px;
+    height: 16px;
+    border-radius: 15px 15px 0 0;
+    background-color: #F8F8F8;
     position: absolute;
-    bottom: -25px;
-    view{
-      padding-top: 77px;
-    }
-    .moreTip{
-      width: 38px;
-      height: 19px;
-    }
+    bottom: 0;
+    right: 16%;
+    
   }
-  .storezn{
-    font-size: 28px;
-     
-      color: #202020;
-    line-height: 54px;
-    margin-bottom: 40px;
+  .circleBottom{
+    width: 30px;
+    height: 16px;
+    border-radius:0 0 15px 15px;
+    background-color: #F8F8F8;
+    position: absolute;
+    top: 0;
+    right: 16%;
+    
   }
-  .storezn+image{
-    width: 100%;
+  .columnLine{
+    height: 50%;
+    border-right: 2px dashed #595959;
+    opacity: 0.12;
+    position: absolute;
+    right: 18%;
+    bottom:15%;
+  }
+}
+.showMore{
+  width: 100%;
+  background: linear-gradient(0deg, rgba(248, 248, 248, 0.58) 42%, rgba(248, 248, 248, 0) 100%);
+  font-size: 28px;
+  font-weight: bold;
+  color: #202020;
+  text-align: center;
+  position: absolute;
+  bottom: -40px;
+  padding-top: 77px;
+  padding-bottom: 20px;
+  .moreTip{
+    width: 38px;
+    height: 19px;
+    margin-top: 14px;
   }
+}
+.storezn{
+  font-size: 28px;    
+  color: #202020;
+  line-height: 54px;
+  margin-bottom: 44px;
+}
+.storezn+image{
+  width: 100%;
+  margin-bottom: 40px;
+}
+.waterfall{
+  column-count: 2;      //分两列
+  column-gap: 30px;    //列间距
+  background-color: #F8F8F8;
+  padding:30px 30px 0 30px;
   
-  .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;
+  .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;
+    .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;
-        
-
-        .cCardimg{
-          width: 100%;
-          border-radius: 24px 24px 0px 0px;
-        }
-        .lefttips{
-          width:99px;
-          height:37px;
+        padding:40px 0 30px 0;
+        .cCicon{
+          width: 17px;
+          height: 21px;
           position: absolute;
           left: 0;
+          top: 48px;
         }
-        .loveharde{
-          width: 22px;
-          height: 20px;
-          position: absolute;
-          right: 20px;
-          top: 10px;
-        }
-      }
-      .bContent{
-        padding:20px;
-        overflow: hidden;
-        .cCword{
+        .distance{
+          padding-left: 24px;
           font-size: 24px;
-           
-          font-weight: bold;
-          color: #404040;
-          line-height: 46px;
+          color: #C0C8D3;
         }
-        
-        .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: 78px;
+          bottom: 32px;
         }
-        .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;
-          }
+        .price{
+          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;
-  }
+}
+.botton{
+  font-size: 28px;   
+  color: #C0C8D3;
+  line-height: 34px;
+  text-align: center;
+  padding:40px 0 68px 0;
+  background-color: #F8F8F8;
 }

src/pages/details/mjDetails/sceneryDetails.jsx

       <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 style={{overflow: 'auto', padding: '0 30rpx', background: '#F8F8F8' }}>
+        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
           <view className='storeDetails'>
             <image src={mj} className='storeImage' >
               <view className='tpPage'>
-                <text>1</text>/<text>64</text>
+                <text>1</text><text>/</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' }} />
+              <view className='introduce'>
+                <text className='storeName'>玄武湖</text>
+              </view>
+              <view className='bz'>
+                  <image src={ax} style={{ width: '15px', height: '15px', marginRight: '10px', marginBottom: '-2px' }} />
                   <text className='bzRight'>爆赞<text>9999+</text></text>
                 </view>
-              </view>
               <view className='wz'>凤游寺52号悦动新门西15栋111号</view>
               <view className='dpPosition'>
                 <image src={dw} className='dwTip' />

src/pages/details/mjDetails/sceneryDetails.less

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

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

       letter-spacing: 0.2em;
     }
 }
-
 .tip{
   padding:23px 0 22px 31px;
   height: 70px;
     }
   }
 }
-
-
-
 .content{
   width: 100%;
   height: calc(100vh - 120px);
     padding:40px 0 50px 0;
     background-color: #F8F8F8;
   } 
-}
-
+}

src/pages/login/login.less

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

src/pages/search/search.less

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

src/pages/searchResult/searchResult.less

-  .search{
+.search{
     padding: 10px 30px 0 30px;
     position: relative;
     .searchInput{    
-        width: 690px;
         height: 68px;
         background: #F8F8F8;
         border-radius: 34px;
-        padding-left: 106px;
+        padding-left: 86px;
         box-sizing: border-box;
         font-size: 24px;
     }
       width: 25px;
       height: 25px;
       position: absolute;
-      bottom: 22px;
-      left: 54px;
+      bottom: 21px;
+      left: 50px;
     }
     .lineSearch{      
       position: absolute;
       bottom: 19px;
-      left: 100px;
+      left: 95px;
       width: 1px;
       height: 28px;
-      background: #000000;
+      background: #000;
       opacity: 0.2;
     }    
 }
 .nav{
-  height: 91px;
   margin-left: 36px;
   .list{
     float: left;
     .bdattractions{
       float: left;
-      padding:28px 20px 27px 49px ;
+      padding:28px 49px 27px 20px ;
       box-sizing: border-box;  
       .acname{
-        font-size: 28px;
-         
+        font-size: 28px;         
         font-weight: bold;
         color: #C0C8D3;      
       }
         width: 30px;
         height: 6px;
         position: relative;
-        bottom:-27px;
-        left: 0;
+        top:27px;
         margin: 0 auto;
       }
     }