woka
/
cesium-map-object
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

航线编辑优化

wxp
ctw 2 months ago
parent
20aa6fce5f
commit
4228c383f0
1 changed files with 89 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 139
      ruoyi-ui/src/views/dialogs/RouteEditDialog.vue

139
ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save