Aida_Purchaser_Front/src/views/collectionStory/detail/index.vue

<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";
import joinUs from "./join-us.vue";
import CommodityItem from "@/components/CommodityItem.vue";
//const props = defineProps({
//})
const emit = defineEmits([
	'addShopping'
])
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",
	},
])
const addShopping = (item) => {
	emit('addShopping', item)
}
const openCodeCreate = () => {
	window.open('https://code-create.com.hk/', '_blank')
}

onMounted(()=>{
})
onUnmounted(()=>{
}) 
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="detail">
		<div class="left">
			<div class="personal">
				<img src="@/assets/images/collectionStory/code-create.png" alt="">
				<div class="name">
					<span>Code-Create</span>
					<div class="icon" @click="openCodeCreate">
						<SvgIcon name="share" size="24" />
					</div>
				</div>
			</div>
		</div>
		<div class="center">
			<joinUs></joinUs>
			<!-- <coreConcept ></coreConcept>
			<div class="line"></div>
			<inspiration ></inspiration>
			<div class="line"></div>
			<feelingWithAiDA ></feelingWithAiDA> -->
		</div>
		<div class="right">
			<div class="item" v-for="item in list" :key="item.url">
				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.detail{
		width: 100%;
		position: relative;
		display: flex;
		height: calc(100vh - var(--header-height) - var(--footer-height));
		align-items: flex-start;
		overflow: hidden;
		> div{
			// height: 100%;
		}
		> .left{
			width: 23rem;
			padding-top: 6.3rem;
			padding-left: 3rem;
			position: sticky;
			top: 0;
			> .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;
					> .icon{
						cursor: pointer;
					}
					> 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;
			overflow: hidden;
			height: 100%;
			// height: auto;
			position: relative;
			.line{
				border: 0.5px solid #58585899;
				width: 100%;
			}
			&::-webkit-scrollbar{
				display: none;
			}
		}
		> .right{
			width: 25.4rem;
			padding-top: 6rem;
			// position: sticky;
			top: 0;
			// height: calc(100vh - var(--header-height));
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4rem;
			overflow-y: auto;
			height: 100%;
			&::-webkit-scrollbar{
				display: none;
			}
			> .item{
				margin-bottom: 2.3rem;
				width: 20rem;
			}
		}
	}
</style>