forest-traced-UI/main/css/style.css

.main-nav{
    height: 70px;
    background-color: #23262E;
    display: flex;
    align-items: center;
    padding: 0 15px 0 30px;
}
.main-nav .logo{
    flex: 1;
}
.nav-menu{
    background-color: #23262E;
}
.nav-menu .layui-nav-child a i{
    font-size: 18px;
    margin-right: 5px;
    vertical-align: bottom
}
.nav-menu .layui-nav-item{
    line-height: 70px;
}
.nav-menu .layui-nav-img{
    width: 35px;
    height: 35px;
}
.main-nav .logo a{
    color: #fff;
    font-size: 22px
}
.layui-main-layout{
    padding: 30px 15px;
    border-radius: 2px;
    height: calc(100vh - 160px)
}

.main-card-body{
    background-color: #fdfdfd;
    text-align: center;
    padding: 40px 15px;
    border-radius: 5px;
}

.main-card-body a{
    display: block;
}

.icon-panel{
    background-color: #666;
    width: 90px;
    height: 90px;
    margin:  0 auto;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-panel i{
    font-size: 56px;
    color: #666;
}
.main-card-body h4{
    font-size: 18px;
    margin-top: 20px;
    color: #000;
}

.blue-icon{
    background-color: #dbe5fe;
}
.blue-icon i{
    color: #4b86fe;
}

.violet-icon{
    background-color: #ddd5fe;
}
.violet-icon i{
    color: #8260fd;
}

.green-icon{
    background-color: #deedce;
}
.green-icon i{
    color: #5eac0b;
}

.grass-icon{
    background-color: #d6ede7;
}
.grass-icon i{
    color: #36ad91;
}

.orange-icon{
    background-color: #fce5d5;
}
.orange-icon i{
    color: #fc8332;
}

.pink-icon{
    background-color: #fce5ed;
}
.pink-icon i{
    color: #ed81a3;
}

.cyanine-icon{
    background-color: #d3e9f4
}
.cyanine-icon i{
    color: #2b9fce
}

.layui-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    font-size: 12px;
    text-align: center
}