.sk-sidebar {
    position: fixed;
    display: flex;
    flex-direction: column; /* 使侧边栏纵向排列 */
    height: 50vh; /* 侧边栏高度，100%视口高度 */
    align-items: center;
}

.sk-sidebar-item {
    display: flex;
    margin-left: auto;
    flex-direction: column; /* 使图标和文字纵向排列 */
    align-items: center; /* 水平居中对齐 */
    margin-bottom: 1px; /* 每个项之间的间距 */
    background-color: #fff; /* 设置项背景颜色与侧边栏相同 */
    cursor: pointer;
    padding: 5px; /* 添加内边距以增加点击区域 */
    border-radius: 5px; /* 为每个项添加圆角 */
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    width: 80%; /* 或者可以用具体的百分比，比如 80% */
    height:auto;
    max-width: 150px; /* 设置最大宽度，确保不超出预期大小 */
}

.sk-sidebar-item-icon {
    margin-top: 0; /* 图标距离文字的距离 */
    margin-bottom: -0.5em; /* 图标距离下一项的距离 */
    overflow: visible; /* 确保容器不裁剪内容 */
    z-index: 1;
}

.sk-sidebar-item-icon img {
    width: 4vh;
    max-width: 100%; /* 确保图片不超过父元素宽度 */
    height: auto; /* 维护图像的比例 */
    display: block; /* 使图像块级显示，去掉下方空白 */
    border-radius: 0; /* 移除圆形裁剪 */
    object-fit: contain; /* 保持图标比例 */
}


.sk-sidebar-item-title {
    z-index: 2;
    top:0;
    font-size: 0.9em; /* 文字大小 */
    font-family: Arial, sans-serif; /* 字体 */
    color: #333; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    background-color: #fff; /* 设置标题背景颜色与项相同 */
    border-radius: 3px; /* 可选：为文字背景添加圆角 */
    margin-bottom: 0.4em; /* 距离下一项的距离 */
}

@media screen and (max-width: 768px) {
    .sk-sidebar {
        height: 50vh; /* 手机端侧边栏高度调整为视口高度的100% */
    }

    .sk-sidebar-item {
        overflow: hidden;
        width: 70%; /* 手机端宽度调整为父元素的90% */
        max-width: 100px; /* 手机端最大宽度减小 */
        padding: 3px; /* 减小内边距 */
    }

    .sk-sidebar-item-icon {
        margin-top: -0.7em;
        overflow: hidden;
        margin-bottom: -0.9em; /* 图标距离下一项的距离 */
    }

    .sk-sidebar-item-icon img {
        max-width: 80%; /* 图片宽度不超过其父元素的80% */
        width: 2.5vh; /* 手机端图标大小减小 */
    }

    .sk-sidebar-item-title {
        font-size: 0.6em; /* 手机端文字大小减小 */
        margin-bottom: 0.1em; /* 距离下一项的距离 */
    }
}

@media screen and ( min-width: 768px) and (max-width: 1200px) {
    .sk-sidebar {
        height: 50vh; /* 手机端侧边栏高度调整为视口高度的100% */
    }

    .sk-sidebar-item {
        overflow: hidden;
        width: 90%; /* 手机端宽度调整为父元素的90% */
        max-width: 100px; /* 手机端最大宽度减小 */
        padding: 4px; /* 减小内边距 */
    }

    .sk-sidebar-item-icon {
        margin-top: -0.1em;
        overflow: hidden;
        margin-bottom: -0.6em; /* 图标距离下一项的距离 */
    }

    .sk-sidebar-item-icon img {
        max-width: 80%; /* 图片宽度不超过其父元素的80% */
        width: 4vh; /* 手机端图标大小减小 */
    }

    .sk-sidebar-item-title {
        font-size: 0.8em; /* 手机端文字大小减小 */
        margin-bottom: 0.2em; /* 距离下一项的距离 */
    }
}