        /* 按钮样式 */
        .YSCDanniu {
            position: fixed; /* 固定在页面右上角 */
            top: 20px;
            right: 10px;
            cursor: pointer; /* 鼠标悬停时显示手型 */
            z-index: 1000; /* 确保按钮在最上层 */
            background: none; /* 去掉背景 */
            border: none; /* 去掉边框 */
            padding: 0;
            width: 30px; /* 图标宽度 */
            height: 30px; /* 图标高度 */
            transition: transform 0.3s ease; /* 添加旋转动画 */
        }

        /* 按钮旋转 180 度 */
        .YSCDanniu.rotate {
            transform: rotate(180deg);
        }

        /* 菜单遮罩层样式 */
        .YSCDmulurongqi {
            position: fixed; /* 固定在页面右侧 */
            top: 70px; /* 位于按钮下方 */
            right: -140px; /* 初始隐藏在右侧 */
            width: 140px; /* 菜单宽度 */
            z-index: 999; /* 确保菜单在页面上层 */
            transition: right 0.3s ease; /* 菜单整体滑出动画 */
        }

        /* 菜单项样式 */
        .YSCDmulu ul {
            list-style-type: none; /* 去掉列表默认样式 */
            padding: 0;
            margin: 0;
        }

        .YSCDmulu ul li {
            padding: 8px 10px; /* 调整内边距，上下 8px，左右 10px */
            margin-bottom: 5px; /* 菜单项之间的距离 */
            background-color: rgba(255, 255, 255, 0.95); /* 菜单项背景色 */
            border: none; /* 去掉边框 */
            border-radius: 20px 0 0 20px; /* 左侧为圆形，右侧为直角 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
            opacity: 0; /* 初始隐藏 */
            transform: translateX(100%); /* 初始位置在右侧 */
            transition: opacity 0.3s ease, transform 0.3s ease; /* 菜单项动画 */
            line-height: 1.5; /* 设置行高，确保文字垂直居中 */
            position: relative; /* 设置相对定位，以便伪元素可以相对于按钮定位 用于伪元素 */
            overflow: hidden; /* 防止伪元素超出按钮边界 用于伪元素 */
        }
        /* 创建伪元素并实现按钮背景从左到右颜色动画 */
        .YSCDmulu ul li::before {
            content: ''; /* 伪元素必须有content属性 */
            position: absolute;
            top: 0;
            left: 0;
            width: 0; /* 初始宽度为0 */
            height: 100%;
            background: #A8ADB5; /* 动画背景 */
            transition: width 0.5s ease; /* 过渡动画效果 */
            z-index: -1;
        }
        .YSCDmulu ul li:hover::before {
            width: 100%; /* 鼠标悬停时，伪元素宽度扩展到100%，即填满整个按钮 */
        }

        .YSCDmulu ul li:last-child {
            margin-bottom: 0; /* 最后一个菜单项去掉底部距离 */
        }

        .YSCDmulu ul li a {
            color: #333; /* 菜单项文字颜色 */
            text-decoration: none; /* 去掉链接下划线 */
            font-size: 14px; /* 文字大小 */
            display: flex; /* 使用 flex 布局 */
            align-items: center; /* 垂直居中 */
            white-space: nowrap; /* 禁止文字换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }
        .YSCDmulu ul li:hover a {
            color: white;
        }

        /* 小图标样式 */
        .YSCDmulu ul li a img {
            width: 16px; /* 图标宽度 */
            height: 16px; /* 图标高度 */
            margin-right: 8px; /* 图标与文字之间的间距 */
            margin-left: 5px; /* 图标左侧添加 5px 的内边距 */
        }

        /* 菜单显示时的状态 */
        .YSCDmulurongqi.active {
            right: 0; /* 菜单整体滑入 */
        }

        /* 菜单项显示时的最终状态 */
        .YSCDmulurongqi.active .YSCDmulu ul li {
            opacity: 1; /* 显示菜单项 */
            transform: translateX(0); /* 滑入到正常位置 */
        }

        /* 夜间模式效果 */
        .dark-theme .YSCDmulu ul li {
            background-color: rgba(204, 204, 204, 0.95); /* 菜单项背景色 */
        }

