home修改
This commit is contained in:
李志鹏
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home-index">
|
||||
<section-index />
|
||||
<section-designers />
|
||||
<section-designer />
|
||||
<section-design />
|
||||
<section-digital-items1 />
|
||||
<section-digital-items2 />
|
||||
@@ -12,7 +12,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import SectionIndex from './section-index.vue'
|
||||
import SectionDesigners from './section-designers.vue'
|
||||
import SectionDesigner from './section-designer.vue'
|
||||
import SectionDesign from './section-design.vue'
|
||||
import SectionDigitalItems1 from './section-digital-items1.vue'
|
||||
import SectionDigitalItems2 from './section-digital-items2.vue'
|
||||
|
||||
51
src/views/home/section-designer.vue
Normal file
51
src/views/home/section-designer.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section class="section-designer">
|
||||
<div class="title">Designer Community</div>
|
||||
<div class="tip">
|
||||
Discover the designers shaping AiDA’s creative landscape. <br />
|
||||
Each month, we will showcase a curated selection of their most distinguished works.
|
||||
</div>
|
||||
<button custom="black" @click="onSearchBrand">Search Brands</button>
|
||||
<img src="@/assets/images/home/designer-bg.png" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const onSearchBrand = () => {
|
||||
router.push({ name: 'brand' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.section-designer {
|
||||
padding: 9rem 8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 5.6rem;
|
||||
line-height: 6.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
text-align: center;
|
||||
color: #979797;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> button {
|
||||
margin-bottom: 4.6rem;
|
||||
}
|
||||
> img {
|
||||
width: 73%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<section class="section-designers">
|
||||
<div class="title">Popular Designers</div>
|
||||
<div class="tip">
|
||||
Discover the designers shaping AiDA’s creative landscape,<br />as we present their most
|
||||
distinguished works each month.
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="@/assets/images/home/designers-left.jpg" />
|
||||
<div class="box">
|
||||
<div class="intro">
|
||||
<span>{{ list[index]?.intro || '' }}</span>
|
||||
<img src="@/assets/images/home/designers-right.jpg" />
|
||||
</div>
|
||||
<div
|
||||
class="name-item"
|
||||
v-for="(v, i) in list"
|
||||
:key="i"
|
||||
:class="{ active: i === index }"
|
||||
@click="index = i"
|
||||
>
|
||||
<span class="name">{{ v.name }}</span>
|
||||
<span class="icon">
|
||||
<svg-icon name="arrow_right" size="20" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
const index = ref(0)
|
||||
const list = ref([
|
||||
{
|
||||
name: 'Ji-Yeon Park',
|
||||
intro:
|
||||
'Through its fragile tulle layers over a grounded silhouette, the garment reflects the tension between vulnerability and strength within one’s journey.'
|
||||
},
|
||||
{
|
||||
name: 'Lian Su',
|
||||
intro: '阿巴阿巴~'
|
||||
},
|
||||
{
|
||||
name: 'Céline Moreau',
|
||||
intro: '这是Céline Moreau的设计~'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.section-designers {
|
||||
padding: 9rem 8rem;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 5.6rem;
|
||||
line-height: 6.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
text-align: center;
|
||||
color: #979797;
|
||||
}
|
||||
> .content {
|
||||
margin-top: 5rem;
|
||||
border: 0.1rem solid #979797;
|
||||
border-left: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
box-sizing: content-box;
|
||||
--height: 45rem;
|
||||
min-height: var(--height);
|
||||
display: flex;
|
||||
> img {
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
margin: 2.4rem 2.4rem 2.4rem 0;
|
||||
}
|
||||
> .box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .intro {
|
||||
display: flex;
|
||||
margin: 2rem 2rem 2rem 0;
|
||||
> span {
|
||||
flex: 1;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
margin-right: 9rem;
|
||||
}
|
||||
> img {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
}
|
||||
}
|
||||
> .name-item {
|
||||
flex: 1;
|
||||
min-height: 5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 0.1rem solid #7b7b7b;
|
||||
padding: 0 2.1rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2.4rem;
|
||||
color: #7b7b7b;
|
||||
> .icon {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&.active {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
color: #232323;
|
||||
background: #f6f6f6;
|
||||
> .icon {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +1,58 @@
|
||||
<template>
|
||||
<section class="section-index bgw">
|
||||
<img src="@/assets/images/home/bg.jpg" class="bg" />
|
||||
<div class="shade-1"></div>
|
||||
<div class="shade-2"></div>
|
||||
<img src="@/assets/images/home/bg.png" class="bg" />
|
||||
<div class="content">
|
||||
<div class="title">Windswept Burden</div>
|
||||
<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
|
||||
<button custom>View More</button>
|
||||
<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
|
||||
<p class="tip">
|
||||
What you wear is how you present yourself to the world, especially today, when human
|
||||
contacts are so quick. Fashion is instant language
|
||||
</p>
|
||||
<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
|
||||
<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 {
|
||||
> .shade-1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 96rem;
|
||||
height: 100%;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
|
||||
}
|
||||
> .shade-2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
|
||||
}
|
||||
> .content {
|
||||
top: 16rem;
|
||||
top: 13.7rem;
|
||||
left: 9rem;
|
||||
color: #fff;
|
||||
color: #232323;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 6rem;
|
||||
font-size: 7rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
> div.tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 3.2rem;
|
||||
line-height: 4.3rem;
|
||||
}
|
||||
> button {
|
||||
margin-top: 11.6rem;
|
||||
margin-bottom: 13.9rem;
|
||||
}
|
||||
> .aida-logo {
|
||||
margin-bottom: 3rem;
|
||||
> img {
|
||||
width: auto;
|
||||
height: 5rem;
|
||||
span {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
&.small {
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> p.tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
color: #ededed;
|
||||
> .tip {
|
||||
width: 50rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.6rem;
|
||||
color: #585858;
|
||||
}
|
||||
> button {
|
||||
margin-top: 12rem;
|
||||
min-width: 0;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user