.footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 增加高度以提供更多的触摸区域 */
    background-color: #f8f8f8; /* 使用更柔和的背景色 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* 调整阴影以增加深度感 */
    z-index: 999;
    border-top: 1px solid #e7e7e7; /* 添加顶部边框以分隔内容和导航 */
}

.nav-item {
    width: 33%;
    text-align: center;
    color: #666; /* 使用更柔和的文字颜色 */
    padding: 6px 0; /* 添加填充以增加点击区域 */
    transition: color 0.3s; /* 平滑颜色变化效果 */
}

.nav-item i {
    display: block;
    font-size: 20px; /* 增大图标大小以提高可识别性 */
    margin-bottom: 4px; /* 增加图标与文字之间的间距 */
}

.nav-item div {
    font-size: 12px; /* 调整文字大小以保持视觉平衡 */
}

.nav-item.active {
    color: #1E9FFF; /* 激活状态使用更鲜明的颜色 */
}

/* 可选：添加触摸反馈效果 */
.nav-item:active {
    background-color: rgba(0,0,0,0.1);
}