首页余额展示优化

src/views/agent/home.vue

@@ -83,10 +83,21 @@
         <Footer></Footer>
       </div>
       <div class="home-main-right">
-        <div class="accountBalance common-area">
+        <div class="accountBalance common-area" ref="balanceBox">
+          <div class="mb-16" v-if="walletList && walletList.pub && walletList.pub.remain > 0 && walletWarp">账户余额</div>
           <div class="mb-16 red" v-if="walletList && walletList.pub && walletList.pub.forzen_money > 0">含冻结金额 {{ walletList.pub.forzen_money }} 元</div>
-          <div class="flex-between" v-if="walletList && walletList.pub && walletList.pub.remain">
+          <div class="flex-between flex-baseline" v-if="walletList && walletList.pub && walletList.pub.remain">
-            <span>账户余额&nbsp; <b v-if="walletList && walletList.pub && walletList.pub.remain > 0">{{ walletList.pub.remain }}</b>&nbsp;元</span>
+            <span class="priceDesc" v-if="walletList && walletList.pub && walletList.pub.remain > 0">
+              <span v-if="!walletWarp">账户余额&nbsp;</span>
+              <span>
+                <b class="price">
+                  <b class="integer">{{ intPart }}</b>
+                  <b class="dot" v-if="decPart">.</b>
+                  <b class="decimal" v-if="decPart">{{ decPart }}</b>
+                </b>
+              </span>
+              <span>&nbsp;元</span>
+            </span>
             <span class="hoverCommon" @click="isShowSpec = !isShowSpec"  v-if="walletList && walletList.spec && walletList.spec.length > 0">{{ isShowSpec ? '收起' : '展开' }}</span>
           </div>
           <div v-show="isShowSpec" class="mt-24" style="border-top: 1px solid #ebebeb;" v-if="walletList && walletList.spec && walletList.spec.length > 0">
@@ -180,6 +191,7 @@ export default {
 
       expireServices: [],
 
+      walletWarp: false,
       walletList: [],
       noticeList: [],
 
@@ -230,13 +242,48 @@ export default {
     GuipDialog,
     GuipTextarea,
   },
+  computed: {
+    intPart() {
+      if(this.walletList && this.walletList.pub && this.walletList.pub.remain > 0){
+          return String(this.walletList.pub.remain).split('.')[0]
+      }
+      return ""
+    },
+    decPart() {
+      if(this.walletList && this.walletList.pub && this.walletList.pub.remain > 0){
+          return String(this.walletList.pub.remain).split('.')[1] || ''
+      }
+      return ""
+    }
+  },
   mounted() {
+      const el = this.$refs.balanceBox
+      if (el) {
+          this.resizeObserver = new ResizeObserver(entries => {
+              requestAnimationFrame(() => {
+                  for (let entry of entries) {
+                      const width = parseInt(entry.contentRect.width)
+                      if (width <= 258 && !this.walletWarp) {
+                          this.walletWarp = true
+                      } else if (width > 258 && this.walletWarp) {
+                          this.walletWarp = false
+                      }
+                  }
+              })
+          })
+          this.resizeObserver.observe(el)
+      }
       this.getSupplyServiceList()
       this.getSaleStats()
       this.getExpireServices()
       this.getWalletList()
       this.getNoticeList()
   },
+  beforeDestroy() {
+      if (this.resizeObserver) {
+          this.resizeObserver.disconnect()
+      }
+  },
   methods: {
     getSupplyServiceList() {
         this.tableLoading = true
@@ -686,13 +733,33 @@ a {
         align-items: baseline;
         background: #fff;
 
-        b {
+        .flex-baseline{
-          font-family: Roboto Condensed;
+          gap: 12px;
-          font-size: 32px;
+          align-items: baseline;
-          font-weight: bold;
+          white-space: nowrap;
-          line-height: 27px;
+        }
-          letter-spacing: normal;
+
-          color: #1F2026;
+        .priceDesc{
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          align-items: baseline;
+          .price{
+            font-family: Roboto Condensed;
+            font-weight: bold;
+            line-height: 27px;
+            letter-spacing: normal;
+            color: #1F2026;
+            .integer{
+              font-size: 32px;
+            }
+            .dot{
+              font-size: 16px;
+            }
+            .decimal{
+              font-size: 16px;
+            }
+          }
         }
 
         span {