Skip to content

Y
ycc-website
Commit 46a75702 authored by chenqikuai's avatar chenqikuai
1 Browse files
Options

区块链浏览器部分的首页

parent 070579a0
Hide whitespace changes
Inline Side-by-side
Showing with 685 additions and 22 deletions
src/assets/lang/zh.ts
View file @ 46a75702
......@@ -19,7 +19,7 @@ export const lang = {
transaction: "笔交易",
latestTx: "最新交易",
chainPerf: {
speed: "出快速度",
speed: "出块速度",
tps: "TPS",
txNumber: "交易总数",
addressNumber: "地址总数",
......
src/components/mobile/m-blockItem.vue 0 → 100644
View file @ 46a75702
<template>
<div class="blockItem bg-white flex pr-3.5">
<div class="txNumBox text-center flex-shrink-0">
<div
class="text-footer-color text-base font-bold"
style="margin-top: 7px;"
>
{{ (item && item.txs && item.txs.length) || '' }}
</div>
<div class="text-xs font-bold text-footer-color-light">
{{ $t('lang.block.txCount') }}
</div>
</div>
<div class="msgBox flex-shrink-0 flex-grow mt-3.5 ml-2">
<div class="flex justify-between items-center w-full">
<div class="text-darkBlue font-bold text-sm">
<router-link
:to="{
path: '/blockDetail',
query: {
height: item.height,
},
}"
>
{{ item.height }}
</router-link>
</div>
<div class="text-text-color text-xs">
{{ item.blockTime | formatTime }}
</div>
</div>
<div>
<span class="text-text-color text-xs">
{{ $t('lang.block.packingAddress') }}:
</span>
<span class="text-footer-color">
<router-link
:to="{
path: '/address',
query: {
address: item.minerHash,
},
}"
>
{{ item.minerHash | filterHash }}
</router-link>
</span>
</div>
<div>
<span class="text-text-color text-xs">
{{ $t('lang.block.blockReward') }}
</span>
<span class="text-black text-xs">
15 YCC
</span>
<span class="text-text-color text-xs">
{{ $t('lang.block.votingNode') }}5+{{
$t('lang.block.packingNode')
}}10
</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
item: Object,
},
})
</script>
<style lang="scss" scoped>
.blockItem {
height: 90px;
.txNumBox {
margin-top: 18px;
width: 62px;
height: 54px;
background: rgba(37, 69, 203, 0.1);
border-radius: 2px;
margin-left: 15px;
}
border-bottom: 1px solid #f5f5ff;
}
.blockItem:last-of-type {
border-bottom: none;
}
</style>
src/components/mobile/m-blue-intro.vue
View file @ 46a75702
<template>
<div class="m-blue-intro">
<img src="" alt="">
<img :src="txt" alt="" />
<div class="txt mt-2.5 text-lightBlue">原链区块链</div>
<div class="txt text-lightBlue">
浏览器
</div>
</div>
</template>
<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import txt from "@/assets/images/blockChainBrowser/home/yccText.png"
export default VueTypedMixins().extend({})
import txt from '@/assets/images/blockChainBrowser/home/yccText.png'
export default VueTypedMixins().extend({
data() {
return {
txt,
}
},
})
</script>
<style scoped>
<style scoped lang="scss">
.m-blue-intro {
width: 256px;
height: 290px;
background: #2545cb;
img {
width: 107px;
height: 36px;
margin-top: 95px;
margin-left: 129px;
}
.txt {
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
line-height: 25px;
margin-left: 129px;
letter-spacing: 1px;
}
}
</style>
src/components/mobile/m-chain-perf.vue 0 → 100644
View file @ 46a75702
<template>
<div class="c-perf">
<div
v-for="(item, i) in list"
:key="i"
class="h-1/4 pt-2.5"
style="margin-left: 30px;"
>
<div class="text-text-color text-xs" style="margin-bottom: 2px;">
{{ item.name }}
</div>
<div class="text-title-color text-sm font-bold">
{{ item.value }}
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
speed: String,
tps: Number,
txNumber: Number,
addressNumber: Number,
},
computed: {
list(): { name: string; value: string | number }[] {
return [
{
name: this.$t('lang.chainPerf.speed') as string,
value: '2s' + this.speed,
},
{
name: this.$t('lang.chainPerf.tps') as string,
value: '13.3' + this.tps,
},
{
name: this.$t('lang.chainPerf.txNumber') as string,
value: this.txNumber,
},
{
name: this.$t('lang.chainPerf.addressNumber') as string,
// value: '120391820' + this.addressNumber,
value: '23842',
},
]
},
},
})
</script>
<style lang="scss" scoped>
.c-perf {
width: 145px;
height: 225px;
background: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
border-radius: 2px;
}
</style>
src/components/mobile/m-chain-price.vue 0 → 100644
View file @ 46a75702
<template>
<div class="c-chain-price">
<div
class="top"
:style="{
backgroundImage: `url(${bg})`,
}"
>
<img :src="yccIcon" alt="" class="yccIcon" />
<div class="text-white font-bold text-xl mt-1">0.004538 美元</div>
<div
class="updown text-my-red font-bold text-xs flex items-center justify-center"
>
+9%
</div>
<div class="font-bold text-xs text-white mt-4">
{{ $t('lang.price.realTimeQuotes') }}
</div>
<div class="font-bold text-xs text-white mt-2">
{{ $t('lang.price._24hourVolatility') }}
</div>
</div>
<div class="bottom text-center">
<div class="text-text-color mt-1">
{{ $t('lang.price.marketValueInDollars') }}
</div>
<div class="text-footer-color font-bold">
1029381023
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import bg from '@/assets/images/blockChainBrowser/home/beautiful-rect.png'
import yccIcon from '@/assets/images/blockChainBrowser/home/ycc-icon.png'
export default Vue.extend({
data() {
return {
bg,
yccIcon,
}
},
})
</script>
<style lang="scss" scoped>
.c-chain-price {
width: 175px;
height: 225px;
background: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
border-radius: 2px;
.top {
width: 175px;
height: 175px;
background-repeat: no-repeat;
background-size: cover;
padding-top: 17px;
padding-left: 15px;
.yccIcon {
width: 26px;
height: 26px;
}
.updown {
width: 50px;
height: 20px;
background: #ffffff;
border-radius: 2px;
}
}
}
</style>
src/components/mobile/m-latestBlocks.vue 0 → 100644
View file @ 46a75702
<template>
<div class="c-latestBlocks">
<div class="top flex items-center justify-between px-3.5">
<div class="text-darkBlue text-sm font-bold">
{{ $t('lang.chainMsg.latestBlock') }}
</div>
<div class="text-footer-color text-xs" @click="$router.push('/block')">
{{ $t('lang.viewMore') }}
</div>
</div>
<m-block-item
class="flex"
v-for="(item, i) in latestBlocks"
:key="i"
:item="item"
></m-block-item>
<m-latest-tx></m-latest-tx>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import mBlockItem from './m-blockItem.vue'
import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'
import MLatestTx from './m-latestTx.vue'
export default Vue.extend({
components: { mBlockItem, MLatestTx },
props: {
latestBlocks: Array as PropType<iBlockMsg[]>,
},
})
</script>
<style lang="scss" scoped>
.c-latestBlocks {
.top {
height: 50px;
background: #ffffff;
border-radius: 2px;
}
}
</style>
src/components/mobile/m-latestTx.vue 0 → 100644
View file @ 46a75702
<template>
<div class="c-latestBlocks">
<div class="top flex items-center justify-between px-3.5">
<div class="text-darkBlue text-sm font-bold">
{{ $t('lang.latestTx') }}
</div>
<div
class="text-footer-color text-xs"
@click="$router.push('/tradeList')"
>
{{ $t('lang.viewMore') }}
</div>
</div>
<m-tx-item
v-for="n in 6"
:key="n"
:txGroup="
(n <= 3 && 'isGroupItem') || (n === 4 && 'isGroupItemEnd') || undefined
"
></m-tx-item>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import mTxItem from './m-txItem.vue'
export default Vue.extend({
components: { mTxItem },
})
</script>
<style lang="scss" scoped>
.c-latestBlocks {
.top {
height: 50px;
background: #ffffff;
border-radius: 2px;
}
}
</style>
src/components/mobile/m-pageContainer.vue 0 → 100644
View file @ 46a75702
<template>
<div class="m-page-container">
<div class="detail flex-left" v-if="!simple">
<el-pagination
background
small
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="currentPageNum"
:page-size="pageSize"
:page-sizes="[10, 20, 30]"
layout="total,sizes,jumper"
:total="total"
:pager-count="5"
></el-pagination>
<div class="confirm">{{ $t('lang.page.confirm') }}</div>
</div>
<div class="simple">
<el-pagination
background
small
@current-change="handleCurrentChange"
:current-page="currentPageNum"
:page-size="pageSize"
:page-sizes="[10, 20, 30]"
layout="prev,pager,next"
:total="total"
:pager-count="5"
></el-pagination>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'pages',
components: {},
data() {
return {
currentPageNum: this.currentPage,
firstPageBtnDisabled: true,
lastPageBtnDisabled: false,
}
},
props: {
currentPage: {
type: Number,
default: 1,
},
pageSize: {
type: Number,
default: 10,
},
total: {
type: Number,
default: 0,
},
simple: {
type: Boolean,
default: true,
},
},
watch: {
currentPage(newVal) {
this.currentPageNum = newVal
this.firstPageBtnDisabled = this.currentPageNum === 1 ? true : false
this.lastPageBtnDisabled =
this.currentPageNum === this.lastPageNum ? true : false
},
},
computed: {
lastPageNum(): number {
return Math.ceil(this.total / this.pageSize)
},
},
methods: {
handleCurrentChange(page: number) {
this.firstPageBtnDisabled = page === 1 ? true : false
this.lastPageBtnDisabled = page === this.lastPageNum ? true : false
this.currentPageNum = page
this.$emit('pageChange', page)
},
handleSizeChange(size: number) {
this.$emit('sizeChange', size)
},
},
})
</script>
<style lang="scss">
.m-page-container {
.el-pagination {
.el-pager li:not(.disabled).active {
background-color: $blue;
}
.el-pager li {
font-weight: 500;
font-size: 12px;
}
}
.confirm {
padding: 0 5px;
flex-shrink: 1;
margin-left: 10px;
display: inline-block;
width: fit-content;
height: 22px;
line-height: 22px;
background: $blue;
border-radius: 15px;
text-align: center;
color: $white;
font-size: 12px;
font-family: PingFangSC-Regular;
cursor: pointer;
}
.el-pagination {
padding: 0;
}
.el-pagination__jump {
margin-left: 0;
.el-input__inner {
font-size: 12px;
}
}
.el-pagination__sizes {
margin: 0;
.el-input {
width: 84px;
.el-input__inner {
height: 22px;
line-height: 22px;
font-size: 12px;
}
}
}
.el-pagination__total {
margin: 0;
font-size: 12px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(128, 147, 167, 1);
line-height: 17px;
}
.detail {
margin-bottom: 12px;
}
.first-pager,
.last-pager {
background: #f4f4f5;
}
}
</style>
src/components/mobile/m-txItem.vue 0 → 100644
View file @ 46a75702
<template>
<div
class="px-3.5 txItem flow-root relative"
:class="[txGroup ? 'bg-lightBlue2' : 'bg-white']"
>
<div class="leftLine" v-if="txGroup"></div>
<img
:src="txGroupIcon"
alt="txGroupIcon"
v-if="txGroup && txGroup === 'isGroupItem'"
class="w-5 h-5 txGroupIcon"
/>
<div class="flex justify-between items-center mt-3.5">
<div class="flex items-center">
<div class="text-text-color text-xs">
{{ $t('lang.trade.txAmount') }} :
</div>
<div class="text-darkBlue text-sm font-bold">
12.00YCC
</div>
</div>
<div class="text-xs text-text-color">
20394029348
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="text-text-color text-xs">
{{ $t('lang.txDetail.txHash') }} :
</div>
<div
class="text-xs"
:class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
>
{{ '1092380912' | filterHash }}
</div>
</div>
<TxStatus size="small" :status="true" />
</div>
<div class="flex items-center justify-between">
<div>
<span class="text-text-color text-xs">
{{ $t('lang.trade.sender') }} :
</span>
<span
class="text-xs"
:class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
>
{{ '1092380912' | filterHash }}
</span>
</div>
<div>
<span class="text-text-color text-xs">
{{ $t('lang.trade.receiver') }} :
</span>
<span
class="text-xs"
:class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
>
{{ '1092380912' | filterHash }}
</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import TxStatus from '../pc/txStatus.vue'
import txGroupIcon from '@/assets/images/blockChainBrowser/tradeDetail/txGroupIcon.png'
export default Vue.extend({
components: {
TxStatus,
},
props: {
txGroup: String as PropType<'isGroupItem' | 'isGroupItemEnd'>,
},
data() {
return {
txGroupIcon,
}
},
})
</script>
<style lang="scss" scoped>
.txItem {
border-bottom: 1px solid #f5f5ff;
height: 90px;
.leftLine {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: rgba(79, 221, 252, 1);
z-index: 1;
}
.txGroupIcon {
position: absolute;
left: -10px;
bottom: -10px;
z-index: 2;
}
}
.txItem:last-of-type {
border-bottom: none;
}
</style>
src/components/mobile/map/m-numOfOnChainTx.vue 0 → 100644
View file @ 46a75702
<template>
<div class="num flow-root">
<div class="mt-2.5 flex items-center justify-between">
<div class="text-darkBlue font-bold">
链上交易数量
</div>
<div>
<span style="margin-left: 15px;" class="text-darkBlue font-bold">
H1
</span>
<span style="margin-left: 15px;" class="text-text-color">D1</span>
<span style="margin-left: 15px;" class="text-text-color">W1</span>
<span style="margin-left: 15px;" class="text-text-color">M1</span>
<span style="margin-left: 15px;" class="text-text-color">Y1</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
<style lang="scss" scoped>
.num {
padding: 0 15px;
height: 140px;
background: #ffffff;
box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
border-radius: 2px;
}
</style>
src/components/pc/BlockChainBrowser/LatestBlock/index.vue
View file @ 46a75702
......@@ -13,7 +13,7 @@
{{ (item && item.txs && item.txs.length) || '' }}
{{ $t('lang.transaction') }}
</div>
<div style="color: rgba(37, 69, 203, 0.3);">
<div class="text-footer-color-light">
<Count v-if="item.blockTime" :time="item.blockTime"></Count>
</div>
</div>
......
src/components/pc/txStatus.vue
View file @ 46a75702
<template>
<div class="c-txStatus">
<div
:class="['status', status === true ? 'success' : 'faild']"
class="flex items-center"
:class="[
'status',
status === true ? 'success' : 'faild',
size === 'small' && 'status-small',
]"
class="flex items-center justify-center"
:style="statusStyle"
>
<img
v-if="status === false"
class="w-4 h-4"
src="@/assets/images/blockChainBrowser/tradeDetail/fail.png"
:class="[size === 'big' ? ' w-4 h-4' : ' w-3 h-3']"
:src="!status ? failIcon : successIcon"
alt=""
/>
<img
v-else
class="w-4 h-4"
src="@/assets/images/blockChainBrowser/tradeDetail/success.png"
alt=""
/>
<div class="ml-1">
<div
:style="{
marginLeft: size === 'big' ? '4px' : '2px',
}"
>
{{
status === true
? $t('lang.components.succ')
......@@ -29,9 +31,28 @@
<script lang="ts">
import Vue from 'vue'
import failIcon from '@/assets/images/blockChainBrowser/tradeDetail/fail.png'
import successIcon from '@/assets/images/blockChainBrowser/tradeDetail/success.png'
export default Vue.extend({
props: {
status: Boolean,
size: {
type: String,
default: 'big',
},
},
data() {
return {
failIcon,
successIcon,
}
},
computed: {
statusStyle(): any {
return {
fontSize: this.size === 'big' ? '14px' : '12px',
}
},
},
})
</script>
......@@ -42,8 +63,10 @@ export default Vue.extend({
width: 70px;
height: 30px;
border-radius: 15px;
padding: 3px 10px;
font-size: 14px;
}
.status-small {
width: 50px;
height: 20px;
}
.success {
background: rgba(111, 182, 55, 0.1);
......
src/views/mobile/blockChainBrowser.vue
View file @ 46a75702
......@@ -11,6 +11,15 @@
></m-chain-card>
<m-blue-intro class=""></m-blue-intro>
</div>
<m-num-of-on-chain-tx class="mx-4 mt-3.5"></m-num-of-on-chain-tx>
<div class="flex justify-between mx-4 mt-3.5">
<m-chain-price class="flex-shrink-0"></m-chain-price>
<m-chain-perf class="flex-shrink-0"></m-chain-perf>
</div>
<m-latest-blocks
class="mx-4 mt-3.5"
:latestBlocks="latestBlocks"
></m-latest-blocks>
</div>
</template>
......@@ -21,12 +30,24 @@ import blockChainBrowserMixin from '@/mixin/blockChainBrowser'
import MChainSearch from '@/components/mobile/m-chainSearch.vue'
import MChainCard from '@/components/mobile/m-chainCard.vue'
import MBlueIntro from '@/components/mobile/m-blue-intro.vue'
import MNumOfOnChainTx from '@/components/mobile/map/m-numOfOnChainTx.vue'
import MChainPrice from '@/components/mobile/m-chain-price.vue'
import MChainPerf from '@/components/mobile/m-chain-perf.vue'
import MLatestBlocks from '@/components/mobile/m-latestBlocks.vue'
export default VueTypedMixins(blockChainBrowserMixin).extend({
components: { MChainSearch, MChainCard, MBlueIntro },
components: {
MChainSearch,
MChainCard,
MBlueIntro,
MNumOfOnChainTx,
MChainPrice,
MChainPerf,
MLatestBlocks,
},
})
</script>
, MLatestBlocks
<style scoped>
.blockChain {
margin-top: 70px;
......
tailwind.config.js
View file @ 46a75702
......@@ -32,12 +32,14 @@ module.exports = {
'article-color': '#2E3B4D',
'text-color': '#7C88AD',
'footer-color': '#2545CB',
'footer-color-light': 'rgba(37, 69, 203, 0.3)',
'feature-text': '#495E75',
'scene-color': '#435897',
"my-red": "#f06666",
'details-bg': '#F2F2F2',
'bgfootercolor': '#f9fafb',
"lightBlue": "#4FDDFC",
lightBlue2: 'rgba(79, 221, 252, 0.04)',
'active': '#0276F7',
"darkBlue": "#1F3470",
black: colors.black,
......
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