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>
-    <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>
+    <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" :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,18 +9,19 @@
       :total="pages.total"
       class="mt-5"
     ></m-page-container>
-    <m-title
-      class="mt-3.5"
-      :title="`${$t('lang.block.title')}(${234234}${$t('lang.block.count')})`"
-    ></m-title>
-    <m-block-item
-      v-for="(item, i) in Blocks"
-      :blockTime="item.blockTime"
-      :height="item.height"
-      :packagingAddress="item.hash"
-      :txCount="item.txCount"
-      :key="i"
-    ></m-block-item>
+    <div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-3.5">
+      <m-title
+        :title="`${$t('lang.block.title')}(${234234}${$t('lang.block.count')})`"
+      ></m-title>
+      <m-block-item
+        v-for="(item, i) in Blocks"
+        :blockTime="item.blockTime"
+        :height="item.height"
+        :packagingAddress="item.hash"
+        :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,46 +13,50 @@
       :nextBlockHeight="overview.nextBlockHeight"
       :loading="loadingOverview"
     ></m-block-desc-card>
-    <m-tabs
-      class="mt-3.5"
-      :tabList="tabList"
-      :focusedTab="focusedTab"
-      :setFocusedTab="setFocusedTab"
-    ></m-tabs>
-    <div class="bg-white px-4">
-      <Select
-        :selectedValue="txRecordFilterValue"
-        :optionList="txRecordFilterOptionList"
-        @change="(v) => (txRecordFilterValue = v)"
-      ></Select>
-    </div>
-    <div v-if="focusedTab === 'txRecordTab'" class="flow-root">
-      <m-tx-item
-        v-for="(trade, i) in Trades"
-        :key="i"
-        :row="trade"
-        :amount="trade.amount"
-        :txHash="trade.tx.hash"
-        :from="trade.tx.from"
-        :blockTime="trade.blockTime"
-        :to="trade.tx.to"
-        :tradeG="trade.tradeG"
-        :status="isSuccess(trade.tx.execer, trade.receipt.ty)"
-      ></m-tx-item>
-      <m-page-container
+    <div class="rounded-twoPx overflow-hidden shadow-shadow1">
+      <m-tabs
         class="mt-3.5"
-        :simple="false"
-        @pageChange="pageChange"
-        @sizeChange="sizeChange"
-        :currentPage="pages.currentPage"
-        :pageSize="pages.pageSize"
-        :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>
+        :tabList="tabList"
+        :focusedTab="focusedTab"
+        :setFocusedTab="setFocusedTab"
+      ></m-tabs>
+      <div class="bg-white px-4">
+        <Select
+          v-if="focusedTab === 'txRecordTab'"
+          :selectedValue="txRecordFilterValue"
+          :optionList="txRecordFilterOptionList"
+          @change="(v) => (txRecordFilterValue = v)"
+        ></Select>
+      </div>
+      <div v-if="focusedTab === 'txRecordTab'" class="flow-root">
+        <m-tx-item
+          v-for="(trade, i) in Trades"
+          :key="i"
+          :row="trade"
+          :amount="trade.amount"
+          :txHash="trade.tx.hash"
+          :from="trade.tx.from"
+          :blockTime="trade.blockTime"
+          :to="trade.tx.to"
+          :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"
+      @sizeChange="sizeChange"
+      :currentPage="pages.currentPage"
+      :pageSize="pages.pageSize"
+      :total="pages.total"
+    ></m-page-container>
   </div>
 </template>
 <script lang="ts">
@@ -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="bg-white px-3.5 mb-5">
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.block.hash') }}</div>
-        <div class="content">
-          {{ data.hash | filterHash }}
-          <m-copy-btn :copyTxt="data.hash"></m-copy-btn>
+    <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>
+          <div class="content">
+            {{ data.hash | filterHash }}
+            <m-copy-btn :copyTxt="data.hash"></m-copy-btn>
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.status') }}</div>
-        <div class="content">
-          <tx-status size="small" :status="data.status"></tx-status>
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.status') }}</div>
+          <div class="content">
+            <tx-status size="small" :status="data.status"></tx-status>
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.block.height') }}</div>
-        <div class="content">
-          {{ data.height }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.block.height') }}</div>
+          <div class="content">
+            {{ data.height }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.time') }}</div>
-        <div class="content">
-          {{ data.blockTime | formatTime }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.time') }}</div>
+          <div class="content">
+            {{ data.blockTime | formatTime }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.trade.sender') }}</div>
-        <div class="content">
-          <router-link
-            :to="`/address?address=${data.from}`"
-            class="text-footer-color"
-          >
-            {{ data.from | filterHash(10) }}
-          </router-link>
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.trade.sender') }}</div>
+          <div class="content">
+            <router-link
+              :to="`/address?address=${data.from}`"
+              class="text-footer-color"
+            >
+              {{ data.from | filterHash(10) }}
+            </router-link>
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.trade.receiver') }}</div>
-        <div class="content">
-          <router-link
-            :to="`/address?address=${data.to}`"
-            class="text-footer-color"
-          >
-            {{ data.to | filterHash(10) }}
-          </router-link>
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.trade.receiver') }}</div>
+          <div class="content">
+            <router-link
+              :to="`/address?address=${data.to}`"
+              class="text-footer-color"
+            >
+              {{ data.to | filterHash(10) }}
+            </router-link>
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.value') }}</div>
-        <div class="content">
-          {{
-            { amount: data.amount, assets: data.assets, tx: data.inData }
-              | TradeValue
-          }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.value') }}</div>
+          <div class="content">
+            {{
+              { amount: data.amount, assets: data.assets, tx: data.inData }
+                | TradeValue
+            }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.fee') }}</div>
-        <div class="content">
-          {{ data.fee | filterFee }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.fee') }}</div>
+          <div class="content">
+            {{ data.fee | filterFee }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.random') }}</div>
-        <div class="content">
-          {{ String(data.nonce) }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.random') }}</div>
+          <div class="content">
+            {{ String(data.nonce) }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.execer') }}</div>
-        <div class="content">
-          {{ data.execer }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.execer') }}</div>
+          <div class="content">
+            {{ data.execer }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.trade.func') }}</div>
-        <div class="content">
-          {{ data.actionName === 'unknown' ? 'none' : data.actionName }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.trade.func') }}</div>
+          <div class="content">
+            {{ data.actionName === 'unknown' ? 'none' : data.actionName }}
+          </div>
         </div>
-      </div>
-      <div class="flex items-center">
-        <div class="label">{{ $t('lang.txDetail.txType') }}</div>
-        <div class="content">
-          {{
-            data.txType === 'normalTx'
-              ? $t('lang.txDetail.normalTx')
-              : $t('lang.txDetail.groupTx')
-          }}
+        <div class="flex items-center">
+          <div class="label">{{ $t('lang.txDetail.txType') }}</div>
+          <div class="content">
+            {{
+              data.txType === 'normalTx'
+                ? $t('lang.txDetail.normalTx')
+                : $t('lang.txDetail.groupTx')
+            }}
+          </div>
         </div>
-      </div>
-      <div class="">
-        <div class="label">{{ $t('lang.txDetail.inData') }}</div>
-        <div class="preBox">
-          <pre
-            class="preTxt"
-            contenteditable="true"
-          ><code>{{data.inData | decodeTransferNote}}</code>
+        <div class="">
+          <div class="label">{{ $t('lang.txDetail.inData') }}</div>
+          <div class="preBox">
+            <pre
+              class="preTxt"
+              contenteditable="true"
+            ><code>{{data.inData | decodeTransferNote}}</code>
           </pre>
+          </div>
         </div>
-      </div>
-      <div class="pb-3.5">
-        <div class="label">{{ $t('lang.txDetail.outData') }}</div>
-        <div class="preBox">
-          <pre
-            class="preTxt"
-            contenteditable="true"
-          ><code>{{data.outData}}</code>
+        <div class="pb-3.5">
+          <div class="label">{{ $t('lang.txDetail.outData') }}</div>
+          <div class="preBox">
+            <pre
+              class="preTxt"
+              contenteditable="true"
+            ><code>{{data.outData}}</code>
           </pre>
+          </div>
         </div>
       </div>
     </div>

tailwind.config.js

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