Browse Source

修改主页

master
fave3722 3 years ago
parent
commit
d7401b9399
  1. 2
      components.d.ts
  2. 5686
      package-lock.json
  3. 3
      package.json
  4. 8
      src/api/BlockController/getHomePageList.ts
  5. 8
      src/api/TokensController/index.ts
  6. 4
      src/api/config.ts
  7. 0
      src/api/index.ts
  8. 31
      src/api/requst.ts
  9. 2
      src/components/footer.vue
  10. 7
      src/components/table/constant.ts
  11. 11
      src/components/table/dBase/tokensDetailsRow.vue
  12. 2
      src/components/table/desktop/bkTable.vue
  13. 3
      src/components/table/desktop/tokensTable.vue
  14. 2
      src/components/table/desktop/transactTable.vue
  15. 2
      src/components/table/mBase/mobileCard.vue
  16. 35
      src/components/table/mBase/tokensCard.vue
  17. 86
      src/components/table/mBase/tokensDetailsRow.vue
  18. 2
      src/components/table/mBase/transactCard.vue
  19. 98
      src/components/table/mobile/tokensDetails.vue
  20. 101
      src/components/table/mobile/tokensTable.vue
  21. 9
      src/components/table/mobile/transactDetails.vue
  22. 9
      src/components/table/tool.ts
  23. 29
      src/main.ts
  24. 24
      src/pages/BitcNFt/cards.vue
  25. 87
      src/pages/HomePage/index.vue
  26. 23
      src/pages/TableBlock/Tabs.vue
  27. 59
      src/pages/TableBlock/Tokens/details.vue
  28. 4
      src/pages/TableBlock/Tokens/index.vue
  29. 31
      src/pages/TableBlock/index.vue
  30. 20
      src/pages/VNFT/centerContent.vue
  31. 46
      src/pages/VNFT/mobileRow.vue
  32. 41
      src/routes.ts
  33. 9
      vite.config.ts
  34. 51
      yarn.lock

2
components.d.ts

@ -28,7 +28,9 @@ declare module '@vue/runtime-core' {
NowrapRow: typeof import('./src/components/table/mBase/nowrapRow.vue')['default'] NowrapRow: typeof import('./src/components/table/mBase/nowrapRow.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
Tabs: typeof import('./src/components/tabs.vue')['default']
THeader: typeof import('./src/components/table/dBase/tHeader.vue')['default'] THeader: typeof import('./src/components/table/dBase/tHeader.vue')['default']
TokensCard: typeof import('./src/components/table/mBase/tokensCard.vue')['default']
TokensDetails: typeof import('./src/components/table/desktop/tokensDetails.vue')['default'] TokensDetails: typeof import('./src/components/table/desktop/tokensDetails.vue')['default']
TokensDetailsRow: typeof import('./src/components/table/dBase/tokensDetailsRow.vue')['default'] TokensDetailsRow: typeof import('./src/components/table/dBase/tokensDetailsRow.vue')['default']
TokensTable: typeof import('./src/components/table/desktop/tokensTable.vue')['default'] TokensTable: typeof import('./src/components/table/desktop/tokensTable.vue')['default']

5686
package-lock.json

File diff suppressed because it is too large

3
package.json

@ -4,11 +4,12 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --host",
"build": "vue-tsc --noEmit && vite build", "build": "vue-tsc --noEmit && vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2",
"element-plus": "^2.2.14", "element-plus": "^2.2.14",
"qrcode": "^1.5.1", "qrcode": "^1.5.1",
"vue": "^3.2.37", "vue": "^3.2.37",

8
src/api/BlockController/getHomePageList.ts

@ -0,0 +1,8 @@
import { requestService } from '../requst'
export const getHomePageList = () => {
return requestService({
url: '/api/block/getHomePageList',
method: 'get',
})
}

8
src/api/TokensController/index.ts

@ -0,0 +1,8 @@
import { requestService } from '../requst'
export const getFindTokenList = () => {
return requestService({
url: '/api/token/findTokenList',
method: 'get',
})
}

4
src/api/config.ts

@ -0,0 +1,4 @@
export const baseConfig = {
baseURL: 'http://wallet-chaindata-api.weirui0755.com',
requestTimeout: 10000,
}

0
src/api/index.ts

31
src/api/requst.ts

@ -0,0 +1,31 @@
import axios from 'axios'
import { baseConfig } from './config'
// 创建axios实例
export function requestService(config: any) {
const service = axios.create({
baseURL: baseConfig.baseURL,
timeout: baseConfig.requestTimeout,
})
// request拦截器
service.interceptors.request.use(
(config) => {
return config
},
(error) => {
console.log(error)
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(res) => {
return res.data
},
(error) => {
return Promise.reject(error)
}
)
return service(config)
}

2
src/components/footer.vue

@ -36,7 +36,7 @@
<p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')"> <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">
View Blocks View Blocks
</p> </p>
<p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')"> <p class="pb-[22px] cursor-pointer" @click="jumpRoute('transact')">
View Txs View Txs
</p> </p>
</div> </div>

7
src/components/table/constant.ts

@ -169,6 +169,13 @@ export const tokensTableCollocate = {
// 数据颜色 // 数据颜色
colorSequence: ['', 'text-blue-65B5FF', 'text-blue-65B5FF', '', ''], colorSequence: ['', 'text-blue-65B5FF', 'text-blue-65B5FF', '', ''],
} }
// tokensTable 表配置
export const tokensMobileCollocate = {
labels: ['Token', 'Adress', 'Total Supply', 'Holders Count'], // 表头
sequence: ['token', 'adress', 'totalSupply', 'holdersCount'], // 对应数据的变量名称
// 数据颜色
colorSequence: ['text-blue-65B5FF', 'text-blue-65B5FF', '', ''],
}
// detailsbkTable表配置 // detailsbkTable表配置
export const tokensDetailsCollocate = { export const tokensDetailsCollocate = {
labels: [ labels: [

11
src/components/table/dBase/tokensDetailsRow.vue

@ -1,8 +1,5 @@
<template> <template>
<div <div class="flex flex-row py-[16px]" :class="valueColor ? 'py-[10px]' : ''">
class="flex desktop:flex-row desktop:py-[16px] mobile:flex-col mobile:items-start mobile:py-[18px]"
:class="valueColor ? 'desktop:py-[10px]' : ''"
>
<div class="flex flex-1 flex-row max-w-[255px] items-center"> <div class="flex flex-1 flex-row max-w-[255px] items-center">
<Icons url="info" :size="14" /> <Icons url="info" :size="14" />
<p class="ml-[7px] text-gray-BBB text-[14px] font-normal"> <p class="ml-[7px] text-gray-BBB text-[14px] font-normal">
@ -10,7 +7,7 @@
</p> </p>
</div> </div>
<div <div
class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px] tokens-select" class="flex flex-1 flex-row justify-start items-center tokens-select"
v-if="title === 'Tokens'" v-if="title === 'Tokens'"
> >
<el-select v-model="active" placeholder="Select"> <el-select v-model="active" placeholder="Select">
@ -24,7 +21,7 @@
</el-select> </el-select>
</div> </div>
<div <div
class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px] text-white" class="flex flex-1 flex-row justify-start items-center text-white"
v-else v-else
> >
<p <p
@ -40,7 +37,7 @@
</div> </div>
</div> </div>
<div <div
:class="isLast ? 'desktop:hidden' : ''" :class="isLast ? 'hidden' : ''"
style="border-bottom: 1px solid #3b3b3c" style="border-bottom: 1px solid #3b3b3c"
/> />
</template> </template>

2
src/components/table/desktop/bkTable.vue

@ -61,7 +61,7 @@ const handleCurrentChange = (page: number) => {
currentData.value = paginationState.totalData[page - 1] currentData.value = paginationState.totalData[page - 1]
} }
// //
const routerLink = (id: string | number) => router.push(`/TableBlock/${id}`) const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
</script> </script>
<style lang="scss"> <style lang="scss">

3
src/components/table/desktop/tokensTable.vue

@ -76,8 +76,7 @@ const handleCurrentChange = (page: number) => {
currentData.value = paginationState.totalData[page - 1] currentData.value = paginationState.totalData[page - 1]
} }
// //
const routerLink = (id: string | number) => const routerLink = (id: string | number) => router.push(`/tokens/${id}`)
router.push(`/TableBlock/tokens/${id}`)
</script> </script>
<style lang="scss"> <style lang="scss">

2
src/components/table/desktop/transactTable.vue

@ -61,7 +61,7 @@ const handleCurrentChange = (page: number) => {
currentData.value = paginationState.totalData[page - 1] currentData.value = paginationState.totalData[page - 1]
} }
// //
const routerLink = (id: string | number) => router.push(`/TableBlock/tx/${id}`) const routerLink = (id: string | number) => router.push(`/tx/${id}`)
</script> </script>
<style lang="scss"> <style lang="scss">

2
src/components/table/mBase/mobileCard.vue

@ -29,7 +29,7 @@ const props = defineProps({
}) })
const invariable = { ...bkTableCollocate } const invariable = { ...bkTableCollocate }
// //
const routerLink = (id: string | number) => router.push(`/TableBlock/${id}`) const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

35
src/components/table/mBase/tokensCard.vue

@ -0,0 +1,35 @@
<template>
<div>
<div
class="flex flex-1 flex-wrap mobile-card pt-[14px] border-b-[1px] border-b-black-3B3B3C"
>
<div
class="flex flex-half min-w-6/12"
v-for="(item, index) in invariable.labels"
:key="index"
@click="routerLink(cardData.block)"
>
<nowrap-row
:title="item"
:value="cardData[invariable.sequence[index]]"
:value-color="invariable.colorSequence[index]"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import router from '@src/routes'
import { defineProps } from 'vue'
import { tokensMobileCollocate } from '../constant'
import nowrapRow from './nowrapRow.vue'
const props = defineProps({
cardData: Object as any,
})
const invariable = { ...tokensMobileCollocate }
//
const routerLink = (id: string | number) => router.push(`/tokens/${id}`)
</script>
<style lang="scss" scoped></style>

86
src/components/table/mBase/tokensDetailsRow.vue

@ -0,0 +1,86 @@
<template>
<div
class="flex flex-col items-start py-[18px]"
:class="valueColor ? 'desktop:py-[10px]' : ''"
>
<div class="flex flex-1 flex-row max-w-[255px] items-center">
<Icons url="info" :size="14" />
<p class="ml-[7px] text-gray-BBB text-[14px] font-normal">
{{ title }}
</p>
</div>
<div
class="flex flex-1 flex-row justify-start items-center mt-[15px] tokens-select"
v-if="title === 'Tokens'"
>
<el-select v-model="active" placeholder="Select">
<el-option
v-for="(item, index) in [1, 2, 3, 4]"
:key="index"
:label="item + 'token'"
:value="item"
class="text-white"
/>
</el-select>
</div>
<div
class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
v-else
>
<p
:class="
valueColor
? 'py-[6px] px-[12px] bg-black-006 rounded-[4px] text-blue-65B5FF'
: ''
"
class="text-[15px] font-normal leading-[24px]"
>
{{ value }}
</p>
</div>
</div>
<div
:class="isLast ? 'desktop:hidden' : ''"
style="border-bottom: 1px solid #3b3b3c"
/>
</template>
<script setup lang="ts">
import { ElSelect, ElOption } from 'element-plus'
import Icons from '@src/components/icons/index.vue'
import { onMounted, ref } from 'vue'
const props = defineProps({
title: String,
value: [String, Array] as any,
valueColor: String,
isCopy: Boolean,
isLast: Boolean,
})
onMounted(() => {
console.log(props.title)
if (props.title === 'Tokens') {
list.value = props.value
}
})
const list = ref<string | number[]>([])
const active = ref('1token')
</script>
<style lang="scss">
.tokens-select {
.el-input__wrapper {
background: #19191a;
.el-input__inner {
color: #fff;
}
}
.el-select .el-input.is-focus .el-input__wrapper {
box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
}
.el-select .el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
}
}
</style>

2
src/components/table/mBase/transactCard.vue

@ -31,7 +31,7 @@ const props = defineProps({
}) })
const invariable = { ...transactTableCollocate } const invariable = { ...transactTableCollocate }
// //
const routerLink = (id: string | number) => router.push(`/TableBlock/tx/${id}`) const routerLink = (id: string | number) => router.push(`/tx/${id}`)
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

98
src/components/table/mobile/tokensDetails.vue

@ -0,0 +1,98 @@
<template>
<div
class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[20px] pt-[12px] pb-[18px]"
>
<!-- <upper-lower-switch :current="'Transaction Details'" /> -->
<div
class="flex flex-col justify-between pt-[20px] pb-[18px] border-b-[1px] border-black-3B3B3C break-all"
>
<p class="underline text-blue-65B5FF">{{ data?.tokens }}</p>
<div class="flex flex-row justify-end mt-[12px]">
<Icons :url="'copyAddress'" :size="32" />
<div @click="open">
<Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
</div>
</div>
</div>
<tokens-details-row
v-for="(item, index) in invariable.labels"
:key="index + item"
:title="item"
:value="data[invariable.sequence[index]]"
:value-color="invariable.colorSequence[index]"
/>
</div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import Qrcode from 'qrcode'
import tokensDetailsRow from '../mBase/tokensDetailsRow.vue'
import { tokensDetailsCollocate } from '../constant'
import Icons from '@src/components/icons/index.vue'
const props = defineProps({
id: Array as any,
})
onMounted(() => {
setTimeout(() => {
data.value = {
balance: '123321',
tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
transactions: '123321',
transfers: '123321',
gasUsed: '123321',
lastBalanceUpdate: '123321',
}
}, 0)
})
const data = ref<any>({
balance: '123321',
tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
transactions: '123321',
transfers: '123321',
gasUsed: '123321',
lastBalanceUpdate: '123321',
})
const invariable = {
...tokensDetailsCollocate,
}
let open = async () => {
const res = await Qrcode.toDataURL('https://baidu.com' as string)
//
ElMessageBox.alert(`<img src="${res}" class="w-full" />`, {
showClose: false,
closeOnClickModal: true,
dangerouslyUseHTMLString: true,
confirmButtonText: 'close',
confirmButtonClass: 'text-white btn_modal',
customClass: 'mobile-modal-wrap',
})
}
</script>
<style lang="scss">
.mobile-modal-wrap {
background: #2e2e31 !important;
border-radius: 28px !important;
border: none !important;
padding: 0px 85px 32px !important;
max-width: 100% !important;
.el-message-box__btns {
display: flex;
justify-content: center;
align-items: center;
padding-top: 32px;
.btn_modal {
padding: 10px 28px 10px;
background: #8659ff;
border-radius: 8px;
border: none !important;
&:focus-visible {
outline: none;
}
}
}
}
</style>

101
src/components/table/mobile/tokensTable.vue

@ -0,0 +1,101 @@
<template>
<div class="rounded-[10px] bg-black-19191A pb-[20px] rounded-b-[10px]">
<div class="flex flex-1 px-[20px] pt-[20px]">
<el-input
v-model="input"
class="bg-black-006 h-[40px] pl-[16px] text-[12px] rounded-[8px] overflow-hidden hp-input-wrapper border-[1px] border-gray-555"
placeholder="Token name or symbol"
:prefix-icon="Search"
:input-style="{ background: '#262626' }"
/>
</div>
<tokens-card
v-for="(item, index) in currentData"
:key="index"
:card-data="item"
/>
<div
class="bk-pagination flex flex-row items-center justify-center pt-[32px]"
>
<el-pagination
:page-size="invariable.pageSize"
layout="prev, pager, next"
v-model:current-page="currentPage"
:total="paginationState.totalPage"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import TokensCard from '../mBase/tokensCard.vue'
import { dimensionalUpgrade } from '../tool'
const props = defineProps({
data: Array as any,
})
const invariable = {
pageSize: 5, //
}
const paginationState = reactive({
totalPage:
Math.floor(props?.data.length / invariable.pageSize + 1) *
invariable.pageSize, //
totalData: dimensionalUpgrade(props?.data, invariable.pageSize), //
})
let currentPage = ref(1) //
let currentData = ref(paginationState.totalData[currentPage.value - 1]) //
let input = ref('')
const handleCurrentChange = (page: number) => {
currentData.value = paginationState.totalData[page - 1]
}
</script>
<style lang="scss">
.bk-pagination {
.el-pagination {
.btn-prev,
.btn-next {
background: #19191a;
}
.el-pager {
.number,
.btn-quicknext {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
margin: 0px 8px;
box-sizing: border-box;
background: #19191a;
border: 1px solid #ffffff;
border-radius: 5px;
color: #ffffff;
}
.is-active {
background: #8659ff;
border: 1px solid #8659ff;
}
}
.el-pagination__jump {
color: #ffffff;
}
.el-input__wrapper {
background: #19191a;
.el-input__inner {
color: #ffffff;
}
}
.el-input__wrapper.is-focus {
box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
inset;
}
}
}
</style>

9
src/components/table/mobile/transactDetails.vue

@ -4,22 +4,21 @@
> >
<upper-lower-switch :current="'Transaction Details'" /> <upper-lower-switch :current="'Transaction Details'" />
<transact-details-row <tokens-details-row
v-for="(item, index) in invariable.labels" v-for="(item, index) in invariable.labels"
:key="index + item" :key="index + item"
:title="item" :title="item"
:value="data[invariable.sequence[index]]" :value="data[invariable.sequence[index]]"
:value-color="invariable.colorSequence[index]" :value-color="invariable.colorSequence[index]"
:is-copy="invariable.isCopys[index]"
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue' import { defineProps, onMounted, ref } from 'vue'
import transactDetailsRow from '../mBase/transactDetailsRow.vue' import TokensDetailsRow from '../mBase/tokensDetailsRow.vue'
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue' import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
import { transactDetailsCollocate } from '../constant' import { tokensDetailsCollocate } from '../constant'
const props = defineProps({ const props = defineProps({
id: Array as any, id: Array as any,
@ -63,7 +62,7 @@ const data = ref<any>({
gasLimit: '1323', gasLimit: '1323',
}) })
const invariable = { const invariable = {
...transactDetailsCollocate, ...tokensDetailsCollocate,
} }
</script> </script>

9
src/components/table/tool.ts

@ -3,3 +3,12 @@ export const dimensionalUpgrade = (arr: any[], includeIndex: number) => {
return i % includeIndex === 0 ? [...p, [c]] : (p[p.length - 1].push(c), p) return i % includeIndex === 0 ? [...p, [c]] : (p[p.length - 1].push(c), p)
}, []) }, [])
} }
/**
* 1.
* 2.?
* 3.
* 4. /
* 5. / / / / /
* 6.
* 7.
*/

29
src/main.ts

@ -7,3 +7,32 @@ import 'element-plus/dist/index.css'
import App from './App.vue' import App from './App.vue'
createApp(App).use(router).use(ElementPlus).mount('#app') createApp(App).use(router).use(ElementPlus).mount('#app')
/**
* <el-tabs v-model="active" class="w-full">
<el-tab-pane label="Transactions" name="transactions">
<div class="flex flex-1 justify-center items-center h-[210px]">
<p class="text-white text-[14px] font-normal opacity-80">
There are no transactions for this Transactions.
</p>
</div>
</el-tab-pane>
<!-- -->
<el-tab-pane label="Token Transfers" name="tokenTransfers">
<div class="flex flex-1 justify-center items-center h-[210px]">
<p class="text-white text-[14px] font-normal opacity-80">
There are no transactions for this Token Transfers.
</p>
</div>
</el-tab-pane>
<el-tab-pane
label="Internal transactions"
name="internalTransactions"
>
<div class="flex flex-1 justify-center items-center h-[210px]">
<p class="text-white text-[14px] font-normal opacity-80">
There are no transactions for this block.
</p>
</div>
</el-tab-pane>
</el-tabs>
*/

24
src/pages/BitcNFt/cards.vue

@ -1,25 +1,29 @@
<template> <template>
<div class="flex flex-row"> <div class="flex desktop:flex-row mobile:flex-col">
<div <div
class="flex flex-col px-[34px] py-[24px] bg-black-19191A rounded-[10px] w-[698px]" class="flex flex-col desktop:px-[34px] desktop:py-[24px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:w-[698px] mobile:w-full"
> >
<p class="text-white text-[26px] font-medium">{{ title }}</p> <p class="text-white desktop:text-[26px] mobile:text-[18px] font-medium">
{{ title }}
</p>
<div <div
class="flex flex-1 flex-row justify-between items-center pt-[20px] pb-[28px] border-b border-black-3B3B3C" class="flex flex-1 desktop:flex-row mobile:flex-col desktop:justify-between desktop:items-center pt-[20px] pb-[28px] border-b border-black-3B3B3C break-all"
> >
<p class="text-white">{{ value }}</p> <p class="text-white mobile:text-[16px] font-medium">{{ value }}</p>
<div class="flex flex-row"> <div class="flex flex-row mobile:justify-end mobile:mt-[12px]">
<Icons :url="'copyAddress'" :size="32" /> <Icons :url="'copyAddress'" :size="32" />
<div @click="open"> <div @click="open">
<Icons :url="'qrCode'" :size="32" class="ml-[16px]" /> <Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-1 flex-row py-[24px] border-b border-black-3B3B3C"> <div
class="flex flex-1 desktop:flex-row mobile:flex-col desktop:py-[24px] mobile:py-[18px] border-b border-black-3B3B3C"
>
<p <p
v-for="(item, index) in options" v-for="(item, index) in options"
class="text-white text-[15px]" class="text-white text-[15px]"
:class="index == 0 ? '' : 'ml-[72px]'" :class="index == 0 ? '' : 'desktop:ml-[72px] mobile:mt-[18px]'"
> >
{{ `${item?.value} ${item?.key}` }} {{ `${item?.value} ${item?.key}` }}
</p> </p>
@ -30,7 +34,7 @@
</div> </div>
</div> </div>
<div <div
class="w-[462px] h-[282px] mack-bg ml-[40px]" class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] mack-bg desktop:ml-[40px] mobile: mt-[36px]"
:class="url ? 'hidden' : ''" :class="url ? 'hidden' : ''"
> >
<div <div
@ -43,7 +47,7 @@
</div> </div>
</div> </div>
<div <div
class="w-[462px] h-[282px] py-[42px] px-[39px] bg-black-19191A rounded-[10px] ml-[40px]" class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] desktop:py-[42px] desktop:px-[39px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:ml-[40px] mobile: mt-[36px]"
:class="url ? '' : 'hidden'" :class="url ? '' : 'hidden'"
> >
<img class="w-full h-full" :src="url" /> <img class="w-full h-full" :src="url" />

87
src/pages/HomePage/index.vue

@ -50,7 +50,7 @@
> >
<p class="text-gray-969697 text-[15px]">{{ item.label }}</p> <p class="text-gray-969697 text-[15px]">{{ item.label }}</p>
<p class="text-[36px] text-white font-semibold mt-[12px]"> <p class="text-[36px] text-white font-semibold mt-[12px]">
{{ item.value }} {{ item.value || '-' }}
</p> </p>
</div> </div>
</div> </div>
@ -66,7 +66,7 @@
</p> </p>
<div <div
class="flex flex-row justify-center items-center bg-black-19191A rounded-full desktop:py-[8px] desktop:px-[14px] mobile:py-[6px] mobile:px-[15px] cursor-pointer" class="flex flex-row justify-center items-center bg-black-19191A rounded-full desktop:py-[8px] desktop:px-[14px] mobile:py-[6px] mobile:px-[15px] cursor-pointer"
@click="jumpRoute('TableBlock')" @click="jumpRoute('blocks')"
> >
<p <p
class="text-white font-medium desktop:text-[14px] mobile:text-[12px]" class="text-white font-medium desktop:text-[14px] mobile:text-[12px]"
@ -101,27 +101,10 @@ import hpCard from '@src/components/base/hp_card.vue'
import * as iconList from '../../assets/Icons/index' import * as iconList from '../../assets/Icons/index'
import router from '@src/routes' import router from '@src/routes'
import HpTable from '@src/components/table/desktop/hpTable.vue' import HpTable from '@src/components/table/desktop/hpTable.vue'
import { ref } from 'vue' import { onUnmounted, reactive, ref, watchEffect } from 'vue'
import { getHomePageList } from '@src/api/BlockController/getHomePageList'
import { getFindTokenList } from '@src/api/TokensController'
//
const overview = [
{
label: 'Block',
value: '5880',
},
{
label: 'Transaction',
value: '5880',
},
{
label: 'Block Time',
value: '5880',
},
{
label: 'Tokens',
value: '5880',
},
]
// //
const tableData = [ const tableData = [
{ {
@ -139,8 +122,68 @@ const tableData = [
fee: '0.0000021', fee: '0.0000021',
}, },
] ]
//
const overview = reactive([
{
label: 'Block',
value: '',
},
{
label: 'Transaction',
value: '',
},
{
label: 'Block Time',
value: '',
},
{
label: 'Tokens',
value: '',
},
])
const input = ref() const input = ref()
let ws = ref<WebSocket>()
const initRequist = async () => {
//
const res = await getHomePageList()
overview[1].value = res.data.totalTransactions
overview[2].value = res.data.averageBlockTime
// tokens
const tokenRes = await getFindTokenList()
overview[3].value = tokenRes.data.total
}
const initWebSocket = () => {
ws.value = new WebSocket('wss://apiasia.mbc.network/websocket')
ws.value.addEventListener('open', () => {
ws.value?.send(JSON.stringify({ type: 'add_block' }))
})
ws.value.onmessage = (e: any) => {
try {
const res = JSON.parse(e.data)
overview[0].value = res.value[0].number
} catch (error) {}
}
ws.value.onclose = () => {
console.log('ws 已关闭')
}
}
const jumpRoute = (route: string) => router.push(route) const jumpRoute = (route: string) => router.push(route)
watchEffect(() => {
initRequist()
initWebSocket()
})
onUnmounted(() => {
ws.value?.close()
})
</script> </script>
<style lang="sass"> <style lang="sass">

23
src/pages/TableBlock/Tabs.vue

@ -2,14 +2,14 @@
<div <div
class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]" class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
> >
<el-tabs v-model="active" class="demo-tabs" @tab-click="handleClick"> <el-tabs v-model="active" class="demo-tabs" @tab-change="handleClick">
<el-tab-pane label="Block" name="Block"> <el-tab-pane label="Block" name="/blocks">
<Block /> <Block />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Transactions" name="Transactions"> <el-tab-pane label="Transactions" name="/tx">
<Transactions /> <Transactions />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Tokens" name="Tokens"> <el-tab-pane label="Tokens" name="/tokens">
<Tokens /> <Tokens />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -17,13 +17,22 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, watchEffect } from 'vue'
import Block from './Block/index.vue' import Block from './Block/index.vue'
import Transactions from './Transactions/index.vue' import Transactions from './Transactions/index.vue'
import Tokens from './Tokens/index.vue' import Tokens from './Tokens/index.vue'
import { useRoute, useRouter } from 'vue-router'
const active = ref('Block') const active = ref('')
const handleClick = () => {} const route = useRoute()
const router = useRouter()
watchEffect(() => {
active.value = route.path
})
const handleClick = (tabs: string) => {
router.replace(tabs)
console.log(tabs)
}
</script> </script>
<style lang="scss"> <style lang="scss">

59
src/pages/TableBlock/Tokens/details.vue

@ -19,40 +19,61 @@
<token-details /> <token-details />
</div> </div>
<div class="desktop:hidden mt-[38px]"> <div class="desktop:hidden mt-[38px]">
<bk-mobile-details /> <token-mobile-details />
</div> </div>
<!-- 下面的选项 --> <!-- 下面的选项 -->
<div <div
class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden" class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
> >
<div class="details-tabs w-full"> <div class="details-tabs w-full">
<el-tabs v-model="active" class="w-full"> <div class="flex flex-1 flex-row mobile:overflow-scroll">
<el-tab-pane label="Transactions" name="transactions"> <p
class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
:class="active === 'transactions' ? 'details-tabs-active' : ''"
@click="changeTabs('transactions')"
>
<span>Transactions</span>
</p>
<p
class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
:class="active === 'tokenTransfers' ? 'details-tabs-active' : ''"
@click="changeTabs('tokenTransfers')"
>
Token&nbsp;Transfers
</p>
<p
class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
:class="
active === 'internalTransactions' ? 'details-tabs-active' : ''
"
@click="changeTabs('internalTransactions')"
>
Internal&nbsp;transactions
</p>
</div>
<div>
<div :class="active === 'transactions' ? 'flex' : 'hidden'">
<div class="flex flex-1 justify-center items-center h-[210px]"> <div class="flex flex-1 justify-center items-center h-[210px]">
<p class="text-white text-[14px] font-normal opacity-80"> <p class="text-white text-[14px] font-normal opacity-80">
There are no transactions for this Transactions. There are no transactions for this Transactions.
</p> </p>
</div> </div>
</el-tab-pane> </div>
<!-- 待扩展 --> <div :class="active === 'tokenTransfers' ? 'flex' : 'hidden'">
<el-tab-pane label="Token Transfers" name="tokenTransfers">
<div class="flex flex-1 justify-center items-center h-[210px]"> <div class="flex flex-1 justify-center items-center h-[210px]">
<p class="text-white text-[14px] font-normal opacity-80"> <p class="text-white text-[14px] font-normal opacity-80">
There are no transactions for this Token Transfers. There are no transactions for this Token Transfers.
</p> </p>
</div> </div>
</el-tab-pane> </div>
<el-tab-pane <div :class="active === 'internalTransactions' ? 'flex' : 'hidden'">
label="Internal transactions"
name="internalTransactions"
>
<div class="flex flex-1 justify-center items-center h-[210px]"> <div class="flex flex-1 justify-center items-center h-[210px]">
<p class="text-white text-[14px] font-normal opacity-80"> <p class="text-white text-[14px] font-normal opacity-80">
There are no transactions for this block. There are no transactions for this block.
</p> </p>
</div> </div>
</el-tab-pane> </div>
</el-tabs> </div>
</div> </div>
</div> </div>
</div> </div>
@ -61,7 +82,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue' import { ArrowLeftBold } from '@element-plus/icons-vue'
import TokenDetails from '@src/components/table/desktop/tokensDetails.vue' import TokenDetails from '@src/components/table/desktop/tokensDetails.vue'
import BkMobileDetails from '@src/components/table/mobile/bkTableDetails.vue' import TokenMobileDetails from '@src/components/table/mobile/tokensDetails.vue'
import router from '@src/routes' import router from '@src/routes'
import { ref } from 'vue' import { ref } from 'vue'
@ -70,8 +91,18 @@ const active = ref('internalTransactions')
// 退 // 退
const goBack = () => router.back() const goBack = () => router.back()
// tabs
const changeTabs = (current: string) => {
active.value = current
}
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../index.scss'; @import '../index.scss';
.details-tabs {
.details-tabs-active {
background: #5834b6;
color: #ffffff;
}
}
</style> </style>

4
src/pages/TableBlock/Tokens/index.vue

@ -4,14 +4,14 @@
<desktop-tokens-table :data="tableData" /> <desktop-tokens-table :data="tableData" />
</div> </div>
<div class="desktop:hidden"> <div class="desktop:hidden">
<mobile-transact-table :data="tableData" /> <mobile-tokens-table :data="tableData" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue' import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue'
import MobileTransactTable from '@src/components/table/mobile/transactTable.vue' import MobileTokensTable from '@src/components/table/mobile/tokensTable.vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
const tableData = ref<any[]>([ const tableData = ref<any[]>([

31
src/pages/TableBlock/index.vue

@ -53,36 +53,13 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from '@vue/runtime-core' import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import Block from './Block/index.vue'
import Transactions from './Transactions/index.vue'
import Tokens from './Tokens/index.vue'
import type { TabsPaneContext } from 'element-plus'
import * as iconList from '../../assets/Icons/index' import * as iconList from '../../assets/Icons/index'
export default defineComponent({ const url = iconList.label
components: { let input = ref('')
Search,
Block,
Transactions,
Tokens,
},
setup() {
return {
Search: Search,
url: iconList.label,
input: '',
active: 'Block', // tab
}
},
methods: {
handleClick(tab: TabsPaneContext, event: Event) {
console.log('tab', tab)
},
},
})
</script> </script>
<style lang="scss"> <style lang="scss">

20
src/pages/VNFT/centerContent.vue

@ -15,12 +15,14 @@
<div class="details-tabs w-full"> <div class="details-tabs w-full">
<el-tabs v-model="active" class="w-full"> <el-tabs v-model="active" class="w-full">
<el-tab-pane label="Token Transfers" name="tokenTransfers"> <el-tab-pane label="Token Transfers" name="tokenTransfers">
<div class="flex flex-1 flex-col pt-[36px] px-[34px]"> <div
class="flex flex-1 flex-col desktop:pt-[36px] desktop:px-[34px] mobile:px-[20px] mobile:pt-[24px]"
>
<p class="text-white text-[22px] font-semibold"> <p class="text-white text-[22px] font-semibold">
Token Transfers Token Transfers
</p> </p>
<div <div
class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px]" class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px] mobile:hidden"
> >
<transfers-row <transfers-row
v-for="(item, index) in tokenTransfers" v-for="(item, index) in tokenTransfers"
@ -32,6 +34,19 @@
:state="item.state" :state="item.state"
/> />
</div> </div>
<div
class="desktop:hidden px-[20px] mt-[10px] bg-black-2B2B2C rounded-[10px]"
>
<mobile-row
v-for="(item, index) in tokenTransfers"
:key="index + item.title"
:title="item.title"
:value1="item.value1"
:value2="item.value2"
:value3="item.value3"
:state="item.state"
/>
</div>
<upper-lower-switch :current="'page1'" /> <upper-lower-switch :current="'page1'" />
</div> </div>
</el-tab-pane> </el-tab-pane>
@ -53,6 +68,7 @@
import { ref } from 'vue' import { ref } from 'vue'
import Cards from '../BitcNFt/cards.vue' import Cards from '../BitcNFt/cards.vue'
import transfersRow from './transfersRow.vue' import transfersRow from './transfersRow.vue'
import mobileRow from './mobileRow.vue'
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue' import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
const active = ref('tokenTransfers') const active = ref('tokenTransfers')
const value = '4' const value = '4'

46
src/pages/VNFT/mobileRow.vue

@ -0,0 +1,46 @@
<template>
<div
class="flex flex-1 flex-col justify-between items-center py-[20px] border-b border-b-black-3B3B3C"
>
<div class="flex flex-1 w-full">
<div class="flex flex-1 flex-row w-full items-center justify-between">
<p class="text-white text-[16px] font-medium">{{ title }}</p>
<div
class="flex flex-row items-center w-[87px] rounded-[4px] px-[12px] py-[4px] bg-green-2EAA7D"
:class="state === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
>
<Icons
:url="state === 'Success' ? 'check_circle' : 'cancel'"
:size="12"
/>
<p class="text-[12px] font-normal align-middle text-white ml-[2px]">
{{ state }}
</p>
</div>
</div>
</div>
<p class="text-gray-BBB text-[14px] font-normal mt-[12px] break-all">
{{ value1 }}
</p>
<div
class="text-gray-BBB text-[14px] font-normal flex flex-1 w-full flex-col mt-[12px]"
>
<p>{{ value2 }}</p>
<Icons url="chevron_right" :size="16" />
<p>{{ value3 }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import Icons from '@src/components/icons/index.vue'
defineProps({
title: String,
value1: String,
value2: String,
value3: String,
state: String,
})
</script>
<style scoped></style>

41
src/routes.ts

@ -2,7 +2,7 @@ import * as VueRouter from 'vue-router'
import HomePage from './pages/HomePage/index.vue' import HomePage from './pages/HomePage/index.vue'
import TableBlock from './pages/TableBlock/index.vue' import TableBlock from './pages/TableBlock/index.vue'
import TableBlockIndex from './pages/TableBlock/Tabs.vue' import Tabs from './pages/TableBlock/Tabs.vue'
import BlockDetails from './pages/TableBlock/Block/details.vue' import BlockDetails from './pages/TableBlock/Block/details.vue'
import transactDetails from './pages/TableBlock/Transactions/details.vue' import transactDetails from './pages/TableBlock/Transactions/details.vue'
import tokensDetails from './pages/TableBlock/Tokens/details.vue' import tokensDetails from './pages/TableBlock/Tokens/details.vue'
@ -16,24 +16,49 @@ const routes: VueRouter.RouteRecordRaw[] = [
component: HomePage, component: HomePage,
}, },
{ {
path: '/TableBlock', path: '/blocks',
component: TableBlock, component: TableBlock,
redirect: '/TableBlock/index', // Latest
redirect: '/blocks',
children: [ children: [
{ {
path: '/TableBlock/index', path: '/blocks',
component: TableBlockIndex, component: Tabs,
}, },
{ {
path: '/TableBlock/:id', path: '/blocks/:id',
component: BlockDetails, component: BlockDetails,
}, },
],
},
{
path: '/tx',
component: TableBlock,
// Latest
redirect: '/tx',
children: [
{
path: '/tx',
component: Tabs,
},
{ {
path: '/TableBlock/tx/:id', path: '/tx/:id',
component: transactDetails, component: transactDetails,
}, },
],
},
{
path: '/tokens',
component: TableBlock,
// Latest
redirect: '/tokens',
children: [
{
path: '/tokens',
component: Tabs,
},
{ {
path: '/TableBlock/tokens/:id', path: '/tokens/:id',
component: tokensDetails, component: tokensDetails,
}, },
], ],

9
vite.config.ts

@ -28,4 +28,13 @@ export default defineConfig({
}, },
}, },
}, },
server: {
proxy: {
'/api': {
target: 'http://wallet-chaindata-api.weirui0755.com/api', //实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
}) })

51
yarn.lock

@ -348,6 +348,11 @@ async-validator@^4.2.5:
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz" resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz"
integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg== integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
autoprefixer@^10.4.8: autoprefixer@^10.4.8:
version "10.4.8" version "10.4.8"
resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.8.tgz" resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.8.tgz"
@ -360,6 +365,14 @@ autoprefixer@^10.4.8:
picocolors "^1.0.0" picocolors "^1.0.0"
postcss-value-parser "^4.2.0" postcss-value-parser "^4.2.0"
axios@^0.27.2:
version "0.27.2"
resolved "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
dependencies:
follow-redirects "^1.14.9"
form-data "^4.0.0"
balanced-match@^1.0.0: balanced-match@^1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz" resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz"
@ -458,6 +471,13 @@ color-name@^1.1.4, color-name@~1.1.4:
resolved "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz" resolved "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
combined-stream@^1.0.8:
version "1.0.8"
resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
dependencies:
delayed-stream "~1.0.0"
[email protected]: [email protected]:
version "0.0.1" version "0.0.1"
resolved "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz" resolved "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
@ -495,6 +515,11 @@ defined@^1.0.0:
resolved "https://registry.npmmirror.com/defined/-/defined-1.0.0.tgz" resolved "https://registry.npmmirror.com/defined/-/defined-1.0.0.tgz"
integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ== integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
detective@^5.2.1: detective@^5.2.1:
version "5.2.1" version "5.2.1"
resolved "https://registry.npmmirror.com/detective/-/detective-5.2.1.tgz" resolved "https://registry.npmmirror.com/detective/-/detective-5.2.1.tgz"
@ -750,6 +775,20 @@ find-up@^4.1.0:
locate-path "^5.0.0" locate-path "^5.0.0"
path-exists "^4.0.0" path-exists "^4.0.0"
follow-redirects@^1.14.9:
version "1.15.1"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
fraction.js@^4.2.0: fraction.js@^4.2.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz" resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz"
@ -962,6 +1001,18 @@ micromatch@^4.0.4:
braces "^3.0.2" braces "^3.0.2"
picomatch "^2.3.1" picomatch "^2.3.1"
[email protected]:
version "1.52.0"
resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
mime-types@^2.1.12:
version "2.1.35"
resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
dependencies:
mime-db "1.52.0"
minimatch@^3.1.1: minimatch@^3.1.1:
version "3.1.2" version "3.1.2"
resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz" resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz"

Loading…
Cancel
Save