<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="merchantInfo">
		<div class="profile">
			<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
		</div>
		<div class="info">
			<div class="detail">
				<div class="name">Lian Su</div>
				<div class="title">Roaming Clouds</div>
			</div>
			<div class="contact">
				<div class="title">Contact</div>
				<div class="email label">
					<div class="icon">
						<svg-icon name="brand-email" size="24" />
					</div>
					<div>lian.su@urieworweoo.com</div>
				</div>
				<div class="phone label">
					<div class="icon">
						<svg-icon name="brand-call" size="24" />
					</div>
					<div>+86 139 4829 7710</div>
				</div>
				<div class="address label">
					<div class="icon">
						<svg-icon name="brand-link" size="24" />
					</div>
					<div>746312432</div>
				</div>
				<div class="website label">
					<div class="icon">
						<svg-icon name="brand-link" size="24" />
					</div>
					<div>https://urieworweoo.com</div>
				</div>
			</div>
			<div class="about">
				<div class="title">About</div>
				<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.merchantInfo{
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 4rem;
		padding-bottom: 4rem;
		.profile{
			width: 20rem;
			height: 20rem;
			margin-left: 1.8rem;
			>img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.info{
			display: flex;
			flex-direction: column;
			gap: 6rem;
			margin-top: 4rem;
			.title{
				font-family: "KaiseiOpti-Bold";
				font-weight: 700;
				font-size: 3.4rem;
				line-height: 3.6rem;
			}
			> .detail{
				.name{
					margin-bottom: .8rem;
					font-weight: 500;
					font-size: 1.8rem;
					line-height: 100%;
					color: #232323;
				}
			}
			> .contact{
				.title{
					margin-bottom: 2rem;
				}
				.label{
					display: flex;
					gap: 2rem;
					margin-bottom: .6rem;
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.4rem;
					line-height: 100%;
					color: #585858;
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
			> .about{
				.title{
					margin-bottom: 2rem;
				}
				.content{
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 2.3rem;
					color: #585858;
				}
			}
		}
	}
</style>