shujuju/boman-h5/src/views/ord.vue

<template>
    <div>
        <div class="detailItem detailesty">
            <div class="imgparent">
                <van-nav-bar
                    title="详情"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
                />
            </div>
            <div>
                <div class="approba_nave">
                    <p>
                        <span class="soei"><i>王明</i>的请假申请</span>
                    </p>
                    <p></p>
                    <p>提交时间：2021-04-25 13:00</p>
                    <p>审批状态：已通过</p>
                    <img
                                    src="../assets/img/pic_zt_shtg.png"
                                    alt=""
                                    class="ecord_img"
                                >
                </div>
            </div>
            <div class="approba_nition">
                <p>审批编号</p>
                <p>20210424134500456832</p>
            </div>
            <div class="approba_nition">
                <p>所在部门</p>
                <p>市监局</p>
            </div>
            <div class="approba_nition">
                <p>请假类型</p>
                <p>事假</p>
            </div>
            <div class="approba_nition">
                <p>请假开始时间</p>
                <p>2021-04-25 13:00</p>
            </div>
            <div class="approba_nition">
                <p>请假结束时间</p>
                <p>2021-04-25 18:00</p>
            </div>
            <div class="approba_nition">
                <p>请假结束时间</p>
                <p>2021-04-25 18:00</p>
            </div>
            <div class="approba_nition">
                <p>请假事由</p>
                <p>去医院接种新冠疫苗</p>
            </div>
            <div class="approba_nition">
                <p>图片</p>
                <p><img
                        src="../assets/img/icon_hp_spjl.png"
                        alt=""
                    ></p>
            </div>
            <!-- <div class="details_bott">
                <p @click="showPopup">驳回审批</p>
                <p>同意审批</p>
            </div> -->

            <van-popup v-model="show">
                <div class="detalies_boname">
                    <p><span>驳回原因</span><span @click="dele">
                            <van-icon name="close" /></span></p>
                    <p>
                        <van-field
                            v-model="message"
                            rows="2"
                            autosize
                            type="textarea"
                            maxlength="50"
                            placeholder="请输入留言"
                            show-word-limit
                        />
                    </p>
                    <p>提交</p>
                </div>
            </van-popup>

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

<script>
export default {
  data() {
    return {
      show: false,
      message:''
    };
  },
  props: ["detailitem"],

  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    // 驳回
    showPopup() {
      this.show = true;
    },
    dele(){
        this.show = false;
    }
  }
};
</script>

<style lang="less">
.detailes {
  .van-popup--center {
    width: 80%;
  }
  .van-field__control {
    height: 85px;
  }
}
</style>


<style scoped lang="less">
.detailesty {
  background-color: #fff;
//   margin-bottom: 16vw;
  //   height: 100vh;
  p {
    font-size: 3.333vw;
    padding: 0.833vw 0;
  }
  .imgparent {
    position: relative;
    .bottom {
      padding: 0 2.778vw;
      margin-bottom: 1.389vw;
      position: absolute;
      bottom: 0.556vw;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
      justify-content: space-between;
      color: white;
      display: flex;
      left: 0;
      right: 0;
    }
  }
  .approba_nave {
    border-bottom: 0.267vw solid #dadada;
    margin: 0 16px;
    padding: 16px 0;
    margin-bottom: 0;
    position: relative;
    .ecord_img {
      width: 11.2vw;
      height: 11.2vw;
      position: absolute;
      right: 0;
      bottom: 12px;
    }
    p {
      font-size: 2.667vw;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    p:nth-child(1) {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.333vw;

      i {
        font-style: normal;
        font-weight: 700;
      }
      .soei {
        font-size: 3.733vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
      }
      span:nth-child(2) {
        color: #aaa;
        font-weight: 500;
      }
    }
  }
}
.approva_header {
  box-shadow: 0vw 0.8vw 0.533vw 0vw rgba(218, 218, 218, 0.35);
}
.approba_nition {
  padding: 2.133vw 4.267vw;
  img {
    width: 27.733vw;
    height: 27.733vw;
    margin-top: 1.333vw;
  }
  p {
    font-size: 2.667vw;
    font-family: PingFang SC;
    font-weight: 500;
    color: #aaaaaa;
  }
  p:nth-child(2) {
    color: #343434;
  }
}
.details_bott {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  p {
    flex: 1;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background: #fd3737;
    font-size: 4vw;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  p:nth-child(2) {
    background: #009fe8;
  }
}
.detalies_boname {
  padding: 0 4.267vw;
  p:nth-child(1) {
    display: flex;
    justify-content: space-between;
    margin-bottom:6.667vw;
    margin-top:2.667vw;
    span:nth-child(1) {
      font-size: 4vw;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      width: 98%;
      text-align: center;
    }
    span:nth-child(2) {
      flex: 1;
      font-size: 4vw;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
    }
  }
  p:nth-child(2) {
    border: 0.267vw solid #009fe8;
    border-radius: 0.8vw;
  }
  p:nth-child(3) {
    height: 10.133vw;
    line-height:10.133vw;
    background: #009fe8;
    border-radius: 3px;
    font-size: 4vw;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    text-align:center;
    margin-top:18px;
    margin-bottom:18px;
  }
}

</style>