.nav-category {
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        justify-content: space-between; /* 在所有设备上平均分布 */
    }
    .nav-category a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
      /*color: #333;*/
        margin: 5px; /* 设置适当的间距 */
        margin-bottom: -5px; /* 缩小底部间距 */
        width: calc(12.5% - 20px); /* 计算每个项目所需的宽度，并减去间距 */
    }
    .nav-category a span {
        display: block; /* 或者 inline-block */
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分的文本 */
        text-overflow: ellipsis; /* 超出部分用省略号表示 */
        max-width: 80px; /* 或者根据实际情况设置一个合适的最大宽度 */
        margin-top: -8px; /*缩小图标与文字的距离*/
    }
    .nav-category img {
        border-radius: 20%;
        height: 40px;
        width: 40px;
        padding: 5px;/*内边距*/
        border: 1px solid transparent; /* 初始边框颜色设为透明 */
        animation: breathingAnimation 5s infinite ease-in-out; /* 应用呼吸动画 1 */
    }

    /*边框呼吸灯效果 2*/
    @keyframes breathingAnimation {
        0%, 100% {
            border-color: transparent; /* 开始和结束时边框颜色为透明 */
        }
        25% {border-color: #6B8E23; /* 中间状态边框颜色 */}
        50% {border-color: #8E236B; /* 中间状态边框颜色 */}
        75% {border-color: #00ffff; /* 中间状态边框颜色 */}
    }

    /* 新增图标旋转动画 */
    @keyframes rotateIcon {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); }    }
    .nav-category a img:hover {animation: rotateIcon 1s linear forwards; /* forwards保留动画结束时的状态 */}

    .nav-category span {
        font-size: 14px;
    }
    /* 媒体查询，当屏幕宽度大于或等于768px时应用以下样式 */
    @media (min-width: 768px) {
        .nav-category a {
            width: calc(12.5% - 20px); /* 电脑端每个项目所需的宽度，并减去间距 */
        }
    }
    /* 媒体查询，当屏幕宽度小于768px时应用以下样式 */
    @media (max-width: 767px) {
        .nav-category a {
            margin-bottom: -5px; /* 缩小底部间距 */
            width: calc(25% - 20px); /* 移动设备上每个项目所需的宽度，并减去间距 */
        }
    }