ams-backend/front/admin-front/src/views/address/index.vue

<template>
  <div class="app-container">
    <div class="app-container-head">
      <div class="app-container-head-left">
        <div class="app-container-head-left-item">
          <div class="app-container-head-left-item-count">
            {{ head.all }}
          </div>
          <div class="app-container-head-left-item-name">
            所有
          </div>
        </div>
        <div class="app-container-head-left-divider"/>
        <div class="app-container-head-left-item">
          <div class="app-container-head-left-item-count">
            {{ head.bulk }}
          </div>
          <div class="app-container-head-left-item-name">
            批处理账户
          </div>
        </div>
        <div class="app-container-head-left-divider"/>
        <div class="app-container-head-left-item">
          <div class="app-container-head-left-item-count">
            {{ head.boutique }}
          </div>
          <div class="app-container-head-left-item-name">
            精品账户
          </div>
        </div>
      </div>
      <div class="app-container-head-right">
        <div class="app-container-head-right-button1">
          导出地址
        </div>
        <div class="app-container-head-right-button1">
          下载 KeyStore
        </div>
        <div class="app-container-head-right-button1" @click="drawerImport = true">
          <img src="../../assets/address/upload.svg" alt="upload">
          导入
        </div>
        <div class="app-container-head-right-button2" @click="drawerAddress = true">
          <img src="../../assets/address/eyeglasses.svg" alt="eyeglasses">
          观察地址
        </div>
      </div>
    </div>
    <div class="app-container-table">
      <div class="app-container-table-title">
        <div class="app-container-table-title-left">
          地址列表
        </div>
        <div class="app-container-table-title-right">
          总计数量: {{table.totalNumber}}
        </div>
      </div>
      <div class="app-container-table-select">
        <div @click="table.walletNameGroupIndex = index" v-for="(item,index) in table.walletNameGroup" :class="index === table.walletNameGroupIndex ? 'app-container-table-select-item-active' : 'app-container-table-select-item'">
          {{item}}
        </div>
      </div>
      <div class="app-container-table-screening">
        <div class="app-container-table-screening-item">
          时间
          <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
        </div>
        <div class="app-container-table-screening-item">
          Gas消耗
          <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
        </div>
      </div>
      <div class="app-container-table-main">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="账户地址"
            width="490">
            <template v-slot="scope">
              <div class="accountAddress">
                <div class="img">

                </div>
                <div class="walletName">
                  钱包名称
                </div>
                <div class="walletAddress">
                  0x00581a605...ca48ddebe60b2a4ca4da
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="Gas消耗/USDT"
            width="410">
            <template v-slot="scope">
              <div class="gas">
                783239.22
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="type"
            width="255">
            <template v-slot="scope">
              <div class="type">
                <div class="bulk" v-if="table.walletNameGroupIndex !== 0">
                  <img src="../../assets/address/precision_manufacturing.svg" alt="precision_manufacturing">
                  批量3
                </div>
                <div class="boutique" v-if="table.walletNameGroupIndex === 0">
                  <img src="../../assets/address/award_star.svg" alt="award_star">
                  精品号
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="最后操作时间"
            width="180">
            <template v-slot="scope">
              <div class="lastTime">
                19点20分
              </div>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template v-slot="scope">
              <div class="view" @click="drawerView = true">
                查看
              </div>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>
    <el-drawer
      :visible.sync="drawerView"
      :with-header="false">
      <div class="drawerView-container">
        <div class="drawerView-container-head">
          <div class="drawerView-container-title">
            钱包名称
          </div>
          <div class="drawerView-container-walletAddress">
            0x00581a605...ca48ddebe60b2a4ca4da
          </div>
          <div class="drawerView-container-statistics">
            <div class="drawerView-container-statistics-item">
              <div class="drawerView-container-statistics-item-title">
                累计花费
              </div>
              <div class="drawerView-container-statistics-item-amounts">
                <span class="number">89.11</span>
                <span class="currency">USDT</span>
              </div>
            </div>
            <div class="drawerView-container-statistics-item">
              <div class="drawerView-container-statistics-item-title">
                剩余本金
              </div>
              <div class="drawerView-container-statistics-item-amounts">
                <span class="number">700.00</span>
                <span class="currency">USDT</span>
              </div>
            </div>
          </div>
        </div>
        <div class="drawerView-container-main">
          <div class="drawerView-container-title">
            钱包活动
          </div>
          <div class="drawerView-container-total">
            总计钱包: 222
          </div>
          <div class="drawerView-container-table-screening">
            <div class="drawerView-container-table-screening-item">
              钱包活动
              <img src="../../assets/address/filter_list.svg" alt="filter_list">
            </div>
            <div class="drawerView-container-table-screening-item">
              时间
              <img src="../../assets/address/filter_list.svg" alt="filter_list">
            </div>
            <div class="drawerView-container-table-screening-item">
              余额
              <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
            </div>
          </div>
          <div class="drawerView-container-table-main">
            <div v-for="item in drawerViewTableData" class="drawerView-container-table-main-item">
              <div class="activity">
                <div class="activity-item" v-if="item.activity === 'Mint'" style="background: #F2C94C;">
                  {{item.activity}}
                </div>
                <div class="activity-item" v-if="item.activity === 'Swap'" style="background: #6FCF97;">
                  {{item.activity}}
                </div>
              </div>
              <div class="time">
                {{item.time}}
              </div>
              <div class="balance">
                {{item.balance}}
              </div>
              <div class="link">
                详情
              </div>

            </div>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
          <div class="manageAccount">
            <img src="../../assets/address/page_info.svg" alt="page_info">
            管理账号
          </div>
          <div class="disassociation">
            <img src="../../assets/address/link_off.svg" alt="link_off">
            取消关联
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerAddress"
      :with-header="false">
      <div class="drawerAddress-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="drawerAddress-container-title">
              添加地址
            </div>
            <div class="drawerAddress-container-tip">
              添加观察地址
            </div>
          </div>
          <div class="drawerAddress-container-head-right">
            <div class="cancellation">
              <img src="../../assets/address/close.svg" alt="close">
              取消
            </div>
            <div class="complete">
              <img src="../../assets/address/done_all.svg" alt="done_all">
              完成
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="item" v-for="(item,index) in addressArr">
            <div class="title">
              <div class="name">
                钱包地址
              </div>
              <div class="delete">
                <img src="../../assets/address/delete.svg" alt="delete">
                删除
              </div>
            </div>
            <div class="input">
              <el-select v-model="value" placeholder="选择公链">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="input" placeholder="输入钱包名称"></el-input>
            </div>
            <div class="input">
              <el-select v-model="value" placeholder="选择类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input v-model="input" placeholder="输入钱包地址"></el-input>
            </div>
          </div>
          <div class="addAddress" @click="addressArr.push({})">
            <img src="../../assets/address/add_circle.svg" alt="add_circle">
            新增观察地址
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerImport"
      :with-header="false">
      <div class="drawerImport-container">
        <div class="drawerImport-container-head">
          <div class="drawerImport-container-head-left">
            <div class="drawerImport-container-title">
              导入钱包地址
            </div>
            <div class="drawerImport-container-tip">
              仅支持Keystore导入
            </div>
          </div>
        </div>
        <div class="drawerImport-container-main" v-if="!completeGeneration">
          <div class="select">
            <div :class="drawerImportSelect === 0 ? 'select-item-active' : 'select-item'" @click="drawerImportSelect = 0">
              导入钱包
            </div>
            <div :class="drawerImportSelect === 1 ? 'select-item-active' : 'select-item'" @click="drawerImportSelect = 1">
              创建钱包
            </div>
          </div>
          <div class="importWallet" v-if="drawerImportSelect === 0">
            <div class="upload">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将Keystore文件拖到此处，或<em>上传文件</em></div>
              </el-upload>
            </div>
            <div class="inputTitle">
              批量钱包名称
            </div>
            <div class="batchWalletName">
              <el-input v-model="input" placeholder="选择/输入批量钱包名称"></el-input>
              <el-select v-model="value" placeholder="选择类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="inputTitle">
              钱包密码
            </div>
            <el-input v-model="input" placeholder="设置钱包密码"></el-input>
            <div class="confirm">
              <img src="../../assets/address/file_download_done.svg" alt="file_download_done">
              确认导入
            </div>
          </div>
          <div class="createWallet" v-if="drawerImportSelect === 1">
            <div class="inputTitle">
              批量钱包名称
            </div>
            <el-input v-model="input" placeholder="输入批量钱包名称"></el-input>
            <div class="inputBox">
              <div>
                <div class="inputTitle">
                  选择公链
                </div>
                <el-select style="width: 280px" v-model="value" placeholder="选择类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div>
                <div class="inputTitle">
                  生成数量
                </div>
                <el-input style="width: 230px" v-model="input" placeholder="输入生成数量"></el-input>
              </div>
            </div>
            <div class="inputBox">
              <div>
                <div class="inputTitle">
                  钱包密码
                </div>
                <el-input style="width: 280px" v-model="input" placeholder="设置钱包密码"></el-input>
              </div>
              <div>
                <div class="inputTitle">
                  确认钱包密码
                </div>
                <el-input style="width: 230px" v-model="input" placeholder="设置钱包密码"></el-input>
              </div>
            </div>
            <div class="confirm" @click="completeGeneration = true">
              <img src="../../assets/address/Stroke-2.svg" alt="Stroke">
              开始生成
            </div>
            <div class="tip">
              <div class="title">
                <img src="../../assets/address/tips_and_updates.svg" alt="tips_and_updates">
                提示
              </div>
              <div class="description">
                此密码为您账户钱包的 Keystore 密码，请妥善保管，
                系统无法为您找回。
              </div>
            </div>
          </div>
        </div>
        <div class="drawerImport-container-main" v-if="completeGeneration">
          <div class="completeTip">
            <img src="../../assets/address/Rectangle.png" alt="Rectangle">
            <div class="description">
              <div class="address">
                成功生成 100 个钱包地址
              </div>
              <div class="tip">
                请牢记您的 Keystore 文件及密码，系统无法帮你找回
              </div>
            </div>
          </div>
          <div class="addressListBox">
            <div class="addressList">
              <div class="addressList-item" v-for="(item,index) in addressList">
                <div class="name">
                  Address-{{index+1}}
                </div>
                <div class="address">
                  {{item}}
                  <img src="../../assets/address/content_copy.svg" alt="content_copy">
                </div>
              </div>
              <div class="pagination">
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="drawerImport-container-footer" v-if="completeGeneration">
          <div class="exportAddress">
            <img src="../../assets/address/upload.svg" alt="upload">
            导出地址
          </div>
          <div class="download">
            <img src="../../assets/address/download.svg" alt="download">
            下载Keystore
          </div>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
export default {
  data() {
    return {
      head: {
        all:85,
        bulk:85,
        boutique:85
      },
      table:{
        totalNumber:22222,
        walletNameGroup:['精品号','钱包组名称','钱包组名称'],
        walletNameGroupIndex:0,
      },
      tableData: [
        {
        projectName:'Zk',
        totalNumber:5,
        completedNumber:2,
        status:0,
        gas:1,
        officialWebsite:"https://nytimes.com",
        startTime:'16/08/2013',
        endTime:'16/08/2013'
      }, {
        projectName:'LayerZero',
        totalNumber:4,
        completedNumber:1,
        status:1,
        gas:23,
        officialWebsite:"https://nytimes.com",
        startTime:'16/08/2013',
        endTime:'16/08/2013'
      }, {
        projectName:'StarkNet',
        totalNumber:1,
        completedNumber:0,
        status:2,
        gas:23,
        officialWebsite:"https://nytimes.com",
        startTime:'16/08/2013',
        endTime:'16/08/2013'
      }, {
        projectName:'Sei',
        totalNumber:3,
        completedNumber:2,
        status:3,
        gas:23,
        officialWebsite:"https://nytimes.com",
        startTime:'16/08/2013',
        endTime:'16/08/2013'
      }
      ],
      drawerView:false,
      drawerViewTableData:[
        {
          activity:'Mint',
          time:'06:42',
          txId:'',
          balance:89.23
        },
        {
          activity:'Swap',
          time:'06:42',
          txId:'',
          balance:89.23
        },
        {
          activity:'Mint',
          time:'06:42',
          txId:'',
          balance:89.23
        },
        {
          activity:'Swap',
          time:'06:42',
          txId:'',
          balance:89.23
        },
        {
          activity:'Swap',
          time:'06:42',
          txId:'',
          balance:89.23
        },
        ],
      drawerAddress:false,
      addressArr:[
        {},
        {}
      ],
      options: [{
        value: '选项1',
        label: 'ETH'
      }],
      value: '',
      input: '',
      drawerImport:false,
      drawerImportSelect:0,
      completeGeneration:false,
      addressList:[
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
      ]
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .app-container-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .app-container-head-left{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap:60px;
      .app-container-head-left-item{
        display: flex;
        flex-direction: column;
        gap:8px;
        .app-container-head-left-item-count{
          font-weight: 700;
          font-size: 21px;
          line-height: 28px;
          color: #181818;
        }
        .app-container-head-left-item-name{
          font-weight: 700;
          font-size: 12px;
          line-height: 16px;
          color: #8e8f91;
        }
      }
      .app-container-head-left-divider{
        width: 1px;
        height: 50px;
        border-right:1px solid #e4e6ea;
      }
    }

    .app-container-head-right{
      display: flex;
      align-items: center;
      gap:24px;
      .app-container-head-right-button1{
        width: 148px;
        height: 52px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: #f9fbff;
        border-radius: 10px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px;
        color: #2980ff;
        border: 1px solid #2980FF;
        cursor: pointer;
      }
      .app-container-head-right-button2{
        width: 148px;
        height: 52px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: #4A76FF;
        border-radius: 10px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
  }
  .app-container-table{
    margin-top: 80px;
    .app-container-table-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .app-container-table-title-left{
        font-weight: 700;
        font-size: 21px;
        line-height: 28px;
        color: #181818;
      }
      .app-container-table-title-right{
        font-weight: 400;
        font-size: 21px;
        line-height: 28px;
        color: #898a8c;
      }
    }
    .app-container-table-select{
      display: flex;
      align-items: center;
      gap:56px;
      border-bottom: 4px solid #f2f4f7;
      width: 100%;
      margin-top: 28px;
      .app-container-table-select-item{
        font-weight: 400;
        font-size: 17px;
        line-height: 22px;
        color: #ABABAB;
        padding-bottom: 16px;
        margin-bottom: -4px;
        border-bottom: 4px solid #f2f4f7;
        cursor: pointer;
      }
      .app-container-table-select-item-active{
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #2980FF;
        padding-bottom: 16px;
        margin-bottom: -4px;
        border-bottom: 4px solid #2980FF;
        cursor: pointer;
      }
    }
    .app-container-table-screening{
      display: flex;
      align-items: center;
      gap:100px;
      padding: 20px 0;
      margin: 40px 0;
      border-top: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      .app-container-table-screening-item{
        display: flex;
        align-items: center;
        gap:6px;
        font-weight: 400;
        font-size: 15px;
        line-height: 20px;
        color: #4d4d4e;
      }
    }
    .app-container-table-main {
      .accountAddress{
        display: flex;
        align-items: center;
        gap:12px;
        margin-left: 14px;
        .img{
          width: 26px;
          height: 26px;
          background: black;
          border-radius: 50%;
        }
        .walletName{
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #181818;
        }
        .walletAddress{
          font-weight: 400;
          font-size: 15px;
          line-height: 20px;
          color: #181818;
        }
      }
      .gas{
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #2980FF;
      }
      .type{
        .bulk{
          width: fit-content;
          display: flex;
          align-items: center;
          justify-content: center;
          gap:4px;
          padding: 5px 10px;
          border: 1px solid #E0E0E0;
          border-radius: 30px;
          background: #edf2ff;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          color: #222222;
        }
        .boutique {
          width: fit-content;
          display: flex;
          align-items: center;
          justify-content: center;
          gap:4px;
          padding: 5px 10px;
          border-radius: 30px;
          background: #222222;
          font-weight: 700;
          font-size: 12px;
          line-height: 16px;
          color: #F2C94C;
        }
      }
      .lastTime{
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #898a8c;
      }
      .view{
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        color: #2980FF;
        margin-right: 14px;
        cursor: pointer;
      }
    }
  }
  .drawerView-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    .drawerView-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      .drawerView-container-title{
        font-weight: 700;
        font-size: 21px;
        line-height: 28px;
        color: #181818;
        margin-bottom: 8px;
      }
      .drawerView-container-walletAddress{
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #94c0ff;
        margin-bottom: 24px;
      }
      .drawerView-container-statistics{
        display: flex;
        align-items: center;
        gap:80px;
        .drawerView-container-statistics-item{
          display: flex;
          flex-direction: column;
          gap: 4px;
          .drawerView-container-statistics-item-title{
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
            color: #8c8c8c;
          }
          .drawerView-container-statistics-item-amounts{
            font-weight: 700;
            color: #222222;
            .number{
              font-size: 17px;
              line-height: 22px;
            }
            .currency{
              font-size: 12px;
              line-height: 16px;
            }
          }
        }
      }
    }
    .drawerView-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      .drawerView-container-title{
        font-weight: 700;
        font-size: 21px;
        line-height: 28px;
        color: #181818;
        margin-bottom: 8px;
      }
      .drawerView-container-total{
        font-weight: 700;
        font-size: 12px;
        line-height: 16px;
        color: #8e8f91;
      }
      .drawerView-container-table-screening{
        margin-top: 28px;
        margin-bottom: 24px;
        height: 52px;
        display: flex;
        align-items: center;
        gap:120px;
        border-bottom: 1px solid #f5f5f5;
        border-top: 1px solid #f5f5f5;
        .drawerView-container-table-screening-item{
          display: flex;
          align-items: center;
          gap:6px;
          font-weight: 400;
          font-size: 15px;
          line-height: 20px;
          color: #4d4d4e;
        }
      }
      .drawerView-container-table-main{
        display: flex;
        flex-direction: column;
        gap:16px;
        .drawerView-container-table-main-item{
          display: flex;
          align-items: center;
          height: 30px;
          .activity{
            width: 210px;
            .activity-item{
              width: 72px;
              height: 30px;
              border-radius: 30px;
              font-weight: 700;
              font-size: 14px;
              line-height: 18px;
              color: #222222;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .time{
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
            color: #ABABAB;
            width: 200px;
          }
          .link{
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
            color: #2980FF;
            white-space: nowrap;
          }
          .balance{
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
            color: #222222;
            width: 120px;
          }
        }
      }
    }
    .drawerView-container-footer {
      height: 84px;
      padding: 30px 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .pagination{
        width: 250px;
      }
      .manageAccount{
        display: flex;
        align-items: center;
        gap:12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #222222;
      }
      .disassociation{
        display: flex;
        align-items: center;
        gap:12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #EB5757;
      }
    }
  }
  .drawerAddress-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    .drawerAddress-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .drawerAddress-container-head-left{
        .drawerAddress-container-title{
          font-weight: 700;
          font-size: 21px;
          line-height: 28px;
          color: #181818;
          margin-bottom: 8px;
        }
        .drawerAddress-container-tip{
          font-weight: 700;
          font-size: 12px;
          line-height: 16px;
          color: #919191;
        }
      }
      .drawerAddress-container-head-right{
        display: flex;
        align-items: center;
        gap:48px;
        .cancellation{
          width: 118px;
          height: 52px;
          background: #E0E0E0;
          border-radius: 10px;
          gap: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #828282;
        }
        .complete{
          width: 118px;
          height: 52px;
          border: 2px solid #4A76FF;
          border-radius: 10px;
          gap:4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #2980FF;
        }
      }

    }
    .drawerAddress-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap:20px;
      .item{
        display: flex;
        flex-direction: column;
        gap:12px;
        .title{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name{
            font-weight: 400;
            font-size: 17px;
            line-height: 22px;
            color: #181818;
          }
          .delete{
            display: flex;
            align-items: center;
            gap:4px;
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
            color: #EB5757;
          }
        }
        .input{
          display: flex;
          align-items: center;
          gap:24px;
        }
      }
      .addAddress{
        display: flex;
        align-items: center;
        gap:12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #2980FF;
      }
    }
  }
  .drawerImport-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    .drawerImport-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .drawerImport-container-head-left{
        .drawerImport-container-title{
          font-weight: 700;
          font-size: 21px;
          line-height: 28px;
          color: #181818;
          margin-bottom: 8px;
        }
        .drawerImport-container-tip{
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          color: #919191;
        }
      }
    }
    .drawerImport-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      .select{
        display: flex;
        align-items: center;
        gap:56px;
        border-bottom: 4px solid #f2f4f7;
        margin-bottom: 40px;
        .select-item{
          font-weight: 400;
          font-size: 17px;
          line-height: 22px;
          color: #ABABAB;
          padding-bottom: 16px;
          margin-bottom: -4px;
          border-bottom: 4px solid #f2f4f7;
          cursor: pointer;
        }
        .select-item-active{
          font-weight: 700;
          font-size: 17px;
          line-height: 22px;
          color: #2980FF;
          padding-bottom: 16px;
          margin-bottom: -4px;
          border-bottom: 4px solid #2980FF;
          cursor: pointer;
        }
      }
      .inputTitle{
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #383838;
        margin-bottom: 12px;
      }
      .confirm{
      width: 100%;
      height: 53px;
      background: #2980FF;
      display: flex;
      align-items: center;
      justify-content: center;
      gap:8px;
      margin-top: 28px;

      font-weight: 700;
      font-size: 16px;
      line-height: 21px;
      color: #FFFFFF;
    }
      .importWallet{
        .upload{
          display: flex;
          justify-content: center;
          margin-bottom: 40px;
        }
        .batchWalletName{
          display: flex;
          align-items: center;
          gap:20px;
          margin-bottom: 28px;
        }

      }
      .createWallet{
        .inputBox{
          display: flex;
          gap:20px;
          margin-top: 28px;
          width: 100%;
        }
        .tip{
          display: flex;
          flex-direction: column;
          gap:9px;
          margin-top: 36px;
          .title{
            display: flex;
            align-items: center;
            gap:4px;
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #EB5757;
          }
          .description{
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            color: #EB5757;
          }
        }
      }
      .completeTip{
        display: flex;
        align-items: center;
        justify-content: center;
        gap:8px;
        .description{
          display: flex;
          flex-direction: column;
          gap:8px;
          .address{
            font-weight: 700;
            font-size: 21px;
            line-height: 28px;
            color: #181818;
          }
          .tip{
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            color: #8e8f91;
          }
        }
      }
      .addressListBox{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        .addressList{
          width: 402px;
          background: #FFFFFF;
          border: 1px solid #F5F5F5;
          border-radius: 6px;
          padding: 20px 34px;
          display: flex;
          flex-direction: column;
          gap:8px;
          .addressList-item{
            display: flex;
            flex-direction: column;
            gap:4px;
            .name{
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
              color: #9c9c9c;
            }
            .address{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-weight: 500;
              font-size: 12px;
              line-height: 16px;
              color: #212121;
            }
          }
          .pagination{
            display: flex;
            justify-content: center;
            margin-top: 20px;
          }
        }
      }
    }
    .drawerImport-container-footer{
      width: 100%;
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 40px;
      gap:60px;
      .exportAddress{
        display: flex;
        align-items: center;
        gap:12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #2980FF;
      }
      .download{
        display: flex;
        align-items: center;
        gap:12px;
        font-weight: 700;
        font-size: 17px;
        line-height: 22px;
        color: #222222;
      }
    }
  }
}
::v-deep .el-table__body{
  -webkit-border-vertical-spacing: 20px;
  background: #f9fbff;
}
::v-deep .el-table__row{
  border-radius: 10px;
  background: white;
  height: 58px;
}
::v-deep .el-table__row>td{
  border: none;
}
::v-deep .el-table th.is-leaf{
  border: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #4d4d4e ;
}
::v-deep .el-table::before{
  height: 0;
}
</style>