wxapp_shuibei/pages/goods_cate/goods_cate.vue

<template>
	<view class='productSort'>
<!--		<view class='header acea-row row-center-wrapper'>-->
<!--			<view class='acea-row row-between-wrapper input'>-->
<!--				<text class='iconfont icon-sousuo'></text>-->
<!--				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search' name="search"-->
<!--				 placeholder-class='placeholder'></input>-->
<!--			</view>-->
<!--		</view>-->
<!--		<view class='aside' :style="{bottom: tabbarH + 'px',height: height + 'rpx'}">-->
<!--			<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">-->
<!--				<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in productList"-->
<!--			 :key="index" @click='tap(index,"b"+index)'><text>{{item.name}}</text></view>-->
<!--			 </scroll-view>-->
<!--			-->
<!--		</view>-->
<!--		<view class='conter'>-->
<!--			<scroll-view scroll-y="true" :scroll-into-view="toView" :style='"height:"+height+"rpx;margin-top: 96rpx;"' @scroll="scroll"-->
<!--			 scroll-with-animation='true'>-->
<!--				<block v-for="(item,index) in productList" :key="index">-->
<!--					-->
<!--					<view class='listw' :id="'b'+index">-->
<!--						<view class='title acea-row row-center-wrapper'>-->
<!--							<view class='line'></view>-->
<!--							<view class='name'>{{item.name}}</view>-->
<!--							<view class='line'></view>-->
<!--						</view>-->
<!--						<view class='list acea-row'>-->
<!--							<block v-for="(itemn,indexn) in item.child" :key="indexn">-->
<!--								<navigator hover-class='none' :url='"/pages/goods_list/index?cid="+itemn.id+"&title="+itemn.name' class='item acea-row row-column row-middle'>-->
<!--							        &lt;!&ndash; <view class='picture' :style="{'background-color':itemn.extra?'none':'#f7f7f7'}">-->
<!--										<image :src='itemn.extra'></image>-->
<!--									</view> &ndash;&gt;-->
<!--									<view class='name line1'>{{itemn.name}}</view>-->
<!--								</navigator>-->
<!--							</block>-->
<!--						</view>-->
<!--					</view>-->
<!--				</block>-->
<!--				<view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>-->
<!--			</scroll-view>-->
<!--		</view>-->
	</view>
</template>

<script>

</script>

<style scoped lang="scss">
	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 26rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input input {
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
	}

	.productSort .aside {
		position: fixed;
		width: 180rpx;
		left: 0;
		top:0;
		background-color: #f7f7f7;
		overflow-y: scroll;
		overflow-x: hidden;

		height: auto;
		margin-top: 96rpx;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold;
	}

	.productSort .conter {
		margin: 96rpx 0 0 180rpx;
		padding: 0 14rpx;
		background-color: #fff;
	}

	.productSort .conter .listw {
		padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 90rpx;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
	}

	.productSort .conter .list .item {
		width: 177rpx;
		margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		div{
			background-color: #f7f7f7;
		}
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
</style>