127 lines
2.5 KiB
Vue
127 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
const props = defineProps({
|
|
item:{
|
|
type:Object,
|
|
default:()=>{},
|
|
},
|
|
})
|
|
const emit = defineEmits([
|
|
'viewProfile',
|
|
])
|
|
const viewProfile = (item) => {
|
|
emit('viewProfile', item)
|
|
}
|
|
let data = reactive({
|
|
})
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="item">
|
|
<div class="left">
|
|
<div class="portrait">
|
|
<img :src="item.avatar" alt="">
|
|
</div>
|
|
<div class="info">
|
|
<div class="name">{{ item.shopName }}</div>
|
|
<div class="collection">
|
|
{{ item.ownerName }} |
|
|
{{ item?.listingTotal || 0 }} Collections
|
|
</div>
|
|
<div class="view-profile" @click="viewProfile(item)">View Profile</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="img-list">
|
|
<div class="img-item" v-for="itemImg in item?.covers" :key="itemImg">
|
|
<img :src="itemImg" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="more">
|
|
<div class="icon" v-show="item?.covers?.length == 5">
|
|
<svgIcon name="brand-more" size="24" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.item{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 14rem;
|
|
justify-content: space-between;
|
|
border-bottom: 0.5px solid #C4C4C4;
|
|
> .left{
|
|
display: flex;
|
|
.portrait{
|
|
width: 8rem;
|
|
height: 8rem;
|
|
margin-right: 2.4rem;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
.info{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
> .name{
|
|
font-family: "KaiseiOpti-Bold";
|
|
font-weight: 700;
|
|
font-size: 2rem;
|
|
line-height: 100%;
|
|
}
|
|
> .collection{
|
|
color: #7B7B7B;
|
|
font-family: "KaiseiOpti-Regular";
|
|
font-weight: 400;
|
|
font-size: 1.2rem;
|
|
line-height: 2.3rem;
|
|
margin-top: .4rem;
|
|
}
|
|
> .view-profile{
|
|
margin-top: 2.4rem;
|
|
border-bottom: 2px solid #585858;
|
|
background: #F9F9F9;
|
|
font-family: "KaiseiOpti-Regular";
|
|
font-weight: 400;
|
|
font-size: 1.4rem;
|
|
letter-spacing: -0.4px;
|
|
line-height: 3.4rem;
|
|
padding: 0 2.55rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
> .right{
|
|
display: flex;
|
|
> .img-list{
|
|
display: flex;
|
|
gap: 3.2rem;
|
|
> .img-item{
|
|
width: 9.2rem;
|
|
height: 12rem;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
> .more{
|
|
width: 8rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |