home修改

src/assets/css/style.css

@@ -122,11 +122,11 @@ button[custom="white"] {
   height: 5rem;
   padding: 0 1rem;
   border-radius: 0;
-  border: none;
   font-family: KaiseiOpti-Bold;
   font-size: var(--button-font-size, 2rem);
   color: var(--button-color, #232323);
   background: var(--button-bgcolor, #fff);
+  border: var(--button-border, none);
   cursor: pointer;
 }
 button[custom]:active,
@@ -141,6 +141,11 @@ button[custom="black"] {
   --button-click-color: #fff;
   --button-font-size: 1.6rem;
 }
-.el-select-dropdown__item {
+button[custom="black-box"] {
-  padding: 0 2rem !important;
+  --button-bgcolor: transparent;
+  --button-color: #232323;
+  --button-border: 0.2rem solid #979797;
+  --button-click-bgcolor: #979797;
+  --button-click-color: #fff;
+  --button-font-size: 1.6rem;
 }

src/assets/css/style.less

@@ -149,11 +149,11 @@ button[custom="white"] {
 	height: 5rem;
 	padding: 0 1rem;
 	border-radius: 0;
-	border: none;
 	font-family: KaiseiOpti-Bold;
 	font-size: var(--button-font-size, 2rem);
 	color: var(--button-color, #232323);
 	background: var(--button-bgcolor, #fff);
+	border: var(--button-border, none);
 	cursor: pointer;
 
 	&:active {
@@ -169,3 +169,12 @@ button[custom="black"] {
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
 }
+
+button[custom="black-box"] {
+	--button-bgcolor: transparent;
+	--button-color: #232323;
+	--button-border: 0.2rem solid #979797;
+	--button-click-bgcolor: #979797;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
+}

src/lang/en.ts

@@ -2,8 +2,7 @@ export default {
 	Login: {
 		login: 'Log in',
 		register: 'Register',
-		loginTo: 'Log on to <span>FiDA</span>',
+		loginTip: 'Platform integrated with AiDA.<br />AiDA account login required.',
-		loginTitle: 'A multi-agent canvas for rapid, trend driven design iteration.',
 		name: 'Name',
 		email: 'Email',
 		password: 'Password',

src/lang/zh-cn.ts

@@ -2,9 +2,7 @@ export default {
 	Login: {
 		login: '登录',
 		register: '注册',
-		signUp: '注册',
+		loginTip: '与 AiDA 集成的平台。<br />需要登录 AiDA 账户。',
-		loginTo: '登录到 <span>FiDA</span',
-		loginTitle: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
 		name: '姓名',
 		email: '邮箱',
 		password: '密码',

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="home-index">
 		<section-index />
-		<section-designers />
+		<section-designer />
 		<section-design />
 		<section-digital-items1 />
 		<section-digital-items2 />
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import SectionIndex from './section-index.vue'
-	import SectionDesigners from './section-designers.vue'
+	import SectionDesigner from './section-designer.vue'
 	import SectionDesign from './section-design.vue'
 	import SectionDigitalItems1 from './section-digital-items1.vue'
 	import SectionDigitalItems2 from './section-digital-items2.vue'

src/views/home/section-designer.vue

@@ -0,0 +1,51 @@
+<template>
+	<section class="section-designer">
+		<div class="title">Designer Community</div>
+		<div class="tip">
+			Discover the designers shaping AiDA’s creative landscape. <br />
+			Each month, we will showcase a curated selection of their most distinguished works.
+		</div>
+		<button custom="black" @click="onSearchBrand">Search Brands</button>
+		<img src="@/assets/images/home/designer-bg.png" />
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const onSearchBrand = () => {
+		router.push({ name: 'brand' })
+	}
+</script>
+
+<style lang="less">
+	.section-designer {
+		padding: 9rem 8rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .title {
+			font-family: KaiseiOpti-Bold;
+			font-size: 5.6rem;
+			line-height: 6.2rem;
+			text-align: center;
+			margin-bottom: 2rem;
+		}
+		> .tip {
+			font-family: KaiseiOpti-Regular;
+			font-size: 2rem;
+			line-height: 2.8rem;
+			text-align: center;
+			color: #979797;
+			margin-bottom: 2rem;
+		}
+		> button {
+			margin-bottom: 4.6rem;
+		}
+		> img {
+			width: 73%;
+			height: auto;
+		}
+	}
+</style>

src/views/home/section-designers.vue

@@ -1,130 +0,0 @@
-<template>
-	<section class="section-designers">
-		<div class="title">Popular Designers</div>
-		<div class="tip">
-			Discover the designers shaping AiDA’s creative landscape,<br />as we present their most
-			distinguished works each month.
-		</div>
-		<div class="content">
-			<img src="@/assets/images/home/designers-left.jpg" />
-			<div class="box">
-				<div class="intro">
-					<span>{{ list[index]?.intro || '' }}</span>
-					<img src="@/assets/images/home/designers-right.jpg" />
-				</div>
-				<div
-					class="name-item"
-					v-for="(v, i) in list"
-					:key="i"
-					:class="{ active: i === index }"
-					@click="index = i"
-				>
-					<span class="name">{{ v.name }}</span>
-					<span class="icon">
-						<svg-icon name="arrow_right" size="20" />
-					</span>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref } from 'vue'
-	const index = ref(0)
-	const list = ref([
-		{
-			name: 'Ji-Yeon Park',
-			intro:
-				'Through its fragile tulle layers over a grounded silhouette, the garment reflects the tension between vulnerability and strength within one’s journey.'
-		},
-		{
-			name: 'Lian Su',
-			intro: '阿巴阿巴~'
-		},
-		{
-			name: 'Céline Moreau',
-			intro: '这是Céline Moreau的设计~'
-		}
-	])
-</script>
-
-<style lang="less">
-	.section-designers {
-		padding: 9rem 8rem;
-		> .title {
-			font-family: KaiseiOpti-Bold;
-			font-size: 5.6rem;
-			line-height: 6.2rem;
-			text-align: center;
-			margin-bottom: 1rem;
-		}
-		> .tip {
-			font-family: KaiseiOpti-Regular;
-			font-size: 2rem;
-			line-height: 2.8rem;
-			text-align: center;
-			color: #979797;
-		}
-		> .content {
-			margin-top: 5rem;
-			border: 0.1rem solid #979797;
-			border-left: none;
-			border-left: none;
-			border-right: none;
-			box-sizing: content-box;
-			--height: 45rem;
-			min-height: var(--height);
-			display: flex;
-			> img {
-				width: var(--height);
-				height: var(--height);
-				margin: 2.4rem 2.4rem 2.4rem 0;
-			}
-			> .box {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				> .intro {
-					display: flex;
-					margin: 2rem 2rem 2rem 0;
-					> span {
-						flex: 1;
-						font-family: KaiseiOpti-Regular;
-						font-size: 2rem;
-						line-height: 3rem;
-						color: #232323;
-						margin-right: 9rem;
-					}
-					> img {
-						width: 25rem;
-						height: 25rem;
-					}
-				}
-				> .name-item {
-					flex: 1;
-					min-height: 5rem;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					border-top: 0.1rem solid #7b7b7b;
-					padding: 0 2.1rem;
-					font-family: KaiseiOpti-Regular;
-					font-size: 2.4rem;
-					color: #7b7b7b;
-					> .icon {
-						transform: rotate(-45deg);
-					}
-					&.active {
-						font-family: KaiseiOpti-Bold;
-						color: #232323;
-						background: #f6f6f6;
-						> .icon {
-							transform: rotate(0);
-						}
-					}
-				}
-			}
-		}
-	}
-</style>

src/views/home/section-index.vue

@@ -1,74 +1,58 @@
 <template>
 	<section class="section-index bgw">
-		<img src="@/assets/images/home/bg.jpg" class="bg" />
+		<img src="@/assets/images/home/bg.png" class="bg" />
-		<div class="shade-1"></div>
-		<div class="shade-2"></div>
 		<div class="content">
-			<div class="title">Windswept Burden</div>
+			<div class="title" v-html="title"></div>
-			<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
+			<div class="tip">
-			<button custom>View More</button>
+				Discover collections through the stories behind their creation. A curated space connecting
-			<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
+				designers, narratives, and fashion commerce.
-			<p class="tip">
+			</div>
-				What you wear is how you present yourself to the world, especially today, when human
+			<button custom="black-box" @click="handleClickArrow">
-				contacts are so quick. Fashion is instant language
+				<svg-icon name="arrow_right" size="34" />
-			</p>
+			</button>
-			<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
 		</div>
 	</section>
 </template>
 
 <script setup lang="ts">
 	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const title =
+		'We’re Seeking<br /><span>Fashion Voice</span><br /><span class="small">Worth Featuring.</span>'
+	const handleClickArrow = () => {
+		router.push({ name: 'collectionStory' })
+	}
 </script>
 
 <style lang="less">
 	.section-index {
-		> .shade-1 {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 96rem;
-			height: 100%;
-			background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
-		}
-		> .shade-2 {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 30rem;
-			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
-		}
 		> .content {
-			top: 16rem;
+			top: 13.7rem;
 			left: 9rem;
-			color: #fff;
+			color: #232323;
 			> .title {
 				font-family: KaiseiOpti-Bold;
-				font-size: 6rem;
+				font-size: 7rem;
 				margin-bottom: 3rem;
+				span {
+					font-family: KaiseiOpti-Medium;
+					&.small {
+						font-size: 6rem;
 					}
-			> div.tip {
+				}
-				font-family: KaiseiOpti-Regular;
+			}
-				font-size: 3.2rem;
+			> .tip {
-				line-height: 4.3rem;
+				width: 50rem;
+				font-size: 1.8rem;
+				line-height: 2.6rem;
+				color: #585858;
 			}
 			> button {
-				margin-top: 11.6rem;
+				margin-top: 12rem;
-				margin-bottom: 13.9rem;
+				min-width: 0;
-			}
+				width: 8rem;
-			> .aida-logo {
+				height: 8rem;
-				margin-bottom: 3rem;
-				> img {
-					width: auto;
-					height: 5rem;
-				}
-			}
-			> p.tip {
-				font-family: KaiseiOpti-Regular;
-				font-size: 1.2rem;
-				line-height: 2rem;
-				color: #ededed;
 			}
 		}
 	}

src/views/login/login.vue

@@ -1,5 +1,9 @@
 <template>
 	<div class="login">
+		<div class="header">
+			<img src="@/assets/images/logos/aidaAndStylish.png" alt="" />
+			<div v-html="$t('Login.loginTip')"></div>
+		</div>
 		<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
 			<el-form-item :label="$t('Login.email')" prop="email">
 				<el-input v-model="formData.email" :placeholder="$t('Login.enterEmail')" name="email" />
@@ -72,4 +76,24 @@
 
 <style lang="less" scoped>
 	@import './less/style.less';
+	.login {
+		> .header {
+			width: 100%;
+			margin: 1rem 0 3rem;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			> img {
+				width: auto;
+				height: 2.8rem;
+			}
+			> div {
+				text-align: right;
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.1rem;
+				color: #232323;
+				line-height: 1.75rem;
+			}
+		}
+	}
 </style>

src/views/main-header.vue

@@ -62,6 +62,10 @@
 					</div>
 				</template>
 			</el-popover>
+			<div class="language" @click="onLanguageClick">
+				<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
+				<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
+			</div>
 		</div>
 	</div>
 </template>
@@ -70,6 +74,8 @@
 	import { computed, ref } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import myEvent from '@/utils/myEvent'
+	import { useI18n } from 'vue-i18n'
+	const { t, locale } = useI18n()
 	const router = useRouter()
 	const route = useRoute()
 	const activePath = computed(() => route.path)
@@ -131,6 +137,10 @@
 		hideProfilePopover()
 		console.log('logout')
 	}
+	const onLanguageClick = () => {
+		locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'
+		localStorage.setItem('language', locale.value)
+	}
 </script>
 
 <style lang="less" scoped>
@@ -159,7 +169,6 @@
 				height: 2.4rem;
 			}
 			> .login {
-				font-family: Kaisei Opti;
 				font-size: 1.6rem;
 			}
 			> .profile {
@@ -168,6 +177,15 @@
 				border-radius: 50%;
 				background: #f5f5f5;
 			}
+			> .language {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.6rem;
+				color: #c2c2c2;
+				> .active {
+					color: #232323;
+					font-family: KaiseiOpti-Medium;
+				}
+			}
 		}
 		> .center,
 		> .right {
@@ -195,7 +213,6 @@
 					font-size: 1.6rem;
 					color: #232323;
 					border-bottom: 0.1rem solid transparent;
-					font-family: Kaisei Opti;
 				}
 				&.active {
 					> span {

src/views/shoppingCart/order-summary.vue

@@ -18,16 +18,6 @@
 			>
 		</div>
 		<br />
-		<div class="total-file-size">
-			<span class="label">
-				<span class="icon"><svg-icon name="order-file" size="18" /></span>
-				<span class="text">Total File Size</span>
-			</span>
-			<span class="value"
-				>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
-			>
-		</div>
-		<div class="hr"></div>
 		<br />
 		<div class="total">
 			<span class="label">Total</span>
@@ -65,14 +55,6 @@
 		})
 		return arr
 	})
-	const totalSize = computed(() => {
-		const total = props.list.reduce((pre, cur) => pre + cur.fileSize, 0)
-		const str = FormatBytes(total)
-		return {
-			size: str.split(' ')[0],
-			unit: str.split(' ')[1]
-		}
-	})
 	const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const handleCheckout = () => {
 		console.log('购买：', props.list)

src/views/shoppingCart/sc-item.vue

@@ -11,21 +11,22 @@
 			<div class="tags" v-if="showTags">
 				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
 			</div>
-      <div class="size" v-if="showSize">
+			<div class="date" v-if="showDate">
-        <div class="icon"><svg-icon name="order-file" size="18" /></div>
+				<!-- <div class="icon"><svg-icon name="order-file" size="18" /></div> -->
 				<div class="text">
-          <span>{{ FormatBytes(info.fileSize) }}</span>
+					{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
-          <span v-if="showSizeDate"
-            >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
-              FormatDate(info.date, 'SM D, YYYY, h:mm A')
-            }}</span
-          >
 				</div>
 			</div>
 		</div>
 		<div class="right">
 			<div class="amount">${{ info.amount }}<span> HKD</span></div>
-      <SvgIcon v-if="orderActionsLayout" class="download" name="download" size="32" color="#232323" />
+			<SvgIcon
+				v-if="orderActionsLayout"
+				class="download"
+				name="download"
+				size="32"
+				color="#232323"
+			/>
 			<div class="remove" v-if="showRemove" @click="onRemove">
 				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
 				<span class="text">Remove</span>
@@ -35,24 +36,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+	import { computed, ref, onMounted } from 'vue'
-import { FormatBytes, FormatDate } from '@/utils/tools'
+	import { FormatBytes, FormatDate } from '@/utils/tools'
-const emit = defineEmits(['remove'])
+	const emit = defineEmits(['remove'])
-const props = defineProps({
+	const props = defineProps({
 		showTags: { type: Boolean, default: true },
-  showSize: { type: Boolean, default: true },
+		showDate: { type: Boolean, default: true },
-  showSizeDate: { type: Boolean, default: true },
 		showRemove: { type: Boolean, default: true },
 		orderActionsLayout: { type: Boolean, default: false },
 		info: { type: Object, default: () => {} }
-})
+	})
-const onRemove = () => {
+	const onRemove = () => {
 		emit('remove', props.info.id)
-}
+	}
 </script>
 
 <style lang="less" scoped>
-.sc-item {
+	.sc-item {
 		border-bottom: 0.1rem solid #c4c4c4;
 		padding: var(--sc-item-padding, 2.4rem 0);
 		display: flex;
@@ -108,7 +108,7 @@ const onRemove = () => {
 					background-color: #eee;
 				}
 			}
-    > .size {
+			> .date {
 				display: flex;
 				align-items: center;
 				> .icon {
@@ -196,5 +196,5 @@ const onRemove = () => {
 				}
 			}
 		}
-}
+	}
 </style>

src/views/shoppingCart/sc-list.vue

@@ -43,8 +43,7 @@
 				:key="v.id"
 				:info="v"
 				:show-tags="!isMini || isView"
-				:show-size="!isMini"
+				:show-date="!isMini"
-				:show-size-date="!isMini"
 				:show-remove="!isView"
 				@remove="handleRemoveClick"
 			>
@@ -54,12 +53,6 @@
 			</sc-item>
 		</div>
 		<div class="footer" v-if="isMini">
-			<div class="total size" v-show="isView">
-				<span class="label">Total File Size</span>
-				<span class="value"
-					>{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span
-				>
-			</div>
 			<div class="total" v-show="list.length > 0 || isView">
 				<span class="label">Total</span>
 				<span class="value">${{ allAmount }}<span> HKD</span></span>
@@ -117,7 +110,6 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
 			title: 'North Outfit Set',
 			brand: 'Roaming Clouds',
-			fileSize: 1024, // kb
 			date: '2026-5-20 5:20',
 			amount: 49.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -128,7 +120,6 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
 			title: 'Weekend Drift Co-ord',
 			brand: 'Urban Line Edit',
-			fileSize: 1225, // kb
 			date: '2026-5-21 13:14',
 			amount: 9.99,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -139,7 +130,6 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
 			title: 'Static Street Suit',
 			brand: 'Off Grid Apparel',
-			fileSize: 1024 * 18, // kb
 			date: '2026-5-21 13:14',
 			amount: 12,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -150,7 +140,6 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
 			title: 'Maison Contour Suit',
 			brand: 'Ivory Muse Studio',
-			fileSize: 100, // kb
 			date: '2026-5-21 13:14',
 			amount: 18,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -161,7 +150,6 @@
 			url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
 			title: 'Prime Atelier Set',
 			brand: 'Ivory Muse Studio',
-			fileSize: 1024 * 24, // kb
 			date: '2026-5-21 13:14',
 			amount: 20,
 			tags: ['female', 'skirt', 'blouse', 'outwear'],

src/views/wardrobe/Orders.vue

@@ -65,8 +65,7 @@
             class="order-card__item"
             :style="{ '--order-item-placeholder': item.color }"
             :info="item"
-            :show-size="false"
+            :show-date="false"
-            :show-size-date="false"
             :show-remove="false"
             order-actions-layout
           />