aida_front/src/views/SellerDashboard/MyListings/main/contentItem.vue

<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'
	},
	item: {
		type: Object,
		default: () => ({})
	}
})
const emit = defineEmits([
	'deleteDraft',
	'editListing',
	'draftListing',
	'publishListing'
])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="item" :draging="true" :class="domSize">
		<div class="imgBox">
			<img :src="item.cover" alt="">
			<div class="maskBtn">
				<div @click="$emit('editListing',item)">
					<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
					<div>{{ $t('Seller.Edit') }}</div>
				</div>
				<div v-if="type == 'listings'" @click="$emit('draftListing',item)">
					<svgIcon name="seller-draft" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
					<div>{{ $t('Seller.Draft') }}</div>
				</div>
				<div v-else-if="type == 'drafts'" @click="$emit('publishListing',item)">
					<svgIcon name="seller-share" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
					<div>{{ $t('Seller.Publish') }}</div>
				</div>
			</div>
		</div>
		<div class="detail">
			<div class="left">
				<div class="name">{{item.title}}</div>
				<div class="price">${{item.price}}</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>{{ item.salesVolume || 0 }}</span>
				</div>
				<div class="detailItem" v-if="type == 'listings'">
					<div class="eye1">
						<i class="fi fi-rs-eye"></i>
					</div>
					<span>{{ item.viewCount }}</span>
				</div>
				<div class="detailItem drafts" v-if="type == 'drafts'" @click="$emit('deleteDraft',item)">
					<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%;
			> img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				background-color: #fff;
			}
			> .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;
					align-items: center;
					> 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;
						cursor: pointer;
						> div{
							> i{
								font-size: var(--detailRightItemDraftsIcon);
							}
						}
					}
				}
			}
		}
		&:hover{
			border: 1.5px solid #000000;
			.imgBox{
				> .maskBtn{
					opacity: 1;
				}
			}
			.detail{
				--rightColor: #000000;
			}
		}
	}
</style>