优化价格显示
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user