im-uniapp/components/hrm/detailPanels/leave.vue

<template>
  <view class="leave-detail-container">
    <!-- 请假类型 - 单独行+类型图标 -->
    <view class="detail-item single-item">
      <text class="item-icon icon-type"></text>
      <view class="item-label">请假类型：</view>
      <view class="item-value">{{ detail.leaveType || '无' }}</view>
    </view>
		
		<view class="detail-item single-item">
		  <text class="item-icon icon-type"></text>
		  <view class="item-label">请假时间：</view>
		  <view class="item-value">{{ formatTime(detail.startTime) }} - {{ formatTime(detail.endTime) }}</view>
		</view>

    <!-- 请假时长 - 单独行+时钟图标 -->
    <view class="detail-item single-item">
      <text class="item-icon icon-hour"></text>
      <view class="item-label">请假时长：</view>
      <view class="item-value">{{ detail.hours || '0' }} 小时</view>
    </view>

    <!-- 请假原因 - 单独行+备注图标（适配多行文） -->
    <view class="detail-item single-item reason-item">
      <text class="item-icon icon-reason"></text>
      <view class="item-label">请假原因：</view>
      <view class="item-value">{{ detail.reason || '无' }}</view>
    </view>

    <!-- 申请人 - 单独行+用户图标 -->
    <view class="detail-item single-item">
      <text class="item-icon icon-user"></text>
      <view class="item-label">申请人：</view>
      <view class="item-value">{{ detail.createBy || '无' }}</view>
    </view>

    <!-- 申请时间 - 单独行+日历图标 -->
    <view class="detail-item single-item">
      <text class="item-icon icon-date"></text>
      <view class="item-label">申请时间：</view>
      <view class="item-value">{{ formatTime(detail.createTime) || '无' }}</view>
    </view>
  </view>
</template>

<script>
  import { getLeaveReq } from '@/api/hrm/leave'
  
  export default {
    props: {
      bizId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        detail: {}
      }
    },
    watch: {
      bizId: {
        handler(newVal) {
          if (!newVal) return;
          getLeaveReq(newVal)
            .then(res => {
              this.detail = res.data || {};
              console.log(this.detail);
            })
            .catch(err => {
              console.error('获取请假详情失败：', err);
              uni.showToast({
                title: '获取详情失败',
                icon: 'none',
                duration: 2000
              });
            });
        },
        immediate: true
      }
    },
    methods: {
      formatTime(timeStr) {
        if (!timeStr) return '';
        const [datePart] = timeStr.split(' ');
        return datePart;
      }
    }
  }
</script>

<style scoped>
/* 主容器 - 卡片化升级，柔和阴影+大圆角+合理内边距 */
.leave-detail-container {
  background: #ffffff;
  border-radius: 18rpx;
  margin: 20rpx 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* 基础项样式 - 统一flex布局、行高、间距 */
.detail-item {
  display: flex;
  align-items: flex-start;
  line-height: 48rpx;
  padding: 20rpx 0;
  border-bottom: 1px solid #f9f9f9;
}
/* 最后一项移除下边框 */
.detail-item:last-child {
  border-bottom: none;
}
/* 单独行项 - 基础适配 */
.single-item {
  flex-direction: row;
}
/* 同行双项 - 核心布局 */
.double-item {
  flex-direction: row;
  justify-content: space-between;
}

/* 图标样式 - 统一尺寸/颜色，视觉点缀（主题色可自定义） */
.item-icon {
  display: inline-block;
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
  margin-top: 8rpx;
  flex-shrink: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #409eff; /* 主题色，可替换为项目主色 */
}
/* 各字段专属图标（使用Unicode图标，无需额外引入，直接替换即可） */
.icon-type { content: "\e645"; font-family: "iconfont"; }
.icon-time-start { content: "\e629"; font-family: "iconfont"; }
.icon-time-end { content: "\e62a"; font-family: "iconfont"; }
.icon-hour { content: "\e68f"; font-family: "iconfont"; }
.icon-reason { content: "\e614"; font-family: "iconfont"; }
.icon-user { content: "\e600"; font-family: "iconfont"; }
.icon-date { content: "\e637"; font-family: "iconfont"; }

/* 标签样式 - 固定宽度+右对齐，视觉规整 */
.item-label {
  width: 160rpx;
  font-size: 30rpx;
  color: #909399;
  font-weight: 500;
  flex-shrink: 0;
}
/* 同行时间项的标签 - 适配窄宽度 */
.time-item .item-label {
  width: 100rpx;
}

/* 内容值样式 - 弹性占比，适配多行文/长文本 */
.item-value {
  flex: 1;
  font-size: 30rpx;
  color: #333333;
  word-break: break-all;
}
/* 请假原因 - 适配多行文，增加行高 */
.reason-item .item-value {
  line-height: 52rpx;
  padding-top: 4rpx;
}

/* 同行时间项 - 各占近50%宽度，防止挤压 */
.time-item {
  display: flex;
  align-items: flex-start;
  width: 48%;
}

/* 同行时间项分隔线 - 竖线分隔，提升辨识度 */
.split-line {
  width: 1px;
  height: 60rpx;
  background-color: #f9f9f9;
  margin: 8rpx 16rpx 0;
  flex-shrink: 0;
}
</style>