aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
李志鹏
2026-04-20 17:04:57 +08:00
parent 1988d44c8d
commit 8330c62272
24 changed files with 565 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/home/index.vue
View File

@@ -1,18 +1,22 @@
<template>
<div class="home-index">
<section class="index">
<img src="@/assets/images/home-bg.jpg" class="bg" />
</section>
<section class="designers"></section>
<section class="design"></section>
<section class="digital-items"></section>
<section class="digital-items"></section>
<section class="footer"></section>
<section-index />
<section-designers />
<section-design />
<section-digital-items1 />
<section-digital-items2 />
<section-footer />
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import SectionIndex from './section-index.vue'
import SectionDesigners from './section-designers.vue'
import SectionDesign from './section-design.vue'
import SectionDigitalItems1 from './section-digital-items1.vue'
import SectionDigitalItems2 from './section-digital-items2.vue'
import SectionFooter from './section-footer.vue'
</script>
<style lang="less">
@@ -22,14 +26,18 @@
overflow: hidden;
overflow-y: auto;
> section {
position: relative;
width: 100%;
height: auto;
}
> section.index {
> section.bgw {
position: relative;
> .bg {
width: 100%;
height: auto;
display: block;
}
> .content {
position: absolute;
}
}
}

49
src/views/home/section-design.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<section class="section-design bgw">
<img src="@/assets/images/home/design-bg.jpg" class="bg" />
<div class="content">
<div class="aida-logo"><img src="@/assets/images/aida-logo.png" /></div>
<div class="title">Design with AiDA</div>
<div class="tip">
Each garment on this platform is where designer vision blooms through AiDA. A tool that
nurtures your creativity, never overshadows it. Let your ideas flourish.
</div>
<button custom>Try Now</button>
</div>
</section>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
</script>
<style lang="less">
.section-design {
> .content {
width: 55rem;
top: 12rem;
left: 9rem;
> .aida-logo {
margin-bottom: 6rem;
> img {
width: auto;
height: 6.9rem;
}
}
> .title {
font-family: KaiseiOpti-Bold;
font-size: 5.6rem;
line-height: 6.2rem;
margin-bottom: 2rem;
color: #fff;
}
> .tip {
font-family: KaiseiOpti-Regular;
font-size: 2rem;
line-height: 2.8rem;
color: #fff;
margin-bottom: 10rem;
}
}
}
</style>

130
src/views/home/section-designers.vue Normal file
View File

@@ -0,0 +1,130 @@
<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>

101
src/views/home/section-digital-items1.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<section class="digital-items1 bgw">
<img src="@/assets/images/home/digital-items-1.jpg" class="bg" />
<div class="content">
<div class="title">Digital Items</div>
<div class="tip">
AiDA captures your boldest thoughts and transforms them into vivid
<br />
digital visions—a virtual realm where creativity collides and evolves.
</div>
<button custom="black">Shop All</button>
<div class="list">
<div v-for="v in list" :key="v.url">
<img :src="v.url" alt="" />
<div class="title">{{ v.title }}</div>
<div class="tip">{{ v.tip }}</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const list = ref([
{
title: 'Women’s Itemk',
tip: 'Blue Pleat Aria',
url: 'http://118.31.39.42:3000/falls/digital-items-1.png'
},
{
title: 'Girls’ Item',
tip: 'Candy Riot',
url: 'http://118.31.39.42:3000/falls/digital-items-2.jpg'
},
{
title: 'Men’s Item',
tip: 'Void Armour',
url: 'http://118.31.39.42:3000/falls/digital-items-3.png'
},
{
title: 'Boys’ Item',
tip: 'Jester Edit',
url: 'http://118.31.39.42:3000/falls/digital-items-4.png'
}
])
</script>
<style lang="less">
.digital-items1 {
> .content {
top: 8rem;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
> .title {
font-family: KaiseiOpti-Bold;
font-size: 5.6rem;
line-height: 6.2rem;
margin-bottom: 2rem;
}
> .tip {
font-family: KaiseiOpti-Regular;
font-size: 2rem;
line-height: 2.8rem;
margin-bottom: 2rem;
color: #585858;
text-align: center;
}
> .list {
margin-top: 6rem;
display: flex;
gap: 2.4rem;
> div {
padding: 1rem;
border: 0.1rem solid #979797;
> img {
width: 27.4rem;
height: 34.6rem;
margin-bottom: 1.2rem;
}
> .title {
font-family: KaiseiOpti-Regular;
font-size: 1.8rem;
line-height: 2.2rem;
color: #232323;
margin-bottom: 0.6rem;
}
> .tip {
font-family: KaiseiOpti-Regular;
font-size: 1.2rem;
line-height: 2.2rem;
color: #979797;
}
}
}
}
}
</style>

94
src/views/home/section-digital-items2.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<section class="digital-items2 bgw">
<img src="@/assets/images/home/digital-items-1.jpg" class="bg" />
<div class="content">
<div class="tip">
AiDA accelerates style innovation, shaping daily pieces that keep
<br />
your wardrobe in sync with modern fashion’s rhythm.
</div>
<div class="list">
<div v-for="v in list" :key="v.url">
<img :src="v.url" alt="" />
<div class="title">{{ v.title }}</div>
<div class="tip">{{ v.tip }}</div>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const list = ref([
{
title: 'Women’s Itemk',
tip: 'Blue Pleat Aria',
url: 'http://118.31.39.42:3000/falls/digital-items-1.png'
},
{
title: 'Girls’ Item',
tip: 'Candy Riot',
url: 'http://118.31.39.42:3000/falls/digital-items-2.jpg'
},
{
title: 'Men’s Item',
tip: 'Void Armour',
url: 'http://118.31.39.42:3000/falls/digital-items-3.png'
},
{
title: 'Boys’ Item',
tip: 'Jester Edit',
url: 'http://118.31.39.42:3000/falls/digital-items-4.png'
}
])
</script>
<style lang="less">
.digital-items2 {
> .content {
top: 8rem;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
> .tip {
font-family: KaiseiOpti-Regular;
font-size: 2rem;
line-height: 2.8rem;
margin-bottom: 2rem;
color: #585858;
text-align: center;
}
> .list {
margin-top: 6rem;
display: flex;
gap: 2.4rem;
> div {
padding: 1rem;
border: 0.1rem solid #979797;
> img {
width: 27.4rem;
height: 34.6rem;
margin-bottom: 1.2rem;
}
> .title {
font-family: KaiseiOpti-Regular;
font-size: 1.8rem;
line-height: 2.2rem;
color: #232323;
margin-bottom: 0.6rem;
}
> .tip {
font-family: KaiseiOpti-Regular;
font-size: 1.2rem;
line-height: 2.2rem;
color: #979797;
}
}
}
}
}
</style>

14
src/views/home/section-footer.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<section class="section-footer"></section>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
</script>
<style lang="less">
.section-footer {
background-color: #f6f6f6;
border-top: 0.1rem solid #232323;
}
</style>

75
src/views/home/section-index.vue Normal file
View File

@@ -0,0 +1,75 @@
<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>
<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/aida-logo.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>
</section>
</template>
<script setup lang="ts">
import { computed } from 'vue'
</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;
left: 9rem;
color: #fff;
> .title {
font-family: KaiseiOpti-Bold;
font-size: 6rem;
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;
}
}
> p.tip {
font-family: KaiseiOpti-Regular;
font-size: 1.2rem;
line-height: 2rem;
color: #ededed;
}
}
}
</style>