Browse Source

init

master
npmrun 4 years ago
commit
c98d2d7eb2
  1. 7
      .gitignore
  2. 13
      index.html
  3. 670
      package-lock.json
  4. 22
      package.json
  5. BIN
      public/favicon.ico
  6. BIN
      public/logo.png
  7. 31
      src/App.vue
  8. 8
      src/api/index.js
  9. 50
      src/api/request/index.js
  10. BIN
      src/assets/image/logo.png
  11. 15
      src/assets/script/util.js
  12. 2
      src/assets/style/_global.scss
  13. 45
      src/assets/style/common.scss
  14. 985
      src/assets/style/github-markdown.scss
  15. 403
      src/assets/style/reactive.scss
  16. 89
      src/components/Header.vue
  17. 30
      src/components/HelloWorld.vue
  18. 49
      src/components/Image.vue
  19. 11
      src/main.js
  20. 139
      src/mock/index.js
  21. 31
      src/pages/About/About.vue
  22. 43
      src/pages/Detail/Detail.vue
  23. 100
      src/pages/Home/Home.scss
  24. 111
      src/pages/Home/Home.vue
  25. 158
      src/plugins/pulldown.js
  26. 62
      src/router/index.js
  27. 20
      vite.config.js

7
.gitignore

@ -0,0 +1,7 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
.idea
.vscode

13
index.html

@ -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>

670
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
}
}
}

22
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"
}
}

BIN
public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

31
src/App.vue

@ -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>

8
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)
}

50
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)
});
})
}

BIN
src/assets/image/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

15
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
}

2
src/assets/style/_global.scss

@ -0,0 +1,2 @@
@import "./reactive.scss";
$red: green;

45
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%);
}
}
}

985
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;
}

403
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;
// }

89
src/components/Header.vue

@ -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>

30
src/components/HelloWorld.vue

@ -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>

49
src/components/Image.vue

@ -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>

11
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)

139
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)
}))
}
}

31
src/pages/About/About.vue

@ -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>

43
src/pages/Detail/Detail.vue

@ -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>

100
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;
}
}
}
}
}
}

111
src/pages/Home/Home.vue

@ -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>

158
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
}

62
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;

20
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()]
})
Loading…
Cancel
Save