xybpkmweb/src/components/PatClockInSuc.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <!-- <div class="title">注射打卡</div> -->
      <div class="loginForm">
        <div class="clocksucbg">
          <img src="../assets/images/clockinbg.png" width="100%" alt="">
          <div class="clocksucmsg" >您已打卡成功</div>
        </div>
        <div class="clockintime">距离【目标谷活性{{timeinfo.mbghx}}%】还有{{timeinfo.remain_time}}小时</div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage('/patindex')">返回</div>
        <div class="jbbtn" @click="goPage('/patinjectionlist')">注射记录</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Picker
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      Picker
    },
    data() {
      return {
        form: {},
        nowDatetime:this.$datetime.formatDateTimeFull(new Date()),
        timeinfo:{}
      }
    },
    methods: {
      goPage(path) {
        if(path==-1){
          this.$router.go(-1)
        }else{
          this.$router.push(path)
        }
      }
    },
    created(){
      //获取时间
      this.$api.get_patient_timecalc().then(res=>{
        this.timeinfo=res.data.data
      })
    }
  }

</script>

<style scoped lang="scss">
  .loginForm {
    width: 84%;
    margin: auto;
    margin-top: 4rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    .mint-field {
      border: 1px solid #ccc;
      border-radius: 50px;
      margin-top: 1rem;
    }

    .mint-cell {
      min-height: 2.12rem;
    }
    .clocksucbg{
      width:80%;
      margin:auto;
      position: relative;
      /* padding-top:4rem; */
      /* height: 16rem; */
      // height: 19rem;
    }
    .clocksucmsg{
      width:100%;
      position:absolute;
      text-align: center;
      top:calc(50% - 1rem);
      font-size:1.4rem;
      color:#fff;
      font-weight: bold;
      height: 2rem;
    }
    .clockintime {
      // width: 60%;
      font-size: 1rem;
      color: #ccc;
      margin: auto;
      margin-top: 2rem;
      margin-bottom: 4rem;
    }
  }
  .footer{
    display: flex;
    margin-top:2rem;
    .jbbtn{
      width: 42%;
    }
  }
</style>