|
|
@@ -21,7 +21,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="app-container-head-right">
|
|
|
- <div class="app-container-head-right-button">
|
|
|
+ <div class="app-container-head-right-button" @click="drawerProject = true">
|
|
|
<img src="../../assets/airdrop/add.svg" alt="add">
|
|
|
添加项目
|
|
|
</div>
|
|
|
@@ -49,7 +49,8 @@
|
|
|
<div class="app-container-table-main">
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
- style="width: 100%">
|
|
|
+ style="width: 100%"
|
|
|
+ @row-click="drawerInfo = true">
|
|
|
<el-table-column
|
|
|
label="项目名称"
|
|
|
width="280">
|
|
|
@@ -135,6 +136,191 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="drawerProject"
|
|
|
+ :with-header="false">
|
|
|
+ <div class="drawerProject-container">
|
|
|
+ <div class="drawerProject-container-head">
|
|
|
+ <div class="drawerProject-container-head-left">
|
|
|
+ <div class="drawerProject-container-title">
|
|
|
+ 添加项目
|
|
|
+ </div>
|
|
|
+ <div class="drawerProject-container-tip">
|
|
|
+ 空投项目: 85
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerProject-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="drawerProject-container-main">
|
|
|
+ <div class="title1">
|
|
|
+ 基本信息
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ multiple
|
|
|
+ :limit="3"
|
|
|
+ :on-exceed="handleExceed">
|
|
|
+ <div class="uploadImg">
|
|
|
+ <img src="../../assets/airdrop/add_photo_alternate.svg" alt="add_photo_alternate">
|
|
|
+ 上传图片
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <el-input v-model="input" placeholder="输入项目名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="input" placeholder="预计投入USDT"></el-input>
|
|
|
+ <el-input v-model="input" placeholder="输入项目相关URL"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="drawerInfo"
|
|
|
+ :with-header="false"
|
|
|
+ @closed="record = false">
|
|
|
+ <div class="drawerInfo-container">
|
|
|
+ <div class="drawerInfo-container-head" v-if="record === false">
|
|
|
+ <div class="drawerInfo-container-head-left">
|
|
|
+ <div class="drawerInfo-container-title">
|
|
|
+ 基本信息
|
|
|
+ </div>
|
|
|
+ <div class="drawerInfo-container-projectInfo" >
|
|
|
+ <div class="left">
|
|
|
+ <div class="avatar">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <div class="projectName">
|
|
|
+ zkSync Era
|
|
|
+ </div>
|
|
|
+ <div class="link">
|
|
|
+ <img src="../../assets/airdrop/language.svg" alt="language">
|
|
|
+ https://zksync.io/
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="type">
|
|
|
+ <img src="../../assets/airdrop/done_all.svg" alt="done_all">
|
|
|
+ 已空投
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerInfo-container-main" v-if="record === false">
|
|
|
+ <div class="title1" style="margin-bottom: 8px">
|
|
|
+ 任务
|
|
|
+ </div>
|
|
|
+ <div class="title2">
|
|
|
+ 总任务数:2
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-item" v-for="(item,index) in 3">
|
|
|
+ <div class="title">
|
|
|
+ task
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <div class="one">
|
|
|
+ Bridge
|
|
|
+ </div>
|
|
|
+ <div class="two">
|
|
|
+ 任务名称
|
|
|
+ </div>
|
|
|
+ <div class="three" @click="record = true">
|
|
|
+ 执行记录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerInfo-container-footer" v-if="record === false">
|
|
|
+ <div class="item" style="color: #222222">
|
|
|
+ <img src="../../assets/airdrop/page_info.svg" alt="page_info">
|
|
|
+ 管理项目
|
|
|
+ </div>
|
|
|
+ <div class="item" style="color: #EB5757">
|
|
|
+ <img src="../../assets/airdrop/link_off.svg" alt="link_off">
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="drawerInfo-container-head" v-if="record === true">
|
|
|
+ <div class="drawerInfo-container-head-left">
|
|
|
+ <div class="title1" style="margin-bottom: 8px">
|
|
|
+ 基本信息
|
|
|
+ </div>
|
|
|
+ <div class="title2">
|
|
|
+ 交互任务批量执行记录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="drawerInfo-container-main" v-if="record === true">
|
|
|
+ <div class="title1" style="margin-bottom: 8px">
|
|
|
+ 交互记录
|
|
|
+ </div>
|
|
|
+ <div class="title2">
|
|
|
+ 总计交互任务:3
|
|
|
+ </div>
|
|
|
+ <div class="table-th">
|
|
|
+ <div class="time">
|
|
|
+ 时间
|
|
|
+ </div>
|
|
|
+ <div class="total">
|
|
|
+ 累计金额
|
|
|
+ </div>
|
|
|
+ <div class="gas">
|
|
|
+ 总GAS
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ 状态
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-list">
|
|
|
+ <div class="table-item" v-for="(item,index) in recordList">
|
|
|
+ <div class="time">
|
|
|
+ {{item.time}}
|
|
|
+ </div>
|
|
|
+ <div class="total">
|
|
|
+ {{item.total}}
|
|
|
+ </div>
|
|
|
+ <div class="gas">
|
|
|
+ {{item.gas}}
|
|
|
+ </div>
|
|
|
+ <div class="status" v-if="item.status === 0">
|
|
|
+ <img src="../../assets/airdrop/check.svg" alt="check"> 已完成
|
|
|
+ </div>
|
|
|
+ <div class="status" style="color: #2980FF" v-if="item.status === 1">
|
|
|
+ <img src="../../assets/airdrop/clock_loader_60.svg" alt="clock_loader_60"> 进行中
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="drawerInfo-container-footer" v-if="record === true">
|
|
|
+ <div class="item" style="color: #222222">
|
|
|
+ <img src="../../assets/airdrop/page_info.svg" alt="page_info">
|
|
|
+ 管理
|
|
|
+ </div>
|
|
|
+ <div class="item" style="color: #EB5757">
|
|
|
+ <img src="../../assets/airdrop/link_off.svg" alt="link_off">
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -150,7 +336,8 @@ export default {
|
|
|
table:{
|
|
|
totalNumber:22222
|
|
|
},
|
|
|
- tableData: [{
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
projectName:'Zk',
|
|
|
totalNumber:5,
|
|
|
completedNumber:2,
|
|
|
@@ -186,11 +373,47 @@ export default {
|
|
|
officialWebsite:"https://nytimes.com",
|
|
|
startTime:'16/08/2013',
|
|
|
endTime:'16/08/2013'
|
|
|
- }]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ drawerProject:false,
|
|
|
+ input:'',
|
|
|
+ drawerInfo:false,
|
|
|
+ record:false,
|
|
|
+ recordList:[
|
|
|
+ {
|
|
|
+ time:'09-09',
|
|
|
+ total:'金额',
|
|
|
+ gas:'Gas',
|
|
|
+ status:0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time:'09-09',
|
|
|
+ total:'金额',
|
|
|
+ gas:'Gas',
|
|
|
+ status:0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time:'09-09',
|
|
|
+ total:'金额',
|
|
|
+ gas:'Gas',
|
|
|
+ status:1,
|
|
|
+ },
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
|
|
+ },
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ return this.$confirm(`确定移除 ${ file.name }？`);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -348,6 +571,344 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .drawerProject-container{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ .title1{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .title2{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #8e8f91;
|
|
|
+ }
|
|
|
+ .drawerProject-container-head{
|
|
|
+ padding: 56px 40px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .drawerProject-container-head-left{
|
|
|
+ .drawerProject-container-title{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .drawerProject-container-tip{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #919191;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawerProject-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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .drawerProject-container-main{
|
|
|
+ padding: 36px 40px;
|
|
|
+ background: #f9fbff;
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:24px;
|
|
|
+ .info{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:24px;
|
|
|
+ .uploadImg{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:4px;
|
|
|
+ width: 124px;
|
|
|
+ height: 52px;
|
|
|
+ border: 1px solid #2980FF;
|
|
|
+ border-radius: 40px;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawerInfo-container{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ .title1{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .title2{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #8e8f91;
|
|
|
+ }
|
|
|
+ .drawerInfo-container-head{
|
|
|
+ padding: 56px 40px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .drawerInfo-container-head-left{
|
|
|
+ width: 100%;
|
|
|
+ .drawerInfo-container-title{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 21px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #181818;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .drawerInfo-container-projectInfo{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:24px;
|
|
|
+ .avatar{
|
|
|
+ width: 52px;
|
|
|
+ height: 52px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: black;
|
|
|
+ }
|
|
|
+ .infoBox{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:8px;
|
|
|
+ .projectName{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .link{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:12px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ text-decoration-line: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .type{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:4px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ width: 117px;
|
|
|
+ height: 44px;
|
|
|
+ border: 1px solid #4A76FF;
|
|
|
+ border-radius: 30px;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .drawerInfo-container-main{
|
|
|
+ padding: 36px 40px;
|
|
|
+ background: #f9fbff;
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .list{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:24px;
|
|
|
+ margin-top: 24px;
|
|
|
+ .list-item{
|
|
|
+ .title{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #181818;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .infoBox{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:24px;
|
|
|
+ width: 100%;
|
|
|
+ .one{
|
|
|
+ width: 107px;
|
|
|
+ height: 52px;
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .two{
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 52px;
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ }
|
|
|
+ .three{
|
|
|
+ width: 100px;
|
|
|
+ height: 52px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #d6e1ff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #2980FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-th{
|
|
|
+ margin-top: 42px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #7d7e80;
|
|
|
+ width: 100%;
|
|
|
+ .time{
|
|
|
+ width: 190px;
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ width: 125px;
|
|
|
+ }
|
|
|
+ .gas{
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .status{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-list{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:28px;
|
|
|
+ .table-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .time{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #222222;
|
|
|
+ width: 190px;
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ width: 125px;
|
|
|
+ }
|
|
|
+ .gas{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .status{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap:4px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .drawerInfo-container-footer{
|
|
|
+ width: 100%;
|
|
|
+ height: 84px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 30px 40px;
|
|
|
+ gap:56px;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:12px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
::v-deep .el-table__row>td{
|
|
|
border: none;
|
|
|
@@ -362,5 +923,9 @@ export default {
|
|
|
::v-deep .el-table::before{
|
|
|
height: 0;
|
|
|
}
|
|
|
+::v-deep .el-input__inner{
|
|
|
+ height: 52px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
</style>
|
|
|
|
million
