This commit is contained in:
X1627315083@163.com
2026-04-21 15:57:37 +08:00
parent 14b8ead78f
commit 282a5b2252
27 changed files with 595 additions and 20 deletions

View File

@@ -5,7 +5,11 @@ 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";
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({
//})
@@ -15,11 +19,11 @@ 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' },
{ 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(()=>{
})
@@ -116,6 +120,7 @@ const {} = toRefs(data);
right: 0;
}
.slide-content{
width: min-content;
> img{
height: 34.2rem;
width: auto;

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png";
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([
@@ -8,8 +9,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
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' },
{ image: feeling_1, text: 'Web interface in AiDA - the process of apparel edit' },
{ image: feeling_2, text: 'Web interface in AiDA-Sketchboard' },
]
onMounted(()=>{
})

View File

@@ -4,6 +4,7 @@ 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([
@@ -25,6 +26,9 @@ const list = ref([
price: "$100.00",
},
])
const addShopping = (item) => {
console.log(item);
}
onMounted(()=>{
})
onUnmounted(()=>{
@@ -53,23 +57,28 @@ const {} = toRefs(data);
<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: 100%;
height: auto;
position: relative;
display: flex;
align-items: flex-start;
> div{
height: 100%;
// height: 100%;
}
> .left{
width: 23rem;
padding-top: 6.3rem;
padding-left: 3rem;
position: sticky;
top: 0;
> .personal{
display: flex;
flex-direction: column;
@@ -98,8 +107,10 @@ const {} = toRefs(data);
flex: 1;
border-left: 0.5px solid #585858;
border-right: 0.5px solid #585858;
overflow-y: auto;
height: 100%;
// overflow-y: auto;
overflow: hidden;
// height: 100%;
height: auto;
.line{
border: 0.5px solid #58585899;
width: 100%;
@@ -111,6 +122,21 @@ const {} = toRefs(data);
> .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>

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png";
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([
@@ -8,8 +9,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
let data = reactive({
})
let slides = [
{ image: img, text: 'Moodboard 1 for this Collection' },
{ image: img, text: 'Moodboard 2 for this Collection' },
{ image: inspiration_1, text: 'Moodboard 1 for this Collection' },
{ image: inspiration_2, text: 'Moodboard 2 for this Collection' },
]
onMounted(()=>{
})