60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
||
<section class="section-index bgw">
|
||
<img src="@/assets/images/home/bg.png" class="bg" />
|
||
<div class="content">
|
||
<div class="title" v-html="title"></div>
|
||
<div class="tip">
|
||
Discover collections through the stories behind their creation. A curated space connecting
|
||
designers, narratives, and fashion commerce.
|
||
</div>
|
||
<button custom="black-box" @click="handleClickArrow">
|
||
<svg-icon name="arrow_right" size="34" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter()
|
||
const title =
|
||
'We’re Seeking<br /><span>Fashion Voice</span><br /><span class="small">Worth Featuring.</span>'
|
||
const handleClickArrow = () => {
|
||
router.push({ name: 'collectionStory' })
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.section-index {
|
||
> .content {
|
||
top: 13.7rem;
|
||
left: 9rem;
|
||
color: #232323;
|
||
> .title {
|
||
font-family: KaiseiOpti-Bold;
|
||
font-size: 7rem;
|
||
margin-bottom: 3rem;
|
||
span {
|
||
font-family: KaiseiOpti-Medium;
|
||
&.small {
|
||
font-size: 6rem;
|
||
}
|
||
}
|
||
}
|
||
> .tip {
|
||
width: 50rem;
|
||
font-size: 1.8rem;
|
||
line-height: 2.6rem;
|
||
color: #585858;
|
||
}
|
||
> button {
|
||
margin-top: 12rem;
|
||
min-width: 0;
|
||
width: 8rem;
|
||
height: 8rem;
|
||
}
|
||
}
|
||
}
|
||
</style>
|