brand页面交互调整
This commit is contained in:
X1627315083@163.com
@@ -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 joinUs from "./join-us.vue";
|
||||
import CommodityItem from "@/components/CommodityItem.vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -30,6 +31,10 @@ const list = ref([
|
||||
const addShopping = (item) => {
|
||||
emit('addShopping', item)
|
||||
}
|
||||
const openCodeCreate = () => {
|
||||
window.open('https://code-create.com.hk/', '_blank')
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -41,21 +46,22 @@ const {} = toRefs(data);
|
||||
<div class="detail">
|
||||
<div class="left">
|
||||
<div class="personal">
|
||||
<img :src="img" alt="">
|
||||
<img src="@/assets/images/collectionStory/code-create.png" alt="">
|
||||
<div class="name">
|
||||
<span>Lian Su</span>
|
||||
<div class="icon">
|
||||
<span>Code-Create</span>
|
||||
<div class="icon" @click="openCodeCreate">
|
||||
<SvgIcon name="share" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<coreConcept ></coreConcept>
|
||||
<joinUs></joinUs>
|
||||
<!-- <coreConcept ></coreConcept>
|
||||
<div class="line"></div>
|
||||
<inspiration ></inspiration>
|
||||
<div class="line"></div>
|
||||
<feelingWithAiDA ></feelingWithAiDA>
|
||||
<feelingWithAiDA ></feelingWithAiDA> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item" v-for="item in list" :key="item.url">
|
||||
@@ -67,9 +73,9 @@ const {} = toRefs(data);
|
||||
<style lang="less" scoped>
|
||||
.detail{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: calc(100vh - var(--header-height) - var(--footer-height));
|
||||
align-items: flex-start;
|
||||
> div{
|
||||
// height: 100%;
|
||||
@@ -93,6 +99,9 @@ const {} = toRefs(data);
|
||||
display: flex;
|
||||
gap: .4rem;
|
||||
align-items: center;
|
||||
> .icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
> span{
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-weight: 700;
|
||||
@@ -112,6 +121,7 @@ const {} = toRefs(data);
|
||||
overflow: hidden;
|
||||
// height: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
.line{
|
||||
border: 0.5px solid #58585899;
|
||||
width: 100%;
|
||||
@@ -123,9 +133,9 @@ const {} = toRefs(data);
|
||||
> .right{
|
||||
width: 25.4rem;
|
||||
padding-top: 6rem;
|
||||
position: sticky;
|
||||
// position: sticky;
|
||||
top: 0;
|
||||
height: calc(100vh - var(--header-height));
|
||||
// height: calc(100vh - var(--header-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
59
src/views/collectionStory/detail/join-us.vue
Normal file
59
src/views/collectionStory/detail/join-us.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<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="joinUs">
|
||||
<div class="title">Join Our Designer Community</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
Join our community of visionaries and publish your collection story.
|
||||
</div>
|
||||
<div>
|
||||
We are currently seeking collections that deeply integrate the AiDA creative workflow, specifically those that resonate through powerful core concepts and evocative inspiration.
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
This architecture is designed to elevate your exposure through profound "propositional expression," ensuring that soulful, story-driven designs achieve higher market premiums and superior sales conversion.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.joinUs{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -28,24 +28,15 @@ const {} = toRefs(data);
|
||||
</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 class="title">
|
||||
We’re Seeking
|
||||
</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 class="info">
|
||||
Fashion Voice Worth Featuring.
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrolling-learn-more">
|
||||
<div>Scrolling Learn More</div>
|
||||
<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
|
||||
<div class="button">
|
||||
<a href="mailto:info@code-create.com.hk">Contact Us if Interested</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +64,7 @@ const {} = toRefs(data);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .8rem;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
> .text{
|
||||
font-size: 2rem;
|
||||
@@ -83,73 +74,46 @@ const {} = toRefs(data);
|
||||
}
|
||||
> .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%);
|
||||
padding: 0 6.7rem;
|
||||
margin-top: 11.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
animation: scroll 3s linear infinite;
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
align-items: flex-start;
|
||||
> .title-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
font-size: 6.5rem;
|
||||
line-height: 100%;
|
||||
font-weight: 500;
|
||||
color: #585858;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20%);
|
||||
> .info{
|
||||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
line-height: 100%;
|
||||
color: #585858;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
> .button{
|
||||
padding: 0 4.5rem;
|
||||
line-height: 5.1rem;
|
||||
background-color: #1B1B1B;
|
||||
color: #fff;
|
||||
margin-top: 4rem;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
letter-spacing: -0.4px;
|
||||
cursor: pointer;
|
||||
> a{
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user