完善会议管理界面

2025-09-18 15:52:15 +08:00
parent 955de763c7
commit 8349951626
16 changed files with 878 additions and 113 deletions
--- a/App.vue
+++ b/App.vue
@@ -22,7 +22,7 @@ export default {
 </script>
 <style>
 	@import url("~@/static/iconfont/iconfont.css");
-  @import url("~@/static/font/font.css");
+  @import "@/static/font/font.css";
 </style>
 <style lang="scss">
@import "uview-ui/index.scss";
--- a/pages.json
+++ b/pages.json
@@ -180,6 +180,12 @@
    },
    {
      "path": "pages/sys/workbench/meet/meetDetail",
+      "style": {
+        "navigationBarTitleText": "会议室详情"
+      }
+    },
+    {
+      "path": "pages/sys/workbench/meet/reservation",
      "style": {
        "navigationBarTitleText": "会议详情"
      }
--- a/pages/sys/user/myRepair/addRepair.vue
+++ b/pages/sys/user/myRepair/addRepair.vue
@@ -187,7 +187,7 @@

 <style scoped>
 	.add-repair-container {
-		height: 100vh;
+    height: calc(100vh - (44px + env(safe-area-inset-top)));
 		background: #f7f7f7;
 		display: flex;
 		flex-direction: column;
--- a/pages/sys/user/myVisitor/creatVisitor.vue
+++ b/pages/sys/user/myVisitor/creatVisitor.vue
@@ -125,7 +125,7 @@ export default {
 <style scoped>
 .cv-container {
  background: #fff;
-  height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  display: flex;
  flex-direction: column;
 }
--- a/pages/sys/user/myVisitor/myVisitor.vue
+++ b/pages/sys/user/myVisitor/myVisitor.vue
@@ -221,7 +221,7 @@ export default {

 <style scoped>
 .visitor-container {
-  height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
--- a/pages/sys/workbench/meet/createMeet.vue
+++ b/pages/sys/workbench/meet/createMeet.vue
@@ -44,6 +44,50 @@
    <view class="custom-picker-wrapper">
      <uni-datetime-picker type="datetime" :hide-second="true" v-model="formData.time"/>
    </view>
+    <!-- 选择会议室类型 -->
+    <text class="section-title">会议室类型</text>
+    <view class="select-field" @click="showMeetingTypePicker">
+      <text>{{ formData.meetingType || '请选择会议室类型' }}</text>
+      <image class="arrow-icon" src="/static/ic_right_arrow_g.png"/>
+    </view>
+
+    <!-- 会议室类型选择弹窗 -->
+    <uni-popup ref="meetingTypePopup" type="bottom" :mask-click="false">
+      <view class="meeting-type-popup">
+        <view class="popup-header">
+          <text class="popup-title">选择会议室类型</text>
+          <text class="popup-close" @click="hideMeetingTypePicker">×</text>
+        </view>
+        <scroll-view class="type-list" scroll-y>
+          <view
+              v-for="(type, index) in meetingTypes"
+              :key="index"
+              class="type-item"
+              @click="selectMeetingType(index)">
+            <view class="type-icon">
+              <image :src="type.icon" class="type-icon-img"/>
+            </view>
+            <view class="type-info">
+              <text class="type-name">{{ type.name }}</text>
+            </view>
+            <!-- 使用相同的自定义选择框 -->
+            <view class="custom-checkbox">
+              <image
+                  class="checkbox-border"
+                  src="/static/ic_checkbox_border.png"
+                  mode="aspectFill"
+              />
+              <image
+                  v-if="meetingTypeIndex === index"
+                  class="check-icon"
+                  src="/static/ic_check_mark.png"
+              />
+            </view>
+          </view>
+        </scroll-view>
+        <button class="confirm-btn" @click="confirmMeetingType">确认选择</button>
+      </view>
+    </uni-popup>

    <!-- 选择会议室 -->
    <text class="section-title">选择会议室</text>
@@ -63,9 +107,10 @@
          <view
              v-for="(room, index) in meetingRooms"
              :key="index"
-              class="room-item">
+              class="room-item"
+             >
            <view class="room-icon"></view>
-            <view class="room-info">
+            <view class="room-info"  @click="goMeetDetail(index)">
              <text class="room-name">{{ room.name }}</text>
              <text class="room-detail">{{ room.capacity }} {{ room.facility }}</text>
            </view>
@@ -154,7 +199,40 @@ export default {
      // 新增服务展开状态
      serviceExpanded: false,
      meetingRoomIndex: 0,
+      meetingTypeIndex: 0,
      meetingTime: '2025-07-07 14:00-18:00',
+      meetingTypes: [
+        {
+          name: '小型会议室',
+          description: '适合4-8人小型会议',
+          icon: '/static/ic_meet_small.png'
+        },
+        {
+          name: '中型会议室',
+          description: '适合8-20人中型会议',
+          icon: '/static/ic_meet_medium.png'
+        },
+        {
+          name: '大型会议室',
+          description: '适合20-50人大型会议',
+          icon: '/static/ic_meet_large.png'
+        },
+        {
+          name: '多功能厅',
+          description: '适合50人以上大型活动',
+          icon: '/static/ic_meet_hall.png'
+        },
+        {
+          name: '视频会议室',
+          description: '配备专业视频会议设备',
+          icon: '/static/ic_meet_video.png'
+        },
+        {
+          name: '董事会议室',
+          description: '高端商务会议场所',
+          icon: '/static/ic_meet_board.png'
+        }
+      ],
      meetingRooms: [
        {name: '3栋1号会议室 (3078)', capacity: '可容纳20人', facility: '带电视', price: 29},
        {name: '3栋2号会议室 (5124)', capacity: '可容纳50人', facility: '带投影仪', price: 49},
@@ -261,7 +339,11 @@ export default {
        this.calculateTotalPrice();
      }
    },
-
+    goMeetDetail(){
+      uni.navigateTo({
+        url: `/pages/sys/workbench/meet/meetDetail`
+      });
+    },
    calculateTotalPrice() {
      let total = 0;

@@ -279,7 +361,21 @@ export default {

      this.totalPrice = total;
    },
-
+    // 新增会议室类型相关方法
+    showMeetingTypePicker() {
+      this.$refs.meetingTypePopup.open();
+    },
+    hideMeetingTypePicker() {
+      this.$refs.meetingTypePopup.close();
+    },
+    selectMeetingType(index) {
+      this.meetingTypeIndex = index;
+    },
+    confirmMeetingType() {
+      const selectedType = this.meetingTypes[this.meetingTypeIndex];
+      this.formData.meetingType = selectedType.name;
+      this.hideMeetingTypePicker();
+    },
    submitForm() {
      if (!this.formData.peopleNum || !this.formData.meetingRoom) {
        uni.showToast({
@@ -759,4 +855,53 @@ export default {
 .room-item:active {
  background-color: #f5f5f5;
 }
+
+/* 新增会议室类型弹窗样式 */
+.meeting-type-popup {
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 30rpx;
+  max-height: 70vh;
+}
+
+.type-list {
+  max-height: 50vh;
+  margin-bottom: 20rpx;
+}
+
+.type-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+  border-bottom: 1rpx solid #eee;
+  position: relative;
+}
+
+.type-icon {
+  width: 80rpx;
+  height: 80rpx;
+  margin-right: 20rpx;
+
+  .type-icon-img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.type-info {
+  flex: 1;
+}
+
+.type-name {
+  font-size: 32rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+/* 类型项悬停效果 */
+.type-item:active {
+  background-color: #f5f5f5;
+}
+
 </style>
--- a/pages/sys/workbench/meet/reservation.vue
+++ b/pages/sys/workbench/meet/reservation.vue
@@ -0,0 +1,504 @@
+<template>
+  <view class="container" :class="pageStatus">
+    <!-- 水印状态 -->
+    <view class="status-watermark" :class="statusClass">
+      {{ statusText }}
+    </view>
+
+    <!-- 会议室信息卡片 -->
+    <view class="info-card">
+      <text class="room-name">1号会议室</text>
+      <text class="time-slot">10:00------12:00</text>
+    </view>
+
+    <!-- 会议详情信息 -->
+    <view class="detail-section">
+      <view class="detail-item">
+        <text class="label">发起人</text>
+        <text class="value">{{ organizer }}</text>
+      </view>
+      <view class="detail-item">
+        <text class="label">会议主题</text>
+        <text class="value">{{ meetingTheme }}</text>
+      </view>
+      <view class="detail-item">
+        <text class="label">会议时间</text>
+        <text class="value">{{ meetingTime }}</text>
+      </view>
+      <view class="detail-item">
+        <text class="label">会议人数</text>
+        <text class="value">{{ attendeesCount }}人</text>
+      </view>
+
+
+      <!-- 签到二维码 -->
+      <view class="qr-code-section" v-if="pageStatus === 'started' || pageStatus === 'ended'">
+        <text class="qr-title">签到二维码</text>
+        <view class="qr-code-container"
+              :class="{'disabled-qrcode': pageStatus === 'ended'}"
+              @longpress="saveQRCode">
+          <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
+        </view>
+        <text class="qr-tip" v-if="pageStatus === 'started'">长按保存</text>
+        <text v-if="pageStatus === 'ended'">二维码已失效</text>
+      </view>
+
+      <!-- 签到信息 -->
+      <view class="detail-item" v-if="pageStatus !== 'pending' && pageStatus !== 'checkin'">
+        <text class="label">已签到人数</text>
+        <text class="value">{{ checkedInCount }}人</text>
+      </view>
+    </view>
+    <view class="attendees-avatars"
+          v-if="pageStatus !== 'pending' && pageStatus !== 'checkin' && checkedInAttendees.length > 0">
+      <view class="avatars-container">
+        <view class="avatar-item" v-for="(attendee, index) in checkedInAttendees" :key="index">
+          <image class="avatar" :src="attendee.avatar" mode="aspectFill"></image>
+          <text class="avatar-name">{{ attendee.name }}</text>
+        </view>
+      </view>
+    </view>
+    <!-- 底部操作按钮 -->
+    <view class="action-buttons" v-if="pageStatus === 'pending'|| pageStatus === 'checkin'">
+      <!-- 待确认状态 -->
+      <template v-if="pageStatus === 'pending'">
+        <view class="button-row">
+          <button class="cancel-btn" @click="cancelMeeting">取消会议</button>
+          <button class="modify-btn" @click="modifyMeeting">修改会议</button>
+        </view>
+      </template>
+
+
+      <!-- 待签到状态 - 仅在未签到显示 -->
+      <template v-if="pageStatus === 'checkin' && !hasCheckedIn">
+        <button class="checkin-btn" @click="checkIn">点击签到</button>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+import uQRCode from 'uqrcodejs';
+
+export default {
+  data() {
+    return {
+      // 页面状态
+      pageStatus: 'started',
+
+      // 会议信息
+      organizer: '张芳',
+      meetingTheme: '夏日火灾防灾培训',
+      meetingTime: '2025-07-10 10:00-12:00',
+      attendeesCount: 20,
+      checkedInCount: 6,
+      checkedInAttendees: [
+        {name: '张三', avatar: '/static/ic_avg.png'},
+        {name: '李四', avatar: '/static/ic_avg.png'},
+        {name: '王五', avatar: '/static/ic_avg.png'},
+        {name: '赵六', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'},
+        {name: '钱七', avatar: '/static/ic_avg.png'}
+      ],
+      // 签到状态
+      hasCheckedIn: false,
+
+      // 二维码数据
+      qrData: "二维码已失效"
+    };
+  },
+  computed: {
+    statusText() {
+      return this.hasCheckedIn ? '已签到' : '未签到';
+    },
+    statusClass() {
+      return {
+        'pending-tag': this.pageStatus === 'pending',
+        'started-tag': this.pageStatus === 'started',
+        'ended-tag': this.pageStatus === 'ended',
+        'checkin-tag': this.pageStatus === 'checkin' && !this.hasCheckedIn,
+        'checked-tag': this.hasCheckedIn
+      };
+    }
+  },
+  methods: {
+    // 生成二维码
+    makeQRCode() {
+      const qr = new uQRCode();
+      qr.data = this.qrData;
+      qr.size = 200;
+      qr.make();
+
+      const canvasContext = uni.createCanvasContext('qrcode', this);
+      qr.canvasContext = canvasContext;
+      qr.drawCanvas();
+    },
+
+    // 签到方法
+    checkIn() {
+      uni.vibrateShort();
+      this.hasCheckedIn = true;
+      this.checkedInCount += 1;
+      uni.showToast({
+        title: '签到成功',
+        icon: 'success'
+      });
+    },
+    // 保存二维码方法
+    saveQRCode() {
+      if (this.pageStatus === 'ended') return; // 已结束的二维码不能保存
+
+      uni.showLoading({
+        title: '保存中...'
+      });
+
+      // 获取canvas临时路径
+      uni.canvasToTempFilePath({
+        canvasId: 'qrcode',
+        success: (res) => {
+          // 保存到相册
+          uni.saveImageToPhotosAlbum({
+            filePath: res.tempFilePath,
+            success: () => {
+              uni.hideLoading();
+              uni.showToast({
+                title: '保存成功',
+                icon: 'success'
+              });
+            },
+            fail: (err) => {
+              uni.hideLoading();
+              uni.showToast({
+                title: '保存失败',
+                icon: 'none'
+              });
+              console.error('保存失败:', err);
+            }
+          });
+        },
+        fail: (err) => {
+          uni.hideLoading();
+          uni.showToast({
+            title: '生成图片失败',
+            icon: 'none'
+          });
+          console.error('生成临时路径失败:', err);
+        }
+      }, this);
+    },
+
+    // 返回
+    goBack() {
+      uni.navigateBack();
+    },
+
+    // 取消会议
+    cancelMeeting() {
+      uni.showModal({
+        title: '确认取消',
+        content: '确定要取消本次会议吗？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({
+              title: '会议已取消',
+              icon: 'success'
+            });
+          }
+        }
+      });
+    },
+
+    // 修改会议
+    modifyMeeting() {
+      uni.navigateTo({
+        url: '/pages/meeting/modify'
+      });
+    }
+  },
+  mounted() {
+    this.makeQRCode();
+  },
+  watch: {
+    pageStatus(newVal) {
+      if (newVal === 'started' || newVal === 'ended') {
+        this.$nextTick(() => {
+          this.makeQRCode();
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.container {
+  padding: 30rpx;
+  background-color: #fff;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
+  box-sizing: border-box;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.status-watermark {
+  position: absolute;
+  top: 7%;
+  left: 42%;
+  transform: translate(50%, 50%) rotate(45deg);
+  width: 240rpx;
+  height: 240rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  font-weight: bold;
+  opacity: 0.5;
+  z-index: 0;
+
+  &.pending-tag {
+    color: #ff9500;
+    border: 8rpx solid #ff9500;
+  }
+
+  &.started-tag {
+    color: #09bb07;
+    border: 8rpx solid #09bb07;
+  }
+
+  &.ended-tag {
+    color: #999;
+    border: 8rpx solid #999;
+  }
+
+  &.checkin-tag {
+    color: #ff9500;
+    border: 8rpx solid #ff9500;
+  }
+
+  &.checked-tag {
+    color: #007CFF;
+    border: 8rpx solid #007CFF;
+  }
+}
+
+.info-card {
+  background-color: #f0f7ff;
+  border: 1rpx solid #4a90e2;
+  width: 50%;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin: 0 auto 30rpx;
+  position: relative;
+  z-index: 1;
+
+  .room-name {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    display: block;
+    margin-bottom: 10rpx;
+    text-align: center;
+  }
+
+  .time-slot {
+    font-size: 28rpx;
+    color: #4a90e2;
+    display: block;
+    text-align: center;
+  }
+}
+
+.detail-section {
+  border-radius: 12rpx;
+  padding: 30rpx;
+  position: relative;
+  z-index: 1;
+  font-family: NotoSansHans;
+
+  .detail-item {
+    display: flex;
+    margin-bottom: 32rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .label {
+      font-weight: bold;
+      width: 160rpx;
+      font-size: 28rpx;
+      color: #2B2B2B;
+    }
+
+    .value {
+      flex: 1;
+      font-size: 28rpx;
+      color: #626262;
+    }
+  }
+}
+
+.qr-code-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30rpx 0;
+  border-top: 1rpx dashed #eee;
+  position: relative;
+  z-index: 1;
+
+  .qr-title {
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 20rpx;
+  }
+
+  .qr-tip {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.qr-code-container {
+  width: 380rpx;
+  height: 380rpx;
+  background-color: white;
+  border-radius: 10rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  z-index: 1;
+
+  &.disabled-qrcode {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 2;
+    }
+
+    canvas {
+      filter: grayscale(100%);
+    }
+  }
+}
+
+.expired-notice {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100rpx;
+  margin-top: 30rpx;
+  color: #999;
+  font-size: 28rpx;
+  border-top: 1rpx dashed #eee;
+  position: relative;
+  z-index: 1;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+  z-index: 10;
+  margin-top: 30rpx;
+  height: calc(66.66vh - 300rpx);
+  min-height: 400rpx;
+  justify-content: flex-end;
+  padding-bottom: 60rpx;
+
+  .button-row {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 20rpx;
+
+    button {
+      width: 48% !important;
+      margin: 0 !important;
+    }
+  }
+
+  button {
+    height: 80rpx;
+    line-height: 80rpx;
+    border-radius: 40rpx;
+    box-shadow: 5rpx 8rpx 5rpx #CAD0D5;
+    font-size: 30rpx;
+    margin: 10rpx 0;
+
+    &::after {
+      border: none;
+    }
+  }
+
+  .cancel-btn, .back-btn {
+    border: #007CFF 1px solid;
+    background-color: #FFFFFF;
+    color: #0090FF;
+  }
+
+  .modify-btn, .checkin-btn {
+    background-color: #2e93ff;
+    color: #fff;
+  }
+
+  .end-btn {
+    width: 100%;
+    background-color: #ff6b00;
+    color: #fff;
+  }
+}
+
+.attendees-avatars {
+  padding: 20rpx 30rpx;
+
+  .avatars-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+  }
+
+  .avatar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100rpx;
+  }
+
+  .avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background-color: #f5f5f5;
+    margin-bottom: 10rpx;
+    border: 2rpx solid #4a90e2;
+  }
+
+  .avatar-name {
+    font-size: 24rpx;
+    color: #333;
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+</style>
--- a/pages/sys/workbench/order/orderDetail.vue
+++ b/pages/sys/workbench/order/orderDetail.vue
@@ -2,7 +2,10 @@
  <view class="page-container">
    <view class="top-line"/>

-    <view class="item-bg"><text class="detail-key">工单编号：</text>{{ detail.orderNo }}</view>
+    <view class="item-bg">
+      <text class="detail-key">工单编号：</text>
+      {{ detail.orderNo }}
+    </view>
    <view class="item-bg">
      <view class="item-title">上报人信息</view>
      <view class="detail-key">发起人：{{ detail.initiatorPeople }}</view>
@@ -14,7 +17,9 @@
      <view class="detail-key">工单类型：{{ detail.typeName }}</view>
      <view class="detail-key">处理地点：{{ detail.location }}</view>
      <view class="detail-key">备注：{{ detail.remark }}</view>
-      <view class="detail-value"><text class="detail-key">工单图片：</text></view>
+      <view class="detail-value">
+        <text class="detail-key">工单图片：</text>
+      </view>
      <view class="image-list" v-if="orderImgUrls.length > 0">
        <u-image
            v-for="(imgUrl, index) in orderImgUrls"
@@ -65,6 +70,7 @@

 <script>
 import SelectUser from '@/components/SelectUser.vue'
+
 export default {
  components: {SelectUser},
  data() {
@@ -94,7 +100,9 @@ export default {
    }
  },
  methods: {
-    goBack() { uni.navigateBack(); },
+    goBack() {
+      uni.navigateBack();
+    },
    async getImageUrl() {
      if (!this.detail.orderImgUrl) return;
      const imgIds = this.detail.orderImgUrl.split(',');
@@ -198,26 +206,70 @@ export default {
 </script>

 <style scoped>
-.page-container { background: #f7f7f7; height: 100vh; }
-.top-line { width: 100vw; height: 3rpx; background: #ECECEC; }
-.item-bg{ background: #fff; border-radius: 20rpx; margin-top: 10px; margin-left: 25rpx; margin-right: 25rpx; padding: 25rpx; }
-.item-title{ color: #000; font-size: 28rpx; font-weight: 600; margin-bottom: 20rpx; }
+.page-container {
+  background: #f7f7f7;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
+}
+
+.top-line {
+  width: 100vw;
+  height: 3rpx;
+  background: #ECECEC;
+}
+
+.item-bg {
+  background: #fff;
+  border-radius: 20rpx;
+  margin-top: 10px;
+  margin-left: 25rpx;
+  margin-right: 25rpx;
+  padding: 25rpx;
+}
+
+.item-title {
+  color: #000;
+  font-size: 28rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+}
+
+.repair-detail-step-container {
+  display: flex;
+  flex-direction: column;
+}

-.repair-detail-step-container { display: flex; flex-direction: column; }
 .repair-detail-step {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
 }
-.step-left { flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 20rpx; }
-.step-date { font-size: 24rpx; color: #333; }
-.step-time { font-size: 24rpx; color: #666; margin-top: 10rpx; }
+
+.step-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding-right: 20rpx;
+}
+
+.step-date {
+  font-size: 24rpx;
+  color: #333;
+}
+
+.step-time {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 10rpx;
+}
+
 .step-dot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40rpx;
 }
+
 .repair-detail-dot {
  width: 22rpx;
  height: 22rpx;
@@ -238,16 +290,70 @@ export default {
  background: #2186FF;
 }

-.step-right { flex: 1; display: flex; flex-direction: column; padding-left: 20rpx; }
-.step-name { font-size: 28rpx; color: #333; font-weight: bold; margin-bottom: 6rpx; }
-.step-desc { font-size: 24rpx; color: #666; }
-.detail-key { color: #222; font-size: 28rpx; margin-bottom: 20rpx; }
-.detail-value { margin-bottom: 30rpx; color: #2F2F2F; }
-.image-list { display: flex; flex-wrap: wrap; margin-top: 20rpx; }
-.btn-group { display: flex; justify-content: space-around; margin-top: 60rpx; }
-.btn { width: 276rpx; height: 88rpx; padding: 20rpx; font-size: 30rpx; border-radius: 50rpx; display: flex; align-items: center; justify-content: center; }
-.primary { background-color: #1890ff; color: #fff; }
-.ghost { background-color: #fff; color: #1890ff; border: 2rpx solid #1890ff; }
+.step-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-left: 20rpx;
+}
+
+.step-name {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 6rpx;
+}
+
+.step-desc {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.detail-key {
+  color: #222;
+  font-size: 28rpx;
+  margin-bottom: 20rpx;
+}
+
+.detail-value {
+  margin-bottom: 30rpx;
+  color: #2F2F2F;
+}
+
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20rpx;
+}
+
+.btn-group {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 60rpx;
+}
+
+.btn {
+  width: 276rpx;
+  height: 88rpx;
+  padding: 20rpx;
+  font-size: 30rpx;
+  border-radius: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.primary {
+  background-color: #1890ff;
+  color: #fff;
+}
+
+.ghost {
+  background-color: #fff;
+  color: #1890ff;
+  border: 2rpx solid #1890ff;
+}
+
 .kg {
  height: 60rpx;
 }
--- a/pages/sys/workbench/unitManagement/auditsDetail.vue
+++ b/pages/sys/workbench/unitManagement/auditsDetail.vue
@@ -151,7 +151,7 @@
  .page-container {
    padding: 48rpx 30rpx;
    background-color: transparent;
-    min-height: 100vh;
+    height: calc(100vh - (44px + env(safe-area-inset-top)));
    box-sizing: border-box;
  }

--- a/pages/sys/workbench/unitManagement/employeeAdd.vue
+++ b/pages/sys/workbench/unitManagement/employeeAdd.vue
@@ -233,7 +233,7 @@ export default {
 .register-container {
  padding: 20px 15px;
  background-color: #f7f7f7;
-  min-height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  box-sizing: border-box;
 }

--- a/pages/sys/workbench/unitManagement/employeeAudits.vue
+++ b/pages/sys/workbench/unitManagement/employeeAudits.vue
@@ -154,11 +154,10 @@ export default {

 <style scoped>
 .audits-container {
-  height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
-  overflow: hidden;
 }

 .employeeList-container {
--- a/pages/sys/workbench/unitManagement/employeeEdit.vue
+++ b/pages/sys/workbench/unitManagement/employeeEdit.vue
@@ -134,7 +134,7 @@ export default {
 .page-container {
  padding: 48rpx 30rpx;
  background-color: #f7f7f7;
-  min-height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  box-sizing: border-box;
 }

--- a/pages/sys/workbench/unitManagement/employeeManagement.vue
+++ b/pages/sys/workbench/unitManagement/employeeManagement.vue
@@ -219,7 +219,7 @@ export default {

 <style scoped>
 .audits-container {
-  height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
--- a/pages/sys/workbench/unitManagement/unitManagement.vue
+++ b/pages/sys/workbench/unitManagement/unitManagement.vue
@@ -141,7 +141,7 @@ export default {
 .unit-management {
  display: flex;
  flex-direction: column;
-  height: 100vh;
+  height: calc(100vh - (44px + env(safe-area-inset-top)));
  background-color: #f5f5f5;
  padding: 20rpx;
 }
--- a/static/font/NotoSansHans.ttf
+++ b/static/font/NotoSansHans.ttf
--- a/static/font/font.css
+++ b/static/font/font.css
@@ -1,4 +1,9 @@
@font-face {
    font-family: 'AdobeHeitiStd'; /* 自定义字体名称 */
-    src: url('~@/static/font/AdobeHeitiStd-Regular.ttf') format('truetype'); /* 路径根据你的文件位置调整 */
+    src: url('./static/font/AdobeHeitiStd-Regular.ttf') format('truetype'); /* 路径根据你的文件位置调整 */
+}
+
+@font-face {
+    font-family: 'NotoSansHans'; /* 自定义字体名称 */
+    src: url('./static/font/NotoSansHans.ttf') format('truetype'); /* 路径根据你的文件位置调整 */
 }