以下代码插入foot.php或者footer.php末尾,href为图标跳转链接,src为图标图片链接,自行更改!
以下代码插入全局css文件末尾,模板后台设置有css添加框的直接粘贴框内保存即可!
/*手机端底部菜单*/
@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;
}