nsgk_mobile/src/views/project/projectDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="项目详情"
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    />
    <van-tabs scrollspy sticky color="#007b76" >
      <van-tab title="竞拍信息" title-style="font-size:12px;">
        <van-swipe class="my-swipe" height="235" indicator-color="white" @change="onChange">
          <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
            <van-swipe-item v-for="(item,index) in detail.fileUrlList" :key="index"><van-image :src="item.fileUrl?global.severApi+item.fileUrl:'../../static/images/zwtp.jpg'" height="235" /></van-swipe-item>
          </template>
          <template v-else>
            <van-swipe-item><van-image src="../../static/images/zwtp.jpg" height="235" /></van-swipe-item>
          </template>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/{{ detail.fileUrlList !== undefined &&detail.fileUrlList.length>0 ? detail.fileUrlList.length:1 }}</div>
          </template>
        </van-swipe>
        <van-notice-bar color="#fff" background="#007E72" left-icon="clock-o">
          {{ process }}&nbsp&nbsp&nbsp&nbsp{{tip}}
        </van-notice-bar>
        <div class="information">
          <van-row>
            <van-col span="24" class="title">【{{ detail.rollout }}】{{ detail.projectName }}</van-col>
          </van-row>
          <van-row>
            <van-col span="5">{{ process }}</van-col>
            <van-col span="19"><van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /></van-col>
          </van-row>
          <van-row>
            <van-col span="5">挂牌价</van-col>
            <van-col span="19" class="price"><span>{{detail.price}}</span> 元/亩/年</van-col>
          </van-row>
          <van-row>
            <van-col span="5">保证金</van-col>
            <van-col span="19" class="money"><span>{{ detail.deposit }}</span> 元</van-col>
          </van-row>
        </div>
        <div class="lead">
          <van-row >
            <van-col span="2"><van-image src="../../static/images/icon/phone.png" style="vertical-align: text-top;" /></van-col>
            <template v-if="biddinglistInformation!=undefined&&biddinglistInformation.length>0">
              <van-col span="5">{{biddinglistInformation[0].userName}}</van-col>
              <van-col span="4">{{biddinglistInformation[0].money}}元</van-col>
              <van-col span="4">领先</van-col>
              <van-col span="9">{{biddinglistInformation[0].createTime}}</van-col>
            </template>
          </van-row>
        </div>
        <div class="detail">
          <van-row>
            <van-col span="24"><span>报名开始时间：</span>{{ detail.signupStartTime }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>报名截止时间：</span>{{ detail.signupStopTime }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价开始时间：</span>{{ detail.biddingStartTime }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价截止时间：</span>{{ detail.biddingStopTime }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价方式：</span>{{ detail.biddingType }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价方向：</span>{{ detail.biddingDirect }}</van-col>
          </van-row>
          <van-row v-if="detail.ladderPrice">
            <van-col span="24"><span>阶梯价（加价幅度）：</span>{{ detail.ladderPrice }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>延时周期：</span>2分钟<van-icon name="question" size="15" style="top: 3px;left: 5px;" color="#CDCDCD"/></van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="标的物介绍" title-style="font-size:12px;">
        <p class="delTitle">标的物介绍</p>
        <div class="introduce">
          <van-row>
            <van-col span="24" style="color:#8A8A8A;font-size: 0.4rem;">项目挂牌转出方简况及公告内容</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>转出方名称</span>{{ detail.outName }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>住址（地址）</span>{{ detail.address }}</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>经济类型</span>{{ detail.economicType }}</van-col>
            <van-col span="10"><span>注册账号</span>{{ detail.registerNum }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>注册资本（万元）</span>{{ detail.registerMoney }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>组织机构代码证号</span>{{ detail.areaNum }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>法定代表人/负责人</span>{{ detail.legalPerson }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>身份证号</span>{{ detail.idCardNum }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>联系电话</span>{{ detail.phone }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>电子邮箱</span>{{ detail.email }}</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>项目类型</span>{{ detail.projectNumber }}</van-col>
            <van-col span="10"><span>农地性质</span>{{ detail.projectType }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>转出项目名称</span>{{ detail.projectName }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>坐落</span>{{ detail.locationName }}</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>是否属再次转出</span>{{ detail.twoout == 'N'?"否":"是"}}</van-col>
            <van-col span="10"><span>前次转出方式</span>{{ detail.oneout}}</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>拟转出方式</span>{{ detail.rollout }}</van-col>
            <van-col span="10"><span>拟转出面积/数量</span> {{detail.allCount}}{{detail.allCountUnit}} </van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>拟转出期限</span>{{detail.outStartTime}} 至 {{detail.outStopTime}}&nbsp&nbsp&nbsp&nbsp&nbsp共{{detail.outYearNum}}年</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>涉及农户数</span>{{ detail.peasantNum }}</van-col>
          </van-row>
          <van-row>
            <van-col span="24" style="color:#007E72;">标的物信息</van-col>
          </van-row>
          <div class="project_info" v-for="(item,index) in detail.subjectList" :key="index">
            <van-row>
              <van-col span="14"><span>标的物名称</span>{{ item.landName }}</van-col>
              <van-col span="10"><span>面积/数量</span>{{ item.area }}{{item.areaUnit}}</van-col>
            </van-row>
            <van-row>
              <van-col span="24"><span>{{ item.condition}}</span></van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab title="标的物图片" title-style="font-size:12px;">
        <p class="delTitle">标的物图片</p>
        <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
          <van-image v-for="(item,index) in detail.fileUrlList" :key="index" :src="item.fileUrl?''+item.fileUrl:'../../static/images/index/detailImg.png'" style="vertical-align: text-top;" />
        </template>
        <template v-else>
          <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
        </template>
      </van-tab>
      <van-tab title="竞买须知" title-style="font-size:12px;">
        <p class="delTitle">竞买须知</p>
        <div class="notice" v-html="webConfig">
        </div>
      </van-tab>
      <van-tab title="竞价记录" title-style="font-size:12px;">
        <p class="delTitle">竞价记录</p>
        <div class="biddingList">
          <table width="100%" cellspacing="0">
            <tr>
              <td>出价人账号</td>
              <td>姓名</td>
              <td>出价价格</td>
              <td>状态</td>
              <td>出价时间</td>
            </tr>
            <tr v-for="(item,index) in biddinglistInformation" :key="index">
              <td>{{ item.userAccount }}</td>
              <td>{{ item.userName }}</td>
              <td>{{ item.money}}</td>
              <template v-if="index==0">
                <td style="color:#C21F3A">领先</td>
              </template>
              <template v-else>
                <td></td>
              </template>
              <td>{{ item.createTime }}</td>
            </tr>
          </table>
        </div>
      </van-tab>
    </van-tabs>
    <div style="height: 3rem;"></div>
    <div class="bottomBtn" v-if="">
      <van-row v-if="!showBtn">
        <van-col span="8" style="margin-top: 4px;" @click="showPopup">
          <van-image src="../../static/images/icon/clock.png" style="vertical-align: text-bottom;" />
          <p style="line-height: 0.2rem;color: #999999">提醒</p>
        </van-col>
        <van-col span="16">
          <van-button round color="#C21F3A" block :disabled="isSignup" :to="{path:'signUp',query:{projectId:detail.id,deposit:detail.deposit,projectName:detail.projectName}}">
            {{ btnMsg }}<br/>
            <span style="font-size: 10px">保证金￥{{detail.deposit}}</span>
          </van-button>
        </van-col>
      </van-row>
      <van-field v-if="showBtn&&!detail.ladderPrice" v-model="price" type="number" input-align="center" placeholder="请输入出价金额" />
      <van-row v-if="showBtn" type="flex" justify="space-around">
        <van-col span="4" v-if="detail.ladderPrice" style="text-align: center;line-height: 1rem">
          <van-button color="#e2e2e2" icon="minus" size="small" @click="sub"></van-button>
        </van-col>
        <van-col span="16">
          <van-button round color="#C21F3A" block @click="offer">
            <p>出价</p>
            <p v-if="detail.ladderPrice">{{price}}元</p>
          </van-button>
        </van-col>
        <van-col span="4" v-if="detail.ladderPrice" style="text-align: center;line-height: 1rem">
          <van-button color="#e2e2e2" icon="plus" size="small" @click="add"></van-button>
        </van-col>
      </van-row>
    </div>
    <van-popup v-model="show" class="popup" closeable>
      <van-image src="../../static/images/icon/success.png"/>
      <p class="popupTit">提醒设置成功</p>
      <p class="popupContent">系统将按要求提醒您竞拍</p>
      <van-button round color="#C21F3A" block class="iKnow">
        我知道了
      </van-button>
      <p class="updatePopup">修改提醒方式</p>
    </van-popup>
  </div>
</template>

<script>
import {
  biddingSubmit,
  getBiddingList,
  getMember,
  getOutProjectDetail,
  getSignup,
  getWebConfig
} from "../../api/project";
import {getInfo} from "../../api/login";

export default {
  name: "projectDetail",
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      current: 0,
      show: false,
      id:this.$route.query.id,
      detail: {},
      webConfig:"",
      biddinglistInformation:[],
      rollout_type:[],
      process:"",
      tip:"",
      btnMsg:"",
      time:0,
      timeMsg:"",
      isSignup:false,
      showBtn:false,
      price:null,
      userAccount:"",
      userName:"",
      userId:""
    };
  },
  computed: {
    getNowFormatDate:function(){
      let date = new Date();
      let seperator1 = "-";
      let seperator2 = ":";
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      let currentdate = date.getFullYear() + seperator1 + month + seperator1 + day + " " + hours + seperator2 + minutes + seperator2 + seconds;
      console.log(currentdate)
      return currentdate;
    }
  },
  created() {

    this.reload();
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    showPopup() {
      this.show = true;
    },
    reload(){
      getOutProjectDetail(this.id).then(response =>{
        this.detail=response.data
        this.getDicts("rollout_type").then(res =>{
          this.detail.rollout = this.selectDictLabel(res.data,response.data.rollout);
          if(this.detail.oneout==0){
            this.detail.oneout = "无"
          }else{
            this.detail.oneout = this.selectDictLabel(res.data,response.data.oneout);
          }
        })
        this.getDicts("project_type").then(res => {
          this.detail.projectNumber = this.selectDictLabel(res.data,response.data.projectNumber);
        });
        this.getDicts("sub_object_type").then(res => {
          this.detail.projectType = this.selectDictLabel(res.data,response.data.projectType);
        });
        this.getDicts("economic_type").then(res => {
          this.detail.economicType = this.selectDictLabel(res.data,response.data.economicType);
        });
        this.getDicts("area_unit").then(res => {
          this.detail.allCountUnit = this.selectDictLabel(res.data,response.data.allCountUnit);
        });
        this.getDicts("bidding_type").then(res => {
          this.detail.biddingType = this.selectDictLabel(res.data,response.data.biddingType);
        });
        this.getDicts("bidding_direct").then(res => {
          this.detail.biddingDirect = this.selectDictLabel(res.data,response.data.biddingDirect);
        });
        for(let i of this.detail.subjectList){
          this.getDicts("area_unit").then(res => {
            i.areaUnit = this.selectDictLabel(res.data,i.areaUnit);
          });
        }
        let biddingStartTime =  Date.parse(this.detail.biddingStartTime)+0
        let biddingStopTime =  Date.parse(this.detail.biddingStopTime)+0
        let signupStartTime =  Date.parse(this.detail.signupStartTime)+0
        let signupStopTime =  Date.parse(this.detail.signupStopTime)+0
        let nowDate = Date.parse(new Date());

        console.log('竞价开始时间'+biddingStartTime)
        console.log('竞价截止时间'+biddingStopTime)
        console.log('报名开始时间'+signupStartTime)
        console.log('报名截止时间'+signupStopTime)
        console.log('当前时间'+nowDate)

        if(signupStartTime>nowDate){
          console.log('未开始')
          this.process= "报名未开始"
          this.tip=this.detail.signupStartTime+"开始报名"
          this.btnMsg="立即报名"
          this.timeMsg="距报名开始"
          this.time = signupStartTime-nowDate
          this.isSignup=true
        }
        if(signupStopTime>nowDate&&signupStopTime>signupStartTime){
          console.log('报名中')
          this.process= "报名中"
          this.tip=this.detail.signupStopTime+"报名截止"
          this.btnMsg="立即报名"
          this.timeMsg="距报名截止"
          this.time = signupStopTime-nowDate
          getInfo().then(response => {
            let _this = this
            getMember(response.user.userId).then(res => {
              console.log(res)
              let data= {
                projectId:this.id,
                memberId:res.data.id,
              };
              getSignup(data).then(r =>{
                if(r.data=="1"){
                  _this.isSignup=true
                  this.btnMsg="已报名"
                }
              })
            })
          })
        }
        if(biddingStartTime>nowDate&&nowDate>signupStopTime){
          console.log('竞价未开始')
          this.process= "竞价未开始"
          this.tip=this.detail.biddingStartTime+"开始竞价"
          this.timeMsg="距竞价开始"
          this.time = biddingStartTime-nowDate
          getInfo().then(response => {
            let _this = this
            getMember(response.user.userId).then(res => {
              let data= {
                projectId:this.id,
                memberId:res.data.id,
              };
              getSignup(data).then(r =>{
                if(r.data=="1"){
                  _this.isSignup=true
                  this.btnMsg="立即竞价"
                  // this.price=this.detail.ladderPrice?this.biddinglistInformation[0].money+this.detail.ladderPrice:this.biddinglistInformation[0].money+1
                }else{
                  this.btnMsg="未报名"
                }
              })
            })
          })
        }
        if(biddingStopTime>nowDate&&nowDate>biddingStartTime){
          console.log('竞价中')
          this.process= "竞价中"
          this.tip=this.detail.biddingStopTime+"结束竞价"
          this.timeMsg="距竞价结束"
          this.time = biddingStopTime-nowDate
          getInfo().then(response => {
            let _this = this
            this.userId=response.user.userId
            getMember(response.user.userId).then(res => {
              this.userAccount=res.data.phone
              this.userName=res.data.realname
              this.memberId=res.data.id
              let data= {
                projectId:this.id,
                memberId:res.data.id,
              };
              getSignup(data).then(r =>{
                if(r.data=="1"){
                  _this.isSignup=true
                  this.btnMsg="立即竞价"
                  this.showBtn=true
                  // this.price=this.detail.ladderPrice?this.biddinglistInformation[0].money+this.detail.ladderPrice:this.biddinglistInformation[0].money+1
                }else{
                  this.btnMsg="未报名"
                  _this.isSignup=true
                }
              })
            })
          })
        }
        if(nowDate>biddingStopTime){
          console.log('竞价结束')
          this.process= "竞价结束"
          this.tip=this.detail.biddingStopTime+"结束竞价"
          this.btnMsg="竞价结束"
          this.timeMsg="竞价结束"
          this.time = 0
          this.isSignup = true
        }
      });
      getWebConfig().then(response =>{
        response.data.map(item =>{
          if(item.configKey=="cqjy.website.bidInfo"){
            this.webConfig +=  item.configValue
          }
        })
      });
      getBiddingList(this.id).then(response =>{
        this.biddinglistInformation = response.rows
        if (response.rows.length>0&&this.detail.ladderPrice){
          this.price = response.rows[0].money+this.detail.ladderPrice
        }

      });
    },
    offer(){

      if (this.price==''||this.price==0||this.price<0||this.price == null){
        this.$toast({
          icon: 'fail', // 找到自己需要的图标
          message: '请输入出价金额',
          duration:"1000",
          onClose:function(){
          }
        })
        return;
      }
      if (this.detail.biddingDirect == '递减竞价'){
        if (this.biddinglistInformation.length<1){
          if(this.detail.price<=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能高于挂牌价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }else{
          if(this.biddinglistInformation[0].money<=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能高于当前出价最低价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }
      }else{
        if (this.biddinglistInformation.length<1){
          if(this.detail.price>=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能低于挂牌价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }else{
          if(this.biddinglistInformation[0].money>=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能低于当前出价最高价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }
      }
      let data= {
        projectId:this.id,
        memberId:this.memberId,
        userId:this.userId,
        userAccount:this.userAccount,
        userName:this.userName,
        money:this.price,
        loginTime:this.getNowFormatDate
      };
      console.log(data)
      biddingSubmit(data).then(response =>{
        let _this = this
        if(response){
          this.$toast({
            icon: 'success', // 找到自己需要的图标
            message: '出价成功',
            duration:"1000",
            onClose:function(){
              _this.reload()
            }
          })

        }
      })
    },
    add(){
      if (this.detail.biddingDirect == '递减竞价'){
        if (this.biddinglistInformation.length<=1){
          if(this.detail.price<this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能高于挂牌价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }else{
          if(this.biddinglistInformation[0].money<=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能高于当前出价最低价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }
      }else{
        if (this.biddinglistInformation.length<1){
          if(this.detail.price>=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能低于挂牌价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }else{
          if(this.biddinglistInformation[0].money>=this.price){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '出价不能低于当前出价最高价格',
              duration:"1000",
              onClose:function(){
              }
            })
            return;
          }
        }
      }
      this.detail.ladderPrice?this.price=parseInt(this.price)+parseInt(this.detail.ladderPrice):this.price += 1
    },
    sub(){
      if(this.detail.ladderPrice){
        if((this.price-this.detail.ladderPrice)>this.biddinglistInformation[0].money){
          this.price-=this.detail.ladderPrice
        }else{
          this.$toast({
            icon: 'error', // 找到自己需要的图标
            message: '出价不能低于当前最高价',
            duration:"1000",
          })
        }
      }else{
        if((this.price-1)>this.biddinglistInformation[0].money){
          this.price-=1
        }else{
          this.$toast({
            icon: 'error', // 找到自己需要的图标
            message: '出价不能低于当前最高价',
            duration:"1000",
          })
        }
      }
    },
  }
};
</script>

<style scoped lang="scss">
.app-container {
}
.custom-indicator {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 0px 20px;
  font-size: 12px;
  /*rgba(0, 0, 0, 0.1)*/
  background: rgba(0, 0, 0, 0.2);
  color: #FFF;
  border-radius: 20px;
  line-height: 0.5rem;
}
.title{
  font-size: 0.45rem;
}
.my-swipe{
  width: 100%;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.information{
  background-color: #FFF;
  margin-top: 0.3rem;
  padding: 0.4rem 0.5rem;
}
.van-row{
  line-height: 0.7rem;
}
.price{
  color: #C21F3A;
}
.price span{
  font-size: 0.5rem;
  font-weight: bold;
}
.money{
  color: #C21F3A;
}
.money span{
  font-size: 0.5rem;
  font-weight: bold;
}
.van-count-down{
  line-height: 0.7rem;
}
.lead{
  background-color: #FFF;
  margin-top: 0.3rem;
  padding: 0.1rem 0.5rem;
  color: #C21F3A;
}
.detail{
  background-color: #FFF;
  margin-top: 0.3rem;
  padding: 0.2rem 0.5rem;
}
.detail span{
  color: #8A8A8A;
}
.delTitle{
  font-size: 0.4rem;
  color: #007E72;
  padding: 0.2rem 0.5rem;
}
.introduce{
  padding: 0.2rem 0.5rem 0.5rem;
  background-color: #FFF;
}
.introduce span{
  color: #8A8A8A;
  margin-right: 20px;
}
.project_info{
  border: 1px solid #DCDCDC;
  padding: 0px 20px;
  margin-top: 10px;
  border-radius: 10px;
}
.notice{
  padding: 0.5rem;
  background-color: #FFF;
}
.notice p{
  line-height: 0.7rem;
}
.biddingList{
  padding: 0.5rem;
  background-color: #FFF;
  margin-bottom: 0.4rem;
}
.biddingList table{
  text-align: center;
}
.biddingList table td{
  text-align: center;
  padding: 10px 0px;
}
.biddingList table tr:first-child td{
  background-color: #007E72;
  color: #FFF;
}
.bottomBtn{
  padding: 0.2rem 0.5rem;
  background-color: #FFF;
  position: fixed;
  bottom: 0;
  width: 100%;
}
  .popup{
    text-align: center;
    padding: 0.5rem;
    border-radius: 20px;
    width: 70%;
    padding-top: 1.5rem;
  }
  .popupTit{
    color: #007E72;
    font-size: 0.4rem;
    line-height: 0.9rem;
  }
  .popupContent{
    color: #666666;
  }
  .iKnow{
    margin-top: 1rem;
  }
  .updatePopup{
    color: #007E72;
    margin-top: 0.5rem;
  }
</style>