博客自定义底栏导航菜单1.0版

/*手机端底部菜单*/
@media (min-width: 768px) {
    .nav-shouji {
        display: none !important;
    }
}
.nav-shouji{
            display: flex;
            position: fixed;
            bottom:0;
            z-index:99;
            height: 55px;
            width: 100%;
            background: var(--background);
            flex-shrink: 0;
            font-size: 14px;
        }
        .nav-shouji .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            color: var(--main);
        }       
        .nav-item:nth-child(3) {
            transform: translateY(-20px);
            background: var(--background);
            border-radius: 50%;
            height: 75px;
            width: 75px;
            flex-shrink: 2;
            box-shadow: 0 -3px 4px rgba(0,0,0,.1);
        }
        .nav-shouji .nav-item .img {
            height: 24px;
            overflow: hidden;
        }
        .nav-item:nth-child(3)>.img{
            height: 30px;
            margin-bottom: 5px;            
        }
        .nav-shouji .nav-item img {
            width: 24px;
            height: 24px;
            overflow: hidden;
       }