+
+
+
+
+
diff --git a/src/pages/my-account/css/style.css b/src/pages/my-account/css/style.css
new file mode 100644
index 0000000..d952c2e
--- /dev/null
+++ b/src/pages/my-account/css/style.css
@@ -0,0 +1,107 @@
+.login,
+.register {
+ padding: 35px;
+ border: 1px solid #e1e1e1;
+ background-color: #fff;
+ border-radius: 5px;
+}
+.login > h2,
+.register > h2 {
+ font-weight: 600;
+ color: #222;
+ font-size: 24px;
+ margin-bottom: 24px;
+}
+.login > form > *,
+.register > form > * {
+ margin-bottom: 20px;
+}
+.login > form > .form-item,
+.register > form > .form-item {
+ display: flex;
+ flex-direction: column;
+}
+.login > form > .form-item > label,
+.register > form > .form-item > label {
+ margin-bottom: 5px;
+ font-size: 16px;
+ line-height: 1.6;
+ color: #333;
+ font-weight: 400;
+}
+.login > form > .form-item > label::after,
+.register > form > .form-item > label::after {
+ content: ' *';
+ color: #f00;
+}
+.login > form > .form-item > .input-container > input,
+.register > form > .form-item > .input-container > input,
+.login > form > .form-item > input,
+.register > form > .form-item > input {
+ width: 100%;
+ height: 35px;
+ padding: 0 17px;
+ font-size: 16px;
+ border: 1px solid #e1e1e1;
+ outline: none;
+}
+.login > form > .form-item > .input-container > input:focus,
+.register > form > .form-item > .input-container > input:focus,
+.login > form > .form-item > input:focus,
+.register > form > .form-item > input:focus {
+ border-color: #000;
+}
+.login > form > .form-item > .input-container,
+.register > form > .form-item > .input-container {
+ position: relative;
+}
+.login > form > .form-item > .input-container > input,
+.register > form > .form-item > .input-container > input {
+ padding-right: 35px;
+}
+.login > form > .form-item > .input-container > .iconfont,
+.register > form > .form-item > .input-container > .iconfont {
+ position: absolute;
+ right: 10px;
+ top: 0;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ cursor: pointer;
+}
+.login > form > .remember,
+.register > form > .remember {
+ display: flex;
+ align-items: center;
+}
+.login > form > .remember > input,
+.register > form > .remember > input {
+ margin: 4px 8px 0 0;
+}
+.login > form > .remember > label,
+.register > form > .remember > label {
+ color: #333;
+}
+.login > form > .remember > .link,
+.register > form > .remember > .link {
+ margin-left: auto;
+ color: #222;
+}
+.login > form > .subscribe,
+.register > form > .subscribe {
+ font-size: 16px;
+ line-height: 1.6;
+ color: #333;
+}
+.login > form > .tip,
+.register > form > .tip {
+ font-size: 16px;
+ line-height: 1.6;
+ color: #333;
+}
+.login > form > .tip > a,
+.register > form > .tip > a {
+ color: #000;
+}
diff --git a/src/pages/my-account/index.vue b/src/pages/my-account/index.vue
new file mode 100644
index 0000000..cc8a6e6
--- /dev/null
+++ b/src/pages/my-account/index.vue
@@ -0,0 +1,61 @@
+
+
+
+
+ {{ v.label }}
+
+
+
+ ![]()
+
+ 12312
+ 12312@example.com
+
+
+
+
+
+
+
+
diff --git a/src/pages/my-account/less/style.less b/src/pages/my-account/less/style.less
new file mode 100644
index 0000000..1c84da8
--- /dev/null
+++ b/src/pages/my-account/less/style.less
@@ -0,0 +1,107 @@
+.login,
+.register {
+ padding: 35px;
+ border: 1px solid #e1e1e1;
+ background-color: #fff;
+ border-radius: 5px;
+
+ >h2 {
+ font-weight: 600;
+ color: #222;
+ font-size: 24px;
+ margin-bottom: 24px;
+ }
+
+ >form {
+ >* {
+ margin-bottom: 20px;
+ }
+
+ >.form-item {
+ display: flex;
+ flex-direction: column;
+
+ >label {
+ margin-bottom: 5px;
+ font-size: 16px;
+ line-height: 1.6;
+ color: #333;
+ font-weight: 400;
+
+ &::after {
+ content: ' *';
+ color: #f00;
+ }
+ }
+
+ >.input-container>input,
+ >input {
+ width: 100%;
+ height: 35px;
+ padding: 0 17px;
+ font-size: 16px;
+ border: 1px solid #e1e1e1;
+ outline: none;
+
+ &:focus {
+ border-color: #000;
+ }
+ }
+
+ >.input-container {
+ position: relative;
+
+ >input {
+ padding-right: 35px;
+ }
+
+ >.iconfont {
+ position: absolute;
+ right: 10px;
+ top: 0;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ >.remember {
+ display: flex;
+ align-items: center;
+
+ >input {
+ margin: 4px 8px 0 0;
+ }
+
+ >label {
+ color: #333;
+ }
+
+ >.link {
+ margin-left: auto;
+ color: #222;
+ }
+
+ }
+
+ >.subscribe {
+ font-size: 16px;
+ line-height: 1.6;
+ color: #333;
+ }
+
+ >.tip {
+ font-size: 16px;
+ line-height: 1.6;
+ color: #333;
+
+ >a {
+ color: #000;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/my-account/login.vue b/src/pages/my-account/login.vue
new file mode 100644
index 0000000..2ec6b2f
--- /dev/null
+++ b/src/pages/my-account/login.vue
@@ -0,0 +1,62 @@
+
+
+
+ + + My account +
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/my-account/orders.vue b/src/pages/my-account/orders.vue
new file mode 100644
index 0000000..1462518
--- /dev/null
+++ b/src/pages/my-account/orders.vue
@@ -0,0 +1,11 @@
+
+ Login
+ +No order has been made yet.
+
+
+
+
diff --git a/src/pages/my-account/register.vue b/src/pages/my-account/register.vue
new file mode 100644
index 0000000..bdfe562
--- /dev/null
+++ b/src/pages/my-account/register.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
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 @@
+
+ Register
+ +
+
+
+
+
+
diff --git a/src/routes.ts b/src/routes.ts
index aef75f4..bd3eb1b 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -32,11 +32,29 @@ export const routes: RouteRecordRaw[] = [
name: 'Aida',
component: () => import('./pages/aida/index.vue')
},
- {
- path: 'events',
+ { path: 'events',
name: 'events',
component: () => import('./pages/events/index.vue')
- }
+ },
+ {
+ path: 'my-account',
+ name: 'MyAccount',
+ 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'),
+ },
+ ]
+ },
]
}
]
diff --git a/src/stores/global.ts b/src/stores/global.ts
new file mode 100644
index 0000000..b9d3eb2
--- /dev/null
+++ b/src/stores/global.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+export const useGlobalStore = defineStore('global', () => {
+ const state = ref({
+ loading: false,// 全局loading
+ })
+
+ const setLoading = (v: boolean) => { state.value.loading = v }
+
+ return {
+ state,
+ setLoading,
+ }
+})
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..92b3821
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,9 @@
+import { createPinia } from 'pinia'
+import { createPersistedState } from 'pinia-persistedstate-plugin'
+// 创建store实例
+const store = createPinia()
+// 使用持久化插件(全局持久化)
+store.use(createPersistedState())
+export default store
+export * from './global'
+export * from './userInfo'
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
new file mode 100644
index 0000000..c6cff4e
--- /dev/null
+++ b/src/stores/userInfo.ts
@@ -0,0 +1,30 @@
+// 每一个存储的模块，命名规则use开头，store结尾
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+export const useUserInfoStore = defineStore('userInfo', () => {
+ const state = ref({
+ userInfo: {},
+ token: '',
+
+ })
+
+ // actions
+ const setUserInfo = (data: any) => {
+ state.value.userInfo = data
+ }
+
+ const setToken = (data: string) => {
+ state.value.token = data
+ }
+
+ const logOut = async () => {
+
+ }
+
+ return {
+ state,
+ setToken,
+ setUserInfo,
+ logOut,
+ }
+})
Welcome to your account page
+
+ Hi XXX, today is a great day to check your account page. You can check also:
+
+
+