feat: account页面

src/router/index.ts

@@ -23,17 +23,17 @@ const router = createRouter({
       name: 'brand',
       component: () => import('../views/brand/index.vue')
     },
-	{
-		path: '/digitalItem',
-		name: 'digitalItem',
-		component: () => import('../views/digitalItem/index.vue'),
-		meta: { cache: true }
-	},
-	{
-		path: '/digitalItem/:id',
-		name: 'digitalItemDetail',
-		component: () => import('../views/digitalDetail/index.vue'),
-	},
+    {
+      path: '/digitalItem',
+      name: 'digitalItem',
+      component: () => import('../views/digitalItem/index.vue'),
+      meta: { cache: true }
+    },
+    {
+      path: '/digitalItem/:id',
+      name: 'digitalItemDetail',
+      component: () => import('../views/digitalDetail/index.vue')
+    },
     {
       path: '/settings',
       name: 'settings',
@@ -41,7 +41,7 @@ const router = createRouter({
       meta: { cache: true }
     },
     {
-      path: '/shoppingCart',// 购物车
+      path: '/shoppingCart', // 购物车
       name: 'shoppingCart',
       component: () => import('@/views/shoppingCart/index.vue')
     },
@@ -55,6 +55,11 @@ const router = createRouter({
       name: 'wardrobe',
       component: () => import('@/views/wardrobe/index.vue')
     },
+    {
+      path:'/account',
+      name:'account',
+      component:()=>import('@/views/account/index.vue')
+    },
     {
       path: '/:pathMatch(.*)',
       name: '404',

src/views/account/index.vue

@@ -0,0 +1,505 @@
+<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>

src/views/main-header.vue

@@ -100,7 +100,7 @@
 		{
 			icon: 'user_0',
 			active_icon: 'user_1',
-			path: '/user'
+			path: '/account'
 		}
 	])
 	const onNavItemClick = (path: string) => {

src/views/wardrobe/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="wardrobe-page">
-    <section class="wardrobe-hero flex flex-col flex-center">
+    <div class="wardrobe-hero flex flex-col flex-center">
       <div class="wardrobe-hero__title">My Wardrobe</div>
       <div class="wardrobe-hero__subtitle">Your digital pieces, all in one place</div>
-    </section>
+    </div>
 
-    <section class="wardrobe-shell">
+    <div class="wardrobe-shell">
       <div class="wardrobe-tabs">
         <div class="wardrobe-tabs__nav" role="tablist" aria-label="Wardrobe tabs">
           <button
@@ -36,7 +36,7 @@
       </div>
 
       <component :is="activePanel" class="wardrobe-shell__panel" />
-    </section>
+    </div>
     <Footer />
   </div>
 </template>
@@ -105,7 +105,18 @@ const activePanel = computed(() => {
 
   .wardrobe-hero {
     height: 14.8rem;
-    background-color: #f5f5f5;
+    // background-color: #f5f5f5;
+    background: url('@/assets/images/background.png') no-repeat;
+    background-size: cover;
+    position: relative;
+    // &::before {
+    //   position: absolute;
+    //   top: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   left: 0;
+    //   background-color: rgba(0, 0, 0, 0.2);
+    // }
     .wardrobe-hero__title {
       margin: 0;
       font-family: 'KaiseiOpti-Bold';

vite.config.ts

@@ -61,7 +61,7 @@ export default defineConfig(({ mode }) => {
 			host: '0.0.0.0', // 允许局域网内的IP访问
 			port: 8060, // 根据环境设置端口
 			open: false, // 自动打开浏览器
-			strictPort: true, // 如果端口已被占用，则尝试下一个可用端口
+			strictPort: false, // 如果端口已被占用，则尝试下一个可用端口
 			hmr: {
 				overlay: true
 			},