|
|
@@ -38,7 +38,7 @@
|
|
|
<img src="../../assets/address/upload.svg" alt="upload">
|
|
|
导入
|
|
|
</div>
|
|
|
- <div class="app-container-head-right-button2">
|
|
|
+ <div class="app-container-head-right-button2" @click="drawerAddress = true">
|
|
|
<img src="../../assets/address/eyeglasses.svg" alt="eyeglasses">
|
|
|
观察地址
|
|
|
</div>
|
|
|
@@ -125,7 +125,7 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column align="right">
|
|
|
<template v-slot="scope">
|
|
|
- <div class="view">
|
|
|
+ <div class="view" @click="drawerView = true">
|
|
|
查看
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -134,8 +134,168 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="drawerView"
|
|
|
+ :with-header="false">
|
|
|
+ <div class="drawerView-container">
|
|
|
+ <div class="drawerView-container-head">
|
|
|
+ <div class="drawerView-container-title">
|
|
|
+ 钱包名称
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-walletAddress">
|
|
|
+ 0x00581a605...ca48ddebe60b2a4ca4da
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-statistics">
|
|
|
+ <div class="drawerView-container-statistics-item">
|
|
|
+ <div class="drawerView-container-statistics-item-title">
|
|
|
+ 累计花费
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-statistics-item-amounts">
|
|
|
+ <span class="number">89.11</span>
|
|
|
+ <span class="currency">USDT</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-statistics-item">
|
|
|
+ <div class="drawerView-container-statistics-item-title">
|
|
|
+ 剩余本金
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-statistics-item-amounts">
|
|
|
+ <span class="number">700.00</span>
|
|
|
+ <span class="currency">USDT</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-main">
|
|
|
+ <div class="drawerView-container-title">
|
|
|
+ 钱包活动
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-total">
|
|
|
+ 总计钱包: 222
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-table-screening">
|
|
|
+ <div class="drawerView-container-table-screening-item">
|
|
|
+ 钱包活动
|
|
|
+ <img src="../../assets/address/filter_list.svg" alt="filter_list">
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-table-screening-item">
|
|
|
+ 时间
|
|
|
+ <img src="../../assets/address/filter_list.svg" alt="filter_list">
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-table-screening-item">
|
|
|
+ 余额
|
|
|
+ <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-table-main">
|
|
|
+ <div v-for="item in drawerViewTableData" class="drawerView-container-table-main-item">
|
|
|
+ <div class="activity">
|
|
|
+ <div class="activity-item" v-if="item.activity === 'Mint'" style="background: #F2C94C;">
|
|
|
+ {{item.activity}}
|
|
|
+ </div>
|
|
|
+ <div class="activity-item" v-if="item.activity === 'Swap'" style="background: #6FCF97;">
|
|
|
+ {{item.activity}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ {{item.time}}
|
|
|
+ </div>
|
|
|
+ <div class="balance">
|
|
|
+ {{item.balance}}
|
|
|
+ </div>
|
|
|
+ <div class="link">
|
|
|
+ 详情
|
|
|
+ </div>
|
|
|
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerView-container-footer">
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div class="manageAccount">
|
|
|
+ <img src="../../assets/address/page_info.svg" alt="page_info">
|
|
|
+ 管理账号
|
|
|
+ </div>
|
|
|
+ <div class="disassociation">
|
|
|
+ <img src="../../assets/address/link_off.svg" alt="link_off">
|
|
|
+ 取消关联
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="drawerAddress"
|
|
|
+ :with-header="false">
|
|
|
+ <div class="drawerAddress-container">
|
|
|
+ <div class="drawerAddress-container-head">
|
|
|
+ <div class="drawerAddress-container-head-left">
|
|
|
+ <div class="drawerAddress-container-title">
|
|
|
+ 添加地址
|
|
|
+ </div>
|
|
|
+ <div class="drawerAddress-container-tip">
|
|
|
+ 添加观察地址
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerAddress-container-head-right">
|
|
|
+ <div class="cancellation">
|
|
|
+ <img src="../../assets/address/close.svg" alt="close">
|
|
|
+ 取消
|
|
|
+ </div>
|
|
|
+ <div class="complete">
|
|
|
+ <img src="../../assets/address/done_all.svg" alt="done_all">
|
|
|
+ 完成
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerAddress-container-main">
|
|
|
+ <div class="item" v-for="(item,index) in addressArr">
|
|
|
+ <div class="title">
|
|
|
+ <div class="name">
|
|
|
+ 钱包地址
|
|
|
+ </div>
|
|
|
+ <div class="delete">
|
|
|
+ <img src="../../assets/address/delete.svg" alt="delete">
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <el-select v-model="value" placeholder="选择公链">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input v-model="input" placeholder="输入钱包名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <el-select v-model="value" placeholder="选择类型">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input v-model="input" placeholder="输入钱包地址"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addAddress" @click="addressArr.push({})">
|
|
|
+ <img src="../../assets/address/add_circle.svg" alt="add_circle">
|
|
|
+ 新增观察地址
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -152,7 +312,8 @@ export default {
|
|
|
walletNameGroup:['精品号','钱包组名称','钱包组名称'],
|
|
|
walletNameGroupIndex:0,
|
|
|
},
|
|
|
- tableData: [{
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
projectName:'Zk',
|
|
|
totalNumber:5,
|
|
|
completedNumber:2,
|
|
|
@@ -188,7 +349,53 @@ export default {
|
|
|
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: '',
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -251,6 +458,7 @@ export default {
|
|
|
line-height: 20px;
|
|
|
color: #2980ff;
|
|
|
border: 1px solid #2980FF;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.app-container-head-right-button2{
|
|
|
width: 148px;
|
|
|
@@ -266,6 +474,7 @@ export default {
|
|
|
font-size: 15px;
|
|
|
line-height: 20px;
|
|
|
color: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -408,6 +617,277 @@ export default {
|
|
|
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-walletAddress{
|
|
|
+ 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;
|
|
|
}
|
|
|
}
|
|
|
}
|
million
