Aida_Purchaser_Front/src/views/collectionStory/index.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import Detail from "./detail/index.vue";
import myEvent from '@/utils/myEvent'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
const addShopping = (item) => {	
	myEvent.emit('addShopping', item)
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="collectionStory">
		<div class="first-screen">
			<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
			<div class="back">
				<SvgIcon name="collectionStory-back" size="20" />
				<div class="text">Back to Home</div>
			</div>
			<div class="title-content">
				<div class="title-box">
					<div class="title">
						We’re Seeking 
					</div>
					<div class="info">
						Fashion Voice Worth Featuring.
					</div>
				</div>
				<div class="button">
					<a href="mailto:info@code-create.com.hk">Contact Us if Interested</a>
				</div>
			</div>
		</div>
		<div class="content">
			<Detail @addShopping="addShopping"></Detail>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	.collectionStory{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.first-screen{
			position: relative;
			height: auto;
			display: flex;
			overflow: hidden;
			> .back{
				position: absolute;
				top: 2.4rem;
				left: 2.4rem;
				display: flex;
				align-items: center;
				gap: .8rem;
				color: #000;
				cursor: pointer;
				> .text{
					font-size: 2rem;
					font-weight: 500;
					white-space: nowrap;
				}
			}
			> .title-content{
				width: 100%;
				position: absolute;
				padding: 0 6.7rem;
				margin-top: 11.5rem;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				> .title-box{
					display: flex;
					flex-direction: column;
					> .title{
						font-size: 6.5rem;
						line-height: 100%;
						font-weight: 500;
						color: #585858;
					}
					> .info{
						font-size: 3rem;
						font-weight: 500;
						line-height: 100%;
						color: #585858;
					}
				}	
				> .button{
					padding: 0 4.5rem;
					line-height: 5.1rem;
					background-color: #1B1B1B;
					color: #fff;
					margin-top: 4rem;
					font-weight: 700;
					font-size: 2rem;
					letter-spacing: -0.4px;
					cursor: pointer;
					> a{
						color: #fff;
						text-decoration: none;
					}
				}
			}
			.banner{
				width: 100%;
				z-index: -1;
			}
		}
		.content{
			width: 100%;
			// min-height: 100%;
			// height: 100%;
		}
		
	}
</style>