Skip to content

Y
ycc-website
Commit 5ec341a3 authored by chenqikuai's avatar chenqikuai
1 Browse files
Options

save

parent e2d0318e
Show whitespace changes
Inline Side-by-side
Showing with 795 additions and 9 deletions
package-lock.json
View file @ 5ec341a3
......@@ -12,6 +12,7 @@
"@tailwindcss/postcss7-compat": "^2.0.4",
"ant-design-vue": "^1.7.5",
"autoprefixer": "^9",
"clipboard": "^2.0.8",
"compression-webpack-plugin": "^5.0.0",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
......@@ -5319,6 +5320,16 @@
"node": ">= 10"
}
},
"node_modules/clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/clipboardy": {
"version": "2.3.0",
"resolved": "https://registry.nlark.com/clipboardy/download/clipboardy-2.3.0.tgz",
......@@ -6832,6 +6843,11 @@
"node": ">=0.4.0"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/depd": {
"version": "1.1.2",
"resolved": "https://registry.nlark.com/depd/download/depd-1.1.2.tgz",
......@@ -8873,6 +8889,14 @@
"node": ">=0.10.0"
}
},
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.6.tgz",
......@@ -14210,6 +14234,11 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
......@@ -15682,6 +15711,11 @@
"dev": true,
"license": "MIT"
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.nlark.com/tinycolor2/download/tinycolor2-1.4.2.tgz",
......@@ -21701,6 +21735,16 @@
"integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=",
"dev": true
},
"clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"clipboardy": {
"version": "2.3.0",
"resolved": "https://registry.nlark.com/clipboardy/download/clipboardy-2.3.0.tgz",
......@@ -22827,6 +22871,11 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.nlark.com/depd/download/depd-1.1.2.tgz",
......@@ -24343,6 +24392,14 @@
}
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.6.tgz",
......@@ -28177,6 +28234,11 @@
"ajv-keywords": "^3.5.2"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
......@@ -29290,6 +29352,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.nlark.com/tinycolor2/download/tinycolor2-1.4.2.tgz",
package.json
View file @ 5ec341a3
......@@ -12,6 +12,7 @@
"@tailwindcss/postcss7-compat": "^2.0.4",
"ant-design-vue": "^1.7.5",
"autoprefixer": "^9",
"clipboard": "^2.0.8",
"compression-webpack-plugin": "^5.0.0",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
......
src/App.vue
View file @ 5ec341a3
<template>
<div id="app">
<router-view/>
<router-view />
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Vue from 'vue'
export default Vue.extend({
name: 'Home',
});
})
</script>
<style>
.my-title {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #7c88ad;
}
.my-block-height {
font-size: 32px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #2545cb;
}
.my-benifit {
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #22356c;
}
.my-content1 {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1f3470;
}
</style>
src/components/pc/BlockChainBrowser/BlockOverview/LeftBox.vue 0 → 100644
View file @ 5ec341a3
<template>
<div class="left-box" :style="{ backgroundImage: `url(${leftBoxbgPng})` }">
<div class="flex">
<div class="flex left overflow-hidden flex-shrink-0">
<img
src="@/assets/images/blockChainBrowser/blockDetail/block.png"
class="blockIcon"
alt=""
/>
<div class="overflow-hidden">
<div class="my-title">
区块高度
</div>
<div class="my-block-height overflow-hidden overflow-ellipsis">
09238409823094820394808
</div>
</div>
</div>
<div class="middle flex-shrink-0">
<div class="my-title">
区块收益
</div>
<div class="my-benifit">
15YCC
</div>
<div class="my-title">
投票节点5+打包节点10
</div>
</div>
<div class="right flex-shrink-0">
<div class="my-title">
交易数量
</div>
<div class="my-benifit">
13
</div>
</div>
</div>
<div class="flex items-center" style="margin-top: 35px;">
<div class="my-title theTitle">时间戳</div>
<div class="my-content1">2021-11-23</div>
</div>
<div class="flex items-center">
<div class="my-title theTitle">区块哈希</div>
<div class="my-content1">
0xf9807e9f0d272ea0109a69f6360f53291783bac47569a8bc988a06ae9c50f8ae
</div>
<copy-btn :copyTxt="10293809128" class="ml-4">复制</copy-btn>
</div>
<div class="flex items-center">
<div class="my-title theTitle">默克尔根</div>
<div class="my-content1">
0x1d4b6d53da04f9a817c1c183d8b4a7fbb47b35ccdf286de3fb27473362684a19
</div>
<copy-btn :copyTxt="10293809128" class="ml-4">复制</copy-btn>
</div>
<div class="flex items-center">
<div class="my-title theTitle">状态哈希</div>
<div class="my-content1">
0x2ea9289ef78e17448c00aa3857f0fefd64191fc7dcc4ea524236be14efc7ad44
</div>
<copy-btn :copyTxt="10293809128" class="ml-4">复制</copy-btn>
</div>
</div>
</template>
<script lang="ts">
// eslint-disable-next-line @typescript-eslint/no-var-requires
const leftBoxbgPng = require('@/assets/images/blockChainBrowser/blockDetail/leftBoxbg.png')
import Vue from 'vue'
import CopyBtn from '../../CopyBtn.vue'
export default Vue.extend({
components: { CopyBtn },
data() {
return {
leftBoxbgPng,
}
},
})
</script>
<style>
.left-box {
width: 870px;
height: 330px;
background: #ffffff;
box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
border-radius: 4px;
background-position: center;
background-size: cover;
padding-top: 42px;
padding-left: 30px;
}
.blockIcon {
width: 52px;
height: 52px;
margin-right: 20px;
}
.left {
width: 360px;
}
.middle {
width: 260px;
}
.right {
width: 220px;
}
.theTitle {
width: 72px;
margin-bottom: 10px;
margin-top: 10px;
}
</style>
src/components/pc/BlockChainBrowser/BlockOverview/RightBox.vue 0 → 100644
View file @ 5ec341a3
<template>
<div
class="right-box text-center overflow-hidden overflow-ellipsis"
:style="{
backgroundImage: `url(${url})`,
backgroundPosition: backgroundPosition,
}"
>
<div class="my-title mt-11">
{{ type === 'last' ? '上个区块' : '下个区块' }}
</div>
<div class="my-block-height">
<router-link :to="to" v-if="typeof height === 'number'">
{{ height }}
</router-link>
<div v-else>
无
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import lastBg from '@/assets/images/blockChainBrowser/blockDetail/lastBlockBg.png'
import nextBg from '@/assets/images/blockChainBrowser/blockDetail/nextBlockBg.png'
export default Vue.extend({
props: {
type: String as PropType<'last' | 'next'>,
height: [Number, String],
},
data() {
return {
lastBg,
nextBg,
}
},
computed: {
to(): any {
return {
path: '/blockDetail',
query: {
height: this.height,
},
}
},
url(): string {
if (this.type === 'last') {
return lastBg
} else {
return nextBg
}
},
backgroundPosition(): string {
if (this.type === 'last') return 'left center'
else return 'right center'
},
},
})
</script>
<style>
.right-box {
width: 300px;
height: 150px;
background: #ffffff;
box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
border-radius: 4px;
background-size: contain;
background-repeat: no-repeat;
}
</style>
src/components/pc/BlockChainBrowser/BlockOverview/index.vue 0 → 100644
View file @ 5ec341a3
<template>
<div class="block-overview flex justify-between">
<left-box></left-box>
<div class="h-full">
<right-box
type="last"
style="margin-bottom: 30px;"
:height="lastHeight"
></right-box>
<right-box type="next" :height="nextHeight"></right-box>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import LeftBox from './LeftBox.vue'
import RightBox from './RightBox.vue'
export default Vue.extend({
components: {
LeftBox,
RightBox,
},
props: {
lastHeight: Number,
nextHeight: Number,
},
})
</script>
<style></style>
src/components/pc/BlockChainBrowser/DataFilter/index.vue 0 → 100644
View file @ 5ec341a3
<template>
<div class="filter flex justify-between items-center">
<div class="my-title">
<slot name="left" />
</div>
<div>
<Select :value="value" @change="setValue">
<Option
v-for="(option, i) in optionList"
:key="i"
:value="option.value"
:label="option.name"
></Option>
</Select>
</div>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import { iOptionItem } from './types'
import { Select, Option } from 'element-ui'
export default Vue.extend({
components: {
Select,
Option,
},
props: {
value: [String, Number],
setValue: Function,
optionList: Array as PropType<iOptionItem[]>,
},
})
</script>
<style scoped>
.filter {
padding: 0 30px;
height: 80px;
background: #fafbfc;
border-radius: 4px;
}
</style>
src/components/pc/BlockChainBrowser/DataFilter/types.d.ts 0 → 100644
View file @ 5ec341a3
export interface iOptionItem {
name: string;
value: any;
}
src/components/pc/BlockChainBrowser/TabList/index.vue 0 → 100644
View file @ 5ec341a3
<template>
<div class="tab-list flex">
<div
v-for="(tab, i) in tabList"
class="my-tab flex flex-col items-center cursor-pointer"
:class="{
'my-tab-focused': tab.value === focusedTab,
}"
:key="i"
@click="setFocusedTab(tab.value)"
>
<div class=" flex-shrink-0">
{{ tab.name }}
</div>
<div
class="my-tab-focused-underline mt-1 flex-shrink-0"
v-if="tab.value === focusedTab"
></div>
</div>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import { iTab } from './types'
export default Vue.extend({
props: {
tabList: Array as PropType<iTab[]>,
focusedTab: String,
setFocusedTab: Function,
},
})
</script>
<style scoped>
.tab-list {
height: 80px;
background: #ffffff;
border-radius: 4px;
}
.my-tab {
font-size: 18px;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #1f3470;
margin: 0 30px;
margin-top: 28px;
}
.my-tab-focused {
color: #2545cb;
margin-bottom: 19px;
}
.my-tab-focused-underline {
width: 28px;
height: 4px;
background: #2545cb;
border-radius: 4px;
}
</style>
src/components/pc/BlockChainBrowser/TabList/types.d.ts 0 → 100644
View file @ 5ec341a3
export interface iTab {
name: string;
value: string;
}
src/components/pc/BlockChainBrowser/TradeTable/index.vue 0 → 100644
View file @ 5ec341a3
<template>
<div class="trade-table">
<el-table
:data="Trades"
stripe
style="width: 100%;"
class="data-table"
:cell-class-name="groupCellName"
>
<template slot="empty">
<div>
<div
v-if="Loading"
class="loading-line"
v-loading="Loading"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
></div>
<span v-else>{{ $t('page.nodata') }}</span>
</div>
</template>
<el-table-column label width="20">
<template slot-scope="item">
<div>
<div
:class="{
'start-line': item.row.tradeG === 2,
'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>
</template>
</el-table-column>
<el-table-column :label="$t('trade.hash')">
<template slot-scope="item">
<div>
<p class="group-title" v-if="item.row.tradeG === 2">
{{ $t('txDetail.groupTx') }}
</p>
<router-link
:to="`/tradeHash?hash=${item.row.txHash}`"
class="light flex-left"
>
<i
class="iconfont err-ico"
:class="{
'iconjinggao-chucuo': isSuccess(
item.row.tx.execer,
item.row.receipt.ty,
),
}"
></i>
{{ item.row.txHash | filterHash(10) }}
</router-link>
</div>
</template>
</el-table-column>
<el-table-column prop="hash" :label="$t('home.sender')">
<template slot-scope="item">
<router-link
:to="`/address?address=${item.row.fromAddr}`"
class="light"
>
{{ item.row.fromAddr | filterHash(10) }}
</router-link>
</template>
</el-table-column>
<el-table-column width="60">
<template>
<i class="iconfont iconjiantou-you"></i>
</template>
</el-table-column>
<el-table-column prop="hash" :label="$t('home.receiver')">
<template slot-scope="item">
<router-link :to="`/address?address=${item.row.tx.to}`" class="light">
{{ item.row.tx.to | filterHash(10) }}
</router-link>
</template>
</el-table-column>
<el-table-column prop="fee" :label="$t('trade.num')">
<template slot-scope="item">{{ item.row | TradeValue }}</template>
</el-table-column>
<el-table-column :label="$t('trade.fee')" width="120">
<template slot-scope="item">
{{ item.row.fee }}{{ item.row.tx.fee | filterFee }}
</template>
</el-table-column>
<el-table-column :label="$t('trade.func')" width="100">
<template slot-scope="item">
{{ item.row.actionName === 'unknown' ? 'none' : item.row.actionName }}
</template>
</el-table-column>
<el-table-column :label="$t('trade.token')" width="100">
<template slot-scope="item">
<img :src="item.row.icon" class="token-icon" />
</template>
</el-table-column>
</el-table>
<page-container
@pageChange="pageChange"
@sizeChange="sizeChange"
:currentPage="pages.currentPage"
:pageSize="pages.pageSize"
:total="pages.total"
></page-container>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { tradeAccuracy } from '@/utils/common'
import { Table, TableColumn } from 'element-ui'
export default Vue.extend({
components: {
'el-table': Table,
'el-table-column': TableColumn,
},
data() {
return {
Loading: false,
block: {
txCount: 0,
height: 0,
hash: '',
blockTime: '',
txHash: '',
stateHash: '',
},
txHashes: [],
Trades: [],
pages: {
currentPage: 1,
pageSize: 10,
total: 100,
},
}
},
methods: {
// 交易组模块
groupCellName(val: any) {
switch (val.row.tradeG) {
case 0:
break
case 1:
return 'tx-middle'
case 2:
return 'tx-start'
case 3:
return 'tx-end'
default:
break
}
},
isSuccess(execer: any, ty: any) {
return tradeAccuracy(execer, ty)
},
},
})
</script>
<style scoped>
.trade-table {
}
</style>
src/components/pc/CopyBtn.vue 0 → 100644
View file @ 5ec341a3
<template>
<div
class="btn flex items-center justify-center cursor-pointer"
ref="btn"
:data-clipboard-text="copyTxt"
>
<slot></slot>
</div>
</template>
<script>
import Clipboard from 'clipboard'
import { message } from 'ant-design-vue'
export default {
props: {
copyTxt: [String, Number],
},
mounted() {
const clipboard = new Clipboard(this.$refs.btn)
clipboard.on('success', function (e) {
message.success('复制成功')
e.clearSelection()
})
clipboard.on('error', function (e) {
message.error('复制失败')
})
},
methods: {},
}
</script>
<style scoped>
.btn {
width: 60px;
height: 30px;
background: rgba(37, 69, 203, 0.1);
border-radius: 15px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2545cb;
}
</style>
src/constant/index.ts
View file @ 5ec341a3
// 静态数据的存放地址
export const searchInputPlaceholder = "请输入地址/交易哈希/区块高度/代币";
src/global.d.ts 0 → 100644
View file @ 5ec341a3
declare module "*.png";
src/router/index.ts
View file @ 5ec341a3
......@@ -39,6 +39,11 @@ const routes: Array<RouteConfig> = [
name: "区块查看",
component: () => import(`@/views/${file}/block.vue`),
},
{
path: "/blockDetail",
name: "区块详情",
component: () => import(`@/views/${file}/blockDetail.vue`),
}
],
},
];
......
src/utils/common.ts 0 → 100644
View file @ 5ec341a3
/**
* 判断交易的准确性 return false交易成功 true交易失败
* @param {交易执行器} Actuators
* @param {交易type} ty
*/
const tradeAccuracy = function(Actuators: string, ty: number, execer?: any) {
if (
(Actuators == "none" || Actuators.substring(0, 5) == "user.") &&
!execer
) {
return false;
} else {
if (ty == 1) {
return true;
} else {
return false;
}
}
};
export { tradeAccuracy };
src/views/pc/block.vue
View file @ 5ec341a3
<template>
<div class="the-block min-w-1200 md:w-bodySet mx-auto mb-16 flow-root">
<chain-search
class=" mt-7"
placeholder="请输入地址/交易哈希/区块高度/代币"
class="mt-7"
:placeholder="searchInputPlaceholder"
></chain-search>
<div class="pc-block inner-box">
<div class="title flex items-center justify-between">
......@@ -35,7 +35,7 @@
<el-table-column :label="$t('lang.block.height')" width="180">
<template slot-scope="item">
<router-link
:to="`/blockdetail?height=${item.row.height}`"
:to="`/blockDetail?height=${item.row.height}`"
class="light"
>
{{ item.row.height }}
......@@ -54,7 +54,7 @@
<el-table-column prop="hash" :label="$t('lang.block.hash')">
<template slot-scope="item">
<router-link
:to="`/blockdetail?height=${item.row.height}`"
:to="`/blockDetail?height=${item.row.height}`"
class="light"
>
{{ item.row.hash | filterHash(12) }}
......@@ -98,6 +98,7 @@ import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import Count from '@/components/pc/BlockChainBrowser/Count.vue'
import { getRpc } from 'ycc-api/dist/cmjs/service/Rpc'
import { searchInputPlaceholder } from '@/constant'
const Rpc = getRpc('/yccApi')
export default Vue.extend({
......@@ -115,6 +116,7 @@ export default Vue.extend({
total: 10,
},
Blocks: [],
searchInputPlaceholder,
}
},
computed: {
......
src/views/pc/blockChainBrowser.vue
View file @ 5ec341a3
......@@ -4,7 +4,7 @@
<ChainTitle />
<chain-search
style="width: 600px;"
placeholder="请输入地址/交易哈希/区块高度/代币"
:placeholder="searchInputPlaceholder"
:value="value"
:setValue="setValue"
:clickSearch="clickSearch"
......@@ -28,6 +28,7 @@ import LatestBlock from '@/components/pc/BlockChainBrowser/LatestBlock/index.vue
import LatestTx from '@/components/pc/BlockChainBrowser/LatestTx/index.vue'
import { getLatestBlock } from 'ycc-api/dist/cmjs/service/home/index'
import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'
import { searchInputPlaceholder } from '@/constant'
export default Vue.extend({
components: {
......@@ -87,6 +88,7 @@ export default Vue.extend({
amount: 30000000,
},
],
searchInputPlaceholder,
}
},
mounted() {
......
src/views/pc/blockDetail.vue 0 → 100644
View file @ 5ec341a3
<template>
<div class="block-detail min-w-1200 md:w-bodySet mx-auto mb-16 flow-root">
<chain-search
style="margin-top: 30px;"
:placeholder="searchInputPlaceholder"
:clickSearch="clickSearch"
:value="searchValue"
:setValue="setSearchValue"
></chain-search>
<block-overview style="margin-top: 30px;"></block-overview>
<TabList
:tabList="tabList"
:setFocusedTab="(v) => (focusedTab = v)"
:focusedTab="focusedTab"
></TabList>
<DataFilter
:optionList="optionList"
:setValue="selectOption"
:value="selectedOption"
>
<template #left>
共找到13笔交易
</template>
</DataFilter>
<TradeTable></TradeTable>
</div>
</template>
<script lang="ts">
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import BlockOverview from '@/components/pc/BlockChainBrowser/BlockOverview/index.vue'
import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
import { searchInputPlaceholder } from '@/constant'
import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
import Vue from 'vue'
export default Vue.extend({
components: {
ChainSearch,
BlockOverview,
TabList,
DataFilter,
TradeTable,
},
data() {
return {
searchInputPlaceholder,
searchValue: '',
tabList: [
{ name: '交易记录', value: '1' },
{ name: '共识节点', value: '2' },
],
focusedTab: '1',
optionList: [
{ name: '交易记录', value: '1' },
{ name: '共识节点', value: '2' },
],
selectedOption: '1',
}
},
methods: {
selectOption(v: string) {
this.selectedOption = v
},
clickSearch(v: string) {
console.log(v, ' show search value')
},
setSearchValue(v: string) {
this.searchValue = v
},
setFocusedTab(v: string) {
this.focusedTab = v
},
},
})
</script>
<style scoped>
.block-detail {
margin-top: 70px;
}
</style>
yarn.lock
View file @ 5ec341a3
......@@ -2934,6 +2934,15 @@
"resolved" "https://registry.nlark.com/cli-width/download/cli-width-3.0.0.tgz"
"version" "3.0.0"
"clipboard@^2.0.8":
"integrity" "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ=="
"resolved" "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz"
"version" "2.0.8"
dependencies:
"good-listener" "^1.2.2"
"select" "^1.1.2"
"tiny-emitter" "^2.0.0"
"clipboardy@^2.3.0":
"integrity" "sha1-PCkDZQxo5GqRs4iYW8J3QofbopA="
"resolved" "https://registry.nlark.com/clipboardy/download/clipboardy-2.3.0.tgz"
......@@ -3671,6 +3680,11 @@
"resolved" "https://registry.nlark.com/delayed-stream/download/delayed-stream-1.0.0.tgz"
"version" "1.0.0"
"delegate@^3.1.2":
"integrity" "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
"resolved" "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz"
"version" "3.2.0"
"depd@~1.1.2":
"integrity" "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
"resolved" "https://registry.nlark.com/depd/download/depd-1.1.2.tgz"
......@@ -4869,6 +4883,13 @@
"pify" "^4.0.1"
"slash" "^2.0.0"
"good-listener@^1.2.2":
"integrity" "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA="
"resolved" "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz"
"version" "1.2.2"
dependencies:
"delegate" "^3.1.2"
"graceful-fs@^4.1.11", "graceful-fs@^4.1.15", "graceful-fs@^4.1.2", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0":
"integrity" "sha1-/wQLKwhTsjw9MQJ1I3BvGIXXa+4="
"resolved" "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.6.tgz"
......@@ -8235,6 +8256,11 @@
"resolved" "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz"
"version" "2.0.0"
"select@^1.1.2":
"integrity" "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
"resolved" "https://registry.npmjs.org/select/-/select-1.1.2.tgz"
"version" "1.1.2"
"selfsigned@^1.10.8":
"integrity" "sha1-JJKc2Qb+D0S20B+yOZmnOVN6y+k="
"resolved" "https://registry.nlark.com/selfsigned/download/selfsigned-1.10.11.tgz"
......@@ -9109,6 +9135,11 @@
"resolved" "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz"
"version" "0.3.0"
"tiny-emitter@^2.0.0":
"integrity" "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
"resolved" "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz"
"version" "2.1.0"
"tinycolor2@^1.4.1":
"integrity" "sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM="
"resolved" "https://registry.nlark.com/tinycolor2/download/tinycolor2-1.4.2.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment