feat:事件工单滚动条

张含笑

2025-08-05 c832bf2e80ac465e71b7a1c1f7a59d4252030989

feat:事件工单滚动条

 src/views/tickets/ticket.vue

@@ -374,7 +374,7 @@
    </el-dialog>

    <!-- 工单详情对话框 -->
    <el-dialog   align-center v-model="detailVisible" title="工单详情" width="80%" append-to-body>
    <el-dialog   class="custom-dialog" align-center v-model="detailVisible" title="工单详情" width="80%"  append-to-body>
      <div class="detail-container">
        <div class="detail-top-title">
          <div class="event-title-center event-orderNumber">
@@ -417,7 +417,8 @@
          </el-steps>
        </div>

        <!-- 基本信息表格 -->
      <div class="PopUpTableScrolls">
          <!-- 基本信息表格 -->
        <el-table :show-header="false" :data="formattedDetailFields" border class="tableCss">
          <el-table-column prop="label1" label="基本信息" width="150">
            <template #default="{ row }">
@@ -644,6 +645,7 @@
             
          </el-row>
        </div>
      </div>

        <!-- 操作按钮 -->
        <div class="dialog-footer">
@@ -652,9 +654,9 @@
                :class="currentIndex === 0 ? 'disableds' : ''"
                @click="leftClick"
              >
               <el-icon><ArrowLeft /></el-icon>
               上一页
              </div>
       <div>
       <div class="btngroups">
           <template v-if="currentDetail.status === 2">
            <!-- 待审核 -->
            <el-button
@@ -713,7 +715,7 @@
                class="leftBtn"
                @click="rightClick"
              >
               <el-icon><ArrowRight /></el-icon>
              下一页
              </div>
        </div>
      </div>
@@ -2950,7 +2952,9 @@

};
</script>

<style lang="scss">
.custom-dialog {  height: 96vh; /* 80% 视口高度 */}
</style>
<style lang="scss" scoped>

::v-deep(.el-tabs) {
@@ -3157,22 +3161,29 @@
}

.dialog-footer {
display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;

  position: sticky;
    bottom: 28px;
    left: 0;
    right: 0;
    background: white;
    z-index: 10;
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  .el-button + .el-button {
    margin-left: 12px;
  }

.btngroups {
margin-left: 12px;
}
  .el-button {
    padding: 9px 20px;

    &:last-child {
      margin-left: 12px;
      margin-right: 12px;
    }
  }
}
@@ -3338,18 +3349,16 @@
}

.leftBtn {
  width: 36px;
  height: 36px;
  width: 70px;
  height: 32px;
  background-color: #999;
  border-radius: 50%;
  border-radius: 5px;
  text-align: center;
  line-height: 36px;
line-height: 32px;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
display: flex;
align-items: center;
justify-content: center;

}

.disableds {
@@ -3358,7 +3367,11 @@
  pointer-events: none;
  opacity: 0.3 !important;
}

.PopUpTableScrolls{
height: 600px;
overflow-y: scroll;
overflow-x: hidden;
}
.media-box {
  width: 100%;
  border: 1px solid #dcdfe6;
@@ -3374,7 +3387,7 @@

  .media-content {
    position: relative;
    height: 250px;
    height: 500px;

    :deep(.el-image) {
      width: 100% !important;