54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="left-panel">
|
||
|
|
<CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
|
||
|
|
<DisasterAnalysis />
|
||
|
|
</CollapsiblePanel>
|
||
|
|
|
||
|
|
<CollapsiblePanel title="快速匹配" subtitle="「力量预置」">
|
||
|
|
<ForcePreset />
|
||
|
|
</CollapsiblePanel>
|
||
|
|
|
||
|
|
<CollapsiblePanel title="快速响应" subtitle="「力量调度」">
|
||
|
|
<ForceDispatch />
|
||
|
|
</CollapsiblePanel>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import CollapsiblePanel from '../shared/CollapsiblePanel.vue'
|
||
|
|
import DisasterAnalysis from './DisasterAnalysis.vue'
|
||
|
|
import ForcePreset from './ForcePreset.vue'
|
||
|
|
import ForceDispatch from './ForceDispatch.vue'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@use '@/styles/mixins.scss' as *;
|
||
|
|
@use '../../assets/styles/common.scss' as *;
|
||
|
|
|
||
|
|
.left-panel {
|
||
|
|
width: vw(464);
|
||
|
|
height: 100%;
|
||
|
|
background: url('../../assets/images/SketchPng7ba5c49d9f8f79e6b559d62cfb6b0b0c79616dd8b289f8b62b5cb8adc18c30e7.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
overscroll-behavior: contain;
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: vw(6);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--primary-light);
|
||
|
|
border-radius: vw(3);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(28, 161, 255, 0.6);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|