aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录注册

Browse Source
This commit is contained in:
李志鹏
2026-05-18 16:46:55 +08:00
parent 35df75d4ea
commit 4254f291f4
13 changed files with 241 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test-ssg</title> <title>test-ssg</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_96rmept2ld.css" /> <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_70xz405a1wg.css" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

50
src/assets/css/style.css
View File

@@ -121,37 +121,33 @@ h6,
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
} }
button[custom], button[custom],
button[custom="white"] { button[custom="red"] {
min-width: 19.4rem; width: 100%;
height: 5rem; height: 38px;
padding: 0 1rem; border-radius: 4px;
border-radius: 0; border: none;
font-family: KaiseiOpti-Bold; background-color: #9a2125;
font-size: var(--button-font-size, 2rem); color: #fff;
color: var(--button-color, #232323); transition: all 0.3s ease-in-out;
background: var(--button-bgcolor, #fff); box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
border: var(--button-border, none);
cursor: pointer; cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
} }
button[custom]:active, button[custom]:hover,
button[custom="white"]:active { button[custom="red"]:hover {
background: var(--button-click-bgcolor, #e4e4e4); background-color: #99494c;
color: var(--button-click-color, #232323);
} }
button[custom="black"] { button[custom] > .iconfont,
--button-bgcolor: #232323; button[custom="red"] > .iconfont {
--button-color: #fff; margin-right: 4px;
--button-click-bgcolor: #333; font-size: 16px;
--button-click-color: #fff;
--button-font-size: 1.6rem;
} }
button[custom="black-box"] { button[custom] > .label,
--button-bgcolor: transparent; button[custom="red"] > .label {
--button-color: #232323; font-size: 14px;
--button-border: 0.2rem solid #979797;
--button-click-bgcolor: #979797;
--button-click-color: #fff;
--button-font-size: 1.6rem;
} }
.hover-bottom-animation { .hover-bottom-animation {
position: relative; position: relative;

51
src/assets/css/style.less
View File

@@ -148,41 +148,38 @@ h6,
// 自定义button按钮 // 自定义button按钮
button[custom], button[custom],
button[custom="white"] { button[custom="red"] {
min-width: 19.4rem; width: 100%;
height: 5rem; height: 38px;
padding: 0 1rem; border-radius: 4px;
border-radius: 0; border: none;
font-family: KaiseiOpti-Bold; background-color: #9a2125;
font-size: var(--button-font-size, 2rem); color: #fff;
color: var(--button-color, #232323); transition: all 0.3s ease-in-out;
background: var(--button-bgcolor, #fff); box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
border: var(--button-border, none);
cursor: pointer; cursor: pointer;
font-size: 12px;
&:active { &:hover {
background: var(--button-click-bgcolor, #e4e4e4); background-color: #99494c;
color: var(--button-click-color, #232323);
}
} }
button[custom="black"] { display: flex;
--button-bgcolor: #232323; align-items: center;
--button-color: #fff; justify-content: center;
--button-click-bgcolor: #333;
--button-click-color: #fff; >.iconfont {
--button-font-size: 1.6rem; margin-right: 4px;
font-size: 16px;
} }
button[custom="black-box"] { >.label {
--button-bgcolor: transparent; font-size: 14px;
--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 { .hover-bottom-animation {
position: relative; position: relative;
cursor: pointer; cursor: pointer;

5
src/components/main-header.vue
View File

@@ -17,7 +17,7 @@
<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'"> <down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
<router-link <router-link
class="link" class="link"
:to="`/${item.value}`" :to="`/${item.value}${path}`"
v-for="item in langList" v-for="item in langList"
:key="item.value" :key="item.value"
v-show="item.value !== locale" v-show="item.value !== locale"
@@ -45,9 +45,10 @@
const token = computed(() => userInfoStore.state.token) const token = computed(() => userInfoStore.state.token)
const route = useRoute() const route = useRoute()
const lang = computed(() => route.params.lang) const lang = computed(() => route.params.lang)
const path = computed(() => route.path.replace(new RegExp(`^/${lang.value}/`), '/'))
if (lang.value) setLang(lang.value) if (lang.value) setLang(lang.value)
watch(lang, (newVal) => { watch(lang, (newVal) => {
setLang(newVal) if (lang.value) setLang(newVal)
}) })
const langList = ref([ const langList = ref([
{ {

95
src/pages/my-account/account-info.vue
View File

@@ -1,16 +1,72 @@
<template> <template>
<div class="account-info"> <div class="account-info">
<div class="left"> <div class="left">
<div class="info">
<img alt="" src="" class="avatar" /> <img alt="" src="" class="avatar" />
<div class="name">12312</div> <div class="name">12312</div>
<div class="name">12312</div> <div class="email">12312@example.com</div>
<div class="name">12312</div> </div>
<router-link
class="link"
v-for="(v, i) in navs"
:key="i"
:to="v.path"
@click="typeof v.onClick === 'function' && v.onClick()"
>
<span class="iconfont" :class="v.icon"></span>
<span class="label">{{ v.label }}</span>
</router-link>
</div>
<div class="content">
<router-view></router-view>
</div> </div>
<div class="content"></div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed, ref } from 'vue'
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
const navs = ref([
{
path: '/my-account',
label: 'Dashboard',
icon: 'icon-dashboard'
},
{
path: '/my-account/orders',
label: 'Orders',
icon: 'icon-orders'
},
{
path: '/my-account/subscriptions',
label: 'Subscriptions',
icon: 'icon-subscriptions'
},
{
path: '/my-account/address',
label: 'Address',
icon: 'icon-address'
},
{
path: '/my-account/methods',
label: 'Payment methods',
icon: 'icon-duidiaojiaohuanduihuan'
},
{
path: '/my-account/details',
label: 'Account details',
icon: 'icon-tubiao-'
},
{
path: '/my-account',
label: 'Log out',
icon: 'icon-tuichu',
onClick: () => {
console.log('logout')
userInfoStore.setToken('')
}
}
])
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@@ -20,6 +76,37 @@
width: 270px; width: 270px;
border-right: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;
margin-right: 30px; margin-right: 30px;
> .info {
margin-bottom: 30px;
> .avatar {
width: 86px;
height: 86px;
margin-bottom: 15px;
border-radius: 50%;
}
> .name {
color: #222;
font-size: 16px;
}
> .email {
color: #333;
font-size: 14px;
}
}
> .link {
display: flex;
align-items: center;
width: 100%;
color: #222;
font-size: 16px;
text-decoration: none;
padding: 7px 0;
line-height: 1.6;
> .iconfont {
font-size: 20px;
margin-right: 5px;
}
}
} }
> .content { > .content {
flex: 1; flex: 1;

17
src/pages/my-account/css/style.css
View File

@@ -105,20 +105,3 @@
.register > form > .tip > a { .register > form > .tip > a {
color: #000; color: #000;
} }
.login > form > button,
.register > form > button {
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;
}
.login > form > button:hover,
.register > form > button:hover {
background-color: #99494c;
}

2
src/pages/my-account/index.vue
View File

@@ -3,7 +3,7 @@
<div class="header"> <div class="header">
<h1 class="title"> <h1 class="title">
<span class="iconfont icon-tubiao-"></span> <span class="iconfont icon-tubiao-"></span>
<span>My Account</span> <span>My account</span>
</h1> </h1>
</div> </div>
<div class="content" v-if="!token"> <div class="content" v-if="!token">

17
src/pages/my-account/less/style.less
View File

@@ -103,22 +103,5 @@
color: #000; color: #000;
} }
} }
>button {
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;
&:hover {
background-color: #99494c;
}
}
} }
} }

2
src/pages/my-account/login.vue
View File

@@ -30,7 +30,7 @@
>Lost your password?</router-link >Lost your password?</router-link
> >
</div> </div>
<button type="submit">LOG IN</button> <button type="submit" custom>LOG IN</button>
</form> </form>
</div> </div>
</template> </template>

11
src/pages/my-account/orders.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="orders">No order has been made yet.</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
</script>
<style scoped lang="less">
.orders {
}
</style>

2
src/pages/my-account/register.vue
View File

@@ -51,7 +51,7 @@
>Privacy Policy</router-link >Privacy Policy</router-link
> >
</div> </div>
<button type="submit">REGISTER</button> <button type="submit" custom>REGISTER</button>
</form> </form>
</div> </div>
</template> </template>

64
src/pages/my-account/welcome.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="welcome">
<h3 class="title">Welcome to your account page</h3>
<div class="tip">
Hi <b>XXX</b>, today is a great day to check your account page. You can check also:
</div>
<div class="buttons">
<router-link class="link" v-for="(v, i) in navs" :key="i" :to="v.path">
<button custom>
<span class="iconfont" :class="v.icon"></span>
<span class="label">{{ v.label }}</span>
</button>
</router-link>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const navs = ref([
{
path: '/my-account/orders',
label: 'RECENT ORDERS',
icon: 'icon-orders'
},
{
path: '/my-account/address',
label: 'ADDRESSSES',
icon: 'icon-address'
},
{
path: '/my-account/details',
label: 'ACCOUNT DETAILS',
icon: 'icon-tubiao-'
}
])
</script>
<style scoped lang="less">
.welcome {
> .title {
font-weight: 600;
letter-spacing: 2px;
color: #222222;
font-size: 24px;
margin-bottom: 10px;
}
> .tip {
color: #333;
margin-bottom: 20px;
}
> .buttons {
display: flex;
align-items: center;
justify-content: center;
> .link {
margin: 0 4px;
flex: 1;
text-decoration: none;
}
}
}
</style>

16
src/routes.ts
View File

@@ -35,7 +35,21 @@ export const routes: RouteRecordRaw[] = [
{ {
path: 'my-account', path: 'my-account',
name: 'MyAccount', 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'),
},
]
}, },
] ]
} }