diff --git a/package-lock.json b/package-lock.json
index a18f229..3f49d6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1452,6 +1452,11 @@
         "vue-template-compiler": "^2.6.10"
       }
     },
+    "@dcloudio/uni-ui": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/@dcloudio/uni-ui/download/@dcloudio/uni-ui-1.4.8.tgz",
+      "integrity": "sha512-9OTJpkuqwxFI2zZ4C0ChEPddTSDUuXNuvJK6OSfCa5VA4nwNb9kYNm6tPjER/1S373/YZr3cBgLszdins3QuxQ=="
+    },
     "@dcloudio/vue-cli-plugin-hbuilderx": {
       "version": "2.0.0-32920211120001",
       "resolved": "https://registry.npmmirror.com/@dcloudio/vue-cli-plugin-hbuilderx/download/@dcloudio/vue-cli-plugin-hbuilderx-2.0.0-32920211120001.tgz",
@@ -2691,7 +2696,7 @@
     },
     "@types/parse-json": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1637269948744&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fparse-json%2Fdownload%2F%40types%2Fparse-json-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1637284065529&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fparse-json%2Fdownload%2F%40types%2Fparse-json-4.0.0.tgz",
       "integrity": "sha1-L4u0QUNNFjs1+4/9zNcTiSf/uMA=",
       "dev": true,
       "optional": true
@@ -3810,7 +3815,7 @@
     },
     "at-least-node": {
       "version": "1.0.0",
-      "resolved": "https://registry.npm.taobao.org/at-least-node/download/at-least-node-1.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/at-least-node/download/at-least-node-1.0.0.tgz",
       "integrity": "sha1-YCzUtG6EStTv/JKoARo8RuAjjcI=",
       "dev": true,
       "optional": true
@@ -7230,7 +7235,7 @@
     },
     "fork-ts-checker-webpack-plugin-v5": {
       "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-      "resolved": "https://registry.npmmirror.com/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz?cache=0&sync_timestamp=1635537115680&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffork-ts-checker-webpack-plugin%2Fdownload%2Ffork-ts-checker-webpack-plugin-5.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz",
       "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=",
       "dev": true,
       "optional": true,
@@ -7250,7 +7255,7 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995651629&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
           "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
           "dev": true,
           "optional": true,
@@ -7260,7 +7265,7 @@
         },
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1632811812760&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
+          "resolved": "https://registry.npmmirror.com/chalk/download/chalk-4.1.2.tgz",
           "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
           "dev": true,
           "optional": true,
@@ -7271,7 +7276,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmmirror.com/color-convert/download/color-convert-2.0.1.tgz",
           "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "optional": true,
@@ -7281,14 +7286,14 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "http://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmmirror.com/color-name/download/color-name-1.1.4.tgz",
           "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
           "dev": true,
           "optional": true
         },
         "cosmiconfig": {
           "version": "6.0.0",
-          "resolved": "https://registry.nlark.com/cosmiconfig/download/cosmiconfig-6.0.0.tgz?cache=0&sync_timestamp=1629586206512&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-6.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/cosmiconfig/download/cosmiconfig-6.0.0.tgz",
           "integrity": "sha1-2k/uhTxS9rHmk19BwaL8UL1KmYI=",
           "dev": true,
           "optional": true,
@@ -7302,14 +7307,14 @@
         },
         "deepmerge": {
           "version": "4.2.2",
-          "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz",
+          "resolved": "https://registry.npmmirror.com/deepmerge/download/deepmerge-4.2.2.tgz",
           "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
           "dev": true,
           "optional": true
         },
         "fs-extra": {
           "version": "9.1.0",
-          "resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-9.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/fs-extra/download/fs-extra-9.1.0.tgz?cache=0&sync_timestamp=1632739240201&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffs-extra%2Fdownload%2Ffs-extra-9.1.0.tgz",
           "integrity": "sha1-WVRGDHZKjaIJS6NVS/g55rmnyG0=",
           "dev": true,
           "optional": true,
@@ -7322,14 +7327,14 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/has-flag/download/has-flag-4.0.0.tgz",
           "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
           "dev": true,
           "optional": true
         },
         "import-fresh": {
           "version": "3.3.0",
-          "resolved": "https://registry.npm.taobao.org/import-fresh/download/import-fresh-3.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/import-fresh/download/import-fresh-3.3.0.tgz",
           "integrity": "sha1-NxYsJfy566oublPVtNiM4X2eDCs=",
           "dev": true,
           "optional": true,
@@ -7340,7 +7345,7 @@
         },
         "jsonfile": {
           "version": "6.1.0",
-          "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161917513&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/jsonfile/download/jsonfile-6.1.0.tgz",
           "integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=",
           "dev": true,
           "optional": true,
@@ -7351,7 +7356,7 @@
         },
         "lru-cache": {
           "version": "6.0.0",
-          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/lru-cache/download/lru-cache-6.0.0.tgz",
           "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
           "dev": true,
           "optional": true,
@@ -7361,21 +7366,21 @@
         },
         "path-type": {
           "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/path-type/download/path-type-4.0.0.tgz",
           "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=",
           "dev": true,
           "optional": true
         },
         "resolve-from": {
           "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/resolve-from/download/resolve-from-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/resolve-from/download/resolve-from-4.0.0.tgz",
           "integrity": "sha1-SrzYUq0y3Xuqv+m0DgCjbbXzkuY=",
           "dev": true,
           "optional": true
         },
         "schema-utils": {
           "version": "2.7.0",
-          "resolved": "https://registry.npmmirror.com/schema-utils/download/schema-utils-2.7.0.tgz?cache=0&sync_timestamp=1637075905726&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.0.tgz",
+          "resolved": "https://registry.npmmirror.com/schema-utils/download/schema-utils-2.7.0.tgz?cache=0&sync_timestamp=1637076384813&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.0.tgz",
           "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
           "dev": true,
           "optional": true,
@@ -7387,7 +7392,7 @@
         },
         "semver": {
           "version": "7.3.5",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1616463608061&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
+          "resolved": "https://registry.npmmirror.com/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1632475048843&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
           "integrity": "sha1-C2Ich5NI2JmOSw5L6Us/EuYBjvc=",
           "dev": true,
           "optional": true,
@@ -7407,14 +7412,14 @@
         },
         "universalify": {
           "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/universalify/download/universalify-2.0.0.tgz",
           "integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=",
           "dev": true,
           "optional": true
         },
         "yallist": {
           "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/yallist/download/yallist-4.0.0.tgz",
           "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
           "dev": true,
           "optional": true
@@ -7476,7 +7481,7 @@
     },
     "fs-monkey": {
       "version": "1.0.3",
-      "resolved": "https://registry.npm.taobao.org/fs-monkey/download/fs-monkey-1.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffs-monkey%2Fdownload%2Ffs-monkey-1.0.3.tgz",
+      "resolved": "https://registry.npmmirror.com/fs-monkey/download/fs-monkey-1.0.3.tgz",
       "integrity": "sha1-rjrJLVO7Mo7+DpodlUH2rY1I4tM=",
       "dev": true,
       "optional": true
@@ -10749,6 +10754,12 @@
       "integrity": "sha1-p5yezIbuHOP6YgbRIWxQHxR/wH4=",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/klona/download/klona-2.0.5.tgz?cache=0&sync_timestamp=1635385686109&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fklona%2Fdownload%2Fklona-2.0.5.tgz",
+      "integrity": "sha1-0WZXTZAHY5XZljqnqSj6u412r7w=",
+      "dev": true
+    },
     "koa": {
       "version": "2.13.4",
       "resolved": "https://registry.npmmirror.com/koa/download/koa-2.13.4.tgz",
@@ -11213,7 +11224,7 @@
     },
     "memfs": {
       "version": "3.3.0",
-      "resolved": "https://registry.nlark.com/memfs/download/memfs-3.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/memfs/download/memfs-3.3.0.tgz",
       "integrity": "sha1-TaLR/ECgSxcKVmIscWTGvixMvvI=",
       "dev": true,
       "optional": true,
@@ -12085,7 +12096,7 @@
       "dependencies": {
         "callsites": {
           "version": "3.1.0",
-          "resolved": "https://registry.nlark.com/callsites/download/callsites-3.1.0.tgz?cache=0&sync_timestamp=1628464722297&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcallsites%2Fdownload%2Fcallsites-3.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/callsites/download/callsites-3.1.0.tgz",
           "integrity": "sha1-s2MKvYlDQy9Us/BRkjjjPNffL3M=",
           "dev": true,
           "optional": true
@@ -13716,6 +13727,85 @@
         }
       }
     },
+    "sass": {
+      "version": "1.43.4",
+      "resolved": "https://registry.npmmirror.com/sass/download/sass-1.43.4.tgz",
+      "integrity": "sha1-aMfWobAEvvSa8NnK91DpslIQXR8=",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/sass-loader/download/sass-loader-10.1.1.tgz?cache=0&sync_timestamp=1635385678990&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsass-loader%2Fdownload%2Fsass-loader-10.1.1.tgz",
+      "integrity": "sha1-Td1aPXY455SQZd1unHwEA39+Zj0=",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmmirror.com/json5/download/json5-2.2.0.tgz",
+          "integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/download/loader-utils-2.0.2.tgz?cache=0&sync_timestamp=1636687903026&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Floader-utils%2Fdownload%2Floader-utils-2.0.2.tgz",
+          "integrity": "sha1-1uO0+4GHByGuTghoqxHdY4NowSk=",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/lru-cache/download/lru-cache-6.0.0.tgz",
+          "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmmirror.com/schema-utils/download/schema-utils-3.1.1.tgz?cache=0&sync_timestamp=1637076384813&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-3.1.1.tgz",
+          "integrity": "sha1-vHTEtraZXB2I92qLd76nIZ4MgoE=",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmmirror.com/semver/download/semver-7.3.5.tgz?cache=0&sync_timestamp=1632475048843&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsemver%2Fdownload%2Fsemver-7.3.5.tgz",
+          "integrity": "sha1-C2Ich5NI2JmOSw5L6Us/EuYBjvc=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/yallist/download/yallist-4.0.0.tgz",
+          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -15560,7 +15650,7 @@
     },
     "vue-loader-v16": {
       "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.8.3.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.8.3.tgz?cache=0&sync_timestamp=1636035363887&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.8.3.tgz",
       "integrity": "sha1-1D5nXe9bqTRdbH8FkUwT2GGZcIc=",
       "dev": true,
       "optional": true,
@@ -15572,7 +15662,7 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995651629&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
           "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
           "dev": true,
           "optional": true,
@@ -15582,7 +15672,7 @@
         },
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1632811812760&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
+          "resolved": "https://registry.npmmirror.com/chalk/download/chalk-4.1.2.tgz",
           "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
           "dev": true,
           "optional": true,
@@ -15593,7 +15683,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmmirror.com/color-convert/download/color-convert-2.0.1.tgz",
           "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "optional": true,
@@ -15603,28 +15693,28 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "http://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmmirror.com/color-name/download/color-name-1.1.4.tgz",
           "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
           "dev": true,
           "optional": true
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/has-flag/download/has-flag-4.0.0.tgz",
           "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
           "dev": true,
           "optional": true
         },
         "hash-sum": {
           "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-2.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/hash-sum/download/hash-sum-2.0.0.tgz",
           "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
           "dev": true,
           "optional": true
         },
         "json5": {
           "version": "2.2.0",
-          "resolved": "https://registry.nlark.com/json5/download/json5-2.2.0.tgz",
+          "resolved": "https://registry.npmmirror.com/json5/download/json5-2.2.0.tgz",
           "integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
           "dev": true,
           "optional": true,
@@ -15634,7 +15724,7 @@
         },
         "loader-utils": {
           "version": "2.0.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/download/loader-utils-2.0.2.tgz?cache=0&sync_timestamp=1636688132478&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Floader-utils%2Fdownload%2Floader-utils-2.0.2.tgz",
+          "resolved": "https://registry.npmmirror.com/loader-utils/download/loader-utils-2.0.2.tgz?cache=0&sync_timestamp=1636687903026&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Floader-utils%2Fdownload%2Floader-utils-2.0.2.tgz",
           "integrity": "sha1-1uO0+4GHByGuTghoqxHdY4NowSk=",
           "dev": true,
           "optional": true,
@@ -15658,7 +15748,7 @@
     },
     "vue-property-decorator": {
       "version": "8.5.1",
-      "resolved": "https://registry.npm.taobao.org/vue-property-decorator/download/vue-property-decorator-8.5.1.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-property-decorator/download/vue-property-decorator-8.5.1.tgz",
       "integrity": "sha1-VxqRz40rUH9TfXm/gnWvMYRXL/8=",
       "requires": {
         "vue-class-component": "^7.1.0"
@@ -15666,7 +15756,7 @@
       "dependencies": {
         "vue-class-component": {
           "version": "7.2.6",
-          "resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.2.6.tgz",
+          "resolved": "https://registry.npmmirror.com/vue-class-component/download/vue-class-component-7.2.6.tgz",
           "integrity": "sha1-hHHgN7jkdi9aRkaG4Z5a/HCFAuQ="
         }
       }
@@ -16480,7 +16570,7 @@
     },
     "yaml": {
       "version": "1.10.2",
-      "resolved": "https://registry.npmmirror.com/yaml/download/yaml-1.10.2.tgz?cache=0&sync_timestamp=1636797230771&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fyaml%2Fdownload%2Fyaml-1.10.2.tgz",
+      "resolved": "https://registry.npmmirror.com/yaml/download/yaml-1.10.2.tgz",
       "integrity": "sha1-IwHF/78StGfejaIzOkWeKeeSDks=",
       "dev": true,
       "optional": true
diff --git a/package.json b/package.json
index 3ae2f6e..9a0acb8 100644
--- a/package.json
+++ b/package.json
@@ -60,13 +60,14 @@
     "@dcloudio/uni-quickapp-native": "^2.0.0-32920211120001",
     "@dcloudio/uni-quickapp-webview": "^2.0.0-32920211120001",
     "@dcloudio/uni-stat": "^2.0.0-32920211120001",
+    "@dcloudio/uni-ui": "^1.4.8",
     "@vue/shared": "^3.0.0",
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
     "regenerator-runtime": "^0.12.1",
     "vue": "^2.6.11",
     "vue-class-component": "^6.3.2",
-    "vue-property-decorator": "^8.0.0",
+    "vue-property-decorator": "^8.5.1",
     "vuex": "^3.2.0"
   },
   "devDependencies": {
@@ -92,6 +93,8 @@
     "mini-types": "*",
     "miniprogram-api-typings": "*",
     "postcss-comment": "^2.0.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^10.1.1",
     "typescript": "^3.0.0",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/components/ImageSwiper/index.vue b/src/components/ImageSwiper/index.vue
new file mode 100644
index 0000000..a10fe66
--- /dev/null
+++ b/src/components/ImageSwiper/index.vue
@@ -0,0 +1,54 @@
+<!--带缩略图轮播图组件-->
+<template>
+  <view class="peopleSwiper">
+    <swiper class="bigImg" :current="current">
+      <swiper-item v-for="(big,index) in images" :key="index">
+        <image :src="big" mode="scaleToFill"></image>
+      </swiper-item>
+    </swiper>
+    <scroll-view class="smallImg" scroll-x="true" :show-scrollbar="false">
+      <view v-for="(small,index) in images" :key="index" @click="changeBigPic(index)">
+        <image :src="small" mode="widthFix" class="smallItem" :class="[index === current ? 'active' : '']"></image>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    images?: string[]
+  }
+}
+
+@Component({
+  name: 'ImgSwiper',
+  props: ['images'],
+  model: {
+    prop: 'images',
+    event: 'update'
+  }
+})
+export default class extends Vue{
+  private current = 0
+
+  changeBigPic(index: number){
+    this.current = index;
+  }
+}
+</script>
+<style>
+.peopleSwiper{height:562upx;position: relative;}
+.bigImg{width:100%;height:562upx;}
+.bigImg image{width:100%;height:562upx;}
+.smallImg{position:absolute;bottom:0;left:0;width:100%;padding:0 1rem;box-sizing:border-box;white-space:nowrap;text-align:center;}
+.smallImg view{display:inline-block;width:16%;margin:0 5px;}
+.smallItem{width:100%;border-radius:3px;box-sizing:border-box;}
+.smallItem.active{border:0.1rem solid #fff;box-sizing:border-box;}
+scroll-view ::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 1aea851..78f899e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,12 +1,62 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+		}
+	},
+	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "index",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true,
+				"scrollIndicator": "none"
+			}
+		},
+		{
+			"path": "pages/list/index",
+			"style": {
+				"navigationBarTitleText": "搜索"
+			}
+		},
+		{
+			"path": "pages/me/index",
+			"style": {
+				"navigationBarTitleText": "我"
+			}
+		},
+		{
+			"path": "pages/info/index",
+			"style": {
+				"navigationBarTitleText": "游戏详情",
+				"enablePullDownRefresh": true
 			}
 		}
 	],
+	"tabBar": {
+		"color": "#7A7E83",
+		"selectedColor": "#3cc51f",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+			"pagePath": "pages/index/index",
+			"iconPath": "static/icons/home.png",
+			"selectedIconPath": "static/icons/home_s.png",
+			"text": "首页"
+		}, {
+			"pagePath": "pages/list/index",
+			"iconPath": "static/icons/search.png",
+			"selectedIconPath": "static/icons/search_s.png",
+			"text": "搜索"
+		}, {
+			"pagePath": "pages/me/index",
+			"iconPath": "static/icons/member.png",
+			"selectedIconPath": "static/icons/member_s.png",
+			"text": "我的"
+		}]
+	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 52a4892..c5ca48b 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,50 +1,184 @@
 <template>
-	<view class="content">
-        <image class="logo" src="../../static/logo.png"></image>
-		<view>
-            <text class="title">{{title}}</text>
-        </view>
-	</view>
+  <view class="container">
+    <uni-list>
+      <uni-list-item v-for="item in 3" :key="item">
+        <uni-card mode="style" @click="onClick(item)">
+          <template v-slot:cover>
+            <view class="custom-cover" @click="onClick(item)">
+              <image class="cover-image" mode="aspectFill" :src="cover">
+              </image>
+              <view class="cover-tag">
+                <text class="uni-subtitle uni-white">20%折扣</text>
+              </view>
+              <view class="cover-content">
+                <text class="uni-subtitle uni-white">游戏名game name</text>
+              </view>
+            </view>
+          </template>
+          <uni-row class="demo-uni-row">
+            <uni-col :span="24">
+              <view class="demo-uni-col dark tag-list">
+                <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+                <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+              </view>
+            </uni-col>
+          </uni-row>
+          <uni-row class="demo-uni-row price-row">
+            <uni-col :span="24">
+              <view class="demo-uni-col dark">
+                <text class="price price-new">$200.0</text>
+                <text class="price price-raw">$200.0</text>
+                <text class="price price-shop">美国</text>
+              </view>
+            </uni-col>
+          </uni-row>
+          <view slot="actions" class="card-actions">
+            <view class="card-actions-item" @click="actionsClick('分享')">
+              <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
+              <text class="card-actions-item-text">分享</text>
+            </view>
+            <view class="card-actions-item" @click="actionsClick('点赞')">
+              <uni-icons type="heart" size="18" color="#999"></uni-icons>
+              <text class="card-actions-item-text">点赞</text>
+            </view>
+            <view class="card-actions-item" @click="actionsClick('评论')">
+              <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
+              <text class="card-actions-item-text">评论</text>
+            </view>
+          </view>
+        </uni-card>
+      </uni-list-item>
+    </uni-list>
+  </view>
 </template>
 
 <script lang="ts">
-    import Vue from 'vue';
-	export default Vue.extend({
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
+import { Component, Vue } from 'vue-property-decorator'
 
-		},
-		methods: {
+@Component({
+  name: 'Index',
+  components: {
 
-		}
-	});
+  }
+})
+
+export default class extends Vue{
+  private cover = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
+  private extraIcon = {
+    color: '#4cd964',
+    size: '22',
+    type: 'gear-filled'
+  }
+
+  onLoad() {
+
+  }
+  onClick(e: any) {
+    console.log(e)
+    uni.navigateTo({
+      url: '/pages/info/index',
+      animationType: 'pop-in',
+      animationDuration: 200})
+  }
+  actionsClick(text: string) {
+    uni.showToast({
+      title: text,
+      icon: 'none'
+    })
+  }
+}
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+.container {
+  overflow: hidden;
+}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin: 200rpx auto 50rpx auto;
-	}
+.custom-cover {
+  flex: 1;
+  flex-direction: row;
+  position: relative;
+}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+.custom-cover .cover-image {
+  width: 100%;
+  margin-top: 8px;
+  height: 180px;
+}
+.cover-tag {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 100px;
+  height: 30px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  color: #fff;
+  background-image: url("/static/icons/left_tip.png");
+  background-repeat:no-repeat;
+  background-size:auto;
+}
+.cover-tag .uni-subtitle {
+  margin-left: 5px;
+}
+.tag-list {
+  display: flex;
+}
+.tag-list .uni-tag {
+  margin-right: 5px;
+}
+.cover-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background-color: rgba($color: #000000, $alpha: 0.4);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  color: #fff;
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  height: 45px;
+  border-top: 1px #eee solid;
+}
+
+.card-actions-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.card-actions-item-text {
+  font-size: 12px;
+  color: #666;
+  margin-left: 5px;
+}
+.price-row {
+  margin-top: 12px;
+}
+.price {
+  margin-right: 5px;
+  color: #999;
+  font-size: 16px;
+}
+.price-new {
+  color: red;
+  font-size: 25px;
+}
+.uni-card__content {
+  padding-top: 5px;
+}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
 </style>
diff --git a/src/pages/info/index.vue b/src/pages/info/index.vue
new file mode 100644
index 0000000..7b8c9f6
--- /dev/null
+++ b/src/pages/info/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <view class="page">
+    <!-- 幻灯 -->
+    <image-swiper v-model="imgSwiperData"></image-swiper>
+  </view>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import ImageSwiper from '@/components/ImageSwiper/index.vue'
+
+@Component({
+  name: 'GameInfo',
+  components: {
+    ImageSwiper
+  }
+})
+export default class extends Vue{
+  private imgSwiperData: string[] = []
+  onLoad() {
+    this.imgSwiperData = [
+      'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+      'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+      'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+      'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+      'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+    ]
+  }
+  async created() {
+    uni.setNavigationBarTitle({
+      title: "游戏详情"
+    });
+
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/pages/list/index.vue b/src/pages/list/index.vue
new file mode 100644
index 0000000..3d367a5
--- /dev/null
+++ b/src/pages/list/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <view class="container">
+  </view>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'Index',
+  components: {}
+})
+export default class extends Vue{
+  onLoad() {
+
+  }
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue
new file mode 100644
index 0000000..1ab05a8
--- /dev/null
+++ b/src/pages/me/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <view class="container">
+  </view>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'Member',
+  components: {}
+})
+export default class extends Vue{
+  onLoad() {
+
+  }
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/static/icons/home.png b/src/static/icons/home.png
new file mode 100644
index 0000000..59cc4f9
Binary files /dev/null and b/src/static/icons/home.png differ
diff --git a/src/static/icons/home_s.png b/src/static/icons/home_s.png
new file mode 100644
index 0000000..9f983db
Binary files /dev/null and b/src/static/icons/home_s.png differ
diff --git a/src/static/icons/left_tip.png b/src/static/icons/left_tip.png
new file mode 100644
index 0000000..d92bead
Binary files /dev/null and b/src/static/icons/left_tip.png differ
diff --git a/src/static/icons/member.png b/src/static/icons/member.png
new file mode 100644
index 0000000..5ced0d4
Binary files /dev/null and b/src/static/icons/member.png differ
diff --git a/src/static/icons/member_s.png b/src/static/icons/member_s.png
new file mode 100644
index 0000000..baae91e
Binary files /dev/null and b/src/static/icons/member_s.png differ
diff --git a/src/static/icons/search.png b/src/static/icons/search.png
new file mode 100644
index 0000000..3799968
Binary files /dev/null and b/src/static/icons/search.png differ
diff --git a/src/static/icons/search_s.png b/src/static/icons/search_s.png
new file mode 100644
index 0000000..d248644
Binary files /dev/null and b/src/static/icons/search_s.png differ
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..70b7acf
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  transpileDependencies:['@dcloudio/uni-ui']
+}