78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<nuxt-link
|
|
class="shop-item flex-col row-right"
|
|
:style="{
|
|
'background-image': `url(${cover})`,
|
|
}"
|
|
:to="`/shop_street_detail?id=${shopId}`"
|
|
>
|
|
<div class="bg-white shop-info text-center">
|
|
<el-image class="logo" :src="logo"></el-image>
|
|
<div class="m-t-12 line-1 lg">
|
|
<el-tag size="mini" v-if="type == 1">自营</el-tag> {{ name }}
|
|
</div>
|
|
<span class="xs muted sales"
|
|
>共{{ sales }}件商品</span
|
|
>
|
|
</div>
|
|
</nuxt-link>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
cover: {
|
|
type: String,
|
|
},
|
|
shopId: {
|
|
type: [String, Number],
|
|
},
|
|
logo: {
|
|
type: String,
|
|
},
|
|
type: {
|
|
type: [String, Number],
|
|
},
|
|
name: {
|
|
type: String,
|
|
},
|
|
sales: {
|
|
type: [String, Number],
|
|
}
|
|
},
|
|
methods: {},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shop-item {
|
|
width: 270px;
|
|
height: 400px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
|
|
.shop-info {
|
|
border-radius: 6px;
|
|
padding: 18px 15px;
|
|
.logo {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 16px;
|
|
margin-top: -45px;
|
|
}
|
|
.sales {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
background-color: #f2f2f2;
|
|
margin-top: 6px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|