预售页面优化

src/pages/assistingAgriculture/index/index.vue

@@ -335,7 +335,8 @@ page {
 .env {
   width: 750rpx;
   height: 48rpx;
-  background: linear-gradient(94deg, #82ce8b 0%, rgba(255, 255, 255, 0) 97%);
+  background: rgba(255, 255, 255, 0.005);
+  backdrop-filter: blur(20rpx);
   position: absolute;
   margin-top: -60rpx;
   z-index: 999;

src/pages/assistingAgriculture/index/presale.vue

@@ -64,23 +64,26 @@
         :src="item.img"
         style="width: 670rpx; height: 670rpx; border-radius: 16rpx"
       />
-      <view>
+      <view class="bac">
         <text class="retail-price">零售价：￥{{ item.price }}/盒</text>
-        <text class="presale-price">预售价：￥{{ item.oriPrice }}/盒</text>
-      </view>
-      <view>
-        <img
-          class="buy-img"
-          src="/static/assistingAgriculture/presale/img6.png"
-          style="
-            position: sticky;
-            width: 284rpx;
-            height: 128rpx;
-            float: right;
-            margin-top: -80rpx;
-            margin-right: 16rpx;
-          "
-        />
+        <text class="presale-price">
+          预售价：￥
+          <text class="highlight-price">{{ item.oriPrice }}</text>
+          /盒
+        </text>
+        <view>
+          <img
+            class="buy-img"
+            src="/static/assistingAgriculture/presale/img6.png"
+            style="
+              position: sticky;
+              width: 284rpx;
+              height: 128rpx;
+              float: right;
+              margin-top: -114rpx;
+            "
+          />
+        </view>
       </view>
     </view>
     <wd-status-tip image="content" tip="暂无数据" v-if="buyList.length === 0" />
@@ -393,6 +396,7 @@ page {
   font-variation-settings: 'opsz' auto;
   font-feature-settings: 'kern' on;
   color: #b3b3b3;
+  padding-top: 60rpx;
 }
 .presale-price {
   display: block;
@@ -531,4 +535,17 @@ page {
     color: #ffffff;
   }
 }
+.bac {
+  width: 670rpx;
+  height: 160rpx;
+  border-radius: 16rpx;
+  background: rgba(0, 0, 0, 0.4);
+  position: relative;
+  margin-left: 20rpx;
+  top: -44rpx;
+}
+.highlight-price {
+  color: red;
+  font-size: 44rpx;
+}
 </style>