wxThird/pages/shop/shop.vue

<template>
<view class="box">
	<view class="topbox">
		<view class="sstop">
			<image src="../../static/timg/icon_search@2x.png" mode="" class="sstopimg"></image>
			<input type="text" placeholder="请输入商品名称" class="sstopInput">
		</view>
		<scroll-view scroll-x="true" class="scroll-Y" >
			<view class="classificationBox">
				<view  class="classification" v-for="(item,index) in 8">
					<view class="classificationName">分类名称一</view>
					<view class="classificationHx"></view>
				</view>
			</view>
	   </scroll-view>
	   <view class="paixuBox">
			<view class="paixuLine">
				默认排序
			</view>
			<view class="paixuLine">
				销量
			</view>
			<view class="paixuLine">
				价格
			</view>
	   </view>
	   <scroll-view scroll-Y="true" class="scroll-Y goodsSw" >
	   		<view class="goodsBox">
	   			<view class="hotGoodsLine" v-for="(item,index) in 5">
	   				<view>
	   					<image src="../../static/timg/nocar.png" mode="" class="hotGoodsLineImg"></image>
	   				</view>
	   				<view class="hotGoodsLineRIght">
	   					<view class="goodsName">德国马牌 Continental 全新升级6代 TechContct德国马牌 Continental 全新升级6代 TechContct</view>
	   				    <view class="Sold">已售 999</view>
	   					<view class="goodsPrice">
	   						<view class="goodsPrice1">店庆价</view>
	   						<view class="goodsPrice2">￥</view>
	   						<view class="goodsPrice3">999</view>
	   						<view class="goodsPrice3">￥893</view>
	   					</view>
	   				</view>
	   			</view>
	   		</view>
	   </scroll-view>
		
	</view>
	
</view>
</template>

<script>
	
	export default {
		components: {
			
		},
		
		data() {
			return {
				userInfo:'',
			}
		},
		onLoad() {
			
			this.userInfo = uni.getStorageSync("userInfo");
			//this.getOrderTimes()
		},
		
		methods: {
			
			
		}
	}
</script>

<style scoped lang="less">
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.sstopInput{
	width: 626rpx;
	height: 72rpx;
	background: #F4F5F7;
	border-radius: 36rpx;
	line-height: 72rpx;
	font-size: 28rpx;
	padding-left: 76rpx;
}
.sstop{
	position: relative;
	padding-top: 24rpx;
	padding-left: 24rpx;
	background: #ffffff;
}
.sstopimg{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 44rpx;
	top: 40rpx;
}
.scroll-Y{
	background: #ffffff;
	width: 750rpx;
}
.classificationBox{
	display: flex;
	padding-bottom: 12rpx;
}
.classificationName{
	white-space: nowrap;
	font-size: 28rpx;
	color: #3C3C3C;
	line-height: 40rpx;
	padding:24rpx 24rpx 8rpx 24rpx;
}
.classificationHx{
	width: 40rpx;
	height: 4rpx;
	background: #F03B3B;
	margin: 0 auto;
}
.paixuBox{
	width: 750rpx;
	height: 72rpx;
	background: #FFFFFF;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	}
	.paixuLine{
		line-height: 37rpx;font-size: 26rpx;color: #666666;padding-top: 18rpx;
	}
	.hotGoodsLine{
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
	}
	.hotGoodsLineImg{
		width: 208rpx;
		height: 194rpx;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
	}
	.goodsName{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;		
		line-clamp: 2;					
		-webkit-box-orient: vertical;
	}
	.hotGoodsLineRIght{
		padding-left: 24rpx;
	}
	.goodsPrice{
		display: flex;
		padding-top: 10rpx;
	}
	.goodsPrice1{
		font-size: 24rpx;
		font-weight: 400;
		color: #F03B3B;
	}
	.goodsPrice2{
		font-size: 22rpx;
		font-weight: 400;
		color: #F03B3B;
	}
	.goodsPrice3{
		font-size: 32rpx;
		font-weight: 400;
		color: #F03B3B;
	}
	.goodsPrice3{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 8rpx;
	}
</style>