fix: pc blockDetail txRecords add txGroup

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

@@ -3,14 +3,14 @@
     <left-box :data="data" :loading="loading"></left-box>
     <div class="h-full">
       <right-box
-        :loading="loading"
+        :loading="loadingRelativeBlockHeight"
         type="last"
         style="margin-bottom: 30px;"
         :height="data.lastBlockHeight"
       ></right-box>
       <right-box
         type="next"
-        :loading="loading"
+        :loading="loadingRelativeBlockHeight"
         :height="data.nextBlockHeight"
         :init="init"
       ></right-box>
@@ -32,6 +32,7 @@ export default Vue.extend({
     data: Object,
     init: Function,
     loading: Boolean,
+    loadingRelativeBlockHeight: Boolean,
   },
 })
 </script>

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

@@ -18,7 +18,7 @@
           </span>
         </div>
       </template>
-      <el-table-column label width="20">
+      <el-table-column label width="40">
         <template slot-scope="item">
           <div>
             <div
@@ -27,20 +27,25 @@
                 'middle-line': item.row.tradeG === 1,
                 'end-line': item.row.tradeG === 3,
               }"
-            >
-              <span v-if="item.row.tradeG !== 3"></span>
-              <i></i>
-              <span v-if="item.row.tradeG === 3"></span>
-            </div>
+            ></div>
+            <img
+              class="w-5 h-5 max-w-none z-20 relative"
+              v-if="
+                item.row.tradeG === 1 ||
+                item.row.tradeG === 2 ||
+                item.row.tradeG === 3
+              "
+              src="../../../../assets/images/blockChainBrowser/tradeDetail/txGroupIcon.png"
+            />
           </div>
         </template>
       </el-table-column>
       <el-table-column :label="$t('lang.trade.hash')">
         <template slot-scope="item">
           <div>
-            <p class="group-title" v-if="item.row.tradeG === 2">
+            <!-- <p class="group-title" v-if="item.row.tradeG === 2">
               {{ $t('txDetail.groupTx') }}
-            </p>
+            </p> -->
             <router-link
               :to="`/tradeHash?hash=${item.row.txHash}`"
               class="light flex-left"
@@ -61,10 +66,16 @@
         </template>
       </el-table-column>
       <el-table-column width="60">
-        <template>
+        <template slot-scope="item">
           <img
-            src="@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png"
-            style="width: 20px;"
+            :src="
+              item.row.tradeG === 1 ||
+              item.row.tradeG === 2 ||
+              item.row.tradeG === 3
+                ? arrowRightBlue
+                : arrowRightDark
+            "
+            style="width: 20px; height: 20px;"
             alt=""
           />
         </template>
@@ -122,6 +133,8 @@ import { tradeAccuracy } from '@/utils/common'
 import { Table, TableColumn } from 'element-ui'
 import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
 import TxStatus from '../../txStatus.vue'
+import arrowRightBlue from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-blue.png'
+import arrowRightDark from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
 
 export default Vue.extend({
   components: {
@@ -139,7 +152,10 @@ export default Vue.extend({
     pages: Object,
   },
   data() {
-    return {}
+    return {
+      arrowRightBlue,
+      arrowRightDark,
+    }
   },
   methods: {
     isSuccess(execer: any, ty: any) {
@@ -149,8 +165,45 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .trade-table {
+  .tx-start,
+  .tx-middle,
+  .tx-end {
+    position: relative;
+    .start-line {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+
+      width: 1px;
+      height: 50px;
+      border: 1px solid #4fddfc;
+    }
+    .middle-line {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+
+      width: 1px;
+      height: 80px;
+      border: 1px solid #4fddfc;
+    }
+    .end-line {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+
+      width: 1px;
+      height: 40px;
+      border: 1px solid #4fddfc;
+    }
+  }
 }
 .loading-line {
   height: 60px;
@@ -182,79 +235,11 @@ export default Vue.extend({
     .el-table__header thead tr {
       height: 60px;
     }
-    .iconjiantou-you {
-      font-size: 20px;
-      color: #9aaab9;
-    }
-    .tx-start,
-    .tx-middle,
-    .tx-end {
-      background: #f4f7fe;
-      .light,
-      .iconjiantou-you {
-        color: #d79a3f;
-      }
-    }
-    .tx-start {
-      padding-top: 45px;
-    }
+
     .tx-start:nth-of-type(2) {
       padding-top: 0;
-      // .cell {
-      //   padding: 0;
-      // }
-    }
-    .tx-start:nth-of-type(1),
-    .tx-middle:nth-of-type(1),
-    .tx-end:nth-of-type(1) {
-      padding: 0;
-      text-align: right;
-      span {
-        background: #d79a3f;
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        display: block;
-      }
-      i {
-        margin: 0 auto;
-        display: block;
-        width: 1px;
-        background: #d79a3f;
-      }
-      .start-line {
-        position: absolute;
-        bottom: 0;
-        width: 5px;
-        span {
-          margin: 0 auto;
-        }
-        i {
-          height: 27.5px;
-        }
-      }
-      .middle-line {
-        width: 5px;
-        span {
-          position: absolute;
-          top: 45%;
-        }
-        i {
-          height: 67px;
-        }
-      }
-      .end-line {
-        position: absolute;
-        top: 0;
-        width: 5px;
-        span {
-          margin: 0 auto;
-        }
-        i {
-          height: 27.5px;
-        }
-      }
     }
+
     .group-title {
       margin: 15px 0 9px 20px;
       font-size: 14px;
@@ -278,7 +263,4 @@ export default Vue.extend({
 .el-table td {
   border: 0;
 }
-.el-table th:nth-of-type(2) .cell {
-  padding-left: 30px;
-}
 </style>

src/mixin/blockDetail.ts

@@ -125,9 +125,10 @@ export default Vue.extend({
     },
     // 交易组模块
     groupCellName(val: any) {
+      return "tx-start";
       switch (val.row.tradeG) {
         case 0:
-          break;
+          return "";
         case 1:
           return "tx-middle";
         case 2:
@@ -135,7 +136,7 @@ export default Vue.extend({
         case 3:
           return "tx-end";
         default:
-          break;
+          return "";
       }
     },
     pageChange(page: number) {

src/views/pc/blockDetail/index.vue

@@ -11,6 +11,7 @@
       :data="overview"
       :init="init"
       :loading="loadingOverview"
+      :loadingRelativeBlockHeight="loadingRelativeNumber"
     ></block-overview>
     <TabList
       :tabList="tabList"