fix
This commit is contained in:
X1627315083@163.com
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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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(()=>{
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
@@ -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(()=>{
|
||||
})
|
||||
|
||||
@@ -49,6 +49,7 @@ const {} = toRefs(data);
|
||||
<div class="content">
|
||||
<Detail></Detail>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
@@ -121,6 +122,18 @@ const {} = toRefs(data);
|
||||
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;
|
||||
@@ -139,8 +152,8 @@ const {} = toRefs(data);
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
// min-height: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -74,7 +74,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