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" :key="item.label"
class="info-card" class="info-card"
> >
<img <img class="info-icon" :src="item.icon" alt="" aria-hidden="true" />
class="info-icon"
:src="item.icon"
alt=""
aria-hidden="true"
/>
<div class="info-content"> <div class="info-content">
<p class="info-label">{{ item.label }}</p> <p class="info-label">{{ item.label }}</p>
<p class="info-value" :title="item.value">{{ item.value }}</p> <p class="info-value" :title="item.value">{{ item.value }}</p>
@ -31,11 +26,11 @@
</template> </template>
<script setup> <script setup>
import lineCodeIcon from '../../assets/images/LocationPanel/线路编号icon.png' import lineCodeIcon from "../../assets/images/LocationPanel/线路编号icon.png";
import classNumberIcon from '../../assets/images/LocationPanel/路线桩号icon.png' import classNumberIcon from "../../assets/images/LocationPanel/路线桩号icon.png";
import inspectorIcon from '../../assets/images/LocationPanel/路段巡查员icon.png' import inspectorIcon from "../../assets/images/LocationPanel/路段巡查员icon.png";
import phoneIcon from '../../assets/images/LocationPanel/联系电话icon.png' import phoneIcon from "../../assets/images/LocationPanel/联系电话icon.png";
import dateIcon from '../../assets/images/LocationPanel/日期icon.png' import dateIcon from "../../assets/images/LocationPanel/日期icon.png";
defineProps({ defineProps({
expanded: { expanded: {
@ -44,33 +39,33 @@ defineProps({
}, },
panelId: { panelId: {
type: String, type: String,
default: 'location-panel', default: "location-panel",
}, },
labelId: { labelId: {
type: String, type: String,
default: '', default: "",
}, },
}) });
// 地理位置信息数据 // 地理位置信息数据
const locationInfo = [ const locationInfo = [
{ label: '线路编号', value: 'S204', icon: lineCodeIcon }, { label: "线路编号", value: "S204", icon: lineCodeIcon },
{ label: '灾害桩号', value: 'K130 + 800', icon: classNumberIcon }, { label: "灾害桩号", value: "K130 + 800", icon: classNumberIcon },
{ label: '路段巡路员', value: '张强', icon: inspectorIcon }, { label: "路段巡路员", value: "张强", icon: inspectorIcon },
{ label: '联系电话', value: '13987657892', icon: phoneIcon }, { label: "联系电话", value: "13987657892", icon: phoneIcon },
{ label: '演练日期', value: '2025-11-19', icon: dateIcon }, { label: "演练日期", value: "2025-11-19", icon: dateIcon },
];
]
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use '@/styles/mixins.scss' as *; @use "@/styles/mixins.scss" as *;
@use '../../assets/styles/common.scss' as *; @use "../../assets/styles/common.scss" as *;
.location-panel { .location-panel {
width: 100%; width: 100%;
padding: clamp(16px, vh(16), 18px) clamp(6px, vw(6), 6px); 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%; background-size: 100% 100%;
border-radius: vw(8); border-radius: vw(8);
box-shadow: 0 0 vw(12) rgba(0, 0, 0, 0.35); box-shadow: 0 0 vw(12) rgba(0, 0, 0, 0.35);
@ -79,9 +74,39 @@ const locationInfo = [
max-width: 100%; max-width: 100%;
// min-height: 160px; // min-height: 160px;
&:hover { &:hover {
// border: 2px solid rgba(255, 80, 80, 0.6); cursor: pointer;
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4), // border: 2px solid rgba(255, 80, 80, 0.8);
0 0 35px rgba(255, 0, 0, 0.25); 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; border: 2px solid transparent;
&:hover { &:hover {
border: 2px solid rgba(255, 80, 80, 0.6); cursor: pointer;
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), // border: 2px solid rgba(255, 80, 80, 0.8);
0 0 20px rgba(255, 0, 0, 0.4), animation: glowPulse 1.6s ease-in-out infinite;
0 0 35px rgba(255, 0, 0, 0.25);
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);
}
} }
// 收起状态：只显示标题栏 // 收起状态：只显示标题栏

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

@ -24,21 +24,21 @@
</template> </template>
<script setup> <script setup>
import CollapsiblePanel from '../shared/CollapsiblePanel.vue' import CollapsiblePanel from "../shared/CollapsiblePanel.vue";
import DispatchCommand from './DispatchCommand.vue' import DispatchCommand from "./DispatchCommand.vue";
import VideoMonitorGrid from './VideoMonitorGrid.vue' import VideoMonitorGrid from "./VideoMonitorGrid.vue";
// import DispatchSuggestion from './DispatchSuggestion.vue' // import DispatchSuggestion from './DispatchSuggestion.vue'
import CollaborationInfo from './CollaborationInfo.vue' import CollaborationInfo from "./CollaborationInfo.vue";
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use '@/styles/mixins.scss' as *; @use "@/styles/mixins.scss" as *;
@use '../../assets/styles/common.scss' as *; @use "../../assets/styles/common.scss" as *;
.right-panel { .right-panel {
// width: vw(486); // width: vw(486);
height: 100%; height: 100%;
background: url('../../assets/images/框架右边.png') no-repeat; background: url("../../assets/images/框架右边.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
@ -48,9 +48,41 @@ import CollaborationInfo from './CollaborationInfo.vue'
box-sizing: border-box; box-sizing: border-box;
&__content { &__content {
&:hover { &:hover {
// border: 2px solid rgba(255, 80, 80, 0.6); cursor: pointer;
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4), // border: 2px solid rgba(255, 80, 80, 0.8);
0 0 35px rgba(255, 0, 0, 0.25); 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);
}
} }
} }