|
|
@@ -1,174 +0,0 @@
|
|
|
-/* --- 基础与图层 --- */
|
|
|
-.fluid-dashboard {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- background: #050a17;
|
|
|
-}
|
|
|
-
|
|
|
-.map-layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.ui-layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 2;
|
|
|
- pointer-events: none;
|
|
|
- /* 让鼠标穿透点到底图 */
|
|
|
- display: grid;
|
|
|
- grid-template-rows: 80px 1fr;
|
|
|
- /* 顶部 80px,下面全部给 main */
|
|
|
-}
|
|
|
-
|
|
|
-/* 恢复 UI 层交互 */
|
|
|
-.top-header1,
|
|
|
-.left-sidebar,
|
|
|
-.right-sidebar,
|
|
|
-.float-video-panel,
|
|
|
-.float-alarm-popup,
|
|
|
-.float-bottom-dock {
|
|
|
- pointer-events: auto;
|
|
|
-}
|
|
|
-
|
|
|
-/* --- 顶部 Header --- */
|
|
|
-.top-header1 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 40px;
|
|
|
- background: url('@/assets/header_deco1.png') no-repeat center top;
|
|
|
- /* 替换为你的顶部切图 */
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.center-title {
|
|
|
- font-size: 36px;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- letter-spacing: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.top-header1 .right-wrap {
|
|
|
- position: absolute;
|
|
|
- right: 50px;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.right-wrap .weather {
|
|
|
- font-size: 18px;
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.right-wrap .temperature {
|
|
|
- font-size: 14px;
|
|
|
- color: #ababab;
|
|
|
-}
|
|
|
-
|
|
|
-.right-wrap .time {
|
|
|
- font-size: 18px;
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.right-wrap .date {
|
|
|
- font-size: 14px;
|
|
|
- color: #ababab;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-/* --- 主体布局 --- */
|
|
|
-.main-layout {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 320px 1fr 480px;
|
|
|
- /* 左宽320,中间自适应,右宽480 */
|
|
|
- gap: 20px;
|
|
|
- padding: 20px;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.main-layout.special-situation-monitoring {
|
|
|
- grid-template-columns: 500px 1fr 480px;
|
|
|
- height: fit-content;
|
|
|
-}
|
|
|
-
|
|
|
-.top-center-controls {
|
|
|
- position: absolute;
|
|
|
- top: 80px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- pointer-events: auto;
|
|
|
-}
|
|
|
-
|
|
|
-/* 核心定位:将 Dock 导航栏绝对定位在屏幕最底部居中 */
|
|
|
-.float-bottom-dock {
|
|
|
- pointer-events: auto; /* 保留鼠标权限即可 */
|
|
|
- z-index: 999; /* 保证层级最高,不会被图表或地图挡住点不到 */
|
|
|
-}
|
|
|
-
|
|
|
-/* --- 左侧与右侧边栏 --- */
|
|
|
-.left-sidebar {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.right-sidebar {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.menu-scroll-view {
|
|
|
- height: 700px !important;
|
|
|
- overflow: auto;
|
|
|
- background: rgba(17,36,70,0.9);
|
|
|
- border: none;
|
|
|
- outline: 2px solid #3760A9;
|
|
|
- outline-offset: -2px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 整体滚动条 */
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 0px;
|
|
|
- height: 0px;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-track {
|
|
|
- background: rgba(15, 34, 67, 0.3);
|
|
|
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-thumb {
|
|
|
- background: linear-gradient(180deg, rgba(31, 206, 251, 0.2) 0%, rgba(0, 229, 255, 0.6) 100%);
|
|
|
- border: 1px solid rgba(31, 206, 251, 0.4);
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-thumb:hover {
|
|
|
- background: linear-gradient(180deg, rgba(31, 206, 251, 0.5) 0%, rgba(0, 229, 255, 0.9) 100%);
|
|
|
- box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
|
|
|
- border-color: rgba(31, 206, 251, 0.8);
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-button {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-::-webkit-scrollbar-corner {
|
|
|
- background: transparent;
|
|
|
-}
|
|
|
-
|