SmartParks_uniapp/pages/sys/workbench/unitManagement/auditsDetail.vue

  <template>
    <view class="page-container">
      <!-- 渐变蓝色背景 -->
      <view class="gradient-bg"></view>

      <!-- 用户信息卡片 -->
      <view class="user-card">
        <view class="user-info">
          <view class="info-row">
            <text class="label">用户姓名：</text>
            <text class="value">余永乐</text>
          </view>
          <view class="info-row">
            <text class="label">性别：</text>
            <text class="value">男</text>
          </view>
          <view class="info-row">
            <text class="label">证件号：</text>
            <text class="value">5001255658789955</text>
          </view>
          <view class="info-row">
            <text class="label">联系电话：</text>
            <text class="value">17898987887</text>
          </view>
          <view class="info-row">
            <text class="label">所属单位：</text>
            <text class="value">x x x x x</text>
          </view>

          <!-- 人脸图片区域 -->
          <view class="face-image-section">
            <text class="label">人脸图片：</text>
            <image
                class="face-image"
                :src="auditsDetail.avatar || '/static/ic_avg.png'"
                mode="aspectFill"
            />
          </view>
        </view>
      </view>

      <view class="user-card">
        <view class="user-info">
          <view class="info-row">
            <text class="label">邮箱：</text>
            <text class="value">-</text>
          </view>
          <view class="info-row">
            <text class="label">车牌号：</text>
            <text class="value">-</text>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view v-if="pageType === 'handle'" class="action-buttons">
        <button class="approve-btn" @click="handleApprove">通过</button>
        <button class="reject-btn" @click="handleReject">拒绝</button>
      </view>
    </view>
  </template>

  <script>
  export default {
    data() {
      return {
        pageType: 'handle', // 'handle' 或 'detail'
        auditsDetail: {},
        handleDesc: '',
        selectedImages: [],
        realImages: [],
        infoImages: []
      };
    },
    methods: {
      // 原有方法保持不变...
      handleApprove() {
        console.log('approve');
      },
      handleReject() {
        console.log('reject');
      },
      async submit(action) {
        // 提交逻辑...
      },
      // 其他原有方法...
    }
  };
  </script>

  <style scoped>
  /* 渐变蓝色背景 */
  .gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 500rpx;
    background: linear-gradient(to bottom, #0A60ED, #FFFFFF);
    z-index: -1;
  }

  .page-container {
    padding: 48rpx 30rpx;
    background-color: transparent;
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* 用户信息卡片样式 */
  .user-card {

    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  }

  .user-info {
    width: 100%;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;
    font-size: 32rpx;
  }

  .info-row .label {
    color: #000;
    font-weight: 500;
  }

  .info-row .value {
    color: #7F7F7F;
  }

  /* 人脸图片区域 */
  .face-image-section {
    margin-bottom: 32rpx;
  }

  .face-image-section .label {
    display: block;
    margin-bottom: 20rpx;
    color: #000;
    font-weight: 500;
  }

  .face-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    border: 1rpx solid #eee;
  }

  /* 底部按钮样式 */
  .action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding: 0 30rpx;
  }

  .action-buttons button {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
  }

  .reject-btn {
    background-color: transparent;
    color: #0190FF;
    border: 2rpx solid #0190FF;
    margin-left: 20rpx;
    transition: all 0.15s ease; /* 添加过渡效果 */
  }

  .reject-btn:active {
    color: #FFFFFF; /* 文字改为白色 */
    background-color: #0170CC; /* 背景改为深蓝色 */
    border-color: #0170CC;
    box-shadow: 0 4rpx 12rpx rgba(1, 112, 204, 0.4); /* 阴影加深 */
    transform: translateY(2rpx); /* 轻微下压效果 */
  }

  .approve-btn {
    background-color: #0190FF;
    color: #fff;
    border: none;
    transition: all 0.15s ease; /* 添加过渡效果 */
  }

  .approve-btn:active {
    background-color: #0150A0; /* 更深的蓝色 */
    box-shadow: 0 4rpx 12rpx rgba(1, 80, 160, 0.4); /* 阴影加深 */
    transform: translateY(2rpx); /* 轻微下压效果 */
  }

  </style>