From d3277972365f85ad1b60c78d3f883af47d03600b 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 15:22:08 +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 +- package.json | 2 + pnpm-lock.yaml | 153 ++++++++++++++++++++++++++ src/App.vue | 40 ++++++- src/components/main-header.vue | 12 +- src/main.ts | 2 + src/pages/my-account/account-info.vue | 28 +++++ src/pages/my-account/css/style.css | 124 +++++++++++++++++++++ src/pages/my-account/index.vue | 61 ++++++++++ src/pages/my-account/less/style.less | 124 +++++++++++++++++++++ src/pages/my-account/login.vue | 62 +++++++++++ src/pages/my-account/register.vue | 78 +++++++++++++ src/routes.ts | 7 +- src/stores/global.ts | 14 +++ src/stores/index.ts | 9 ++ src/stores/userInfo.ts | 30 +++++ 16 files changed, 734 insertions(+), 14 deletions(-) create mode 100644 src/pages/my-account/account-info.vue create mode 100644 src/pages/my-account/css/style.css create mode 100644 src/pages/my-account/index.vue create mode 100644 src/pages/my-account/less/style.less create mode 100644 src/pages/my-account/login.vue create mode 100644 src/pages/my-account/register.vue create mode 100644 src/stores/global.ts create mode 100644 src/stores/index.ts create mode 100644 src/stores/userInfo.ts diff --git a/index.html b/index.html index 3f628a8..c571ecb 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ test-ssg - +
diff --git a/package.json b/package.json index eda43e9..eb173e3 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "@unhead/vue": "^2.1.15", "gsap": "^3.15.0", "less": "^4.6.4", + "pinia": "^3.0.4", + "pinia-persistedstate-plugin": "^0.1.0", "unhead": "2.1.15", "vite-ssg": "^28.3.0", "vue": "^3.5.34", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 69cbf98..c73754a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,12 @@ importers: less: specifier: ^4.6.4 version: 4.6.4 + pinia: + specifier: ^3.0.4 + version: 3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)) + pinia-persistedstate-plugin: + specifier: ^0.1.0 + version: 0.1.0(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)) unhead: specifier: 2.1.15 version: 2.1.15 @@ -311,6 +317,9 @@ packages: '@tybys/wasm-util@0.10.2': resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==} + '@types/js-cookie@3.0.6': + resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==} + '@types/node@24.12.4': resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==} @@ -355,6 +364,15 @@ packages: '@vue/devtools-api@6.6.4': resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==} + '@vue/devtools-api@7.7.9': + resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==} + + '@vue/devtools-kit@7.7.9': + resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==} + + '@vue/devtools-shared@7.7.9': + resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==} + '@vue/language-core@3.2.8': resolution: {integrity: sha512-9OiSPQFiAAWNVnXb0d2dcTmcKnFQamhuNES6ayyISrb/mwPWVgoGdAqSfCWqKhQpa3D5gDTcYD+w7ObiheZ81g==} @@ -405,6 +423,9 @@ packages: bidi-js@1.0.3: resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==} + birpc@2.9.0: + resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==} + buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -430,6 +451,10 @@ packages: resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==} engines: {node: '>=12.13'} + copy-anything@4.0.5: + resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==} + engines: {node: '>=18'} + css-tree@3.2.1: resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -503,6 +528,9 @@ packages: gsap@3.15.0: resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==} + hookable@5.5.3: + resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==} + hookable@6.1.1: resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==} @@ -542,6 +570,10 @@ packages: resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==} engines: {node: '>=12.13'} + is-what@5.5.0: + resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==} + engines: {node: '>=18'} + jsdom@28.1.0: resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} @@ -652,6 +684,9 @@ packages: engines: {node: '>=4'} hasBin: true + mitt@3.0.1: + resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -687,6 +722,9 @@ packages: path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + perfect-debounce@1.0.0: + resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==} + picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -698,6 +736,27 @@ packages: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} engines: {node: '>=6'} + pinia-persistedstate-plugin@0.1.0: + resolution: {integrity: sha512-ToKR/EJzhhXElQ5YL8PVVY4CqLJjywxszAJjOCgprjmIVkTrPBsEOY4b/ATOzHQc1TtuaJs/3MJuoCpA3pv8Ew==} + + pinia@2.3.1: + resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==} + peerDependencies: + typescript: '>=4.4.4' + vue: ^2.7.0 || ^3.5.11 + peerDependenciesMeta: + typescript: + optional: true + + pinia@3.0.4: + resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==} + peerDependencies: + typescript: '>=4.5.0' + vue: ^3.5.11 + peerDependenciesMeta: + typescript: + optional: true + postcss@8.5.14: resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==} engines: {node: ^10 || ^12 || >=14} @@ -717,6 +776,9 @@ packages: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} + rfdc@1.4.1: + resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==} + rolldown@1.0.0: resolution: {integrity: sha512-yD986aXDESFGS95spT1LAv0jssywP4npMEjmMHyN2/5+eE8qQJUype2AaKkRiLgBgyD0LFlubwAht7VmY8rGoA==} engines: {node: ^20.19.0 || >=22.12.0} @@ -748,6 +810,14 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + speakingurl@14.0.1: + resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==} + engines: {node: '>=0.10.0'} + + superjson@2.2.6: + resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==} + engines: {node: '>=16'} + symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -860,6 +930,17 @@ packages: vscode-uri@3.1.0: resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} + vue-demi@0.14.10: + resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} + engines: {node: '>=12'} + hasBin: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue-i18n@11.4.4: resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==} engines: {node: '>= 22'} @@ -1114,6 +1195,8 @@ snapshots: tslib: 2.8.1 optional: true + '@types/js-cookie@3.0.6': {} + '@types/node@24.12.4': dependencies: undici-types: 7.16.0 @@ -1178,6 +1261,24 @@ snapshots: '@vue/devtools-api@6.6.4': {} + '@vue/devtools-api@7.7.9': + dependencies: + '@vue/devtools-kit': 7.7.9 + + '@vue/devtools-kit@7.7.9': + dependencies: + '@vue/devtools-shared': 7.7.9 + birpc: 2.9.0 + hookable: 5.5.3 + mitt: 3.0.1 + perfect-debounce: 1.0.0 + speakingurl: 14.0.1 + superjson: 2.2.6 + + '@vue/devtools-shared@7.7.9': + dependencies: + rfdc: 1.4.1 + '@vue/language-core@3.2.8': dependencies: '@volar/language-core': 2.4.28 @@ -1229,6 +1330,8 @@ snapshots: dependencies: require-from-string: 2.0.2 + birpc@2.9.0: {} + buffer-from@1.1.2: {} cac@6.7.14: {} @@ -1250,6 +1353,10 @@ snapshots: dependencies: is-what: 4.1.16 + copy-anything@4.0.5: + dependencies: + is-what: 5.5.0 + css-tree@3.2.1: dependencies: mdn-data: 2.27.1 @@ -1309,6 +1416,8 @@ snapshots: gsap@3.15.0: {} + hookable@5.5.3: {} + hookable@6.1.1: {} html-encoding-sniffer@6.0.0: @@ -1357,6 +1466,8 @@ snapshots: is-what@4.1.16: {} + is-what@5.5.0: {} + jsdom@28.1.0: dependencies: '@acemir/cssom': 0.9.31 @@ -1467,6 +1578,8 @@ snapshots: mime@1.6.0: optional: true + mitt@3.0.1: {} + ms@2.1.3: {} muggle-string@0.4.1: {} @@ -1502,6 +1615,8 @@ snapshots: path-browserify@1.0.1: {} + perfect-debounce@1.0.0: {} + picocolors@1.1.1: {} picomatch@4.0.4: {} @@ -1509,6 +1624,32 @@ snapshots: pify@4.0.1: optional: true + pinia-persistedstate-plugin@0.1.0(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)): + dependencies: + '@types/js-cookie': 3.0.6 + pinia: 2.3.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)) + transitivePeerDependencies: + - '@vue/composition-api' + - typescript + - vue + + pinia@2.3.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)): + dependencies: + '@vue/devtools-api': 6.6.4 + vue: 3.5.34(typescript@6.0.3) + vue-demi: 0.14.10(vue@3.5.34(typescript@6.0.3)) + optionalDependencies: + typescript: 6.0.3 + transitivePeerDependencies: + - '@vue/composition-api' + + pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)): + dependencies: + '@vue/devtools-api': 7.7.9 + vue: 3.5.34(typescript@6.0.3) + optionalDependencies: + typescript: 6.0.3 + postcss@8.5.14: dependencies: nanoid: 3.3.12 @@ -1524,6 +1665,8 @@ snapshots: require-from-string@2.0.2: {} + rfdc@1.4.1: {} + rolldown@1.0.0: dependencies: '@oxc-project/types': 0.129.0 @@ -1567,6 +1710,12 @@ snapshots: source-map@0.6.1: {} + speakingurl@14.0.1: {} + + superjson@2.2.6: + dependencies: + copy-anything: 4.0.5 + symbol-tree@3.2.4: {} terser@5.47.1: @@ -1643,6 +1792,10 @@ snapshots: vscode-uri@3.1.0: {} + vue-demi@0.14.10(vue@3.5.34(typescript@6.0.3)): + dependencies: + vue: 3.5.34(typescript@6.0.3) + vue-i18n@11.4.4(vue@3.5.34(typescript@6.0.3)): dependencies: '@intlify/core-base': 11.4.4 diff --git a/src/App.vue b/src/App.vue index efb5f68..11d7713 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,16 +3,22 @@ - +
+ +
+ \ No newline at end of file diff --git a/src/components/main-header.vue b/src/components/main-header.vue index d322c7d..e05b199 100644 --- a/src/components/main-header.vue +++ b/src/components/main-header.vue @@ -27,11 +27,8 @@ - {{ $t('MainHeader.LoginOrSignin') }} - - - - {{ $t('MainHeader.MyAccount') }} + {{ $t('MainHeader.MyAccount') }} + {{ $t('MainHeader.LoginOrSignin') }} @@ -43,6 +40,9 @@ import { useI18n } from 'vue-i18n' const { locale } = useI18n() import { useRoute } from 'vue-router' + import { useUserInfoStore } from '@/stores/userInfo' + const userInfoStore = useUserInfoStore() + const token = computed(() => userInfoStore.state.token) const route = useRoute() const lang = computed(() => route.params.lang) if (lang.value) setLang(lang.value) @@ -119,7 +119,7 @@ .main-header { position: fixed; width: 100%; - height: 85px; + height: var(--main-header-height, 85px); padding: 15px 30px; box-sizing: border-box; top: 0; diff --git a/src/main.ts b/src/main.ts index 5ad70bb..2230bb3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,7 @@ import { routes } from './routes' import '@/assets/css/style.less' import directives from './directives/index' import i18n from './lang/index' +import store from './stores/index' export const createApp = ViteSSG(App, { routes, @@ -13,6 +14,7 @@ export const createApp = ViteSSG(App, { ({ app }) => { // 注册全局指令 app.use(directives) + app.use(store) app.use(i18n) } ) diff --git a/src/pages/my-account/account-info.vue b/src/pages/my-account/account-info.vue new file mode 100644 index 0000000..3271576 --- /dev/null +++ b/src/pages/my-account/account-info.vue @@ -0,0 +1,28 @@ + + + + diff --git a/src/pages/my-account/css/style.css b/src/pages/my-account/css/style.css new file mode 100644 index 0000000..badda4a --- /dev/null +++ b/src/pages/my-account/css/style.css @@ -0,0 +1,124 @@ +.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; +} +.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; +} diff --git a/src/pages/my-account/index.vue b/src/pages/my-account/index.vue new file mode 100644 index 0000000..9a59245 --- /dev/null +++ b/src/pages/my-account/index.vue @@ -0,0 +1,61 @@ + + + + diff --git a/src/pages/my-account/less/style.less b/src/pages/my-account/less/style.less new file mode 100644 index 0000000..5a80f12 --- /dev/null +++ b/src/pages/my-account/less/style.less @@ -0,0 +1,124 @@ +.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; + } + } + + >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; + } + } + } +} \ 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..69934a3 --- /dev/null +++ b/src/pages/my-account/login.vue @@ -0,0 +1,62 @@ + + + + diff --git a/src/pages/my-account/register.vue b/src/pages/my-account/register.vue new file mode 100644 index 0000000..0c63593 --- /dev/null +++ b/src/pages/my-account/register.vue @@ -0,0 +1,78 @@ + + + + diff --git a/src/routes.ts b/src/routes.ts index 125317e..56f02a2 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -31,7 +31,12 @@ export const routes: RouteRecordRaw[] = [ path: 'aida', name: 'Aida', component: () => import('./pages/aida/index.vue') - } + }, + { + path: 'my-account', + name: 'MyAccount', + component: () => import('./pages/my-account/index.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, + } +})