Feat(天天秒杀):按照最新设计图调整

pkg_product/views/seckill.vue

@@ -40,7 +40,6 @@
         <view class="header flex jc-between ai-center">
           <image class="img-rush" :src="webUrl+'/20221222155118237514.png'" mode="scaleToFill"/>
           <view class="end-time flex ai-center">
-            <text class="text-tip">倒计时:</text>
             <count-down-unit
               :isDay="true"
               isSecond
@@ -105,10 +104,9 @@
           <view class="content flex flex-col jc-between">
             <view class="top-section">
               <view class="more-t">{{ item.title }}</view>
-              <view class="company">{{ item.unitName }}</view>
             </view>
-            <view>
-              <view class="line-price flex jc-between ai-center">
+            <view class="line-price">
+              <!-- <view class="line-price flex jc-between ai-center">
                 <view class="flex ai-end">
                   <view>秒杀价</view>
                   <view class="price">￥{{ item.price }}</view>
@@ -127,6 +125,24 @@
               >
                 <view class="sale flex ai-center">已抢{{ item.sales }}件</view>
                 <view class="btn">立即抢购</view>
+              </view> -->
+              <view class="number flex">
+                <view class="bg">
+                  已抢{{ item.sales }}
+                </view>
+                <text class="txt">件</text>
+              </view>
+              <view class="price-wrap flex">
+                <view class="price-txt">
+                  秒杀价￥
+                  <text class="txt">{{ item.price }}</text>
+                </view>
+                <view class="btn">
+                  <image
+                    :src="webUrl + '/page/seckill/btn.png'"
+                    class="btn-img"
+                  />
+                </view>
               </view>
             </view>
           </view>
@@ -381,24 +397,21 @@ export default {
           /deep/ .time {
             display: flex;
             align-items: center;
+            padding: 4rpx 10rpx 4rpx 15rpx;
+            border-radius: 4rpx;
             font-size: 26rpx;
+            background-color: #E02619;
+            color: #fff;
+            box-shadow: 1px 1px 1px rgba(0,0,0,0.16);
 
-            .timeTxt {
-              color: #E62113;
+            .styleAll {
+              margin: 0 12rpx;
             }
 
             .unit {
               display: inline-flex;
               justify-content: center;
               align-items: center;
-              width: 26rpx;
-              height: 32rpx;
-              margin: 0 2rpx;
-              background: #E02619;
-              color: #fff;
-              box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.16);
-              border-radius: 4rpx;
-              font-weight: bold;
             }
           }
         }
@@ -598,4 +611,48 @@ export default {
     }
   }
 }
+.line-price {
+  .number {
+    width: 82px;
+    height: 24px;
+    border-radius: 12px;
+    line-height: 24px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    background: rgba(250,181,176,0.39);
+    box-shadow: 1px 1px 1px rgba(0,0,0,0.16);
+    .bg {
+      z-index: 1;
+      height: 100%;
+      padding: 0 4px 0 12px;
+      margin: 0 2px 0 0;
+      border-radius: 12px;
+      background-color: #E92727;
+    }
+  }
+  .price-wrap {
+    align-items: flex-end;
+    .price-txt {
+      flex: 1;
+      height: 24px;
+      padding: 4px 8px;
+      color: #fff;
+      font-size: 12px;
+      background: linear-gradient(270deg, #FFFFFE 0%, #EB5015 100%);
+      border-radius: 4px;
+      .txt {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+    .btn {
+      margin: 0 0 0 -16px;
+      .btn-img {
+        width: 42px;
+        height: 43px;
+      }
+    }
+  }
+}
 </style>