小程序--分类

<import src="../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<view class="classify">
    <!--左-->
    <view class="classify_list">
        <view class="list" >
            <view wx:for="{{category}}"  class="classify_item {{item.id == first_category_id?'active':''}}" data-id="{{item.id}}" bindtap="bindClassify">{{item.name}}</view>
        </view>
    </view>
    <!--右-->
    <view class="classify_r">
        <view class="classify_r_list">
            <view class="hot_Recommend">热销推荐</view>
            <view class="right_list">
                <view class="goods_item">
                <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                <text class="goods_name">和田玉</text>
            </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">翡翠</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">琥珀</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">铜 | 铁 | 锡器</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">和田玉</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">翡翠</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">琥珀</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">铜 | 铁 | 锡器</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">和田玉</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">翡翠</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">琥珀</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">铜 | 铁 | 锡器</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">和田玉</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">翡翠</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">琥珀</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">和田玉</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">翡翠</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">琥珀</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">和田玉</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">翡翠</text>
                </view>
                <view class="goods_item">
                    <view class="item_img"><image src="../../images/product_2.jpg" mode="widthFix"></image></view>
                    <text class="goods_name">琥珀</text>
                </view>

            </view>

        </view>

    </view>
</view>

@import "../../lib/style/iconfont.wxss";
@import "../../lib/style/base.wxss";
@import "../../lib/style/baseNavigationBar.wxss";
.classify {
    border-top: 2rpx solid #f3f3f3;
    margin-top: 140rpx;
    position: relative;
}
.classify_list {
    position: fixed;
    top: 140rpx;
    left: 0;
    width: 24%;
    height: 100%;
}
.list {
    width: 100%;
    position: relative;
    height: 100%;
}
.list:after {
    position: absolute;
    width: 2rpx;
    height: 100%;
    content: "";
    background: #f3f3f3;
    right: 0;
    top: 0;
}
.classify_item {
    width: 100%;
    text-align: center;
    height: 98rpx;
    line-height: 98rpx;
    border-bottom: 2rpx solid #f3f3f3;
}
.active {
    color: #c90f18;
    border-left:4rpx solid #c90f18;
    background: #f6f6f6;
}
/*右面*/
.classify_r {
    margin-left: 24%;
}
.classify_r_list {
    width: 100%;
}
.hot_Recommend {
    text-align: center;
    height: 98rpx;
    line-height: 98rpx;
    position: relative;
}
.hot_Recommend:after {
    position: absolute;
    content: "";
    width: 82rpx;
    height: 3rpx;
    background: #f3f3f3;
    top: 49rpx;
    right: 20%;
}
.hot_Recommend:before {
    position: absolute;
    content: "";
    width: 82rpx;
    height: 3rpx;
    background: #f3f3f3;
    top: 49rpx;
    left: 20%;
}
.right_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.goods_item {
    width: 33.33%;
    text-align: center;
    height: 230rpx;
    line-height: 1.6;
}
.goods_name {
    color: #616161;

}
.item_img {
    width: 100%;
    margin-bottom: 30rpx;
}
.item_img image {
    width: 60rpx;
    margin: auto;
}