commit
c98d2d7eb2
27 changed files with 3094 additions and 0 deletions
@ -0,0 +1,7 @@ |
|||
node_modules |
|||
.DS_Store |
|||
dist |
|||
dist-ssr |
|||
*.local |
|||
.idea |
|||
.vscode |
@ -0,0 +1,13 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" href="/favicon.ico" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>Vite App</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.js"></script> |
|||
</body> |
|||
</html> |
@ -0,0 +1,670 @@ |
|||
{ |
|||
"name": "vite-project", |
|||
"version": "0.0.0", |
|||
"lockfileVersion": 1, |
|||
"requires": true, |
|||
"dependencies": { |
|||
"@babel/helper-validator-identifier": { |
|||
"version": "7.12.11", |
|||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz", |
|||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==" |
|||
}, |
|||
"@babel/parser": { |
|||
"version": "7.13.11", |
|||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", |
|||
"integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" |
|||
}, |
|||
"@babel/types": { |
|||
"version": "7.13.0", |
|||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz", |
|||
"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==", |
|||
"requires": { |
|||
"@babel/helper-validator-identifier": "^7.12.11", |
|||
"lodash": "^4.17.19", |
|||
"to-fast-properties": "^2.0.0" |
|||
} |
|||
}, |
|||
"@vitejs/plugin-vue": { |
|||
"version": "1.1.5", |
|||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.5.tgz", |
|||
"integrity": "sha512-4DV8VPYo8/OR1YsnK39QN16xhKENt2XvcmJxqfRtyz75kvbjBYh1zTSHLp7XsXqv4R2I+fOZlbEBvxosMYLcPA==", |
|||
"dev": true |
|||
}, |
|||
"@vue/compiler-core": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz", |
|||
"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==", |
|||
"requires": { |
|||
"@babel/parser": "^7.12.0", |
|||
"@babel/types": "^7.12.0", |
|||
"@vue/shared": "3.0.7", |
|||
"estree-walker": "^2.0.1", |
|||
"source-map": "^0.6.1" |
|||
} |
|||
}, |
|||
"@vue/compiler-dom": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz", |
|||
"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==", |
|||
"requires": { |
|||
"@vue/compiler-core": "3.0.7", |
|||
"@vue/shared": "3.0.7" |
|||
} |
|||
}, |
|||
"@vue/compiler-sfc": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.7.tgz", |
|||
"integrity": "sha512-37/QILpGE+J3V+bP9Slg9e6xGqfk+MmS2Yj8ChR4fS0/qWUU/YoYHE0GPIzjmBdH0JVOOmJqunxowIXmqNiHng==", |
|||
"dev": true, |
|||
"requires": { |
|||
"@babel/parser": "^7.12.0", |
|||
"@babel/types": "^7.12.0", |
|||
"@vue/compiler-core": "3.0.7", |
|||
"@vue/compiler-dom": "3.0.7", |
|||
"@vue/compiler-ssr": "3.0.7", |
|||
"@vue/shared": "3.0.7", |
|||
"consolidate": "^0.16.0", |
|||
"estree-walker": "^2.0.1", |
|||
"hash-sum": "^2.0.0", |
|||
"lru-cache": "^5.1.1", |
|||
"magic-string": "^0.25.7", |
|||
"merge-source-map": "^1.1.0", |
|||
"postcss": "^8.1.10", |
|||
"postcss-modules": "^4.0.0", |
|||
"postcss-selector-parser": "^6.0.4", |
|||
"source-map": "^0.6.1" |
|||
} |
|||
}, |
|||
"@vue/compiler-ssr": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.7.tgz", |
|||
"integrity": "sha512-nHRbHeSpfXwjypettjrA16TjgfDcPEwq3m/zHnGyLC1QqdLtklXmpSM43/CPwwTCRa/qdt0pldJf22MiCEuTSQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"@vue/compiler-dom": "3.0.7", |
|||
"@vue/shared": "3.0.7" |
|||
} |
|||
}, |
|||
"@vue/reactivity": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz", |
|||
"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==", |
|||
"requires": { |
|||
"@vue/shared": "3.0.7" |
|||
} |
|||
}, |
|||
"@vue/runtime-core": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz", |
|||
"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==", |
|||
"requires": { |
|||
"@vue/reactivity": "3.0.7", |
|||
"@vue/shared": "3.0.7" |
|||
} |
|||
}, |
|||
"@vue/runtime-dom": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz", |
|||
"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==", |
|||
"requires": { |
|||
"@vue/runtime-core": "3.0.7", |
|||
"@vue/shared": "3.0.7", |
|||
"csstype": "^2.6.8" |
|||
} |
|||
}, |
|||
"@vue/shared": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz", |
|||
"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==" |
|||
}, |
|||
"anymatch": { |
|||
"version": "3.1.1", |
|||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", |
|||
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", |
|||
"requires": { |
|||
"normalize-path": "^3.0.0", |
|||
"picomatch": "^2.0.4" |
|||
} |
|||
}, |
|||
"argparse": { |
|||
"version": "2.0.1", |
|||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", |
|||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" |
|||
}, |
|||
"axios": { |
|||
"version": "0.21.1", |
|||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", |
|||
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", |
|||
"requires": { |
|||
"follow-redirects": "^1.10.0" |
|||
} |
|||
}, |
|||
"big.js": { |
|||
"version": "5.2.2", |
|||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", |
|||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", |
|||
"dev": true |
|||
}, |
|||
"binary-extensions": { |
|||
"version": "2.2.0", |
|||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", |
|||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" |
|||
}, |
|||
"bluebird": { |
|||
"version": "3.7.2", |
|||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", |
|||
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", |
|||
"dev": true |
|||
}, |
|||
"braces": { |
|||
"version": "3.0.2", |
|||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", |
|||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", |
|||
"requires": { |
|||
"fill-range": "^7.0.1" |
|||
} |
|||
}, |
|||
"chokidar": { |
|||
"version": "3.5.1", |
|||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", |
|||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", |
|||
"requires": { |
|||
"anymatch": "~3.1.1", |
|||
"braces": "~3.0.2", |
|||
"fsevents": "~2.3.1", |
|||
"glob-parent": "~5.1.0", |
|||
"is-binary-path": "~2.1.0", |
|||
"is-glob": "~4.0.1", |
|||
"normalize-path": "~3.0.0", |
|||
"readdirp": "~3.5.0" |
|||
} |
|||
}, |
|||
"colorette": { |
|||
"version": "1.2.2", |
|||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", |
|||
"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", |
|||
"dev": true |
|||
}, |
|||
"consolidate": { |
|||
"version": "0.16.0", |
|||
"resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.16.0.tgz", |
|||
"integrity": "sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"bluebird": "^3.7.2" |
|||
} |
|||
}, |
|||
"cssesc": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", |
|||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", |
|||
"dev": true |
|||
}, |
|||
"csstype": { |
|||
"version": "2.6.16", |
|||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz", |
|||
"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==" |
|||
}, |
|||
"dom7": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz", |
|||
"integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==", |
|||
"requires": { |
|||
"ssr-window": "^3.0.0-alpha.1" |
|||
} |
|||
}, |
|||
"emojis-list": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", |
|||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", |
|||
"dev": true |
|||
}, |
|||
"entities": { |
|||
"version": "2.1.0", |
|||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz", |
|||
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==" |
|||
}, |
|||
"esbuild": { |
|||
"version": "0.9.2", |
|||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.2.tgz", |
|||
"integrity": "sha512-xE3oOILjnmN8PSjkG3lT9NBbd1DbxNqolJ5qNyrLhDWsFef3yTp/KTQz1C/x7BYFKbtrr9foYtKA6KA1zuNAUQ==", |
|||
"dev": true |
|||
}, |
|||
"estree-walker": { |
|||
"version": "2.0.2", |
|||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", |
|||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" |
|||
}, |
|||
"fill-range": { |
|||
"version": "7.0.1", |
|||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", |
|||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", |
|||
"requires": { |
|||
"to-regex-range": "^5.0.1" |
|||
} |
|||
}, |
|||
"follow-redirects": { |
|||
"version": "1.13.3", |
|||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz", |
|||
"integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==" |
|||
}, |
|||
"fsevents": { |
|||
"version": "2.3.2", |
|||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", |
|||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", |
|||
"optional": true |
|||
}, |
|||
"function-bind": { |
|||
"version": "1.1.1", |
|||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", |
|||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", |
|||
"dev": true |
|||
}, |
|||
"generic-names": { |
|||
"version": "2.0.1", |
|||
"resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz", |
|||
"integrity": "sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"loader-utils": "^1.1.0" |
|||
} |
|||
}, |
|||
"glob-parent": { |
|||
"version": "5.1.2", |
|||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", |
|||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", |
|||
"requires": { |
|||
"is-glob": "^4.0.1" |
|||
} |
|||
}, |
|||
"has": { |
|||
"version": "1.0.3", |
|||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", |
|||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", |
|||
"dev": true, |
|||
"requires": { |
|||
"function-bind": "^1.1.1" |
|||
} |
|||
}, |
|||
"hash-sum": { |
|||
"version": "2.0.0", |
|||
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz", |
|||
"integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==", |
|||
"dev": true |
|||
}, |
|||
"icss-replace-symbols": { |
|||
"version": "1.1.0", |
|||
"resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", |
|||
"integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", |
|||
"dev": true |
|||
}, |
|||
"icss-utils": { |
|||
"version": "5.1.0", |
|||
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", |
|||
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", |
|||
"dev": true |
|||
}, |
|||
"indexes-of": { |
|||
"version": "1.0.1", |
|||
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", |
|||
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", |
|||
"dev": true |
|||
}, |
|||
"is-binary-path": { |
|||
"version": "2.1.0", |
|||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", |
|||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", |
|||
"requires": { |
|||
"binary-extensions": "^2.0.0" |
|||
} |
|||
}, |
|||
"is-core-module": { |
|||
"version": "2.2.0", |
|||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", |
|||
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"has": "^1.0.3" |
|||
} |
|||
}, |
|||
"is-extglob": { |
|||
"version": "2.1.1", |
|||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", |
|||
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" |
|||
}, |
|||
"is-glob": { |
|||
"version": "4.0.1", |
|||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", |
|||
"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", |
|||
"requires": { |
|||
"is-extglob": "^2.1.1" |
|||
} |
|||
}, |
|||
"is-number": { |
|||
"version": "7.0.0", |
|||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", |
|||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" |
|||
}, |
|||
"json5": { |
|||
"version": "1.0.1", |
|||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", |
|||
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", |
|||
"dev": true, |
|||
"requires": { |
|||
"minimist": "^1.2.0" |
|||
} |
|||
}, |
|||
"linkify-it": { |
|||
"version": "3.0.2", |
|||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz", |
|||
"integrity": "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==", |
|||
"requires": { |
|||
"uc.micro": "^1.0.1" |
|||
} |
|||
}, |
|||
"loader-utils": { |
|||
"version": "1.4.0", |
|||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", |
|||
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", |
|||
"dev": true, |
|||
"requires": { |
|||
"big.js": "^5.2.2", |
|||
"emojis-list": "^3.0.0", |
|||
"json5": "^1.0.1" |
|||
} |
|||
}, |
|||
"lodash": { |
|||
"version": "4.17.21", |
|||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", |
|||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" |
|||
}, |
|||
"lodash.camelcase": { |
|||
"version": "4.3.0", |
|||
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", |
|||
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", |
|||
"dev": true |
|||
}, |
|||
"lru-cache": { |
|||
"version": "5.1.1", |
|||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", |
|||
"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", |
|||
"dev": true, |
|||
"requires": { |
|||
"yallist": "^3.0.2" |
|||
} |
|||
}, |
|||
"magic-string": { |
|||
"version": "0.25.7", |
|||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", |
|||
"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", |
|||
"dev": true, |
|||
"requires": { |
|||
"sourcemap-codec": "^1.4.4" |
|||
} |
|||
}, |
|||
"markdown-it": { |
|||
"version": "12.0.4", |
|||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.0.4.tgz", |
|||
"integrity": "sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==", |
|||
"requires": { |
|||
"argparse": "^2.0.1", |
|||
"entities": "~2.1.0", |
|||
"linkify-it": "^3.0.1", |
|||
"mdurl": "^1.0.1", |
|||
"uc.micro": "^1.0.5" |
|||
} |
|||
}, |
|||
"mdurl": { |
|||
"version": "1.0.1", |
|||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", |
|||
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" |
|||
}, |
|||
"merge-source-map": { |
|||
"version": "1.1.0", |
|||
"resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz", |
|||
"integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==", |
|||
"dev": true, |
|||
"requires": { |
|||
"source-map": "^0.6.1" |
|||
} |
|||
}, |
|||
"minimist": { |
|||
"version": "1.2.5", |
|||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", |
|||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", |
|||
"dev": true |
|||
}, |
|||
"nanoid": { |
|||
"version": "3.1.22", |
|||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz", |
|||
"integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==", |
|||
"dev": true |
|||
}, |
|||
"normalize-path": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", |
|||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" |
|||
}, |
|||
"path-parse": { |
|||
"version": "1.0.6", |
|||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", |
|||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", |
|||
"dev": true |
|||
}, |
|||
"picomatch": { |
|||
"version": "2.2.2", |
|||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", |
|||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==" |
|||
}, |
|||
"postcss": { |
|||
"version": "8.2.8", |
|||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz", |
|||
"integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==", |
|||
"dev": true, |
|||
"requires": { |
|||
"colorette": "^1.2.2", |
|||
"nanoid": "^3.1.20", |
|||
"source-map": "^0.6.1" |
|||
} |
|||
}, |
|||
"postcss-modules": { |
|||
"version": "4.0.0", |
|||
"resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.0.0.tgz", |
|||
"integrity": "sha512-ghS/ovDzDqARm4Zj6L2ntadjyQMoyJmi0JkLlYtH2QFLrvNlxH5OAVRPWPeKilB0pY7SbuhO173KOWkPAxRJcw==", |
|||
"dev": true, |
|||
"requires": { |
|||
"generic-names": "^2.0.1", |
|||
"icss-replace-symbols": "^1.1.0", |
|||
"lodash.camelcase": "^4.3.0", |
|||
"postcss-modules-extract-imports": "^3.0.0", |
|||
"postcss-modules-local-by-default": "^4.0.0", |
|||
"postcss-modules-scope": "^3.0.0", |
|||
"postcss-modules-values": "^4.0.0", |
|||
"string-hash": "^1.1.1" |
|||
} |
|||
}, |
|||
"postcss-modules-extract-imports": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", |
|||
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", |
|||
"dev": true |
|||
}, |
|||
"postcss-modules-local-by-default": { |
|||
"version": "4.0.0", |
|||
"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", |
|||
"integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"icss-utils": "^5.0.0", |
|||
"postcss-selector-parser": "^6.0.2", |
|||
"postcss-value-parser": "^4.1.0" |
|||
} |
|||
}, |
|||
"postcss-modules-scope": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", |
|||
"integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", |
|||
"dev": true, |
|||
"requires": { |
|||
"postcss-selector-parser": "^6.0.4" |
|||
} |
|||
}, |
|||
"postcss-modules-values": { |
|||
"version": "4.0.0", |
|||
"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", |
|||
"integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"icss-utils": "^5.0.0" |
|||
} |
|||
}, |
|||
"postcss-selector-parser": { |
|||
"version": "6.0.4", |
|||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz", |
|||
"integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==", |
|||
"dev": true, |
|||
"requires": { |
|||
"cssesc": "^3.0.0", |
|||
"indexes-of": "^1.0.1", |
|||
"uniq": "^1.0.1", |
|||
"util-deprecate": "^1.0.2" |
|||
} |
|||
}, |
|||
"postcss-value-parser": { |
|||
"version": "4.1.0", |
|||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", |
|||
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", |
|||
"dev": true |
|||
}, |
|||
"readdirp": { |
|||
"version": "3.5.0", |
|||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", |
|||
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", |
|||
"requires": { |
|||
"picomatch": "^2.2.1" |
|||
} |
|||
}, |
|||
"resolve": { |
|||
"version": "1.20.0", |
|||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", |
|||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", |
|||
"dev": true, |
|||
"requires": { |
|||
"is-core-module": "^2.2.0", |
|||
"path-parse": "^1.0.6" |
|||
} |
|||
}, |
|||
"rollup": { |
|||
"version": "2.41.2", |
|||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.2.tgz", |
|||
"integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==", |
|||
"dev": true, |
|||
"requires": { |
|||
"fsevents": "~2.3.1" |
|||
} |
|||
}, |
|||
"sass": { |
|||
"version": "1.32.8", |
|||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz", |
|||
"integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==", |
|||
"requires": { |
|||
"chokidar": ">=2.0.0 <4.0.0" |
|||
} |
|||
}, |
|||
"source-map": { |
|||
"version": "0.6.1", |
|||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", |
|||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" |
|||
}, |
|||
"sourcemap-codec": { |
|||
"version": "1.4.8", |
|||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", |
|||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", |
|||
"dev": true |
|||
}, |
|||
"ssr-window": { |
|||
"version": "3.0.0", |
|||
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz", |
|||
"integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==" |
|||
}, |
|||
"string-hash": { |
|||
"version": "1.1.3", |
|||
"resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", |
|||
"integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=", |
|||
"dev": true |
|||
}, |
|||
"swiper": { |
|||
"version": "6.5.0", |
|||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-6.5.0.tgz", |
|||
"integrity": "sha512-cSx1SpfgrHlgwku++3Ce3cjPBpXgB7P+bGik5S3+F+j6ID0NUeV6qtmedFdr3C8jXR/W+TJPVNIT9fH/cwVAiA==", |
|||
"requires": { |
|||
"dom7": "^3.0.0", |
|||
"ssr-window": "^3.0.0" |
|||
} |
|||
}, |
|||
"to-fast-properties": { |
|||
"version": "2.0.0", |
|||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", |
|||
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" |
|||
}, |
|||
"to-regex-range": { |
|||
"version": "5.0.1", |
|||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", |
|||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", |
|||
"requires": { |
|||
"is-number": "^7.0.0" |
|||
} |
|||
}, |
|||
"uc.micro": { |
|||
"version": "1.0.6", |
|||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", |
|||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" |
|||
}, |
|||
"uniq": { |
|||
"version": "1.0.1", |
|||
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", |
|||
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", |
|||
"dev": true |
|||
}, |
|||
"util-deprecate": { |
|||
"version": "1.0.2", |
|||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", |
|||
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", |
|||
"dev": true |
|||
}, |
|||
"vite": { |
|||
"version": "2.1.0", |
|||
"resolved": "https://registry.npmjs.org/vite/-/vite-2.1.0.tgz", |
|||
"integrity": "sha512-qWYmX8slkv91C3hWA2iu0o0ZvFbO2dSfWIN4dbMfSeMdNn+XeirkGWU3dy5/W1Nv13cQZvVoMTl8zyC13VFRZQ==", |
|||
"dev": true, |
|||
"requires": { |
|||
"esbuild": "^0.9.2", |
|||
"fsevents": "~2.3.1", |
|||
"postcss": "^8.2.1", |
|||
"resolve": "^1.19.0", |
|||
"rollup": "^2.38.5" |
|||
} |
|||
}, |
|||
"vue": { |
|||
"version": "3.0.7", |
|||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz", |
|||
"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==", |
|||
"requires": { |
|||
"@vue/compiler-dom": "3.0.7", |
|||
"@vue/runtime-dom": "3.0.7", |
|||
"@vue/shared": "3.0.7" |
|||
} |
|||
}, |
|||
"vue-router": { |
|||
"version": "4.0.5", |
|||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.5.tgz", |
|||
"integrity": "sha512-AQq+pllb6FCc7rS6vh4PPcce3XA1jgK3hKNkQ4hXHwoVN7jOeAOMKCnX7XAX3etV9rmN7iNW8iIwgPk95ckBjw==" |
|||
}, |
|||
"yallist": { |
|||
"version": "3.1.1", |
|||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", |
|||
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", |
|||
"dev": true |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,22 @@ |
|||
{ |
|||
"name": "vite-project", |
|||
"version": "0.0.0", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vite build", |
|||
"serve": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"axios": "^0.21.1", |
|||
"markdown-it": "^12.0.4", |
|||
"sass": "^1.32.8", |
|||
"swiper": "^6.5.0", |
|||
"vue": "^3.0.5", |
|||
"vue-router": "^4.0.5" |
|||
}, |
|||
"devDependencies": { |
|||
"@vitejs/plugin-vue": "^1.1.5", |
|||
"@vue/compiler-sfc": "^3.0.5", |
|||
"vite": "^2.1.0" |
|||
} |
|||
} |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<router-view v-slot="{ Component }"> |
|||
<keep-alive> |
|||
<component :key="fullPath" v-if="isAlive" :is="Component"/> |
|||
</keep-alive> |
|||
<component :key="fullPath" v-if="!isAlive" :is="Component"/> |
|||
</router-view> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import {computed} from 'vue' |
|||
import {useRoute} from 'vue-router' |
|||
|
|||
export default { |
|||
name: 'App', |
|||
setup() { |
|||
const route = useRoute() |
|||
let isAlive = computed(() => !!route.meta.alive) |
|||
let fullPath = computed(() => route.fullPath) |
|||
return { |
|||
fullPath, |
|||
isAlive, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "@/assets/style/common.scss"; |
|||
</style> |
@ -0,0 +1,8 @@ |
|||
import {onMounted,ref} from "vue" |
|||
import {request_} from "./request"; |
|||
|
|||
export default { |
|||
bannerData: (data)=>request_("GET",'https://gank.io/api/v2/banners',data), |
|||
articleData: (data)=>request_("GET",'https://gank.io/api/v2/data/category/GanHuo/type/frontend/page/1/count/10',data), |
|||
articleDetail: (data)=>request_("GET",'https://gank.io/api/v2/post/'+data) |
|||
} |
@ -0,0 +1,50 @@ |
|||
import axios from "axios" |
|||
|
|||
const checkERR = (err, type) => { |
|||
console.log(err); |
|||
switch (type) { |
|||
case 0: |
|||
// 来自执行的错误
|
|||
break; |
|||
case 1: |
|||
//来自于接口的错误
|
|||
break; |
|||
} |
|||
} |
|||
|
|||
// 静默执行
|
|||
export function request_(type = 'GET', url, data = {}, ContentType="application/json") { |
|||
var __data = {} |
|||
if (type.toUpperCase() == 'GET') { |
|||
__data.params = data |
|||
} |
|||
if (type.toUpperCase() == 'POST') { |
|||
__data.data = data |
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)/; |
|||
var realUrl = url; |
|||
if (!reg.test(url)) { |
|||
realUrl = config.BASEURL + url; |
|||
} |
|||
axios({ |
|||
url: realUrl, |
|||
method: type, |
|||
headers: { |
|||
contentType: ContentType |
|||
}, |
|||
...__data, |
|||
responseType: 'json' |
|||
}).then((res) => { |
|||
if (res.status == 200&&res.data&&res.data.status==100) { |
|||
resolve(res) |
|||
} else { |
|||
checkERR(res, 1) |
|||
reject(res) |
|||
} |
|||
}).catch((err) => { |
|||
checkERR(err, 0) |
|||
reject(err) |
|||
}); |
|||
}) |
|||
} |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,15 @@ |
|||
export function useExportData() { |
|||
let result = {}; |
|||
result = new Proxy(result,{ |
|||
get(target, key) { |
|||
return target[key]; |
|||
}, |
|||
set(target, key, value, receiver) { |
|||
if (target[key]){ |
|||
console.warn(target.toString()+"已存在字段"+key); |
|||
} |
|||
return Reflect.set(target, key, value); |
|||
} |
|||
}) |
|||
return result |
|||
} |
@ -0,0 +1,2 @@ |
|||
@import "./reactive.scss"; |
|||
$red: green; |
@ -0,0 +1,45 @@ |
|||
@import "./github-markdown.scss"; |
|||
html,body{ |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; |
|||
} |
|||
#app{ |
|||
height: 100%; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.a-ov{ |
|||
@include ellipsis() |
|||
} |
|||
.a-ov2{ |
|||
@include ellipsis(2) |
|||
} |
|||
.a-image{ |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 100%; |
|||
height: 100%; |
|||
img{ |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
top: 0; |
|||
&.center{ |
|||
width: 100%; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
&.hcenter{ |
|||
height: 100%; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
|
@ -0,0 +1,985 @@ |
|||
.markdown-body .octicon { |
|||
display: inline-block; |
|||
fill: currentColor; |
|||
vertical-align: text-bottom; |
|||
} |
|||
|
|||
.markdown-body .anchor { |
|||
float: left; |
|||
line-height: 1; |
|||
margin-left: -20px; |
|||
padding-right: 4px; |
|||
} |
|||
|
|||
.markdown-body .anchor:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.markdown-body h1 .octicon-link, |
|||
.markdown-body h2 .octicon-link, |
|||
.markdown-body h3 .octicon-link, |
|||
.markdown-body h4 .octicon-link, |
|||
.markdown-body h5 .octicon-link, |
|||
.markdown-body h6 .octicon-link { |
|||
color: #1b1f23; |
|||
vertical-align: middle; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.markdown-body h1:hover .anchor, |
|||
.markdown-body h2:hover .anchor, |
|||
.markdown-body h3:hover .anchor, |
|||
.markdown-body h4:hover .anchor, |
|||
.markdown-body h5:hover .anchor, |
|||
.markdown-body h6:hover .anchor { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.markdown-body h1:hover .anchor .octicon-link, |
|||
.markdown-body h2:hover .anchor .octicon-link, |
|||
.markdown-body h3:hover .anchor .octicon-link, |
|||
.markdown-body h4:hover .anchor .octicon-link, |
|||
.markdown-body h5:hover .anchor .octicon-link, |
|||
.markdown-body h6:hover .anchor .octicon-link { |
|||
visibility: visible; |
|||
} |
|||
|
|||
.markdown-body h1:hover .anchor .octicon-link:before, |
|||
.markdown-body h2:hover .anchor .octicon-link:before, |
|||
.markdown-body h3:hover .anchor .octicon-link:before, |
|||
.markdown-body h4:hover .anchor .octicon-link:before, |
|||
.markdown-body h5:hover .anchor .octicon-link:before, |
|||
.markdown-body h6:hover .anchor .octicon-link:before { |
|||
width: 16px; |
|||
height: 16px; |
|||
content: ' '; |
|||
display: inline-block; |
|||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E"); |
|||
}.markdown-body { |
|||
-ms-text-size-adjust: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
line-height: 1.5; |
|||
color: #24292e; |
|||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; |
|||
font-size: 16px; |
|||
line-height: 1.5; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
.markdown-body details { |
|||
display: block; |
|||
} |
|||
|
|||
.markdown-body summary { |
|||
display: list-item; |
|||
} |
|||
|
|||
.markdown-body a { |
|||
background-color: initial; |
|||
} |
|||
|
|||
.markdown-body a:active, |
|||
.markdown-body a:hover { |
|||
outline-width: 0; |
|||
} |
|||
|
|||
.markdown-body strong { |
|||
font-weight: inherit; |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
.markdown-body h1 { |
|||
font-size: 2em; |
|||
margin: .67em 0; |
|||
} |
|||
|
|||
.markdown-body img { |
|||
border-style: none; |
|||
} |
|||
|
|||
.markdown-body code, |
|||
.markdown-body kbd, |
|||
.markdown-body pre { |
|||
font-family: monospace,monospace; |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.markdown-body hr { |
|||
box-sizing: initial; |
|||
height: 0; |
|||
overflow: visible; |
|||
} |
|||
|
|||
.markdown-body input { |
|||
font: inherit; |
|||
margin: 0; |
|||
} |
|||
|
|||
.markdown-body input { |
|||
overflow: visible; |
|||
} |
|||
|
|||
.markdown-body [type=checkbox] { |
|||
box-sizing: border-box; |
|||
padding: 0; |
|||
} |
|||
|
|||
.markdown-body * { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.markdown-body input { |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
.markdown-body a { |
|||
color: #0366d6; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.markdown-body a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.markdown-body strong { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown-body hr { |
|||
height: 0; |
|||
margin: 15px 0; |
|||
overflow: hidden; |
|||
background: transparent; |
|||
border: 0; |
|||
border-bottom: 1px solid #dfe2e5; |
|||
} |
|||
|
|||
.markdown-body hr:after, |
|||
.markdown-body hr:before { |
|||
display: table; |
|||
content: ""; |
|||
} |
|||
|
|||
.markdown-body hr:after { |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown-body table { |
|||
border-spacing: 0; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
.markdown-body td, |
|||
.markdown-body th { |
|||
padding: 0; |
|||
} |
|||
|
|||
.markdown-body details summary { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.markdown-body kbd { |
|||
display: inline-block; |
|||
padding: 3px 5px; |
|||
font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
|||
line-height: 10px; |
|||
color: #444d56; |
|||
vertical-align: middle; |
|||
background-color: #fafbfc; |
|||
border: 1px solid #d1d5da; |
|||
border-radius: 3px; |
|||
box-shadow: inset 0 -1px 0 #d1d5da; |
|||
} |
|||
|
|||
.markdown-body h1, |
|||
.markdown-body h2, |
|||
.markdown-body h3, |
|||
.markdown-body h4, |
|||
.markdown-body h5, |
|||
.markdown-body h6 { |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.markdown-body h1 { |
|||
font-size: 32px; |
|||
} |
|||
|
|||
.markdown-body h1, |
|||
.markdown-body h2 { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown-body h2 { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.markdown-body h3 { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.markdown-body h3, |
|||
.markdown-body h4 { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown-body h4 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.markdown-body h5 { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.markdown-body h5, |
|||
.markdown-body h6 { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown-body h6 { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown-body p { |
|||
margin-top: 0; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.markdown-body blockquote { |
|||
margin: 0; |
|||
} |
|||
|
|||
.markdown-body ol, |
|||
.markdown-body ul { |
|||
padding-left: 0; |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.markdown-body ol ol, |
|||
.markdown-body ul ol { |
|||
list-style-type: lower-roman; |
|||
} |
|||
|
|||
.markdown-body ol ol ol, |
|||
.markdown-body ol ul ol, |
|||
.markdown-body ul ol ol, |
|||
.markdown-body ul ul ol { |
|||
list-style-type: lower-alpha; |
|||
} |
|||
|
|||
.markdown-body dd { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.markdown-body code, |
|||
.markdown-body pre { |
|||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.markdown-body pre { |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.markdown-body input::-webkit-inner-spin-button, |
|||
.markdown-body input::-webkit-outer-spin-button { |
|||
margin: 0; |
|||
-webkit-appearance: none; |
|||
appearance: none; |
|||
} |
|||
|
|||
.markdown-body :checked+.radio-label { |
|||
position: relative; |
|||
z-index: 1; |
|||
border-color: #0366d6; |
|||
} |
|||
|
|||
.markdown-body .border { |
|||
border: 1px solid #e1e4e8!important; |
|||
} |
|||
|
|||
.markdown-body .border-0 { |
|||
border: 0!important; |
|||
} |
|||
|
|||
.markdown-body .border-bottom { |
|||
border-bottom: 1px solid #e1e4e8!important; |
|||
} |
|||
|
|||
.markdown-body .rounded-1 { |
|||
border-radius: 3px!important; |
|||
} |
|||
|
|||
.markdown-body .bg-white { |
|||
background-color: #fff!important; |
|||
} |
|||
|
|||
.markdown-body .bg-gray-light { |
|||
background-color: #fafbfc!important; |
|||
} |
|||
|
|||
.markdown-body .text-gray-light { |
|||
color: #6a737d!important; |
|||
} |
|||
|
|||
.markdown-body .mb-0 { |
|||
margin-bottom: 0!important; |
|||
} |
|||
|
|||
.markdown-body .my-2 { |
|||
margin-top: 8px!important; |
|||
margin-bottom: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-0 { |
|||
padding-left: 0!important; |
|||
} |
|||
|
|||
.markdown-body .py-0 { |
|||
padding-top: 0!important; |
|||
padding-bottom: 0!important; |
|||
} |
|||
|
|||
.markdown-body .pl-1 { |
|||
padding-left: 4px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-2 { |
|||
padding-left: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .py-2 { |
|||
padding-top: 8px!important; |
|||
padding-bottom: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-3, |
|||
.markdown-body .px-3 { |
|||
padding-left: 16px!important; |
|||
} |
|||
|
|||
.markdown-body .px-3 { |
|||
padding-right: 16px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-4 { |
|||
padding-left: 24px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-5 { |
|||
padding-left: 32px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-6 { |
|||
padding-left: 40px!important; |
|||
} |
|||
|
|||
.markdown-body .f6 { |
|||
font-size: 12px!important; |
|||
} |
|||
|
|||
.markdown-body .lh-condensed { |
|||
line-height: 1.25!important; |
|||
} |
|||
|
|||
.markdown-body .text-bold { |
|||
font-weight: 600!important; |
|||
} |
|||
|
|||
.markdown-body .pl-c { |
|||
color: #6a737d; |
|||
} |
|||
|
|||
.markdown-body .pl-c1, |
|||
.markdown-body .pl-s .pl-v { |
|||
color: #005cc5; |
|||
} |
|||
|
|||
.markdown-body .pl-e, |
|||
.markdown-body .pl-en { |
|||
color: #6f42c1; |
|||
} |
|||
|
|||
.markdown-body .pl-s .pl-s1, |
|||
.markdown-body .pl-smi { |
|||
color: #24292e; |
|||
} |
|||
|
|||
.markdown-body .pl-ent { |
|||
color: #22863a; |
|||
} |
|||
|
|||
.markdown-body .pl-k { |
|||
color: #d73a49; |
|||
} |
|||
|
|||
.markdown-body .pl-pds, |
|||
.markdown-body .pl-s, |
|||
.markdown-body .pl-s .pl-pse .pl-s1, |
|||
.markdown-body .pl-sr, |
|||
.markdown-body .pl-sr .pl-cce, |
|||
.markdown-body .pl-sr .pl-sra, |
|||
.markdown-body .pl-sr .pl-sre { |
|||
color: #032f62; |
|||
} |
|||
|
|||
.markdown-body .pl-smw, |
|||
.markdown-body .pl-v { |
|||
color: #e36209; |
|||
} |
|||
|
|||
.markdown-body .pl-bu { |
|||
color: #b31d28; |
|||
} |
|||
|
|||
.markdown-body .pl-ii { |
|||
color: #fafbfc; |
|||
background-color: #b31d28; |
|||
} |
|||
|
|||
.markdown-body .pl-c2 { |
|||
color: #fafbfc; |
|||
background-color: #d73a49; |
|||
} |
|||
|
|||
.markdown-body .pl-c2:before { |
|||
content: "^M"; |
|||
} |
|||
|
|||
.markdown-body .pl-sr .pl-cce { |
|||
font-weight: 700; |
|||
color: #22863a; |
|||
} |
|||
|
|||
.markdown-body .pl-ml { |
|||
color: #735c0f; |
|||
} |
|||
|
|||
.markdown-body .pl-mh, |
|||
.markdown-body .pl-mh .pl-en, |
|||
.markdown-body .pl-ms { |
|||
font-weight: 700; |
|||
color: #005cc5; |
|||
} |
|||
|
|||
.markdown-body .pl-mi { |
|||
font-style: italic; |
|||
color: #24292e; |
|||
} |
|||
|
|||
.markdown-body .pl-mb { |
|||
font-weight: 700; |
|||
color: #24292e; |
|||
} |
|||
|
|||
.markdown-body .pl-md { |
|||
color: #b31d28; |
|||
background-color: #ffeef0; |
|||
} |
|||
|
|||
.markdown-body .pl-mi1 { |
|||
color: #22863a; |
|||
background-color: #f0fff4; |
|||
} |
|||
|
|||
.markdown-body .pl-mc { |
|||
color: #e36209; |
|||
background-color: #ffebda; |
|||
} |
|||
|
|||
.markdown-body .pl-mi2 { |
|||
color: #f6f8fa; |
|||
background-color: #005cc5; |
|||
} |
|||
|
|||
.markdown-body .pl-mdr { |
|||
font-weight: 700; |
|||
color: #6f42c1; |
|||
} |
|||
|
|||
.markdown-body .pl-ba { |
|||
color: #586069; |
|||
} |
|||
|
|||
.markdown-body .pl-sg { |
|||
color: #959da5; |
|||
} |
|||
|
|||
.markdown-body .pl-corl { |
|||
text-decoration: underline; |
|||
color: #032f62; |
|||
} |
|||
|
|||
.markdown-body .mb-0 { |
|||
margin-bottom: 0!important; |
|||
} |
|||
|
|||
.markdown-body .my-2 { |
|||
margin-bottom: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .my-2 { |
|||
margin-top: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-0 { |
|||
padding-left: 0!important; |
|||
} |
|||
|
|||
.markdown-body .py-0 { |
|||
padding-top: 0!important; |
|||
padding-bottom: 0!important; |
|||
} |
|||
|
|||
.markdown-body .pl-1 { |
|||
padding-left: 4px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-2 { |
|||
padding-left: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .py-2 { |
|||
padding-top: 8px!important; |
|||
padding-bottom: 8px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-3 { |
|||
padding-left: 16px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-4 { |
|||
padding-left: 24px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-5 { |
|||
padding-left: 32px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-6 { |
|||
padding-left: 40px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-7 { |
|||
padding-left: 48px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-8 { |
|||
padding-left: 64px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-9 { |
|||
padding-left: 80px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-10 { |
|||
padding-left: 96px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-11 { |
|||
padding-left: 112px!important; |
|||
} |
|||
|
|||
.markdown-body .pl-12 { |
|||
padding-left: 128px!important; |
|||
} |
|||
|
|||
.markdown-body hr { |
|||
border-bottom-color: #eee; |
|||
} |
|||
|
|||
.markdown-body kbd { |
|||
display: inline-block; |
|||
padding: 3px 5px; |
|||
font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
|||
line-height: 10px; |
|||
color: #444d56; |
|||
vertical-align: middle; |
|||
background-color: #fafbfc; |
|||
border: 1px solid #d1d5da; |
|||
border-radius: 3px; |
|||
box-shadow: inset 0 -1px 0 #d1d5da; |
|||
} |
|||
|
|||
.markdown-body:after, |
|||
.markdown-body:before { |
|||
display: table; |
|||
content: ""; |
|||
} |
|||
|
|||
.markdown-body:after { |
|||
clear: both; |
|||
} |
|||
|
|||
.markdown-body>:first-child { |
|||
margin-top: 0!important; |
|||
} |
|||
|
|||
.markdown-body>:last-child { |
|||
margin-bottom: 0!important; |
|||
} |
|||
|
|||
.markdown-body a:not([href]) { |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.markdown-body blockquote, |
|||
.markdown-body details, |
|||
.markdown-body dl, |
|||
.markdown-body ol, |
|||
.markdown-body p, |
|||
.markdown-body pre, |
|||
.markdown-body table, |
|||
.markdown-body ul { |
|||
margin-top: 0; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.markdown-body hr { |
|||
height: .25em; |
|||
padding: 0; |
|||
margin: 24px 0; |
|||
background-color: #e1e4e8; |
|||
border: 0; |
|||
} |
|||
|
|||
.markdown-body blockquote { |
|||
padding: 0 1em; |
|||
color: #6a737d; |
|||
border-left: .25em solid #dfe2e5; |
|||
} |
|||
|
|||
.markdown-body blockquote>:first-child { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.markdown-body blockquote>:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.markdown-body h1, |
|||
.markdown-body h2, |
|||
.markdown-body h3, |
|||
.markdown-body h4, |
|||
.markdown-body h5, |
|||
.markdown-body h6 { |
|||
margin-top: 24px; |
|||
margin-bottom: 16px; |
|||
font-weight: 600; |
|||
line-height: 1.25; |
|||
} |
|||
|
|||
.markdown-body h1 { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
.markdown-body h1, |
|||
.markdown-body h2 { |
|||
padding-bottom: .3em; |
|||
border-bottom: 1px solid #eaecef; |
|||
} |
|||
|
|||
.markdown-body h2 { |
|||
font-size: 1.5em; |
|||
} |
|||
|
|||
.markdown-body h3 { |
|||
font-size: 1.25em; |
|||
} |
|||
|
|||
.markdown-body h4 { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.markdown-body h5 { |
|||
font-size: .875em; |
|||
} |
|||
|
|||
.markdown-body h6 { |
|||
font-size: .85em; |
|||
color: #6a737d; |
|||
} |
|||
|
|||
.markdown-body ol, |
|||
.markdown-body ul { |
|||
padding-left: 2em; |
|||
} |
|||
|
|||
.markdown-body ol ol, |
|||
.markdown-body ol ul, |
|||
.markdown-body ul ol, |
|||
.markdown-body ul ul { |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.markdown-body li { |
|||
word-wrap: break-all; |
|||
} |
|||
|
|||
.markdown-body li>p { |
|||
margin-top: 16px; |
|||
} |
|||
|
|||
.markdown-body li+li { |
|||
margin-top: .25em; |
|||
} |
|||
|
|||
.markdown-body dl { |
|||
padding: 0; |
|||
} |
|||
|
|||
.markdown-body dl dt { |
|||
padding: 0; |
|||
margin-top: 16px; |
|||
font-size: 1em; |
|||
font-style: italic; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown-body dl dd { |
|||
padding: 0 16px; |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.markdown-body table { |
|||
display: block; |
|||
width: 100%; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.markdown-body table th { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.markdown-body table td, |
|||
.markdown-body table th { |
|||
padding: 6px 13px; |
|||
border: 1px solid #dfe2e5; |
|||
} |
|||
|
|||
.markdown-body table tr { |
|||
background-color: #fff; |
|||
border-top: 1px solid #c6cbd1; |
|||
} |
|||
|
|||
.markdown-body table tr:nth-child(2n) { |
|||
background-color: #f6f8fa; |
|||
} |
|||
|
|||
.markdown-body img { |
|||
max-width: 100%; |
|||
box-sizing: initial; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.markdown-body img[align=right] { |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.markdown-body img[align=left] { |
|||
padding-right: 20px; |
|||
} |
|||
|
|||
.markdown-body code { |
|||
padding: .2em .4em; |
|||
margin: 0; |
|||
font-size: 85%; |
|||
background-color: rgba(27,31,35,.05); |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.markdown-body pre { |
|||
word-wrap: normal; |
|||
} |
|||
|
|||
.markdown-body pre>code { |
|||
padding: 0; |
|||
margin: 0; |
|||
font-size: 100%; |
|||
word-break: normal; |
|||
white-space: pre; |
|||
background: transparent; |
|||
border: 0; |
|||
} |
|||
|
|||
.markdown-body .highlight { |
|||
margin-bottom: 16px; |
|||
} |
|||
|
|||
.markdown-body .highlight pre { |
|||
margin-bottom: 0; |
|||
word-break: normal; |
|||
} |
|||
|
|||
.markdown-body .highlight pre, |
|||
.markdown-body pre { |
|||
padding: 16px; |
|||
overflow: auto; |
|||
font-size: 85%; |
|||
line-height: 1.45; |
|||
background-color: #f6f8fa; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.markdown-body pre code { |
|||
display: inline; |
|||
max-width: auto; |
|||
padding: 0; |
|||
margin: 0; |
|||
overflow: visible; |
|||
line-height: inherit; |
|||
word-wrap: normal; |
|||
background-color: initial; |
|||
border: 0; |
|||
} |
|||
|
|||
.markdown-body .commit-tease-sha { |
|||
display: inline-block; |
|||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
|||
font-size: 90%; |
|||
color: #444d56; |
|||
} |
|||
|
|||
.markdown-body .full-commit .btn-outline:not(:disabled):hover { |
|||
color: #005cc5; |
|||
border-color: #005cc5; |
|||
} |
|||
|
|||
.markdown-body .blob-wrapper { |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
} |
|||
|
|||
.markdown-body .blob-wrapper-embedded { |
|||
max-height: 240px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.markdown-body .blob-num { |
|||
width: 1%; |
|||
min-width: 50px; |
|||
padding-right: 10px; |
|||
padding-left: 10px; |
|||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
|||
font-size: 12px; |
|||
line-height: 20px; |
|||
color: rgba(27,31,35,.3); |
|||
text-align: right; |
|||
white-space: nowrap; |
|||
vertical-align: top; |
|||
cursor: pointer; |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.markdown-body .blob-num:hover { |
|||
color: rgba(27,31,35,.6); |
|||
} |
|||
|
|||
.markdown-body .blob-num:before { |
|||
content: attr(data-line-number); |
|||
} |
|||
|
|||
.markdown-body .blob-code { |
|||
position: relative; |
|||
padding-right: 10px; |
|||
padding-left: 10px; |
|||
line-height: 20px; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.markdown-body .blob-code-inner { |
|||
overflow: visible; |
|||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
|||
font-size: 12px; |
|||
color: #24292e; |
|||
word-wrap: normal; |
|||
white-space: pre; |
|||
} |
|||
|
|||
.markdown-body .pl-token.active, |
|||
.markdown-body .pl-token:hover { |
|||
cursor: pointer; |
|||
background: #ffea7f; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="1"] { |
|||
-moz-tab-size: 1; |
|||
tab-size: 1; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="2"] { |
|||
-moz-tab-size: 2; |
|||
tab-size: 2; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="3"] { |
|||
-moz-tab-size: 3; |
|||
tab-size: 3; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="4"] { |
|||
-moz-tab-size: 4; |
|||
tab-size: 4; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="5"] { |
|||
-moz-tab-size: 5; |
|||
tab-size: 5; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="6"] { |
|||
-moz-tab-size: 6; |
|||
tab-size: 6; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="7"] { |
|||
-moz-tab-size: 7; |
|||
tab-size: 7; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="8"] { |
|||
-moz-tab-size: 8; |
|||
tab-size: 8; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="9"] { |
|||
-moz-tab-size: 9; |
|||
tab-size: 9; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="10"] { |
|||
-moz-tab-size: 10; |
|||
tab-size: 10; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="11"] { |
|||
-moz-tab-size: 11; |
|||
tab-size: 11; |
|||
} |
|||
|
|||
.markdown-body .tab-size[data-tab-size="12"] { |
|||
-moz-tab-size: 12; |
|||
tab-size: 12; |
|||
} |
|||
|
|||
.markdown-body .task-list-item { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
.markdown-body .task-list-item+.task-list-item { |
|||
margin-top: 3px; |
|||
} |
|||
|
|||
.markdown-body .task-list-item input { |
|||
margin: 0 .2em .25em -1.6em; |
|||
vertical-align: middle; |
|||
} |
@ -0,0 +1,403 @@ |
|||
// |
|||
/* |
|||
* 主题变量 |
|||
*/ |
|||
|
|||
|
|||
/* |
|||
* 内部通用scss |
|||
*/ |
|||
|
|||
|
|||
@mixin clearfix { |
|||
&:after { |
|||
clear: both; |
|||
content: '.'; |
|||
display: block; |
|||
height: 0; |
|||
line-height: 0; |
|||
overflow: hidden; |
|||
} |
|||
*height: 1%; |
|||
} |
|||
|
|||
|
|||
@mixin hairline { |
|||
&::after { |
|||
content: " "; |
|||
box-sizing: border-box; |
|||
pointer-events: none; |
|||
border: 0 solid #ebedf0; |
|||
position: absolute; |
|||
top: -50%; |
|||
right: -50%; |
|||
bottom: -50%; |
|||
left: -50%; |
|||
-webkit-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
@content |
|||
} |
|||
}; |
|||
@mixin hairline--all { |
|||
@include hairline{ |
|||
border-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--right { |
|||
@include hairline{ |
|||
border-right-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--left { |
|||
@include hairline{ |
|||
border-left-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--bottom { |
|||
@include hairline{ |
|||
border-bottom-width: 1px; |
|||
}; |
|||
} |
|||
|
|||
@mixin hairline--top { |
|||
@include hairline{ |
|||
border-top-width: 1px; |
|||
}; |
|||
} |
|||
|
|||
//一行溢出 |
|||
@mixin text-overflow{ |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
}; |
|||
|
|||
//两行溢出 |
|||
@mixin text-overflow($num: 2){ |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: $num; |
|||
line-clamp: $num; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
@mixin ellipsis($lines: 1) { |
|||
@if ($lines==1) { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} @else { |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: $lines; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* |
|||
* 媒体查询 |
|||
*/ |
|||
// 只针对自己的屏幕 |
|||
@mixin media($type...) { |
|||
@each $screen in $type { |
|||
@if $screen == xs { |
|||
@media (max-width: 767.9999px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == sm { |
|||
@media (min-width: 768px) and (max-width: 991.9999px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == md { |
|||
@media (min-width: 992px) and (max-width: 1199.9999px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == lg { |
|||
@media (min-width: 1200px) { |
|||
@content; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 优先 PC 端 |
|||
@mixin media-pc($type...) { |
|||
@each $screen in $type { |
|||
@if $screen == xs { |
|||
@media (max-width: 768px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == sm { |
|||
@media (max-width: 920px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == md { |
|||
@media (max-width: 1200px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == lg { |
|||
@media (max-width: 1366px) { |
|||
@content; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 优先移动端 |
|||
@mixin media-mobile($type...) { |
|||
@each $screen in $type { |
|||
@if $screen == xs { |
|||
@media (min-width: 768px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == sm { |
|||
@media (min-width: 920px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == md { |
|||
@media (min-width: 1200px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == lg { |
|||
@media (min-width: 1366px) { |
|||
@content; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 通用手机屏幕 |
|||
$phone: 47em; |
|||
|
|||
// iphone4 |
|||
$iphone4-w: 320px; |
|||
$iphone4-h: 480px; |
|||
|
|||
// iphone5 |
|||
$iphone5-w: 320px; |
|||
$iphone5-h: 568px; |
|||
|
|||
// iphone6 |
|||
$iphone6-w: 375px; |
|||
$iphone6-h: 667px; |
|||
|
|||
// plus |
|||
$plus-w: 414px; |
|||
$plus-h: 736px; |
|||
|
|||
// ipad = 768~1360px |
|||
$ipad-min: 47.063em; |
|||
$ipad-max: 85em; |
|||
|
|||
// 笔记本 = 1360~1600px |
|||
$s-pc-min: 85.063em; |
|||
$s-pc-max: 100em; |
|||
|
|||
// 笔记本~1080p显示器 = 1600~1920px |
|||
$l-pc-min: 100.063em; |
|||
$l-pc-max: 120em; |
|||
|
|||
// 高分屏显示器 > 1920px |
|||
$xl-pc: 120.063em; |
|||
|
|||
|
|||
@mixin zsy($devices){ |
|||
@if $devices == phone{ |
|||
@media only screen and (max-width: $phone){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == iphone4{ |
|||
@media only screen and (device-width: $iphone4-w) and (device-height: $iphone4-h) and (-webkit-min-device-pixel-ratio: 2){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == iphone5{ |
|||
@media only screen and (device-width: $iphone5-w) and (device-height: $iphone5-h) and (-webkit-min-device-pixel-ratio: 2){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == iphone6{ |
|||
@media only screen and (device-width: $iphone6-w) and (device-height: $iphone6-h) and (-webkit-min-device-pixel-ratio: 2){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == plus{ |
|||
@media only screen and (device-width: $plus-w) and (device-height: $plus-h) and (-webkit-min-device-pixel-ratio: 2){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == ipad{ |
|||
@media only screen and (min-width: $ipad-min) and (max-width: $ipad-max){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == s-pc{ |
|||
@media only screen and (min-width: $s-pc-min) and (max-width: $s-pc-max){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == l-pc{ |
|||
@media only screen and (min-width: $l-pc-min) and (max-width: $l-pc-max){ |
|||
@content; |
|||
} |
|||
} |
|||
@else if $devices == xl-pc{ |
|||
@media only screen and (min-width: $xl-pc){ |
|||
@content; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
/** |
|||
https://v3.bootcss.com/css/#helper-classes-center |
|||
*/ |
|||
$hide-array: hidden-xs, hidden-sm, hidden-md, hidden-lg; |
|||
@each $c in $hide-array { |
|||
$i: index($hide-array, $c); |
|||
.#{$c} { // SCSS 循环是从 1 开始,不是 0 哦~ |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
$visible-array: visible-xs, visible-sm, visible-md, visible-lg; |
|||
@each $c in $visible-array { |
|||
$i: index($visible-array, $c); |
|||
.#{$c} { // SCSS 循环是从 1 开始,不是 0 哦~ |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
@include media(xs) { |
|||
.visible-xs { |
|||
display: block !important; |
|||
} |
|||
.hidden-xs { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
@include media(sm) { |
|||
.visible-sm { |
|||
display: block !important; |
|||
} |
|||
.hidden-sm { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
@include media(md) { |
|||
.visible-md { |
|||
display: block !important; |
|||
} |
|||
.hidden-md { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
@include media(lg) { |
|||
.visible-lg { |
|||
display: block !important; |
|||
} |
|||
.hidden-lg { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
@function col-width($col:1, $total:24) { |
|||
@return percentage($col/$total); |
|||
} |
|||
|
|||
/** |
|||
将一行分为12格 |
|||
以高像素媒体查询为主 |
|||
*/ |
|||
.row { |
|||
@include clearfix; |
|||
@include media(xs) { |
|||
@for $i from 1 through 12 { |
|||
.col-xs-#{$i} { |
|||
float: left; |
|||
} |
|||
.col-xs-#{$i} { |
|||
width: col-width($i); |
|||
} |
|||
} |
|||
} |
|||
@include media(sm) { |
|||
@for $i from 1 through 12 { |
|||
.col-sm-#{$i} { |
|||
float: left; |
|||
} |
|||
.col-sm-#{$i} { |
|||
width: col-width($i); |
|||
} |
|||
} |
|||
} |
|||
@include media(md) { |
|||
@for $i from 1 through 12 { |
|||
.col-md-#{$i} { |
|||
float: left; |
|||
} |
|||
.col-md-#{$i} { |
|||
width: col-width($i); |
|||
} |
|||
} |
|||
} |
|||
@include media(lg) { |
|||
@for $i from 1 through 12 { |
|||
.col-lg-#{$i} { |
|||
float: left; |
|||
} |
|||
.col-lg-#{$i} { |
|||
width: col-width($i); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//.row { |
|||
// display: flex; |
|||
// flex-wrap: wrap; |
|||
// @media (max-width: 768px) { |
|||
// @for $i from 1 through 12 { |
|||
// .col-xs-#{$i} { |
|||
// width: col-width($i); |
|||
// } |
|||
// } |
|||
// } |
|||
// @media (min-width: 768px) and (max-width: 992px) { |
|||
// @for $i from 1 through 12 { |
|||
// .col-sm-#{$i} { |
|||
// width: col-width($i); |
|||
// } |
|||
// } |
|||
// } |
|||
// @media (min-width: 992px) and (max-width: 1200px) { |
|||
// @for $i from 1 through 12 { |
|||
// .col-md-#{$i} { |
|||
// width: col-width($i); |
|||
// } |
|||
// } |
|||
// } |
|||
// @media (min-width: 1200px) { |
|||
// @for $i from 1 through 12 { |
|||
// .col-lg-#{$i} { |
|||
// width: col-width($i); |
|||
// } |
|||
// } |
|||
// } |
|||
//} |
|||
|
|||
// |
|||
|
|||
// *{ |
|||
// user-select: none; |
|||
// } |
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<header class="header"> |
|||
<div class="wrapper fixed"> |
|||
<div class="left" @click="clickBack"> |
|||
<slot name="left"> |
|||
{{back?'返回':''}} |
|||
</slot> |
|||
</div> |
|||
<div class="center"> |
|||
<slot>{{title}}</slot> |
|||
</div> |
|||
<div class="right"> |
|||
<slot name="right"></slot> |
|||
</div> |
|||
</div> |
|||
<div class="block"></div> |
|||
</header> |
|||
</template> |
|||
<script> |
|||
import {useRoute,useRouter} from 'vue-router' |
|||
import {computed} from "vue"; |
|||
import {useExportData} from '@/assets/script/util.js' |
|||
export default { |
|||
props:{ |
|||
back: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
setup(props,context) { |
|||
const exportData = useExportData() |
|||
|
|||
const router = useRouter() |
|||
const isClickBack = props.back; |
|||
exportData.clickBack = ()=>{ |
|||
if (isClickBack){ |
|||
router.back() |
|||
} |
|||
} |
|||
|
|||
const route = useRoute() |
|||
let title = computed(() => route.meta.title) |
|||
exportData.title = title |
|||
return exportData |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.header { |
|||
.block{ |
|||
height: 46px; |
|||
line-height: 46px; |
|||
} |
|||
.wrapper { |
|||
height: 45px; |
|||
line-height: 45px; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
background-color: white; |
|||
padding: 0 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
&.fixed{ |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0;z-index: 100; |
|||
} |
|||
.center { |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.left, .right { |
|||
width: 20%; |
|||
} |
|||
|
|||
.left { |
|||
text-align: left; |
|||
} |
|||
|
|||
.right { |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<h1>{{ msg }}</h1> |
|||
|
|||
<p> |
|||
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> | |
|||
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a> |
|||
</p> |
|||
|
|||
<button @click="state.count++">count is: {{ state.count }}</button> |
|||
<p> |
|||
Edit |
|||
<code>components/HelloWorld.vue</code> to test hot module replacement. |
|||
</p> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { defineProps, reactive } from 'vue' |
|||
|
|||
defineProps({ |
|||
msg: String |
|||
}) |
|||
|
|||
const state = reactive({ count: 0 }) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<div class="a-image" :class="className"> |
|||
<img :class="type" :src="realSrc" :alt="alt"> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {watchEffect,ref} from "vue" |
|||
|
|||
export default { |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
src: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
alt: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
setup(props) { |
|||
const {src} = props; |
|||
let realSrc = ref('') |
|||
watchEffect( async () => { |
|||
let img = '/logo.png' |
|||
let image = new Image() |
|||
realSrc.value = img; |
|||
image.src= src; |
|||
image.onload = () => { |
|||
realSrc.value = src; |
|||
} |
|||
image.onerror = () => { |
|||
realSrc.value = img; |
|||
} |
|||
}) |
|||
return { |
|||
realSrc |
|||
} |
|||
} |
|||
} |
|||
</script> |
@ -0,0 +1,11 @@ |
|||
import {createApp} from 'vue' |
|||
import router from "./router/index" |
|||
import App from './App.vue' |
|||
import Header from "@/components/Header.vue" |
|||
import Image from "@/components/Image.vue" |
|||
|
|||
const app = createApp(App); |
|||
app.use(router); |
|||
app.mount('#app') |
|||
app.component("Header",Header) |
|||
app.component("Image",Image) |
@ -0,0 +1,139 @@ |
|||
export default { |
|||
homeData(){ |
|||
return new Promise((resolve => { |
|||
setTimeout(()=>{ |
|||
resolve({ |
|||
code: 200, |
|||
data:[ |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者弹性裤子", |
|||
price: 5, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者垫子", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
}, |
|||
{ |
|||
pic: 'https://scpic.chinaz.net/files/pic/pic9/202103/hpic3688.jpg', |
|||
title: "神秘的瑜伽舞者棉衣", |
|||
price: 100, |
|||
originprice: 998 |
|||
} |
|||
] |
|||
}) |
|||
},1500) |
|||
})) |
|||
} |
|||
} |
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<Header> |
|||
</Header> |
|||
<div class="content"> |
|||
<div>该项目用于学习vue3,如有冒犯,敬请见谅。</div> |
|||
<div style="margin-top: 20px"> 欲联系作者请发邮件<a href="mailto:1549469775@qq.com">1549469775@qq.com</a></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {onBeforeRouteLeave, useRouter} from 'vue-router' |
|||
|
|||
export default { |
|||
setup() { |
|||
const router = useRouter() |
|||
onBeforeRouteLeave((to, from) => { |
|||
to.meta.alive = true |
|||
// console.log(to.meta) |
|||
}) |
|||
return { |
|||
router |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.content{ |
|||
padding: 20px; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<div class="page home"> |
|||
<Header> |
|||
文章详情 |
|||
</Header> |
|||
<div class="content markdown-body"> |
|||
<h1>{{source.title}}</h1> |
|||
<div class="div" v-html="source.markdown"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {useExportData} from '@/assets/script/util.js' |
|||
import {useRoute} from "vue-router"; |
|||
import {onMounted,ref,nextTick} from 'vue' |
|||
import http from '@/api/index.js' |
|||
import markdownIt from "markdown-it" |
|||
export default { |
|||
name: "Detail", |
|||
setup(){ |
|||
const route = useRoute() |
|||
const exportData = useExportData() |
|||
let source = ref({}) |
|||
exportData.source = source |
|||
onMounted(async ()=>{ |
|||
const id = route.query.id; |
|||
let res = await http.articleDetail(id) |
|||
let md = markdownIt(); |
|||
let result = md.render(res.data.data.markdown); |
|||
res.data.data.markdown = result |
|||
source.value = res.data.data |
|||
}) |
|||
return exportData |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.content{ |
|||
padding: 0 20px; |
|||
} |
|||
</style> |
@ -0,0 +1,100 @@ |
|||
.page.home{ |
|||
height: 100%; |
|||
background-color: #f5f5f5; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.banner { |
|||
height: 150px; |
|||
width: 100%; |
|||
.banner-item{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
.banner-text{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
padding: 0 10px; |
|||
background-color: rgba(255, 255, 255, 0.54); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.list{ |
|||
flex: 1; |
|||
height: 0; |
|||
overflow-y: auto; |
|||
.list-wrapper{ |
|||
padding-bottom: 10px; |
|||
.list-refresh{ |
|||
position: absolute; |
|||
top: -100%; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
text-align: center; |
|||
.list-refresh-content{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
min-height: 30px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px 0; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
.item{ |
|||
display: flex; |
|||
padding: 0 10px; |
|||
margin-top: 10px; |
|||
&:first-child{ |
|||
margin-top: 0; |
|||
} |
|||
.item-left{ |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
.item-right{ |
|||
margin-left: 10px; |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
.item-btn{ |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: orange; |
|||
padding: 5px 6px; |
|||
color: white; |
|||
border-radius: 5px; |
|||
} |
|||
.item-title{ |
|||
font-weight: bold; |
|||
font-size: 20px; |
|||
} |
|||
.item-bottom{ |
|||
line-height: 1.2; |
|||
.item-price__real{ |
|||
font-size: 20px; |
|||
color: red; |
|||
} |
|||
.item-price__normal{ |
|||
font-size: 15px; |
|||
color: grey; |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<div class="page home"> |
|||
<Header :back="false"> |
|||
<template #right> |
|||
<div @click="router.push('/about')">关于</div> |
|||
</template> |
|||
</Header> |
|||
|
|||
<div class="list"> |
|||
<div class="list-wrapper" id="list"> |
|||
<div class="list-refresh"> |
|||
<div class="list-refresh-content"> |
|||
{{isRefresh==0?'下拉刷新':isRefresh==1?'松开刷新':isRefresh==2?'正在刷新':'刷新完成'}} |
|||
</div> |
|||
</div> |
|||
<div class="swiper-container banner" ref="swiperEl"> |
|||
<div class="swiper-wrapper"> |
|||
<div class="swiper-slide banner-item" v-for="(item,index) in bannerData" :key="index"> |
|||
<Image className="banner-pic" :src="item.image" :alt="item.title"></Image> |
|||
<div class="banner-text">{{item.title}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item" @click="clickItem(item,index)" v-for="(item,index) in homeList" :key="index"> |
|||
<Image className="item-left" type="hcenter" :src="item.images[0]" :alt="item.title"></Image> |
|||
<div class="item-right"> |
|||
<div class="item-top"> |
|||
<div class="item-title a-ov2"> |
|||
{{item.title}} |
|||
</div> |
|||
</div> |
|||
<div class="item-bottom a-ov2"> |
|||
{{item.desc}} |
|||
<!-- <div class="item-price__real">¥{{item.price}}</div>--> |
|||
<!-- <div class="item-price__normal">¥{{item.originprice}}</div>--> |
|||
</div> |
|||
<!-- <div class="item-btn">--> |
|||
<!-- 添加--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="list-loadMore">--> |
|||
<!-- <div class="list-loadMore-content">--> |
|||
<!-- {{isLoading}}--> |
|||
<!-- </div>--> |
|||
<!-- </div>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {useRoute, useRouter} from 'vue-router' |
|||
import {nextTick, onMounted, ref} from 'vue' |
|||
import http from '@/api/index.js' |
|||
import pulldown from '@/plugins/pulldown.js' |
|||
import {useExportData} from '@/assets/script/util.js' |
|||
import Swiper from 'swiper' |
|||
import "swiper/swiper.min.css" |
|||
|
|||
export default { |
|||
setup(props, context) { |
|||
const exportData = useExportData() |
|||
const router = useRouter() |
|||
const route = useRoute() |
|||
exportData.router = router |
|||
|
|||
/** |
|||
* 广告模块 |
|||
* */ |
|||
const swiperEl = ref(null) |
|||
const bannerData = ref([]) |
|||
exportData.swiperEl = swiperEl |
|||
exportData.bannerData = bannerData |
|||
onMounted(async () => { |
|||
let res = await http.bannerData(); |
|||
bannerData.value = res.data.data; |
|||
await nextTick() |
|||
new Swiper(swiperEl.value); |
|||
}) |
|||
|
|||
/** |
|||
* 首页列表模块 |
|||
*/ |
|||
let homeList = ref([]); |
|||
const {isRefresh, isLoading, Refreshing, RefreshEvent, LoadMoreEvent} = pulldown("#list"); |
|||
exportData.homeList = homeList |
|||
exportData.clickItem = (item, index) => { |
|||
router.push("/detail?id="+item._id) |
|||
} |
|||
exportData.isRefresh = isRefresh; |
|||
exportData.isLoading = isLoading; |
|||
onMounted((done) => { |
|||
Refreshing(false, true) |
|||
RefreshEvent((done) => { |
|||
console.log('下拉刷新') |
|||
done() |
|||
}) |
|||
LoadMoreEvent(async (done) => { |
|||
console.log('上拉加载') |
|||
let res = await http.articleData(); |
|||
homeList.value = res.data.data; |
|||
done() |
|||
}) |
|||
}) |
|||
return exportData |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "./Home.scss"; |
|||
</style> |
@ -0,0 +1,158 @@ |
|||
import {onMounted, ref} from "vue"; |
|||
|
|||
export function OnRefresh(hookEvent) { |
|||
|
|||
} |
|||
|
|||
export function OnLoadMore(hookEvent) { |
|||
|
|||
} |
|||
|
|||
export default function (el) { |
|||
let exportData = {} |
|||
let ELoading = { |
|||
NORMAL: 0, |
|||
LOADING: 1, |
|||
END: 2, |
|||
} |
|||
let ERefresh = { |
|||
NORMAL: 0, |
|||
PRELOADING: 1, |
|||
LOADING: 2, |
|||
END: 3, |
|||
} |
|||
let isRefresh = ref(ERefresh.NORMAL) |
|||
let isLoading = ref(ELoading.NORMAL) |
|||
exportData.isRefresh = isRefresh; |
|||
exportData.isLoading = isLoading; |
|||
|
|||
let refreshArray = []; |
|||
exportData.RefreshEvent = (hook) => { |
|||
refreshArray.push(hook) |
|||
} |
|||
|
|||
let loadMoreArray = []; |
|||
exportData.LoadMoreEvent = (hook) => { |
|||
loadMoreArray.push(hook) |
|||
} |
|||
|
|||
let list = null |
|||
|
|||
function Refreshing(needAnim) { |
|||
if (!list) { |
|||
return |
|||
} |
|||
isRefresh.value = ERefresh.LOADING |
|||
if (needAnim) { |
|||
list.style.transition = `transform .4s ease`; |
|||
} |
|||
list.style.transform = `translateY(${50}px)`; |
|||
let done = ()=>{ |
|||
isRefresh.value = ERefresh.END |
|||
setTimeout(() => { |
|||
list.style.transform = `translateY(${0}px)`; |
|||
setTimeout(() => { |
|||
isRefresh.value = ERefresh.NORMAL |
|||
}, 400) |
|||
}, 200) |
|||
} |
|||
refreshArray.forEach(v => v(done)) |
|||
} |
|||
|
|||
function LoadMoreing() { |
|||
isLoading.value = ELoading.LOADING |
|||
let done = ()=>{ |
|||
isLoading.value = ELoading.END |
|||
} |
|||
//上拉加载
|
|||
loadMoreArray.forEach(v => v(done)) |
|||
} |
|||
|
|||
exportData.Refreshing = (type, needAnim) => { |
|||
setTimeout(() => { |
|||
if (type == undefined) { |
|||
Refreshing() |
|||
} |
|||
if (type) { |
|||
Refreshing(needAnim) |
|||
} |
|||
if (!type) { |
|||
LoadMoreing(needAnim) |
|||
} |
|||
},0) |
|||
} |
|||
|
|||
|
|||
onMounted(() => { |
|||
list = document.querySelector(el) |
|||
let startY = 0; |
|||
let isMove = false; |
|||
let zu = .2 |
|||
let pageHeight = window.innerHeight; // 屏幕高度
|
|||
let moreHeight = 50; |
|||
let parentNode = list.parentNode |
|||
let recordPoint = true // 是否可以记录起始点(下拉加载用)
|
|||
let canRefresh = true // 是否可以刷新(下拉加载用)
|
|||
let canLoading = true //
|
|||
let lastScrollTop = 0 |
|||
parentNode.addEventListener("scroll", (e) => { |
|||
let listHeight = list.offsetHeight; // 列表高度
|
|||
let top = parentNode.scrollTop; |
|||
if (top <= 50) { |
|||
//下拉刷新
|
|||
canRefresh = true |
|||
recordPoint = true |
|||
} else { |
|||
canRefresh = false |
|||
} |
|||
if (top - lastScrollTop > 0 && listHeight - (top + pageHeight) <= moreHeight && isLoading.value != ELoading.LOADING) { |
|||
LoadMoreing() |
|||
} |
|||
lastScrollTop = top |
|||
}) |
|||
list.addEventListener("touchstart", (e) => { |
|||
isMove = true |
|||
}) |
|||
list.addEventListener("touchmove", (e) => { |
|||
if (!isMove || !canRefresh || |
|||
(isRefresh.value != ERefresh.NORMAL |
|||
&& isRefresh.value != ERefresh.PRELOADING |
|||
&& isRefresh.value != ERefresh.END) |
|||
) { |
|||
return |
|||
} |
|||
let touch = e.touches[0]; |
|||
if (recordPoint) { |
|||
startY = touch.clientY; |
|||
recordPoint = false |
|||
} |
|||
let y = (touch.clientY - startY) * zu; |
|||
if (y > 0) { |
|||
list.style.transform = `translateY(${y}px)` |
|||
list.style.transition = '' |
|||
if (y > 70) { |
|||
isRefresh.value = ERefresh.PRELOADING |
|||
} else { |
|||
isRefresh.value = ERefresh.NORMAL |
|||
} |
|||
} |
|||
}) |
|||
|
|||
list.addEventListener("touchend", (e) => { |
|||
isMove = false |
|||
recordPoint = true |
|||
if (isRefresh.value == ERefresh.LOADING) { |
|||
return |
|||
} |
|||
list.style.transition = `transform .4s ease`; |
|||
if (isRefresh.value == ERefresh.PRELOADING) { |
|||
Refreshing() |
|||
} else { |
|||
isRefresh.value = ERefresh.NORMAL |
|||
list.style.transform = `translateY(${0})`; |
|||
} |
|||
}) |
|||
|
|||
}) |
|||
return exportData |
|||
} |
@ -0,0 +1,62 @@ |
|||
import * as VueRouter from "vue-router" |
|||
|
|||
/** |
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
redirect: '/home', |
|||
}, |
|||
{ |
|||
path: '/home', |
|||
component: () => import("@/pages/home"), |
|||
}, |
|||
{ |
|||
path: '/about', |
|||
component: () => import("@/pages/about"), |
|||
} |
|||
] |
|||
* |
|||
* */ |
|||
|
|||
const routes = [ |
|||
// 不能缺少.vue,因为没有指定extensions字段
|
|||
{ |
|||
path: '/', |
|||
alias: '/home', |
|||
component: () => import("@/pages/Home/Home.vue"), |
|||
meta:{ |
|||
alive: true, |
|||
title: '干货集中营' |
|||
} |
|||
}, |
|||
{ |
|||
path: '/detail', |
|||
component: () => import("@/pages/Detail/Detail.vue"), |
|||
meta:{ |
|||
alive: true |
|||
} |
|||
}, |
|||
{ |
|||
path: '/about', |
|||
component: () => import("@/pages/About/About.vue"), |
|||
meta:{ |
|||
alive: true , |
|||
title: '关于我们' |
|||
} |
|||
} |
|||
] |
|||
|
|||
|
|||
const router = VueRouter.createRouter({ |
|||
history: VueRouter.createWebHashHistory(), |
|||
routes, |
|||
scrollBehavior(to, from, savedPosition) { |
|||
if (savedPosition) { |
|||
return savedPosition |
|||
} else { |
|||
return { top: 0 } |
|||
} |
|||
}, |
|||
}); |
|||
|
|||
export default router; |
@ -0,0 +1,20 @@ |
|||
import {defineConfig} from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import path from "path" |
|||
// https://vitejs.dev/config/
|
|||
export default defineConfig({ |
|||
resolve: { |
|||
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], |
|||
alias: { |
|||
"@": path.resolve("./src") |
|||
} |
|||
}, |
|||
css: { |
|||
preprocessorOptions: { |
|||
scss: { |
|||
additionalData: `@import '@/assets/style/_global.scss';\n` |
|||
} |
|||
} |
|||
}, |
|||
plugins: [vue()] |
|||
}) |
Loading…
Reference in new issue