diff --git a/packages/screen/src/views/cockpit/assets/img/header-bg.png b/packages/screen/src/views/cockpit/assets/img/header-bg.png
index 3020925..b873c80 100644
Binary files a/packages/screen/src/views/cockpit/assets/img/header-bg.png and b/packages/screen/src/views/cockpit/assets/img/header-bg.png differ
diff --git a/packages/screen/src/views/cockpit/components/CockpitLayout.vue b/packages/screen/src/views/cockpit/components/CockpitLayout.vue
index 6b43946..1db6ed6 100644
--- a/packages/screen/src/views/cockpit/components/CockpitLayout.vue
+++ b/packages/screen/src/views/cockpit/components/CockpitLayout.vue
@@ -1,6 +1,7 @@
+
@@ -26,17 +27,14 @@
-
+
-
+
@@ -60,7 +58,7 @@ import LegendToolbar from './LegendToolbar.vue'
import EmergencyForceTooltip from './EmergencyForceTooltip.vue'
import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
-onMounted(()=>{
+onMounted(() => {
// 加载地图业务底图 并 聚焦中心点
mapBase.loadBaseData()
@@ -138,7 +136,7 @@ const emergencyForceAbortController = ref(null)
* key具体有哪些,请根据LegendToolbar.vue中定义的defaultLegendItems
* 后续的ImageMarkData中也需要与这里的key值对应
*/
-const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
+const legendKeys = ref(['serviceFacility', 'riskRoad', 'blockEvent', 'weatherAlert', 'emergencyForce'])
/**
* 过滤标记对象,存放当前需要过滤的关键字
@@ -439,21 +437,21 @@ const handleEmergencyResourceClick = (resource) => {
const filterList = filterMark.value.serviceFacility
const index = filterList.findIndex((item) => item == resource.qxmc)
// 实现第一次点击表示选中,第二次点击表示取消选中
- if(index > -1) filterList.splice(index, 1)
+ if (index > -1) filterList.splice(index, 1)
else filterList.push(resource.qxmc)
// 当点击了某个区县,需要将养护站的legend也点亮
const legendIndex = legendToolActiveItem.value.indexOf('serviceFacility')
// 如果过滤列表存在数据,则需要点亮legend
- if(filterList.length && legendIndex == -1) {
+ if (filterList.length && legendIndex == -1) {
legendToolActiveItem.value.push('serviceFacility')
}
// 如果过滤列表不存在,则需要关闭legend
- if(!filterList.length && legendIndex > -1) {
+ if (!filterList.length && legendIndex > -1) {
legendToolActiveItem.value.splice(legendIndex, 1)
}
- mapImageMarkHook.filterYHZMark("serviceFacility", (item)=>{
+ mapImageMarkHook.filterYHZMark("serviceFacility", (item) => {
return filterList.find((filterItem) => filterItem == item.qxmc)
})
@@ -468,7 +466,7 @@ const handleEmergencyResourceClick = (resource) => {
* @param {string} [payload.markerIcon] - 标记图标
*/
const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
- if(key === 'riskRoad') {
+ if (key === 'riskRoad') {
mapBase.toggleHighAltitudeRoadMap(active)
return
}
@@ -476,7 +474,7 @@ const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
// 只处理应急力量图例项
if (key !== 'emergencyForce') {
- if(active == false) {
+ if (active == false) {
filterMark.value[key] = []
}
@@ -607,6 +605,7 @@ onBeforeUnmount(() => {
@supports (width: 1cqw) {
--cq-inline-100: 100cqw;
}
+
@supports (height: 1cqh) {
--cq-block-100: 100cqh;
}
@@ -623,13 +622,15 @@ onBeforeUnmount(() => {
width: 100%;
height: 100%;
min-height: var(--cockpit-min-height);
- min-width: 0; /* 允许 flex 子元素收缩 */
+ min-width: 0;
+ /* 允许 flex 子元素收缩 */
background: url(../assets/img/cockpit-main-bg.png) no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
- overflow: auto; /* 当宿主高度 < 最小高度时允许滚动 */
+ overflow: auto;
+ /* 当宿主高度 < 最小高度时允许滚动 */
}
/* 窄容器嵌入的紧凑布局(<1100px 宽度)*/
@@ -641,8 +642,10 @@ onBeforeUnmount(() => {
.cockpit-main {
position: relative;
flex: 1;
- min-height: 0; /* 允许网格在 flex 上下文中收缩 */
- overflow: hidden; /* 防止内容溢出 */
+ min-height: 0;
+ /* 允许网格在 flex 上下文中收缩 */
+ overflow: hidden;
+ /* 防止内容溢出 */
}
/* 地图底层 - 填满整个容器 */
@@ -658,7 +661,8 @@ onBeforeUnmount(() => {
position: absolute;
inset: 0;
z-index: 1;
- pointer-events: none; /* 不阻挡交互 */
+ pointer-events: none;
+ /* 不阻挡交互 */
background: url(../assets/img/遮罩层.png) no-repeat center/cover;
}
@@ -672,7 +676,8 @@ onBeforeUnmount(() => {
gap: var(--cockpit-gap);
height: 100%;
box-sizing: border-box;
- pointer-events: none; /* 容器不拦截事件,让中间区域透明 */
+ pointer-events: none;
+ /* 容器不拦截事件,让中间区域透明 */
}
/* 中间占位区域 - 透明且不可交互,点击穿透到地图 */
@@ -685,10 +690,13 @@ onBeforeUnmount(() => {
display: flex;
flex-direction: column;
gap: var(--cockpit-gap);
- min-width: 0; /* 防止在窄容器中溢出 */
- min-height: 0; /* 允许 flex 子元素收缩并启用滚动 */
+ min-width: 0;
+ /* 防止在窄容器中溢出 */
+ min-height: 0;
+ /* 允许 flex 子元素收缩并启用滚动 */
padding: 1rem;
- pointer-events: auto; /* 恢复面板的交互能力 */
+ pointer-events: auto;
+ /* 恢复面板的交互能力 */
}
/* 图例工具栏 - 居中显示在底部 */
@@ -698,6 +706,7 @@ onBeforeUnmount(() => {
left: 50%;
transform: translateX(-50%);
z-index: 3;
- pointer-events: auto; /* 确保图例可交互 */
+ pointer-events: auto;
+ /* 确保图例可交互 */
}
diff --git a/packages/screen/src/views/cockpit/components/PageHeader.vue b/packages/screen/src/views/cockpit/components/PageHeader.vue
index c8655d6..9c55989 100644
--- a/packages/screen/src/views/cockpit/components/PageHeader.vue
+++ b/packages/screen/src/views/cockpit/components/PageHeader.vue
@@ -1,8 +1,6 @@
@@ -14,7 +12,7 @@
@use '@/styles/mixins.scss' as *;
.page-header {
- height: vh(137);
+ height: vw(111);
background: url(../assets/img/header-bg.png) no-repeat;
background-size: 100% 100%;
display: flex;
@@ -23,15 +21,6 @@
position: relative;
}
-.header-bg {
- background-image: url(../assets/img/header-title-bg.png);
- width: 100%;
- height: vh(107);
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
-}
.title {
color: rgba(255, 255, 255, 1);
@@ -43,24 +32,4 @@
text-align: center;
}
-.app-button {
- position: absolute;
- right: vw(40);
- top: 50%;
- transform: translateY(-50%);
- width: vw(165);
- height: vh(44);
- background: url(../assets/img/header-btn-app-bg.png) no-repeat;
- background-size: 100% 100%;
- color: rgba(255, 255, 255, 1);
- font-size: fs(16);
- font-family: SourceHanSansCN-Regular, sans-serif;
- border: none;
- cursor: pointer;
- transition: opacity 0.3s;
-
- &:hover {
- opacity: 0.8;
- }
-}