feat(entry): 修改entry 入口样式

src/components/common/header.vue

@@ -29,11 +29,7 @@
         <ul class="nav-menu">
           <!-- menu -->
           <template v-for="m in menuRight">
-            <li
-              :key="m.$index"
-              class="menu-item"
-              v-if="userData != '' && userData != undefined"
-            >
+            <li :key="m.$index" class="menu-item" v-if="userData != '' && userData != undefined">
               <a
                 :class="perUrl === m.link.split('/')[1] ? 'navColor' : ''"
                 v-t="m.t"
@@ -60,19 +56,12 @@
                 slot="dropdown"
                 class="exRateDropdown"
               >
-                <el-dropdown-item
-                  v-for="items in exRate.list"
-                  :key="items.id"
-                  :command="items.id"
-                >
+                <el-dropdown-item v-for="items in exRate.list" :key="items.id" :command="items.id">
                   <div
                     class="dropdown-menu-item-inner"
                     :class="[{'is-active': exRate.current === items}]"
                   >
-                    <i
-                      class="menu-item-icon el-icon-check"
-                      v-if="exRate.current === items"
-                    ></i>
+                    <i class="menu-item-icon el-icon-check" v-if="exRate.current === items"></i>
                     <span class="menu-item-text">{{ $t(items.name) }}</span>
                   </div>
                 </el-dropdown-item>
@@ -98,19 +87,12 @@
                 slot="dropdown"
                 class="langDropdown"
               >
-                <el-dropdown-item
-                  v-for="item in lang.list"
-                  :key="item.lang"
-                  :command="item.lang"
-                >
+                <el-dropdown-item v-for="item in lang.list" :key="item.lang" :command="item.lang">
                   <div
                     class="dropdown-menu-item-inner"
                     :class="[{'is-active': lang.current === item}]"
                   >
-                    <i
-                      class="menu-item-icon el-icon-check"
-                      v-if="lang.current === item"
-                    ></i>
+                    <i class="menu-item-icon el-icon-check" v-if="lang.current === item"></i>
                     <span class="menu-item-text">{{ item.name }}</span>
                   </div>
                 </el-dropdown-item>
@@ -136,20 +118,13 @@
 
           <!-- 注册按钮 -->
           <li class="menu-item" v-if="userData == '' || userData == undefined">
-            <a
-              :href="'/login?perUrl=' + perUrl + '#/signUp'"
-              class="registered"
-            >
+            <a :href="'/login?perUrl=' + perUrl + '#/signUp'" class="registered">
               <span>{{ $t('login.signUp.btn') }}</span>
             </a>
           </li>
           <!-- 用户手机号码 -->
           <li class="menu-item" v-if="userData != '' && userData != undefined">
-            <el-dropdown
-              @command="switchPage"
-              trigger="click"
-              class="menu-item-inner nav-dropdown"
-            >
+            <el-dropdown @command="switchPage" trigger="click" class="menu-item-inner nav-dropdown">
               <span class="dropdown-link">
                 <span>
                   {{
@@ -211,7 +186,6 @@
 import {getCurrentLanguage} from '@/common/i18n';
 import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth';
 import {logOut} from '@/api/user';
-import Cookie from '@/common/cookie';
 import {FILE_URL} from '@/api/app';
 
 const Menu = {
@@ -303,7 +277,7 @@ export default {
         showClose: false,
         confirmButtonText: '确定',
         confirmButtonClass: 'btn-self-style',
-        callback: action => {
+        callback: () => {
           this.closeWindow();
         },
       });

src/pages/entry.vue

@@ -1,30 +1,122 @@
 <template>
-  <div>
+  <div class="entry-wrapper">
     <nav-header border-style="full"></nav-header>
+    <div class="entry-content">
+      <p class="entry-title">区块链金融交易所实训系统</p>
       <div class="usdList">
-      <div
-        class="usdItem"
-        v-for="(item, index) in [1, 2, 3]"
-        :key="index"
-        v-loading="loading"
-        element-loading-background="rgba(0, 0, 0, 0.2)"
-      >
+        <div class="usdItem wechat">
           <!-- 跳转到交易中心,携带交易对 -->
           <a href="javascript:;">
-          <p>微信 <i class="el-icon-star-off"></i></p>
-          <p>初始资金：100000000CNY</p>
-          <p>余额：100000000CNY</p>
+            <p>初始资金：100000CNY</p>
+            <p>可用资金：100000CNY</p>
+            <p>全部资金：100000CNY</p>
+          </a>
+        </div>
+        <div class="usdItem alipay">
+          <!-- 跳转到交易中心,携带交易对 -->
+          <a href="javascript:;">
+            <p>初始资金：100000CNY</p>
+            <p>可用资金：100000CNY</p>
+            <p>全部资金：100000CNY</p>
+          </a>
+        </div>
+        <div class="usdItem bank">
+          <!-- 跳转到交易中心,携带交易对 -->
+          <a href="javascript:;">
+            <p>初始资金：100000CNY</p>
+            <p>可用资金：100000CNY</p>
+            <p>全部资金：100000CNY</p>
           </a>
         </div>
       </div>
       <div class="usdList tabs">
         <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="BTC" name="BTC">余额：1</el-tab-pane>
-        <el-tab-pane label="USDT" name="USDT">余额：20</el-tab-pane>
-        <el-tab-pane label="EOS" name="EOS">余额：30</el-tab-pane>
-        <el-tab-pane label="ETH" name="ETH">余额：40</el-tab-pane>
+          <el-tab-pane label="BTC" name="BTC">
+            <div class="tabs-flex">
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="USDT" name="USDT">
+            <div class="tabs-flex">
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="EOS" name="EOS">
+            <div class="tabs-flex">
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="ETH" name="ETH">
+            <div class="tabs-flex">
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+              <div class="flex-1">
+                <p>总资产: 0</p>
+                <p>≈0 CNY</p>
+              </div>
+            </div>
+          </el-tab-pane>
         </el-tabs>
       </div>
+      <a href="javascript:;" class="entry-btn">
+        <img src="../images/entry/btn.png" />
+      </a>
+    </div>
     <Footer />
   </div>
 </template>
@@ -44,39 +136,140 @@ export default {
     NavHeader,
     Footer,
   },
+  methods: {
+    handleClick() {},
+  },
 };
 </script>
 
 <style scoped lang="scss">
+.entry-wrapper {
+  .entry-content {
+    background: url(../images/entry/bg.png);
+    background-size: cover;
+    .entry-btn {
+      width: 265px;
+      height: 30px;
+      display: block;
+      padding-bottom: 32px;
+      margin: 152px auto 0 auto;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        cursor: pointer;
+      }
+    }
+  }
+  .entry-title {
+    font-family: NotoSansHans-Regular;
+    font-size: 20px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 21px;
+    letter-spacing: 0px;
+    color: #00f5ff;
+    padding: 24px;
+    margin: 0;
+  }
+}
 .usdList {
   margin: 0 auto;
-  width: 1180px;
-  margin-top: 34px;
-  // margin: 2% auto 0;
+  width: 815px;
+  margin-top: 110px;
   display: flex;
   justify-content: space-between;
 
   .usdItem {
-    width: 28.5%;
+    width: 128px;
+    height: 122px;
     position: relative;
-    background: rgba(43, 44, 53, 1);
-    border: 1px solid rgba(71, 71, 71, 0.1);
-    border-radius: 4px 4px 4px 4px;
+    background-size: cover;
+
+    &.wechat {
+      background-image: url(../images/entry/wechat.png);
+    }
+    &.bank {
+      background-image: url(../images/entry/bank.png);
+    }
+    &.alipay {
+      background-image: url(../images/entry/alipay.png);
+    }
+    a {
+      display: block;
+    }
     p {
-      margin-left: 30px;
-      font-size: 16px;
-      color: #fff;
-      // margin-top: 9px;
+      font-family: NotoSansHans-DemiLight;
+      font-size: 10px;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0px;
+      color: #08c7cf;
+      margin: 6px 8px;
+      &:first-child {
+        margin-top: 58px;
+      }
     }
   }
   &.tabs {
     color: #fff;
+    background: url(../images/entry/wallet.png);
+    background-size: cover;
+    margin-top: 85px;
     .el-tabs {
-      width: 100%;
+      width: 755px;
+      margin: 60px auto 14px auto;
+      /deep/.el-tabs__header {
+        margin-bottom: 8px;
+      }
+    }
+    /DEEP/.el-tabs__nav {
+      /DEEP/.el-tabs__item {
+        font-family: NotoSansHans-Regular;
+        font-size: 15px;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 40px;
+        letter-spacing: 0px;
+        color: #00f5ff;
+        &.is-active {
+          color: #00f5ff;
+          font-size: 20px;
+          font-weight: bold;
+        }
+      }
+      /DEEP/.el-tabs__active-bar {
+        width: 0 !important;
+        height: 0 !important;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-bottom: 6px solid #00f5ff;
+        background: none;
+        margin-left: 5%;
+      }
+    }
+    /DEEP/.el-tabs__nav-wrap::after {
+      background-color: #00f5ff;
     }
     .el-tab-pane {
       width: 100%;
-      min-height: 300px;
+    }
+  }
+  .tabs-flex {
+    display: flex;
+    justify-content: space-between;
+    .flex-1 {
+      flex: 1;
+      p {
+        font-family: NotoSansHans-DemiLight;
+        font-size: 10px;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 15px;
+        letter-spacing: 0px;
+        color: #08c7cf;
+      }
     }
   }
 }