Просмотр исходного кода

删除global.css; 修改base.css添加侧边栏菜单滚动查看效果

画安 1 неделя назад
Родитель
Сommit
e69e229954
2 измененных файлов с 9 добавлено и 174 удалено
  1. 9 0
      src/styles/base.css
  2. 0 174
      src/styles/global.css

+ 9 - 0
src/styles/base.css

@@ -88,6 +88,15 @@ html, body {
     border-color: #32F6F8;
 }
 
+.menu-scroll-view {
+  height: 700px !important;
+  overflow: auto;
+  background: rgba(17,36,70,0.9);
+  border: none;
+  outline: 2px solid #3760A9;
+  outline-offset: -2px;
+}
+
 /* ==========================================
    全局滚动条美化 (大屏科技感风格)
 ========================================== */

+ 0 - 174
src/styles/global.css

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