样式修改

zhangwencui

10 小时以前 6e1cb1b850f3536eb91b3247f2b5e6aadf6805c9

 src/pages/safeProduction/dangerInvestigation/index.vue

@@ -26,7 +26,8 @@
          v-if="visitList.length > 0">
      <view v-for="(item, index) in visitList"
            :key="index">
        <view class="ledger-item">
        <view class="ledger-item"
              :class="{ 'overdue': isOverdue(item.rectifyTime, item.rectifyActualTime) }">
          <view class="item-header">
            <view class="item-left">
              <view class="document-icon">
@@ -117,12 +118,6 @@
                      @click="viewDetail(item)">
              查看详情
            </u-button> -->
            <u-button type="primary"
                      size="small"
                      class="action-btn"
                      @click="editVisit(item)">
              编辑
            </u-button>
            <u-button type="warning"
                      size="small"
                      class="action-btn"
@@ -136,6 +131,14 @@
                      :disabled="!item.rectifyActualTime"
                      @click="acceptanceVisit(item)">
              验收
            </u-button>
          </view>
          <view class="action-buttons">
            <u-button type="primary"
                      size="small"
                      class="action-btn"
                      @click="editVisit(item)">
              编辑
            </u-button>
            <u-button type="info"
                      size="small"
@@ -199,6 +202,21 @@
  import dayjs from "dayjs";

  const userStore = useUserStore();

  // 检查隐患是否超期未整改
  const isOverdue = (rectifyTime, rectifyActualTime) => {
    // 如果已经整改完成，则不超期
    if (rectifyActualTime) return false;

    // 如果没有整改期限，则不超期
    if (!rectifyTime) return false;

    const today = dayjs();
    const deadline = dayjs(rectifyTime);

    // 如果当前日期超过整改期限，则超期
    return today.isAfter(deadline, "day");
  };

  // 搜索关键词
  const customerName = ref("");
@@ -364,5 +382,42 @@
  .action-buttons {
    gap: 4px;
  }
  .action-buttons {
    padding: 0 0 10rpx 0;
  }

  // 超期未整改的隐患样式
  .overdue {
    border-left: 8rpx solid #ff4d4f;
    background-color: rgba(255, 77, 79, 0.02);
  }

  .overdue .item-header {
    position: relative;
    padding-left: 20rpx;
  }

  .overdue .item-header::after {
    content: "超期";
    position: absolute;
    top: 32rpx;
    right: 20rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ff4d4f;
    background-color: rgba(255, 77, 79, 0.1);
    padding: 4rpx 16rpx;
    border-radius: 16rpx;
    border: 1rpx solid rgba(255, 77, 79, 0.3);
  }

  .overdue .detail-row:nth-child(7) .detail-value {
    color: #ff4d4f;
    font-weight: 500;
  }

  .overdue .detail-row {
    padding-left: 20rpx;
  }
</style>