diff --git a/src/assets/icons/Invoice.svg b/src/assets/icons/Invoice.svg new file mode 100644 index 0000000..f2d3425 --- /dev/null +++ b/src/assets/icons/Invoice.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/account/account-bg.png b/src/assets/images/account/account-bg.png new file mode 100644 index 0000000..3d5d5f2 Binary files /dev/null and b/src/assets/images/account/account-bg.png differ diff --git a/src/assets/images/account/designer-lian-su.png b/src/assets/images/account/designer-lian-su.png new file mode 100644 index 0000000..3f839a6 Binary files /dev/null and b/src/assets/images/account/designer-lian-su.png differ diff --git a/src/assets/images/account/item-01.png b/src/assets/images/account/item-01.png new file mode 100644 index 0000000..afd6802 Binary files /dev/null and b/src/assets/images/account/item-01.png differ diff --git a/src/assets/images/account/item-02.png b/src/assets/images/account/item-02.png new file mode 100644 index 0000000..c60da94 Binary files /dev/null and b/src/assets/images/account/item-02.png differ diff --git a/src/assets/images/account/item-03.png b/src/assets/images/account/item-03.png new file mode 100644 index 0000000..e7adf3d Binary files /dev/null and b/src/assets/images/account/item-03.png differ diff --git a/src/assets/images/account/item-04.png b/src/assets/images/account/item-04.png new file mode 100644 index 0000000..8eef150 Binary files /dev/null and b/src/assets/images/account/item-04.png differ diff --git a/src/assets/images/account/item-05.png b/src/assets/images/account/item-05.png new file mode 100644 index 0000000..da713a9 Binary files /dev/null and b/src/assets/images/account/item-05.png differ diff --git a/src/assets/images/account/item-06.png b/src/assets/images/account/item-06.png new file mode 100644 index 0000000..4406bf3 Binary files /dev/null and b/src/assets/images/account/item-06.png differ diff --git a/src/assets/images/account/item-07.png b/src/assets/images/account/item-07.png new file mode 100644 index 0000000..b4c8f09 Binary files /dev/null and b/src/assets/images/account/item-07.png differ diff --git a/src/assets/images/account/item-08.png b/src/assets/images/account/item-08.png new file mode 100644 index 0000000..f87201d Binary files /dev/null and b/src/assets/images/account/item-08.png differ diff --git a/src/assets/images/account/item-09.png b/src/assets/images/account/item-09.png new file mode 100644 index 0000000..00d7e4f Binary files /dev/null and b/src/assets/images/account/item-09.png differ diff --git a/src/assets/images/background.png b/src/assets/images/background.png new file mode 100644 index 0000000..62dc613 Binary files /dev/null and b/src/assets/images/background.png differ diff --git a/src/lang/en.ts b/src/lang/en.ts index 925d091..a767417 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -40,4 +40,93 @@ export default { sendCodeError: 'Send code error', retrievePassword: 'Retrieve password' }, + Settings: { + title: 'Settings', + slogan: 'Manage your account settings and preferences', + profile: { + title: 'Profile', + description: 'Update your display name, avatar, social links and account security.', + firstName: 'FIRST NAME', + lastName: 'LAST NAME', + firstNamePlaceholder: 'First Name', + lastNamePlaceholder: 'Last Name', + username: 'USERNAME', + usernamePlaceholder: 'Username', + usernameTip: 'Your public username on Stylish Parade.', + role: 'ROLE', + roleTip: 'Select up to 2 labels that suit you.', + }, + security: { + title: 'Security', + description: 'Manage your login email and password.', + email: 'EMAIL', + newEmail: 'NEW EMAIL ADDRESS', + newEmailPlaceholder: 'Enter new email', + verify: 'Verify', + verified: 'Verified', + verifiedTip: 'Your new email has been verified and is ready to save.', + password: 'PASSWORD', + newPassword: 'NEW PASSWORD', + newPasswordPlaceholder: 'Enter new password', + passwordTip: 'You must satisfy ALL password conditions to register.', + currentPassword: 'CURRENT PASSWORD', + currentPasswordPlaceholder: 'Confirm with your password' + }, + region: { + title: 'Language & Region', + description: 'Set your preferred language, region and currency display.', + displayLanguage: 'DISPLAY LANGUAGE', + selectLanguage: 'Select language', + region: 'REGION', + selectRegion: 'Select region' + }, + buttons: { + cancel: 'CANCEL', + discard: 'DISCARD', + edit: 'EDIT', + saveChange: 'SAVE CHANGE', + saving: 'SAVING...' + }, + dialog: { + title: 'Check your new email', + subtitle: 'Enter the 6-digit code sent to', + submit: 'Submit', + resendCode: 'Resend Code', + resendCodeIn: 'Resend Code in {time}' + }, + messages: { + enterNewEmailFirst: 'Please enter your new email address first', + invalidEmail: 'Please enter a valid email address', + sameEmail: 'Please enter a different email address', + alreadyVerified: 'This email has already been verified', + verificationCodeSent: 'Verification code sent', + enterVerificationCode: 'Please enter the 6-digit verification code', + verificationCompleted: 'Email verification completed', + verifyEmailBeforeSave: 'Please verify your new email before saving', + settingsUpdated: 'Settings updated' + }, + roles: { + fashionEnthusiast: 'Fashion Enthusiast', + contentCreator: 'Content Creator', + student: 'Student', + retailBuyer: 'Retail / Buyer', + fashionDesigner: 'Fashion Designer', + brandBusiness: 'Brand / Business', + prCommunications: 'PR & Communications', + stylist: 'Stylist', + graphicDesigner: 'Graphic Designer', + artist3d: '3D Artist', + other: 'Other' + }, + languages: { + english: 'English', + chinese: 'Chinese', + }, + regions: { + hongKongSar: 'Hong Kong SAR', + mainlandChina: 'Mainland China', + singapore: 'Singapore', + unitedKingdom: 'United Kingdom' + } + } } diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts index 4e078c4..10177c0 100644 --- a/src/lang/zh-cn.ts +++ b/src/lang/zh-cn.ts @@ -41,4 +41,93 @@ export default { sendCodeError: '发送验证码失败', retrievePassword: '找回密码' }, + Settings: { + title: '设置', + slogan: '管理你的账户设置和偏好', + profile: { + title: '个人资料', + description: '更新你的显示名称、头像、社交链接和账户安全信息。', + firstName: '名字', + lastName: '姓氏', + firstNamePlaceholder: '请输入名字', + lastNamePlaceholder: '请输入姓氏', + username: '用户名', + usernamePlaceholder: '请输入用户名', + usernameTip: '这是你在 Stylish Parade 上公开显示的用户名。', + role: '身份标签', + roleTip: '最多选择 2 个符合你的标签。', + }, + security: { + title: '安全', + description: '管理你的登录邮箱和密码。', + email: '邮箱', + newEmail: '新邮箱地址', + newEmailPlaceholder: '请输入新邮箱', + verify: '验证', + verified: '已验证', + verifiedTip: '你的新邮箱已验证成功，可以保存。', + password: '密码', + newPassword: '新密码', + newPasswordPlaceholder: '请输入新密码', + passwordTip: '你必须满足所有密码条件才能注册。', + currentPassword: '当前密码', + currentPasswordPlaceholder: '请输入当前密码确认' + }, + region: { + title: '语言与地区', + description: '设置你偏好的语言、地区和货币显示方式。', + displayLanguage: '显示语言', + selectLanguage: '请选择语言', + region: '地区', + selectRegion: '请选择地区' + }, + buttons: { + cancel: '取消', + discard: '放弃', + edit: '编辑', + saveChange: '保存更改', + saving: '保存中...' + }, + dialog: { + title: '检查你的新邮箱', + subtitle: '请输入发送到以下邮箱的 6 位验证码', + submit: '提交', + resendCode: '重新发送验证码', + resendCodeIn: '{time} 后可重新发送验证码' + }, + messages: { + enterNewEmailFirst: '请先输入新的邮箱地址', + invalidEmail: '请输入有效的邮箱地址', + sameEmail: '请输入不同的邮箱地址', + alreadyVerified: '该邮箱已完成验证', + verificationCodeSent: '验证码已发送', + enterVerificationCode: '请输入 6 位验证码', + verificationCompleted: '邮箱验证完成', + verifyEmailBeforeSave: '请先完成新邮箱验证再保存', + settingsUpdated: '设置已更新' + }, + roles: { + fashionEnthusiast: '时尚爱好者', + contentCreator: '内容创作者', + student: '学生', + retailBuyer: '零售 / 买手', + fashionDesigner: '服装设计师', + brandBusiness: '品牌 / 商业', + prCommunications: '公关与传播', + stylist: '造型师', + graphicDesigner: '平面设计师', + artist3d: '3D 艺术家', + other: '其他' + }, + languages: { + english: '英文', + chinese: '中文', + }, + regions: { + hongKongSar: '中国香港特别行政区', + mainlandChina: '中国大陆', + singapore: '新加坡', + unitedKingdom: '英国' + } + } } diff --git a/src/router/index.ts b/src/router/index.ts index ec12b5f..c14b554 100644 --- a/src/router/index.ts +++ b/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', diff --git a/src/views/account/index.vue b/src/views/account/index.vue new file mode 100644 index 0000000..65c6519 --- /dev/null +++ b/src/views/account/index.vue @@ -0,0 +1,505 @@ + + + + + diff --git a/src/views/main-header.vue b/src/views/main-header.vue index 861eefa..8c3e0db 100644 --- a/src/views/main-header.vue +++ b/src/views/main-header.vue @@ -100,7 +100,7 @@ { icon: 'user_0', active_icon: 'user_1', - path: '/user' + path: '/account' } ]) const onNavItemClick = (path: string) => { diff --git a/src/views/setting/components/EmailVerificationDialog.vue b/src/views/setting/components/EmailVerificationDialog.vue new file mode 100644 index 0000000..454086e --- /dev/null +++ b/src/views/setting/components/EmailVerificationDialog.vue @@ -0,0 +1,263 @@ + + + + + diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue index 1a8eed3..e7c5f25 100644 --- a/src/views/setting/index.vue +++ b/src/views/setting/index.vue @@ -1,16 +1,16 @@ \ No newline at end of file + > .text { + font-family: KaiseiOpti-Regular; + font-size: 1.4rem; + color: #808080; + } + } + } + > .right { + align-self: var(--sc-item-right-align-self, end); + display: var(--sc-item-right-display); + flex-direction: var(--sc-item-right-flex-direction); + justify-content: var(--sc-item-right-justify-content); + align-items: var(--sc-item-right-align-items); + height: var(--sc-item-right-height); + margin-top: var(--sc-item-right-margin-top); + > .amount { + font-family: KaiseiOpti-Bold; + font-size: var(--sc-item-amount-font-size, 2.2rem); + color: #232323; + > span { + font-size: var(--sc-item-currency-font-size, 1.4rem); + color: #585858; + vertical-align: bottom; + } + } + > .remove { + margin-top: var(--sc-item-remove-margin-top, 9rem); + display: flex; + align-items: center; + justify-content: center; + user-select: none; + cursor: pointer; + > .icon { + width: 2rem; + height: 2rem; + margin-right: 0.4rem; + } + > .text { + font-family: KaiseiOpti-Regular; + font-size: 1.4rem; + color: #808080; + } + } + } + &.is-order-actions-layout { + display: grid; + grid-template-columns: + var(--sc-item-img-width, 14.8rem) + minmax(0, 1fr) + var(--sc-item-order-amount-width, 12rem) + var(--sc-item-order-action-width, 18rem); + column-gap: var(--sc-item-order-column-gap, 2rem); + + > .content { + min-width: 0; + } + + > .right { + display: contents; + + > .amount { + grid-column: 3; + align-self: center; + white-space: nowrap; + transform: translateX(var(--sc-item-order-actions-offset, 0)); + } + + .c-svg { + width: initial; + height: initial; + } + > .download { + grid-column: 4; + cursor: pointer; + transform: translateX(var(--sc-item-order-actions-offset, 0)); + } + } + } +} + diff --git a/src/views/wardrobe/Assets.vue b/src/views/wardrobe/Assets.vue index eb1467f..7a22eaf 100644 --- a/src/views/wardrobe/Assets.vue +++ b/src/views/wardrobe/Assets.vue @@ -99,17 +99,7 @@ -
- - -

Nothing in Wardrobe yet

-

- Explore the digital item and add pieces to your collection. -

-
- Explore Digital Items -
-
+ @@ -117,6 +107,7 @@ import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue' import { useRouter } from 'vue-router' import img from '@/assets/images/collectionStory/Rectangle.png' +import Empty from './Empty.vue' interface FilterOption { label: string @@ -553,39 +544,6 @@ onUnmounted(() => { } } - .assets-empty { - flex: 1; - - color: #979797; - .empty-img { - width: 14.2rem; - height: 18.8rem; - } - - .assets-empty__title { - font-family: 'KaiseiOpti-Bold'; - font-size: 1.6rem; - margin: 2.4rem 0 0.8rem; - } - - .assets-empty__description { - font-family: 'KaiseiOpti-Regular'; - font-size: 1.4rem; - } - - .assets-empty__button { - margin-top: 3rem; - height: 4.4rem; - line-height: 4.4rem; - padding: 0 3.8rem; - border: 0.1rem solid #c4c4c4; - font-family: 'KaiseiOpti-Regular'; - font-size: 1.6rem; - color: #585858; - cursor: pointer; - text-transform: uppercase; - } - } } } diff --git a/src/views/wardrobe/Empty.vue b/src/views/wardrobe/Empty.vue new file mode 100644 index 0000000..f09a150 --- /dev/null +++ b/src/views/wardrobe/Empty.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/views/wardrobe/Orders.vue b/src/views/wardrobe/Orders.vue index 38e51ff..41e37c4 100644 --- a/src/views/wardrobe/Orders.vue +++ b/src/views/wardrobe/Orders.vue @@ -1,257 +1,426 @@ + + - - diff --git a/src/views/wardrobe/index.vue b/src/views/wardrobe/index.vue index 287dfa3..b8924f3 100644 --- a/src/views/wardrobe/index.vue +++ b/src/views/wardrobe/index.vue @@ -1,11 +1,11 @@