优化价格显示

src/views/BuyDetails.vue

@@ -30,8 +30,16 @@
           <div class="product-details">
             <div class="product-price">
               <span class="price-label">实付</span>
-              <el-icon class="coin-icon"><Coin /></el-icon>
-              <span class="price-value">{{ totalPrice }}</span>
+              <div class="price-container">
+                <div class="main-price">
+                  <img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
+                  <span class="rongdou-price">{{ totalPrice }}</span>
+                </div>
+                <div class="sub-price">
+                  <el-icon class="points-icon"><Coin /></el-icon>
+                  <span class="points-price">{{ totalPointsPrice }}</span>
+                </div>
+              </div>
             </div>
             <div class="quantity-selector">
               <el-button size="small" @click="decreaseQuantity" :disabled="quantity <= 1">-</el-button>
@@ -144,6 +152,11 @@ const totalPrice = computed(() => {
   return product.value.rongdou_price * quantity.value
 })
 
+const totalPointsPrice = computed(() => {
+  if (!product.value) return 0
+  return product.value.points_price * quantity.value
+})
+
 const canPurchase = computed(() => {
   const specNames = Object.keys(specGroups.value)
   const allSpecsSelected = specNames.every(specName => selectedSpecs.value[specName])
@@ -534,23 +547,58 @@ onMounted(() => {
 
 .product-price {
   display: flex;
-  align-items: center;
-  gap: 4px;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 .price-label {
   font-size: 14px;
   color: #666;
+  margin-top: 2px;
 }
 
-.coin-icon {
-  color: #ffae00;
+.price-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
 }
 
-.price-value {
+.main-price {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rongdou-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.rongdou-price {
   font-size: 18px;
   font-weight: bold;
-  color: #ffae00;
+  color: #ff6b35;
+}
+
+.sub-price {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: 24px;
+}
+
+.points-icon {
+  width: 14px;
+  height: 14px;
+  color: #666;
+}
+
+.points-price {
+  font-size: 14px;
+  color: #666;
+  font-weight: normal;
 }
 
 .quantity-selector {