506 lines
10 KiB
Vue
506 lines
10 KiB
Vue
<template>
|
|
<div class="account-container">
|
|
<img src="@/assets/images/account/account-bg.png" alt="" class="banner" />
|
|
|
|
<div class="account-main">
|
|
<aside class="designer-panel">
|
|
<div class="designer-avatar">
|
|
<img :src="designerPortrait" alt="Lian Su" />
|
|
</div>
|
|
|
|
<div class="designer-content">
|
|
<section class="designer-heading">
|
|
<div class="designer-name">Lian Su</div>
|
|
<h1 class="designer-title">Roaming Clouds</h1>
|
|
</section>
|
|
|
|
<section class="designer-section">
|
|
<h2 class="section-title">Contact</h2>
|
|
<div class="contact-list">
|
|
<div class="contact-item">
|
|
<SvgIcon name="brand-email" size="24" />
|
|
<span>lian.su.studio@mail.com</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<SvgIcon name="brand-call" size="24" />
|
|
<span>+86 139 4829 7710</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<SvgIcon name="brand-link" size="24" />
|
|
<span>746312432</span>
|
|
</div>
|
|
<div class="contact-item">
|
|
<SvgIcon name="brand-link" size="24" />
|
|
<span>https://urieworweoo.com</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="designer-section">
|
|
<h2 class="section-title">About</h2>
|
|
<p class="designer-about">
|
|
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.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="items-section">
|
|
<header class="items-header">
|
|
<h2 class="items-title">Items</h2>
|
|
<div class="items-tabs" role="tablist" aria-label="Item gender filters">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab"
|
|
type="button"
|
|
class="items-tab"
|
|
:class="{ active: activeTab === tab }"
|
|
:aria-selected="activeTab === tab"
|
|
role="tab"
|
|
@click="activeTab = tab"
|
|
>
|
|
{{ tab }}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="items-grid">
|
|
<article v-for="item in visibleItems" :key="item.id" class="product-card">
|
|
<div class="product-image">
|
|
<img
|
|
:src="item.url"
|
|
:alt="item.title"
|
|
:style="{ transform: `translateY(${item.imageOffset})` }"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="product-info">
|
|
<div class="product-copy">
|
|
<h3 class="product-name">{{ item.title }}</h3>
|
|
<div class="product-price">{{ item.price }}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="add-button"
|
|
:aria-label="`Add ${item.title} to cart`"
|
|
@click="addShopping(item)"
|
|
>
|
|
<SvgIcon name="add" size="24" color="#232323" />
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, shallowRef } from 'vue'
|
|
import myEvent from '@/utils/myEvent'
|
|
import designerPortrait from '@/assets/images/account/designer-lian-su.png'
|
|
import item01 from '@/assets/images/account/item-01.png'
|
|
import item02 from '@/assets/images/account/item-02.png'
|
|
import item03 from '@/assets/images/account/item-03.png'
|
|
import item04 from '@/assets/images/account/item-04.png'
|
|
import item05 from '@/assets/images/account/item-05.png'
|
|
import item06 from '@/assets/images/account/item-06.png'
|
|
import item07 from '@/assets/images/account/item-07.png'
|
|
import item08 from '@/assets/images/account/item-08.png'
|
|
import item09 from '@/assets/images/account/item-09.png'
|
|
|
|
type Gender = 'Male' | 'Female'
|
|
type Tab = 'All' | Gender
|
|
|
|
interface AccountItem {
|
|
id: number
|
|
title: string
|
|
price: string
|
|
url: string
|
|
gender: Gender
|
|
imageOffset: string
|
|
}
|
|
|
|
const tabs: Tab[] = ['All', 'Male', 'Female']
|
|
const activeTab = shallowRef<Tab>('All')
|
|
|
|
const items: AccountItem[] = [
|
|
{ id: 1, title: 'Item Name', price: '$430', url: item01, gender: 'Female', imageOffset: '0rem' },
|
|
{ id: 2, title: 'Item Name', price: '$392', url: item02, gender: 'Female', imageOffset: '0rem' },
|
|
{ id: 3, title: 'Item Name', price: '$211', url: item03, gender: 'Male', imageOffset: '0rem' },
|
|
{ id: 4, title: 'Item Name', price: '$187', url: item04, gender: 'Female', imageOffset: '0rem' },
|
|
{ id: 5, title: 'Item Name', price: '$325', url: item05, gender: 'Male', imageOffset: '-1.4rem' },
|
|
{ id: 6, title: 'Item Name', price: '$458', url: item06, gender: 'Female', imageOffset: '-0.4rem' },
|
|
{ id: 7, title: 'Item Name', price: '$192', url: item07, gender: 'Male', imageOffset: '-3.6rem' },
|
|
{ id: 8, title: 'Item Name', price: '$93', url: item08, gender: 'Female', imageOffset: '0rem' },
|
|
{ id: 9, title: 'Item Name', price: '$198', url: item09, gender: 'Male', imageOffset: '-3.8rem' }
|
|
]
|
|
|
|
const visibleItems = computed(() => {
|
|
if (activeTab.value === 'All') return items
|
|
return items.filter((item) => item.gender === activeTab.value)
|
|
})
|
|
|
|
const addShopping = (item: AccountItem) => {
|
|
myEvent.emit('addShopping', item)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.account-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
background-color: #ffffff;
|
|
|
|
.banner {
|
|
display: block;
|
|
width: 100%;
|
|
height: 27.6rem;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.account-main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin: 0 9rem;
|
|
min-height: 170.3rem;
|
|
border-top: 0.5px solid #585858;
|
|
}
|
|
|
|
.designer-panel {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 29.7rem;
|
|
height: var(--app-view-height);
|
|
padding-top: 4rem;
|
|
overflow-y: auto;
|
|
flex: 0 0 29.7rem;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.designer-avatar {
|
|
width: 20rem;
|
|
height: 20rem;
|
|
margin-left: 5.5rem;
|
|
border: 0.1rem solid #d2d2d7;
|
|
|
|
> img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.designer-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6rem;
|
|
width: 24.6rem;
|
|
margin-top: 4rem;
|
|
margin-left: 3.7rem;
|
|
}
|
|
|
|
.designer-heading,
|
|
.designer-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.designer-name {
|
|
margin-bottom: 0.8rem;
|
|
font-family: KaiseiOpti-Medium;
|
|
font-size: 1.8rem;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
color: #232323;
|
|
}
|
|
|
|
.designer-title,
|
|
.section-title {
|
|
margin: 0;
|
|
font-family: KaiseiOpti-Bold;
|
|
font-weight: 700;
|
|
color: #121212;
|
|
}
|
|
|
|
.designer-title {
|
|
width: 23.1rem;
|
|
font-size: 3.4rem;
|
|
line-height: 3.6rem;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: 2rem;
|
|
font-size: 3.4rem;
|
|
line-height: 3.1rem;
|
|
}
|
|
|
|
.contact-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
min-width: 0;
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
line-height: 2.4rem;
|
|
color: #585858;
|
|
|
|
> :first-child {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
flex: 0 0 2.4rem;
|
|
}
|
|
|
|
> span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
|
|
.designer-about {
|
|
width: 22rem;
|
|
margin: 0;
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
line-height: 2.3rem;
|
|
color: #585858;
|
|
}
|
|
|
|
.items-section {
|
|
flex: 1;
|
|
min-height: 170.3rem;
|
|
border-left: 0.5px solid #585858;
|
|
border-right: 0.5px solid #585858;
|
|
}
|
|
|
|
.items-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.items-title {
|
|
margin: 0;
|
|
padding: 4rem 0 3.6rem 1.2rem;
|
|
font-family: KaiseiOpti-Bold;
|
|
font-size: 3.6rem;
|
|
font-weight: 700;
|
|
line-height: 6rem;
|
|
color: #121212;
|
|
}
|
|
|
|
.items-tabs {
|
|
display: flex;
|
|
gap: 2rem;
|
|
padding: 0 1.2rem;
|
|
margin-bottom: 5.9rem;
|
|
}
|
|
|
|
.items-tab {
|
|
position: relative;
|
|
min-width: 6rem;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.988rem;
|
|
font-weight: 400;
|
|
line-height: 2.6rem;
|
|
text-align: center;
|
|
color: #7b7b7b;
|
|
cursor: pointer;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -0.1rem;
|
|
display: none;
|
|
width: 100%;
|
|
border-bottom: 0.1rem solid #232323;
|
|
}
|
|
|
|
&.active {
|
|
font-family: KaiseiOpti-Bold;
|
|
font-weight: 700;
|
|
color: #232323;
|
|
|
|
&::after {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.items-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
align-content: start;
|
|
border-top: 0.5px solid #585858;
|
|
}
|
|
|
|
.product-card {
|
|
position: relative;
|
|
min-height: 44.7rem;
|
|
padding: 1.2rem;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::before {
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
border-right: 0.5px solid #585858;
|
|
}
|
|
|
|
&::after {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
border-bottom: 0.5px solid #585858;
|
|
}
|
|
|
|
&:nth-child(3n)::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.product-image {
|
|
height: 37.5rem;
|
|
margin-bottom: 0.8rem;
|
|
overflow: hidden;
|
|
background-color: #f7f7f7;
|
|
|
|
> img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
will-change: transform;
|
|
}
|
|
}
|
|
|
|
.product-info {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.product-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.product-name {
|
|
margin: 0;
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
line-height: 2.3rem;
|
|
color: #232323;
|
|
}
|
|
|
|
.product-price {
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
line-height: 2.3rem;
|
|
color: #585858;
|
|
}
|
|
|
|
.add-button {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
padding: 0;
|
|
margin-top: 1rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
flex: 0 0 2.4rem;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.account-main {
|
|
display: block;
|
|
margin: 0 2.4rem;
|
|
min-height: auto;
|
|
}
|
|
|
|
.designer-panel {
|
|
position: static;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 4rem 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.designer-avatar {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.designer-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.items-section {
|
|
min-height: auto;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.items-header {
|
|
position: static;
|
|
}
|
|
|
|
.items-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.product-card:nth-child(3n)::before {
|
|
display: block;
|
|
}
|
|
|
|
.product-card:nth-child(2n)::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.account-main {
|
|
margin: 0 1.6rem;
|
|
}
|
|
|
|
.items-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.product-card::before {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|