小U商城分类css

@charset "utf-8";

#page {

    width: 3.75rem;

    margin: 0 auto;

}

/* 头部 */

header {

    height: 0.88rem;

    background: #FF6040;

    padding: 0.44rem 0.06rem 0 0.17rem;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

#page header a {

    margin-left: 1.3rem;

}

header>a {

    font-size: 0.17rem;

    color: #fff;

    opacity: .8;

    margin-left: 0.4rem;

}

header>.more {

    width: 0.87rem;

    height: 0.32rem;

    background: rgba(255, 119, 51, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 0.405rem;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

}

header>.more .line {

    background: rgba(255, 255, 255, 0.25);

    width: 1px;

    height: 0.19rem;

}

header>.more span {

    font-size: 0.17rem;

    color: #fff;

    opacity: .8;

}

#page .sou {

    position: relative;

    height: 0.5rem;

    padding-top: 0.15rem;

    box-sizing: border-box;

    background-image: linear-gradient(180deg, #FF6040 0%, #FF8A80 100%);

    box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.50);

    text-align: center;

}

#page .sou input {

    width: 3.5rem;

    height: 0.25rem;

    background: #FFFFFF;

    border: 1px solid #E6E6E6;

    border-radius: 0.03rem;

    text-indent: 0.29rem;

    font-size: 0.14rem;

    color: #999999;

    line-height: 0.22rem;

}

#page .sou .fd {

    position: absolute;

    top: 0.16rem;

    left: 0.2rem;

    font-size: 0.16rem;

    color: #999999;

    font-weight: bold;

}

#page .left {

    padding-top: 0.2rem;

    width: 1rem;

    background: #FFFFFF;

    box-shadow: 0 0.05rem 0.1rem 0 rgba(51, 51, 51, 0.10);

}

#page .left ul a {

    display: block;

    height: 0.45rem;

    font-size: 0.14rem;

    color: #999999;

    text-align: center;

    line-height: 0.3rem;

}

#page .big .left ul li:hover a {

    color: #FF6040;

    font-size: 0.16rem;

}

#page .big {

    display: flex;

    flex-wrap: wrap;

}

#page .big .big1 {

    background-color: #f1f1f1;

    width: 2.75rem;

}

#page .right1 {

    width: 2.32rem;

    /* height: 2.18rem; */

    background-color: white;

    margin-left: 0.2rem;

    margin-top: 0.18rem;

    padding-bottom:0.1rem ;

}

#page .right1 img {

    display: flex;

    width: 0.64rem;

    height: 0.64rem;

    margin-bottom: 0.06rem;

}

#page .right1 h1 {

    font-weight: bold;

    padding-left: 0.1rem;

    padding-top: 0.1rem;

}

#page .right1 ul li {

    text-align: center;

    margin-left: 0.1rem;

    margin-top: 0.06rem;

}

#page .right1 li a {

    font-size: 0.12rem;

    color: #999999;

    text-align: center;

    line-height: 0.12rem;

    margin-left: 0.06rem;

}

#page .right1 ul {

    display: flex;

    flex-wrap: wrap;

}

#page .box12 {

    position: fixed;

    bottom: 0;

    display: flex;

    float: left;

    justify-content: space-around;

    text-align: center;

    width: 3.75rem;

    height: 0.83rem;

    flex-wrap: wrap;

    background: #FFFFFF;

    box-shadow: 0 -0.05rem 0.1rem 0 rgba(204, 204, 204, 0.20), 0 0 0 0 #CCCCCC;

}

#page .box12 p {

    height: 50px;

    margin-top: 0.05rem;

}

#page .box12 a {

    font-size: 0.08rem;

    color: #999999;

}

#page .box12 img {

    margin-top: 0.1rem;

}

#page .box12 .d1 a {

    font-size: 0.1rem;

    color: #FF6040;

    text-align: center;

    line-height: 0.1rem;

}