feat

src/components/table/mobile/transactDetails.vue

@@ -4,7 +4,7 @@
   >
     <transact-details-row
       v-for="(item, index) in invariable.labels"
-      :key="index + item"
+      :key="index"
       :title="item"
       :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
@@ -27,6 +27,16 @@ const invariable = {
 const currentData = ref()
 watchEffect(() => {
   currentData.value = props.data
+  if (props?.data && props.data?.receiptList.length === 0) {
+    invariable.labels = invariable.labels.filter(
+      (t) => t !== 'Tokens Transferred'
+    )
+    invariable.sequence = invariable.sequence.filter((t) => t !== 'receiptList')
+    invariable.colorSequence = invariable.colorSequence.filter(
+      (t, i) => i !== 5
+    )
+    invariable.isCopys = invariable.isCopys.filter((t, i) => i !== 5)
+  }
 })
 </script>
 

src/pages/TableBlock/Tokens/details.vue

@@ -26,7 +26,7 @@
       class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
     >
       <div class="details-tabs w-full">
-        <div class="flex flex-1 flex-row mobile:overflow-scroll">
+        <div class="flex flex-1 flex-row mobile:overflow-x-scroll">
           <p
             class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
             :class="active === 'transactions' ? 'details-tabs-active' : ''"
@@ -75,6 +75,20 @@
                 :state="item.state"
               />
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
+              v-if="transactionsData.length != 0"
+            >
+              <mobile-row
+                v-for="(item, index) in transactionsData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </div>
           <div :class="active === 'tokenTransfers' ? 'flex' : 'hidden'">
             <div
@@ -99,6 +113,20 @@
                 :state="item.state"
               />
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
+              v-if="tokensData.length != 0"
+            >
+              <mobile-row
+                v-for="(item, index) in tokensData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </div>
           <div :class="active === 'internalTransactions' ? 'flex' : 'hidden'">
             <div

src/pages/TableBlock/Transactions/details.vue

@@ -100,7 +100,7 @@ import Logs from './logs.vue'
 import DesktopTransactDetails from '@src/components/table/desktop/transactDetails.vue'
 import MobileTransactDetails from '@src/components/table/mobile/transactDetails.vue'
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getFindReceiptByTokenPage } from '@src/api/TokensController'
 import { timeConvert } from '@src/utils/string'
@@ -165,8 +165,11 @@ const requestTokens = async (address: string) => {
     }
   })
 }
-onMounted(() => {
+watchEffect(() => {
   let hash = route.path.split('/')?.[2]
+  if (hash == 'undefined') {
+    return
+  }
   requestDetails(hash)
   requestLogs(hash)
 })

src/pages/VNFT/mobileRow.vue

@@ -19,21 +19,29 @@
         </div>
       </div>
     </div>
-    <p class="text-gray-BBB text-[14px] font-normal mt-[12px] break-all">
+    <p
+      class="flex flex-1 w-full justify-start text-gray-BBB text-[14px] font-normal mt-[12px] break-all"
+      @click="handleRouter(`/tx/${value1}`)"
+    >
       {{ value1 }}
     </p>
     <div
       class="text-gray-BBB text-[14px] font-normal flex flex-1 w-full flex-col mt-[12px]"
     >
-      <p class="break-all">{{ value2 }}</p>
+      <p class="break-all" @click="handleRouter(`/tokens/${value2}`)">
+        {{ value2 }}
+      </p>
       <Icons url="chevron_right" :size="16" />
-      <p class="break-all">{{ value3 }}</p>
+      <p class="break-all" @click="handleRouter(`/tokens/${value3}`)">
+        {{ value3 }}
+      </p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
+import { useRouter } from 'vue-router'
 defineProps({
   title: String,
   value1: String,
@@ -41,6 +49,10 @@ defineProps({
   value3: String,
   state: String,
 })
+const router = useRouter()
+const handleRouter = (route: string) => {
+  router.replace(route)
+}
 </script>
 
 <style scoped></style>