From 4254f291f41d7635c371a85050a8b6f169a99bf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Mon, 18 May 2026 16:46:55 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/assets/css/style.css | 50 ++++++------- src/assets/css/style.less | 55 +++++++------- src/components/main-header.vue | 5 +- src/pages/my-account/account-info.vue | 103 ++++++++++++++++++++++++-- src/pages/my-account/css/style.css | 17 ----- src/pages/my-account/index.vue | 2 +- src/pages/my-account/less/style.less | 17 ----- src/pages/my-account/login.vue | 2 +- src/pages/my-account/orders.vue | 11 +++ src/pages/my-account/register.vue | 2 +- src/pages/my-account/welcome.vue | 64 ++++++++++++++++ src/routes.ts | 16 +++- 13 files changed, 241 insertions(+), 105 deletions(-) create mode 100644 src/pages/my-account/orders.vue create mode 100644 src/pages/my-account/welcome.vue diff --git a/index.html b/index.html index c571ecb..62fc1fe 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ test-ssg - +
diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 794a0d4..d41ff3b 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -121,37 +121,33 @@ h6, background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); } button[custom], -button[custom="white"] { - min-width: 19.4rem; - height: 5rem; - padding: 0 1rem; - border-radius: 0; - 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); +button[custom="red"] { + width: 100%; + height: 38px; + border-radius: 4px; + border: none; + background-color: #9a2125; + color: #fff; + transition: all 0.3s ease-in-out; + box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3); cursor: pointer; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; } -button[custom]:active, -button[custom="white"]:active { - background: var(--button-click-bgcolor, #e4e4e4); - color: var(--button-click-color, #232323); +button[custom]:hover, +button[custom="red"]:hover { + background-color: #99494c; } -button[custom="black"] { - --button-bgcolor: #232323; - --button-color: #fff; - --button-click-bgcolor: #333; - --button-click-color: #fff; - --button-font-size: 1.6rem; +button[custom] > .iconfont, +button[custom="red"] > .iconfont { + margin-right: 4px; + font-size: 16px; } -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; +button[custom] > .label, +button[custom="red"] > .label { + font-size: 14px; } .hover-bottom-animation { position: relative; diff --git a/src/assets/css/style.less b/src/assets/css/style.less index e29e6ca..c14463a 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -148,40 +148,37 @@ h6, // 自定义button按钮 button[custom], -button[custom="white"] { - min-width: 19.4rem; - height: 5rem; - padding: 0 1rem; - border-radius: 0; - 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); +button[custom="red"] { + width: 100%; + height: 38px; + border-radius: 4px; + border: none; + background-color: #9a2125; + color: #fff; + transition: all 0.3s ease-in-out; + box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3); cursor: pointer; + font-size: 12px; - &:active { - background: var(--button-click-bgcolor, #e4e4e4); - color: var(--button-click-color, #232323); + &:hover { + background-color: #99494c; } + + display: flex; + align-items: center; + justify-content: center; + + >.iconfont { + margin-right: 4px; + font-size: 16px; + } + + >.label { + font-size: 14px; + } + } -button[custom="black"] { - --button-bgcolor: #232323; - --button-color: #fff; - --button-click-bgcolor: #333; - --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; -} .hover-bottom-animation { position: relative; diff --git a/src/components/main-header.vue b/src/components/main-header.vue index e05b199..a8cb1d6 100644 --- a/src/components/main-header.vue +++ b/src/components/main-header.vue @@ -17,7 +17,7 @@ userInfoStore.state.token) const route = useRoute() const lang = computed(() => route.params.lang) + const path = computed(() => route.path.replace(new RegExp(`^/${lang.value}/`), '/')) if (lang.value) setLang(lang.value) watch(lang, (newVal) => { - setLang(newVal) + if (lang.value) setLang(newVal) }) const langList = ref([ { diff --git a/src/pages/my-account/account-info.vue b/src/pages/my-account/account-info.vue index 3271576..043bb31 100644 --- a/src/pages/my-account/account-info.vue +++ b/src/pages/my-account/account-info.vue @@ -1,27 +1,114 @@ diff --git a/src/pages/my-account/register.vue b/src/pages/my-account/register.vue index 0c63593..bdfe562 100644 --- a/src/pages/my-account/register.vue +++ b/src/pages/my-account/register.vue @@ -51,7 +51,7 @@ >Privacy Policy - + diff --git a/src/pages/my-account/welcome.vue b/src/pages/my-account/welcome.vue new file mode 100644 index 0000000..f0de38a --- /dev/null +++ b/src/pages/my-account/welcome.vue @@ -0,0 +1,64 @@ + + + + diff --git a/src/routes.ts b/src/routes.ts index 56f02a2..48180f4 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -35,7 +35,21 @@ export const routes: RouteRecordRaw[] = [ { path: 'my-account', name: 'MyAccount', - component: () => import('./pages/my-account/index.vue') + component: () => import('./pages/my-account/index.vue'), + children: [ + { + path: '', + component: () => import('./pages/my-account/welcome.vue'), + }, + { + path: 'orders', + component: () => import('./pages/my-account/orders.vue'), + }, + { + path: ':pathMatch(.*)*', + component: () => import('./pages/my-account/welcome.vue'), + }, + ] }, ] }