1

src/pages/index/index.vue

@@ -3,11 +3,7 @@
   <Search :backgroundBox="backgroundBox" background="rgba(255, 255, 255, 0.8)" :show="false">
     <image class="food" src="../../static/index/food.png" mode="widthFix" />
     <view class="searchBox">
-      <image
-        class="magnifyingGlass"
-        src="../../static/index/magnifyingGlass.png"
-        mode="aspectFit|aspectFill|widthFix"
-      />
+      <image class="magnifyingGlass" src="../../static/index/magnifyingGlass.png" mode="widthFix" />
       <input type="text" class="text" @confirm="toSearch" confirm-type="搜索" />
     </view>
   </Search>
@@ -68,8 +64,8 @@
       @click="handleClick"
       @change="onChange"
       customClass="guiyang"
-      height="120"
-      imageMode="aspectFill"
+      height="136rpx"
+      imageMode="aspectFit"
     ></wd-swiper>
     <!-- 附近人气美食 -->
     <view class="nearby">
@@ -104,7 +100,7 @@
       </view>
     </view>
     <!-- 推荐 -->
-    <view class="recommend">
+    <view class="recommend" :style="{ top }">
       <!-- <view class="tabs"> -->
       <scroll-view class="tabs" scroll-x="true">
         <text
@@ -222,10 +218,12 @@ let listParams = {
   lat: 26.567192352601154,
 };
 const coupon = ref([]);
+const top = ref(null);
 let total;
 // 轮播图数据
 let lunboData;
 onLoad(() => {
+  getTop();
   orderStatus();
   getClassification();
   rotatingBroadcast();
@@ -234,6 +232,16 @@ onLoad(() => {
   getMerchantList();
   getCouponMainList();
 });
+
+// 获取位置板块贴合高度
+const getTop = () => {
+  xma.xh.getMenuButtonBoundingClientRect({
+    success(res) {
+      top.value = (res.top + res.bottom) / 2 + 25 + 'px';
+    },
+  });
+};
+
 onPullDownRefresh(() => {
   reset();
   getClassification();
@@ -562,8 +570,8 @@ page {
   margin-left: 20rpx;
   text-align: start;
   .magnifyingGlass {
-    width: 26rpx;
-    height: 26rpx;
+    width: 30rpx;
+    flex-shrink: 0;
   }
   .text {
     margin-left: 10rpx;
@@ -817,8 +825,8 @@ page {
     box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
     margin: 0 auto;
     margin-top: 10rpx;
-    position: relative;
-    // top: 0;
+    position: sticky;
+    // top: 100px;
     z-index: 99;
     uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
       /* 隐藏滚动条，但依旧具备可以滚动的功能 */