bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改浮动窗的hover效果

Browse Source
This commit is contained in:
huangchenhao 2025-12-01 14:34:29 +08:00
parent dd74af0930
commit 24e0a7f278
3 changed files with 136 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue
View File

@ -14,12 +14,7 @@
:key="item.label"
class="info-card"
>
<img
class="info-icon"
:src="item.icon"
alt=""
aria-hidden="true"
/>
<img class="info-icon" :src="item.icon" alt="" aria-hidden="true" />
<div class="info-content">
<p class="info-label">{{ item.label }}</p>
<p class="info-value" :title="item.value">{{ item.value }}</p>
@ -31,11 +26,11 @@
</template>
<script setup>
import lineCodeIcon from '../../assets/images/LocationPanel/线路编号icon.png'
import classNumberIcon from '../../assets/images/LocationPanel/路线桩号icon.png'
import inspectorIcon from '../../assets/images/LocationPanel/路段巡查员icon.png'
import phoneIcon from '../../assets/images/LocationPanel/联系电话icon.png'
import dateIcon from '../../assets/images/LocationPanel/日期icon.png'
import lineCodeIcon from "../../assets/images/LocationPanel/线路编号icon.png";
import classNumberIcon from "../../assets/images/LocationPanel/路线桩号icon.png";
import inspectorIcon from "../../assets/images/LocationPanel/路段巡查员icon.png";
import phoneIcon from "../../assets/images/LocationPanel/联系电话icon.png";
import dateIcon from "../../assets/images/LocationPanel/日期icon.png";
defineProps({
expanded: {
@ -44,33 +39,33 @@ defineProps({
},
panelId: {
type: String,
default: 'location-panel',
default: "location-panel",
},
labelId: {
type: String,
default: '',
default: "",
},
})
});
// 地理位置信息数据
const locationInfo = [
{ label: '线路编号', value: 'S204', icon: lineCodeIcon },
{ label: '灾害桩号', value: 'K130 + 800', icon: classNumberIcon },
{ label: '路段巡路员', value: '张强', icon: inspectorIcon },
{ label: '联系电话', value: '13987657892', icon: phoneIcon },
{ label: '演练日期', value: '2025-11-19', icon: dateIcon },
]
{ label: "线路编号", value: "S204", icon: lineCodeIcon },
{ label: "灾害桩号", value: "K130 + 800", icon: classNumberIcon },
{ label: "路段巡路员", value: "张强", icon: inspectorIcon },
{ label: "联系电话", value: "13987657892", icon: phoneIcon },
{ label: "演练日期", value: "2025-11-19", icon: dateIcon },
];
</script>
<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;
@use "@/styles/mixins.scss" as *;
@use "../../assets/styles/common.scss" as *;
.location-panel {
width: 100%;
padding: clamp(16px, vh(16), 18px) clamp(6px, vw(6), 6px);
background: url('../../assets/images/LocationPanel/地理位置展出1.png') no-repeat center center;
background: url("../../assets/images/LocationPanel/地理位置展出1.png")
no-repeat center center;
background-size: 100% 100%;
border-radius: vw(8);
box-shadow: 0 0 vw(12) rgba(0, 0, 0, 0.35);
@ -79,9 +74,39 @@ const locationInfo = [
max-width: 100%;
// min-height: 160px;
&:hover {
// border: 2px solid rgba(255, 80, 80, 0.6);
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
0 0 35px rgba(255, 0, 0, 0.25);
cursor: pointer;
// border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite;
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
/* 闪动动画 */
@keyframes glowPulse {
0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1),
0 0 35px rgba(255, 40, 40, 0.7), 0 0 65px rgba(255, 0, 0, 0.45),
inset 0 0 25px rgba(255, 80, 80, 1),
inset 0 0 45px rgba(255, 40, 40, 0.7),
inset 0 0 75px rgba(255, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
}
}

37
packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
View File

@ -146,10 +146,39 @@ onUnmounted(() => {
border: 2px solid transparent;
&:hover {
border: 2px solid rgba(255, 80, 80, 0.6);
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6),
0 0 20px rgba(255, 0, 0, 0.4),
0 0 35px rgba(255, 0, 0, 0.25);
cursor: pointer;
// border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite;
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
/* 闪动动画 */
@keyframes glowPulse {
0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1),
0 0 35px rgba(255, 40, 40, 0.7), 0 0 65px rgba(255, 0, 0, 0.45),
inset 0 0 25px rgba(255, 80, 80, 1),
inset 0 0 45px rgba(255, 40, 40, 0.7),
inset 0 0 75px rgba(255, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
}
// 收起状态：只显示标题栏

70
packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
View File

@ -1,44 +1,44 @@
<template>
<div class="right-panel">
<div class="right-panel__content">
<CollapsiblePanel title="快速处置" subtitle="「调度指挥」">
<DispatchCommand />
</CollapsiblePanel>
<CollapsiblePanel title="快速处置" subtitle="「调度指挥」">
<DispatchCommand />
</CollapsiblePanel>
<!-- <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
<!-- <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
</CollapsiblePanel> -->
<VideoMonitorGrid />
<VideoMonitorGrid />
<!-- 如需启用调度建议面板，可取消下面注释 -->
<!--
<!-- 如需启用调度建议面板，可取消下面注释 -->
<!--
<CollapsiblePanel title="调度建议" subtitle="「智能推荐」">
<DispatchSuggestion />
</CollapsiblePanel>
-->
<!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
<!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
</CollapsiblePanel> -->
<CollaborationInfo />
<CollaborationInfo />
</div>
</div>
</template>
<script setup>
import CollapsiblePanel from '../shared/CollapsiblePanel.vue'
import DispatchCommand from './DispatchCommand.vue'
import VideoMonitorGrid from './VideoMonitorGrid.vue'
import CollapsiblePanel from "../shared/CollapsiblePanel.vue";
import DispatchCommand from "./DispatchCommand.vue";
import VideoMonitorGrid from "./VideoMonitorGrid.vue";
// import DispatchSuggestion from './DispatchSuggestion.vue'
import CollaborationInfo from './CollaborationInfo.vue'
import CollaborationInfo from "./CollaborationInfo.vue";
</script>
<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;
@use "@/styles/mixins.scss" as *;
@use "../../assets/styles/common.scss" as *;
.right-panel {
// width: vw(486);
height: 100%;
background: url('../../assets/images/框架右边.png') no-repeat;
background: url("../../assets/images/框架右边.png") no-repeat;
background-size: 100% 100%;
overflow-y: auto;
overscroll-behavior: contain;
@ -48,9 +48,41 @@ import CollaborationInfo from './CollaborationInfo.vue'
box-sizing: border-box;
&__content {
&:hover {
// border: 2px solid rgba(255, 80, 80, 0.6);
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
0 0 35px rgba(255, 0, 0, 0.25);
cursor: pointer;
// border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite;
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
/* 闪动动画 */
@keyframes glowPulse {
0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8),
0 0 25px rgba(255, 0, 0, 0.5), 0 0 45px rgba(255, 0, 0, 0.35),
inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1),
0 0 35px rgba(255, 40, 40, 0.7), 0 0 65px rgba(255, 0, 0, 0.45),
inset 0 0 25px rgba(255, 80, 80, 1),
inset 0 0 45px rgba(255, 40, 40, 0.7),
inset 0 0 75px rgba(255, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8),
0 0 25px rgba(255, 0, 0, 0.5), 0 0 45px rgba(255, 0, 0, 0.35),
inset 0 0 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4);
}
}
}