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