商品分类WXSS样式实现

最新推荐文章于 2024-05-05 00:23:38 发布

九品印相

最新推荐文章于 2024-05-05 00:23:38 发布

阅读量402

点赞数 3

CC 4.0 BY-SA版权

分类专栏：分布式小程序电商2 文章标签： chrome

本文链接：https://blog.csdn.net/m0_68935893/article/details/135907913

/* 全局引入iconfont样式 */
@import "./styles/iconfont.wxss"

/* 初始化全局样式 */
page,view,text,swiper,swiper-item,image,navigator{
   
   
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

/* 全局变量定义 设置主题颜色，字体大小等 */
page{
   
   
    /* 主题颜色 */
    --themeColor: #FF5700;
    /* 字体大小 rpx自适应大小 */
    font-size: 28rpx;
}

image{
   
   
    width: 100%;
}

.cates{
   
   
    height: 100%;
    .cates_container{
   
   
        // height: calc(100% - 96rpx);高的百分之百减去96rpx，学到了
        height: ~'calc( 100vh - 90rpx )';
        display: flex;
        .left_menu{
   
   
            flex: 2;
            // background-color: aqua;
            .menu_item{
   
   
                margin-top: 10rpx;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30rpx;
            }
            .active{
   
   
                font-weight: bolder;
                color: var