|
|
@@ -1,49 +1,141 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form ref="form" :model="form" label-width="120px">
|
|
|
- <el-form-item label="Activity name">
|
|
|
- <el-input v-model="form.name" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="Activity zone">
|
|
|
- <el-select v-model="form.region" placeholder="please select your zone">
|
|
|
- <el-option label="Zone one" value="shanghai" />
|
|
|
- <el-option label="Zone two" value="beijing" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="Activity time">
|
|
|
- <el-col :span="11">
|
|
|
- <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="2" class="line">-</el-col>
|
|
|
- <el-col :span="11">
|
|
|
- <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
|
|
|
- </el-col>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="Instant delivery">
|
|
|
- <el-switch v-model="form.delivery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="Activity type">
|
|
|
- <el-checkbox-group v-model="form.type">
|
|
|
- <el-checkbox label="Online activities" name="type" />
|
|
|
- <el-checkbox label="Promotion activities" name="type" />
|
|
|
- <el-checkbox label="Offline activities" name="type" />
|
|
|
- <el-checkbox label="Simple brand exposure" name="type" />
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="Resources">
|
|
|
- <el-radio-group v-model="form.resource">
|
|
|
- <el-radio label="Sponsor" />
|
|
|
- <el-radio label="Venue" />
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="Activity form">
|
|
|
- <el-input v-model="form.desc" type="textarea" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmit">Create</el-button>
|
|
|
- <el-button @click="onCancel">Cancel</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <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.projectsNumber }}
|
|
|
+ </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.ongoingNumber }}
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-left-item-name">
|
|
|
+ 正在进行
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-container-head-right">
|
|
|
+ <div class="app-container-head-right-button">
|
|
|
+ <img src="../../assets/airdrop/add.svg" alt="add">
|
|
|
+ 添加项目
|
|
|
+ </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-screening">
|
|
|
+ <div class="app-container-table-screening-item">
|
|
|
+ 账号类型
|
|
|
+ <img src="../../assets/airdrop/filter_list.svg" alt="filter_list">
|
|
|
+ </div>
|
|
|
+ <div class="app-container-table-screening-item">
|
|
|
+ 余额
|
|
|
+ <img src="../../assets/airdrop/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="280">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="projectName">
|
|
|
+ {{scope.row.projectName}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="任务总数/已完成"
|
|
|
+ width="385">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="progress">
|
|
|
+ <div class="score">
|
|
|
+ {{scope.row.totalNumber}} / {{scope.row.completedNumber}}
|
|
|
+ </div>
|
|
|
+ <div class="progressBar">
|
|
|
+ <el-progress :show-text="false" :stroke-width="12" :percentage="(scope.row.completedNumber/scope.row.totalNumber*100)"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="状态"
|
|
|
+ width="215">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div v-if="scope.row.status === 0" class="status-0" style="color: #828282">
|
|
|
+ <img src="../../assets/airdrop/file_download_done.svg" alt="file_download_done">
|
|
|
+ 已空投
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.status === 1" class="status-0" style="color: #EB5757">
|
|
|
+ <img src="../../assets/airdrop/dangerous.svg" alt="dangerous">
|
|
|
+ 未空投
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.status === 2" class="status-0" style="color: #2980FF">
|
|
|
+ <img src="../../assets/airdrop/airplanemode_active.svg" alt="airplanemode_active">
|
|
|
+ 进行中
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.status === 3" class="status-0" style="color: #222222">
|
|
|
+ <img src="../../assets/airdrop/airline_seat_recline_extra.svg" alt="airline_seat_recline_extra">
|
|
|
+ 未开始
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="累计Gas"
|
|
|
+ width="170">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="gas">
|
|
|
+ {{scope.row.gas}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="官网"
|
|
|
+ width="185">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="website">
|
|
|
+ <a target="_blank" :href="scope.row.officialWebsite">
|
|
|
+ {{scope.row.officialWebsite}}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="开始时间"
|
|
|
+ width="130">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="startTime">
|
|
|
+ {{scope.row.startTime}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="结束时间">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div class="endTime">
|
|
|
+ {{scope.row.endTime}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -51,35 +143,224 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {
|
|
|
- name: '',
|
|
|
- region: '',
|
|
|
- date1: '',
|
|
|
- date2: '',
|
|
|
- delivery: false,
|
|
|
- type: [],
|
|
|
- resource: '',
|
|
|
- desc: ''
|
|
|
- }
|
|
|
+ head: {
|
|
|
+ projectsNumber:85,
|
|
|
+ ongoingNumber:5
|
|
|
+ },
|
|
|
+ table:{
|
|
|
+ totalNumber:22222
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onSubmit() {
|
|
|
- this.$message('submit!')
|
|
|
- },
|
|
|
- onCancel() {
|
|
|
- this.$message({
|
|
|
- message: 'cancel!',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.line{
|
|
|
- text-align: center;
|
|
|
+<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{
|
|
|
+ .app-container-head-right-button{
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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-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 {
|
|
|
+ .projectName{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .progress{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 30px;
|
|
|
+ .score{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .progressBar{
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status-0{
|
|
|
+ width: 76px;
|
|
|
+ height: 26px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap:4px;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border: 1px solid #2980FF;
|
|
|
+ border-radius: 26px;
|
|
|
+
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .gas{
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #181818;
|
|
|
+ }
|
|
|
+ .website{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ text-decoration-line: underline;
|
|
|
+ color: #2980FF;
|
|
|
+ }
|
|
|
+ .startTime{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #898a8c;
|
|
|
+ }
|
|
|
+ .endTime{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #898a8c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::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>
|
|
|
|
million
