Răsfoiți Sursa

feat(frontend): 商品详情底部按钮布局调整 - 海报靠左、加购物车/立即购买靠右

Sisyphus 1 lună în urmă
părinte
comite
571ea65b1d

+ 12 - 5
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

@@ -103,10 +103,12 @@
 
     <!-- 底部操作栏:必须与 scroll-view 平级,否则 iOS 上 position: fixed 在 scroll-view 内不生效(按钮不显示) -->
     <view class="bottom-bar" v-if="!loading && product.id">
-      <view class="action-btns">
+      <view class="action-left">
         <view class="action-extra">
           <button class="btn-share" @click="onShareProduct">🖼</button>
         </view>
+      </view>
+      <view class="action-right">
         <view class="action-extra">
           <button class="btn-cart" :class="buyButtonDisabled ? 'btn-disabled' : ''" :disabled="buyButtonDisabled" @click="onAddToCart">{{ buyButtonDisabled ? '请选规格' : '加入购物车' }}</button>
         </view>
@@ -855,6 +857,14 @@ export default {
   justify-content: space-between;
   z-index: 100;
 }
+.action-left {
+  display: flex;
+  align-items: center;
+}
+.action-right {
+  display: flex;
+  align-items: center;
+}
 .price-info {
   display: flex;
   align-items: baseline;
@@ -869,10 +879,7 @@ export default {
   color: #999;
   margin-left: 10rpx;
 }
-.action-btns {
-  display: flex;
-  align-items: center;
-}
+
 .btn-buy {
   background: linear-gradient(135deg, #F97316, #FB923C);
   color: #fff;