商品分类WXSS样式实现

/* 全局引入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(--themeColor);
                border-left: 8rpx solid currentColor;
            }
        }
        .right_content{
            flex: 5;
            .productType{
                padding: 30rpx 20rpx 30rpx 20rpx;
                .productType_title{
                    font-weight: bolder;
                }
                .product_list{
                    navigator{
                        display: flex;
                        margin: 10rpx;
                        background-color: #F8F8F8;
                        image{
                            flex: 1;
                        }
                        .right{
                            flex: 3;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            .product_name{
                                padding-top: 10rpx;
                                word-spacing: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .product_price{
                                padding-bottom: 10rpx;
                            }
                        }
                    }
                }
            }
        }
    }
}

<view class="cates">
    <!-- 搜索框开始 -->
    <SearchBar></SearchBar>
    <!-- 搜索框结束 -->
    <view class="cates_container">
        <!-- 左侧菜单 开始 -->
        <scroll-view scroll-y class="left_menu">
           <view class="menu_item {{index==0 ? 'active':''}}"
                wx:for="{{leftMenuList}}"
                wx:key="*this"
                data-index="{{index}}"
           >
           {{item}}
           </view>      
        </scroll-view>
        <!-- 左侧菜单 结束 -->

        <!-- 右侧商品数据 开始 -->
        <scroll-view scroll-y class="right_content">
            <view class="productType"
                wx:for="{{rightContext}}"
                wx:for-item="productType"
                wx:key="id"
            >
            <view class="productType_title">
                {{productType.name}}
            </view>
            <view class="product_list"
                    wx:for="{{productType.productList}}"
                    wx:for-item="product"
                    wx:key="id"
                >
                <navigator>
                    <image mode="widthFix" src="{{baseUrl+'/image/product/'+product.proPic}}"></image>
                    <view class="right">
                        <view class="product_name">{{product.name}}</view>
                        <view class="product_price">￥{{product.price}}</view>
                    </view>              
                </navigator>
                </view>
            </view>
        </scroll-view>
        <!-- 右侧商品数据 结束 -->
    </view>
</view>