admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化价格显示

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/Shop.vue
View File

@@ -64,12 +64,13 @@
<div class="recommend-content">
<h4 class="recommend-name">{{ product.name }}</h4>
<div class="recommend-price-container">
<div class="recommend-price">
<el-icon><Coin /></el-icon>
{{ product.rongdou_price }}
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div v-if="product.originalPoints" class="recommend-original-price">
{{ product.originalPoints }}
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
@@ -89,12 +90,13 @@
<div class="recommend-content">
<h4 class="recommend-name">{{ product.name }}</h4>
<div class="recommend-price-container">
<div class="recommend-price">
<el-icon><Coin /></el-icon>
{{ product.rongdou_price }}
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div v-if="product.originalPoints" class="recommend-original-price">
{{ product.originalPoints }}
<div class="sub-price">
<el-icon class="points-icon"><Coin /></el-icon>
<span class="points-price">{{ product.points_price }}</span>
</div>
</div>
</div>
@@ -137,13 +139,14 @@
</div>
<h4 class="product-name">{{ product.name }}</h4>
<div class="product-price">
<span class="current-price">
<el-icon><Coin /></el-icon>
{{ product.rongdou_price }}
</span>
<span v-if="product.originalPoints" class="original-price">
{{ product.originalPoints }}
</span>
<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>
</div>
@@ -617,26 +620,45 @@ onMounted(() => {
}
.product-price {
display: flex;
align-items: center;
gap: 8px;
margin: 0 8px;
padding-bottom: 8px;
position: relative;
}
.current-price {
.main-price {
display: flex;
align-items: center;
gap: 4px;
}
.rongdou-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.rongdou-price {
color: #ff6b35;
font-weight: bold;
font-size: 16px;
}
.sub-price {
display: flex;
align-items: center;
gap: 2px;
color: #ff6b35;
font-weight: 600;
font-size: 14px;
margin-top: 4px;
}
.original-price {
.points-icon {
font-size: 10px;
width: 10px;
height: 10px;
}
.points-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
font-size: 10px;
}
.empty-state {
@@ -750,25 +772,44 @@ onMounted(() => {
}
.recommend-price-container {
display: flex;
flex-direction: column;
gap: 1px;
position: relative;
}
.recommend-price {
.recommend-price-container .main-price {
display: flex;
align-items: center;
gap: 2px;
}
.recommend-price-container .rongdou-icon {
width: 12px;
height: 12px;
object-fit: contain;
}
.recommend-price-container .rongdou-price {
color: #ff6b35;
font-weight: 600;
font-size: 12px;
line-height: 1;
}
.recommend-original-price {
.recommend-price-container .sub-price {
display: flex;
align-items: center;
gap: 1px;
margin-top: 2px;
}
.recommend-price-container .points-icon {
font-size: 8px;
width: 8px;
height: 8px;
}
.recommend-price-container .points-price {
color: #999;
font-size: 10px;
text-decoration: line-through;
font-size: 8px;
line-height: 1;
}