dvcp_v2_wechat_app/src/project/sanjianxi/AppApplyPoint/detail.vue

<template>
  <div class="wrapper">
    <div class="bg-ff">
      <p class="title">填报信息</p>
      <div class="info">
        <div class="label">申请人</div>
        <div class="value">陶白白</div>
      </div>
      <div class="info">
        <div class="label">申请时间</div>
        <div class="value">2021-12-06 13:23</div>
      </div>
      <div class="info">
        <div class="label">积分类型</div>
        <div class="value">陶白白</div>
      </div>
      <div class="info">
        <div class="label">申请描述</div>
        <div class="value">2022.1.1上午11:00搭乘D5478次动车；座位号E56</div>
      </div>
      <div class="info border-none">
        <div class="label">图片资料</div>
      </div>
      <div class="img-list">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658307867&t=bdf3d5fa8f718c772521f9ba71ba062b" alt="">
      </div>
    </div>
    <div class="bg-ff">
      <p class="title">审核详情</p>
      <div class="info">
        <div class="label">审核结果</div>
        <div class="value status0">通过</div>
      </div>

      <div class="info">
        <div class="label">加分项</div>
        <div class="value">街道荣誉</div>
      </div>
      <div class="info">
        <div class="label">积分调整</div>
        <div class="value">+10分</div>
      </div>

      <div class="info">
        <div class="label">驳回理由</div>
        <div class="value">2022.1.1上午11:00搭乘D5478次动车；座位号E56</div>
      </div>

      <div class="info">
        <div class="label">审核人</div>
        <div class="value">张三</div>
      </div>
      <div class="info">
        <div class="label">审核时间</div>
        <div class="value">2021-12-06 13:23</div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "detail",
  appName: "积分审核详情",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      
    };
  },
  onLoad() {

  },
  methods: {
    preview(index) {
      // this.$previewImage(this.detail.files, index, "url");
    },
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.bg-ff{
  background-color: #fff;
  padding-left: 32px;
  margin-bottom: 24px;
  .title{
    font-size: 38px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    line-height: 52px;
    padding: 32px 0;
  }
  .info{
    width: 100%;
    display: flex;
    padding: 34px 32px 34px 0;
    box-sizing: border-box;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 44px;
    .label{
      width: calc(100% - 480px);
      color: #999;
    }
    .value{
      width: 480px;
      color: #333;
      text-align: right;
      word-break: break-all;
    }
    .status0{
      color: #FF883C;
    }
    .status1{
      color: #42D784;
    }
    .status2{
      color: #f46;
    }
  }
  .border-none{
    border-bottom: 0px;
  }
  .img-list{
    padding-bottom: 44px;
    img{
      width: 226px;
      height: 226px;
      margin: 0 4px 4px 0;
    }
  }
}
</style>