74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<view class="shop-item" :style="{'background-image': `url(${item.background})`}">
|
|
<view class="shop-hd flex row-between m-l-20">
|
|
<view>
|
|
<view class="flex">
|
|
<u-image width="68rpx" height="68rpx" border-radius="60rpx" :src="item.logo" />
|
|
<view class="white md m-l-20 bold">{{item.name}}</view>
|
|
</view>
|
|
<router-link :to="{path: '/pages/store_index/store_index', query: {id: item.id} }">
|
|
<view class="enter-btn flex row-center bg-white xxs">
|
|
进店看看 >
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
<view class="shop-tips white flex row-center xxs">
|
|
{{item.visited_num}}人进店
|
|
</view>
|
|
</view>
|
|
<scroll-view style="white-space: nowrap;" :scroll-x="true">
|
|
<view class="goods">
|
|
<goods-list type="row" :list="item.goods_list"></goods-list>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "shop-item",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
defalut: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shop-item {
|
|
padding-top: 30rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
.shop-hd {
|
|
.enter-btn {
|
|
height: 48rpx;
|
|
width: 148rpx;
|
|
margin-top: 30rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
.shop-tips {
|
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
|
border-radius: 50rpx 0rpx 0rpx 50rpx;
|
|
height: 50rpx;
|
|
min-width: 152rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
.goods {
|
|
padding: 20rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style>
|