增加wallet页面
This commit is contained in:
cebgcontract
parent
35f70c58ee
commit
12961d81f7
106
src/components/market/wallet/CoinCard.vue
Normal file
106
src/components/market/wallet/CoinCard.vue
Normal file
File diff suppressed because one or more lines are too long
111
src/components/market/wallet/GameCoinCard.vue
Normal file
111
src/components/market/wallet/GameCoinCard.vue
Normal file
File diff suppressed because one or more lines are too long
80
src/components/market/wallet/TotalBalance.vue
Normal file
80
src/components/market/wallet/TotalBalance.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="total-balance" :class="{'mobile': mobile}">
|
||||
<div class="content">
|
||||
<div class="name"><span>Other Currencies</span></div>
|
||||
<div class="coin">-- WBNB</div>
|
||||
<div class="subCoin space">-- USD</div>
|
||||
<div class="coin">-- BUSD</div>
|
||||
<div class="subCoin">-- USD</div>
|
||||
<div class="wrongNetwork"><span>Wrong network</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { AppModule, DeviceType } from '@/store/modules/app'
|
||||
|
||||
@Component({
|
||||
name: 'TotalBalance',
|
||||
components: {
|
||||
}
|
||||
})
|
||||
export default class TotalBalance extends Vue {
|
||||
get mobile() {
|
||||
return AppModule.device === DeviceType.Mobile
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.total-balance {
|
||||
width: 25em;
|
||||
height: 12.125em;
|
||||
background: #291a61;
|
||||
display: flex;
|
||||
border-radius: 0.5em;
|
||||
.content {
|
||||
padding: 1.25em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
.wrongNetwork {
|
||||
margin-top: 0.5em;
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 0.8125em;
|
||||
line-height: 1.23;
|
||||
color: #ff602e;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-bottom: 1em;
|
||||
span {
|
||||
color: #997bff;
|
||||
font-weight: bold;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
.coin {
|
||||
font-weight: bolder;
|
||||
font-size: 1.375em;
|
||||
line-height: 1.27;
|
||||
color: #ffffff;
|
||||
}
|
||||
.subCoin {
|
||||
font-weight: bold;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.42;
|
||||
color: #466bf7;
|
||||
}
|
||||
.space {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-balance.mobile{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
171
src/components/market/wallet/WalletPanel.vue
Normal file
171
src/components/market/wallet/WalletPanel.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="wallet-container">
|
||||
<div class="header">
|
||||
<div class="label">Wallet</div>
|
||||
</div>
|
||||
<div class="horizonalBar"></div>
|
||||
<div class="code"><span class="uuid">0x42448c...fc2c0231</span>
|
||||
<img
|
||||
class="icCopy" width="16" height="16"
|
||||
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="wallet">
|
||||
<total-balance></total-balance>
|
||||
<coin-card></coin-card>
|
||||
<coin-card></coin-card>
|
||||
</div>
|
||||
<div class="header ingame"><span class="label">Ingame Currency</span>
|
||||
</div>
|
||||
<div class="horizonalBar"></div>
|
||||
<div class="wallet">
|
||||
<game-coin-card></game-coin-card>
|
||||
<game-coin-card></game-coin-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import TotalBalance from '@/components/market/wallet/TotalBalance.vue'
|
||||
import CoinCard from '@/components/market/wallet/CoinCard.vue'
|
||||
import GameCoinCard from '@/components/market/wallet/GameCoinCard.vue'
|
||||
|
||||
@Component({
|
||||
name: 'WalletPanel',
|
||||
components: {
|
||||
GameCoinCard,
|
||||
CoinCard,
|
||||
TotalBalance
|
||||
}
|
||||
})
|
||||
export default class WalletPanel extends Vue {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../scss/breakpoints.scss';
|
||||
|
||||
.wallet-container {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
width: 1440px;
|
||||
|
||||
.code {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1.25em;
|
||||
.uuid {
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
.ingame {
|
||||
margin-top: 3.625em;
|
||||
}
|
||||
|
||||
.icCopy {
|
||||
margin-left: 3.625em;
|
||||
align-self: center;
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-bottom: 0.75em;
|
||||
|
||||
.label {
|
||||
font-weight: bolder;
|
||||
font-size: 1.375em;
|
||||
line-height: 1.27;
|
||||
color: #ffffff;
|
||||
&.disable {
|
||||
@include media('<tablet') {
|
||||
color: #3c2885;
|
||||
}
|
||||
}
|
||||
&.ingameCurrency {
|
||||
margin-left: 2.1875em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizonalBar {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #563cb8;
|
||||
margin-bottom: 1.75em;
|
||||
}
|
||||
|
||||
.wallet {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@include media('<tablet') {
|
||||
.wallet-container {
|
||||
width: 100%;
|
||||
.show {
|
||||
display: flex !important;
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.headerCoin {
|
||||
margin-top: 28px;
|
||||
}
|
||||
.ingame {
|
||||
margin-top: 28px;
|
||||
}
|
||||
.wallet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.coinCard {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.walletIngame {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet
|
||||
@include media('>=tablet', '<desktop') {
|
||||
.wallet-container {
|
||||
.ingame {
|
||||
margin-top: 38px;
|
||||
}
|
||||
.headerCoin {
|
||||
margin-top: 28px;
|
||||
}
|
||||
.wallet {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.coinCard {
|
||||
width: 293px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
|
||||
<div class="content-container">
|
||||
<wallet-panel></wallet-panel>
|
||||
</div>
|
||||
<base-footer></base-footer>
|
||||
</div>
|
||||
</template>
|
||||
@ -8,18 +11,56 @@
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import TopMenu from '@/components/market/TopMenu.vue'
|
||||
import BaseFooter from '@/components/layout/BaseFooter.vue'
|
||||
import WalletPanel from '@/components/market/wallet/WalletPanel.vue'
|
||||
|
||||
@Component({
|
||||
name: 'Wallet',
|
||||
components: {
|
||||
WalletPanel,
|
||||
BaseFooter,
|
||||
TopMenu
|
||||
}
|
||||
})
|
||||
export default class Wallet extends Vue {
|
||||
currentTab = ''
|
||||
currentTab = '';
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../../scss/breakpoints.scss';
|
||||
.content-container{
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
@include media('<desktop') {
|
||||
.content-container{
|
||||
margin-top: 1.75rem;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// Phone
|
||||
@include media('<tablet') {
|
||||
.content-container {
|
||||
max-width: 100%;
|
||||
padding: 3rem 1.67rem;
|
||||
font-size: 16px;
|
||||
@include media('<=phone') {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet
|
||||
@include media('>=tablet', '<desktop') {
|
||||
.content-container {
|
||||
width: 768px;
|
||||
max-width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user