Compare commits
2 Commits
5fd32162ac
...
15a51caf4b
| Author | SHA1 | Date |
|---|---|---|
cast1e
|
15a51caf4b | |
|
cast1e
|
02d0402c15 |
|
|
@ -14,7 +14,6 @@
|
|||
"@types/animejs": "^3.1.13",
|
||||
"animejs": "^3.2.2",
|
||||
"axios": "^1.5.1",
|
||||
"boxicons": "^2.1.4",
|
||||
"core-js": "^3.8.3",
|
||||
"crypto-js": "^4.1.1",
|
||||
"marked": "^11.1.1",
|
||||
|
|
|
|||
164
pnpm-lock.yaml
164
pnpm-lock.yaml
|
|
@ -23,9 +23,6 @@ importers:
|
|||
axios:
|
||||
specifier: ^1.5.1
|
||||
version: 1.8.1
|
||||
boxicons:
|
||||
specifier: ^2.1.4
|
||||
version: 2.1.4
|
||||
core-js:
|
||||
specifier: ^3.8.3
|
||||
version: 3.41.0
|
||||
|
|
@ -1454,9 +1451,6 @@ packages:
|
|||
'@webassemblyjs/wast-printer@1.14.1':
|
||||
resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
|
||||
|
||||
'@webcomponents/webcomponentsjs@2.8.0':
|
||||
resolution: {integrity: sha512-loGD63sacRzOzSJgQnB9ZAhaQGkN7wl2Zuw7tsphI5Isa0irijrRo6EnJii/GgjGefIFO8AIO7UivzRhFaEk9w==}
|
||||
|
||||
'@xtuc/ieee754@1.2.0':
|
||||
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
|
||||
|
||||
|
|
@ -1651,9 +1645,6 @@ packages:
|
|||
boolbase@1.0.0:
|
||||
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
|
||||
|
||||
boxicons@2.1.4:
|
||||
resolution: {integrity: sha512-BvJNfYfnE4g9WQ7GL91fftxMOTwAleWlPFwvQJPYb/Ju7aLjlQ/Eu55AH9JLNk/OR82z+ZSq4TbKzbV/e5Rr0A==}
|
||||
|
||||
brace-expansion@1.1.11:
|
||||
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
|
||||
|
||||
|
|
@ -2198,24 +2189,9 @@ packages:
|
|||
resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
|
||||
engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
|
||||
|
||||
detect-hover@1.0.3:
|
||||
resolution: {integrity: sha512-HtLoY+tClgYucJNiovNICGWFp9nOGVmHY44s7L62iPqORXM9vujeWFaVcqtA7XRvp/2Y+4RBUfHbDKFGN+xxZQ==}
|
||||
|
||||
detect-it@3.0.7:
|
||||
resolution: {integrity: sha512-RxpgcdbatUX6epJE09K16iJqF7x6iEcEdoL18FR2zpBO4JhnL7aMOAUoUEyexdtbWOSfTmoDWmeD6mwRBQyRXg==}
|
||||
|
||||
detect-node@2.1.0:
|
||||
resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
|
||||
|
||||
detect-passive-events@1.0.5:
|
||||
resolution: {integrity: sha512-foW7Q35wwOCxVzW0xLf5XeB5Fhe7oyRgvkBYdiP9IWgLMzjqUqTvsJv9ymuEWGjY6AoDXD3OC294+Z9iuOw0QA==}
|
||||
|
||||
detect-pointer@1.0.3:
|
||||
resolution: {integrity: sha512-d0o/Puo3fiGSCXy6H039h9Kwz+mmYCGKZ/qtPFnpN3WfsumjC1C9b5KKvRu+aYnfdI8peqN/iAe7dPd85qIt2g==}
|
||||
|
||||
detect-touch-events@2.0.2:
|
||||
resolution: {integrity: sha512-g8GWBkJLiIDRJfRXEdrd1wMXpNyGId2DkbfuwFahSb4OCvn717hyRJtAcEDISfp3zkwEhZ4Y4woHPA6DeyB3Fw==}
|
||||
|
||||
dir-glob@3.0.1:
|
||||
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -2673,12 +2649,6 @@ packages:
|
|||
highlight.js@10.7.3:
|
||||
resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
|
||||
|
||||
history@4.10.1:
|
||||
resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
|
||||
|
||||
hoist-non-react-statics@2.5.5:
|
||||
resolution: {integrity: sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==}
|
||||
|
||||
hookable@5.5.3:
|
||||
resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
|
||||
|
||||
|
|
@ -2784,9 +2754,6 @@ packages:
|
|||
inherits@2.0.4:
|
||||
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
|
||||
|
||||
invariant@2.2.4:
|
||||
resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
|
||||
|
||||
ipaddr.js@1.9.1:
|
||||
resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
|
||||
engines: {node: '>= 0.10'}
|
||||
|
|
@ -2870,9 +2837,6 @@ packages:
|
|||
resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
isarray@0.0.1:
|
||||
resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
|
||||
|
||||
isarray@1.0.0:
|
||||
resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
|
||||
|
||||
|
|
@ -3411,9 +3375,6 @@ packages:
|
|||
path-to-regexp@0.1.12:
|
||||
resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
|
||||
|
||||
path-to-regexp@1.9.0:
|
||||
resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==}
|
||||
|
||||
path-type@4.0.0:
|
||||
resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -3743,24 +3704,9 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^16.14.0
|
||||
|
||||
react-interactive@0.8.3:
|
||||
resolution: {integrity: sha512-mmRvA9aKP7zu9kVfP1AX1egX8tFlnE3DDXq92z0JTZezfOpmeQBzr77O1+mTV54OOmn+M2t6c5kFD5VnuFoM7A==}
|
||||
peerDependencies:
|
||||
react: '>=15'
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
react-router-dom@4.3.1:
|
||||
resolution: {integrity: sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==}
|
||||
peerDependencies:
|
||||
react: '>=15'
|
||||
|
||||
react-router@4.3.1:
|
||||
resolution: {integrity: sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==}
|
||||
peerDependencies:
|
||||
react: '>=15'
|
||||
|
||||
react@16.14.0:
|
||||
resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
@ -3830,9 +3776,6 @@ packages:
|
|||
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
resolve-pathname@3.0.0:
|
||||
resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
|
||||
|
||||
resolve@1.22.10:
|
||||
resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
|
@ -4172,12 +4115,6 @@ packages:
|
|||
thunky@1.1.0:
|
||||
resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
|
||||
|
||||
tiny-invariant@1.3.3:
|
||||
resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
|
||||
|
||||
tiny-warning@1.0.3:
|
||||
resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
|
||||
|
||||
tinyglobby@0.2.12:
|
||||
resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
|
@ -4330,9 +4267,6 @@ packages:
|
|||
validate-npm-package-license@3.0.4:
|
||||
resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
|
||||
|
||||
value-equal@1.0.1:
|
||||
resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
|
||||
|
||||
vary@1.1.2:
|
||||
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
|
||||
engines: {node: '>= 0.8'}
|
||||
|
|
@ -4483,9 +4417,6 @@ packages:
|
|||
webpack-plugin-vuetify:
|
||||
optional: true
|
||||
|
||||
warning@4.0.3:
|
||||
resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
|
||||
|
||||
watchpack@2.4.2:
|
||||
resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
|
|
@ -6368,8 +6299,6 @@ snapshots:
|
|||
'@webassemblyjs/ast': 1.14.1
|
||||
'@xtuc/long': 4.2.2
|
||||
|
||||
'@webcomponents/webcomponentsjs@2.8.0': {}
|
||||
|
||||
'@xtuc/ieee754@1.2.0': {}
|
||||
|
||||
'@xtuc/long@4.2.2': {}
|
||||
|
|
@ -6574,15 +6503,6 @@ snapshots:
|
|||
|
||||
boolbase@1.0.0: {}
|
||||
|
||||
boxicons@2.1.4:
|
||||
dependencies:
|
||||
'@webcomponents/webcomponentsjs': 2.8.0
|
||||
prop-types: 15.8.1
|
||||
react: 16.14.0
|
||||
react-dom: 16.14.0(react@16.14.0)
|
||||
react-interactive: 0.8.3(react@16.14.0)
|
||||
react-router-dom: 4.3.1(react@16.14.0)
|
||||
|
||||
brace-expansion@1.1.11:
|
||||
dependencies:
|
||||
balanced-match: 1.0.2
|
||||
|
|
@ -6986,23 +6906,8 @@ snapshots:
|
|||
|
||||
destroy@1.2.0: {}
|
||||
|
||||
detect-hover@1.0.3: {}
|
||||
|
||||
detect-it@3.0.7:
|
||||
dependencies:
|
||||
detect-hover: 1.0.3
|
||||
detect-passive-events: 1.0.5
|
||||
detect-pointer: 1.0.3
|
||||
detect-touch-events: 2.0.2
|
||||
|
||||
detect-node@2.1.0: {}
|
||||
|
||||
detect-passive-events@1.0.5: {}
|
||||
|
||||
detect-pointer@1.0.3: {}
|
||||
|
||||
detect-touch-events@2.0.2: {}
|
||||
|
||||
dir-glob@3.0.1:
|
||||
dependencies:
|
||||
path-type: 4.0.0
|
||||
|
|
@ -7540,17 +7445,6 @@ snapshots:
|
|||
|
||||
highlight.js@10.7.3: {}
|
||||
|
||||
history@4.10.1:
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.9
|
||||
loose-envify: 1.4.0
|
||||
resolve-pathname: 3.0.0
|
||||
tiny-invariant: 1.3.3
|
||||
tiny-warning: 1.0.3
|
||||
value-equal: 1.0.1
|
||||
|
||||
hoist-non-react-statics@2.5.5: {}
|
||||
|
||||
hookable@5.5.3: {}
|
||||
|
||||
hosted-git-info@2.8.9: {}
|
||||
|
|
@ -7664,10 +7558,6 @@ snapshots:
|
|||
|
||||
inherits@2.0.4: {}
|
||||
|
||||
invariant@2.2.4:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
ipaddr.js@1.9.1: {}
|
||||
|
||||
ipaddr.js@2.2.0: {}
|
||||
|
|
@ -7722,8 +7612,6 @@ snapshots:
|
|||
dependencies:
|
||||
is-docker: 2.2.1
|
||||
|
||||
isarray@0.0.1: {}
|
||||
|
||||
isarray@1.0.0: {}
|
||||
|
||||
isexe@2.0.0: {}
|
||||
|
|
@ -7885,6 +7773,7 @@ snapshots:
|
|||
loose-envify@1.4.0:
|
||||
dependencies:
|
||||
js-tokens: 4.0.0
|
||||
optional: true
|
||||
|
||||
lower-case@2.0.2:
|
||||
dependencies:
|
||||
|
|
@ -8214,10 +8103,6 @@ snapshots:
|
|||
|
||||
path-to-regexp@0.1.12: {}
|
||||
|
||||
path-to-regexp@1.9.0:
|
||||
dependencies:
|
||||
isarray: 0.0.1
|
||||
|
||||
path-type@4.0.0: {}
|
||||
|
||||
pathe@2.0.3: {}
|
||||
|
|
@ -8487,6 +8372,7 @@ snapshots:
|
|||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
react-is: 16.13.1
|
||||
optional: true
|
||||
|
||||
proxy-addr@2.0.7:
|
||||
dependencies:
|
||||
|
|
@ -8534,42 +8420,17 @@ snapshots:
|
|||
prop-types: 15.8.1
|
||||
react: 16.14.0
|
||||
scheduler: 0.19.1
|
||||
optional: true
|
||||
|
||||
react-interactive@0.8.3(react@16.14.0):
|
||||
dependencies:
|
||||
detect-it: 3.0.7
|
||||
object-assign: 4.1.1
|
||||
prop-types: 15.8.1
|
||||
react: 16.14.0
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
react-router-dom@4.3.1(react@16.14.0):
|
||||
dependencies:
|
||||
history: 4.10.1
|
||||
invariant: 2.2.4
|
||||
loose-envify: 1.4.0
|
||||
prop-types: 15.8.1
|
||||
react: 16.14.0
|
||||
react-router: 4.3.1(react@16.14.0)
|
||||
warning: 4.0.3
|
||||
|
||||
react-router@4.3.1(react@16.14.0):
|
||||
dependencies:
|
||||
history: 4.10.1
|
||||
hoist-non-react-statics: 2.5.5
|
||||
invariant: 2.2.4
|
||||
loose-envify: 1.4.0
|
||||
path-to-regexp: 1.9.0
|
||||
prop-types: 15.8.1
|
||||
react: 16.14.0
|
||||
warning: 4.0.3
|
||||
react-is@16.13.1:
|
||||
optional: true
|
||||
|
||||
react@16.14.0:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
prop-types: 15.8.1
|
||||
optional: true
|
||||
|
||||
read-pkg-up@7.0.1:
|
||||
dependencies:
|
||||
|
|
@ -8649,8 +8510,6 @@ snapshots:
|
|||
|
||||
resolve-from@4.0.0: {}
|
||||
|
||||
resolve-pathname@3.0.0: {}
|
||||
|
||||
resolve@1.22.10:
|
||||
dependencies:
|
||||
is-core-module: 2.16.1
|
||||
|
|
@ -8716,6 +8575,7 @@ snapshots:
|
|||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
optional: true
|
||||
|
||||
schema-utils@2.7.1:
|
||||
dependencies:
|
||||
|
|
@ -9046,10 +8906,6 @@ snapshots:
|
|||
|
||||
thunky@1.1.0: {}
|
||||
|
||||
tiny-invariant@1.3.3: {}
|
||||
|
||||
tiny-warning@1.0.3: {}
|
||||
|
||||
tinyglobby@0.2.12:
|
||||
dependencies:
|
||||
fdir: 6.4.3(picomatch@4.0.2)
|
||||
|
|
@ -9196,8 +9052,6 @@ snapshots:
|
|||
spdx-correct: 3.2.0
|
||||
spdx-expression-parse: 3.0.1
|
||||
|
||||
value-equal@1.0.1: {}
|
||||
|
||||
vary@1.1.2: {}
|
||||
|
||||
vite-plugin-vuetify@2.1.0(vite@6.2.0(@types/node@20.17.23)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.15):
|
||||
|
|
@ -9360,10 +9214,6 @@ snapshots:
|
|||
typescript: 5.8.2
|
||||
vite-plugin-vuetify: 2.1.0(vite@6.2.0(@types/node@20.17.23)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))(vuetify@3.7.15)
|
||||
|
||||
warning@4.0.3:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
watchpack@2.4.2:
|
||||
dependencies:
|
||||
glob-to-regexp: 0.4.1
|
||||
|
|
|
|||
26
src/App.vue
26
src/App.vue
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="pconly">
|
||||
<div id="navibar">
|
||||
<div class="pconly main-navibar">
|
||||
<div class="main-navibar">
|
||||
<div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
|
||||
<div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
|
||||
<div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
|
||||
|
|
@ -8,9 +8,11 @@
|
|||
<div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view style=""></router-view>
|
||||
<div class="main-app-view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="mbonly">
|
||||
<div id="navibar">
|
||||
<div class="main-navibar">
|
||||
<div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
|
||||
<div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
|
||||
<div class="navi-item"><v-icon @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
|
||||
|
|
@ -32,8 +34,8 @@ const go = (path: string) => {
|
|||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#navibar {
|
||||
height: 55px;
|
||||
.main-navibar {
|
||||
height: 60px;
|
||||
border-top: solid 1px var(--bd-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -58,7 +60,7 @@ const go = (path: string) => {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#navibar {
|
||||
.main-navibar {
|
||||
height: 60px;
|
||||
border-bottom: solid 1px var(--bd-color);
|
||||
display: flex;
|
||||
|
|
@ -86,4 +88,14 @@ const go = (path: string) => {
|
|||
.link {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.main-app-view{
|
||||
height: calc(100% - 60px);
|
||||
width: 100%;
|
||||
}
|
||||
.main-navibar{
|
||||
background-color: var(--bg-color-solid);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,7 +48,7 @@ html.dark .dynamic-bg-wrapper::after {
|
|||
.dynamic-bg-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: fit-content;
|
||||
height:max-content;
|
||||
width: 100%;
|
||||
/* Soft pastel gradient background */
|
||||
display: flex;
|
||||
|
|
@ -116,8 +116,8 @@ html.dark .dynamic-bg-wrapper::after {
|
|||
|
||||
.dynamic-bg-content {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
padding: 10px;
|
||||
height: max-content;
|
||||
margin-bottom: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,14 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
|
|||
|
||||
## 3.更新日志
|
||||
|
||||
### 1.03
|
||||
|
||||
1. 更新内容
|
||||
|
||||
- 使用 anime.js 构建动画效果
|
||||
- 修复显示 bug
|
||||
- 主页视觉效果更新
|
||||
|
||||
### 1.02
|
||||
|
||||
1. 更新内容
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
html{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -8,7 +9,7 @@ body {
|
|||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow: hidden !important;
|
||||
font-family:
|
||||
'MiSans',
|
||||
-apple-system, /* macOS, iOS */
|
||||
|
|
@ -32,38 +33,12 @@ body {
|
|||
.pconly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes enter {
|
||||
0% {
|
||||
translate: 100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.mbonly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes enter {
|
||||
0% {
|
||||
translate: 100px 0;
|
||||
opacity: 0;
|
||||
/* filter: blur(20px); */
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
/* filter: blur(0px); */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
@ -88,10 +63,9 @@ html.dark {
|
|||
}
|
||||
|
||||
.container {
|
||||
height: calc(100% - 20px);
|
||||
width: calc(100% - 20px);
|
||||
/* padding: 20px; */
|
||||
animation: enter ease-out 0.6s backwards;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.colbox {
|
||||
|
|
@ -110,7 +84,6 @@ html.dark {
|
|||
padding: 20px;
|
||||
margin: 10px;
|
||||
color: var(--text-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
declare const __BUILD_TIME__: string;
|
||||
declare const __APP_VERSION__: string;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div style="flex-grow: 2;margin:30px;" class="rowbox">
|
||||
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
|
||||
<div id="title">wordIn</div>
|
||||
<div>当前版本: 1.03 beta1 <br /> 更新时间:2025年3月7日 12:03</div>
|
||||
<div>当前版本: {{ appVersion }} <br /> 更新时间: {{ buildTime }}</div>
|
||||
</div>
|
||||
<div class="colbox card home-view-option-wrapper">
|
||||
<router-link to="/select" class="button">
|
||||
|
|
@ -50,6 +50,9 @@ import { useRouter } from 'vue-router';
|
|||
import DynamicBackground from '@/components/DynamicBackground.vue';
|
||||
import animejs from 'animejs';
|
||||
|
||||
const appVersion = __APP_VERSION__;
|
||||
const buildTime = __BUILD_TIME__;
|
||||
|
||||
const store = useMainStore();
|
||||
const router = useRouter();
|
||||
const img_url = ref("");
|
||||
|
|
@ -124,10 +127,6 @@ onMounted(()=>{
|
|||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.home-view-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#title {
|
||||
font-size: 100px;
|
||||
color: var(--text-color);
|
||||
|
|
@ -216,7 +215,7 @@ html.dark .button {
|
|||
}
|
||||
|
||||
.home-view-container{
|
||||
height: calc(100% - 65px);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
|
||||
<div class="container editor-container">
|
||||
<el-page-header class="editor-header editor-animation-el" @back="router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
||||
</template>
|
||||
|
|
@ -11,10 +11,9 @@
|
|||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="del_set"><box-icon color="var(--text-color)" name='trash'
|
||||
size="20px"></box-icon>删除</el-dropdown-item>
|
||||
<el-dropdown-item @click="addTo"><box-icon color="var(--text-color)" name='plus'
|
||||
size="18px"></box-icon>添加到</el-dropdown-item>
|
||||
<el-dropdown-item @click="del_set"><v-icon size="20px">mdi-delete</v-icon>删除</el-dropdown-item>
|
||||
<el-dropdown-item @click="addTo"><v-icon
|
||||
size="18px">mdi-plus</v-icon>添加到</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div class="rowbox">
|
||||
<div class="card">
|
||||
<div class="card editor-animation-el">
|
||||
<div class="title">添加单词</div>
|
||||
<el-input ref="input1" autofocus @change="focusnext($refs.input2)"
|
||||
v-model="new_word.word"></el-input>
|
||||
|
|
@ -39,7 +38,7 @@
|
|||
</div>
|
||||
<el-button @click="add_word()" type="primary">添加</el-button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card editor-animation-el">
|
||||
<div class="title">更改名称</div>
|
||||
<div class="colbox">
|
||||
<el-text class="mx-1" style="width: 60px;">新名称:</el-text>
|
||||
|
|
@ -48,7 +47,7 @@
|
|||
<el-button @click="change_name()" type="primary">更改名称</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<div class="card editor-wordlist editor-animation-el">
|
||||
<el-table :data="table" style="height: calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
|
|
@ -57,10 +56,9 @@
|
|||
<el-table-column width="100px" fixed="right" label="操作">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-around;">
|
||||
<box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
|
||||
@click="del_word(scope.$index)"></box-icon>
|
||||
<box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
|
||||
@click="edit_word(scope.$index)"></box-icon>
|
||||
<v-icon size="14px" class="btn" @click="del_word(scope.$index)">mdi-delete</v-icon>
|
||||
<v-icon size="14px" class="btn" name='edit-alt'
|
||||
@click="edit_word(scope.$index)">mdi-invoice-text-edit</v-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -112,6 +110,7 @@ import { useRouter, useRoute } from 'vue-router'
|
|||
import { useMainStore } from '@/store'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import CDialog from '@/components/UI/CDialog.vue'
|
||||
import anime from 'animejs'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
|
@ -276,9 +275,33 @@ onMounted(() => {
|
|||
}
|
||||
table.value = wordsets.value.getSet(id.value)
|
||||
}
|
||||
anime({
|
||||
targets: '.editor-animation-el',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50),
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.editor-container{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.editor-wordlist{
|
||||
flex-grow: 1;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
.editor-header{
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#main {
|
||||
|
|
@ -297,20 +320,14 @@ onMounted(() => {
|
|||
font-size: 35px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 70px);
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
height: calc(100% - 50px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<el-page-header style="margin: 20px;" @back="$router.push('/manage')">
|
||||
<el-page-header class="new-set-header new-set-animation-el"@back="$router.push('/manage')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 新建单词本 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-container id="main-container" class="container card">
|
||||
<el-container id="main-container" class="container card new-set-animation-el">
|
||||
<div style="overflow: auto;">
|
||||
<div class="colbox">
|
||||
<div class="mid-text">名称:</div>
|
||||
|
|
@ -20,10 +20,11 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useMainStore } from '@/store'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import anime from 'animejs'
|
||||
|
||||
const store = useMainStore()
|
||||
const router = useRouter()
|
||||
|
|
@ -42,8 +43,22 @@ const new_wordset = () => {
|
|||
store.wordsets.addSet(new_set_class.value, set_name.value)
|
||||
router.push('/manage')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: '.new-set-animation-el',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.new-set-header {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
.colbox {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
<template>
|
||||
<el-container id="main-container">
|
||||
<el-header id="header" style="">
|
||||
<el-header class="list-view-header" style="">
|
||||
<el-page-header style="margin: 10px;" @back="router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="colbox">
|
||||
<el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
|
||||
name='plus'></box-icon>新建单词本</el-button>
|
||||
<el-button @click="$router.push('/manage/new')"
|
||||
type="success"><v-icon>mdi-plus</v-icon>新建单词本</el-button>
|
||||
<div class="pconly">
|
||||
<el-dropdown trigger="click" style="margin-left: 20px;">
|
||||
<el-button type="primary">
|
||||
更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
|
||||
更多<v-icon size="20px">mdi-chevron-down</v-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
|
||||
name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
|
||||
<el-dropdown-item @click="export_set"><box-icon color="white" name='export'
|
||||
size="18px"></box-icon>导出</el-dropdown-item>
|
||||
<el-dropdown-item @click="import_set"><box-icon color="white" name='import'
|
||||
size="18px"></box-icon>导入</el-dropdown-item>
|
||||
<el-dropdown-item @click="manage_online_wordsets"><v-icon
|
||||
size="20px">mdi-earth</v-icon>管理在线单词本</el-dropdown-item>
|
||||
<el-dropdown-item @click="export_set"><v-icon
|
||||
size="18px">mdi-export</v-icon>导出</el-dropdown-item>
|
||||
<el-dropdown-item @click="import_set"><v-icon color="white" name=''
|
||||
size="18px">mdi-import</v-icon>导入</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
</template>
|
||||
</el-page-header>
|
||||
</el-header>
|
||||
<el-container style="height:calc(100% - 200px);position: relative;">
|
||||
<el-aside id="aside">
|
||||
<el-container style="height:calc(100% - 60px);position: relative;">
|
||||
<el-aside class="list-view-aside">
|
||||
<div id="sidebar" class="sidebar-hidden">
|
||||
<div id="sidebar-content">
|
||||
<div class="sidebar-title">
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
|
||||
<box-icon name='list-ul' color="var(--text-color)"></box-icon>
|
||||
<v-icon>list</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
|
|
@ -71,10 +71,8 @@
|
|||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
<box-icon class="btn" name='edit' color="var(--text-color)"
|
||||
@click="edit(wordset.id)"></box-icon>
|
||||
<box-icon class="btn" name='trash' color="var(--text-color)"
|
||||
@click="del(view_wordsets, wordset.id, index)"></box-icon>
|
||||
<v-icon class="btn" @click="edit(wordset.id)">mdi-book-edit</v-icon>
|
||||
<v-icon class="btn" @click="del(view_wordsets, wordset.id, index)">mdi-delete</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,8 +86,7 @@
|
|||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
<box-icon class="btn" name='show' color="var(--text-color)"
|
||||
@click="show(String(index), wordset.name)"></box-icon>
|
||||
<v-icon class="btn" @click="show(String(index), wordset.name)">mdi-eye</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,11 +97,12 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ref, reactive, onMounted,nextTick } from 'vue';
|
||||
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMainStore } from '@/store';
|
||||
import axios from 'axios';
|
||||
import anime from 'animejs';
|
||||
|
||||
interface WordSet {
|
||||
id: string;
|
||||
|
|
@ -115,7 +113,7 @@ interface WordSet {
|
|||
interface OnlineWordSets {
|
||||
[set: string]: {
|
||||
[book: string]: {
|
||||
[id:string]:WordSet
|
||||
[id: string]: WordSet
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,41 +122,43 @@ const router = useRouter();
|
|||
const store = useMainStore();
|
||||
|
||||
// Convert data properties to refs/reactive
|
||||
const view_wordsets = ref < string > ("");
|
||||
const viewing = reactive < {
|
||||
const view_wordsets = ref<string>("");
|
||||
const viewing = reactive<{
|
||||
set: string;
|
||||
book: string;
|
||||
} > ({
|
||||
}>({
|
||||
set: "",
|
||||
book: "",
|
||||
});
|
||||
const online_wordsets = ref < OnlineWordSets > ({});
|
||||
const mode = ref < number > (0);
|
||||
const online_wordsets = ref<OnlineWordSets>({});
|
||||
const mode = ref<number>(0);
|
||||
|
||||
// Convert methods to functions
|
||||
const view = (classname: string): void => {
|
||||
mode.value = 0;
|
||||
view_wordsets.value = classname;
|
||||
let node = document.getElementById("wordsets-container")?.style;
|
||||
if (node) {
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
}
|
||||
nextTick(() => {
|
||||
anime({
|
||||
targets: ".wordset",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50, { grid: [6, 6] })
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
const view_online = (set_name: string, class_name: string): void => {
|
||||
mode.value = 1;
|
||||
viewing.set = set_name;
|
||||
viewing.book = class_name;
|
||||
let node = document.getElementById("wordsets-container")?.style;
|
||||
if (node) {
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
}
|
||||
nextTick(() => {
|
||||
anime({
|
||||
targets: ".wordset",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50, { grid: [6, 6] })
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
const manage_online_wordsets = (): void => {
|
||||
|
|
@ -220,14 +220,22 @@ const taggle_sidebar = (): void => {
|
|||
|
||||
// Convert created lifecycle hook to onMounted
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: ".list-view-header",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
anime({
|
||||
targets: ".list-view-aside",
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
let first_set = store.wordsets._firstClass;
|
||||
if (first_set) {
|
||||
setTimeout(() => {
|
||||
view(first_set);
|
||||
}, 0);
|
||||
view(first_set);
|
||||
}
|
||||
|
||||
axios.get < OnlineWordSets > ("wordset/list").then(
|
||||
axios.get<OnlineWordSets>("wordset/list").then(
|
||||
(res) => {
|
||||
online_wordsets.value = res.data;
|
||||
}
|
||||
|
|
@ -235,29 +243,34 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
@media screen and (max-width: 500px) {
|
||||
@keyframes sidebar-enter {
|
||||
0% {
|
||||
translate: -100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
.list-view-header{
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#aside {
|
||||
.list-view-aside{
|
||||
width: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.list-view-header{
|
||||
height: 60px;
|
||||
}
|
||||
.list-view-aside{
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-view-header{
|
||||
justify-content: space-between;
|
||||
animation: enter ease-out .6s backwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
|
|
@ -334,29 +347,8 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
@keyframes sidebar-enter {
|
||||
0% {
|
||||
translate: -100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#aside {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 180px;
|
||||
animation: sidebar-enter ease-out .6s backwards;
|
||||
padding-left: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
@ -364,7 +356,7 @@ onMounted(() => {
|
|||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 20px;
|
||||
height: 220px;
|
||||
height: 230px;
|
||||
width: 170px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
|
@ -398,8 +390,8 @@ onMounted(() => {
|
|||
.wordset {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
transition: .5s;
|
||||
border: solid 1px var(--bd-color);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wordset:hover {
|
||||
|
|
@ -409,7 +401,8 @@ onMounted(() => {
|
|||
#sidebar {
|
||||
background-color: var(--bg-color-solid);
|
||||
border-radius: 5px;
|
||||
height: calc(100% - 100px);
|
||||
height: calc(100% - 20px);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--bd-color);
|
||||
transition: .5s;
|
||||
}
|
||||
|
|
@ -457,17 +450,14 @@ html.bgimged .wordset {
|
|||
justify-content: space-around;
|
||||
opacity: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#header {
|
||||
/* border-bottom: solid 1px #bcbcbc; */
|
||||
justify-content: space-between;
|
||||
animation: enter ease-out .6s backwards;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
overflow-x: auto;
|
||||
height: calc(100% - 60px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,16 @@
|
|||
<script setup lang="ts">
|
||||
import Post from '@/md/about.md';
|
||||
import '@/styles/markdown.css';
|
||||
import anime from 'animejs';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: '#post',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -23,7 +33,9 @@ import '@/styles/markdown.css';
|
|||
}
|
||||
|
||||
#wrapper {
|
||||
height:calc(100% - 80px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,16 @@
|
|||
<script setup lang="ts">
|
||||
import Post from '@/md/manual.md';
|
||||
import '@/styles/markdown.css';
|
||||
import anime from 'animejs';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
onMounted(() => {
|
||||
anime({
|
||||
targets: '#post',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -23,7 +33,9 @@ import '@/styles/markdown.css';
|
|||
}
|
||||
|
||||
#wrapper {
|
||||
height:calc(100% - 90px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-page-header style="margin-top:20px;margin-left:20px" @back="$router.push('/')">
|
||||
<el-page-header class="recite-view-header recite-view-animation-el" @back="$router.push('/')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 背诵 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div id="test" class="colbox">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<div style="flex-grow: 1;" class="card recite-view-animation-el">
|
||||
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
|
||||
<div>
|
||||
<textarea autofocus id="input" ref="inputAreaRef" v-if="current === answered" @input="change"
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
<el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
|
||||
<el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
|
||||
<el-button @click="terminate" type="danger">停止背诵</el-button>
|
||||
<box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;"
|
||||
@click="audio_play" name='volume-full'></box-icon>
|
||||
<v-icon style="margin-left: 10px;translate: 0 4px;"
|
||||
@click="audio_play">mdi-volume-high</v-icon>
|
||||
</div>
|
||||
<div id="trans">{{ word.type }} {{ word.trans }}</div>
|
||||
</div>
|
||||
<div id="add-to-box" class="card">
|
||||
<div id="add-to-box" class="card recite-view-animation-el">
|
||||
<el-text class="mx-1 title">加入至</el-text>
|
||||
<div class="colbox para">
|
||||
<div class="mid-text">分组:</div>
|
||||
|
|
@ -52,6 +52,7 @@ import { useRouter, useRoute } from 'vue-router';
|
|||
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
|
||||
import { useMainStore } from '@/store';
|
||||
import { WordItem } from '@/types';
|
||||
import anime from 'animejs';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -303,6 +304,12 @@ onMounted(() => {
|
|||
});
|
||||
router.push('/select');
|
||||
});
|
||||
anime({
|
||||
targets: '.recite-view-animation-el',
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50),
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
|
@ -310,6 +317,13 @@ onBeforeUnmount(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.recite-view-header {
|
||||
margin-top:20px;
|
||||
margin-left:20px
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<div class="container" id="page">
|
||||
<el-page-header @back="router.push('/');"
|
||||
style="width: calc(100% - 30px);margin-left: 30px;margin-top: 5px;">
|
||||
<el-page-header class="recite-select-animation-el recite-select-header" @back="router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3">开始新背诵</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-steps style="width: 100%;" align-center :active="step">
|
||||
<el-steps class="recite-select-animation-el" style="width: 100%;" align-center :active="step">
|
||||
<el-step title="选择单词本" description="选择在线或本地单词本以开始背诵"></el-step>
|
||||
<el-step title="自定义背诵" description="您可以在此处更改背诵设置"></el-step>
|
||||
</el-steps>
|
||||
<div id="main" class="card" style="overflow: hidden;">
|
||||
<div id="main" class="card recite-select-animation-el">
|
||||
<div class="item" id="select-area" v-show="step === 1">
|
||||
<el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
|
||||
<el-tab-pane label="本地">
|
||||
|
|
@ -91,6 +90,7 @@ import { ElMessage } from 'element-plus';
|
|||
import { useRouter } from 'vue-router';
|
||||
import { useMainStore } from '@/store';
|
||||
import axios from '@/scripts/request';
|
||||
import anime from 'animejs';
|
||||
|
||||
const router = useRouter();
|
||||
const store = useMainStore();
|
||||
|
|
@ -214,6 +214,12 @@ onMounted(() => {
|
|||
type: "error"
|
||||
});
|
||||
});
|
||||
anime({
|
||||
targets: ".recite-select-animation-el",
|
||||
translateY: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(50),
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -239,7 +245,6 @@ onMounted(() => {
|
|||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
|
@ -261,8 +266,9 @@ onMounted(() => {
|
|||
|
||||
#main {
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 250px);
|
||||
height: calc(100% - 60px);
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -298,6 +304,12 @@ onMounted(() => {
|
|||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.recite-select-header {
|
||||
width: calc(100% - 30px);
|
||||
margin-left: 30px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@keyframes exitLeft {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -7,11 +7,18 @@ import Components from 'unplugin-vue-components/vite'
|
|||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import Markdown from 'unplugin-vue-markdown/vite'
|
||||
|
||||
const now = new Date();
|
||||
const buildTime = now.toLocaleString('zh-CN');
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
build: {
|
||||
outDir: 'page',
|
||||
},
|
||||
define: {
|
||||
__BUILD_TIME__: JSON.stringify(buildTime),
|
||||
__APP_VERSION__: JSON.stringify('1.03 beta1')
|
||||
},
|
||||
plugins: [
|
||||
vue({
|
||||
include: [ /\.vue$/,/\.md$/],
|
||||
|
|
|
|||
Loading…
Reference in New Issue