预售顶部修改

src/pages/assistingAgriculture/index/presale.vue

@@ -17,31 +17,7 @@
       />
     </view>
   </Search>
-  <view class="container">
-    <view class="top">
-      <!--      <Search-->
-      <!--        style="position: fixed; top: 0; width: 100%"-->
-      <!--        :backgroundBox="backgroundBox"-->
-      <!--        :backIcon="backIcon"-->
-      <!--      >-->
-      <!--        <view class="searchBox" :style="{ border }">-->
-      <!--          <image-->
-      <!--            class="magnifyingGlass"-->
-      <!--            src="../../../static/index/magnifyingGlass.png"-->
-      <!--            mode="aspectFit|aspectFill|widthFix"-->
-      <!--          />-->
-      <!--          <input-->
-      <!--            type="text"-->
-      <!--            class="text"-->
-      <!--            @confirm="toSearch"-->
-      <!--            placeholder="输入商品名称"-->
-      <!--            @input="updateModelValue"-->
-      <!--            @keyup.enter="toSearch"-->
-      <!--            @focus="toSearch"-->
-      <!--          />-->
-      <!--        </view>-->
-      <!--      </Search>-->
-    </view>
+  <view class="bck-img">
     <view class="nav">
       <wd-swiper
         :list="swiperList"
@@ -54,109 +30,99 @@
         imageMode="aspectFill"
       ></wd-swiper>
     </view>
-    <view class="sort">
-      <view style="display: flex; flex-direction: row">
-        <view
-          class="borderClass"
-          @tap="chooseTab(index, item.categoryId)"
-          v-for="(item, index) in sortList"
-          :key="index"
-        >
-          <img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" />
-          <view class="sort-text">{{ item.categoryName }}</view>
-        </view>
+  </view>
+  <view class="sort">
+    <view style="display: flex; flex-direction: row">
+      <view
+        class="borderClass"
+        @tap="chooseTab(index, item.categoryId)"
+        v-for="(item, index) in sortList"
+        :key="index"
+      >
+        <img :src="item.imgUrl" style="width: 48rpx; height: 48rpx" />
+        <view class="sort-text">{{ item.categoryName }}</view>
       </view>
     </view>
+  </view>
+  <view>
     <view>
+      <scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
+        <text
+          @tap="chooseBTab(index, item.categoryId)"
+          v-for="(item, index) in tabsData"
+          :key="index"
+          class="text"
+          :class="light === index ? 'light' : ''"
+        >
+          {{ item.categoryName }}
+        </text>
+      </scroll-view>
+    </view>
+    <view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)">
+      <img
+        class="buy-list"
+        :src="item.img"
+        style="width: 670rpx; height: 670rpx; border-radius: 16rpx"
+      />
       <view>
-        <scroll-view class="tabs" show-scrollbar="false" scroll-x :scroll-with-animation="true">
-          <text
-            @tap="chooseBTab(index, item.categoryId)"
-            v-for="(item, index) in tabsData"
-            :key="index"
-            class="text"
-            :class="light === index ? 'light' : ''"
-          >
-            {{ item.categoryName }}
-          </text>
-        </scroll-view>
+        <text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text>
+        <text class="presale-price">预售价：￥{{ item.price }}/盒</text>
       </view>
-      <view class="tab-list" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)">
+      <view>
         <img
-          class="buy-list"
-          :src="item.img"
-          style="width: 670rpx; height: 670rpx; border-radius: 16rpx"
+          class="buy-img"
+          src="/static/assistingAgriculture/presale/img6.png"
+          style="
+            position: sticky;
+            width: 284rpx;
+            height: 128rpx;
+            float: right;
+            margin-top: -80rpx;
+            margin-right: 16rpx;
+          "
         />
-        <view>
-          <text class="retail-price">零售价：￥{{ item.oriPrice }}/盒</text>
-          <text class="presale-price">预售价：￥{{ item.price }}/盒</text>
-        </view>
-        <view>
-          <img
-            class="buy-img"
-            src="/static/assistingAgriculture/presale/img6.png"
+      </view>
+    </view>
+  </view>
+  <view class="waterfall">
+    <view class="wt-left wt-list">
+      <view class="wt-item" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)">
+        <view class="item-img">
+          <image :src="item.img" mode="widthFix" style="border-radius: 16rpx"></image>
+          <image
+            class="presale-img"
+            src="/static/assistingAgriculture/presale/presale.png"
             style="
-              position: sticky;
-              width: 284rpx;
-              height: 128rpx;
-              float: right;
-              margin-top: -80rpx;
-              margin-right: 16rpx;
+              width: 132rpx;
+              height: 64rpx;
+              z-index: 10;
+              margin-left: 18rpx;
+              top: -70rpx;
+              left: -19rpx;
             "
           />
+          <image
+            class="preview-img"
+            src="/static/assistingAgriculture/presale/preview.png"
+            style="width: 264rpx; height: 40rpx; z-index: 9; top: -70rpx"
+          />
+          <text class="pre-text">预计9月15日发货</text>
         </view>
-      </view>
-    </view>
-    <view class="waterfall">
-      <view class="wt-left wt-list">
-        <view class="wt-item" v-for="(item, index) in buyList" :key="index" @tap="toDetail(item)">
-          <view class="item-img">
-            <image :src="item.img" mode="widthFix" style="border-radius: 16rpx"></image>
-            <image
-              class="presale-img"
-              src="/static/assistingAgriculture/presale/presale.png"
-              style="
-                width: 132rpx;
-                height: 64rpx;
-                z-index: 10;
-                margin-left: 18rpx;
-                top: -70rpx;
-                left: -19rpx;
-              "
-            />
-            <image
-              class="preview-img"
-              src="/static/assistingAgriculture/presale/preview.png"
-              style="width: 264rpx; height: 40rpx; z-index: 9; top: -70rpx"
-            />
-            <text class="pre-text">预计9月15日发货</text>
+        <!-- 介绍部分 -->
+        <view class="introduce-section">
+          <text class="title">{{ item.prodName }}</text>
+          <view class="tags-box">
+            <text class="good-detail">{{ item.detail }}</text>
+            <text class="introduction">{{ item.introduction }}</text>
           </view>
-          <!-- 介绍部分 -->
-          <view class="introduce-section">
-            <text class="title">{{ item.prodName }}</text>
-            <view class="tags-box">
-              <text class="good-detail">{{ item.detail }}</text>
-              <text class="introduction">{{ item.introduction }}</text>
-            </view>
-            <view class="price-info">
-              <text class="good-price">￥{{ item.price }}</text>
-              <img class="add" src="/static/assistingAgriculture/presale/add.png" />
-            </view>
+          <view class="price-info">
+            <text class="good-price">￥{{ item.price }}</text>
+            <img class="add" src="/static/assistingAgriculture/presale/add.png" />
           </view>
         </view>
       </view>
     </view>
   </view>
-  <!-- 购物车悬浮按钮 -->
-  <!--<view class="cart-floating" @tap="toCart">
-    <wd-badge :modelValue="subscript">
-      <img
-        class="shop-car"
-        src="/static/assistingAgriculture/presale/cart.png"
-        style="width: 40rpx; height: 40rpx"
-      />
-    </wd-badge>
-  </view>-->
   <fab position="2" :cartCount="subscript" />
 </template>
 
@@ -190,7 +156,7 @@ const params = {
 };
 const subscript = ref(0);
 const tabsList = ref([]);
-const backgroundBox = ref('');
+const backgroundBox = ref('#71C456');
 const border = ref('');
 onMounted(async () => {
   getPresale();
@@ -299,7 +265,7 @@ onPageScroll((e) => {
     backgroundBox.value = '#fff';
     border.value = '1rpx solid gray';
   } else {
-    backgroundBox.value = '';
+    backgroundBox.value = '#71C456';
     border.value = '';
   }
 });
@@ -309,20 +275,12 @@ onPageScroll((e) => {
 page {
   background: #f3f3f3;
 }
-.container {
-  margin-top: -120rpx;
-  .top {
-    width: 100%;
-    height: 440rpx;
-    background: linear-gradient(180deg, #71c456 0%, rgba(243, 243, 243, 0) 100%);
-    border-radius: 0rpx 0rpx 0rpx 0rpx;
-    overflow: hidden;
-  }
+.bck-img {
+  background: linear-gradient(180deg, #71c456 0%, rgba(129, 159, 81, 0) 100%);
 }
 .nav {
   width: 710rpx;
   margin-left: 18rpx;
-  margin-top: -300rpx;
 }
 .nav-img {
   width: 710rpx;