From 470dbce4c83de0f4e4e3732c05a8573d1b060fee Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 22 Nov 2025 16:27:06 +0800
Subject: [PATCH] feat:样式调整
---
src/views/tickets/ticketComponent/TicketDetailDialog.vue | 282 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 271 insertions(+), 11 deletions(-)
diff --git a/src/views/tickets/ticketComponent/TicketDetailDialog.vue b/src/views/tickets/ticketComponent/TicketDetailDialog.vue
index 068f3f2..7b28bcd 100644
--- a/src/views/tickets/ticketComponent/TicketDetailDialog.vue
+++ b/src/views/tickets/ticketComponent/TicketDetailDialog.vue
@@ -783,9 +783,9 @@
<style lang="scss">
.custom-dialog {
height: 96vh;
+
.el-dialog__body {
border-top: 0.1rem solid #f0f0f0;
- overflow: hidden;
}
}
@@ -825,14 +825,13 @@
.step-timer {
position: absolute;
- right: 92%;
+ right: 80%;
top: 50%;
transform: translateY(-50%);
- min-width: 100px;
-
+ width: 100px;
+ margin-left: 4px;
color: #666;
font-size: 12px;
- white-space: nowrap;
}
.event-total-time {
@@ -842,6 +841,9 @@
margin-bottom: 12px;
}
+.action-bar {
+ margin-bottom: 16px;
+}
.el-dialog {
.el-form-item {
@@ -869,14 +871,129 @@
margin-top: 12px;
}
+.create-ticket-form {
+ padding: 20px 10px;
+
+ .form-section {
+ background-color: #fff;
+ border-radius: 4px;
+
+ .el-row {
+ margin-bottom: 16px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ .location-wrapper {
+ width: 100%; // 修改为100%以适应父容器
+ height: auto; // 修改为auto以自适应内容
+
+ .map-button {
+ width: 100%; // 让按钮填满容器宽度
+ height: 36px; // 与其他输入框保持一致的高度
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ i {
+ margin-right: 4px;
+ }
+ }
+
+ .location-text {
+ margin-top: 8px;
+ padding: 8px 12px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+ color: #606266;
+ font-size: 13px;
+ line-height: 1.4;
+ }
+ }
+
+ .upload-wrapper {
+ .uploader {
+ :deep(.el-upload--picture-card) {
+ width: 120px;
+ height: 100px;
+ line-height: 128px;
+ }
+
+ :deep(.el-upload-list__item) {
+ width: 120px;
+ height: 120px;
+ }
+ }
+
+ .upload-tip {
+ font-size: 12px;
+ color: #909399;
+ line-height: 1.4;
+ margin-top: 8px;
+ }
+ }
+
+ .el-form-item {
+ margin-bottom: 18px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ :deep(.el-form-item__label) {
+ font-weight: 500;
+ color: #606266;
+ }
+
+ // :deep(.el-input__inner) {
+ // height: 36px;
+ // line-height: 36px;
+ // }
+
+ :deep(.el-textarea__inner) {
+ padding: 8px 12px;
+ }
+
+ // :deep(.el-input__inner),
+ // :deep(.el-select),
+ // :deep(.el-select .el-input) {
+ // width: 100%; // 确保所有输入框和选择框宽度一致
+ // }
+
+ .full-width {
+ width: 100%;
+ }
+}
+
:deep(.el-dialog__body) {
border-top: 0.1rem solid #f0f0f0;
}
+.dialog-footer-new {
+ text-align: right;
+ padding-top: 16px;
+ border-top: 1px solid #ebeef5;
+
+ .el-button + .el-button {
+ margin-left: 12px;
+ }
+
+ .el-button {
+ padding: 9px 20px;
+
+ &:last-child {
+ margin-left: 12px;
+ }
+ }
+}
.dialog-footer1-new {
position: sticky;
- // bottom: 28px;
+ bottom: 28px;
left: 0;
right: 0;
background: white;
@@ -918,6 +1035,18 @@
}
}
+.location-info {
+ margin-top: 10px;
+ padding: 10px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+
+ p {
+ margin: 5px 0;
+ color: #606266;
+ font-size: 14px;
+ }
+}
.map-select {
display: flex;
@@ -1073,13 +1202,11 @@
}
.PopUpTableScrolls {
- max-height: calc(100vh - 370px);
- min-height: 200px;
- overflow-y: auto;
+ max-height: 600px;
+ overflow-y: scroll;
overflow-x: hidden;
- padding-bottom: 30px;
- // scrollbar-width: thin;
}
+
.media-box {
width: 100%;
border: 1px solid #dcdfe6;
@@ -1264,6 +1391,137 @@
}
}
+// 添加新的样式
+.review-dialog {
+ :deep(.el-dialog__body) {
+ padding: 0;
+ background-color: #f5f7fa;
+ border-top: 0.1rem solid #f0f0f0;
+ }
+}
+
+.re-check-dialog {
+ :deep(.el-dialog__body) {
+ padding: 0;
+ background-color: #f5f7fa;
+ border-top: 0.1rem solid #f0f0f0;
+ }
+}
+
+.review-container {
+ position: relative;
+
+ .review-image-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 600px;
+ background-color: #f5f7fa;
+ }
+
+ .review-image-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ :deep(.el-image) {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .el-image__inner {
+ max-height: 100%;
+ max-width: 100%;
+ object-fit: contain;
+ }
+ }
+ }
+
+ .arrow-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 44px;
+ height: 44px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s;
+ z-index: 100;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ i {
+ color: #fff;
+ font-size: 24px;
+ }
+
+ &.left {
+ left: 20px;
+ color: #ffffff;
+ }
+
+ &.right {
+ right: 20px;
+ color: #ffffff;
+ }
+ }
+
+ .preview-image {
+ max-width: 100%;
+ max-height: 100%;
+ }
+
+ .review-pagination {
+ padding: 16px 0;
+ display: flex;
+ justify-content: center;
+ background-color: #fff;
+
+ :deep(.el-pagination) {
+ .btn-prev,
+ .btn-next {
+ display: none;
+ }
+
+ .el-pager {
+ .number {
+ margin: 0 4px;
+ }
+ }
+ }
+ }
+
+ .image-error {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #909399;
+
+ i {
+ font-size: 48px;
+ margin-bottom: 16px;
+ }
+
+ span {
+ font-size: 16px;
+ }
+ }
+}
+
/* 新建工单和处理工单的上传组件样式 */
.create-upload,
.detail-upload {
@@ -1298,6 +1556,7 @@
object-fit: contain;
}
}
+
/* 必填项样式 */
.required-label {
position: relative;
@@ -1308,6 +1567,7 @@
margin-right: 4px;
}
}
+
/* 必填输入框样式 */
.required-input {
width: 100%;
--
Gitblit v1.9.3