34 changed files with 737 additions and 5798 deletions
File diff suppressed because it is too large
@ -0,0 +1,8 @@ |
|||
import { requestService } from '../requst' |
|||
|
|||
export const getHomePageList = () => { |
|||
return requestService({ |
|||
url: '/api/block/getHomePageList', |
|||
method: 'get', |
|||
}) |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import { requestService } from '../requst' |
|||
|
|||
export const getFindTokenList = () => { |
|||
return requestService({ |
|||
url: '/api/token/findTokenList', |
|||
method: 'get', |
|||
}) |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
export const baseConfig = { |
|||
baseURL: 'http://wallet-chaindata-api.weirui0755.com', |
|||
requestTimeout: 10000, |
|||
} |
|||
@ -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) |
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -348,6 +348,11 @@ async-validator@^4.2.5: |
|||
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz" |
|||
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: |
|||
version "10.4.8" |
|||
resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.8.tgz" |
|||
@ -360,6 +365,14 @@ autoprefixer@^10.4.8: |
|||
picocolors "^1.0.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: |
|||
version "1.0.2" |
|||
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" |
|||
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]: |
|||
version "0.0.1" |
|||
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" |
|||
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: |
|||
version "5.2.1" |
|||
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" |
|||
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: |
|||
version "4.2.0" |
|||
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" |
|||
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: |
|||
version "3.1.2" |
|||
resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz" |
|||
|
|||
Loading…
Reference in new issue