fix: 修复移动端样式问题

src/components/mobile/m-block-desc-card.vue

@@ -8,6 +8,11 @@
     >
       <div class="flex items-end justify-between">
         <img :src="blockIcon" class="blockIcon" alt="" />
+      </div>
+      <div class="flex justify-between mt-1">
+        <div class="text-text-color text-xs">
+          {{ $t('lang.txDetail.height') }}
+        </div>
         <div>
           <span class="text-text-color text-xs">
             {{ $t('lang.block.blockReward') }}
@@ -17,14 +22,6 @@
           </span>
         </div>
       </div>
-      <div class="flex justify-between mt-1">
-        <div class="text-text-color text-xs">
-          {{ $t('lang.txDetail.height') }}
-        </div>
-        <div class="text-text-color text-xs">
-          {{ height | filterVotePackReward }}
-        </div>
-      </div>
       <div class="flex justify-between items-end mb-6" style="margin-top: 3px;">
         <div class="text-footer-color font-bold text-3xl">
           {{ height }}
@@ -52,7 +49,7 @@
         </div>
         <div class="text-darkBlue text-sm flex items-center">
           <div>
-            {{ hash | filterHash }}
+            {{ hash | filterHash(10) }}
           </div>
           <m-copy-btn class="ml-2" :copyTxt="hash"></m-copy-btn>
         </div>
@@ -63,7 +60,7 @@
         </div>
         <div class="text-darkBlue text-sm flex items-center">
           <div>
-            {{ merkelgen | filterHash }}
+            {{ merkelgen | filterHash(10) }}
           </div>
           <m-copy-btn class="ml-2" :copyTxt="merkelgen"></m-copy-btn>
         </div>
@@ -74,7 +71,7 @@
         </div>
         <div class="text-darkBlue text-sm flex items-center">
           <div>
-            {{ stateHash | filterHash }}
+            {{ stateHash | filterHash(10) }}
           </div>
           <m-copy-btn class="ml-2" :copyTxt="stateHash"></m-copy-btn>
         </div>
@@ -82,7 +79,7 @@
     </div>
     <div class="c-block-desc-bottom flex justify-between">
       <div
-        class="relativeBlock relativeBlock-last text-center"
+        class="relativeBlock relativeBlock-last text-center flex-grow"
         :style="{
           backgroundImage: `url(${lastBlockBg})`,
         }"
@@ -109,8 +106,9 @@
           </div>
         </div>
       </div>
+      <div style="width: 15px;"></div>
       <div
-        class="relativeBlock relativeBlock-next text-center"
+        class="relativeBlock relativeBlock-next text-center flex-grow"
         :style="{
           backgroundImage: `url(${nextBlockBg})`,
         }"

src/components/mobile/m-chain-perf.vue

@@ -51,7 +51,6 @@ export default Vue.extend({
 </script>
 <style lang="scss" scoped>
 .c-perf {
-  width: 145px;
   height: 225px;
   background: #ffffff;
   box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);

src/components/mobile/m-consensus-node.vue

 <template>
-  <div class="consensus-node bg-white">
+  <div class="consensus-node" style="background: #fafbfc;">
     <div
       class="box"
       :style="{

src/components/mobile/m-pageContainer.vue

@@ -182,9 +182,6 @@ $white: #6368de;
     }
   }
 
-  .detail {
-    margin-bottom: 12px;
-  }
   .first-pager,
   .last-pager {
     background: #f4f4f5;

src/views/mobile/address/index.vue

@@ -2,12 +2,17 @@
   <div class="c-address mx-3.5 flow-root">
     <m-chain-search class="mt-3.5"></m-chain-search>
     <m-address-overview class="mt-5"></m-address-overview>
+    <div
+      class="rounded-twoPx overflow-hidden shadow-shadow1"
+      style="margin-top: 15px;"
+    >
       <m-tabs
         :focusedTab="focusedTab"
         :setFocusedTab="($event) => (focusedTab = $event)"
         :tabList="tabList"
       ></m-tabs>
-    <m-vote-pack :rewardAmount="30" class="mb-3" :type="'lskjd'"></m-vote-pack>
+      <m-vote-pack :rewardAmount="30" :type="'lskjd'"></m-vote-pack>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -29,5 +34,6 @@ export default VueTypedMixins(address).extend({
 <style lang="scss" scoped>
 .c-address {
   padding-top: 44px;
+  padding-bottom: 23px;
 }
 </style>

src/views/mobile/block.vue

@@ -9,8 +9,8 @@
       :total="pages.total"
       class="mt-5"
     ></m-page-container>
+    <div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-3.5">
       <m-title
-      class="mt-3.5"
         :title="`${$t('lang.block.title')}(${234234}${$t('lang.block.count')})`"
       ></m-title>
       <m-block-item
@@ -21,6 +21,7 @@
         :txCount="item.txCount"
         :key="i"
       ></m-block-item>
+    </div>
     <m-page-container
       :simple="false"
       @pageChange="pageChange"
@@ -47,5 +48,6 @@ export default VueTypedMixins(blockMixin).extend({
 .c-block {
   padding-top: 44px;
   border-radius: 2px;
+  padding-bottom: 23px;
 }
 </style>

src/views/mobile/blockChainBrowser.vue

 <template>
-  <div class="" style="padding-top: 44px;">
+  <div class="" style="padding-top: 44px; padding-bottom: 24px;">
     <m-chain-search
       style="margin-top: 15px;"
       class="mx-4 mt-4"
     ></m-chain-search>
-    <div class="relative flex justify-end">
+    <div class="relative flex justify-end" style="margin-top: 19px;">
       <m-chain-card
         class="ml-4 absolute top-1/2 -translate-y-1/2 transform left-0"
         :msgList="msgList"
@@ -14,13 +14,16 @@
     <m-num-of-on-chain-tx class="mx-4 mt-3.5"></m-num-of-on-chain-tx>
     <div class="flex justify-between mx-4 mt-3.5">
       <m-chain-price class="flex-shrink-0"></m-chain-price>
-      <m-chain-perf class="flex-shrink-0"></m-chain-perf>
+      <div style="width: 15px;"></div>
+      <m-chain-perf class="flex-grow"></m-chain-perf>
     </div>
     <m-latest-blocks
-      class="mx-4 mt-3.5"
+      class="mx-4 mt-3.5 shadow-shadow1 rounded-twoPx overflow-hidden"
       :latestBlocks="latestBlocks"
     ></m-latest-blocks>
-    <m-latest-tx class="mx-4"></m-latest-tx>
+    <m-latest-tx
+      class="mx-4 mt-3.5 shadow-shadow1 rounded-twoPx overflow-hidden"
+    ></m-latest-tx>
   </div>
 </template>
 

src/views/mobile/blockDetail/index.vue

@@ -13,6 +13,7 @@
       :nextBlockHeight="overview.nextBlockHeight"
       :loading="loadingOverview"
     ></m-block-desc-card>
+    <div class="rounded-twoPx overflow-hidden shadow-shadow1">
       <m-tabs
         class="mt-3.5"
         :tabList="tabList"
@@ -21,6 +22,7 @@
       ></m-tabs>
       <div class="bg-white px-4">
         <Select
+          v-if="focusedTab === 'txRecordTab'"
           :selectedValue="txRecordFilterValue"
           :optionList="txRecordFilterOptionList"
           @change="(v) => (txRecordFilterValue = v)"
@@ -39,7 +41,14 @@
           :tradeG="trade.tradeG"
           :status="isSuccess(trade.tx.execer, trade.receipt.ty)"
         ></m-tx-item>
+      </div>
+      <div v-if="focusedTab === 'consensusNodeTab'" class="flow-root">
+        <m-consensus-node></m-consensus-node>
+        <m-consensus-node type="vote"></m-consensus-node>
+      </div>
+    </div>
     <m-page-container
+      v-if="focusedTab === 'txRecordTab'"
       class="mt-3.5"
       :simple="false"
       @pageChange="pageChange"
@@ -49,11 +58,6 @@
       :total="pages.total"
     ></m-page-container>
   </div>
-    <div v-if="focusedTab === 'consensusNodeTab'" class="flow-root">
-      <m-consensus-node></m-consensus-node>
-      <m-consensus-node type="vote"></m-consensus-node>
-    </div>
-  </div>
 </template>
 <script lang="ts">
 import VueTypedMixins from 'vue-typed-mixins'
@@ -80,5 +84,6 @@ export default VueTypedMixins(blockDetailMixin).extend({
 <style lang="scss" MChainSearchscoped>
 .c-blockDetail {
   padding-top: 44px;
+  padding-bottom: 23px;
 }
 </style>

src/views/mobile/tradeDetail.vue

 <template>
   <div class="c-trade-detail mx-4 flow-root">
     <MChainSearch class="mt-3.5"></MChainSearch>
-    <m-title :title="$t('lang.txDetail.detail')" class="mt-5"></m-title>
+    <div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-5">
+      <m-title :title="$t('lang.txDetail.detail')"></m-title>
       <div class="bg-white px-3.5 mb-5">
         <div class="flex items-center">
           <div class="label">{{ $t('lang.block.hash') }}</div>
@@ -115,6 +116,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script lang="ts">
 import vueTypedMixins from 'vue-typed-mixins'

tailwind.config.js

@@ -152,6 +152,7 @@ module.exports = {
       "2xl": "1rem",
       "3xl": "1.5rem",
       full: "9999px",
+      twoPx: "2px",
     },
     borderWidth: {
       DEFAULT: "1px",