From 97b5943d4e851af6becc643e6ccce8d0b03b53ab Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 05 Aug 2025 15:42:38 +0800
Subject: [PATCH] feat:窗口不滚动，切换按钮放底部
---
src/views/tickets/ticket.vue | 79 ++++++++++++++++++++++-----------------
src/views/tickets/orderLog.vue | 15 +------
2 files changed, 47 insertions(+), 47 deletions(-)
diff --git a/src/views/tickets/orderLog.vue b/src/views/tickets/orderLog.vue
index 8cc4d77..f695d28 100644
--- a/src/views/tickets/orderLog.vue
+++ b/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;
}
}
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index e7a5439..8cb2837 100644
--- a/src/views/tickets/ticket.vue
+++ b/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;
}
--
Gitblit v1.9.3