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">
            {{ (count.batchCount + count.premiumCount) || 0 }}
          </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">
            {{ count.batchCount }}
          </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">
            {{ count.premiumCount }}
          </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" @click="exportAddress">
          导出地址
        </div>
        <div class="app-container-head-right-button1" @click="downloadAddress()">
          下载 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>
      <div class="app-container-table-select">
        <el-scrollbar>
        <div class="scrollbar-flex-content">
          <div @click="selectAddressGroup(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>
        </el-scrollbar>
      </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="600">
            <template v-slot="scope">
              <div class="accountAddress">
                <div class="img">

                </div>
                <div class="walletName" v-if="scope.row.addressType === 0">
                  {{scope.row.groupName}}
                </div>
                <div class="walletName" v-if="scope.row.addressType === 1">
                  {{scope.row.groupName}}-{{(scope.$index+1) + (table.page-1)*5}}
                </div>
                <div class="walletAddress">
                  {{scope.row.address}}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="Gas消耗/USDT"
            width="250">
            <template v-slot="scope">
              <div class="gas">
                {{scope.row.totalGas}}
              </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">
                  批量
                </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">
                {{scope.row.lastOperTime}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template v-slot="scope">
              <div class="view" @click="viewAddress(scope.row)">
                查看
              </div>
            </template>
          </el-table-column>

        </el-table>
        <div class="pagination">
          <el-pagination
            small
            layout="prev, pager, next"
            :hide-on-single-page="false"
            :page-size="table.pageSize"
            :total="table.total"
            :current-page.sync="table.page"
            @current-change="pageChange">
          </el-pagination>
        </div>

      </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">
            {{drawerViewData.address}}
          </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">{{drawerViewData.gas}}</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">{{drawerViewData.balance}}</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">
            总计钱包: {{drawerViewData.total}}
          </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" style="margin-left: 26px;margin-right: -10px">
              Gas
              <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
            </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 drawerViewData.table" class="drawerView-container-table-main-item">
              <div class="activity">
                <div class="activity-item" v-if="item.taskType !== 'SWAP'" style="background: #F2C94C;">
                  {{item.taskName}}
                </div>
                <div class="activity-item" v-if="item.taskType === 'SWAP'" style="background: #6FCF97;">
                  {{item.taskName}}
                </div>
              </div>
              <div class="time">
                {{item.createTime}}
              </div>
              <div class="gas">
                {{parseFloat(item.gas).toFixed(4)}}
              </div>
              <div class="balance">
                {{parseFloat(item.amount).toFixed(4)}}
              </div>
              <div class="link">
                详情
              </div>

            </div>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="drawerViewData.total">
            </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="complete" @click="addBoutiqueAccount">
              <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" @click="addressArrDelete(index)">
                <img src="../../assets/address/delete.svg" alt="delete">
                删除
              </div>
            </div>
            <div class="input">
              <el-select v-model="item.chainId" 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="item.groupName" placeholder="输入钱包名称"></el-input>
            </div>
            <div class="input">
              <el-input v-model="item.address" placeholder="输入钱包地址"></el-input>
            </div>
          </div>
          <div class="addAddress" @click="addressArrPush">
            <img src="../../assets/address/add_circle.svg" alt="add_circle">
            新增观察地址
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerImport"
      :with-header="false"
      @closed="completeGeneration = 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="batchAddressObj.groupName" placeholder="输入批量钱包名称"></el-input>
            <div class="inputBox">
              <div>
                <div class="inputTitle">
                  选择公链
                </div>
                <el-select style="width: 280px" v-model="batchAddressObj.chainId" 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="batchAddressObj.numWallet" placeholder="输入生成数量"></el-input>
              </div>
            </div>
            <div class="inputBox">
              <div>
                <div class="inputTitle">
                  钱包密码
                </div>
                <el-input style="width: 280px" auto-complete="new-password" v-model="batchAddressObj.password" placeholder="设置钱包密码" show-password></el-input>
              </div>
              <div>
                <div class="inputTitle">
                  确认钱包密码
                </div>
                <el-input style="width: 230px" auto-complete="new-password" v-model="batchAddressObj.verifyPassword" placeholder="设置钱包密码" show-password></el-input>
              </div>
            </div>
            <div class="confirm" @click="addBatchAddress">
              <img v-if="!confirmLoading" src="../../assets/address/Stroke-2.svg" alt="Stroke">
              <div v-if="confirmLoading" style="width: 20px;height: 20px;margin-top: -2px">
                <Loading/>
              </div>
              开始生成
            </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">
                成功生成 {{addressList.length}} 个钱包地址
              </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" @click="copyAddress(item)">
                  {{item}}
                  <img src="../../assets/address/content_copy.svg" alt="content_copy">
                </div>
              </div>
              <div class="pagination">
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="addressList.length">
                </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" @click="downloadAddress(batchAddressObj.groupName)">
            <img src="../../assets/address/download.svg" alt="download">
            下载Keystore
          </div>
        </div>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import {
  addPremiumAddress,
  batchAddress,
  getCountAddress, getEventRecord,
  getGroupList,
  pageAddress
} from '@/api/adress'
import Axios from "axios";
import Loading from "@/components/Loading";
import {saveAs} from 'file-saver';
import Web3 from "web3";
import CryptoJS from "crypto-js";

export default {
  components: {Loading},
  data() {
    return {
      table:{
        page:1,
        pageSize:5,
        walletNameGroup:['精品号'],
        walletNameGroupIndex:0,
        total:0
      },
      count:{
        batchCount:0,
        premiumCount:0
      },
      tableData: [],
      exportTableData:[],
      drawerView:false,
      drawerViewData:{
        address:'',
        table:[],
        gas:0,
        balance:0,
        total:0
      },
      drawerAddress:false,
      addressArr:[
        {
          chainId:'',
          address:'',
          groupName:''
        }
      ],
      batchAddressObj:{
        chainId:'',
        groupName:'',
        numWallet:1,
        password:'',
        verifyPassword:''
      },
      options: [{
        value: '1',
        label: 'ETH'
      }],
      value: '',
      input: '',
      drawerImport:false,
      drawerImportSelect:1,
      completeGeneration:false,
      addressList:[],
      confirmLoading:false,
      url: process.env.VUE_APP_BASE_API,
    }
  },
  created() {
    this.getAddressGroupList();
    this.getCount()
  },
  methods: {
    getAddressGroupList(){
      getGroupList().then(res=>{
        this.table.walletNameGroup.push(...res)
        this.getAddressGroupAddress()
      })
    },
    getAddressGroupAddress(){
      let params
      if(this.table.walletNameGroupIndex === 0){
        params = {
          page:this.table.page,
          pageSize:this.table.pageSize,
          addressType:0
        }
      }else {
        params = {
          page:this.table.page,
          pageSize:this.table.pageSize,
          groupName:this.table.walletNameGroup[this.table.walletNameGroupIndex]
        }
      }

      pageAddress(params).then(res=>{
        this.tableData = res.records
        this.table.total = res.total
      })
    },
    selectAddressGroup(index){
      this.table.walletNameGroupIndex = index
      this.table.page = 1
      this.getAddressGroupAddress()
    },
    viewAddress(row){
      let params = {
        page:1,
        pageSize:10,
        queryValue:row.address
      }
      getEventRecord(params).then(res=>{
        this.drawerViewData.address = row.address
        this.drawerViewData.gas = row.totalGas
        this.drawerViewData.total = res.total
        this.drawerViewData.table = res.records
        this.drawerView = true
      })

    },
    addBoutiqueAccount(){
      let params = this.addressArr
      addPremiumAddress(params).then(()=>{
        this.success('添加地址成功')
        this.drawerAddress = false
        let obj =  {
          chainId:'',
          address:'',
          groupName:''
        }
        this.addressArr = [obj]
        this.getAddressGroupAddress()
      })
    },
    addressArrPush(){
      let obj =  {
        chainId:'',
        address:'',
        groupName:''
      }
      this.addressArr.push(obj)
    },
    addressArrDelete(index){
      this.addressArr.splice(index,1)
    },
    getCount(){
      getCountAddress().then(res=>{
        this.count.batchCount = res.batchCount
        this.count.premiumCount = res.premiumCount
      })
    },
    pageChange(page){
      this.table.page = page
      this.getAddressGroupAddress()
    },
    addBatchAddress(){
      if(this.batchAddressObj.password !== this.batchAddressObj.verifyPassword){
        this.error('密码不一致')
        return
      }
      // 要加密的数据
      const dataToEncrypt = JSON.parse(JSON.stringify(this.batchAddressObj.password));
      // console.log('输入的密码:', dataToEncrypt);
      // 获取当前北京时间
      const beijingDate = this.getCurrentBeijingTime();
      // 生成keyByte;
      const keyByte = this.generateKeyByteArray(beijingDate);
      // console.log('生成的toHex:', keyByte);
      // 加密数据
      const encryptedData = this.encryptData(dataToEncrypt, keyByte);
      // console.log('加密后的数据:', encryptedData);
      let params = {
        chainId : this.batchAddressObj.chainId,
        groupName : this.batchAddressObj.groupName,
        numWallet : this.batchAddressObj.numWallet,
        password : encryptedData
      }
      this.confirmLoading = true
      batchAddress(params).then(res=>{
        this.addressList = res
        this.completeGeneration = true
        this.confirmLoading = false
      })
    },
    // 获取当前北京时间并格式化为 YYYYMMDD
    getCurrentBeijingTime() {
      const localDate = new Date();
      const localTime = localDate.getTime(); // 获取当前本地时间的时间戳
      const localOffset = localDate.getTimezoneOffset() * 60000; // 本地时区偏移的毫秒数
      const utcTime = localTime + localOffset; // 转换为 UTC 时间
      const beijingOffset = 8 * 60 * 60000; // 北京时区偏移的毫秒数
      const beijingTime = utcTime + beijingOffset; // 加上北京时区偏移

      const beijingDate = new Date(beijingTime);
      const year = beijingDate.getFullYear();
      const month = (beijingDate.getMonth() + 1).toString().padStart(2, '0');
      const day = beijingDate.getDate().toString().padStart(2, '0');

      return `${year}${month}${day}${year}${month}${day}`;
    },
    // 生成
    generateKeyByteArray(content) {
      let bytes = [];
      let len, c;
      len = content.length;
      for (let i = 0; i < len; i++) {
        c = content[i];
        bytes.push(parseInt(c))
      }
      // console.log('当前北京时间的数组',bytes);
      return Web3.utils.bytesToHex(bytes).substring(2);
    },
    // 加密函数
    encryptData(word, keyStr) {
      let key = CryptoJS.enc.Hex.parse(keyStr)
      // console.log('CryptoJS生成的key',key);
      let encrypted = CryptoJS.AES.encrypt(word, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}) // 加密模式为ECB，补码方式为PKCS5Padding（也就是PKCS7）

      return encrypted.toString()

    },
    downloadAddress(el) {
      let groupName = this.table.walletNameGroup[this.table.walletNameGroupIndex]
      if(el){
        groupName = el
      }
          Axios.post(
            this.url + "ams/address/download/batch-keystore",
            {
              groupName: groupName,
            },
            {
              responseType: "arraybuffer",
              headers: {
                "Conntent-Type": "application/json; application/octet-stream;",
              },
            }
          )
            .then((response) => {
              let buffer = response.data;
              let view = new DataView(buffer);
              let str = "";
              for (let i = 0; i < view.byteLength; i++) {
                str += String.fromCharCode(view.getUint8(i));
              }
              if (str.includes(".json")) {
                this.downloadFile(response.data,groupName);
              } else {
                const data = JSON.parse(str);
                this.$message.error(data.message);
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
    },
    downloadFile(data,groupName) {
      let blob = new Blob([data], { type: "application/zip" });
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = groupName + ".zip";
      link.click();
      URL.revokeObjectURL(url); // 释放内存
      this.downloadModal = false;
    },
    exportAddress() {
      let params
      if(this.table.walletNameGroupIndex === 0){
        params = {
          page:1,
          pageSize:1000,
          addressType:0
        }
      }else {
        params = {
          page:1,
          pageSize:1000,
          groupName:this.table.walletNameGroup[this.table.walletNameGroupIndex]
        }
      }
      pageAddress(params).then(res=>{
        this.exportTableData = res.records
        this.exportTableData.forEach(item=>{

        })
      })
    },
    copyAddress(el){
      let address = el
      if (navigator.clipboard) {
        navigator.clipboard.writeText(address);
        this.success('复制成功')
      } else {
        let textarea = document.createElement('textarea');
        document.body.appendChild(textarea);
        // 隐藏此输入框
        textarea.style.position = 'fixed';
        textarea.style.clip = 'rect(0 0 0 0)';
        textarea.style.top = '10px';
        // 赋值
        textarea.value = address;
        // 选中
        textarea.select();
        // 复制
        document.execCommand('copy', true);
        // 移除输入框
        document.body.removeChild(textarea);
        this.success('复制成功')
      }
    },
    success(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success'
      });
    },
    error(message) {
      this.$notify.error({
        title: '错误',
        message: message
      });
    },
  }
}
</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-select{
      display: flex;
      align-items: center;
      gap:56px;
      //border-bottom: 4px solid #f2f4f7;
      width: 100%;
      margin-top: 28px;
      .scrollbar-flex-content {
        display: flex;
        gap:56px;
      }

      .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 #f9fbff;
        cursor: pointer;
        white-space:nowrap;
        margin-bottom: 20px;
      }
      .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;
        white-space:nowrap;
        margin-bottom: 20px;
      }
    }
    .app-container-table-screening{
      display: flex;
      align-items: center;
      gap:100px;
      padding: 20px 0;
      margin: 20px 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;
      }
      .pagination{
        position: fixed;
        bottom:36px
      }
    }
  }
  .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:60px;
        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;
          white-space: nowrap;
        }
      }
      .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: 120px;
            .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;
          }
          .gas{
            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;
    overflow: auto;
    .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;
          cursor: pointer;
        }
      }

    }
    .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;
            cursor: pointer;
          }
        }
        .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;
        cursor: pointer;
      }
    }
  }
  .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;
      cursor: pointer;
      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;
              cursor: pointer;
            }
          }
          .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;
        cursor: pointer;
      }
    }
  }
}
::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>