/* css/menu/left/left.css */

/* 右下角按钮样式 */
.left-menu-button {
    position: fixed;
    bottom: 20px;
    right: 20px; /* 悬浮在右下角 */
    background-color: #4285f4; /* 鲜艳的蓝色背景 */
    color: #fff; /* 白色图标颜色 */
    border: none;
    width: 60px; /* 增大按钮宽度 */
    height: 60px; /* 增大按钮高度 */
    border-radius: 50%; /* 设置按钮为圆形 */
    cursor: pointer;
    z-index: 1000;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 1.8em; /* 增大图标大小 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 增强阴影 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
  }
  
  .left-menu-button:hover {
    background-color: #2962ff; /* 悬停时改变背景颜色 */
  }
  
  /* 左侧导航栏样式 */
  .left-menu-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    list-style: none;
    padding: 20px;
    margin: 0;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto; /* 允许滚动 */
  }
  
  .left-menu-list.active {
    transform: translateX(0);
  }
  
  .left-menu-list li {
    padding: 10px 0;
    border-bottom: 1px solid #555;
  }
  
  .left-menu-list a {
    color: #fff;
    text-decoration: none;
    display: block;
  }