<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import CommodityList from "./commodity-list.vue";
import MerchantInfo from "./merchant-info.vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
const addShopping = (item) => {}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="digitalItem">
		<div class="header-img">
			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
			<div class="text">
				<div class="title">Digital Item</div>
				<p class="info">Virtual fashion creations collected in your personal archive</p>
			</div>
		</div>
		<div class="content">
			<div class="merchant-info">
				<MerchantInfo></MerchantInfo>
			</div>
			<div class="commodity-list">
				<CommodityList @addShopping="addShopping"></CommodityList>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	.digitalItem{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.header-img{
			width: 100%;
			position: relative;
			>img{
				width: 100%;
			}
			> .text{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				> .title{
					font-family: KaiseiOpti-Bold;
					color: #232323;
					font-weight: 700;
					font-size: 4rem;
					line-height: 2.3rem;
					letter-spacing: 0%;
					text-align: center;
				}
				> .info{
					font-family: KaiseiOpti-Regular;
					color: #585858;
					font-size: 1.6rem;
					line-height: 140%;
					margin-top: 1.2rem;
					text-align: center;
				}
			}
		}
		.content{
			display: flex;
			height: auto;
			align-items: flex-start;
			border-top: 0.5px solid #585858;
			margin-top: 6rem;
			.merchant-info{
				width: 38.5rem;
				padding-left: 10.2rem;
				height: var(--app-view-height);
				overflow-y: auto;
				position: sticky;
				top: 0;
				&::-webkit-scrollbar{
					width: 0;
					height: 0;
				}
			}
			.commodity-list{
				flex: 1;
				border-left: 0.5px solid #585858;
				border-right: 0.5px solid #585858;
				margin-right: 9rem;
			}
		}
	}
</style>