4 changed files with 196 additions and 10 deletions
			
			
		- 
					6components/lf-waterfall-shopdetails/lf-waterfall.vue
 - 
					181components/shopList/shopList.vue
 - 
					11pages/shop/searchList.vue
 - 
					8pages/shop/shopdetail.vue
 
@ -0,0 +1,181 @@ | 
			
		|||||
 | 
				<template> | 
			
		||||
 | 
					<view> | 
			
		||||
 | 
						<view class="recommend-box" > | 
			
		||||
 | 
							<view class="goods-rom" v-for="(item,index) of list" :key="index" v-if="list.length" @click="$url('/pages/shop/goodsdetail?id='+item.id)"> | 
			
		||||
 | 
								<image :src="item.picture" mode="aspectFill" style="width: 332rpx;height: 332rpx;border-radius: 20rpx 20rpx 0 0;"></image> | 
			
		||||
 | 
								<view class="lf-p-20"> | 
			
		||||
 | 
									<view class="list-title"> | 
			
		||||
 | 
										{{item.title}} | 
			
		||||
 | 
									</view> | 
			
		||||
 | 
									<view class="list-price"> | 
			
		||||
 | 
										<!-- <text>{{item.price}}元</text> --> | 
			
		||||
 | 
										<lf-price :price="item.price"></lf-price> | 
			
		||||
 | 
										<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text> | 
			
		||||
 | 
									</view> | 
			
		||||
 | 
								</view> | 
			
		||||
 | 
							</view> | 
			
		||||
 | 
							<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent> | 
			
		||||
 | 
						</view> | 
			
		||||
 | 
					</view> | 
			
		||||
 | 
				</template> | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				<script> | 
			
		||||
 | 
					export default { | 
			
		||||
 | 
						props: { | 
			
		||||
 | 
							list: { | 
			
		||||
 | 
								type: Array, | 
			
		||||
 | 
								default: [] | 
			
		||||
 | 
							} | 
			
		||||
 | 
						}, | 
			
		||||
 | 
					} | 
			
		||||
 | 
				</script> | 
			
		||||
 | 
				
 | 
			
		||||
 | 
				<style lang="scss" scoped> | 
			
		||||
 | 
					.recommend-box{ | 
			
		||||
 | 
						display: flex; | 
			
		||||
 | 
						justify-content: space-between; | 
			
		||||
 | 
						padding: 30rpx 32rpx; | 
			
		||||
 | 
						flex-wrap: wrap; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					.goods-rom { | 
			
		||||
 | 
						border-radius: 20rpx; | 
			
		||||
 | 
						width: 333rpx; | 
			
		||||
 | 
						height: max-content; | 
			
		||||
 | 
						background-color: white; | 
			
		||||
 | 
						box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); | 
			
		||||
 | 
						&:nth-child(2n) { | 
			
		||||
 | 
							margin-right: 0; | 
			
		||||
 | 
						} | 
			
		||||
 | 
						&:nth-child(n + 3) { | 
			
		||||
 | 
							margin-top: 20rpx; | 
			
		||||
 | 
						} | 
			
		||||
 | 
					} | 
			
		||||
 | 
					.introduct { | 
			
		||||
 | 
						padding: 30rpx 32rpx; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					.com{ | 
			
		||||
 | 
						width: 100%; | 
			
		||||
 | 
						height: 100%; | 
			
		||||
 | 
						box-sizing: border-box; | 
			
		||||
 | 
						padding: 0rpx 28rpx; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					.shop-head { | 
			
		||||
 | 
						width: 100%; | 
			
		||||
 | 
						height: 400rpx; | 
			
		||||
 | 
						position: relative; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					.shop-flex { | 
			
		||||
 | 
						display: flex; | 
			
		||||
 | 
						padding: 30rpx; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					// loading加载 | 
			
		||||
 | 
					.loading-more { | 
			
		||||
 | 
						align-items: center; | 
			
		||||
 | 
						justify-content: center; | 
			
		||||
 | 
						padding-top: 10px; | 
			
		||||
 | 
						padding-bottom: 10px; | 
			
		||||
 | 
						text-align: center; | 
			
		||||
 | 
						font-size: 28rpx; | 
			
		||||
 | 
						color: #999; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					.loading-more-text::before { | 
			
		||||
 | 
						content: ''; | 
			
		||||
 | 
						width: 20px; | 
			
		||||
 | 
						height: 20px; | 
			
		||||
 | 
						display: inline-block; | 
			
		||||
 | 
						vertical-align: middle; | 
			
		||||
 | 
						-webkit-animation: weuiLoading 1s steps(12, end) infinite; | 
			
		||||
 | 
						animation: weuiLoading 1s steps(12, end) infinite; | 
			
		||||
 | 
						background-repeat: no-repeat; | 
			
		||||
 | 
						background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E"); | 
			
		||||
 | 
						background-size: 100%; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					@keyframes weuiLoading { | 
			
		||||
 | 
						0% { | 
			
		||||
 | 
							transform: rotate3d(0, 0, 1, 0deg); | 
			
		||||
 | 
						} | 
			
		||||
 | 
						100% { | 
			
		||||
 | 
							transform: rotate3d(0, 0, 1, 360deg); | 
			
		||||
 | 
						} | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-warter { | 
			
		||||
 | 
						border-radius: 20rpx; | 
			
		||||
 | 
						margin: 10px 5px; | 
			
		||||
 | 
						margin-top: 0px; | 
			
		||||
 | 
						background-color: #ffffff; | 
			
		||||
 | 
						// padding: 8px; | 
			
		||||
 | 
						position: relative; | 
			
		||||
 | 
						overflow: hidden; | 
			
		||||
 | 
						box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.u-close { | 
			
		||||
 | 
						position: absolute; | 
			
		||||
 | 
						top: 32rpx; | 
			
		||||
 | 
						right: 32rpx; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-image { | 
			
		||||
 | 
						width: 100%; | 
			
		||||
 | 
						border-radius: 4px; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-title { | 
			
		||||
 | 
						font-size: 28rpx; | 
			
		||||
 | 
						font-weight: bold; | 
			
		||||
 | 
						color: $u-main-color; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-label{ | 
			
		||||
 | 
						position: absolute; | 
			
		||||
 | 
						bottom: 0; | 
			
		||||
 | 
						right: 0; | 
			
		||||
 | 
						background-color: rgba(0,0,0,0.5); | 
			
		||||
 | 
						width: 140rpx; | 
			
		||||
 | 
						height: 48rpx; | 
			
		||||
 | 
						border-radius: 20rpx 0rpx 0rpx 0rpx; | 
			
		||||
 | 
						font-size: 22rpx; | 
			
		||||
 | 
						color: #FFFFFF; | 
			
		||||
 | 
						line-height: 48rpx; | 
			
		||||
 | 
						text-align: center; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-tag { | 
			
		||||
 | 
						display: flex; | 
			
		||||
 | 
						margin-top: 5px; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-tag-owner { | 
			
		||||
 | 
						background-color: $u-type-error; | 
			
		||||
 | 
						color: #FFFFFF; | 
			
		||||
 | 
						display: flex; | 
			
		||||
 | 
						align-items: center; | 
			
		||||
 | 
						padding: 4rpx 14rpx; | 
			
		||||
 | 
						border-radius: 50rpx; | 
			
		||||
 | 
						font-size: 20rpx; | 
			
		||||
 | 
						line-height: 1; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-tag-text { | 
			
		||||
 | 
						border: 1px solid $u-type-primary; | 
			
		||||
 | 
						color: $u-type-primary; | 
			
		||||
 | 
						margin-left: 10px; | 
			
		||||
 | 
						border-radius: 50rpx; | 
			
		||||
 | 
						line-height: 1; | 
			
		||||
 | 
						padding: 4rpx 14rpx; | 
			
		||||
 | 
						display: flex; | 
			
		||||
 | 
						align-items: center; | 
			
		||||
 | 
						border-radius: 50rpx; | 
			
		||||
 | 
						font-size: 20rpx; | 
			
		||||
 | 
					} | 
			
		||||
 | 
					 | 
			
		||||
 | 
					.list-price { | 
			
		||||
 | 
						font-size: 30rpx; | 
			
		||||
 | 
						color: $u-type-error; | 
			
		||||
 | 
						margin-top: 5px; | 
			
		||||
 | 
						display: flex; | 
			
		||||
 | 
						align-items: center; | 
			
		||||
 | 
					} | 
			
		||||
 | 
				</style> | 
			
		||||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue