123123

birt

2025-04-13 e943d5c81c311fc9eb51513c018689b6978ae135

123123

 zhitan-vue/src/assets/styles/index.scss

@@ -207,22 +207,39 @@
  }
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.5);
/* 折叠菜单样式调整，确保在所有情况下菜单项居中 */
.el-menu--collapse {
  width: 54px !important;
  
  .el-sub-menu, .el-menu-item {
    width: 36px !important;
    min-width: 36px !important;
    margin-left: 9px !important; /* 关键：设置固定的左边距9px使菜单项居中 */
    margin-right: 9px !important;
  }
  
  .el-menu-item, .el-sub-menu__title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    
    .svg-icon, .el-icon {
      margin: 0 !important; /* 重要：移除图标的所有边距 */
    }
    
    .el-sub-menu__icon-arrow {
      display: none !important;
    }
    
    > span {
      display: none !important;
    }
  }
  
  /* 选中状态样式 */
  .el-menu-item.is-active, .el-sub-menu.is-active > .el-sub-menu__title {
    background-color: #3883FA !important;
    color: #fff !important;
  }
}

 zhitan-vue/src/assets/styles/menu-fix.scss

 zhitan-vue/src/assets/styles/sidebar.scss

@@ -193,22 +193,32 @@
      }

      .el-menu--collapse {
        .el-sub-menu {
          & > .el-sub-menu__title {
            & > span {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
            & > i {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
        width: 54px !important;

        /* 清除后代选择器中干扰居中的样式 */
        .el-sub-menu, .el-menu-item {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;

          /* 让图标和菜单项居中 */
          .el-menu-item, .el-sub-menu__title {
            width: 36px !important;
            min-width: 36px !important;
            height: 38px !important;
            line-height: 38px !important;
            margin: 4px 9px !important; /* 精确计算居中边距 */
            padding: 0 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 4px !important;
          }

          /* 确保图标居中 */
          .svg-icon, .el-icon {
            margin: 0 !important;
            padding: 0 !important;
          }
        }
      }
@@ -480,22 +490,32 @@
      }

      .el-menu--collapse {
        .el-sub-menu {
          & > .el-sub-menu__title {
            & > span {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
            & > i {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
        width: 54px !important;

        /* 清除后代选择器中干扰居中的样式 */
        .el-sub-menu, .el-menu-item {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;

          /* 让图标和菜单项居中 */
          .el-menu-item, .el-sub-menu__title {
            width: 36px !important;
            min-width: 36px !important;
            height: 38px !important;
            line-height: 38px !important;
            margin: 4px 9px !important; /* 精确计算居中边距 */
            padding: 0 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 4px !important;
          }

          /* 确保图标居中 */
          .svg-icon, .el-icon {
            margin: 0 !important;
            padding: 0 !important;
          }
        }
      }

 zhitan-vue/src/components/Breadcrumb/index.vue

@@ -63,19 +63,5 @@
    color: #fff;
    cursor: text;
  }
  
  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      color: rgba(255, 255, 255, 0.8);
      
      &:hover {
        color: #fff;
      }
    }
    
    .el-breadcrumb__separator {
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>

 zhitan-vue/src/layout/components/Sidebar/index.vue

@@ -182,9 +182,11 @@
  }
}

:deep(.custom-menu) {
.custom-menu {
  width: 100%;
  padding: 6px 0;
  height: auto !important; // 改为自适应高度，避免固定高度导致内容溢出
  transition: all 0.3s ease;
  
  // Override Element Plus default menu styles
  .el-menu-item {
@@ -193,6 +195,7 @@
    border-radius: 4px; 
    margin: 4px 10px;
    width: calc(100% - 20px);
    transition: all 0.2s ease;
    
    &.is-active {
      background-color: #3883FA !important;
@@ -211,6 +214,7 @@
      border-radius: 4px;
      margin: 4px 10px;
      width: calc(100% - 20px);
      transition: all 0.2s ease;
      
      &:hover {
        background-color: rgba(56, 131, 250, 0.1) !important;
@@ -427,4 +431,48 @@
  height: 38px !important;
  line-height: 38px !important;
}

// Add styles for collapsed menu items
:deep(.custom-menu.el-menu--collapse) {
  width: 54px !important;
  
  .el-menu-item, .el-sub-menu__title {
    width: 36px !important;
    min-width: 36px !important;
    margin: 4px 9px !important; /* 9px是为了确保居中：(54px宽 - 36px菜单项) / 2 = 9px */
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    
    &.is-active {
      background-color: #3883FA !important;
      color: #fff !important;
      box-shadow: 0 2px 6px rgba(56, 131, 250, 0.4);
      transform: scale(0.95);
      transition: all 0.2s ease;
    }
    
    .el-icon, .svg-icon {
      margin: 0 !important;
      font-size: 18px !important;
      
      svg {
        width: 1.2em;
        height: 1.2em;
      }
    }
    
    // 确保折叠时子菜单的标题也居中对齐
    .el-sub-menu__icon-arrow {
      display: none;
    }
  }
  
  // 确保折叠时弹出的子菜单有正确样式
  .el-tooltip__trigger:focus:not(.focusing) {
    outline: none;
  }
}
</style>

 zhitan-vue/src/layout/index.vue

@@ -9,7 +9,7 @@
              <img v-if="sideTheme === 'theme-dark'" :src="systemInfo.leftLogo" class="sidebar-logo" />
              <img v-else :src="systemInfo.leftLogo" class="sidebar-logo" />
            </div>
            <div class="name" v-if="sidebar.opened" :style="{ color: '#fff' }">
            <div class="name" v-if="sidebar.opened" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }">
              {{ title }}
            </div>
          </div>
@@ -86,7 +86,7 @@

// 跳转到报警页面
function goToAlarm() {
  router.push('/alarmmanage/measuremen?modelCode=BJGL')
  router.push('/alarm/list')
}

// 打开AI大模型对话框
@@ -351,47 +351,12 @@
}

.themeDark {
  .navbar-container {
    background: #1a235d;
    border-bottom: 2px solid #110f2e;
  }
  
  .navbar {
    background: transparent !important;
    background: #002866 !important;
  }
  
  .sidebar-container {
    background-color: #002866 !important;
  }
}

.themeLight {
  .navbar-container {
    background: #3883FA;
  }
  
  .navbar {
    background: transparent !important;
    
    .left {
      .sidebar-logo-container {
        .name {
          color: #fff !important;
        }
      }
    }
    
    .right {
      .right-menu {
        .right-menu-item {
          color: #fff;
          
          .right-menu-icon {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>