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">打卡时间：{{nowDatetime}}</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())
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      }
    }
  }

</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:60%;
      margin:auto;
      position: relative;
      padding-top:4rem;
      height: 14rem;
    }
    .clocksucmsg{
      width:100%;
      position:absolute;
      text-align: center;
      top:9rem;
      font-size:1.2rem;
      color:#fff;
      font-weight: bold;
    }
    .clockintime {
      width: 60%;
      font-size: 1rem;
      color: #ccc;
      margin: auto;
      margin-top: 2rem;
      margin-bottom: 4rem;
    }
  }
  .footer{
    display: flex;
    .jbbtn{
      width: 42%;
    }
  }
</style>