预售页面优化

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,10 +64,13 @@
         :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>
+        <text class="presale-price">
+          预售价：￥
+          <text class="highlight-price">{{ item.oriPrice }}</text>
+          /盒
+        </text>
         <view>
           <img
             class="buy-img"
@@ -77,12 +80,12 @@
               width: 284rpx;
               height: 128rpx;
               float: right;
-            margin-top: -80rpx;
-            margin-right: 16rpx;
+              margin-top: -114rpx;
             "
           />
         </view>
       </view>
+    </view>
     <wd-status-tip image="content" tip="暂无数据" v-if="buyList.length === 0" />
   </view>
   <view class="waterfall">
@@ -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>