ams-backend/front/admin-front/src/views/autoplay/index.vue

<template>
  <div class="app-container">
    <div class="title">
      任务列表
    </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">
        余额
        <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
      </div>
    </div>
    <div class="app-container-table-main">
       <div class="app-container-table-main-item"  v-for="(item,index) in missionData">
         <div class="head">
            <div class="avatar">
              <img class="avatar" :src="url + 'disk/file/' + item.projectLogo" alt="avatar">
            </div>
            <div class="name" @click="viewTaskDetails(item)">
              <div class="missionName">
                {{item.taskName}}
                <img src="../../assets/autoplay/arrow_forward.svg" alt="arrow_forward">
              </div>
              <div class="projectName">
                {{item.projectName}}
              </div>
            </div>
          </div>
         <div class="jump" @click="viewExecutionHistory(item)">
           执行记录
           <img src="../../assets/autoplay/arrow_forward.svg" alt="arrow_forward">
         </div>
         <div class="implementationStrategy">
<!--           <div class="item" v-if="item.implementationStrategy.length > 0" v-for="(item1,index) in item.implementationStrategy">-->
<!--             {{item1}}-->
<!--           </div>-->
           <div class="item-no" >
             暂无
           </div>
         </div>
         <div class="implementationStrategyText">
            执行策略
         </div>
         <div class="underImplementation" v-if="item.executeStatus === 0">
           <div class="numberOfExecutions">
             <div class="text">
               当前执行/计划执行次数
             </div>
             <div class="number">
               {{item.executeTimes}}/{{item.planTimes}}
             </div>
           </div>
           <div class="progressBar" @click="progressBarDetails(item)">
             <div class="progressBar-blue">
               <img src="../../assets/autoplay/airplanemode_active.svg" alt="airplanemode_active">
               进行中
             </div>
             <div class="details">
               详情
               <img src="../../assets/autoplay/arrow_forward.svg" alt="arrow_forward">
             </div>
           </div>
         </div>
         <div class="batchExecution" v-if="item.executeStatus === 1">
           <div class="left">
             <div class="number">
               {{item.executeTimes}}/{{item.planTimes}}
             </div>
             <div class="text">
               当前执行/计划执行次数
             </div>
           </div>
           <div class="right" @click="batchExecution(item)">
             <img src="../../assets/autoplay/autoplay.svg" alt="autoplay">
             批量执行
           </div>
         </div>
         <div class="horizontalLine"/>
         <div class="time">
           上次执行时间: {{item.lastExecuteTime}}
         </div>
       </div>
    </div>
    <el-drawer
      :visible.sync="drawerDetails"
      :with-header="false">
      <div class="drawerAddress-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="avatar">
              <img class="avatar" :src="url + 'disk/file/' + currentTaskInfo.projectLogo" alt="avatar">
            </div>
            <div class="info">
              <div class="projectName">
                {{currentTaskInfo.projectName}}
              </div>
              <div class="id">
                {{currentTaskInfo.amsTaskId}}
              </div>
            </div>
          </div>
          <div class="drawerAddress-container-head-right">
<!--            <div class="complete" @click="modifyTask">-->
<!--              <img src="../../assets/address/done_all.svg" alt="done_all">-->
<!--              完成-->
<!--            </div>-->
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="title">
            任务详情
          </div>
          <div class="input">
            <el-input v-model="currentTaskInfo.taskName" placeholder="任务名称"></el-input>
          </div>
          <div class="select">
            <el-select style="width: 140px" v-model="currentTaskInfo.taskType" placeholder="选择类型">
              <el-option
                v-for="item in optionsTaskType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select style="width: 400px" v-model="chainId" placeholder="选择合约">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="input">
            <el-input v-model="currentTaskInfo.planTimes" placeholder="计划任务执行次数"></el-input>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerRecord"
      :with-header="false"
      @closed="drawerRecordStatus = 0">
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 0">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="missionName">
              <div class="name">
                任务名称
              </div>
            </div>
            <div class="text">
              查看历史交互记录
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="drawerAddress-container-head-left">
            <div class="avatar">
              <img class="avatar" :src="url + 'disk/file/' + currentTaskInfo.projectLogo" alt="avatar">
            </div>
            <div class="info">
              <div class="projectName">
                {{currentTaskInfo.projectName}}
              </div>
              <div class="webLink">
                <img src="../../assets/autoplay/language.svg" alt="language">
<!--                {{currentTaskInfo.projectUrl}}-->
                <a :href="currentTaskInfo.projectUrl" target="_blank">{{currentTaskInfo.projectUrl}}</a>
              </div>
            </div>
          </div>
          <div class="horizontalLine"/>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                执行记录
              </div>
              <div class="number">
                累计执行: {{recordData.length}}
              </div>
            </div>
            <div class="right">
<!--              <el-date-picker-->
<!--                v-model="value1"-->
<!--                type="daterange"-->
<!--                range-separator="至"-->
<!--                start-placeholder="开始日期"-->
<!--                end-placeholder="结束日期">-->
<!--              </el-date-picker>-->
            </div>
          </div>
          <div class="table">
            <el-table
              :data="recordData"
              style="width: 100%">
              <el-table-column
                prop="executeId"
                label="执行ID">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                label="累计金额">
              </el-table-column>
              <el-table-column
                prop="totalGas"
                label="总GAS">
              </el-table-column>
              <el-table-column
                prop="executeStatus"
                label="状态"
                width="120"
                align="center">
                <template v-slot="scope">
                  <div class="status" v-if="scope.row.executeStatus === 0" @click="viewRecordDetails(scope.row,1)">
                    <div class="text" style="color: #2980FF;">
                      <img src="../../assets/autoplay/clock_loader_60.svg" alt="clock_loader_60">
                      进行中
                    </div>
                    <img src="../../assets/autoplay/chevron_right.svg" alt="chevron_right">
                  </div>
                  <div class="status" v-if="scope.row.executeStatus === 1" @click="viewRecordDetails(scope.row,2)">
                    <div class="text">
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                    <img src="../../assets/autoplay/chevron_right.svg" alt="chevron_right">
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 1">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="missionName">
              <div class="id">
                {{currentTaskInfo.amsTaskId}}
              </div>
              <div class="name">
                {{currentTaskInfo.taskName}}
              </div>
            </div>
            <div class="text" style="color: #2980FF">
              任务交互类型: {{currentTaskInfo.taskType}}
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="interactionStrategy">
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
                交互钱包
              </div>
              <div class="info">
                {{currentRecordData.groupName}}
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最小间隔时间
              </div>
              <div class="info">
                {{currentRecordData.intervalMin}}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最大间隔时间
              </div>
              <div class="info">
                {{currentRecordData.intervalMax}}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/gas_meter.svg" alt="gas_meter">
                最大 Gas fee
              </div>
              <div class="info">
                {{currentRecordData.maxGas}}
              </div>
            </div>
          </div>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                正在进行中
              </div>
              <div class="number">
                总计交互地址: 3/100
              </div>
            </div>
            <div class="right" style="cursor: pointer" @click="refresh">
              <img src="../../assets/autoplay/Frame.svg" alt="Frame">
            </div>
          </div>
          <div class="table">
            <el-table
              :data="ongoingData"
              style="width: 100%">
              <el-table-column
                prop="address"
                width="150">
              </el-table-column>
              <el-table-column
                prop="amount">
              </el-table-column>
              <el-table-column
                prop="gas">
              </el-table-column>
              <el-table-column
                prop="txId">
              </el-table-column>
              <el-table-column
                prop="status">
                <template v-slot="scope">
                  <div class="status" style="cursor: auto">
                    <div class="text" v-if="scope.row.status === 0" style="color: #EB5757;">
                      <img src="../../assets/autoplay/cancel.svg" alt="cancel">
                      未完成
                    </div>
                    <div class="text" v-if="scope.row.status === 1" >
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
        <div class="progressBarBox">
          <div class="progressBar">
            <div class="progressBar-two">
              <img src="../../assets/autoplay/motion_photos_paused.svg" alt="motion_photos_paused">
              当前执行进度
            </div>
            <div class="number">
              {{currentTaskInfo.executeTimes}}/{{currentTaskInfo.planTimes}}
            </div>
          </div>
        </div>
      </div>
      <div class="drawerRecord-container" v-if="drawerRecordStatus === 2">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="missionName">
              <div class="id">
                {{currentTaskInfo.amsTaskId}}
              </div>
              <div class="name">
                {{currentTaskInfo.taskName}}
              </div>
            </div>
            <div class="text" style="color: #2980FF">
              任务交互类型: {{currentTaskInfo.taskType}}
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="interactionStrategy">
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/account_balance_wallet.svg" alt="account_balance_wallet">
                交互钱包
              </div>
              <div class="info">
                {{currentRecordData.groupName}}
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最小间隔时间
              </div>
              <div class="info">
                {{currentRecordData.intervalMin}}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/avg_pace.svg" alt="avg_pace">
                最大间隔时间
              </div>
              <div class="info">
                {{currentRecordData.intervalMax}}/分
              </div>
            </div>
            <div class="item">
              <div class="title">
                <img src="../../assets/autoplay/gas_meter.svg" alt="gas_meter">
                最大 Gas fee
              </div>
              <div class="info">
                {{currentRecordData.maxGas}}
              </div>
            </div>
          </div>
          <div class="recordTitle">
            <div class="left">
              <div class="text">
                已完成
              </div>
              <div class="number">
                总计交互地址: 3/100
              </div>
            </div>
          </div>
          <div class="table">
            <el-table
              :data="ongoingData"
              style="width: 100%">
              <el-table-column
                prop="address"
                width="150">
              </el-table-column>
              <el-table-column
                prop="amount">
              </el-table-column>
              <el-table-column
                prop="gas">
              </el-table-column>
              <el-table-column
                prop="txId">
              </el-table-column>
              <el-table-column
                prop="status">
                <template v-slot="scope">
                  <div class="status" style="cursor: auto">
                    <div class="text">
                      <img src="../../assets/autoplay/check.svg" alt="check">
                      已完成
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="drawerView-container-footer">
          <div class="pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :page-size="10"
              :total="3">
            </el-pagination>
          </div>
        </div>
        <div class="progressBarBox">
          <div class="progressBar" style="background: black">
            <div class="progressBar-two" style="background: black">
              <img src="../../assets/autoplay/done_all.svg" alt="done_all">
              执行进度已完成
            </div>
            <div class="number">
              {{currentTaskInfo.executeTimes}}/{{currentTaskInfo.planTimes}}
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="drawerStrategy"
      :with-header="false"
      @closed="accountPassword = false">
      <div class="drawerStrategy-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="info">
              <div class="projectName">
                执行策略
              </div>
              <div class="id">
                {{currentTaskInfo.taskType}} | {{currentTaskInfo.taskName}}
              </div>
            </div>
          </div>
          <div class="drawerAddress-container-head-right">
            <div class="complete" @click="accountPassword = true">
              <img src="../../assets/address/done_all.svg" alt="done_all">
              下一步
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="item">
            <div class="title">
              交互钱包
            </div>
            <el-select v-model="batchExecutionParams.groupName" placeholder="选择交互钱包">
              <el-option
                v-for="item in optionsAddress"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
<!--          <div class="item">-->
<!--            <div class="title">-->
<!--              目标资产（From）-->
<!--            </div>-->
<!--            <el-select v-model="chainId" placeholder="选择交互资产">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--          <div class="item">-->
<!--            <div class="title">-->
<!--              目标资产（To）-->
<!--            </div>-->
<!--            <el-select v-model="chainId" placeholder="选择交互资产">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
          <div class="item">
            <div class="title">
              间隔时间
            </div>
            <div style="display: flex;gap:24px">
              <el-input v-model="batchExecutionParams.intervalMin" placeholder="输入最小间隔时间/分"></el-input>
              <el-input v-model="batchExecutionParams.intervalMax" placeholder="输入最大间隔时间/分"></el-input>
            </div>
          </div>
          <div class="item">
            <div class="title">
              交互金额
            </div>
            <el-input v-model="batchExecutionParams.amount" placeholder="输入最大交互金额"></el-input>
          </div>
          <div class="item">
            <div class="title">
              最大 Gas fee
            </div>
            <el-input v-model="batchExecutionParams.maxGas" placeholder="输入最大 Gas fee"></el-input>
          </div>
          <div class="item" v-for="item in paramsData">
            <div class="title">
              {{item.note}}
            </div>
            <el-input v-model="item.value"></el-input>
          </div>
        </div>
        <div class="accountPassword" v-if="accountPassword">
          <div class="title">
            输入钱包密码
          </div>
          <div class="inputTitle">
            钱包密码
          </div>
          <el-input type="password" :show-password="true" v-model="batchExecutionParams.password" placeholder="输入钱包密码"></el-input>
          <div class="confirm" @click="batchExecutionTask">
            <img src="../../assets/autoplay/check1.svg" alt="check1">
            确认
          </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>
    </el-drawer>

  </div>

</template>

<script>
import {batchExecution, getExecutionRecord, modifyTaskInfo, parameterSearch, taskPage} from "@/api/task";
import {getGroupList} from "@/api/adress";
import {getInteractionRecord} from "@/api/record";

export default {
  data() {
    return {
      missionData:[],
      drawerDetails:false,
      input:'',
      chainId:'',
      options: [{
        value: '1',
        label: 'ETH'
      }],
      optionsTaskType: [
        {
          value: 'BRIDGE',
          label: 'Bridge'
        },
        {
          value: 'NFT',
          label: 'NFT'
        },
        {
          value: 'SWAP',
          label: 'Swap'
        }
      ],
      optionsAddress: [],
      drawerRecord:false,
      drawerRecordStatus:0,
      value1: '',
      recordData:[],
      ongoingData:[],//下一层
      drawerStrategy:false,
      accountPassword:false,
      batchExecutionParams:{
        groupName:'',
        maxGas:'',
        intervalMax:10,
        intervalMin:1,
        amount:'',
        password:'',
        projectId:'',
        taskId:''
      },
      currentTaskInfo:{
        taskType:'',
        taskName:'',
        amsProjectId:'',
        amsTaskId:'',
        planTimes:0,
        projectName:''
      },
      currentRecordData:{

      },
      paramsData:[],
      url:process.env.VUE_APP_BASE_API,
    }
  },
  mounted() {
    this.getTaskList()
    this.getWalletAddress()
  },
  methods: {
    progressBarDetails(item) {
      this.drawerRecord = true
      this.drawerRecordStatus = 1
      this.currentTaskInfo = JSON.parse(JSON.stringify(item))
      this.currentRecordData.groupName = item.groupName
      this.currentRecordData.intervalMax = item.intervalMax
      this.currentRecordData.intervalMin = item.intervalMin
      this.currentRecordData.maxGas = item.maxGas
      let params = {
        page:1,
        pageSize:10,
        executeId:item.executeId
      }
      getInteractionRecord(params).then(res=>{
        this.ongoingData = res.records
      })
    },
    getTaskList() {
      taskPage().then(res=>{
        this.missionData = res
      })
    },
    batchExecution(item) {
      this.drawerStrategy = true
      this.currentTaskInfo.taskName = item.taskName
      this.currentTaskInfo.taskType = item.taskType
      this.batchExecutionParams.projectId = item.amsProjectId
      this.batchExecutionParams.taskId = item.amsTaskId
      if(item.taskCode){
        this.getParameterSearch(item.taskCode)
      }
    },
    getWalletAddress() {
      getGroupList().then(res=>{
        res.forEach((item)=>{
          let obj = {
            value:item,
            label:item
          }
          this.optionsAddress.push(obj)
        })
      })
    },
    batchExecutionTask() {
      this.batchExecutionParams.airdropParams = this.paramsData
      batchExecution(this.batchExecutionParams).then(()=>{
        this.accountPassword = false
        this.drawerStrategy = false
        this.getTaskList()
      })
    },
    viewTaskDetails(item) {
      this.currentTaskInfo = JSON.parse(JSON.stringify(item))
      this.drawerDetails = true
    },
    modifyTask(){
      let params = {
        taskType:this.currentTaskInfo.taskType,
        taskName:this.currentTaskInfo.taskName,
        amsProjectId:this.currentTaskInfo.amsProjectId,
        amsTaskId:this.currentTaskInfo.amsTaskId,
        planTimes:this.currentTaskInfo.planTimes,
      }
      modifyTaskInfo(params).then(()=>{
        this.drawerDetails = false
        this.getTaskList()
      })
    },
    viewExecutionHistory(item) {
      this.currentTaskInfo = JSON.parse(JSON.stringify(item))
      let params = {
        page: 1,
        pageSize: 10,
        queryValue: item.amsTaskId
      }
      getExecutionRecord(params).then((res)=>{
        this.drawerRecord = true
        this.recordData = res.records
      })
    },
    viewRecordDetails(item,page){
      this.drawerRecordStatus = page
      this.currentRecordData = item
      let params = {
        page:1,
        pageSize:10,
        executeId:item.executeId
      }
      getInteractionRecord(params).then(res=>{
        this.ongoingData = res.records
      })
    },
    refresh(){
      let params = {
        page:1,
        pageSize:10,
        executeId:this.currentRecordData.executeId
      }
      getInteractionRecord(params).then(res=>{
        this.ongoingData = res.records
      })
    },
    getParameterSearch(taskCode){
      parameterSearch(taskCode).then(res=>{
        this.paramsData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .title{
    font-weight: 700;
    font-size: 21px;
    line-height: 28px;
    color: #181818;
  }
  .app-container-table-screening{
    display: flex;
    align-items: center;
    gap:100px;
    padding: 20px 0;
    margin: 20px 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{
    display: flex;
    justify-content: space-between;
    gap:20px;
    flex-wrap: wrap;
    .app-container-table-main-item{
      width: 345px;
      height: 315px;
      background: #FFFFFF;
      border: 1px solid #2980FF;
      border-radius: 10px;
      padding:24px;
      position: relative;
      .head{
        display: flex;
        gap:8px;
        .avatar{
          width: 46px;
          height: 46px;
          background: black;
          border-radius: 50%;
        }
        .name{
          display: flex;
          flex-direction: column;
          gap:8px;
          cursor: pointer;
          .projectName{
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            color: #919191;
          }
          .missionName{
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
            display: flex;
            align-items: center;
            gap:8px
          }
        }
      }
      .jump{
        position: absolute;
        bottom:25px;
        right:24px;
        display: flex;
        gap:8px;
        font-weight: 700;
        font-size: 12px;
        line-height: 16px;
        color: #2980FF;
        cursor: pointer;
      }
      .implementationStrategy{
        display: flex;
        gap:12px;
        margin-top: 32px;
        .item{
          width: 68px;
          height: 24px;
          background: #edf2ff;
          border: 1px solid #2980FF;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 12px;
          line-height: 16px;
          color: #222222;
        }
        .item-no{
          width: 44px;
          height: 24px;
          background: #F5F5F5;
          border: 1px solid #E0E0E0;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 12px;
          line-height: 16px;
          color: #828282;
        }
      }
      .implementationStrategyText{
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #919191;
        margin-top: 8px;
      }
      .underImplementation{
        display: flex;
        flex-direction: column;
        gap:8px;
        margin-top: 24px;
        height: 50px;
        .numberOfExecutions{
          display: flex;
          gap:4px;
          .text{
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #919191;
          }
          .number{
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            color: #222222;
          }
        }
        .progressBar{
          width: 100%;
          height: 28px;
          background: #F5F5F5;
          border-radius: 21px;
          display: flex;
          justify-content: space-between;
          padding-right: 6px;
          cursor: pointer;
          .progressBar-blue{
            width: 147px;
            height: 28px;
            background: #2980FF;
            border-radius: 26px;
            display: flex;
            align-items: center;
            padding-left: 10px;
            gap:4px;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #FFFFFF;
          }
          .details{
            display: flex;
            align-items: center;
            gap:4px;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #7b7b7b;
          }
        }
      }
      .batchExecution{
        display: flex;
        justify-content: space-between;
        gap:8px;
        margin-top: 24px;
        height: 50px;
        .left{
          display: flex;
          gap:8px;
          flex-direction: column;
          .text{
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #919191;
          }
          .number{
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
        }
        .right{
          display: flex;
          gap:4px;
          align-items: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #FFFFFF;
          width: 132px;
          height: 44px;
          justify-content: center;
          background: #2980FF;
          border: 1px solid #2980FF;
          border-radius: 10px;
          cursor: pointer;
        }
      }
      .horizontalLine{
        width: 343px;
        height: 1px;
        border-bottom: 1px solid #F5F5F5;
        margin-left: -24px;
        margin-top: 28px;
      }
      .time{
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #919191;
        margin-top: 20px;
      }
    }
  }
  .drawerAddress-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    .drawerAddress-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .drawerAddress-container-head-left{
        display: flex;
        gap:8px;
        .avatar{
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: black;
        }
        .info{
          display: flex;
          flex-direction: column;
          gap:8px;
          .projectName{
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
          .id{
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #838383;
          }
        }
      }
      .drawerAddress-container-head-right{
        display: flex;
        align-items: center;
        gap:48px;
        .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;
          cursor: pointer;
        }
      }
    }
    .drawerAddress-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap:20px;
      .select{
        display: flex;
        gap:24px;
      }
    }
  }
  .drawerRecord-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    position: relative;
    .drawerAddress-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .drawerAddress-container-head-left{
        display: flex;
        flex-direction: column;
        gap:8px;
        .missionName{
          display: flex;
          gap:8px;
          align-items: center;
          .id{
            padding: 0 8px;
            height: 24px;
            background: #F5F5F5;
            border: 1px solid #E0E0E0;
            border-radius: 4px;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #7b7b7b;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .name{
            font-weight: 700;
            font-size: 21px;
            line-height: 28px;
            color: #181818;
          }
        }
        .text{
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          color: #919191;
        }
      }

    }
    .drawerAddress-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap:20px;
      .drawerAddress-container-head-left{
        display: flex;
        gap:24px;
        .avatar{
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: black;
        }
        .info{
          display: flex;
          flex-direction: column;
          gap:8px;
          .projectName{
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
          .webLink{
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
            color: #2980FF;
            text-decoration-line: underline;
            display: flex;
            align-items: center;
            gap:8px
          }
        }
      }
      .horizontalLine{
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #f1f1f1;
        margin-top: 40px;
        margin-bottom: 30px;
      }
      .interactionStrategy{
        width: 100%;
        height: 108px;
        background: #FFFFFF;
        border: 1px solid #F5F5F5;
        border-radius: 4px;
        padding: 28px;
        display: flex;
        justify-content: space-between;
        .item{
          display: flex;
          flex-direction: column;
          gap:12px;
          .title{
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            color: #181818;
            display: flex;
            align-items: center;
            gap:6px;
          }
          .info{
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
        }
      }
      .recordTitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          display: flex;
          flex-direction: column;
          gap:8px;
          .text{
            font-weight: 700;
            font-size: 21px;
            line-height: 28px;
            color: #181818;
          }
          .number{
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            color: #8e8f91;
          }
        }
      }
      .table{
        .status{
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          .text{
            display: flex;
            align-items: center;
            gap:4px;
            font-weight: 400;
            font-size: 15px;
            line-height: 20px;
            color: #222222;
            white-space: nowrap;
          }
        }
      }
    }
    .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;
      }
    }
    .progressBarBox{
      display: flex;
      justify-content: center;
      .progressBar{
        position: absolute;
        top:138px;
        width: 90%;
        height: 50px;
        background: #2980FF;
        box-shadow: 0px 1px 16px rgba(15, 15, 15, 0.16);
        border-radius: 144px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .progressBar-two{
          width: 40%;
          height: 50px;
          background: #3b9ffa;
          border-radius: 144px;
          display: flex;
          align-items: center;
          padding-left: 16px;
          gap:6px;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #FFFFFF;
        }
        .number{
          font-weight: 700;
          font-size: 17px;
          line-height: 22px;
          color: #FFFFFF;
          padding-right: 16px;
        }
      }
    }
  }
  .drawerStrategy-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;

    .drawerAddress-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .drawerAddress-container-head-left{
        display: flex;
        gap:8px;
        .info{
          display: flex;
          flex-direction: column;
          gap:8px;
          .projectName{
            font-weight: 700;
            font-size: 17px;
            line-height: 22px;
            color: #222222;
          }
          .id{
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            color: #838383;
          }
        }
      }
      .drawerAddress-container-head-right{
        display: flex;
        align-items: center;
        gap:48px;
        .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;
          cursor: pointer;
        }
      }
    }
    .drawerAddress-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap:12px;
      .item{
        display: flex;
        flex-direction: column;
        gap:12px;
        .title{
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: #181818;
        }

      }
    }
    .accountPassword{
      width: 440px;
      height: 374px;
      background: #fbfdff;
      border-radius: 10px;
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 36px 40px;
      .title{
        font-weight: 700;
        font-size: 21px;
        line-height: 28px;
        color: #212121;
      }
      .inputTitle{
        font-weight: 500;
        font-size: 14px;
        line-height: 18px;
        color: #383838;
        margin-top: 32px;
        margin-bottom: 12px;
      }
      .confirm{
        display: flex;
        align-items: center;
        justify-content: center;
        gap:8px;
        font-weight: 700;
        font-size: 15px;
        line-height: 20px;
        color: #FFFFFF;
        width: 100%;
        height: 52px;
        background: #2980ff;
        border-radius: 6px;
        margin-top: 12px;
        margin-bottom: 20px;
        cursor: pointer;
      }
      .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;
        }
      }
    }
  }
}
</style>