<template>
	<view class="container">  
		<block v-if="isload">			
			<view class="pages-hd" 
				:style="{'padding-top': menuButtonTop + 'px'}">	
				<view class="navigation flex al-item-center" v-if="!storeInfo.name"
					:style="{'height': menuButtonHeight + 'px'}">
					<text class="iconfont icon-icon_arrow_left" v-if="isShowBack" @click="goBack"></text>
					<view class="navigation-title">{{storeInfo.name ? '商品分类' : '全部商品'}}</view>
				</view>
				<view class="pages-hd__search">
					<view class="left" @click="goto" data-url="/pagesA/shop/sizeShop?types=classify" v-if="!storeInfo.name">
						<view class="l_top">
							<text class="iconfont icon-dianpu1"></text>
							<text class="txt">请选择店铺</text> <text class="iconfont icon-shang"></text>
						</view>
					</view>

					<view @tap.stop="goto" :data-url="'/pages/shop/search?bid='+bid" class="search-container">
						<view class="search-box">
							<image class="img" :src="event_rul + '/static/img/static/img/search_ico.png'"></image>
							<view class="search-text">搜索感兴趣的商品</view>
						</view>
					</view>
				</view>
				<view class="pages-hd__shop" @click="goto" data-url="/pagesA/shop/sizeShop?types=classify" v-if="storeInfo.name">
					<view class="shop-name flex al-item-center">{{storeInfo.name}}<text class="iconfont icon-arrow-right"></text></view>
					<view class="shop-distance">
						<text class="iconfont icon-didian"></text>距离{{storeInfo.juli}}
					</view>
				</view>
			</view>
			
			<view class="coentent_box" v-if="!storeInfo.name" style="flex: 1; overflow: hidden;">
				<view class="nav-pai1">
					<view class="nav-paili1 flex al-item-center j-center" :class="(!field||field=='sort')?'actived':''" @tap="changeOrder" data-field="sort" data-order="desc">综合</view> 
					<view class="nav-paili1 flex al-item-center j-center" :class="field=='sales'?'actived':''" @tap="changeOrder" data-field="sales" data-order="desc">销量</view> 
					<view class="nav-paili1 flex al-item-center j-center" :class="field=='createtime'?'actived':''" @tap="changeOrder" data-field="createtime" data-order="desc">上新</view>
					<view class="nav-paili1 flex al-item-center j-center" @tap="changeOrder" data-field="sell_price" :data-order="order=='asc'?'desc':'asc'">
						<view :class="field=='sell_price'?'selected':''">价格</view>
						<text  style="font-size: 26rpx; " class="iconfont icon-danbianjiantou1" :style="field=='sell_price'&&order=='asc'?'color:'+'#333333;':''"></text>
						<text style="margin-left: -10rpx; font-size: 26rpx;" class="iconfont icon-danbianjiantou" :style="field=='sell_price'&&order=='desc'?'color:'+'#333333;':''"></text>
					</view>  
				</view>
				<scroll-view class="classify-box" scroll-y="true" @scrolltolower="scrolltolower">
				<view class="product-container" style="padding: 20rpx;">
					<block v-if="datalist && datalist.length>0">
						<!-- <dp-product-item  types='search'  :data="datalist" :menuindex="-1"></dp-product-item> -->
						<view class="product-box flex flex-w j-between">
							<block v-for="(item, idx) in datalist" :key="idx">
								<view
									class="product-item bg-color-white overflow-hd"
									@click="goto"
									:data-url="'/pages/shop/product?id=' + item.id"
								>
									<view class="product-item__hd flex j-center al-item-center">
										<image
											class="product-img"
											:src="item.pic"
											mode="widthFix"
										></image>
									</view>
									<view class="item-info">
										<view class="item-info__name text-overflow-line">{{ item.name }}</view>
										<view class="item-info__salse">已售 {{ item.sales ? (item.sales >= 10000 ? (item.sales / 10000).toFixed(1) + '万': item.sales) : 0 }}</view>
											<view class="item-info__price"><text class="symbol">¥</text>{{ item.sell_price }}</view>
										<view class="item-info__shop flex al-item-center j-between">
											<view class="item-info__shop-bd flex al-item-center"
												@click="goto"
												:data-url="'/pagesA/shop/index?id=' + item.business.id">
												<image class="item-info__shop-logo" :src="item.business.logo"></image>
												<view class="item-info__shop-name">{{item.business.name}}</view>
											</view>
											<view
												class="item-info__shop-cart flex border-rius-r al-item-center j-center"
												@click.stop="buydialogChange"
												:data-proid="item.id"
											>
												<text class="iconfont icon-gouwuche1"></text>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</block>
					<nomore text="没有更多商品了" v-else></nomore>
					<!-- <nodata text="没有查找到相关商品" v-if="nodata"></nodata> -->
					<!-- <loading v-if="loading"></loading> -->
				</view>
				</scroll-view>
			</view>
			<view class="content-container" v-else>
				<view class="nav_left">
					<view :class="'nav_left_items ' + (curIndex == -1 ? 'active' : '')" @tap="switchRightTab"
						data-index="-1" data-id="0">全部
					</view>
					<block v-for="(item, index) in clist" :key="index">
						<view :class="'nav_left_items ' + (curIndex == index ? 'active' : '')" @tap="switchRightTab"
							:data-index="index" :data-id="item.id">{{item.name}}
						</view>
					</block>
				</view>
				<view class="nav_right">
					<scroll-view class="nav_right-scroll" v-if="curIndex>-1" scroll-x="true">
						<view class="nav-paili" :class="{'nav-pailiz':curIndex2==-1}"
							@tap="changeCTab" :data-id="clist[curIndex].id" data-index="-1">全部</view>
						<view class="nav-paili" :class="{'nav-pailiz':curIndex2== idx2}"
							v-for="(item, idx2) in clist[curIndex].child" :key="idx2" @tap="changeCTab"
							:data-id="item.id" :data-index="idx2">{{item.name}}</view>
					</scroll-view>
					<view class="nav_right-content">
						<scroll-view class="classify-box" scroll-y="true" @scrolltolower="scrolltolower">
							<view class="product-itemlist">
								<view class="item" v-for="(item,index) in datalist" :key="index" @click="goto"
									:data-url="'/pages/shop/product?id='+item.id">
									<view class="product-pic">
										<image class="image" :src="item.pic" mode="widthFix" />
									</view>
									<view class="product-info flex j-between">
										<view class="product-info__name"><text>{{item.name}}</text></view>
										<view class="product-info__bot flex j-between">
											<view class="product-info__price">
												<text class="current-price"><text
														class="symbol">￥</text>{{item.sell_price}}</text>
												<text class="original-price"
													v-if="item.market_price*1 > item.sell_price*1">￥{{item.market_price}}</text>
											</view>
											<view class="car-btn"
												@click.stop="buydialogChange" :data-proid="item.id"><text
													class="iconfont icon-jiahao"></text></view>
										</view>
									</view>
								</view>
							</view>
							<nomore text="没有更多商品了" v-if="nomore"></nomore>
							<nodata text="暂无相关商品" v-if="nodata"></nodata>
							<view style="width:100%;height:100rpx"></view>
						</scroll-view>
					</view>
				</view>
			</view>
		
		</block>
		<buydialog v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" :menuindex="menuindex">
		</buydialog>
		<loading v-if="loading" ></loading>
		<dp-tabbar v-if="tab_show" :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
		<!-- 弹窗 -->
		<view class="hm_box" v-if="hm_show">
			<view class="contoent">
				<view class="title">
					检测到您的定位已经发生变化，是否切换店铺为你提供服务？
				</view>
				
				<view class="item">
				 <text class="wai" @click="hm30_show = !hm30_show "><text v-if="hm30_show" class="nei"></text></text>	最近30天内不显示该选项
				</view>
				<view class="btn_box">
					<view class="left" @click="hm_btn(1)">
						切换
					</view>
					<view class="right" @click="hm_btn(0)">
						不切换
					</view>
				</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	var app = getApp();
	export default {

		data() {
			return {
				tab_show:true,
				class_hm30_show: uni.getStorageSync('class_hm30_show') || '',
				hm_show:false,
				hm30_show:false,
				storeInfo: uni.getStorageSync('class_store_info')?JSON.parse(uni.getStorageSync('class_store_info')): {},
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pagenum: 1,
				nomore: false,
				nodata: false,
				order: '',
				field: '',
				clist: [],
				curIndex: -1,
				curIndex2: -1,
				datalist: [],
				nodata: false,
				curCid: 0,
				proid: 0,
				buydialogShow: false,
				bid: '',
				menuButtonTop: 0,
				menuButtonHeight: 40,
				isShowBack: true,
				
				event_rul: app.globalData.event_url,
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			const pages = getCurrentPages();
			if (pages.length === 1) {
				this.isShowBack = false;
			} else {
				this.isShowBack = true;
			}

			if(this.storeInfo.id){
				this.bid = this.storeInfo.id ||'';
			}else{
				this.bid = this.opt.bid ||'';
			}
			
			
			
			if(opt.homeType){ //首页进来,默认全部商品
			 	this.storeInfo ={};
				this.bid= '';
				this.tab_show = false;
				
			}else{
				if(this.storeInfo.id&&(!this.class_hm30_show || Number(new Date) >(this.class_hm30_show+ 2592000000))){
					this.resetFn();
				}
			}
			// #ifdef MP
			// 获取右上角胶囊坐标信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.menuButtonHeight = menuButtonInfo.height;  // 胶囊的高度
			
			if(this.storeInfo.name) {
				this.menuButtonTop = menuButtonInfo.top - (48 - this.menuButtonHeight) / 2;
			} else {
				this.menuButtonTop = menuButtonInfo.top;  
			}
			// #endif
			
		
			this.getdata();
			
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		methods: {
			hm_btn(e){
				if(this.hm30_show){
					uni.setStorageSync('class_hm30_show',Number(new Date))
				}
				if(e == 1){
					uni.navigateTo({
						url:'/pagesA/shop/sizeShop'
					})
				}else{
					this.hm_show = false;
				}
			},
			resetFn(){
				var that = this;
				let newTime = Number(new Date)
				let oldTime = this.storeInfo.resetTime || 0
				console.log(newTime,oldTime)
				if(newTime > (oldTime+3600000)){
					app.getLocation(function(res) {
							var latitude =  res.latitude;
							var longitude =  res.longitude;
							app.post('ApiBusiness/nearby',{latitude,longitude,bid:that.bid},function (res){
								if(res.bid !== 0){
									that.hm_show = true;
								}
							})
						})
					
				}
			},
			getdata: function() {
				var that = this;
				var nowcid = that.opt.cid;
				if (!nowcid) nowcid = '';
				that.pagenum = 1;
				that.datalist = [];
				that.loading = true;
				app.get('ApiShop/classify', {
					cid: nowcid,
					bid: that.bid
				}, function(res) {
					that.loading = false;
					var clist = res.data;
					that.clist = clist;
					if (nowcid) {
						for (var i = 0; i < clist.length; i++) {
							if (clist[i]['id'] == nowcid) {
								that.curIndex = i;
								that.curCid = nowcid;
							}
							var downcdata = clist[i]['child'];
							var isget = 0;
							for (var j = 0; j < downcdata; j++) {
								if (downcdata[j]['id'] == nowcid) {
									that.curIndex = i;
									that.curIndex2 = j;
									that.curCid = nowcid;
									isget = 1;
									break;
								}
							}
							if (isget) break;
						}
					}
					that.loaded();
					that.getdatalist();
				});
			},

			getdatalist: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}

				var that = this;

				var pagenum = that.pagenum;

				var cid = that.curCid;
				var bid = this.bid;
				var order = that.order;

				var field = that.field;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				var wherefield = {};
				wherefield.pagenum = pagenum;
				wherefield.field = field;
				wherefield.order = order;
				wherefield.bid = bid;
				if (bid > 0) {
					wherefield.cid2 = cid;
				} else {
					wherefield.cid = cid;
				}
				app.post('ApiShop/getprolist', wherefield, function(res) {
					that.loading = false;

					uni.stopPullDownRefresh();

					var data = res.data;
					if (data.length == 0) {
						if (pagenum == 1) {
							that.nodata = true;
						} else {
							that.nomore = true;
						}
					}
					var datalist = that.datalist;
					var newdata = datalist.concat(data);
					that.datalist = newdata;
				});

			},

			scrolltolower: function() {

				if (!this.nomore) {

					this.pagenum = this.pagenum + 1;
					this.getdatalist(true);

				}

			},

			//改变子分类

			changeCTab: function(e) {

				var that = this;

				var id = e.currentTarget.dataset.id;
				var index = parseInt(e.currentTarget.dataset.index);

				this.curIndex2 = index;
				this.nodata = false;

				this.curCid = id;

				this.pagenum = 1;

				this.datalist = [];

				this.nomore = false;

				this.getdatalist();

			},

			//改变排序规则

			changeOrder: function(e) {

				var t = e.currentTarget.dataset;

				this.field = t.field;
				this.order = t.order;

				this.pagenum = 1;
				this.datalist = [];
				this.nomore = false;

				this.getdatalist();

			},

			//事件处理函数

			switchRightTab: function(e) {

				var that = this;

				var id = e.currentTarget.dataset.id;

				var index = parseInt(e.currentTarget.dataset.index);

				this.curIndex = index;
				this.curIndex2 = -1;
				this.nodata = false;
				this.curCid = id;
				this.pagenum = 1;
				this.datalist = [];
				this.nomore = false;

				this.getdatalist();

			},
			buydialogChange: function(e) {
				if (!this.buydialogShow) {
					this.proid = e.currentTarget.dataset.proid
				}
				this.buydialogShow = !this.buydialogShow;
			},			
			goBack() {
				uni.navigateBack({
					delta: 1,
				})
			}
		}

	};
</script>
<style lang="scss">
	// 弹窗
	.hm_box{
		position: fixed;
        z-index: 9;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba($color: #000000, $alpha: .5);
		display: flex;
		justify-content: center;
		align-items: center;
		.contoent{
			width: 598rpx;
			background-color: #fff;
			padding: 60rpx 50rpx 44rpx;
			border-radius: 12rpx;
			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}
			.btn_box{
				margin-top: 50rpx;
				width: 100%;
				display: flex;
				justify-content: space-around;
				
				.left,.right{
					width: 336rpx;
					text-align: center;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
				}
				.left {
					border: 1rpx solid #E8E8E8;
				}
				.right{
					margin-left: 26rpx;
					color: #FFFFFF;
					background: linear-gradient(to right,#00AE68 0%,#096742 100%);
				}
			}
			.item{
				margin-top: 20rpx;
				width: 100%;
				justify-content: center;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
				.wai{
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
					border-radius: 50%;
					overflow: hidden;
					padding: 4rpx;
					border: 1px solid#0A5D3B;
				}
				.nei{
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #0A5D3B;
				}
			}
		}
	}
	.coentent_box{
		display: flex;
		flex-direction: column;
		.nav-pai1{
			width: 100%;display:flex;align-items:center;justify-content:center;background: #FFF;
			.nav-paili1{
				flex:1; text-align:center;color:#999; font-size:28rpx;height:80rpx;line-height:80rpx;
				&.actived,.selected {
					font-weight:bold;
					position: relative;
					color: #333;
					height: 80rpx;
					line-height: 80rpx;
					&::after {
						content: '';position: absolute;left: 50%;bottom: 10rpx;width:42rpx;height: 6rpx;transform: translateX(-50%);background: #0A5D3B;border-radius: 4rpx;
					}
				}
			}
			.nav-paili1 .iconshangla{position: absolute;top:-4rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
			.nav-paili1 .icondaoxu{position: absolute;top: 8rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}

		}
		.head_nav{
			margin-bottom: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.item{
				color: #333;
			}
			.itemz{
				color: #f0bd71;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		
	}
	.pages-hd {
		background: #FFF;
		&__search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 24rpx 10rpx;
			// #ifdef H5
			padding: 28rpx 24rpx 10rpx;
			// #endif
			.left {
				margin-right: 16rpx;
				.l_top {
					color: #333;
					display: flex;
					align-items: center;
					background: #F7F7F7;
					height: 72rpx;
					border-radius: 36rpx;
					padding: 0 20rpx;
					flex-shrink: 0;
					width: 274rpx;
	
					.txt {
						font-weight: 28rpx;
						max-width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 0 20rpx;
					}
					.iconfont {
						color: #333333;
						font-weight: 600;
					}
					.icon-dianpu1 {
						font-size: 32rpx;
					}
					.icon-shang {
						font-size: 22rpx;
						transform: rotate(180deg);
					}
				}
			}
		}
		&__shop {
			padding: 22rpx 24rpx 10rpx;
			.shop-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				.iconfont {
					font-size: 36rpx;
					line-height: 44rpx;
				}
			}
			.shop-distance {
				font-size: 26rpx;
				color: #999999;
				line-height: 36rpx;
				margin-top: 12rpx;
				.iconfont {
					font-size: 28rpx;
					margin-right: 6rpx;
				}
			}
		}
	}

	page {
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		color: #f5f5f5;
		display: flex;
		flex-direction: column
	}
.product-box {
  .product-item {
    width: 340rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
		margin-bottom: 24rpx;
    &__hd {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .product-img {
      width: 100%rpx;
      height: 260rpx;
    }
    .item-info {
      padding: 24rpx 20rpx;
      width: 100%;
			&__name {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
				height: 72rpx;
			}
			&__salse {
				margin-top: 10rpx;
				font-size: 20rpx;
				color: #999999;
				line-height: 22rpx;
			}
			&__price {
				margin-top: 4rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #ED5925;
				line-height:50rpx;
				.symbol {
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
			&__shop {
				margin-top: 14rpx;
				&-bd {
					flex: 1;

				}
				&-logo {
					width: 50rpx;
					height: 50rpx;
					flex-shrink: 0;
					border-radius: 50%;
					margin-right: 6rpx;
				}
				&-name {
					flex: 1;
					max-width: 175rpx;
					font-size: 22rpx;
					color: #666666;
					line-height: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				&-cart {
					width:52rpx;
					height:52rpx;
					background: linear-gradient(to bottom,#01a664 0%,#086e45 100%);

					.iconfont {
						font-size:36rpx;
						height: 52rpx;
						line-height: 50rpx;
						color: #FFFFFF;
					}
				}

			}
    }
    .product-b-t {
      padding-top: 28rpx;

      .b-t1 {
        color: #ED5925;
        font-size: 24rpx;
      }
      .b-t2 {
        font-size: 36rpx;
        margin-left: 6rpx;
      }
      .car {
        width: 54rpx;
        height: 54rpx;
        background: linear-gradient(to bottom,#F96648 0%,#FD4641 100%);

        .icon-gouwuche1 {
          color: #fff;
          font-size: 36rpx;
          line-height: 44rpx;
          height: 48rpx;
        }
      }
    }
  }
  .shops-cont:nth-child(2n) {
    // margin-left: calc(100% - 680rpx);
    margin-left: 2%;
  }
  .shops-cont:nth-child(n + 3) {
    margin-top: 20rpx;
  }
}
	.navigation {
		box-sizing: content-box;
		.icon-icon_arrow_left {
			font-size: 45rpx;
			color: #000000;
		}
		&-title {
			flex: 1;
			padding-right: 44rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 50rpx;
		}
	}

	.search-container {
		width: 100%;
		height: 72rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 36rpx;
		border: 0;
		background-color: #F7F7F7;
		flex: 1
	}

	.search-box .img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
		margin-left: 20rpx
	}

	.search-box .search-text {
		font-size: 28rpx;
		color: #C2C2C2;
		width: 100%;
	}

	.content-container {
		flex: 1;
		height: 100%;
		display: flex;
		overflow: hidden;
	}

	.nav_left {
		width: 176rpx;
		height: 100%;
		background: #F5F5F5;
		overflow-y: scroll;
		&_items {
			width: 100%;
			text-align: center;
			color: #666666;
			font-size: 28rpx;
			line-height: 108rpx;
			&.active {
				position: relative;
				background: #fff;
				color: #333333;
				font-size: 28rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-weight: bold;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 46rpx;
					border-radius: 6rpx;
					background: #0A5D3B;
				}
			}
		}
	}

	.nav_right {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
		&-scroll {
			width: 100%;
			white-space: nowrap;
			& ::-webkit-scrollbar {
				display: none;
			}
		}
	}

	.nav_right-content {
		background: #ffffff;
		padding-right: 20rpx;
		height: 100%
	}

	.nav-paili {
		display: inline-block;
		margin: 0 10rpx 20rpx 0;
		min-width: 96rpx;
		box-sizing: border-box;
		padding: 0 22rpx;
		border-radius: 54rpx;
		background: #F7F7F7;
		height: 54rpx;
		line-height: 54rpx;
		color: #666;
		font-size: 24rpx;
		text-align: center;
	}

	.nav-pailiz {
		background: #E2F7EF;
		color: #0A5D3B;
		font-weight: bold;
	}

	.nav-paili .iconshangla {
		position: absolute;
		top: -4rpx;
		padding: 0 6rpx;
		font-size: 20rpx;
		color: #7D7D7D
	}

	.nav-paili .icondaoxu {
		position: absolute;
		top: 8rpx;
		padding: 0 6rpx;
		font-size: 20rpx;
		color: #7D7D7D
	}

	.classify-ul {
		width: 100%;
		height: 100rpx;
		padding: 0 10rpx;
	}

	.classify-li {
		flex-shrink: 0;
		display: flex;
		background: #F5F6F8;
		border-radius: 22rpx;
		color: #6C737F;
		font-size: 20rpx;
		text-align: center;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 28rpx;
		margin: 12rpx 10rpx 12rpx 0
	}

	.classify-box {
		width: 100%;
		height: calc(100%);
		overflow-y: scroll;
		& ::-webkit-scrollbar {
			display: none;
		}
	}

	.classify-box .nav_right_items {
		width: 100%;
		border-bottom: 1px #f4f4f4 solid;
		padding: 16rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.product-itemlist {
		height: auto;
		position: relative;
		overflow: hidden;
		padding: 0px;
		display: flex;
		flex-wrap: wrap
	}

	.product-itemlist .item {
		width: 100%;
		display: inline-block;
		position: relative;
		margin-bottom: 12rpx;
		background: #fff;
		display: flex;
		padding: 14rpx 0;
		border-radius: 10rpx;
		border-bottom: 1px solid #F4F4F4;
	}

	.product-itemlist .product-pic {
		width: 180rpx;
		overflow: hidden;
		background: #ffffff;
		border-radius: 4px;
	}

	.product-itemlist .product-pic .image {
		width: 100%;
	}
	.product-itemlist .product-info {
		flex-direction: column;
		flex: 1;
		padding: 0 10rpx 5rpx 20rpx;
		&__name {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* autoprefixer: ignore next */
			-webkit-box-orient: vertical;
			text-align: justify;
			white-space: pre-wrap;
			word-break: break-all;
		}
		&__price {
			.current-price {
				font-size: 36rpx;
				font-weight: 500;
				color: #ED5925;
				line-height: 36rpx;
			}
			.original-price {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #aaa;
				text-decoration: line-through;
			}
			.symbol {
				font-size: 22rpx;
			}
		}
		.icon-jiahao {
			color: #068150;
			font-size: 45rpx;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
