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

change style of footer

Browse Source
This commit is contained in:
cebgcontract 2022-03-16 12:47:20 +08:00
parent 7d0917f354
commit 099127d24f
4 changed files with 122 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/index/DesktopFooter.vue
View File

@ -1,17 +1,19 @@
<template>
<footer class="footer" >
<div class="community-bar">
<div class="title">JOIN OUR COMMUNITY</div>
<div class="icon-list">
<a href="https://discord.gg/8dWX6jpcME">
<img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
</a>
<a href="https://t.me/CEBG_official">
<img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
</a>
<a href="https://twitter.com/CEBG_GAME">
<img src="@/assets/202202/logowhite@2x.png" alt="twitter"/>
</a>
<div class="bar-container">
<div class="title">JOIN OUR COMMUNITY</div>
<div class="icon-list">
<a href="https://discord.gg/8dWX6jpcME">
<img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
</a>
<a href="https://t.me/CEBG_official">
<img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
</a>
<a href="https://twitter.com/CEBG_GAME">
<img src="@/assets/202202/logowhite@2x.png" alt="twitter"/>
</a>
</div>
</div>
</div>
<div class="link-list">
@ -66,6 +68,7 @@ export default class extends Vue {
</script>
<style lang="scss" scoped>
@import '../../scss/breakpoints.scss';
.footer {
display: flex;
height: 410px;
@ -75,18 +78,22 @@ export default class extends Vue {
width: 100%;
height: 100px;
background-image: linear-gradient(to right, #FFDF2C , #FF8613);
display: flex;
align-items: center;
justify-content: space-between;
.title{
color: #404040;
font-size: 26px;
margin-left: 395px;
}
.icon-list{
margin-right: 366px;
.bar-container {
display: flex;
gap: 64px;
align-items: center;
height: 100px;
width: 100%;
max-width: 1200px;
justify-content: space-between;
margin: 0 auto;
.title{
color: #404040;
font-size: 26px;
}
.icon-list{
display: flex;
gap: 64px;
}
}
}
.link-list{
@ -117,4 +124,64 @@ export default class extends Vue {
color: #B4B4B4;
}
}
.footer.resize{
.community-bar{
.bar-container {
max-width: 1440px;
}
}
}
// 1440
@include media('<wide') {
.footer.resize{
.community-bar{
.bar-container{
max-width: 1024px;
.title{
font-size: 20px;
}
.icon-list{
img{
width: 40px;
}
}
}
}
}
}
// 1024
@include media('<desktop') {
.footer.resize{
.community-bar{
.title{
}
.icon-list{
}
}
}
}
// 768
@include media('<tablet') {
.footer.resize{
.community-bar{
.title{
}
.icon-list{
}
}
}
}
// 320
@include media('<tablet') {
.footer.resize{
.community-bar{
.title{
}
.icon-list{
}
}
}
}
</style>

5
src/components/layout/BaseFooter.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="">
<desktop-footer v-if="!mobile"></desktop-footer>
<desktop-footer v-if="!mobile" :class="{'resize': autoSize}" ></desktop-footer>
<mobile-footer v-if="mobile"></mobile-footer>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Component, Vue, Prop } from 'vue-property-decorator'
import { AppModule, DeviceType } from '@/store/modules/app'
import DesktopFooter from '@/components/index/DesktopFooter.vue'
import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
@ -18,6 +18,7 @@ import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
}
})
export default class BaseFooter extends Vue {
@Prop() private autoSize: boolean
get mobile() {
return AppModule.device === DeviceType.Mobile
}

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

@ -13,8 +13,13 @@
</div>
</div>
<div class="tab-bar-net">
<div class="tab-item active"><span>KCC</span></div>
<div class="tab-item"><span>BSC</span></div>
<div class="tab-item"
v-for="n in nets"
@click='changeNet(n)'
:class="{'active': currentNet===n}"
>
<span>{{n}}</span>
</div>
</div>
<div class="wallet">
<total-balance></total-balance>
@ -48,6 +53,8 @@ import PlaceholderPanel from '@/components/market/wallet/PlaceholderPanel.vue'
}
})
export default class WalletPanel extends Vue {
private currentNet = 'kcc'
private nets = ['kcc', 'bsc']
private coinList: ICoinData[] = [
{
name: 'CEBG Coin',
@ -109,6 +116,10 @@ export default class WalletPanel extends Vue {
duration: 5 * 1000
})
}
changeNet(net: string) {
this.currentNet = net;
}
}
</script>
<style lang="scss" scoped>
@ -132,6 +143,7 @@ export default class WalletPanel extends Vue {
font-size: 1em;
line-height: 1.5em;
padding: 0.5em 2.125em;
text-transform: uppercase;
height: 2em;
color: #bcadf2;
background: transparent;

32
src/views/desktop/Wallet.vue
View File

@ -4,8 +4,8 @@
<div class="content-container">
<wallet-panel></wallet-panel>
</div>
<base-footer></base-footer>
</div>
<base-footer class="market-footer" :auto-size="true"></base-footer>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@ -27,23 +27,23 @@ export default class Wallet extends Vue {
</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;
width: 100%;
}
@include media('<desktop') {
.content-container{
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
margin-top: 30px;
margin-top: 1.75rem;
margin-left: 0;
width: 100%;
}
@include media('<desktop') {
.content-container{
margin-top: 1.75rem;
margin-left: 0;
width: 100%;
}
}
// Phone
}
// Phone
@include media('<tablet') {
.content-container {
max-width: 100%;