crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wallet页面增加链切换按钮

Browse Source
This commit is contained in:
cebgcontract 2022-03-15 17:26:54 +08:00
parent b97f45243e
commit 0e3689a2d1
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/market/TopMenu.vue
View File

@ -13,13 +13,13 @@
<a class="menu-item" href="/">
<div class="item" >Home</div>
</a>
<a class="menu-item" href="javascript:void(0)" @click.stop="comingSoon">
<a class="menu-item" href="/official" >
<div class="item" :class="{'active': currentTab==='official'}">
Official Shop
<div class="active-bottom" v-if="currentTab==='official'"></div>
</div>
</a>
<a class="menu-item" href="javascript:void(0)" @click.stop="comingSoon">
<a class="menu-item" href="/market" >
<div class="item " :class="{'active': currentTab==='market'}">
Marketplace
<div class="active-bottom" v-if="currentTab==='market'"></div>
@ -63,8 +63,8 @@
</div>
<div class="nav overflow" v-if="mobile" :class="{'show': menuShow}">
<a class="navItem" href="/">Home</a>
<a class="navItem" href="javascript:void(0);" @click.stop="comingSoon">Official Shop</a>
<a class="navItem dash" href="javascript:void(0);" @click.stop="comingSoon">Marketplace</a>
<a class="navItem" href="/official" >Official Shop</a>
<a class="navItem dash" href="/market">Marketplace</a>
<label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
<button v-if="!logined" class="general-btn connectButton mobile" @click="collectToWallet">
<span>Connect Wallet</span>

32
src/components/market/wallet/WalletPanel.vue
View File

@ -13,6 +13,10 @@
alt="icCopy"
src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
</div>
<div class="tab-bar-net">
<div class="tab-item active"><span>KCC</span></div>
<div class="tab-item"><span>BSC</span></div>
</div>
<div class="wallet">
<total-balance></total-balance>
<coin-card v-for="d in coinList" :coin-data="d" :key="d.symbol"></coin-card>
@ -115,7 +119,33 @@ export default class WalletPanel extends Vue {
box-sizing: border-box;
color: white;
width: 1440px;
.tab-bar-net {
display: flex;
flex-direction: row;
margin-bottom: 5px;
.tab-item{
display: flex;
justify-content: center;
align-items: center;
flex: none;
cursor: pointer;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
padding: 0.5em 2.125em;
height: 2em;
color: #bcadf2;
background: transparent;
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
&:not(:first-child) {
margin-left: -0.5em;
}
&.active {
color: #ffffff;
background: #413482;
}
}
}
.code {
display: flex;
align-self: flex-start;