You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.6 KiB
134 lines
3.6 KiB
<template>
|
|
<div class="z-10 sticky top-0 desktop:w-[1440px] desktop:h-[535.5px] desktop:pt-[70px] mobile:w-full mobile:h-[219px] mobile:pt-[25px]" style="top:0px;">
|
|
<div class="flex flex-1 justify-center items-center">
|
|
<img
|
|
:src="iconList.label"
|
|
class="desktop:w-[70px] desktop:h-[40px] mobile:w-[40px] mobile:h-[24px]"
|
|
/>
|
|
<span
|
|
class="desktop:text-[50px] mobile:text-[24px] font-semibold text-white ml-[16px]"
|
|
>MetaForce Scan</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="flex flex-1 flex-col w-full justify-center items-center desktop:mt-[68px] mobile:mt-[32px]"
|
|
>
|
|
<div class="flex flex-1 w-full desktop:px-[282px] mobile:px-[20px]">
|
|
<el-input
|
|
v-model="input"
|
|
class="bg-black desktop:h-[65px] desktop:pl-[33px] mobile:h-[40px] mobile:pl-[15.69px] mobile:text-[12px] desktop:rounded-t-[32.5px] overflow-hidden hp-input-wrapper mobile:rounded-t-[20px]"
|
|
:class="
|
|
isActive && data.length > 0
|
|
? ''
|
|
: 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px]'
|
|
"
|
|
placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
|
|
:prefix-icon="Search"
|
|
:input-style="{ background: '#262626' }"
|
|
@focus="handleFocus"
|
|
@blur="handleBlur"
|
|
@input="handleChangeInput"
|
|
@keydown="handleEnter"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="h-[78px] w-full desktop:px-[282px] mobile:px-[20px] z-[9]"
|
|
:class="isActive && data.length > 0 ? '' : 'hidden'"
|
|
>
|
|
<div
|
|
class="bg-black-262626 desktop:px-[32px] desktop:py-[20px] mobile:px-[20px] mobile:py-[10px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer break-all"
|
|
v-for="(item, index) in data"
|
|
:key="index + item?.hash"
|
|
:class="
|
|
index === data.length - 1
|
|
? 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px] border-b-[0px]'
|
|
: 'border-b-[1px]'
|
|
"
|
|
@click="handleClick(item)"
|
|
>
|
|
<span class="text-blue-65B5FF mobile:text-[14px]">{{
|
|
item?.info || '-'
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import { getSearch } from '@src/api/BlockController'
|
|
import { Throttle } from '@src/utils/throttle'
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import * as iconList from '../assets/Icons/index'
|
|
|
|
const router = useRouter()
|
|
|
|
let input = ref<string>('')
|
|
let isActive = ref(false)
|
|
// let isBg = ref(false)
|
|
const data = ref<any>([])
|
|
|
|
const handleFocus = () => (isActive.value = true)
|
|
const handleBlur = () =>
|
|
setTimeout(() => {
|
|
isActive.value = false
|
|
}, 150)
|
|
// 按下了enter / 失去焦点
|
|
const handleEnter = (e: any) => {
|
|
if (e.keyCode === 13 && data.value.length != 0) {
|
|
console.log(data)
|
|
handleClick(data.value[0])
|
|
}
|
|
}
|
|
// 点击了
|
|
const handleClick = (item: any) => {
|
|
// 根据type判断需要跳转到哪个页面
|
|
let route = ''
|
|
switch (item?.type) {
|
|
case 1: {
|
|
route = 'blocks'
|
|
break
|
|
}
|
|
case 2: {
|
|
route = 'tx'
|
|
break
|
|
}
|
|
case 3: {
|
|
route = 'tokens'
|
|
break
|
|
}
|
|
case 4: {
|
|
route = 'BitcNFt'
|
|
}
|
|
}
|
|
// 跳转
|
|
if (item?.type == 4) {
|
|
router.replace(`/${route}/${item?.hash}`)
|
|
return
|
|
}
|
|
router.replace(`/${route}/${item.info}`)
|
|
}
|
|
// 修改input
|
|
const handleChangeInput = () => {
|
|
Throttle(searchRequest, 1000)()
|
|
}
|
|
// 请求的函数
|
|
const searchRequest = async () => {
|
|
try {
|
|
const res = await getSearch(input.value)
|
|
data.value = res.data
|
|
// if (data) {
|
|
// handleClick(data.value[0])
|
|
// }
|
|
} catch (error) {}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|