更改了融豆图标和负数显示

src/views/MyProfile.vue

@@ -63,7 +63,10 @@
       <div class="balance-card">
         <div class="balance-item">
           <span class="balance-label">我的余额</span>
-          <span class="balance-value">¥{{ accountInfo.balance }}</span>
+          <div class="balance-content">
+            <img src="/imgs/shop.png" alt="融豆" class="bean-image">
+            <div class="balance-value">{{ Math.abs(accountInfo.balance) }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -614,4 +617,25 @@ export default {
   height: 178px;
   object-fit: cover;
 }
+
+.balance-content {
+  display: flex;
+  align-items: center;
+  gap: 8px; /* 控制图标和数值之间的间距 */
+}
+
+.bean-image {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0; /* 防止图片被压缩 */
+}
+
+.balance-value {
+  font-size: 28px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  white-space: nowrap; /* 防止文本换行 */
+}
 </style>