Vite App

commit c98d2d7eb204da11c2ff470d69c68c2ebb9e56ec Author: npmrun <62639956+npmrun@users.noreply.github.com> Date: Fri Mar 19 17:23:55 2021 +0800 init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4f2b732 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local +.idea +.vscode diff --git a/index.html b/index.html new file mode 100644 index 0000000..030a6ff --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +

+ + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..5eeeb6f --- /dev/null +++ b/package-lock.json @@ -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 + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5c8b4ab --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/public/logo.png differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..71ed959 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..4d96c95 --- /dev/null +++ b/src/api/index.js @@ -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) +} diff --git a/src/api/request/index.js b/src/api/request/index.js new file mode 100644 index 0000000..46ef8c8 --- /dev/null +++ b/src/api/request/index.js @@ -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) + }); + }) +} diff --git a/src/assets/image/logo.png b/src/assets/image/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/image/logo.png differ diff --git a/src/assets/script/util.js b/src/assets/script/util.js new file mode 100644 index 0000000..457ff39 --- /dev/null +++ b/src/assets/script/util.js @@ -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 +} diff --git a/src/assets/style/_global.scss b/src/assets/style/_global.scss new file mode 100644 index 0000000..8defaef --- /dev/null +++ b/src/assets/style/_global.scss @@ -0,0 +1,2 @@ +@import "./reactive.scss"; +$red: green; diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss new file mode 100644 index 0000000..6b15b9c --- /dev/null +++ b/src/assets/style/common.scss @@ -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%); + } + } +} + diff --git a/src/assets/style/github-markdown.scss b/src/assets/style/github-markdown.scss new file mode 100644 index 0000000..6362aff --- /dev/null +++ b/src/assets/style/github-markdown.scss @@ -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; +} diff --git a/src/assets/style/reactive.scss b/src/assets/style/reactive.scss new file mode 100644 index 0000000..e4a152f --- /dev/null +++ b/src/assets/style/reactive.scss @@ -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; +// } diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..7998fef --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,89 @@ + + + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..e4f6590 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git a/src/components/Image.vue b/src/components/Image.vue new file mode 100644 index 0000000..1edc2fe --- /dev/null +++ b/src/components/Image.vue @@ -0,0 +1,49 @@ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..165e101 --- /dev/null +++ b/src/main.js @@ -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) diff --git a/src/mock/index.js b/src/mock/index.js new file mode 100644 index 0000000..7ab2aa7 --- /dev/null +++ b/src/mock/index.js @@ -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) + })) + } +} diff --git a/src/pages/About/About.vue b/src/pages/About/About.vue new file mode 100644 index 0000000..1fadd0d --- /dev/null +++ b/src/pages/About/About.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/pages/Detail/Detail.vue b/src/pages/Detail/Detail.vue new file mode 100644 index 0000000..fa776cc --- /dev/null +++ b/src/pages/Detail/Detail.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/pages/Home/Home.scss b/src/pages/Home/Home.scss new file mode 100644 index 0000000..63ecae4 --- /dev/null +++ b/src/pages/Home/Home.scss @@ -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; + } + } + } + } + } +} diff --git a/src/pages/Home/Home.vue b/src/pages/Home/Home.vue new file mode 100644 index 0000000..2d3a936 --- /dev/null +++ b/src/pages/Home/Home.vue @@ -0,0 +1,111 @@ + + + diff --git a/src/plugins/pulldown.js b/src/plugins/pulldown.js new file mode 100644 index 0000000..c7d5fb5 --- /dev/null +++ b/src/plugins/pulldown.js @@ -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 +} diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..d5b5863 --- /dev/null +++ b/src/router/index.js @@ -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; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..ffa7757 --- /dev/null +++ b/vite.config.js @@ -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()] +})

{{ msg }}

{{source.title}}