|
|
@@ -1,112 +1,1309 @@
|
|
|
<template>
|
|
|
- <div class="">
|
|
|
- <el-row style="margin: 0 0 48px 0">
|
|
|
- <el-col :span="2">
|
|
|
- <div class="">
|
|
|
- <div class="totalCount-number">{{ this.totalCount }}</div>
|
|
|
- <div class="totalCount-text">地址数量</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
+ <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">
|
|
|
|
|
|
- <el-col :span="3" :offset="15">
|
|
|
- <el-button type="primary" class="btn-add" @click="generateAddress">
|
|
|
- 批量生成地址
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="3">
|
|
|
- <el-button type="primary" class="btn-add" @click="downloadAddress">
|
|
|
- 批量下载地址
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </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>
|
|
|
|
|
|
- <div class="block-title">地址列表</div>
|
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
- <el-table-column prop="address" label="地址账号" width="420">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- {{row.groupName}} <span style="margin-left:10px"></span> {{row.address}}
|
|
|
- </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>
|
|
|
|
|
|
- <!-- <el-table-column prop="groupName" label="地址组"> </el-table-column> -->
|
|
|
- <el-table-column prop="" label="gas消耗"> </el-table-column>
|
|
|
- <el-table-column prop="" label="地址余额"> </el-table-column>
|
|
|
- <el-table-column prop="addressType" label="地址类型">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-tag v-if="row.addressType === 1" type="info">批量号</el-tag>
|
|
|
- <el-tag v-else>精品号</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="createTime" label="创建时间"> </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page.sync="page"
|
|
|
- :page-sizes="[10, 15, 25, 35]"
|
|
|
- :page-size.sync="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="totalCount"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- <SaveOrUpdate ref="SaveOrUpdate" />
|
|
|
- <download ref="download"></download>
|
|
|
+ </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"
|
|
|
+ @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="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>
|
|
|
-import { pageAddress, batchAddress } from "@/api/adress";
|
|
|
-import SaveOrUpdate from "./SaveOrUpdate.vue";
|
|
|
-import Download from "./download.vue";
|
|
|
export default {
|
|
|
- components: { SaveOrUpdate, Download },
|
|
|
data() {
|
|
|
return {
|
|
|
- url: process.env.VUE_APP_BASE_API,
|
|
|
- address: {
|
|
|
- password: undefined,
|
|
|
- groupName: undefined,
|
|
|
- numWallet: undefined,
|
|
|
+ head: {
|
|
|
+ all:85,
|
|
|
+ bulk:85,
|
|
|
+ boutique:85
|
|
|
},
|
|
|
- tableData: [],
|
|
|
- page: 1,
|
|
|
- pageSize: 10,
|
|
|
- totalCount: 0,
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getAddresses();
|
|
|
+ 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: {
|
|
|
- generateAddress() {
|
|
|
- this.$refs.SaveOrUpdate.addressModal = true;
|
|
|
- this.$refs.SaveOrUpdate.resetField();
|
|
|
- this.$refs.SaveOrUpdate.resetUserForm();
|
|
|
- },
|
|
|
- downloadAddress() {
|
|
|
- this.$refs.download.downloadModal = true;
|
|
|
- this.$refs.download.resetField();
|
|
|
- this.$refs.download.resetUserForm();
|
|
|
- },
|
|
|
- getAddresses() {
|
|
|
- pageAddress({
|
|
|
- page: this.page,
|
|
|
- pageSize: this.pageSize,
|
|
|
- }).then((res) => {
|
|
|
- this.tableData = res.records;
|
|
|
- this.totalCount = res.total;
|
|
|
- });
|
|
|
- },
|
|
|
|
|
|
- handleSizeChange(val) {
|
|
|
- this.pageSize = val;
|
|
|
- this.page = 1;
|
|
|
- this.getAddresses();
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.page = val;
|
|
|
- this.getAddresses();
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {},
|
|
|
-};
|
|
|
-</script>
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|
|
|
+
|
