字体自适应变化

src/assets/lang/en.ts

@@ -44,8 +44,8 @@ export const lang = {
     totalSent: "total sent",
     totalValue: "total value",
     accountBalance: "account balance",
-    votingRecord: "voting record",
-    packingRecord: "packing records",
+    votingRecord: "voting",
+    packingRecord: "packing",
   },
   block: {
     title: "all blocks",
@@ -105,11 +105,11 @@ export const lang = {
     token: "token",
     type: "type",
     txAmount: "Txn Value",
-    txRecord: "transaction record",
+    txRecord: "transaction",
     consensusNode: "consensus node",
     txTotal: "A total of {0} txns were found",
     consensusNodeTotal: "A total of {0} consensus nodes were found",
-    receiveStatus: "acceptance status",
+    receiveStatus: "status",
   },
   components: {
     hour: " hr ",

src/components/pc/BlockChainBrowser/AddressOverview/CardShowTradeInTotal.vue

 <template>
-  <div class="card bg-white flex text-center w-full">
+  <div class="card bg-white flex text-center w-full overflow-hidden">
     <div class="w-1/4 mt-10" v-for="(item, index) in list" :key="index">
       <div class="text-text-color">{{ item.name }}</div>
       <div
-        class="mt-4 text-title-color text-xl font-bold overflow-hidden overflow-ellipsis"
+        ref="father"
+        class="mt-4 text-title-color text-xl font-bold overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
-        <span v-if="index < 2">{{ item.value | filterAmount }} YCC</span>
-        <span v-else-if="index == 2">
+        <span v-if="index < 2" ref="a">
+          {{ item.value | filterAmount }} YCC
+        </span>
+        <span v-else-if="index == 2" ref="b">
           {{ item.value | filterMoney }} {{ $t('lang.price.dollar') }}
         </span>
-        <span v-else>
+        <span v-else ref="c">
           {{ item.value }}
         </span>
       </div>
@@ -23,6 +26,28 @@ export default Vue.extend({
   props: {
     list: Array as PropType<{ name: string; value: string | number }[]>,
   },
+  mounted() {
+    this.setFontSize()
+  },
+  methods: {
+    setFontSize() {
+      const father = this.$refs.father as HTMLElement[]
+      const a = this.$refs.a as HTMLElement[]
+      const b = this.$refs.b as HTMLElement
+      const c = this.$refs.c as HTMLElement
+      ;[...a, b, c].forEach((el: HTMLElement) => {
+        console.log(el.offsetWidth, father[0].offsetWidth)
+        if (el.offsetWidth >= father[0].offsetWidth) {
+          el.style.fontSize = '14px'
+        }
+      })
+    },
+  },
+  watch: {
+    list(newV) {
+      this.setFontSize()
+    },
+  },
 })
 </script>
 

src/components/pc/BlockChainBrowser/AddressOverview/index.vue

@@ -31,7 +31,7 @@
         :optionsList="optionsList"
         :handleSelectChange="handleSelectChange"
       ></Balance>
-      <div class="w-full flex flex-col">
+      <div class="w-full flex flex-col overflow-hidden">
         <div class="flex-grow relative">
           <div class="text-right" style="padding-right: 30px;">
             <span

src/components/pc/BlockChainBrowser/TradeTable/index.vue

@@ -51,7 +51,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="hash" :label="$t('lang.trade.sender')">
+      <el-table-column prop="hash" :label="$t('lang.trade.sender')" width="70">
         <template slot-scope="item">
           <router-link
             :to="`/address?address=${item.row.fromAddr}`"
@@ -61,7 +61,7 @@
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column width="60">
+      <el-table-column width="40">
         <template slot-scope="item">
           <img
             :src="
@@ -93,14 +93,14 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('lang.trade.fee')" width="120">
+      <el-table-column :label="$t('lang.trade.fee')" width="100">
         <template slot-scope="item">
           <div class="text-darkBlue">
             {{ item.row.fee }}{{ item.row.tx.fee | filterFee }}
           </div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('lang.trade.receiveStatus')">
+      <el-table-column :label="$t('lang.trade.receiveStatus')" width="100">
         <template slot-scope="item">
           <div>
             <tx-status

src/components/pc/BlockChainBrowser/TradeTable2.vue

@@ -61,7 +61,7 @@
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column width="60">
+      <el-table-column width="40">
         <template slot-scope="item">
           <img
             :src="
@@ -93,14 +93,14 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('lang.trade.fee')" width="120">
+      <el-table-column :label="$t('lang.trade.fee')" width="100">
         <template slot-scope="item">
           <div class="text-darkBlue">
             {{ item.row.fee | filterFee }}
           </div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('lang.trade.receiveStatus')">
+      <el-table-column :label="$t('lang.trade.receiveStatus')" width="100">
         <template slot-scope="item">
           <div>
             <tx-status :status="item.row.success"></tx-status>

src/views/mobile/address/components/m-address-overview/m-four-params.vue

 <template>
-  <div class="c-four-params flex flex-wrap">
+  <div class="c-four-params flex flex-wrap whitespace-nowrap">
     <div class="param">
       <div
         class="text-text-color text-xs mt-2.5 ml-7"
@@ -7,8 +7,11 @@
       >
         {{ $t('lang.address.totalReception') }}
       </div>
-      <div class="text-title-color text-sm font-bold ml-7">
-        {{ receive | filterAmount }} YCC
+      <div
+        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
+        ref="a1"
+      >
+        <span ref="a2">{{ receive | filterAmount }}YCC</span>
       </div>
     </div>
     <div class="param">
@@ -18,8 +21,11 @@
       >
         {{ $t('lang.address.totalSent') }}
       </div>
-      <div class="text-title-color text-sm font-bold ml-7">
-        {{ send | filterAmount }} YCC
+      <div
+        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
+        ref="b1"
+      >
+        <span ref="b2">{{ send | filterAmount }}YCC</span>
       </div>
     </div>
     <div class="param">
@@ -29,8 +35,13 @@
       >
         {{ $t('lang.address.totalValue') }}
       </div>
-      <div class="text-title-color text-sm font-bold ml-7">
-        {{ value | filterMoney }} {{ $t('lang.price.dollar') }}
+      <div
+        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
+        ref="c1"
+      >
+        <span ref="c2">
+          {{ value | filterMoney }}{{ $t('lang.price.dollar') }}
+        </span>
       </div>
     </div>
     <div class="param">
@@ -40,8 +51,13 @@
       >
         {{ $t('lang.block.txCount') }}
       </div>
-      <div class="text-title-color text-sm font-bold ml-7">
-        {{ txCount }}
+      <div
+        class="text-title-color text-sm font-bold ml-7 overflow-hidden overflow-ellipsis"
+        ref="d1"
+      >
+        <span ref="d2">
+          {{ txCount }}
+        </span>
       </div>
     </div>
   </div>
@@ -55,6 +71,38 @@ export default Vue.extend({
     value: Number,
     txCount: Number,
   },
+  mounted() {
+    this.setFontSize()
+  },
+  watch: {
+    receive() {
+      this.setFontSize()
+    },
+    send() {
+      this.setFontSize()
+    },
+    value() {
+      this.setFontSize()
+    },
+    txCount() {
+      this.setFontSize()
+    },
+  },
+  methods: {
+    setFontSize() {
+      const father = this.$refs.a1 as HTMLElement
+      const a = this.$refs.a2 as HTMLElement
+      const b = this.$refs.b2 as HTMLElement
+      const c = this.$refs.c2 as HTMLElement
+      const d = this.$refs.d2 as HTMLElement
+      ;[a, b, c, d].forEach((el: HTMLElement) => {
+        console.log(el, father, el.offsetWidth, father.offsetWidth)
+        if (el.offsetWidth >= father.offsetWidth) {
+          el.style.fontSize = '10px'
+        }
+      })
+    },
+  },
 })
 </script>
 <style lang="scss" scoped>