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