<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;
}