header final

package-lock.json

@@ -2033,8 +2033,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz",
-      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k=",
-      "dev": true
+      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k="
     },
     "autoprefixer": {
       "version": "9.7.4",
@@ -2101,8 +2100,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "base": {
       "version": "0.11.2",
@@ -2195,8 +2193,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "1.13.1",
@@ -2299,7 +2296,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
       "integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3071,8 +3067,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -3356,6 +3351,24 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz",
+      "integrity": "sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=",
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz?cache=0&sync_timestamp=1571657176668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
+        }
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
@@ -3392,6 +3405,14 @@
         "schema-utils": "^2.6.0"
       }
     },
+    "css-parse": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/css-parse/download/css-parse-2.0.0.tgz",
+      "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
+      "requires": {
+        "css": "^2.0.0"
+      }
+    },
     "css-select": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/css-select/download/css-select-2.1.0.tgz?cache=0&sync_timestamp=1573341911322&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-select%2Fdownload%2Fcss-select-2.1.0.tgz",
@@ -3571,8 +3592,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "deep-equal": {
       "version": "1.1.1",
@@ -4061,8 +4081,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -5131,8 +5150,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "1.2.11",
@@ -5750,7 +5768,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz?cache=0&sync_timestamp=1573078121947&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob%2Fdownload%2Fglob-7.1.6.tgz",
       "integrity": "sha1-FB8zuBp8JJLhJVlDB0gMRmeSeKY=",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -6320,7 +6337,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -6329,8 +6345,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz",
-      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=",
-      "dev": true
+      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w="
     },
     "inquirer": {
       "version": "6.5.2",
@@ -7005,7 +7020,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.4.0.tgz",
       "integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -7016,7 +7030,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npm.taobao.org/json5/download/json5-1.0.1.tgz",
           "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -7039,6 +7052,11 @@
       "integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz",
@@ -7358,7 +7376,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz",
       "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -7366,8 +7383,7 @@
     "minimist": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-      "dev": true
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
     },
     "minipass": {
       "version": "3.1.1",
@@ -7456,7 +7472,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.1.tgz?cache=0&sync_timestamp=1579899671093&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -7464,8 +7479,7 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
     },
@@ -7858,7 +7872,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/once/download/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -8123,6 +8136,30 @@
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npm.taobao.org/path/download/path-0.12.7.tgz",
+      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        },
+        "util": {
+          "version": "0.10.4",
+          "resolved": "https://registry.npm.taobao.org/util/download/util-0.10.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Futil%2Fdownload%2Futil-0.10.4.tgz",
+          "integrity": "sha1-OqASW/5mikZy3liFfTrOJ+y3aQE=",
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
     "path-browserify": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/path-browserify/download/path-browserify-0.0.1.tgz",
@@ -8144,8 +8181,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -8904,8 +8940,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -9389,8 +9424,7 @@
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npm.taobao.org/resolve-url/download/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
     "restore-cursor": {
       "version": "2.0.0",
@@ -9490,14 +9524,12 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz",
-      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
-      "dev": true
+      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
     },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
-      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk=",
-      "dev": true
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
     },
     "schema-utils": {
       "version": "2.6.4",
@@ -9959,7 +9991,6 @@
       "version": "0.5.3",
       "resolved": "https://registry.npm.taobao.org/source-map-resolve/download/source-map-resolve-0.5.3.tgz",
       "integrity": "sha1-GQhmvs51U+H48mei7oLGBrVQmho=",
-      "dev": true,
       "requires": {
         "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0",
@@ -9989,8 +10020,7 @@
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/source-map-url/download/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "spdx-correct": {
       "version": "3.1.0",
@@ -10316,6 +10346,56 @@
         }
       }
     },
+    "stylus": {
+      "version": "0.54.7",
+      "resolved": "https://registry.npm.taobao.org/stylus/download/stylus-0.54.7.tgz",
+      "integrity": "sha1-xs5Hk5Ze5Ti86+UPMVN7/ATYjNI=",
+      "requires": {
+        "css-parse": "~2.0.0",
+        "debug": "~3.1.0",
+        "glob": "^7.1.3",
+        "mkdirp": "~0.5.x",
+        "safer-buffer": "^2.1.2",
+        "sax": "~1.2.4",
+        "semver": "^6.0.0",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1581458063470&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
+          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0="
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz?cache=0&sync_timestamp=1571657176668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.7.3.tgz",
+          "integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M="
+        }
+      }
+    },
+    "stylus-loader": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npm.taobao.org/stylus-loader/download/stylus-loader-3.0.2.tgz",
+      "integrity": "sha1-J6cGQgsFo44DjnyssVNXjUUFE8Y=",
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "when": "~3.6.x"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz",
@@ -10856,8 +10936,7 @@
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npm.taobao.org/urix/download/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
     },
     "url": {
       "version": "0.11.0",
@@ -11470,6 +11549,11 @@
       "integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=",
       "dev": true
     },
+    "when": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npm.taobao.org/when/download/when-3.6.4.tgz",
+      "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz?cache=0&sync_timestamp=1574116720213&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-1.3.1.tgz",
@@ -11558,8 +11642,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "1.0.3",

package.json

@@ -10,6 +10,9 @@
   "dependencies": {
     "core-js": "^3.6.4",
     "fastclick": "^1.0.6",
+    "path": "^0.12.7",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5"
   },

src/assets/styles/iconfont.css

@@ -0,0 +1,29 @@
+@font-face {font-family: "iconfont";
+  src: url('./iconfont/iconfont.eot?t=1582894449865'); /* IE9 */
+  src: url('./iconfont/iconfont.eot?t=1582894449865#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL0AAsAAAAABvwAAAKoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBMIE/ATYCJAMQCwoABCAFhG0HTRs2Bsiemjxts6nMMrFmQwoVIOiExcP3Y9/Ove+tapIkGnc2iUZN3kxCM2gMCRqpbMcaITLdS/hD1/wKoPenWHLZGiMpytIzCQc4oH+6oD1ujeM7XNMiuOorWFZjUiX7eEkh4RsJVeOnTIVZ5B9cTlsDA5lnb7msbWMt+igak+LA0oDGXmQFkqA3jN1E4BA2E2g3xkJvxT6WmYoK9ArEQ5dHmUrOo6pWvFVorplYxUdNWvN9/qN84N+P/4JRITUVYNj+1WOaufkVulfZt40JiuElqNObUDCPUomb2siZvLAYrPbmBYsorVolc9UU71VCpI4dC+FfHiEVohlAd4IFLVr4FcIIwa8iQvKrilLgh2haZWwKZVsnjhyQQnT2C/lTjAsQ5gDIItTPHzHNFPmMoLjYHkdzmvHL5cov18drivP5ISGfVqRIG383HcfQWye5w+vrOyJPTZsHzXnSGvzVu6jMTQdQ7SedIjcxMmiw65KBfGQ+QZHf+Dd+uCUtaC/9W9UKfo69lqc0OKrgQ4l7i7+ouGdRDaVAW6svw6LIVo2N7pFo147vmKCfO4dmqHeI0JoTW5BajELRahxbifPQpMMCNGu1Cu3mxKd3GDCQF7UNs5YKhF4XSN0+Q9HLxlbiDZoM+0Gz3shDu4MYWLDDZGyVzQFGhCnEv7BNtGJITzWRPEf+KSKXlXLmGp3f+mHq9Rfjz6jQzTHEf/EZEQPmtIQnZTsUQoNxeocJjTZE5mzsa9W9aZRomanZ5KAIQSlQ8wt0JTSF0eqkVvr8HOI+CRHXkjbgXUOOt60fBHj5e2CfVapX2r1cM/SFmxkhDGhxNAnElHZIEDTQq2+3gxJkpDMiZJzxwXKtvqrR+hr5AYVWFqBVjYwSNZq03bt3SOjfSiSLpqZ5lqEA') format('woff2'),
+  url('./iconfont/iconfont.woff?t=1582894449865') format('woff'),
+  url('./iconfont/iconfont.ttf?t=1582894449865') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('./iconfont/iconfont.svg?t=1582894449865#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* .iconicon-test:before {
+  content: "\e63c";
+}
+
+.iconicon-test1:before {
+  content: "\e658";
+}
+
+.iconicon-test2:before {
+  content: "\e65c";
+} */
+

src/assets/styles/iconfont/iconfont.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="icon-test" unicode="&#58940;" d="M192 448c0 141.152 114.848 256 256 256s256-114.848 256-256-114.848-256-256-256-256 114.848-256 256z m710.624-409.376l-206.88 206.88A318.784 318.784 0 0 1 768 448c0 176.736-143.264 320-320 320S128 624.736 128 448s143.264-320 320-320a318.784 318.784 0 0 1 202.496 72.256l206.88-206.88 45.248 45.248z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="icon-test1" unicode="&#58968;" d="M589.088 105.376L310.464 384l278.624 278.624 45.248-45.248L400.96 384l233.376-233.376z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="icon-test2" unicode="&#58972;" d="M768 512l-256-256-256 256z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/assets/styles/variable.styl

@@ -0,0 +1 @@
+$bgColor = #00bcd4

src/main.js

@@ -1,12 +1,14 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
-import fastClick from 'fastclick'
-import './assets/styles/reset.css'
-import './assets/styles/border.css'
+import fastClick from "fastclick";
+// CSS文件引入
+import "styles/reset.css";
+import "styles/border.css";
+import "styles/iconfont.css";
 
 Vue.config.productionTip = false;
-fastClick.attach(document.body)
+fastClick.attach(document.body);
 
 new Vue({
   router,

src/pages/home/components/Header.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="header">
+    <div class="header-left">
+      <div class="iconfont back-icon">&#xe658;</div>
+    </div>
+    <div class="header-input">
+      <span class="iconfont search-icon">&#xe63c;</span>输入城市景点游玩主题
+    </div>
+    <div class="header-right">城市<span class="iconfont">&#xe65c;</span></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomeHeader"
+};
+</script>
+
+<style lang="stylus" scoped>
+// 引入styles文件夹中的variable.styl文件
+// 要在CSS中使用引入你需要在前面加个~
+@import '~styles/variable.styl'
+.header
+    display flex
+    line-height .86rem
+    background $bgColor
+    color #ffffff
+    .header-left
+        width .64rem
+        float left
+        margin-left .1rem
+        .back-icon
+          text-align center
+          font-size .4rem
+    .header-input
+        flex 1
+        height .64rem
+        line-height .64rem
+        margin-top .12rem
+        margin-left .1rem
+        padding-left .2rem
+        background #ffffff
+        border-radius .1rem
+        color #cccccc
+        .search-icon
+          margin-right .1rem
+    .header-right
+        width 1.24rem
+        float right
+        text-align center
+</style>

src/pages/home/home.vue

@@ -1,14 +1,20 @@
 <template>
-    <div>
-        Hello Wrold
-    </div>
+  <div>
+    <home-header></home-header>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: 'Home'
-    }
+// 组件引入
+import HomeHeader from "./components/Header";
+export default {
+  //单页组件名
+  name: "Home",
+  // 组件注册
+  components: {
+    HomeHeader: HomeHeader
+  }
+};
 </script>
 
-<style>
-</style>
+<style></style>

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../pages/home/home";
+import Home from "../pages/home/Home";
 
 Vue.use(VueRouter);
 

vue.config.js

@@ -1,3 +1,12 @@
+const path = require("path");
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
 module.exports = {
+  chainWebpack: config => {
+    config.resolve.alias
+      .set("@", resolve("src"))
+      .set("styles", resolve("src/assets/styles"));
+  },
   lintOnSave: false
 };