brand页面交互调整

This commit is contained in:
X1627315083@163.com
2026-05-11 16:16:59 +08:00
parent 87b071c319
commit b8c844363c
19 changed files with 624 additions and 146 deletions

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 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;

View 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>