From 4228c383f0fd88162aca434779f7c87a653c49c8 Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Tue, 3 Feb 2026 14:02:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=88=AA=E7=BA=BF=E7=BC=96=E8=BE=91=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/dialogs/RouteEditDialog.vue | 139 ++++++++++++++++---------
 1 file changed, 89 insertions(+), 50 deletions(-)

diff --git a/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue b/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
index ee692f6..5385869 100644
--- a/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
+++ b/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
@@ -1,10 +1,11 @@
 <template>
   <el-dialog
+    title="编辑航线"
     :visible.sync="visible"
     width="560px"
     :close-on-click-modal="false"
     append-to-body
-    custom-class="blue-dialog route-edit-dialog route-edit-dialog-no-title"
+    custom-class="blue-dialog route-edit-dialog"
   >
     <div class="route-edit-tab-bar">
       <button type="button" class="tab-bar-item" :class="{ active: activeTab === 'basic' }" @click="activeTab = 'basic'">基础</button>
@@ -369,15 +370,25 @@ export default {
 </script>
 
 <style>
-/* 无标题弹窗：隐藏“编辑航线”标题，仅保留关闭按钮 */
-.route-edit-dialog-no-title .el-dialog__title { display: none !important; }
-.route-edit-dialog-no-title .el-dialog__header { margin-bottom: 0; padding: 10px 20px 8px; }
-/* 弹窗垂直居中 */
-.route-edit-dialog .el-dialog {
-  margin-top: 50vh !important;
-  transform: translateY(-50%);
-}
-.route-edit-dialog .el-dialog__body { padding-top: 12px; }
+/* 航线编辑标题：加粗加黑 */
+.route-edit-dialog .el-dialog__title { font-weight: 700; color: #303133; }
+.route-edit-dialog .el-dialog__header { padding: 14px 20px 12px; }
+/* 弹窗固定于视口正中间，不随页面滚动 */
+.route-edit-dialog.el-dialog {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  margin: 0 !important;
+  transform: translate(-50%, -50%);
+}
+/* 弹窗内容区固定高度，切换基础/平台时大小不变 */
+.route-edit-dialog .el-dialog__body {
+  padding-top: 12px;
+  height: 420px;
+  min-height: 420px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
 </style>
 <style scoped>
 .route-edit-tab-bar {
@@ -403,7 +414,7 @@ export default {
   color: #606266;
 }
 .tab-bar-item.active {
-  color: #008aff;
+  color: #165dff;
   font-weight: 500;
 }
 .tab-bar-item.active::after {
@@ -413,23 +424,43 @@ export default {
   right: 0;
   bottom: 0;
   height: 2px;
-  background: #008aff;
+  background: #165dff;
 }
 .tab-pane-wrap {
   padding-top: 4px;
+  height: 384px;
+  min-height: 384px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 .tab-pane-body {
+  height: 380px;
   min-height: 380px;
+  max-height: 380px;
   box-sizing: border-box;
 }
 .basic-tab-content {
-  padding-right: 4px;
+  padding: 0 16px;
+  height: 380px;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
+/* 基础页区块：与平台卡片同风格，白底 + 柔和阴影，左右留白可展示阴影 */
 .form-section {
-  background: #f8f9fb;
+  background: #fff;
   border-radius: 8px;
   padding: 12px 14px;
   margin-bottom: 14px;
+  border: none;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.25s ease;
+}
+.form-section:hover {
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06),
+    0 8px 20px rgba(0, 0, 0, 0.06);
 }
 .form-section:last-of-type {
   margin-bottom: 0;
@@ -473,40 +504,41 @@ export default {
   margin-right: 12px;
 }
 
-/* 平台页：分段选择 */
+/* 平台页：分段选择（样图风格 - 独立圆角矩形，与上方基础/平台有间距） */
 .platform-tab-content {
   min-height: 380px;
   max-height: 380px;
   overflow-y: auto;
+  background: #fff;
+  padding: 0 16px;
 }
 .platform-segmented {
-  display: flex;
-  gap: 0;
-  background: #eef1f6;
-  border-radius: 8px;
-  padding: 4px;
-  margin-bottom: 14px;
+  display: inline-flex;
+  gap: 8px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 .seg-item {
-  flex: 1;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 8px 12px;
-  border: none;
-  border-radius: 6px;
+  padding: 5px 22px;
+  border: 1px solid #e4e7ed;
+  border-radius: 20px;
   font-size: 13px;
-  color: #909399;
-  background: transparent;
+  color: #606266;
+  background: #f5f5f5;
   cursor: pointer;
   transition: all 0.2s;
 }
 .seg-item:hover {
-  color: #606266;
+  border-color: #dcdfe6;
+  color: #303133;
 }
 .seg-item.active {
-  background: #008aff;
+  background: #165dff;
+  border-color: #165dff;
   color: #fff;
   font-weight: 500;
 }
@@ -524,16 +556,16 @@ export default {
   filter: brightness(0) invert(1);
 }
 .seg-icon-air {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
 }
 .seg-icon-sea {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78-.12-.24-.32-.42-.57-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.25.08-.45.26-.57.5-.12.24-.14.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78-.12-.24-.32-.42-.57-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.25.08-.45.26-.57.5-.12.24-.14.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z'/%3E%3C/svg%3E");
 }
 .seg-icon-ground {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23606266'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
 }
 
-/* 平台卡片列表 */
+/* 平台卡片列表（与页面同背景色 + 阴影框） */
 .platform-loading,
 .empty-tip {
   padding: 20px;
@@ -544,19 +576,25 @@ export default {
 .platform-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
+/* 平台卡片：无硬边框，用柔和阴影做过渡，不死板（参考右侧样图） */
 .platform-card {
   display: flex;
   align-items: center;
   padding: 12px 14px;
-  background: #f8f9fb;
+  background: #fff;
   border-radius: 8px;
-  border: 1px solid #eef1f6;
-  transition: border-color 0.2s;
+  border: none;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.04),
+    0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.25s ease;
 }
 .platform-card:hover {
-  border-color: #dcdfe6;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06),
+    0 8px 20px rgba(0, 0, 0, 0.06);
 }
 .platform-card-icon {
   width: 44px;
@@ -576,7 +614,7 @@ export default {
 }
 .platform-card-icon .card-icon-placeholder {
   font-size: 22px;
-  color: #008aff;
+  color: #165dff;
 }
 .platform-card-info {
   flex: 1;
@@ -595,13 +633,14 @@ export default {
   font-size: 12px;
   color: #909399;
 }
+/* 选择按钮：样图风格圆角矩形（胶囊形） */
 .platform-card-btn {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 6px 14px;
-  border-radius: 6px;
+  padding: 6px 16px;
+  border-radius: 20px;
   font-size: 13px;
   border: 1px solid #dcdfe6;
   background: #fff;
@@ -610,12 +649,12 @@ export default {
   transition: all 0.2s;
 }
 .platform-card-btn:hover {
-  border-color: #008aff;
-  color: #008aff;
+  border-color: #165dff;
+  color: #165dff;
 }
 .platform-card-btn.selected {
-  background: #008aff;
-  border-color: #008aff;
+  background: #165dff;
+  border-color: #165dff;
   color: #fff;
 }
 .platform-card-btn i {
@@ -623,11 +662,11 @@ export default {
 }
 
 .blue-btn {
-  background: #008aff;
-  border-color: #008aff;
+  background: #165dff;
+  border-color: #165dff;
 }
 .blue-btn:hover {
-  background: #0066cc;
-  border-color: #0066cc;
+  background: #165dff;
+  border-color: #165dff;
 }
 </style>