<template>
    <div>
        <div class="lock">
            <div class="imgparent">
                <van-nav-bar
                    title="考勤打卡"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
                />
            </div>
            <div class="lock_header">
                <div><img
                        src="../assets/img/tx.jpg"
                        alt=""
                    ></div>
                <div class="userheader_one">
                    <p>李鑫</p>
                    <p>所在部门：市监局</p>
                </div>
                <div @click="chas">
                    查看考勤记录 >
                </div>
            </div>
            <div class="bottom">
                <p>当前位置</p>
                <div class="bott_nav">
                    <img
                        src="../assets/img/icon_kadk-dw.png"
                        alt=""
                    >
                    <p>安徽省合肥市蜀山区高薪技术产业开发区黄山路59号
                        时代数码港</p>
                </div>
                <!-- 第二部分 -->
                <div class="lock_navebut">
                    <p>
                        <span>{{gettime}}</span>
                            <span>下班打卡</span>
                    </p>
                    <p>
                        <img
                            src="../assets/img/icon_kqdk_jrfw.png"
                            alt=""
                        >
                        <span>已进入考勤范围</span>
                    </p>
                </div>
                <!-- 第三部分 -->
                <div class="lockbom_nam">
                    <van-steps
                        direction="vertical"
                        :active="0"
                    >
                        <van-step>
                            <h3>08:47 打卡成功</h3>
                            <p>安徽省合肥市蜀山区高薪技术产业开发区黄山路59号
                                时代数码港</p>
                        </van-step>
                        <van-step>
                            <h3>下班打卡</h3>
                            <p>{{gettimetwo}}</p>
                        </van-step>
                    </van-steps>
                </div>
            </div>

            <p></p>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      text: "选择日期",
      value: "",
      showPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      gettime: "",
      gettimetwo: ""
    };
  },
  created() {
    this.time();
  },
  methods: {
    pathPush() {},
    onClickLeft() {
      this.$router.go(-1)
    },
    // 查看考勤记录
    chas(){
        this.$router.push("/ttendance");
    },
    // 日期
    time() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettimetwo =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      _this.gettime = hh + ":" + mf + ":" + ss;
      console.log(this.gettime);
    }
  }
};
</script>

<style scoped lang="less">
.lock {
  //   height: 100vh;
  background: #fff;
  padding: 0 17px;
  padding-bottom: 40px;
  .lock_header {
    height: 22.133vw;
    display: flex;
    justify-content: space-between;
    padding: 4.533vw;
    align-items: center;
    box-shadow: 0px 0px 6px 0px rgba(153, 152, 152, 0.39);
    border-radius: 3px;
    margin-top: 30px;
    div:nth-child(2) {
      flex: 1;
      p:nth-child(1) {
        margin-bottom: 1.333vw;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
      p:nth-child(2) {
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
    div:nth-child(1) {
      display: flex;
      width: 16.8vw;
      height: 16.8vw;
      border-radius: 16.8vw;
      overflow: hidden;
      margin-right: 2.667vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
    div:nth-child(3) {
      font-size: 2.933vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #009fe8;
    }
  }
  //   第二部分样式
  .bottom {
    box-shadow: 0px 0px 6px 0px rgba(153, 152, 152, 0.39);
    border-radius: 3px;
    margin-top: 15px;
    padding: 0 16px;
    padding-top: 27px;

    p {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
    }
    .bott_nav {
      display: flex;
      margin-top: 16px;
      img {
        width: 14px;
        height: 14px;
      }
      p {
        flex: 1;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
        margin-left: 6px;
      }
    }
  }
  //   按钮样式
  .lock_navebut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    p:nth-child(1) {
      width: 167px;
      height: 56px;
      background: #009fe8;
      box-shadow: 0px 3px 3px 0px rgba(3, 141, 204, 0.39);
      border-radius: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 13px;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
      span:nth-child(2) {
        font-weight: 500;
        margin-top: 3px;
      }
    }
    p:nth-child(2) {
      img {
        width: 10px;
        height: 10px;
      }
      span {
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-left: 5px;
      }
    }
  }
}
</style>