fix
This commit is contained in:
X1627315083@163.com
216
src/views/SellerDashboard/MyListings/main/contentItem.vue
Normal file
216
src/views/SellerDashboard/MyListings/main/contentItem.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
domSize: {
|
||||
type: String,
|
||||
default: 'Small'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'listings'
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="item" :draging="true" :class="domSize">
|
||||
<div class="imgBox">
|
||||
<img src="" alt="">
|
||||
<div class="maskBtn">
|
||||
<div>
|
||||
<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Edit</div>
|
||||
</div>
|
||||
<div v-if="type == 'listings'">
|
||||
<svgIcon name="seller-draft" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Draft</div>
|
||||
</div>
|
||||
<div v-else-if="type == 'drafts'">
|
||||
<svgIcon name="seller-share" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Publish</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="left">
|
||||
<div class="name">item name</div>
|
||||
<div class="price">$1123</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="shopping1">
|
||||
<i class="fi fi-rr-shopping-bag-add"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
</div>
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="eye1">
|
||||
<i class="fi fi-rs-eye"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
</div>
|
||||
<div class="detailItem drafts" v-if="type == 'drafts'">
|
||||
<div class="">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.item{
|
||||
// height: 30.2rem;
|
||||
&.Small{
|
||||
--itemWidth: 19.7rem;
|
||||
--itemImgHeight: 24.9rem;
|
||||
--maskBtnGap: .8rem;
|
||||
--maskBtnWidth: 6rem;
|
||||
--maskBtnFS: 1.6rem;
|
||||
--detailPadding: .8rem 1.2rem;
|
||||
--detailLeftNameSize: 1.4rem;
|
||||
--detailLeftPriceSize: 1.2rem;
|
||||
--detailRightGap: .8rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 1.6rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
&.Medium{
|
||||
--itemWidth: 25.4rem;
|
||||
--itemImgHeight: 32.2rem;
|
||||
--maskBtnGap: 1rem;
|
||||
--maskBtnWidth: 7.6rem;
|
||||
--maskBtnFS: 2.07rem;
|
||||
--detailPadding: 1.2rem 1.4rem;
|
||||
--detailLeftNameSize: 1.6rem;
|
||||
--detailLeftPriceSize: 1.4rem;
|
||||
--detailRightGap: 1rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 2rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
&.Large{
|
||||
--itemWidth: 31.4rem;
|
||||
--itemImgHeight: 39.8rem;
|
||||
--maskBtnGap: 1.2rem;
|
||||
--maskBtnWidth: 7.6rem;
|
||||
--maskBtnFS: 2.56rem;
|
||||
--detailPadding: 1.2rem 1.6rem;
|
||||
--detailLeftNameSize: 1.98rem;
|
||||
--detailLeftPriceSize: 1.73rem;
|
||||
--detailRightGap: 1.2rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 2.6rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
width: var(--itemWidth);
|
||||
border-radius: 2rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
overflow: hidden;
|
||||
.imgBox{
|
||||
position: relative;
|
||||
height: var(--itemImgHeight);
|
||||
width: 100%;
|
||||
> .maskBtn{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #00000066;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--maskBtnGap);
|
||||
> div{
|
||||
font-family: pingfang_bold;
|
||||
font-weight: 400;
|
||||
font-size: var(--maskBtnFS);
|
||||
line-height: 150%;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: var(--maskBtnWidth);
|
||||
text-align: center;
|
||||
> div{
|
||||
margin-top: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
padding: var(--detailPadding);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
--rightColor: #979797;
|
||||
.left{
|
||||
gap: var(--detailRightItemGap);
|
||||
.name{
|
||||
font-weight: 500;
|
||||
font-size: var(--detailLeftNameSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
.price{
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: var(--detailLeftPriceSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
gap: var(--detailRightGap);
|
||||
.detailItem{
|
||||
display: flex;
|
||||
gap: var(--detailRightItemGap);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
> div{
|
||||
color: var(--rightColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> i{
|
||||
font-size: var(--detailRightItemIcon);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
> span{
|
||||
color: var(--rightColor);
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: var(--detailLeftPriceSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
&.drafts{
|
||||
justify-content: center;
|
||||
> div{
|
||||
> i{
|
||||
font-size: var(--detailRightItemDraftsIcon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000000;
|
||||
.imgBox{
|
||||
> .maskBtn{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
--rightColor: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user