feat:窗口不滚动，切换按钮放底部

张含笑

2025-08-05 97b5943d4e851af6becc643e6ccce8d0b03b53ab

feat:窗口不滚动，切换按钮放底部

 src/views/tickets/orderLog.vue

@@ -1,13 +1,4 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2025-04-15 20:02:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-04-28 11:38:16
 * @FilePath: \drone-web-manage\src\views\tickets\orderLog.vue
 * @Description:
 *
 * Copyright (c) 2025 by shuishen, All Rights Reserved.
-->

<template>
  <basic-container>
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
@@ -241,7 +232,7 @@
    </el-dialog>

    <!-- 工单详情对话框 -->
    <el-dialog v-model="detailVisible" :title="detailTitle" width="70%" :close-on-click-modal="false"
    <el-dialog align-center v-model="detailVisible" :title="detailTitle" width="70%" :close-on-click-modal="false"
      @close="resetForm">
      <div class="event-title-center">{{ form.name }}</div>
      <el-form :model="form" :rules="rules" ref="testform" label-width="100px">
@@ -1394,7 +1385,7 @@

.el-dialog {
  .el-form-item {
    margin-bottom: 20px;
    margin-bottom: 10px;
  }
}


 src/views/tickets/ticket.vue

@@ -361,6 +361,7 @@
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          
          <el-button type="danger" :loading="submitLoading" @click="submitForm">发布</el-button>
          <el-button type="infoprimary" plain :loading="draftLoading" @click="saveDraft"
            >存草稿</el-button
@@ -373,7 +374,7 @@
    </el-dialog>

    <!-- 工单详情对话框 -->
    <el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body>
    <el-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">
@@ -573,16 +574,8 @@
        <!-- 图片和地图部分 -->
        <div class="media-section">
          <el-row :gutter="20">
            <el-col :span="1">
              <div
                class="leftBtn"
                :class="currentIndex === 0 ? 'disableds' : ''"
                @click="leftClick"
              >
                <
              </div>
            </el-col>
            <el-col :span="11">
           
            <el-col :span="12">
              <div class="media-box">
                <div class="media-title">事件图片</div>
                <div class="media-content">
@@ -610,7 +603,7 @@
                </div>
              </div>
            </el-col>
            <el-col :span="11">
            <el-col :span="12">
              <div class="media-box">
                <!-- 根据状态显示不同的标题和内容 -->

@@ -647,21 +640,22 @@
                </template>
              </div>
            </el-col>
            <el-col :span="1">
              <div
                :class="currentIndex === tableData.length - 1 ? 'disableds' : ''"
                class="leftBtn"
                @click="rightClick"
              >
                >
              </div>
            </el-col>
           
             
          </el-row>
        </div>

        <!-- 操作按钮 -->
        <div class="dialog-footer">
          <template v-if="currentDetail.status === 2">
            <div
                class="leftBtn"
                :class="currentIndex === 0 ? 'disableds' : ''"
                @click="leftClick"
              >
               <el-icon><ArrowLeft /></el-icon>
              </div>
       <div>
           <template v-if="currentDetail.status === 2">
            <!-- 待审核 -->
            <el-button
              v-if="hasReviewBtnPermission()"
@@ -713,6 +707,14 @@
              @click="finalizeTicket">完结工单</el-button> -->
            <el-button @click="detailVisible = false">取消</el-button>
          </template>
       </div>
            <div
                :class="currentIndex === tableData.length - 1 ? 'disableds' : ''"
                class="leftBtn"
                @click="rightClick"
              >
               <el-icon><ArrowRight /></el-icon>
              </div>
        </div>
      </div>
    </el-dialog>
@@ -2950,6 +2952,7 @@
</script>

<style lang="scss" scoped>

::v-deep(.el-tabs) {
  height: 100%;
  display: flex;
@@ -3004,7 +3007,7 @@

.tableCss {
  width: 100%;
  margin-bottom: 20px;
  margin-bottom: 10px;
}

.step-timer {
@@ -3154,7 +3157,10 @@
}

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

@@ -3245,7 +3251,7 @@
}

.detail-container {
  padding: 20px;
  padding:0 20px;

  .detail-top-title {
    display: flex;
@@ -3323,7 +3329,7 @@
}

.media-section {
  margin-bottom: 20px;
  // margin-bottom: 20px;

  .el-row {
    display: flex;
@@ -3341,6 +3347,9 @@
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
display: flex;
align-items: center;
justify-content: center;
}

.disableds {
@@ -3360,12 +3369,12 @@

  .media-title {
    font-weight: bold;
    margin-bottom: 10px;
    margin-bottom: 5px;
  }

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

    :deep(.el-image) {
      width: 100% !important;
@@ -3375,7 +3384,7 @@
      .el-image__inner {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-fit: cover !important;
      }
    }
  }
@@ -3428,12 +3437,12 @@
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  min-height: 40px;
  min-height: 30px;
  color: #606266;
  line-height: 1.5;
  display: block;
  text-align: left;

margin-bottom: 5px;
  &:first-child {
    font-weight: bold;
    margin-bottom: 4px;
@@ -3451,23 +3460,23 @@

.custom-steps-container {
  width: 100%;
  margin: 20px 0;
  margin: 10px 0;
}

.steps-titles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: 14px;
  position: relative;
}

.step-title {
  text-align: center;
  flex: 1;
  font-size: 16px;
  font-size: 14px;
  color: #999;
  position: relative;
  padding-bottom: 10px;
  padding-bottom: 5px;
}

.step-title.active {
@@ -3479,7 +3488,7 @@
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-bottom: 5px;
  color: #333;
}