Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front
This commit is contained in:
李志鹏
169
src/views/brand/commodity-list.vue
Normal file
169
src/views/brand/commodity-list.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
//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",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
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 type = ref('All')
|
||||
const addShopping = (item) => {
|
||||
emit('addShopping', item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="commodityList">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
Items
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div :class="{'active': type === 'All'}" @click="type = 'All'">All</div>
|
||||
<div :class="{'active': type === 'Male'}" @click="type = 'Male'">Male</div>
|
||||
<div :class="{'active': type === 'Female'}" @click="type = 'Female'">Female</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<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>
|
||||
.commodityList{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
.title{
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 3.6rem;
|
||||
line-height: 6rem;
|
||||
color: #121212;
|
||||
padding: 4rem 0 3.6rem 1.2rem;
|
||||
}
|
||||
.menu{
|
||||
padding: 0 1.2rem;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 6rem;
|
||||
> div{
|
||||
min-width: 6rem;
|
||||
text-align: center;
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 1.98rem;
|
||||
line-height: 100%;
|
||||
position: relative;
|
||||
color: #7B7B7B;
|
||||
cursor: pointer;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #232323;
|
||||
display: none;
|
||||
}
|
||||
&.active{
|
||||
color: #232323;
|
||||
&::after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
border-top: 0.5px solid #585858;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
overflow-y: auto;
|
||||
/* 垂直线（右边框） */
|
||||
.item{
|
||||
position: relative;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
.item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-right: 0.5px solid #585858;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 水平线（下边框） */
|
||||
.item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 0.5px solid #585858;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 移除最后一列的右边框 */
|
||||
.item:nth-child(3n)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/views/brand/index.vue
Normal file
64
src/views/brand/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="brand">
|
||||
<div class="header-img">
|
||||
<img src="@/assets/images/brand/brandBg.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
<MerchantInfo></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping"></CommodityList>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.brand{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
.header-img{
|
||||
width: 100%;
|
||||
>img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
.merchant-info{
|
||||
width: 40rem;
|
||||
padding-left: 12.7rem;
|
||||
padding-right: 2.7rem;
|
||||
}
|
||||
.commodity-list{
|
||||
flex: 1;
|
||||
border-left: 0.5px solid #585858;
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: 9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
src/views/brand/merchant-info.vue
Normal file
129
src/views/brand/merchant-info.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="merchantInfo">
|
||||
<div class="profile">
|
||||
<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="detail">
|
||||
<div class="name">Lian Su</div>
|
||||
<div class="title">Roaming Clouds</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<div class="title">Contact</div>
|
||||
<div class="email label">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-email" size="24" />
|
||||
</div>
|
||||
<div>lian.su@urieworweoo.com</div>
|
||||
</div>
|
||||
<div class="phone label">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-call" size="24" />
|
||||
</div>
|
||||
<div>+86 139 4829 7710</div>
|
||||
</div>
|
||||
<div class="address label">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-link" size="24" />
|
||||
</div>
|
||||
<div>746312432</div>
|
||||
</div>
|
||||
<div class="website label">
|
||||
<div class="icon">
|
||||
<svg-icon name="brand-link" size="24" />
|
||||
</div>
|
||||
<div>https://urieworweoo.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about">
|
||||
<div class="title">About</div>
|
||||
<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.merchantInfo{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
.profile{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
margin-left: 1.8rem;
|
||||
>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rem;
|
||||
margin-top: 4rem;
|
||||
.title{
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 3.4rem;
|
||||
line-height: 3.6rem;
|
||||
}
|
||||
> .detail{
|
||||
.name{
|
||||
margin-bottom: .8rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
line-height: 100%;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .contact{
|
||||
.title{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.label{
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: .6rem;
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 100%;
|
||||
color: #585858;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .about{
|
||||
.title{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.content{
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.3rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/views/collectionStory/detail/coreConcept.vue
Normal file
142
src/views/collectionStory/detail/coreConcept.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/navigation';
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
|
||||
import coreconcept_1 from "@/assets/images/collectionStory/coreconcept_1.png";
|
||||
import coreconcept_2 from "@/assets/images/collectionStory/coreconcept_2.png";
|
||||
import coreconcept_3 from "@/assets/images/collectionStory/coreconcept_3.png";
|
||||
import coreconcept_4 from "@/assets/images/collectionStory/coreconcept_4.png";
|
||||
import coreconcept_5 from "@/assets/images/collectionStory/coreconcept_5.png";
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const modules = [Navigation, Pagination, Autoplay]
|
||||
let data = reactive({
|
||||
})
|
||||
let slides = [
|
||||
{ image: coreconcept_1, text: 'Layered Heritage, Coastal Stillness' },
|
||||
{ image: coreconcept_2, text: 'Nomadic Silhouettes, Golden Wandering' },
|
||||
{ image: coreconcept_3, text: 'Pastoral Communion, Woven Earth' },
|
||||
{ image: coreconcept_4, text: 'Layered winter silhouettes' },
|
||||
{ image: coreconcept_5, text: 'Insulated winterwear inspired by high-altitude traditions' },
|
||||
]
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="core-concept">
|
||||
<div class="title">Core Concept</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
We are spiritual nomads carrying what wind cannot take. This collection honors those who knew home is not a place, but what you wear. Earthy palettes of terracotta, ochre, and natural beige evoke pastoral landscapes, while layered textiles and handwoven fabrics embody portable heritage. Each garment balances burden and beauty—sustainable materials and artisanal craftsmanship create timeless pieces that travel with the wearer, transforming clothing into sanctuary and memory woven into fabric.
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
This winterwear series reinterprets high-altitude nomadic clothing through modern, refined construction. Layered silhouettes, tactile wools, and structured draping create warmth while preserving fluid movement. Textural contrasts and sculptural volumes evoke the surrounding snowy landscapes and monastic architecture. The collection balances cultural references with contemporary tailoring, presenting outerwear that feels protective, grounded, and quietly elegant within its harsh winter environment.
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper">
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:slides-per-view="'auto'"
|
||||
space-between="24"
|
||||
:navigation="{
|
||||
prevEl: '.custom-prev',
|
||||
nextEl: '.custom-next'
|
||||
}"
|
||||
>
|
||||
<div class="custom-prev">
|
||||
<div style="transform: rotate(180deg);">
|
||||
<svg-icon name="collectionStory-swiperRight" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-next">
|
||||
<div>
|
||||
<svg-icon name="collectionStory-swiperRight" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<swiper-slide v-for="item in slides" :key="item.id">
|
||||
<div class="slide-content">
|
||||
<img :src="item.image" :alt="item.text" />
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.core-concept{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding: 6rem 0;
|
||||
> .title{
|
||||
padding: 0 2.4rem;
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 100%;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
> .info{
|
||||
width: 70.7rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 4rem;
|
||||
> div{
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
> .swiper{
|
||||
width: 100%;
|
||||
padding: 0 2.4rem;
|
||||
padding-top: 1rem;
|
||||
position: relative;
|
||||
.custom-prev,.custom-next{
|
||||
position: absolute;
|
||||
top: 16rem;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
|
||||
}
|
||||
.custom-prev{
|
||||
left: 0;
|
||||
}
|
||||
.custom-next{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.slide-content{
|
||||
width: min-content;
|
||||
> img{
|
||||
height: 34.2rem;
|
||||
width: auto;
|
||||
}
|
||||
> .text{
|
||||
margin-top: 1rem;
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
:deep(.swiper-slide){
|
||||
width: auto;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/views/collectionStory/detail/feelingWithAiDA.vue
Normal file
85
src/views/collectionStory/detail/feelingWithAiDA.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import feeling_1 from "@/assets/images/collectionStory/feeling_1.png";
|
||||
import feeling_2 from "@/assets/images/collectionStory/feeling_2.png";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
let slides = [
|
||||
{ image: feeling_1, text: 'Web interface in AiDA - the process of apparel edit' },
|
||||
{ image: feeling_2, text: 'Web interface in AiDA-Sketchboard' },
|
||||
]
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="feeling-with-AiDA">
|
||||
<div class="title">Feeling with AiDA</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
AiDA significantly enhances the creative latitude for cross-disciplinary creators like myself. Its functionalities, particularly the robust line-art extraction and the ability to edit the front and back garment panels, have been a major source of inspiration. This allows me to rapidly prototype by extracting traditional ethnic wear and conduct detailed style modifications directly on the canvas. As an integrated creation platform, AiDA enables a deeper focus on the design process. For seasoned designers, AI serves as a powerful source of inspiration, and AiDA is an exemplary manifestation of this principle.
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box">
|
||||
<div class="img-item" v-for="item in slides" :key="item.text">
|
||||
<img :src="item.image" alt="">
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.feeling-with-AiDA{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding: 6rem 0;
|
||||
padding-bottom: 18rem;
|
||||
> .title{
|
||||
padding: 0 2.4rem;
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 100%;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
> .info{
|
||||
width: 70.7rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 4rem;
|
||||
> div{
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
> .img-box{
|
||||
width: 100%;
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
gap: 2.3rem;
|
||||
justify-content: center;
|
||||
> .img-item{
|
||||
width: min-content;
|
||||
> img{
|
||||
margin-bottom: .9rem;
|
||||
height: 34.3rem;
|
||||
}
|
||||
> .text{
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
142
src/views/collectionStory/detail/index.vue
Normal file
142
src/views/collectionStory/detail/index.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<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 CommodityItem from "@/components/CommodityItem.vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
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) => {
|
||||
console.log(item);
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="left">
|
||||
<div class="personal">
|
||||
<img :src="img" alt="">
|
||||
<div class="name">
|
||||
<span>Lian Su</span>
|
||||
<div class="icon">
|
||||
<SvgIcon name="share" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<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%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
> 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;
|
||||
> 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;
|
||||
.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;
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
> .item{
|
||||
margin-bottom: 2.3rem;
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
src/views/collectionStory/detail/inspiration.vue
Normal file
87
src/views/collectionStory/detail/inspiration.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import inspiration_1 from "@/assets/images/collectionStory/inspiration_1.png";
|
||||
import inspiration_2 from "@/assets/images/collectionStory/inspiration_1.png";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
let slides = [
|
||||
{ image: inspiration_1, text: 'Moodboard 1 for this Collection' },
|
||||
{ image: inspiration_2, text: 'Moodboard 2 for this Collection' },
|
||||
]
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="inspiration">
|
||||
<div class="title">Inspiration</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
This project is inspired by the enduring traditions and unique material culture of high-altitude nomadic communities, particularly those found across Central Asia and the Himalayan plateau.
|
||||
</div>
|
||||
<div>
|
||||
The moodboard now balances rugged, natural fibers and dramatic, layered silhouettes with vibrant color and refined pattern work. Key visual elements include the strength of traditional nomadic crafts like falconry and the warmth of textured knitwear. The palette expands from earthy browns to striking accents of lime green, teal, and gold, often expressed through intricate geometric ornamental motifs. The silhouettes emphasize functional draping (scarves and outerwear) and structured, high-collar layering, translating ancient heritage into a bold, contemporary aesthetic.
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box">
|
||||
<div class="img-item" v-for="item in slides" :key="item.text">
|
||||
<img :src="item.image" alt="">
|
||||
<div class="text">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.inspiration{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding: 6rem 0;
|
||||
> .title{
|
||||
padding: 0 2.4rem;
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 100%;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
> .info{
|
||||
width: 70.7rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 4rem;
|
||||
> div{
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
> .img-box{
|
||||
width: 100%;
|
||||
margin-top: 4rem;
|
||||
display: flex;
|
||||
gap: 2.3rem;
|
||||
justify-content: center;
|
||||
> .img-item{
|
||||
width: min-content;
|
||||
> img{
|
||||
margin-bottom: .9rem;
|
||||
height: 34.3rem;
|
||||
}
|
||||
> .text{
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import Detail from "./detail/index.vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -15,9 +17,39 @@ const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="collectionStory">
|
||||
<div class="title">
|
||||
collection Story
|
||||
<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="left">
|
||||
<div class="title">
|
||||
Windswept Burden
|
||||
</div>
|
||||
<div class="info">
|
||||
Publish Date: 24th Nov 2025
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="info">
|
||||
“We are spiritual nomads carrying what wind cannot take. <br />
|
||||
Inspired by those who knew home is not a place, but what you wear.”
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrolling-learn-more">
|
||||
<div>Scrolling Learn More</div>
|
||||
<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<Detail></Detail>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
@@ -25,5 +57,104 @@ const {} = toRefs(data);
|
||||
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: #fff;
|
||||
cursor: pointer;
|
||||
> .text{
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
> .title-content{
|
||||
width: 100%;
|
||||
height: 63.2rem;
|
||||
margin-top: 24.8rem;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
|
||||
padding: 0 4rem;
|
||||
> .title-box{
|
||||
margin-top: 36.7rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .left{
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-weight: 700;
|
||||
> .title{
|
||||
font-size: 6rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
> .info{
|
||||
margin-top: 1.7rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 100%;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
> .info{
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
line-height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrolling-learn-more{
|
||||
position: absolute;
|
||||
bottom: 2.1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
animation: scroll 3s linear infinite;
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
> div{
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.banner{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
// min-height: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -134,7 +134,7 @@
|
||||
|
||||
<style lang="less">
|
||||
#main-header {
|
||||
height: 8rem;
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user