Skip to content

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

fix: 修复移动端样式问题

parent 19dce072
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 174 deletions
src/components/mobile/m-block-desc-card.vue
View file @ 1efbad30
......@@ -8,6 +8,11 @@
>
<div class="flex items-end justify-between">
<img :src="blockIcon" class="blockIcon" alt="" />
</div>
<div class="flex justify-between mt-1">
<div class="text-text-color text-xs">
{{ $t('lang.txDetail.height') }}
</div>
<div>
<span class="text-text-color text-xs">
{{ $t('lang.block.blockReward') }}
......@@ -17,14 +22,6 @@
</span>
</div>
</div>
<div class="flex justify-between mt-1">
<div class="text-text-color text-xs">
{{ $t('lang.txDetail.height') }}
</div>
<div class="text-text-color text-xs">
{{ height | filterVotePackReward }}
</div>
</div>
<div class="flex justify-between items-end mb-6" style="margin-top: 3px;">
<div class="text-footer-color font-bold text-3xl">
{{ height }}
......@@ -52,7 +49,7 @@
</div>
<div class="text-darkBlue text-sm flex items-center">
<div>
{{ hash | filterHash }}
{{ hash | filterHash(10) }}
</div>
<m-copy-btn class="ml-2" :copyTxt="hash"></m-copy-btn>
</div>
......@@ -63,7 +60,7 @@
</div>
<div class="text-darkBlue text-sm flex items-center">
<div>
{{ merkelgen | filterHash }}
{{ merkelgen | filterHash(10) }}
</div>
<m-copy-btn class="ml-2" :copyTxt="merkelgen"></m-copy-btn>
</div>
......@@ -74,7 +71,7 @@
</div>
<div class="text-darkBlue text-sm flex items-center">
<div>
{{ stateHash | filterHash }}
{{ stateHash | filterHash(10) }}
</div>
<m-copy-btn class="ml-2" :copyTxt="stateHash"></m-copy-btn>
</div>
......@@ -82,7 +79,7 @@
</div>
<div class="c-block-desc-bottom flex justify-between">
<div
class="relativeBlock relativeBlock-last text-center"
class="relativeBlock relativeBlock-last text-center flex-grow"
:style="{
backgroundImage: `url(${lastBlockBg})`,
}"
......@@ -109,8 +106,9 @@
</div>
</div>
</div>
<div style="width: 15px;"></div>
<div
class="relativeBlock relativeBlock-next text-center"
class="relativeBlock relativeBlock-next text-center flex-grow"
:style="{
backgroundImage: `url(${nextBlockBg})`,
}"
......
src/components/mobile/m-chain-perf.vue
View file @ 1efbad30
......@@ -51,7 +51,6 @@ export default Vue.extend({
</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);
......
src/components/mobile/m-consensus-node.vue
View file @ 1efbad30
<template>
<div class="consensus-node bg-white">
<div class="consensus-node" style="background: #fafbfc;">
<div
class="box"
:style="{
......
src/components/mobile/m-pageContainer.vue
View file @ 1efbad30
......@@ -182,9 +182,6 @@ $white: #6368de;
}
}
.detail {
margin-bottom: 12px;
}
.first-pager,
.last-pager {
background: #f4f4f5;
......
src/views/mobile/address/index.vue
View file @ 1efbad30
......@@ -2,12 +2,17 @@
<div class="c-address mx-3.5 flow-root">
<m-chain-search class="mt-3.5"></m-chain-search>
<m-address-overview class="mt-5"></m-address-overview>
<m-tabs
:focusedTab="focusedTab"
:setFocusedTab="($event) => (focusedTab = $event)"
:tabList="tabList"
></m-tabs>
<m-vote-pack :rewardAmount="30" class="mb-3" :type="'lskjd'"></m-vote-pack>
<div
class="rounded-twoPx overflow-hidden shadow-shadow1"
style="margin-top: 15px;"
>
<m-tabs
:focusedTab="focusedTab"
:setFocusedTab="($event) => (focusedTab = $event)"
:tabList="tabList"
></m-tabs>
<m-vote-pack :rewardAmount="30" :type="'lskjd'"></m-vote-pack>
</div>
</div>
</template>
<script lang="ts">
......@@ -29,5 +34,6 @@ export default VueTypedMixins(address).extend({
<style lang="scss" scoped>
.c-address {
padding-top: 44px;
padding-bottom: 23px;
}
</style>
src/views/mobile/block.vue
View file @ 1efbad30
......@@ -9,18 +9,19 @@
:total="pages.total"
class="mt-5"
></m-page-container>
<m-title
class="mt-3.5"
:title="`${$t('lang.block.title')}(${234234}${$t('lang.block.count')})`"
></m-title>
<m-block-item
v-for="(item, i) in Blocks"
:blockTime="item.blockTime"
:height="item.height"
:packagingAddress="item.hash"
:txCount="item.txCount"
:key="i"
></m-block-item>
<div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-3.5">
<m-title
:title="`${$t('lang.block.title')}(${234234}${$t('lang.block.count')})`"
></m-title>
<m-block-item
v-for="(item, i) in Blocks"
:blockTime="item.blockTime"
:height="item.height"
:packagingAddress="item.hash"
:txCount="item.txCount"
:key="i"
></m-block-item>
</div>
<m-page-container
:simple="false"
@pageChange="pageChange"
......@@ -47,5 +48,6 @@ export default VueTypedMixins(blockMixin).extend({
.c-block {
padding-top: 44px;
border-radius: 2px;
padding-bottom: 23px;
}
</style>
src/views/mobile/blockChainBrowser.vue
View file @ 1efbad30
<template>
<div class="" style="padding-top: 44px;">
<div class="" style="padding-top: 44px; padding-bottom: 24px;">
<m-chain-search
style="margin-top: 15px;"
class="mx-4 mt-4"
></m-chain-search>
<div class="relative flex justify-end">
<div class="relative flex justify-end" style="margin-top: 19px;">
<m-chain-card
class="ml-4 absolute top-1/2 -translate-y-1/2 transform left-0"
:msgList="msgList"
......@@ -14,13 +14,16 @@
<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 style="width: 15px;"></div>
<m-chain-perf class="flex-grow"></m-chain-perf>
</div>
<m-latest-blocks
class="mx-4 mt-3.5"
class="mx-4 mt-3.5 shadow-shadow1 rounded-twoPx overflow-hidden"
:latestBlocks="latestBlocks"
></m-latest-blocks>
<m-latest-tx class="mx-4"></m-latest-tx>
<m-latest-tx
class="mx-4 mt-3.5 shadow-shadow1 rounded-twoPx overflow-hidden"
></m-latest-tx>
</div>
</template>
......
src/views/mobile/blockDetail/index.vue
View file @ 1efbad30
......@@ -13,46 +13,50 @@
:nextBlockHeight="overview.nextBlockHeight"
:loading="loadingOverview"
></m-block-desc-card>
<m-tabs
class="mt-3.5"
:tabList="tabList"
:focusedTab="focusedTab"
:setFocusedTab="setFocusedTab"
></m-tabs>
<div class="bg-white px-4">
<Select
:selectedValue="txRecordFilterValue"
:optionList="txRecordFilterOptionList"
@change="(v) => (txRecordFilterValue = v)"
></Select>
</div>
<div v-if="focusedTab === 'txRecordTab'" class="flow-root">
<m-tx-item
v-for="(trade, i) in Trades"
:key="i"
:row="trade"
:amount="trade.amount"
:txHash="trade.tx.hash"
:from="trade.tx.from"
:blockTime="trade.blockTime"
:to="trade.tx.to"
:tradeG="trade.tradeG"
:status="isSuccess(trade.tx.execer, trade.receipt.ty)"
></m-tx-item>
<m-page-container
<div class="rounded-twoPx overflow-hidden shadow-shadow1">
<m-tabs
class="mt-3.5"
:simple="false"
@pageChange="pageChange"
@sizeChange="sizeChange"
:currentPage="pages.currentPage"
:pageSize="pages.pageSize"
:total="pages.total"
></m-page-container>
</div>
<div v-if="focusedTab === 'consensusNodeTab'" class="flow-root">
<m-consensus-node></m-consensus-node>
<m-consensus-node type="vote"></m-consensus-node>
:tabList="tabList"
:focusedTab="focusedTab"
:setFocusedTab="setFocusedTab"
></m-tabs>
<div class="bg-white px-4">
<Select
v-if="focusedTab === 'txRecordTab'"
:selectedValue="txRecordFilterValue"
:optionList="txRecordFilterOptionList"
@change="(v) => (txRecordFilterValue = v)"
></Select>
</div>
<div v-if="focusedTab === 'txRecordTab'" class="flow-root">
<m-tx-item
v-for="(trade, i) in Trades"
:key="i"
:row="trade"
:amount="trade.amount"
:txHash="trade.tx.hash"
:from="trade.tx.from"
:blockTime="trade.blockTime"
:to="trade.tx.to"
:tradeG="trade.tradeG"
:status="isSuccess(trade.tx.execer, trade.receipt.ty)"
></m-tx-item>
</div>
<div v-if="focusedTab === 'consensusNodeTab'" class="flow-root">
<m-consensus-node></m-consensus-node>
<m-consensus-node type="vote"></m-consensus-node>
</div>
</div>
<m-page-container
v-if="focusedTab === 'txRecordTab'"
class="mt-3.5"
:simple="false"
@pageChange="pageChange"
@sizeChange="sizeChange"
:currentPage="pages.currentPage"
:pageSize="pages.pageSize"
:total="pages.total"
></m-page-container>
</div>
</template>
<script lang="ts">
......@@ -80,5 +84,6 @@ export default VueTypedMixins(blockDetailMixin).extend({
<style lang="scss" MChainSearchscoped>
.c-blockDetail {
padding-top: 44px;
padding-bottom: 23px;
}
</style>
src/views/mobile/tradeDetail.vue
View file @ 1efbad30
<template>
<div class="c-trade-detail mx-4 flow-root">
<MChainSearch class="mt-3.5"></MChainSearch>
<m-title :title="$t('lang.txDetail.detail')" class="mt-5"></m-title>
<div class="bg-white px-3.5 mb-5">
<div class="flex items-center">
<div class="label">{{ $t('lang.block.hash') }}</div>
<div class="content">
{{ data.hash | filterHash }}
<m-copy-btn :copyTxt="data.hash"></m-copy-btn>
<div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-5">
<m-title :title="$t('lang.txDetail.detail')"></m-title>
<div class="bg-white px-3.5 mb-5">
<div class="flex items-center">
<div class="label">{{ $t('lang.block.hash') }}</div>
<div class="content">
{{ data.hash | filterHash }}
<m-copy-btn :copyTxt="data.hash"></m-copy-btn>
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.status') }}</div>
<div class="content">
<tx-status size="small" :status="data.status"></tx-status>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.status') }}</div>
<div class="content">
<tx-status size="small" :status="data.status"></tx-status>
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.block.height') }}</div>
<div class="content">
{{ data.height }}
<div class="flex items-center">
<div class="label">{{ $t('lang.block.height') }}</div>
<div class="content">
{{ data.height }}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.time') }}</div>
<div class="content">
{{ data.blockTime | formatTime }}
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.time') }}</div>
<div class="content">
{{ data.blockTime | formatTime }}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.trade.sender') }}</div>
<div class="content">
<router-link
:to="`/address?address=${data.from}`"
class="text-footer-color"
>
{{ data.from | filterHash(10) }}
</router-link>
<div class="flex items-center">
<div class="label">{{ $t('lang.trade.sender') }}</div>
<div class="content">
<router-link
:to="`/address?address=${data.from}`"
class="text-footer-color"
>
{{ data.from | filterHash(10) }}
</router-link>
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.trade.receiver') }}</div>
<div class="content">
<router-link
:to="`/address?address=${data.to}`"
class="text-footer-color"
>
{{ data.to | filterHash(10) }}
</router-link>
<div class="flex items-center">
<div class="label">{{ $t('lang.trade.receiver') }}</div>
<div class="content">
<router-link
:to="`/address?address=${data.to}`"
class="text-footer-color"
>
{{ data.to | filterHash(10) }}
</router-link>
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.value') }}</div>
<div class="content">
{{
{ amount: data.amount, assets: data.assets, tx: data.inData }
| TradeValue
}}
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.value') }}</div>
<div class="content">
{{
{ amount: data.amount, assets: data.assets, tx: data.inData }
| TradeValue
}}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.fee') }}</div>
<div class="content">
{{ data.fee | filterFee }}
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.fee') }}</div>
<div class="content">
{{ data.fee | filterFee }}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.random') }}</div>
<div class="content">
{{ String(data.nonce) }}
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.random') }}</div>
<div class="content">
{{ String(data.nonce) }}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.execer') }}</div>
<div class="content">
{{ data.execer }}
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.execer') }}</div>
<div class="content">
{{ data.execer }}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.trade.func') }}</div>
<div class="content">
{{ data.actionName === 'unknown' ? 'none' : data.actionName }}
<div class="flex items-center">
<div class="label">{{ $t('lang.trade.func') }}</div>
<div class="content">
{{ data.actionName === 'unknown' ? 'none' : data.actionName }}
</div>
</div>
</div>
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.txType') }}</div>
<div class="content">
{{
data.txType === 'normalTx'
? $t('lang.txDetail.normalTx')
: $t('lang.txDetail.groupTx')
}}
<div class="flex items-center">
<div class="label">{{ $t('lang.txDetail.txType') }}</div>
<div class="content">
{{
data.txType === 'normalTx'
? $t('lang.txDetail.normalTx')
: $t('lang.txDetail.groupTx')
}}
</div>
</div>
</div>
<div class="">
<div class="label">{{ $t('lang.txDetail.inData') }}</div>
<div class="preBox">
<pre
class="preTxt"
contenteditable="true"
><code>{{data.inData | decodeTransferNote}}</code>
<div class="">
<div class="label">{{ $t('lang.txDetail.inData') }}</div>
<div class="preBox">
<pre
class="preTxt"
contenteditable="true"
><code>{{data.inData | decodeTransferNote}}</code>
</pre>
</div>
</div>
</div>
<div class="pb-3.5">
<div class="label">{{ $t('lang.txDetail.outData') }}</div>
<div class="preBox">
<pre
class="preTxt"
contenteditable="true"
><code>{{data.outData}}</code>
<div class="pb-3.5">
<div class="label">{{ $t('lang.txDetail.outData') }}</div>
<div class="preBox">
<pre
class="preTxt"
contenteditable="true"
><code>{{data.outData}}</code>
</pre>
</div>
</div>
</div>
</div>
......
tailwind.config.js
View file @ 1efbad30
......@@ -152,6 +152,7 @@ module.exports = {
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px",
twoPx: "2px",
},
borderWidth: {
DEFAULT: "1px",
......
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