登录注册
This commit is contained in:
李志鹏
@@ -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_2woxf8yp826.css" />
|
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_96rmept2ld.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@@ -13,6 +13,8 @@
|
|||||||
"@unhead/vue": "^2.1.15",
|
"@unhead/vue": "^2.1.15",
|
||||||
"gsap": "^3.15.0",
|
"gsap": "^3.15.0",
|
||||||
"less": "^4.6.4",
|
"less": "^4.6.4",
|
||||||
|
"pinia": "^3.0.4",
|
||||||
|
"pinia-persistedstate-plugin": "^0.1.0",
|
||||||
"unhead": "2.1.15",
|
"unhead": "2.1.15",
|
||||||
"vite-ssg": "^28.3.0",
|
"vite-ssg": "^28.3.0",
|
||||||
"vue": "^3.5.34",
|
"vue": "^3.5.34",
|
||||||
|
|||||||
153
pnpm-lock.yaml
generated
153
pnpm-lock.yaml
generated
@@ -20,6 +20,12 @@ importers:
|
|||||||
less:
|
less:
|
||||||
specifier: ^4.6.4
|
specifier: ^4.6.4
|
||||||
version: 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:
|
unhead:
|
||||||
specifier: 2.1.15
|
specifier: 2.1.15
|
||||||
version: 2.1.15
|
version: 2.1.15
|
||||||
@@ -311,6 +317,9 @@ packages:
|
|||||||
'@tybys/wasm-util@0.10.2':
|
'@tybys/wasm-util@0.10.2':
|
||||||
resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
|
resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
|
||||||
|
|
||||||
|
'@types/js-cookie@3.0.6':
|
||||||
|
resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
|
||||||
|
|
||||||
'@types/node@24.12.4':
|
'@types/node@24.12.4':
|
||||||
resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}
|
resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}
|
||||||
|
|
||||||
@@ -355,6 +364,15 @@ packages:
|
|||||||
'@vue/devtools-api@6.6.4':
|
'@vue/devtools-api@6.6.4':
|
||||||
resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
|
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':
|
'@vue/language-core@3.2.8':
|
||||||
resolution: {integrity: sha512-9OiSPQFiAAWNVnXb0d2dcTmcKnFQamhuNES6ayyISrb/mwPWVgoGdAqSfCWqKhQpa3D5gDTcYD+w7ObiheZ81g==}
|
resolution: {integrity: sha512-9OiSPQFiAAWNVnXb0d2dcTmcKnFQamhuNES6ayyISrb/mwPWVgoGdAqSfCWqKhQpa3D5gDTcYD+w7ObiheZ81g==}
|
||||||
|
|
||||||
@@ -405,6 +423,9 @@ packages:
|
|||||||
bidi-js@1.0.3:
|
bidi-js@1.0.3:
|
||||||
resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
|
resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
|
||||||
|
|
||||||
|
birpc@2.9.0:
|
||||||
|
resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
|
||||||
|
|
||||||
buffer-from@1.1.2:
|
buffer-from@1.1.2:
|
||||||
resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
|
resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
|
||||||
|
|
||||||
@@ -430,6 +451,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
|
resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
|
||||||
engines: {node: '>=12.13'}
|
engines: {node: '>=12.13'}
|
||||||
|
|
||||||
|
copy-anything@4.0.5:
|
||||||
|
resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
|
||||||
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
css-tree@3.2.1:
|
css-tree@3.2.1:
|
||||||
resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
|
resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
|
||||||
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
|
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
|
||||||
@@ -503,6 +528,9 @@ packages:
|
|||||||
gsap@3.15.0:
|
gsap@3.15.0:
|
||||||
resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
|
resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
|
||||||
|
|
||||||
|
hookable@5.5.3:
|
||||||
|
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
|
||||||
|
|
||||||
hookable@6.1.1:
|
hookable@6.1.1:
|
||||||
resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}
|
resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}
|
||||||
|
|
||||||
@@ -542,6 +570,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
|
resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
|
||||||
engines: {node: '>=12.13'}
|
engines: {node: '>=12.13'}
|
||||||
|
|
||||||
|
is-what@5.5.0:
|
||||||
|
resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
|
||||||
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
jsdom@28.1.0:
|
jsdom@28.1.0:
|
||||||
resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==}
|
resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==}
|
||||||
engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
|
engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
|
||||||
@@ -652,6 +684,9 @@ packages:
|
|||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
|
||||||
|
mitt@3.0.1:
|
||||||
|
resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
|
||||||
|
|
||||||
ms@2.1.3:
|
ms@2.1.3:
|
||||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||||
|
|
||||||
@@ -687,6 +722,9 @@ packages:
|
|||||||
path-browserify@1.0.1:
|
path-browserify@1.0.1:
|
||||||
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
|
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
|
||||||
|
|
||||||
|
perfect-debounce@1.0.0:
|
||||||
|
resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
|
||||||
|
|
||||||
picocolors@1.1.1:
|
picocolors@1.1.1:
|
||||||
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
|
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
|
||||||
|
|
||||||
@@ -698,6 +736,27 @@ packages:
|
|||||||
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
|
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
|
||||||
engines: {node: '>=6'}
|
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:
|
postcss@8.5.14:
|
||||||
resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
|
resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
|
||||||
engines: {node: ^10 || ^12 || >=14}
|
engines: {node: ^10 || ^12 || >=14}
|
||||||
@@ -717,6 +776,9 @@ packages:
|
|||||||
resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
|
resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
rfdc@1.4.1:
|
||||||
|
resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
|
||||||
|
|
||||||
rolldown@1.0.0:
|
rolldown@1.0.0:
|
||||||
resolution: {integrity: sha512-yD986aXDESFGS95spT1LAv0jssywP4npMEjmMHyN2/5+eE8qQJUype2AaKkRiLgBgyD0LFlubwAht7VmY8rGoA==}
|
resolution: {integrity: sha512-yD986aXDESFGS95spT1LAv0jssywP4npMEjmMHyN2/5+eE8qQJUype2AaKkRiLgBgyD0LFlubwAht7VmY8rGoA==}
|
||||||
engines: {node: ^20.19.0 || >=22.12.0}
|
engines: {node: ^20.19.0 || >=22.12.0}
|
||||||
@@ -748,6 +810,14 @@ packages:
|
|||||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||||
engines: {node: '>=0.10.0'}
|
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:
|
symbol-tree@3.2.4:
|
||||||
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
|
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
|
||||||
|
|
||||||
@@ -860,6 +930,17 @@ packages:
|
|||||||
vscode-uri@3.1.0:
|
vscode-uri@3.1.0:
|
||||||
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
|
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:
|
vue-i18n@11.4.4:
|
||||||
resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==}
|
resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==}
|
||||||
engines: {node: '>= 22'}
|
engines: {node: '>= 22'}
|
||||||
@@ -1114,6 +1195,8 @@ snapshots:
|
|||||||
tslib: 2.8.1
|
tslib: 2.8.1
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
'@types/js-cookie@3.0.6': {}
|
||||||
|
|
||||||
'@types/node@24.12.4':
|
'@types/node@24.12.4':
|
||||||
dependencies:
|
dependencies:
|
||||||
undici-types: 7.16.0
|
undici-types: 7.16.0
|
||||||
@@ -1178,6 +1261,24 @@ snapshots:
|
|||||||
|
|
||||||
'@vue/devtools-api@6.6.4': {}
|
'@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':
|
'@vue/language-core@3.2.8':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@volar/language-core': 2.4.28
|
'@volar/language-core': 2.4.28
|
||||||
@@ -1229,6 +1330,8 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
require-from-string: 2.0.2
|
require-from-string: 2.0.2
|
||||||
|
|
||||||
|
birpc@2.9.0: {}
|
||||||
|
|
||||||
buffer-from@1.1.2: {}
|
buffer-from@1.1.2: {}
|
||||||
|
|
||||||
cac@6.7.14: {}
|
cac@6.7.14: {}
|
||||||
@@ -1250,6 +1353,10 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
is-what: 4.1.16
|
is-what: 4.1.16
|
||||||
|
|
||||||
|
copy-anything@4.0.5:
|
||||||
|
dependencies:
|
||||||
|
is-what: 5.5.0
|
||||||
|
|
||||||
css-tree@3.2.1:
|
css-tree@3.2.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
mdn-data: 2.27.1
|
mdn-data: 2.27.1
|
||||||
@@ -1309,6 +1416,8 @@ snapshots:
|
|||||||
|
|
||||||
gsap@3.15.0: {}
|
gsap@3.15.0: {}
|
||||||
|
|
||||||
|
hookable@5.5.3: {}
|
||||||
|
|
||||||
hookable@6.1.1: {}
|
hookable@6.1.1: {}
|
||||||
|
|
||||||
html-encoding-sniffer@6.0.0:
|
html-encoding-sniffer@6.0.0:
|
||||||
@@ -1357,6 +1466,8 @@ snapshots:
|
|||||||
|
|
||||||
is-what@4.1.16: {}
|
is-what@4.1.16: {}
|
||||||
|
|
||||||
|
is-what@5.5.0: {}
|
||||||
|
|
||||||
jsdom@28.1.0:
|
jsdom@28.1.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@acemir/cssom': 0.9.31
|
'@acemir/cssom': 0.9.31
|
||||||
@@ -1467,6 +1578,8 @@ snapshots:
|
|||||||
mime@1.6.0:
|
mime@1.6.0:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
mitt@3.0.1: {}
|
||||||
|
|
||||||
ms@2.1.3: {}
|
ms@2.1.3: {}
|
||||||
|
|
||||||
muggle-string@0.4.1: {}
|
muggle-string@0.4.1: {}
|
||||||
@@ -1502,6 +1615,8 @@ snapshots:
|
|||||||
|
|
||||||
path-browserify@1.0.1: {}
|
path-browserify@1.0.1: {}
|
||||||
|
|
||||||
|
perfect-debounce@1.0.0: {}
|
||||||
|
|
||||||
picocolors@1.1.1: {}
|
picocolors@1.1.1: {}
|
||||||
|
|
||||||
picomatch@4.0.4: {}
|
picomatch@4.0.4: {}
|
||||||
@@ -1509,6 +1624,32 @@ snapshots:
|
|||||||
pify@4.0.1:
|
pify@4.0.1:
|
||||||
optional: true
|
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:
|
postcss@8.5.14:
|
||||||
dependencies:
|
dependencies:
|
||||||
nanoid: 3.3.12
|
nanoid: 3.3.12
|
||||||
@@ -1524,6 +1665,8 @@ snapshots:
|
|||||||
|
|
||||||
require-from-string@2.0.2: {}
|
require-from-string@2.0.2: {}
|
||||||
|
|
||||||
|
rfdc@1.4.1: {}
|
||||||
|
|
||||||
rolldown@1.0.0:
|
rolldown@1.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@oxc-project/types': 0.129.0
|
'@oxc-project/types': 0.129.0
|
||||||
@@ -1567,6 +1710,12 @@ snapshots:
|
|||||||
|
|
||||||
source-map@0.6.1: {}
|
source-map@0.6.1: {}
|
||||||
|
|
||||||
|
speakingurl@14.0.1: {}
|
||||||
|
|
||||||
|
superjson@2.2.6:
|
||||||
|
dependencies:
|
||||||
|
copy-anything: 4.0.5
|
||||||
|
|
||||||
symbol-tree@3.2.4: {}
|
symbol-tree@3.2.4: {}
|
||||||
|
|
||||||
terser@5.47.1:
|
terser@5.47.1:
|
||||||
@@ -1643,6 +1792,10 @@ snapshots:
|
|||||||
|
|
||||||
vscode-uri@3.1.0: {}
|
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)):
|
vue-i18n@11.4.4(vue@3.5.34(typescript@6.0.3)):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@intlify/core-base': 11.4.4
|
'@intlify/core-base': 11.4.4
|
||||||
|
|||||||
40
src/App.vue
40
src/App.vue
@@ -3,16 +3,22 @@
|
|||||||
<RouterView />
|
<RouterView />
|
||||||
<MainFooter />
|
<MainFooter />
|
||||||
<BackTop />
|
<BackTop />
|
||||||
|
|
||||||
<VideoModel />
|
<VideoModel />
|
||||||
|
<div v-show="loading" class="main-loading">
|
||||||
|
<span class="iconfont icon-loading"></span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterView } from "vue-router";
|
import { ref, computed } from 'vue'
|
||||||
import MainHeader from "./components/main-header.vue";
|
import { RouterView } from 'vue-router'
|
||||||
import MainFooter from "./components/main-footer.vue";
|
import MainHeader from './components/main-header.vue'
|
||||||
import BackTop from "./components/back-top.vue";
|
import MainFooter from './components/main-footer.vue'
|
||||||
import VideoModel from "./components/video-model.vue";
|
import BackTop from './components/back-top.vue'
|
||||||
|
import VideoModel from './components/video-model.vue'
|
||||||
|
import { useGlobalStore } from './stores/global'
|
||||||
|
const globalStore = useGlobalStore()
|
||||||
|
const loading = computed(() => globalStore.state.loading)
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
// .main {
|
// .main {
|
||||||
@@ -25,4 +31,26 @@
|
|||||||
// height: auto;
|
// height: auto;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
.main-loading {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999999999;
|
||||||
|
> .iconfont {
|
||||||
|
font-size: 80px;
|
||||||
|
color: #fff;
|
||||||
|
animation: loading 2s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
html:root {
|
||||||
|
--main-header-height: 85px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -27,11 +27,8 @@
|
|||||||
</down-menu>
|
</down-menu>
|
||||||
<router-link class="link" to="/my-account">
|
<router-link class="link" to="/my-account">
|
||||||
<span class="iconfont icon-tubiao-"></span>
|
<span class="iconfont icon-tubiao-"></span>
|
||||||
<span>{{ $t('MainHeader.LoginOrSignin') }}</span>
|
<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
|
||||||
</router-link>
|
<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
|
||||||
<router-link class="link" to="/my-account">
|
|
||||||
<span class="iconfont icon-tubiao-"></span>
|
|
||||||
<span>{{ $t('MainHeader.MyAccount') }}</span>
|
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -43,6 +40,9 @@
|
|||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
const { locale } = useI18n()
|
const { locale } = useI18n()
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
import { useUserInfoStore } from '@/stores/userInfo'
|
||||||
|
const userInfoStore = useUserInfoStore()
|
||||||
|
const token = computed(() => userInfoStore.state.token)
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const lang = computed(() => route.params.lang)
|
const lang = computed(() => route.params.lang)
|
||||||
if (lang.value) setLang(lang.value)
|
if (lang.value) setLang(lang.value)
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
.main-header {
|
.main-header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 85px;
|
height: var(--main-header-height, 85px);
|
||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { routes } from './routes'
|
|||||||
import '@/assets/css/style.less'
|
import '@/assets/css/style.less'
|
||||||
import directives from './directives/index'
|
import directives from './directives/index'
|
||||||
import i18n from './lang/index'
|
import i18n from './lang/index'
|
||||||
|
import store from './stores/index'
|
||||||
|
|
||||||
export const createApp = ViteSSG(App, {
|
export const createApp = ViteSSG(App, {
|
||||||
routes,
|
routes,
|
||||||
@@ -13,6 +14,7 @@ export const createApp = ViteSSG(App, {
|
|||||||
({ app }) => {
|
({ app }) => {
|
||||||
// 注册全局指令
|
// 注册全局指令
|
||||||
app.use(directives)
|
app.use(directives)
|
||||||
|
app.use(store)
|
||||||
app.use(i18n)
|
app.use(i18n)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
28
src/pages/my-account/account-info.vue
Normal file
28
src/pages/my-account/account-info.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<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>
|
||||||
|
<div class="content"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.account-info {
|
||||||
|
display: flex;
|
||||||
|
>.left{
|
||||||
|
width: 270px;
|
||||||
|
border-right: 1px solid #e1e1e1;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
>.content{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
124
src/pages/my-account/css/style.css
Normal file
124
src/pages/my-account/css/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
61
src/pages/my-account/index.vue
Normal file
61
src/pages/my-account/index.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-account">
|
||||||
|
<div class="header">
|
||||||
|
<h1 class="title">
|
||||||
|
<span class="iconfont icon-tubiao-"></span>
|
||||||
|
<span>My Account</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="content" v-if="!token">
|
||||||
|
<Login />
|
||||||
|
<Register />
|
||||||
|
</div>
|
||||||
|
<div class="content" v-else>
|
||||||
|
<AccountInfo />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import Login from './login.vue'
|
||||||
|
import Register from './register.vue'
|
||||||
|
import AccountInfo from './account-info.vue'
|
||||||
|
import { useUserInfoStore } from '@/stores/userInfo'
|
||||||
|
const userInfoStore = useUserInfoStore()
|
||||||
|
const token = computed(() => userInfoStore.state.token)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.my-account {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
> .header {
|
||||||
|
border-top: var(--main-header-height, 85px) solid #000;
|
||||||
|
background-color: #666;
|
||||||
|
padding: 32px 0;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
> h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 80px;
|
||||||
|
> span {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 60px;
|
||||||
|
> * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
animation: opacity-in 0.3s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
124
src/pages/my-account/less/style.less
Normal file
124
src/pages/my-account/less/style.less
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
62
src/pages/my-account/login.vue
Normal file
62
src/pages/my-account/login.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login">
|
||||||
|
<h2>Login</h2>
|
||||||
|
<form @submit.prevent="handleSubmit">
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="email">Username or email address</label>
|
||||||
|
<input type="email" id="email" name="email" required v-model="fromData.email" />
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
required
|
||||||
|
:type="passShow ? 'text' : 'password'"
|
||||||
|
v-model="fromData.password"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="iconfont"
|
||||||
|
:class="[passShow ? 'icon-hide' : 'icon-show']"
|
||||||
|
@click="passShow = !passShow"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="remember">
|
||||||
|
<input type="checkbox" id="remember" name="remember" v-model="remember" />
|
||||||
|
<label for="remember">Remember me</label>
|
||||||
|
<router-link class="link" to="/my-account/lost-password"
|
||||||
|
>Lost your password?</router-link
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button type="submit">LOG IN</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useGlobalStore } from '@/stores/global'
|
||||||
|
const globalStore = useGlobalStore()
|
||||||
|
import { useUserInfoStore } from '@/stores/userInfo'
|
||||||
|
const userInfoStore = useUserInfoStore()
|
||||||
|
const passShow = ref(false)
|
||||||
|
const remember = ref(false)
|
||||||
|
const fromData = ref({
|
||||||
|
email: '',
|
||||||
|
password: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
console.log(fromData.value, remember.value)
|
||||||
|
globalStore.setLoading(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
globalStore.setLoading(false)
|
||||||
|
userInfoStore.setToken('123456')
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import './less/style.less';
|
||||||
|
</style>
|
||||||
78
src/pages/my-account/register.vue
Normal file
78
src/pages/my-account/register.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="register">
|
||||||
|
<h2>Register</h2>
|
||||||
|
<form @submit.prevent="handleSubmit">
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input
|
||||||
|
type="username"
|
||||||
|
id="username"
|
||||||
|
name="username"
|
||||||
|
required
|
||||||
|
v-model="fromData.username"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="email">Email address</label>
|
||||||
|
<input type="email" id="email" name="email" required v-model="fromData.email" />
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
required
|
||||||
|
:type="passShow ? 'text' : 'password'"
|
||||||
|
v-model="fromData.password"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="iconfont"
|
||||||
|
:class="[passShow ? 'icon-hide' : 'icon-show']"
|
||||||
|
@click="passShow = !passShow"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="subscribe">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="subscribe"
|
||||||
|
name="subscribe"
|
||||||
|
v-model="fromData.subscribe"
|
||||||
|
/>
|
||||||
|
<label for="subscribe"
|
||||||
|
>Subscribe to Code Create product/service news and newsletter</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
Your personal data will be used to support your experience throughout this website,
|
||||||
|
to manage access to your account, and for other purposes described in our
|
||||||
|
<router-link class="link" to="/my-account/privacy-policy"
|
||||||
|
>Privacy Policy</router-link
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button type="submit">REGISTER</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useUserInfoStore } from '@/stores/userInfo'
|
||||||
|
const userInfoStore = useUserInfoStore()
|
||||||
|
const passShow = ref(false)
|
||||||
|
const remember = ref(false)
|
||||||
|
const fromData = ref({
|
||||||
|
username: '',
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
subscribe: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
console.log(fromData.value, remember.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import './less/style.less';
|
||||||
|
</style>
|
||||||
@@ -31,7 +31,12 @@ export const routes: RouteRecordRaw[] = [
|
|||||||
path: 'aida',
|
path: 'aida',
|
||||||
name: 'Aida',
|
name: 'Aida',
|
||||||
component: () => import('./pages/aida/index.vue')
|
component: () => import('./pages/aida/index.vue')
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: 'my-account',
|
||||||
|
name: 'MyAccount',
|
||||||
|
component: () => import('./pages/my-account/index.vue')
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
14
src/stores/global.ts
Normal file
14
src/stores/global.ts
Normal file
@@ -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,
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/stores/index.ts
Normal file
9
src/stores/index.ts
Normal file
@@ -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'
|
||||||
30
src/stores/userInfo.ts
Normal file
30
src/stores/userInfo.ts
Normal file
@@ -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,
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user