fix
This commit is contained in:
X1627315083@163.com
25
package-lock.json
generated
25
package-lock.json
generated
@@ -19,6 +19,7 @@
|
||||
"pinia": "^2.0.32",
|
||||
"pinia-persistedstate-plugin": "^0.1.0",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"swiper": "^12.1.3",
|
||||
"vue": "^3.2.47",
|
||||
"vue-i18n": "^11.2.8",
|
||||
"vue-router": "^4.1.6"
|
||||
@@ -7611,6 +7612,25 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "12.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-12.1.3.tgz",
|
||||
"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
|
||||
@@ -14245,6 +14265,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "12.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-12.1.3.tgz",
|
||||
"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug=="
|
||||
},
|
||||
"text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
|
||||
|
||||
@@ -17,14 +17,15 @@
|
||||
"crypto-js": "^4.2.0",
|
||||
"element-plus": "^2.13.2",
|
||||
"gsap": "^3.13.0",
|
||||
"vue-i18n": "^11.2.8",
|
||||
"markdown-it": "^14.1.0",
|
||||
"md5": "^2.3.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.0.32",
|
||||
"pinia-persistedstate-plugin": "^0.1.0",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"swiper": "^12.1.3",
|
||||
"vue": "^3.2.47",
|
||||
"vue-i18n": "^11.2.8",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -57,4 +58,4 @@
|
||||
"npm run lint"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ body,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
}
|
||||
@keyframes loading {
|
||||
0% {
|
||||
|
||||
@@ -21,7 +21,7 @@ body,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// font-family: 'Medium';
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
|
||||
3
src/assets/icons/collectionStory/back.svg
Normal file
3
src/assets/icons/collectionStory/back.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="13" height="22" viewBox="0 0 13 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6387 20.0371C11.9849 20.3836 11.985 20.9436 11.6387 21.29C11.2922 21.6365 10.7313 21.6365 10.3848 21.29L0.430664 11.335L0.426758 11.3311C0.196025 11.0898 0.19053 10.705 0.430664 10.4648L10.3848 0.509766C10.7313 0.163262 11.2922 0.163262 11.6387 0.509766C11.9852 0.856269 11.9852 1.41717 11.6387 1.76367L2.66309 10.7383V10.748L2.59375 10.8203C2.5437 10.8726 2.5492 10.9476 2.58984 10.9883L11.6387 20.0371Z" fill="white" stroke="white" stroke-width="0.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 571 B |
3
src/assets/icons/collectionStory/scrollingLearnMore.svg
Normal file
3
src/assets/icons/collectionStory/scrollingLearnMore.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.5416 31.9844L7.88035 16.3231C7.44961 15.8923 6.7538 15.8923 6.32306 16.3231C5.89231 16.7538 5.89231 17.4496 6.32306 17.8803L23.5527 35.11C23.7957 35.353 24.1933 35.353 24.4473 35.11L41.6769 17.8803C42.1077 17.4496 42.1077 16.7538 41.6769 16.3231C41.2462 15.8923 40.5504 15.8923 40.1196 16.3231L24.4584 31.9844C24.2154 32.2273 23.8178 32.2273 23.5637 31.9844H23.5416Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 499 B |
2
src/assets/icons/collectionStory/swiperRight.svg
Normal file
2
src/assets/icons/collectionStory/swiperRight.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512"><path d="M6.079,22.5a1.5,1.5,0,0,1,.44-1.06l7.672-7.672a2.5,2.5,0,0,0,0-3.536L6.529,2.565A1.5,1.5,0,0,1,8.65.444l7.662,7.661a5.506,5.506,0,0,1,0,7.779L8.64,23.556A1.5,1.5,0,0,1,6.079,22.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 332 B |
4
src/assets/icons/share.svg
Normal file
4
src/assets/icons/share.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 16.1998L15.85 8.34981" stroke="#585858" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.70312 7.99995H16.3031L16.2031 15.55" stroke="#585858" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
BIN
src/assets/images/collectionStory/Rectangle.png
Normal file
BIN
src/assets/images/collectionStory/Rectangle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/images/collectionStory/collection_story_banner.png
Normal file
BIN
src/assets/images/collectionStory/collection_story_banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
137
src/views/collectionStory/detail/coreConcept.vue
Normal file
137
src/views/collectionStory/detail/coreConcept.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<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 img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const modules = [Navigation, Pagination, Autoplay]
|
||||
let data = reactive({
|
||||
})
|
||||
let slides = [
|
||||
{ image: img, text: 'Layered Heritage, Coastal Stillness' },
|
||||
{ image: img, text: 'Nomadic Silhouettes, Golden Wandering' },
|
||||
{ image: img, text: 'Pastoral Communion, Woven Earth' },
|
||||
{ image: img, text: 'Pastoral Communion, Woven Earth' },
|
||||
{ image: img, text: 'Pastoral Communion, Woven Earth' },
|
||||
]
|
||||
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{
|
||||
> 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>
|
||||
84
src/views/collectionStory/detail/feelingWithAiDA.vue
Normal file
84
src/views/collectionStory/detail/feelingWithAiDA.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<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([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
let slides = [
|
||||
{ image: img, text: 'Web interface in AiDA - the process of apparel edit' },
|
||||
{ image: img, 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>
|
||||
116
src/views/collectionStory/detail/index.vue
Normal file
116
src/views/collectionStory/detail/index.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<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";
|
||||
//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",
|
||||
},
|
||||
])
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.detail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> div{
|
||||
height: 100%;
|
||||
}
|
||||
> .left{
|
||||
width: 23rem;
|
||||
padding-top: 6.3rem;
|
||||
padding-left: 3rem;
|
||||
> .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;
|
||||
height: 100%;
|
||||
.line{
|
||||
border: 0.5px solid #58585899;
|
||||
width: 100%;
|
||||
}
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
width: 25.4rem;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
src/views/collectionStory/detail/inspiration.vue
Normal file
86
src/views/collectionStory/detail/inspiration.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<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([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
let slides = [
|
||||
{ image: img, text: 'Moodboard 1 for this Collection' },
|
||||
{ image: img, 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,8 +17,37 @@ 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>
|
||||
</div>
|
||||
</template>
|
||||
@@ -25,5 +56,92 @@ 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;
|
||||
> 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>
|
||||
Reference in New Issue
Block a user