<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png";
import coreConcept from "./coreConcept.vue";
import inspiration from "./inspiration.vue";
import feelingWithAiDA from "./feelingWithAiDA.vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
const list = ref([
	{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},
])
onMounted(()=>{
})
onUnmounted(()=>{
}) 
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="detail">
		<div class="left">
			<div class="personal">
				<img :src="img" alt="">
				<div class="name">
					<span>Lian Su</span>
					<div class="icon">
						<SvgIcon name="share" size="24" />
					</div>
				</div>
			</div>
		</div>
		<div class="center">
			<coreConcept ></coreConcept>
			<div class="line"></div>
			<inspiration ></inspiration>
			<div class="line"></div>
			<feelingWithAiDA ></feelingWithAiDA>
		</div>
		<div class="right">
			
		</div>
	</div>
</template>
<style lang="less" scoped>
	.detail{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		> div{
			height: 100%;
		}
		> .left{
			width: 23rem;
			padding-top: 6.3rem;
			padding-left: 3rem;
			> .personal{
				display: flex;
				flex-direction: column;
				> img{
					width: 10rem;
					height: 10rem;
					object-fit: cover;
					margin-bottom: 1.1rem;
				}
				> .name{
					display: flex;
					gap: .4rem;
					align-items: center;
					> span{
						font-family: 'KaiseiOpti-Bold';
						font-weight: 700;
						font-size: 1.8rem;
						line-height: 100%;
						vertical-align: bottom;
					}
				}
			}
			
		}
		> .center{
			flex: 1;
			border-left: 0.5px solid #585858;
			border-right: 0.5px solid #585858;
			overflow-y: auto;
			height: 100%;
			.line{
				border: 0.5px solid #58585899;
				width: 100%;
			}
			&::-webkit-scrollbar{
				display: none;
			}
		}
		> .right{
			width: 25.4rem;
			padding-top: 6rem;
		}
	}
</style>