<template>
  <div>
    <nav-header border-style="full"></nav-header>
    <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)"
      >
        <!-- 跳转到交易中心,携带交易对 -->
        <a href="javascript:;">
          <p>微信 <i class="el-icon-star-off"></i></p>
          <p>初始资金：100000000CNY</p>
          <p>余额：100000000CNY</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-tabs>
    </div>
    <Footer />
  </div>
</template>

<script>
import NavHeader from '@/components/common/header';
import Footer from '@/components/common/footer';

export default {
  name: 'entry',
  data() {
    return {
      activeName: 'BTC',
    };
  },
  components: {
    NavHeader,
    Footer,
  },
};
</script>

<style scoped lang="scss">
.usdList {
  margin: 0 auto;
  width: 1180px;
  margin-top: 34px;
  // margin: 2% auto 0;
  display: flex;
  justify-content: space-between;

  .usdItem {
    width: 28.5%;
    position: relative;
    background: rgba(43, 44, 53, 1);
    border: 1px solid rgba(71, 71, 71, 0.1);
    border-radius: 4px 4px 4px 4px;
    p {
      margin-left: 30px;
      font-size: 16px;
      color: #fff;
      // margin-top: 9px;
    }
  }
  &.tabs {
    color: #fff;
    .el-tabs {
      width: 100%;
    }
    .el-tab-pane {
      width: 100%;
      min-height: 300px;
    }
  }
}
</style>
