OfficeApp/pages/views/com_approve.vue

<template>
  <view class="">
    <view class="content_card">
      <view class="cont_header flex_a_c_j_sb">
        <view class="task_name">任务名称</view>
        <view class="is_matter">任务审批</view>
      </view>
      <view class="cont_details">
        审批内容
        <view class="">审批详细描述</view>
      </view>
    </view>
    <view class="content_card">
      <!-- 头部 -->
      <view class="cont_header">
        <view class="flex_a_c_j_sb">
          <view class="approver">当前审批人：张三</view>
          <view class="audit_store">审核状态：<text>已通过</text> </view>
        </view>
        <view class="make_copy">抄送人：李四</view>
      </view>
      <!-- 内容 -->
      <view class="cont_details">
        <view class="examine">审批流程</view>
        <view class="examine">审批记录</view>
        <block v-for="(item,i) in 3" :key="i">
          <view class="record flex">
            <view class="circle"></view>
            <text class="text">2023-03-24 :09:40 张三 提交 了此申请。操作意见：提交申请</text>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    onLoad() {},
    onShow() {},
    methods: {},
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .content_card {
    width: 695rpx;
    margin: 0 auto;
    margin-top: 24.56rpx;
    padding: 0 28.07rpx;
    background-color: #fff;
    border-radius: 4px;
  }

  .cont_header {
    padding: 21.05rpx 0;
    font-size: 31.58rpx;
    min-height: 82.46rpx;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 0.5);

    .task_name {
      width: 526.32rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .is_matter {
      font-size: 24.56rpx;
      border-radius: 4px;
      // padding: 3.51rpx 17.54rpx;
      color: $theme-oa-color;
      // background-color: #E4EDFF;
    }

    // 审批人
    .approver {
      font-size: 28.07rpx;
    }

    .audit_store {
      font-size: 31.58rpx;
    }

    .make_copy {
      color: #999;
      margin-top: 14.04rpx;
      font-size: 24.56rpx;
    }
  }

  .cont_details {
    padding: 24.56rpx 0;
    font-size: 28.07rpx;

    // 时间
    .finish_time {
      font-size: 24.56rpx;
      color: #999;
    }

    text {
      display: block;
      margin-bottom: 7.02rpx;
    }

    .upload_box {
      padding: 17.54rpx;
      background-color: #F7F7F7;
      border-radius: 4px;

      .title {
        font-size: 28.07rpx;
      }

      .text {
        margin-top: 7.02rpx;
        font-size: 21.05rpx;
        color: #999;
      }
    }

    .file {
      padding: 17.54rpx;
      border-radius: 4px;
      border: 1px solid #F2F2F2;
      margin-bottom: 17.54rpx;

      .file_size {
        margin-top: 7.02rpx;
      }

      .file_size,
      .upload_people {
        font-size: 21.05rpx;
        color: #999;
      }
    }

    // 审批
    .examine {
      margin-bottom: 17.54rpx;
    }

    .record {
      position: relative;
      margin-bottom: 14.04rpx;

      .circle {
        width: 31.58rpx;
        height: 31.58rpx;
        background-color: #fff;
        border: 2px solid #34A853;
        border-radius: 50%;
        margin: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;

        &::before {
          content: "";
          display: block;
          position: absolute;
          clear: both;
          width: 1px;
          height: 100%;
          background-color: rgba(204, 204, 204, 0.5);
          margin: 31.58rpx;
        }
      }

      .text {
        flex: 1;
        margin-left: 7.02rpx;
      }
    }

    :last-child {
      .circle {
        &::before {
          display: none;
        }
      }
    }
  }
</style>