dvcp_v2_wxcp_app/src/project/fd/AppPointsReview/detail.vue

<template>
  <div class="detail">
    <div class="content">
      <div class="title-flex">
        <p>房前屋后卫生房前屋后卫生房前屋后卫生房前屋后卫生房前屋后卫生房前屋后卫生</p>
        <div class="color-0">未通过过</div>
      </div>
      <div class="user-flex">
        <div>申请人：张三</div>
        <div>电话号码：15102745934</div>
      </div>
      <p class="text">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办午，庆祝中国共产党成立100周年在国务院举办午，庆祝中…</p>
      <div class="img-list">
        <img src="https://t7.baidu.com/it/u=1575628574,1150213623&fm=193&f=GIF" alt="">
        <img src="https://t7.baidu.com/it/u=1575628574,1150213623&fm=193&f=GIF" alt="">
        <img src="https://t7.baidu.com/it/u=1575628574,1150213623&fm=193&f=GIF" alt="">
        <img src="https://t7.baidu.com/it/u=1575628574,1150213623&fm=193&f=GIF" alt="">
      </div>
    </div>
    <div class="pass-info">
      <div class="title"><span></span>未通过理由</div>
      <p>腾讯还联合多方伙伴发起了一项特别行动—“碳寻计划”。这是中国在碳捕集利用与封存（CCUS）领域首个由科技企业发起的大规模资助计划，资金规模在亿元人民币级别</p>
    </div>
    <div class="footer">
      <div class="confirm">通过</div>
      <div class="cancel" @click="show=true">不通过</div>
    </div>
    <u-popup v-model="show" mode="bottom">
      <div class="textarea">
        <u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入不通过原因" :clearable="false" maxlength="1000" />
        <p>字数{{ value.length }}/1000</p>
      </div>
      <div class="btn">
        <span @click="value = ''">清空内容</span>
        <span class="confirm" @click="confirm">保存</span>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      keyword: '',
      areaId: '',
      areaName: '',
      show: false,
      value: ''
    };
  },
  onShow() {
    
  },
  methods: {
    confirm() {

    }
  },
};
</script>

<style lang="scss" scoped>
uni-page-body {
  background-color: #F4F5FA;
}
.detail {
  height: 100%;
  .content {
    margin: 32px 0;
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    .title-flex {
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;
      p {
        color: #333;
        font-size: 34px;
        font-weight: 600;
        font-family: "PingFang SC";
        line-height: 40px;
        word-break: break-all;
      }
      div {
        font-size: 28px;
        font-family: "PingFang SC";
        line-height: 40px;
        width: 280px;
        text-align: right;
      }
      .color-0{
        color: #42D784;
      }
      .color-1{
        color: #cd413aff;
      }
      .color-2{
        color: #1365DD;
      }
    }
    .user-flex {
      display: flex;
      justify-content: space-between;
      line-height: 42px;
      margin-bottom: 16px;
      font-size: 28px;
      color: #333;
    }
    .text {
      color: #333;
      font-size: 28px;
      font-family: "PingFang SC";
      line-height: 42px;
      margin-bottom: 20px;
    }
    .img-list {
      img {
        width: 210px;
        height: 210px;
        margin: 0 16px 16px 0;
      }
      img:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
  .pass-info {
    padding: 40px;
    background-color: #fff;
    .title {
      color: #222;
      font-size: 30px;
      font-family: "PingFang SC";
      line-height: 40px;
      margin-bottom: 24px;

      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #CD413A;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
    p {
      color: #666;
      font-size: 28px;
      font-family: "PingFang SC";
      line-height: 42px;
      word-break: break-all;
    }
  }
  .footer{
    width: 100%;
    height: 96px;
    background: #FFF;
    box-shadow: inset 0 0 0 0 #D4D4D4;
    box-sizing: border-box;
    display: flex;
    position: fixed;
    bottom: 0;
    div {
      flex: 1;
      height: 96px;
      line-height: 96px;
      background: #FFF;
      font-family: PingFangSC-Regular;
      font-size: 32px;
      text-align: center;
      font-weight: 500;
    }
    .cancel {
      color: #1365DD;
      line-height: 76px;
      box-sizing: border-box;
    }
    .confirm {
      background-color: #1365DD;
      color: #fff;
    }
  }
  .textarea {
    margin: 32px 32px 24px;
    width: calc(100% - 64px);
    padding: 16px;
    box-sizing: border-box;
    background: #f7f7f7;
    border-radius: 8px;
    p {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999;
      line-height: 36px;
      text-align: right;
    }
  }
  .btn {
    padding: 0 32px 24px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    span {
      display: inline-block;
      line-height: 64px;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;
    }
    .confirm {
      width: 144px;
      text-align: center;
      background: #1365dd;
      border-radius: 32px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #fff;
    }
  }
}
</style>