|
|
@@ -31,10 +31,12 @@
|
|
|
</div>
|
|
|
<div class="app-container-head-right">
|
|
|
<div class="app-container-head-right-button1">
|
|
|
- <img src="../../assets/address/vertical_align_bottom.svg" alt="vertical_align_bottom">
|
|
|
- 导出
|
|
|
+ 导出地址
|
|
|
</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>
|
|
|
@@ -294,6 +296,164 @@
|
|
|
</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>
|
|
|
@@ -395,7 +555,21 @@ export default {
|
|
|
}],
|
|
|
value: '',
|
|
|
input: '',
|
|
|
-
|
|
|
+ drawerImport:false,
|
|
|
+ drawerImportSelect:0,
|
|
|
+ completeGeneration:false,
|
|
|
+ addressList:[
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -801,7 +975,7 @@ export default {
|
|
|
color: #181818;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
- .drawerAddress-container-walletAddress{
|
|
|
+ .drawerAddress-container-tip{
|
|
|
font-weight: 700;
|
|
|
font-size: 12px;
|
|
|
line-height: 16px;
|
|
|
@@ -891,6 +1065,222 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .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;
|
million
