diff --git a/package-lock.json b/package-lock.json
index 5e82050..064be95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1151,6 +1151,93 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mapbox/node-pre-gyp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.5.tgz",
+      "integrity": "sha512-4srsKPXWlIxp5Vbqz5uLfBN+du2fJChBoYn/f2h991WLdk7jUvcSk/McVLSv/X+xQIPI8eGD5GjrnygdyHnhPA==",
+      "optional": true,
+      "requires": {
+        "detect-libc": "^1.0.3",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.1",
+        "nopt": "^5.0.0",
+        "npmlog": "^4.1.2",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.4",
+        "tar": "^6.1.0"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+          "optional": true
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "optional": true
+        },
+        "nopt": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+          "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+          "optional": true,
+          "requires": {
+            "abbrev": "1"
+          }
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "optional": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "optional": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "tar": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+          "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+          "optional": true,
+          "requires": {
+            "chownr": "^2.0.0",
+            "fs-minipass": "^2.0.0",
+            "minipass": "^3.0.0",
+            "minizlib": "^2.1.1",
+            "mkdirp": "^1.0.3",
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@@ -1749,6 +1836,63 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1757,6 +1901,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+          "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -2156,8 +2322,7 @@
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "dev": true
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
     "accepts": {
       "version": "1.3.7",
@@ -2193,6 +2358,15 @@
       "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
       "dev": true
     },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "optional": true,
+      "requires": {
+        "debug": "4"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1622991619843&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
@@ -2292,8 +2466,7 @@
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/aproba/download/aproba-1.2.0.tgz",
-      "integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo=",
-      "dev": true
+      "integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo="
     },
     "arch": {
       "version": "2.2.0",
@@ -2305,7 +2478,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-      "dev": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2579,8 +2751,7 @@
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714383053&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
-      "integrity": "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=",
-      "dev": true
+      "integrity": "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4="
     },
     "base": {
       "version": "0.11.2",
@@ -2787,7 +2958,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
       "integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3472,8 +3642,7 @@
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
     "collection-visit": {
       "version": "1.0.0",
@@ -3603,8 +3772,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",
@@ -3633,8 +3801,7 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
     "consolidate": {
       "version": "0.15.1",
@@ -3891,8 +4058,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -4239,7 +4405,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npm.taobao.org/debug/download/debug-4.3.1.tgz?cache=0&sync_timestamp=1607566512593&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.3.1.tgz",
       "integrity": "sha1-8NIpxQXgxtjEmsVT0bE9wYP2su4=",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -4503,8 +4668,7 @@
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
     "depd": {
       "version": "1.1.2",
@@ -4528,6 +4692,12 @@
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
+      "optional": true
+    },
     "detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/detect-node/download/detect-node-2.1.0.tgz",
@@ -5726,6 +5896,15 @@
         "universalify": "^0.1.0"
       }
     },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "optional": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npm.taobao.org/fs-write-stream-atomic/download/fs-write-stream-atomic-1.0.10.tgz",
@@ -5741,8 +5920,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": "2.3.2",
@@ -5779,7 +5957,6 @@
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "dev": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -5794,14 +5971,12 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5810,7 +5985,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5821,7 +5995,6 @@
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5903,7 +6076,6 @@
       "version": "7.1.7",
       "resolved": "https://registry.nlark.com/glob/download/glob-7.1.7.tgz?cache=0&sync_timestamp=1620337382269&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob%2Fdownload%2Fglob-7.1.7.tgz",
       "integrity": "sha1-Oxk+kjPwHULQs/eClLvutBj5SpA=",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -6046,8 +6218,7 @@
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
     "has-value": {
       "version": "1.0.0",
@@ -6445,6 +6616,16 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "optional": true,
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/human-signals/download/human-signals-1.1.1.tgz",
@@ -6613,7 +6794,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"
@@ -6622,8 +6802,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": "7.3.3",
@@ -7112,8 +7291,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isexe": {
       "version": "2.0.0",
@@ -7260,6 +7438,11 @@
         "verror": "1.10.0"
       }
     },
+    "keypress": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/keypress/-/keypress-0.1.0.tgz",
+      "integrity": "sha1-SjGI1CkbZrT2XtuZ+AaqmuKTWSo="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -7531,7 +7714,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz?cache=0&sync_timestamp=1587569115572&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmake-dir%2Fdownload%2Fmake-dir-3.1.0.tgz",
       "integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=",
-      "dev": true,
       "requires": {
         "semver": "^6.0.0"
       }
@@ -7768,7 +7950,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz?cache=0&sync_timestamp=1597044082534&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimatch%2Fdownload%2Fminimatch-3.0.4.tgz",
       "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -7783,7 +7964,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/minipass/download/minipass-3.1.3.tgz",
       "integrity": "sha1-fUL/HzljVILhX5zbUxhN7r1YFf0=",
-      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       },
@@ -7791,8 +7971,25 @@
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
-          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
-          "dev": true
+          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI="
+        }
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "optional": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "optional": true
         }
       }
     },
@@ -7814,6 +8011,11 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npm.taobao.org/mixin-deep/download/mixin-deep-1.3.2.tgz",
@@ -7861,8 +8063,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&sync_timestamp=1607433912031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
-      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
-      "dev": true
+      "integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -7961,6 +8162,18 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-addon-api": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
+      "integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
+      "optional": true
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "optional": true
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz",
@@ -8144,6 +8357,16 @@
         }
       }
     },
+    "nodejieba": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/nodejieba/-/nodejieba-2.5.2.tgz",
+      "integrity": "sha512-ByskJvaBrQ2eV+5M0OeD80S5NKoGaHc9zi3Z/PTKl/95eac2YF8RmWduq9AknLpkQLrLAIcqurrtC6BzjpKwwg==",
+      "optional": true,
+      "requires": {
+        "@mapbox/node-pre-gyp": "^1.0.4",
+        "node-addon-api": "^3.0.2"
+      }
+    },
     "nopt": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
@@ -8204,7 +8427,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "dev": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8230,8 +8452,7 @@
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
     "oauth-sign": {
       "version": "0.9.0",
@@ -8242,8 +8463,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8381,7 +8601,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"
       }
@@ -8664,8 +8883,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",
@@ -8754,6 +8972,26 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pinyin": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/pinyin/-/pinyin-2.10.2.tgz",
+      "integrity": "sha512-qAcp7+2vnjm6sAd0B9pp5JpyvHbYoQO1v9zCeJQMEgyw2VeRi02l0gR22ZBgfjjvZ1c2EGoVjJHJ1h0rwr34Ug==",
+      "requires": {
+        "commander": "~1.1.1",
+        "nodejieba": "^2.2.1",
+        "object-assign": "^4.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-1.1.1.tgz",
+          "integrity": "sha1-UNFlGGiuYOzP8KLZ80WVN2vGsEE=",
+          "requires": {
+            "keypress": "0.1.x"
+          }
+        }
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1602858985920&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
@@ -9479,8 +9717,7 @@
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I=",
-      "dev": true
+      "integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I="
     },
     "progress": {
       "version": "2.0.3",
@@ -9735,7 +9972,6 @@
       "version": "2.3.7",
       "resolved": "https://registry.npm.taobao.org/readable-stream/download/readable-stream-2.3.7.tgz",
       "integrity": "sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -10146,8 +10382,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1599054209520&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz",
-      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
-      "dev": true
+      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -10369,8 +10604,7 @@
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1616491453441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
-      "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
-      "dev": true
+      "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0="
     },
     "send": {
       "version": "0.17.1",
@@ -10504,8 +10738,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "set-value": {
       "version": "2.0.1",
@@ -10585,8 +10818,7 @@
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz",
-      "integrity": "sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw=",
-      "dev": true
+      "integrity": "sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw="
     },
     "simple-swizzle": {
       "version": "0.2.2",
@@ -11113,7 +11345,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
       "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -11913,8 +12144,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.1",
@@ -12054,87 +12284,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
-      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "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=1618995625950&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/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.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
@@ -12865,7 +13014,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-      "dev": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       },
@@ -12873,20 +13021,17 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
         },
         "string-width": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
           "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
           "requires": {
             "is-fullwidth-code-point": "^2.0.0",
             "strip-ansi": "^4.0.0"
@@ -12896,7 +13041,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -12958,8 +13102,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.nlark.com/wrappy/download/wrappy-1.0.2.tgz?cache=0&sync_timestamp=1619133505879&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrappy%2Fdownload%2Fwrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "write": {
       "version": "1.0.3",
diff --git a/package.json b/package.json
index af2db29..1fa58f8 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "lodash": "^4.17.21",
+    "mitt": "^2.1.0",
     "pinyin": "^2.9.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.8",
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index d7b2da8..bcec8ce 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="footer f16 ">
+  <div class="footer f16 "
+       @touchmove="move"
+       @touchend="end">
     <div class="button" @click="refresh()">
       <span v-if="!isRefresh" :class="{active:currentTab===1}">首页</span>
       <img v-else src="../assets/img/icon/refresh.png" alt="" class="refresh">
@@ -19,16 +21,24 @@
 </template>
 
 <script>
+import {inject} from "vue";
+
 export default {
   name: "Footer",
   props: ['initTab'],
   data() {
     return {
       isRefresh: false,
-      currentTab: this.initTab
+      currentTab: this.initTab,
+      mitt: inject('mitt'),
     }
   },
   methods: {
+    move(e) {
+      this.mitt.emit(this.$store.state.currentVideoId, e.touches[0].pageX)
+    },
+    end(e) {
+    },
     tab(index) {
       this.currentTab = index
       switch (index) {
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 39eddac..7ce40dd 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
-    <video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="index === 0" loop>
+    <video :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
-    <div class="float-container" @click="togglePlayVideo($event)">
+    <div class="float-container" @click.stop="togglePlayVideo">
       <transition name="pause">
         <img src="../assets/img/icon/play.svg" class="pause" v-show="!isPlaying"
-             @click.stop="togglePlayVideo($event)">
+        >
       </transition>
       <div class="float">
-        <div v-show="!isMove" class="normal">
+        <div :style="{opacity:isMove?0:1}" class="normal">
           <div class="toolbar mb10p">
             <img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p"
                  @click.stop="$emit('goUserInfo')">
@@ -50,8 +50,12 @@
              @touchmove="move"
              @touchend="end"
         >
-          <div class="line" ref="line"></div>
-          <div class="point" ref="point"></div>
+          <div class="time" v-if="isMove">
+            <span class="playDuration">{{ $duration(playDuration) }}</span>
+            <span class="duration"> / {{ $duration(video.duration) }}</span>
+          </div>
+          <div class="line" :style="durationStyle" ref="line"></div>
+          <div class="point" :style="durationStyle" ref="point"></div>
         </div>
       </div>
     </div>
@@ -60,6 +64,8 @@
 
 <script>
 
+import {inject} from "vue";
+
 export default {
   name: "Video",
   props: {
@@ -68,19 +74,46 @@ export default {
       default: () => {
         return {}
       }
+    },
+    disabled: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    }
+  },
+  computed: {
+    durationStyle() {
+      // return {left: this.$store.state.playDuration + 'px'}
+      return {left: this.playDuration + 'px'}
+    }
+  },
+  watch: {
+    disabled: {
+      immediate: true,
+      handler(v) {
+        // console.log('disabled', this.currentVideoId, v)
+        this.isPlaying = !v
+        if (!v) {
+          this.$store.commit('setCurrentVideoId', this.currentVideoId)
+        }
+      }
     }
   },
   data() {
     return {
+      playDuration: 30,
       index: 0,
       height: 0,
       width: 0,
-      isPlaying: true,
+      isPlaying: !this.disabled,
       isCommenting: false,
       isSharing: false,
       line: null,
       point: null,
-      isMove: false
+      isMove: false,
+      mitt: inject('mitt'),
+      currentVideoId: 'a' + Date.now()
     }
   },
   mounted() {
@@ -88,6 +121,10 @@ export default {
     this.width = document.body.clientWidth
     this.line = this.$refs.line
     this.point = this.$refs.point
+    this.mitt.on(this.currentVideoId, e => {
+      console.log('mitt-test', e)
+      this.playDuration = e
+    })
   },
   methods: {
     //划动到下一个视频
@@ -122,6 +159,7 @@ export default {
       } else {
         video = el.previousSibling
       }
+      video = this.$refs.video
       if (video.paused) {
         video.play()
       } else {
@@ -147,14 +185,15 @@ export default {
     },
     move(e) {
       this.isMove = true
-      console.log('move',this.isMove)
-      this.$setCss(this.line, 'width', e.touches[0].pageX + 'px')
+      this.playDuration = e.touches[0].pageX
+      // this.$store.commit('setPlayDuration',e.touches[0].pageX)
+      // this.$setCss(this.line, 'width', e.touches[0].pageX + 'px')
+      // this.$setCss(this.point, 'left', e.touches[0].pageX + 'px')
       this.stop(e)
     },
     end(e) {
       this.isMove = false
-      console.log('end',this.isMove)
-
+      this.stop(e)
     },
     stop(e) {
       e.stopImmediatePropagation()
@@ -206,6 +245,7 @@ export default {
       flex-direction: column;
 
       .normal {
+        transition: all .3s;
         position: relative;
 
         .toolbar {
@@ -282,11 +322,29 @@ export default {
 
       .process {
         //display: none;
+        //height: 20vh;
+        //width: 100vw;
         height: 3px;
         width: 100vw;
         background: black;
-        position: fixed;
-        bottom: 60px;
+        position: relative;
+        //bottom: 60px;
+
+
+        .time {
+          position: absolute;
+          z-index: 9;
+          font-size: 24px;
+          bottom: 50px;
+          left: 0;
+          right: 0;
+          color: white;
+          text-align: center;
+
+          .duration {
+            color: darkgray;
+          }
+        }
 
         &:before {
           z-index: 9;
@@ -304,7 +362,8 @@ export default {
           position: absolute;
           top: -3px;
           height: 3px;
-          width: 10vw;
+          width: 100vw;
+          transform: translate3d(-100%, 0, 0);
           background: white;
         }
 
diff --git a/src/main.js b/src/main.js
index 0fd3489..d939928 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@ import * as Vue from 'vue'
 import * as VueRouter from 'vue-router'
 import * as Vuex from 'vuex'
 import App from './App.vue'
-// import mitt from 'mitt'
+import mitt from 'mitt'
 
 import './assets/scss/index.scss'
 import Index from './pages/home/Index.vue'
@@ -39,12 +39,20 @@ const router = VueRouter.createRouter({
 
 const store = Vuex.createStore({
   state: {
-    pageAnim: 'none'
+    pageAnim: 'none',
+    playDuration: 60,
+    currentVideoId:null
   },
   mutations: {
     setPageAnim(state, states) {
       state.pageAnim = states
-    }
+    },
+    setPlayDuration(state, v) {
+      state.playDuration = v
+    },
+    setCurrentVideoId(state, v) {
+      state.currentVideoId = v
+    },
   }
 })
 
@@ -84,11 +92,33 @@ const myMixin = {
     },
     $console(v) {
       return console.log(JSON.stringify(v, null, 4))
+    },
+    $duration(v) {
+      let m = Math.floor(v / 60)
+      // let s = v % 60
+      let s = Math.round(v % 60)
+      let str = ''
+      if (m === 0) {
+        str = '00'
+      } else if (m > 0 && m < 10) {
+        str = '0' + m
+      } else {
+        str = m
+      }
+      str += ':'
+      if (s === 0) {
+        str += '00'
+      } else if (s > 0 && s < 10) {
+        str += '0' + s
+      } else {
+        str += s
+      }
+      return str
     }
   }
 }
 const app = Vue.createApp(App)
-// app.provide('mitt',mitt())
+app.provide('mitt',mitt())
 
 app.component('BaseHeader', BaseHeader)
 app.component('BaseSlideList', BaseSlideList)
diff --git a/src/pages/home/Index.vue b/src/pages/home/Index.vue
index 51320d9..5c2fb12 100644
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -145,6 +145,7 @@
           <SlideItem>
             <SlideList direction="column"
                        ref="slideList"
+                       v-model:active-index="videoActiveIndex"
                        :virtual="true"
                        :total="total"
                        @end="end"
@@ -152,6 +153,7 @@
                        @slide="slide">
               <SlideItem :style="itemTop" v-for="(item,index)  of videos">
                 <Video
+                    :disabled="videoActiveIndex !== index"
                     v-model:video="videos[index]"
                     @showComments="isCommenting = !isCommenting"
                     @showShare="isSharing = !isSharing"
@@ -238,7 +240,8 @@ export default {
           isLoved: true,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration:99
         },
         {
           videoUrl: mp1,
@@ -247,7 +250,8 @@ export default {
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration:99
         },
         {
           videoUrl: mp1,
@@ -256,7 +260,8 @@ export default {
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration:99
         },
         {
           videoUrl: mp1,
@@ -265,7 +270,8 @@ export default {
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration:99
         },
         {
           videoUrl: mp1,
@@ -274,7 +280,8 @@ export default {
           isLoved: false,
           loves: 1234,
           comments: 666,
-          shared: 999
+          shared: 999,
+          duration:99
         },
       ],
       addCount: 0,
@@ -283,6 +290,8 @@ export default {
       isSharing: false,
       baseActiveIndex: 0,
       activeIndex: 2,
+      videoActiveIndex: 0,
+
       tabWidth: 30,
       tabIndexRelationActiveIndexLefts: [],
       slideMoveXDistance: 0,
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
new file mode 100644
index 0000000..51320d9
--- /dev/null
+++ b/src/pages/home/Index2.vue
@@ -0,0 +1,465 @@
+<template>
+  <div id="home-index">
+    <div class="toolbar-ctn">
+      <div class="toolbar" :style="toolbarStyle">
+        <div class="left">直播</div>
+        <div class="tab-ctn">
+          <div class="tabs" ref="tabs">
+            <div class="tab"><span>双流</span></div>
+            <div class="tab"><span>关注</span></div>
+            <div class="tab"><span>推荐</span></div>
+          </div>
+          <div class="index" :style="tabIndexStyle"></div>
+        </div>
+        <div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
+      </div>
+      <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
+      <div class="loading" :style="loadingStyle">AA</div>
+    </div>
+    <SlideList v-model:active-index="baseActiveIndex">
+      <SlideItem>
+        <SlideList v-model:active-index="activeIndex"
+        >
+          <SlideItem style="overflow:auto;">
+            <div>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+              <p>同城页</p>
+            </div>
+          </SlideItem>
+          <SlideItem>
+            <SlideList direction="column"
+                       @end="end"
+                       @first="first"
+            >
+              <SlideItem style="background: tan">
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+                <p>111111111111</p>
+              </SlideItem>
+              <SlideItem style="background: red;">
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+                <p>222222222222</p>
+              </SlideItem>
+              <SlideItem style="background: yellow">
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+                <p>3333333333333</p>
+              </SlideItem>
+            </SlideList>
+          </SlideItem>
+          <SlideItem>
+            <SlideList direction="column"
+                       ref="slideList"
+                       :virtual="true"
+                       :total="total"
+                       @end="end"
+                       @first="first"
+                       @slide="slide">
+              <SlideItem :style="itemTop" v-for="(item,index)  of videos">
+                <Video
+                    v-model:video="videos[index]"
+                    @showComments="isCommenting = !isCommenting"
+                    @showShare="isSharing = !isSharing"
+                    @goUserInfo="baseActiveIndex = 1"
+                ></Video>
+              </SlideItem>
+            </SlideList>
+          </SlideItem>
+        </SlideList>
+        <Footer v-bind:init-tab="1"/>
+      </SlideItem>
+      <SlideItem style="font-size: 40px;overflow:auto;">
+        <div>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+          <p>详情页</p>
+        </div>
+      </SlideItem>
+    </SlideList>
+    <Comment v-model:is-commenting="isCommenting"/>
+    <Share v-model:is-sharing="isSharing" ref="share"/>
+  </div>
+</template>
+
+<script>
+import Comment from '../../components/Comment.vue'
+import Other from '../../components/Other.vue'
+import Share from '../../components/Share.vue'
+import Footer from "../../components/Footer.vue"
+import mp1 from '../../assets/video/吴三二的光年之外.mp4'
+import src1Bg from '../../assets/img/poster/src1-bg.png'
+import SlideItem from './SlideItem.vue'
+import SlideList from './SlideList.vue'
+import Video from "../../components/Video.vue";
+
+export default {
+  name: "HomeIndex",
+  components: {Footer, Comment, Share, Other, SlideList, SlideItem, Video},
+  data() {
+    return {
+      list: [1, 2, 3, 4, 5],
+      videos: [
+        {
+          videoUrl: mp1,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: true,
+          loves: 1234,
+          comments: 666,
+          shared: 999
+        },
+        {
+          videoUrl: mp1,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999
+        },
+        {
+          videoUrl: mp1,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999
+        },
+        {
+          videoUrl: mp1,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999
+        },
+        {
+          videoUrl: mp1,
+          // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
+          videoPoster: src1Bg,
+          isLoved: false,
+          loves: 1234,
+          comments: 666,
+          shared: 999
+        },
+      ],
+      addCount: 0,
+      total: 10,
+      isCommenting: false,
+      isSharing: false,
+      baseActiveIndex: 0,
+      activeIndex: 2,
+      tabWidth: 30,
+      tabIndexRelationActiveIndexLefts: [],
+      slideMoveXDistance: 0,
+      slideMoveYDistance: 0,
+      height: 0,
+      width: 0,
+      toolbarStyleTransitionDuration: 0,
+      loading: false
+    }
+  },
+  computed: {
+    itemTop() {
+      return {top: this.addCount * 812 + 'px'}
+    },
+    tabIndexStyle() {
+      return {
+        width: `${this.tabWidth * 0.7}px`,
+        //如果用slide emit的moveX会很卡很卡
+        transform: `translate3d(${this.tabIndexRelationActiveIndexLefts[this.activeIndex]}px, 0, 0)`,
+        'transition-duration': '300ms',
+      }
+    },
+    toolbarStyle() {
+      return {
+        opacity: 1 - this.slideMoveYDistance / 20,
+        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
+        transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
+      }
+    },
+    noticeStyle() {
+      return {
+        opacity: this.slideMoveYDistance / 60,
+        'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
+        transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
+      }
+    },
+    loadingStyle() {
+      if (this.loading) {
+        return {
+          opacity: 1,
+          'transition-duration': '300ms',
+        }
+      }
+      if (this.slideMoveYDistance !== 0) {
+        return {
+          opacity: this.slideMoveYDistance / 60,
+          'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
+          transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
+        }
+      }
+    }
+  },
+  mounted() {
+    let tabs = this.$refs.tabs
+    // let tabWidth = this.$getCss(tabs, 'width')
+    for (let i = 0; i < tabs.children.length; i++) {
+      let item = tabs.children[i]
+      this.tabWidth = this.$getCss(item, 'width')
+      this.tabIndexRelationActiveIndexLefts.push(
+          item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + this.tabWidth * 0.15)
+    }
+    this.height = document.body.clientHeight
+    this.width = document.body.clientWidth
+  },
+  methods: {
+    end() {
+      if (this.slideMoveYDistance > 60) {
+        this.getData()
+      }
+      this.slideMoveYDistance = 0;
+      this.toolbarStyleTransitionDuration = 300
+    },
+    first(e) {
+      if (this.loading) return
+      this.slideMoveYDistance = e
+      this.toolbarStyleTransitionDuration = 0
+    },
+    getData() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 1500)
+    },
+    slide(e) {
+      let {currentSlideItemIndex, isDrawDown} = e
+      if (isDrawDown) {
+        if (this.list.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
+          this.list.push(currentSlideItemIndex + 3)
+          setTimeout(() => {
+            this.addCount += 1
+            this.list.shift()
+          }, 300)
+          this.$refs.slideList.checkChildren()
+        }
+      } else {
+        if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
+          this.list.pop()
+          setTimeout(() => {
+            this.addCount -= 1
+            this.list.unshift(currentSlideItemIndex - 1)
+          }, 300)
+          this.$refs.slideList.checkChildren()
+        }
+      }
+    },
+  },
+  created() {
+
+  },
+}
+</script>
+<style scoped lang="scss">
+#home-index {
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .toolbar-ctn {
+    position: fixed;
+    font-size: 1.6rem;
+    top: 0;
+    left: 0;
+    height: 60px;
+    z-index: 2;
+    width: 100%;
+    color: white;
+
+    .notice {
+      opacity: 0;
+      top: 0;
+      position: absolute;
+      width: 100vw;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loading {
+      opacity: 0;
+      top: 20px;
+      right: 15px;
+      position: absolute;
+
+    }
+
+    .toolbar {
+      position: relative;
+      color: white;
+      //background: #fff;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      //display: none;
+
+      .tab-ctn {
+        width: 40%;
+        position: relative;
+
+        .tabs {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .index {
+          position: absolute;
+          bottom: -8px;
+          height: 3px;
+          background: #fff;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file