change style of footer

src/components/index/DesktopFooter.vue

@@ -1,17 +1,19 @@
 <template>
   <footer class="footer" >
     <div class="community-bar">
-      <div class="title">JOIN OUR COMMUNITY</div>
+      <div class="bar-container"> 
-      <div class="icon-list">
+        <div class="title">JOIN OUR COMMUNITY</div>
-        <a href="https://discord.gg/8dWX6jpcME">
+        <div class="icon-list">
-          <img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
+          <a href="https://discord.gg/8dWX6jpcME">
-        </a>
+            <img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
-        <a href="https://t.me/CEBG_official">
+          </a>
-          <img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
+          <a href="https://t.me/CEBG_official">
-        </a>
+            <img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
-        <a href="https://twitter.com/CEBG_GAME">
+          </a>
-          <img src="@/assets/202202/logowhite@2x.png" alt="twitter"/>
+          <a href="https://twitter.com/CEBG_GAME">
-        </a>
+            <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;
+    .bar-container {
-    align-items: center;
-    justify-content: space-between;
-    .title{
-      color: #404040;
-      font-size: 26px;
-      margin-left: 395px;
-    }
-    .icon-list{
-      margin-right: 366px;
       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>

src/components/layout/BaseFooter.vue

@@ -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
   }

src/components/market/wallet/WalletPanel.vue

@@ -13,8 +13,13 @@
       </div>
     </div>
     <div class="tab-bar-net">
-      <div class="tab-item active"><span>KCC</span></div>
+      <div class="tab-item" 
-      <div class="tab-item"><span>BSC</span></div>
+        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;

src/views/desktop/Wallet.vue

@@ -4,8 +4,8 @@
     <div class="content-container">
       <wallet-panel></wallet-panel>
     </div>
-    <base-footer></base-footer>
+    <base-footer class="market-footer" :auto-size="true"></base-footer>
-  </div>
+</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;
+    margin-top: 1.75rem;
-    display: flex;
+    margin-left: 0;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 50px;
-    margin-top: 30px;
     width: 100%;
   }
-  @include media('<desktop') {
+}
-    .content-container{
+// Phone
-      margin-top: 1.75rem;
-      margin-left: 0;
-      width: 100%;
-    }
-  }
-  // Phone
 @include media('<tablet') {
   .content-container {
     max-width: 100%;