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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<body>
<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);
}
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;

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

@@ -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;

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

@@ -17,7 +17,7 @@
<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
<router-link
class="link"
:to="`/${item.value}`"
:to="`/${item.value}${path}`"
v-for="item in langList"
:key="item.value"
v-show="item.value !== locale"
@@ -45,9 +45,10 @@
const token = computed(() => 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([
{

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

@@ -1,27 +1,114 @@
<template>
<div class="account-info">
<div class="left">
<img alt="" src="" class="avatar" />
<div class="name">12312</div>
<div class="name">12312</div>
<div class="name">12312</div>
<div class="info">
<img alt="" src="" class="avatar" />
<div class="name">12312</div>
<div class="email">12312@example.com</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 class="content"></div>
</div>
</template>
<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>
<style scoped lang="less">
.account-info {
display: flex;
>.left{
> .left {
width: 270px;
border-right: 1px solid #e1e1e1;
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;
}
}

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

@@ -105,20 +105,3 @@
.register > form > .tip > a {
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">
<h1 class="title">
<span class="iconfont icon-tubiao-"></span>
<span>My Account</span>
<span>My account</span>
</h1>
</div>
<div class="content" v-if="!token">

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

@@ -103,22 +103,5 @@
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
>
</div>
<button type="submit">LOG IN</button>
<button type="submit" custom>LOG IN</button>
</form>
</div>
</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
>
</div>
<button type="submit">REGISTER</button>
<button type="submit" custom>REGISTER</button>
</form>
</div>
</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',
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'),
},
]
},
]
}