优化价格显示

This commit is contained in:
dzl
2025-09-02 11:41:20 +08:00
parent b8974a7c6a
commit 127d9ed592
9 changed files with 815 additions and 277 deletions

View File

@@ -56,13 +56,15 @@
</div>
<div class="product-price">
<div class="current-price">
<el-icon><Coin /></el-icon>
<span class="price-number">{{ product.rongdou_price }}</span>
<span class="price-unit">融豆</span>
</div>
<div v-if="product.originalPoints" class="original-price">
原价{{ product.originalPoints }}积分
<div class="price-container">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
<div v-if="product.discount" class="discount-info">
<el-tag type="danger" size="small">{{ product.discount }}折优惠</el-tag>
@@ -107,12 +109,6 @@
</el-tag>||{{product.brand}}||{{product.origin}}
</span>
</div>
<!-- 第二组小货车图标 + 文本 -->
<div class="detail-item-group"> <!-- 每组独立容器 -->
<img src="/imgs/productdetail/小货车.png" alt="小货车" class="detail-icon">
<span class="detail-text">预计两小时内发货后天送达</span>
</div>
</div>
<!-- 商品详情 -->
@@ -530,34 +526,50 @@ watch(
margin-bottom: 20px;
}
.current-price {
.price-container {
display: flex;
align-items: center;
gap: 4px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 8px;
}
.current-price .el-icon {
color: #ff6b35;
font-size: 20px;
.main-price {
display: flex;
align-items: center;
gap: 6px;
}
.price-number {
.rongdou-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.rongdou-price {
font-size: 28px;
font-weight: 700;
color: #ff6b35;
}
.price-unit {
font-size: 16px;
color: #ff6b35;
.sub-price {
display: flex;
align-items: center;
gap: 4px;
margin-left: 30px;
margin-top: 2px;
}
.original-price {
color: #999;
font-size: 14px;
text-decoration: line-through;
margin-bottom: 4px;
.points-icon {
width: 16px;
height: 16px;
color: #666;
}
.points-price {
font-size: 16px;
color: #666;
font-weight: normal;
}
.discount-info {