Commit 85b0cc3d authored by Jose's avatar Jose

调整底部栏价格布局:将原始价格移到最终价格右侧同一行

parent 5e7a12a9
...@@ -152,11 +152,11 @@ ...@@ -152,11 +152,11 @@
<!-- Price and pay button - fixed at bottom --> <!-- Price and pay button - fixed at bottom -->
<div class="bottom-bar"> <div class="bottom-bar">
<div class="price-info"> <div class="price-info">
<div class="discount-details" v-if="discountAmount > 0"> <div class="discount-saving" v-if="discountAmount > 0">Saving: ${{ discountAmount }}</div>
<div class="original-price">${{ originalPrice }}</div> <div class="price-row">
<div class="discount-saving">Saving: ${{ discountAmount }}</div> <div class="price">${{ totalPrice }}</div>
<div class="original-price" v-if="discountAmount > 0">${{ originalPrice }}</div>
</div> </div>
<div class="price">${{ totalPrice }}</div>
</div> </div>
<button class="pay-button" @click="openPopup">Order Now</button> <button class="pay-button" @click="openPopup">Order Now</button>
</div> </div>
...@@ -1070,13 +1070,13 @@ const selectCoupon = (couponId) => { ...@@ -1070,13 +1070,13 @@ const selectCoupon = (couponId) => {
max-height: 60pt; max-height: 60pt;
} }
.discount-details { .price-row {
display: flex; display: flex;
align-items: center; align-items: flex-end;
gap: 12pt; gap: 9pt;
margin-bottom: 2pt; height: 30pt;
height: 20pt; line-height: 30pt;
line-height: 20pt; margin-top: 2pt;
} }
.original-price { .original-price {
...@@ -1085,15 +1085,17 @@ const selectCoupon = (couponId) => { ...@@ -1085,15 +1085,17 @@ const selectCoupon = (couponId) => {
color: #999; color: #999;
text-decoration: line-through; text-decoration: line-through;
height: 100%; height: 100%;
line-height: 20pt; line-height: 30pt;
margin-bottom: 0;
} }
.discount-saving { .discount-saving {
font-size: 11pt; /* 14.67px = 11pt */ font-size: 11pt; /* 14.67px = 11pt */
font-weight: 500; font-weight: 500;
color: #42b883; color: #42b883;
height: 100%; height: 20pt;
line-height: 20pt; line-height: 20pt;
margin-bottom: 2pt;
} }
.price { .price {
...@@ -1102,7 +1104,7 @@ const selectCoupon = (couponId) => { ...@@ -1102,7 +1104,7 @@ const selectCoupon = (couponId) => {
color: #ff6b35; color: #ff6b35;
height: 30pt; height: 30pt;
line-height: 30pt; line-height: 30pt;
margin-top: 2pt; margin-top: 0;
} }
.pay-button { .pay-button {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment