brand页面交互调整
This commit is contained in:
X1627315083@163.com
127
src/views/brand/brand-item.vue
Normal file
127
src/views/brand/brand-item.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
item:{
|
||||
type:Object,
|
||||
default:()=>{},
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'viewProfile',
|
||||
])
|
||||
const viewProfile = (item) => {
|
||||
emit('viewProfile', item)
|
||||
}
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="portrait">
|
||||
<img :src="item.portrait" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="collection">
|
||||
{{ item.collectionsName }} |
|
||||
{{ item?.collections?.length || 0 }} Collections
|
||||
</div>
|
||||
<div class="view-profile" @click="viewProfile(item)">View Profile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="img-list">
|
||||
<div class="img-item" v-for="itemImg in item?.collections?.slice(0,5)" :key="item.id">
|
||||
<img :src="itemImg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="icon" v-show="item?.collections?.length > 5">
|
||||
<svgIcon name="brand-more" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.item{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 14rem;
|
||||
justify-content: space-between;
|
||||
border-bottom: 0.5px solid #C4C4C4;
|
||||
> .left{
|
||||
display: flex;
|
||||
.portrait{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin-right: 2.4rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> .name{
|
||||
font-family: "KaiseiOpti-Bold";
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
line-height: 100%;
|
||||
}
|
||||
> .collection{
|
||||
color: #7B7B7B;
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2.3rem;
|
||||
margin-top: .4rem;
|
||||
}
|
||||
> .view-profile{
|
||||
margin-top: 2.4rem;
|
||||
border-bottom: 2px solid #585858;
|
||||
background: #F9F9F9;
|
||||
font-family: "KaiseiOpti-Regular";
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: -0.4px;
|
||||
line-height: 3.4rem;
|
||||
padding: 0 2.55rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
display: flex;
|
||||
> .img-list{
|
||||
display: flex;
|
||||
gap: 3.2rem;
|
||||
> .img-item{
|
||||
width: 9.2rem;
|
||||
height: 12rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .more{
|
||||
width: 8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
import scListNull from '@/views/shoppingCart/sc-list-null.vue'
|
||||
import brandItem from '@/views/brand/brand-item.vue'
|
||||
|
||||
import img from '@/assets/images/collectionStory/Rectangle.png'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
@@ -11,12 +13,96 @@ import myEvent from '@/utils/myEvent'
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
|
||||
const searchBrand = ref('')
|
||||
const merchantList = ref([
|
||||
])
|
||||
const getMerchantData = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
isShowMark:false,
|
||||
isNoData:false,
|
||||
})
|
||||
const list = ref([
|
||||
' 1',
|
||||
'Brand 2',
|
||||
'Brand 3',
|
||||
'1213123 4',
|
||||
'Brand 4',
|
||||
'2222 4',
|
||||
'B23rand 4',
|
||||
'Bran112222d 4',
|
||||
' 4',
|
||||
])
|
||||
|
||||
let changeSearchBrandTime = null
|
||||
const changeSearchBrand = () => {
|
||||
clearTimeout(changeSearchBrandTime)
|
||||
changeSearchBrandTime = setTimeout(()=>{
|
||||
getMerchantData.pageNum = 1
|
||||
merchantList.value = []
|
||||
getMerchantData.isShowMark = false
|
||||
getMerchantData.isNoData = false
|
||||
},300)
|
||||
}
|
||||
const openDetail = (item) => {
|
||||
router.push({name: 'digitalDetail', params: {id: item.id}})
|
||||
|
||||
const getBrandList = async () => {
|
||||
if(getMerchantData.isShowMark && !getMerchantData.isNoData)return
|
||||
getMerchantData.isShowMark = true
|
||||
let value = {
|
||||
pageSize: getMerchantData.pageSize,
|
||||
pageNum: getMerchantData.pageNum,
|
||||
status: 1,
|
||||
}
|
||||
setTimeout(()=>{
|
||||
if(merchantList.value.length >= 5){
|
||||
getMerchantData.isNoData = true
|
||||
merchantList.value = []
|
||||
return
|
||||
}
|
||||
getMerchantData.pageNum += 1
|
||||
merchantList.value.push({
|
||||
name:'Roaming Clouds',
|
||||
portrait: img,
|
||||
collectionsName:'by Lian Su ',
|
||||
collections:[
|
||||
img,img,img,
|
||||
],
|
||||
})
|
||||
getMerchantData.isShowMark = false
|
||||
},1000)
|
||||
// await getPublishList(value).then((res)=>{
|
||||
// if(res.content.length == 0)getMerchantData.isNoData = true
|
||||
// getMerchantData.pageNum += 1
|
||||
// list.value.push(...res.content)
|
||||
// })
|
||||
}
|
||||
const vObserve = {
|
||||
mounted (el,binding) {
|
||||
getMerchantData.isShowMark = false
|
||||
getMerchantData.isNoData = false
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
getMerchantData.pageNum += 1
|
||||
binding.value()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(el);
|
||||
}
|
||||
}
|
||||
|
||||
const deleteHistory = (item) => {
|
||||
list.value = list.value.filter((i) => i != item)
|
||||
}
|
||||
const viewProfile = (item) => {
|
||||
router.push({
|
||||
path:'/brand/1',
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -26,15 +112,52 @@ const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="brand">
|
||||
<div class="header-img">
|
||||
<div class="header-img" :class="{'active': searchBrand.length > 0}">
|
||||
<img src="@/assets/images/brand/brandBg.png" alt="">
|
||||
<div class="text-box">
|
||||
<div class="title">Brand</div>
|
||||
<span>Every brand, every story — discover who's behind the collections.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
<MerchantInfo></MerchantInfo>
|
||||
<div class="input">
|
||||
<input type="text" v-model="searchBrand" @input="changeSearchBrand" placeholder="Search brand">
|
||||
<div class="icon">
|
||||
<SvgIcon name="brand-search" size="32" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
|
||||
<div class="merchantList" v-if="searchBrand.length > 0">
|
||||
<brand-item v-for="item in merchantList" :key="item.name" :item="item" @viewProfile="viewProfile"></brand-item>
|
||||
<div class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
|
||||
<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
|
||||
<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
|
||||
</div>
|
||||
|
||||
<div class="merchantListNull" v-if="getMerchantData.isNoData && searchBrand.length > 0">
|
||||
<sc-list-null
|
||||
nullImage="brand"
|
||||
:showButton="false"
|
||||
title="Brand No Found"
|
||||
tip="Try using another keywords."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="null-input" v-if="searchBrand.length == 0">
|
||||
<div class="title">
|
||||
<div class="icon">
|
||||
<SvgIcon name="brand-time" size="20" />
|
||||
</div>
|
||||
<span>Searching History</span>
|
||||
</div>
|
||||
<div class="history">
|
||||
<div v-for="item in list" :key="item" @click.stop="searchBrand = item" class="item">
|
||||
<span>{{item}}</span>
|
||||
<div class="icon" @click.stop="deleteHistory(item)">
|
||||
<SvgIcon name="brand-delete" size="18" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
@@ -46,34 +169,151 @@ const {} = toRefs(data);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header-img{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 34.4rem;
|
||||
transition: all .3s;
|
||||
&.active{
|
||||
height: 14.7rem;
|
||||
}
|
||||
>img{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
> .text-box{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
> .title{
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-weight: 700;
|
||||
font-size: 4rem;
|
||||
line-height: 2.3rem;
|
||||
letter-spacing: 0%;
|
||||
color: #000;
|
||||
}
|
||||
> span{
|
||||
display: block;
|
||||
margin-top: 2.4rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 140%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
>.content{
|
||||
display: flex;
|
||||
height: auto;
|
||||
align-items: flex-start;
|
||||
.merchant-info{
|
||||
width: 40rem;
|
||||
padding-left: 12.7rem;
|
||||
padding-right: 2.7rem;
|
||||
height: var(--app-view-height);
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .input{
|
||||
width: 66.6rem;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #232323;
|
||||
padding: 1.4rem 1.4rem 1.4rem 2.4rem;
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
margin-top: 8rem;
|
||||
> input{
|
||||
width: 57.2rem;
|
||||
line-height: 3.2rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 100%;
|
||||
margin-right: 2.4rem;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
> .icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.commodity-list{
|
||||
> .null-input{
|
||||
margin-top: 8rem;
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
.history{
|
||||
margin-top: 4rem;
|
||||
width: 59rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: 3.2rem;
|
||||
row-gap: 1.2rem;
|
||||
.item{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
> span{
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 100%;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .merchantList{
|
||||
width: 121.8rem;
|
||||
margin-top: 6rem;
|
||||
flex: 1;
|
||||
border-left: 0.5px solid #585858;
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: 9rem;
|
||||
overflow-y: auto;
|
||||
gap: 3.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
.end{
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 140%;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
> .material_content_list_loding{
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
aspect-ratio: 1/1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
> .page_loading{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
> img{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .merchantListNull{
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,11 +37,7 @@ const list = ref([
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},{
|
||||
url: img,
|
||||
title: "Windswept Burden",
|
||||
price: "$100.00",
|
||||
},
|
||||
}
|
||||
])
|
||||
const type = ref('All')
|
||||
const addShopping = (item) => {
|
||||
@@ -128,41 +124,26 @@ const {} = toRefs(data);
|
||||
}
|
||||
}
|
||||
.list{
|
||||
border-top: 0.5px solid #585858;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// display: grid;
|
||||
// align-content: start;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
align-content: start;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
|
||||
border-top: 0.5px solid #585858;
|
||||
padding: .5px 0 0 .5px;
|
||||
/* 垂直线（右边框） */
|
||||
.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;
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
src/views/brandDetail/index.vue
Normal file
80
src/views/brandDetail/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
}
|
||||
const openDetail = (item) => {
|
||||
router.push({name: 'digitalDetail', params: {id: item.id}})
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="brand">
|
||||
<div class="header-img">
|
||||
<img src="@/assets/images/brand/brandDetailBg.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="merchant-info">
|
||||
<MerchantInfo></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping" @openDetail="openDetail"></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;
|
||||
height: var(--app-view-height);
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.commodity-list{
|
||||
flex: 1;
|
||||
border-left: 0.5px solid #585858;
|
||||
border-right: 0.5px solid #585858;
|
||||
margin-right: 9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,10 +62,7 @@ const {} = toRefs(data);
|
||||
<div class="detail">
|
||||
<div class="name">Roaming Clouds</div>
|
||||
<div class="release-time">
|
||||
<div class="icon">
|
||||
<svg-icon name="digital-document" size="24"></svg-icon>
|
||||
</div>
|
||||
<span>12mb | Release in Feb 26, 2026</span>
|
||||
<span>Release in Feb 26, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -235,9 +232,7 @@ const {} = toRefs(data);
|
||||
color: #585858;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user