0618

591b52af · 张超军 · f495a5d1 · 591b52af · 591b52af · 591b52af
Commit 591b52af authored Jun 18, 2021 by 张超军
60 changed files
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
  env: {
    node: true
  },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: ["plugin:vue/essential", "eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint"
  },

--- a/package-lock.json
+++ b/package-lock.json
@@ -1790,12 +1790,43 @@
        "webpack-merge": "^4.2.2"
      },
      "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"
+          }
+        },
        "camelcase": {
          "version": "5.3.1",
          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
          "dev": true
        },
+        "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"
+          }
+        },
        "css-loader": {
          "version": "3.6.0",
          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -1887,6 +1918,32 @@
          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
          "dev": true
+        },
+        "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": {
+            "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"
+              }
+            }
+          }
        }
      }
    },
@@ -4219,8 +4276,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",
@@ -6294,6 +6350,43 @@
      "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs=",
      "dev": true
    },
+    "gulp-insert": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npm.taobao.org/gulp-insert/download/gulp-insert-0.5.0.tgz",
+      "integrity": "sha1-MjE/E+SiPPWsylzl8MCAkjx3hgI=",
+      "requires": {
+        "readable-stream": "^1.0.26-4",
+        "streamqueue": "0.0.6"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npm.taobao.org/readable-stream/download/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
+    "gulp-rename": {
+      "version": "1.4.0",
+      "resolved": "https://registry.nlark.com/gulp-rename/download/gulp-rename-1.4.0.tgz",
+      "integrity": "sha1-3hxxjnxAla6GH3KW708ySGSCQL0="
+    },
    "gzip-size": {
      "version": "5.1.1",
      "resolved": "https://registry.npm.taobao.org/gzip-size/download/gzip-size-5.1.1.tgz",
@@ -7676,6 +7769,15 @@
        "yallist": "^2.1.2"
      }
    },
+    "lrz": {
+      "version": "4.9.41",
+      "resolved": "https://registry.npm.taobao.org/lrz/download/lrz-4.9.41.tgz",
+      "integrity": "sha1-PVGxPY3eY3db2Lo6+A2Zm2A+Gew=",
+      "requires": {
+        "gulp-insert": "^0.5.0",
+        "gulp-rename": "^1.2.2"
+      }
+    },
    "make-dir": {
      "version": "2.1.0",
      "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz",
@@ -8960,7 +9062,8 @@
      "version": "2.2.2",
      "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz",
      "integrity": "sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "pify": {
      "version": "4.0.1",
@@ -11212,6 +11315,37 @@
      "integrity": "sha1-1wiCgVWasneEJCebCHfaPDktWj0=",
      "dev": true
    },
+    "streamqueue": {
+      "version": "0.0.6",
+      "resolved": "https://registry.nlark.com/streamqueue/download/streamqueue-0.0.6.tgz",
+      "integrity": "sha1-ZvX17JTpuK8knkrsLdH3Qb/pTeM=",
+      "requires": {
+        "readable-stream": "^1.0.26-2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npm.taobao.org/readable-stream/download/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
    "strict-uri-encode": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-1.1.0.tgz",
@@ -12289,63 +12423,6 @@
        }
      }
    },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.1.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-      "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.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.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "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"
-          }
-        },
-        "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"
-          }
-        }
-      }
-    },
    "vue-router": {
      "version": "3.4.6",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.6.tgz?cache=0&sync_timestamp=1602077426782&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.6.tgz",

--- a/src/assets/icon_font/demo.css
+++ b/src/assets/icon_font/demo.css
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
--- a/src/assets/icon_font/demo_index.html
+++ b/src/assets/icon_font/demo_index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2614723" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66d;</span>
+                <div class="name">下拉</div>
+                <div class="code-name">&amp;#xe66d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66e;</span>
+                <div class="name">播放</div>
+                <div class="code-name">&amp;#xe66e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">关闭</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe670;</span>
+                <div class="name">选中</div>
+                <div class="code-name">&amp;#xe670;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe671;</span>
+                <div class="name">选择器</div>
+                <div class="code-name">&amp;#xe671;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe672;</span>
+                <div class="name">文件夹</div>
+                <div class="code-name">&amp;#xe672;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe673;</span>
+                <div class="name">预览</div>
+                <div class="code-name">&amp;#xe673;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe674;</span>
+                <div class="name">暂停</div>
+                <div class="code-name">&amp;#xe674;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe675;</span>
+                <div class="name">指纹</div>
+                <div class="code-name">&amp;#xe675;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe676;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe676;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe677;</span>
+                <div class="name">指纹采集标记</div>
+                <div class="code-name">&amp;#xe677;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1623997578522') format('woff2'),
+       url('iconfont.woff?t=1623997578522') format('woff'),
+       url('iconfont.ttf?t=1623997578522') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiala"></span>
+            <div class="name">
+              下拉
+            </div>
+            <div class="code-name">.icon-xiala
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bofang"></span>
+            <div class="name">
+              播放
+            </div>
+            <div class="code-name">.icon-bofang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xuanzhong"></span>
+            <div class="name">
+              选中
+            </div>
+            <div class="code-name">.icon-xuanzhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xuanzeqi"></span>
+            <div class="name">
+              选择器
+            </div>
+            <div class="code-name">.icon-xuanzeqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wenjianjia"></span>
+            <div class="name">
+              文件夹
+            </div>
+            <div class="code-name">.icon-wenjianjia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yulan"></span>
+            <div class="name">
+              预览
+            </div>
+            <div class="code-name">.icon-yulan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zanting"></span>
+            <div class="name">
+              暂停
+            </div>
+            <div class="code-name">.icon-zanting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhiwen"></span>
+            <div class="name">
+              指纹
+            </div>
+            <div class="code-name">.icon-zhiwen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhiwencaijibiaoji"></span>
+            <div class="name">
+              指纹采集标记
+            </div>
+            <div class="code-name">.icon-zhiwencaijibiaoji
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiala"></use>
+                </svg>
+                <div class="name">下拉</div>
+                <div class="code-name">#icon-xiala</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bofang"></use>
+                </svg>
+                <div class="name">播放</div>
+                <div class="code-name">#icon-bofang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanzhong"></use>
+                </svg>
+                <div class="name">选中</div>
+                <div class="code-name">#icon-xuanzhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanzeqi"></use>
+                </svg>
+                <div class="name">选择器</div>
+                <div class="code-name">#icon-xuanzeqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenjianjia"></use>
+                </svg>
+                <div class="name">文件夹</div>
+                <div class="code-name">#icon-wenjianjia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yulan"></use>
+                </svg>
+                <div class="name">预览</div>
+                <div class="code-name">#icon-yulan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zanting"></use>
+                </svg>
+                <div class="name">暂停</div>
+                <div class="code-name">#icon-zanting</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhiwen"></use>
+                </svg>
+                <div class="name">指纹</div>
+                <div class="code-name">#icon-zhiwen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhiwencaijibiaoji"></use>
+                </svg>
+                <div class="name">指纹采集标记</div>
+                <div class="code-name">#icon-zhiwencaijibiaoji</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
--- a/src/assets/icon_font/iconfont.css
+++ b/src/assets/icon_font/iconfont.css
+@font-face {
+  font-family: "iconfont"; /* Project id 2614723 */
+  src: url('iconfont.woff2?t=1623997578522') format('woff2'),
+       url('iconfont.woff?t=1623997578522') format('woff'),
+       url('iconfont.ttf?t=1623997578522') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xiala:before {
+  content: "\e66d";
+}
+
+.icon-bofang:before {
+  content: "\e66e";
+}
+
+.icon-guanbi:before {
+  content: "\e66f";
+}
+
+.icon-xuanzhong:before {
+  content: "\e670";
+}
+
+.icon-xuanzeqi:before {
+  content: "\e671";
+}
+
+.icon-wenjianjia:before {
+  content: "\e672";
+}
+
+.icon-yulan:before {
+  content: "\e673";
+}
+
+.icon-zanting:before {
+  content: "\e674";
+}
+
+.icon-zhiwen:before {
+  content: "\e675";
+}
+
+.icon-shezhi:before {
+  content: "\e676";
+}
+
+.icon-zhiwencaijibiaoji:before {
+  content: "\e677";
+}
+
--- a/src/assets/icon_font/iconfont.js
+++ b/src/assets/icon_font/iconfont.js
+!function(a){var t,e,l,i,o,n,c='<svg><symbol id="icon-xiala" viewBox="0 0 1024 1024"><path d="M928.426667 396.458667l-384 358.4a51.2 51.2 0 0 1-68.266667 0L96.597333 402.602667A35.498667 35.498667 0 0 1 121.514667 341.333333h785.066666a32.085333 32.085333 0 0 1 22.698667 55.466667z" fill="#232323" ></path></symbol><symbol id="icon-bofang" viewBox="0 0 1024 1024"><path d="M512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667A426.666667 426.666667 0 0 0 512 85.333333z m203.093333 434.688a24.576 24.576 0 0 1-8.362666 8.362667l-276.309334 167.765333A24.917333 24.917333 0 0 1 392.533333 674.816V339.285333a24.917333 24.917333 0 0 1 37.888-21.333333l276.309334 167.765333a24.917333 24.917333 0 0 1 8.362666 34.304z" fill="#232323" ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M564.906667 512l277.845333-278.016a36.181333 36.181333 0 0 0 0-51.2l-1.536-1.536a36.181333 36.181333 0 0 0-51.2 0L512 459.605333 234.154667 181.248a36.181333 36.181333 0 0 0-51.2 0l-1.536 1.536a35.84 35.84 0 0 0 0 51.2L459.434667 512 181.418667 790.016a36.522667 36.522667 0 0 0 0 51.2l1.536 1.536a36.181333 36.181333 0 0 0 51.2 0L512 564.736l278.016 278.016a36.181333 36.181333 0 0 0 51.2 0l1.536-1.536a36.181333 36.181333 0 0 0 0-51.2z" fill="#232323" ></path></symbol><symbol id="icon-xuanzhong" viewBox="0 0 1024 1024"><path d="M792.234667 128H231.765333a103.936 103.936 0 0 0-103.765333 103.765333v560.469334a103.936 103.936 0 0 0 103.765333 103.765333h560.469334a103.936 103.936 0 0 0 103.765333-103.765333V231.765333a103.936 103.936 0 0 0-103.765333-103.765333z m-329.216 563.2L266.752 494.933333l65.365333-65.365333 130.730667 130.730667 229.034667-228.181334 65.365333 65.365334z" fill="#232323" ></path></symbol><symbol id="icon-xuanzeqi" viewBox="0 0 1024 1024"><path d="M739.498667 578.218667H284.672c-22.357333 0-35.84 13.653333-24.576 24.405333 17.066667 17.066667 217.258667 215.381333 227.328 224.938667a40.448 40.448 0 0 0 50.176 0C546.133333 820.224 750.933333 614.4 763.904 602.624s-3.413333-23.210667-24.746667-24.405333z m-454.826667-131.754667h454.826667c21.504 0 35.84-12.8 24.576-24.405333S546.133333 204.8 536.746667 195.925333a42.496 42.496 0 0 0-50.176 0c-8.704 10.581333-209.578667 209.066667-226.304 226.133334-11.264 10.581333 2.048 24.405333 24.405333 24.405333z" fill="#232323" ></path></symbol><symbol id="icon-wenjianjia" viewBox="0 0 1024 1024"><path d="M819.2 804.181333A48.981333 48.981333 0 0 1 769.706667 853.333333H156.16l85.333333-405.845333a48.981333 48.981333 0 0 1 48.981334-49.152h565.077333A48.981333 48.981333 0 0 1 904.533333 447.488l-85.333333 356.522667M254.464 361.642667h551.936v-48.298667a48.981333 48.981333 0 0 0-48.981333-49.152H463.018667v-44.373333A49.152 49.152 0 0 0 413.866667 170.666667H168.618667A49.152 49.152 0 0 0 119.466667 219.818667v584.362666l85.333333-392.533333a48.981333 48.981333 0 0 1 48.981333-49.152" fill="#232323" ></path></symbol><symbol id="icon-yulan" viewBox="0 0 1024 1024"><path d="M512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667A426.666667 426.666667 0 0 0 512 85.333333z m0 800.085334A373.418667 373.418667 0 1 1 885.418667 512 373.930667 373.930667 0 0 1 512 885.418667z" fill="#232323" ></path><path d="M702.805333 490.837333L409.6 320.512A24.576 24.576 0 0 0 373.418667 341.333333v341.333334A24.576 24.576 0 0 0 409.6 703.658667l292.693333-170.666667a23.722667 23.722667 0 0 0 8.704-8.704 24.405333 24.405333 0 0 0-8.192-33.450667z" fill="#232323" ></path></symbol><symbol id="icon-zanting" viewBox="0 0 1024 1024"><path d="M512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667A426.666667 426.666667 0 0 0 512 85.333333z m0 800.085334A373.418667 373.418667 0 1 1 885.418667 512 373.930667 373.930667 0 0 1 512 885.418667z" fill="#232323" ></path><path d="M358.4 358.4m20.48 0l266.24 0q20.48 0 20.48 20.48l0 266.24q0 20.48-20.48 20.48l-266.24 0q-20.48 0-20.48-20.48l0-266.24q0-20.48 20.48-20.48Z" fill="#232323" ></path></symbol><symbol id="icon-zhiwen" viewBox="0 0 1024 1024"><path d="M631.466667 938.666667a356.522667 356.522667 0 0 1-159.061334-91.136 318.122667 318.122667 0 0 1-91.989333-223.744 135.168 135.168 0 0 1 137.557333-132.437334 135.338667 135.338667 0 0 1 138.069334 132.266667 75.434667 75.434667 0 0 0 150.698666 0 283.989333 283.989333 0 0 0-293.205333-273.066667A290.133333 290.133333 0 0 0 245.589333 512a244.565333 244.565333 0 0 0-25.088 111.786667 344.917333 344.917333 0 0 0 29.354667 136.533333 30.208 30.208 0 0 1-13.994667 40.618667l-2.901333 1.194666a30.890667 30.890667 0 0 1-40.789333-14.165333L191.146667 785.066667a446.805333 446.805333 0 0 1-29.354667-165.717334 297.984 297.984 0 0 1 29.354667-136.533333 363.008 363.008 0 0 1 322.389333-194.56c192.512 0 355.84 149.162667 351.573333 335.530667a138.24 138.24 0 0 1-276.309333 0 73.898667 73.898667 0 0 0-75.434667-70.314667 71.168 71.168 0 0 0-75.093333 67.072 20.650667 20.650667 0 0 0 0 3.242667A246.272 246.272 0 0 0 513.536 802.133333a302.08 302.08 0 0 0 133.973333 74.581334 29.525333 29.525333 0 0 1 21.162667 36.181333 2.389333 2.389333 0 0 1 0 1.024c0 8.362667-12.458667 17.066667-20.821333 20.821333V938.666667z m-209.92-12.458667a30.72 30.72 0 0 1-25.088-8.192 603.477333 603.477333 0 0 1-83.968-111.957333 396.458667 396.458667 0 0 1-46.08-186.368 240.981333 240.981333 0 0 1 246.954666-232.106667 244.906667 244.906667 0 0 1 251.050667 232.106667 30.378667 30.378667 0 0 1-27.818667 33.109333h-5.632a32.768 32.768 0 0 1-34.133333-32.085333v-1.024a177.493333 177.493333 0 0 0-184.149333-170.666667 177.322667 177.322667 0 0 0-184.32 170.666667 298.666667 298.666667 0 0 0 37.717333 153.6 392.533333 392.533333 0 0 0 75.434667 99.498666 32.085333 32.085333 0 0 1 0 45.568c-4.096 4.096-8.362667 8.192-12.458667 8.192z m163.328-111.786667a245.589333 245.589333 0 0 1-108.885334-190.634666 30.549333 30.549333 0 0 1 27.818667-33.109334h5.632a32.768 32.768 0 0 1 34.133333 32.256 170.666667 170.666667 0 0 0 75.434667 136.533334 159.744 159.744 0 0 0 100.522667 29.013333 172.202667 172.202667 0 0 0 41.130666-3.413333 31.744 31.744 0 1 1 12.629334 62.122666l-62.805334 4.096a212.48 212.48 0 0 1-125.781333-37.034666z m-443.733334-393.557333c-8.362667-4.096-12.629333-8.192-12.629333-17.066667a30.208 30.208 0 0 1 4.266667-20.650666 416.085333 416.085333 0 0 1 159.061333-136.533334 483.157333 483.157333 0 0 1 439.466667 0 454.656 454.656 0 0 1 159.061333 136.533334 27.989333 27.989333 0 0 1-5.632 39.594666l-2.730667 1.877334a30.037333 30.037333 0 0 1-37.546666-12.458667 426.666667 426.666667 0 0 0-138.069334-119.466667 448 448 0 0 0-385.194666 0 439.125333 439.125333 0 0 0-137.898667 124.245334 30.208 30.208 0 0 1-25.088 12.458666 21.504 21.504 0 0 1-17.237333-8.533333z m610.986667-207.018667a15.701333 15.701333 0 0 1-12.629333-4.266666 449.024 449.024 0 0 0-225.962667-58.026667A479.744 479.744 0 0 0 287.402667 204.8a29.184 29.184 0 0 1-39.936-9.045333 21.845333 21.845333 0 0 1-1.877334-3.413334 32.085333 32.085333 0 0 1 8.362667-41.472A514.901333 514.901333 0 0 1 513.536 85.333333a500.053333 500.053333 0 0 1 259.413333 70.485334 28.330667 28.330667 0 0 1 14.506667 37.888 36.181333 36.181333 0 0 1-1.877333 3.584 27.989333 27.989333 0 0 1-20.992 17.066666z" fill="#232323" ></path></symbol><symbol id="icon-shezhi" viewBox="0 0 1024 1024"><path d="M509.952 356.522667a156.501333 156.501333 0 1 0 154.453333 157.866666v-1.365333a155.818667 155.818667 0 0 0-154.453333-156.501333zM386.389333 102.4a63.658667 63.658667 0 0 1 42.496 15.701333A146.602667 146.602667 0 0 0 512 166.912 155.989333 155.989333 0 0 0 594.944 119.466667a57.002667 57.002667 0 0 1 42.496-17.066667 47.104 47.104 0 0 1 23.210667 3.925333h1.877333L768 167.082667h1.877333a58.709333 58.709333 0 0 1 19.285334 68.266666 120.832 120.832 0 0 0-9.728 40.96 104.618667 104.618667 0 0 0 103.594666 105.301334H887.466667c19.285333 0 34.986667 17.066667 40.789333 44.885333A383.146667 383.146667 0 0 1 938.666667 512a502.954667 502.954667 0 0 1-9.728 85.333333c-3.754667 27.306667-21.162667 44.885333-40.789334 44.885334h-3.754666a104.448 104.448 0 0 0-104.277334 104.789333 120.832 120.832 0 0 0 9.728 40.96 56.32 56.32 0 0 1-19.285333 66.389333H768l-106.154667 61.269334h-1.877333a74.752 74.752 0 0 1-21.162667 3.925333 59.392 59.392 0 0 1-44.373333-19.626667 153.6 153.6 0 0 0-85.333333-51.2c-29.184 0-68.266667 34.986667-83.114667 51.2A55.296 55.296 0 0 1 384.682667 921.6a47.786667 47.786667 0 0 1-23.381334-3.925333h-1.877333L256 858.965333h-1.877333a58.538667 58.538667 0 0 1-19.456-68.266666 116.736 116.736 0 0 0 9.557333-40.96 104.277333 104.277333 0 0 0-104.277333-105.301334h-4.608c-19.285333 0-34.133333-17.066667-40.789334-44.885333A389.290667 389.290667 0 0 1 85.333333 513.024a426.666667 426.666667 0 0 1 9.728-85.333333c3.754667-27.306667 21.162667-44.885333 40.789334-44.885334h1.877333a104.618667 104.618667 0 0 0 104.277333-104.789333 120.832 120.832 0 0 0-9.728-40.96 56.32 56.32 0 0 1 19.285334-66.56h1.877333l110.08-63.658667h1.706667A69.973333 69.973333 0 0 1 386.389333 102.4z" fill="#232323" ></path></symbol><symbol id="icon-zhiwencaijibiaoji" viewBox="0 0 1024 1024"><path d="M494.933333 844.629333a17.066667 17.066667 0 0 0-21.674666 8.533334v1.706666l-23.04 56.32a16.042667 16.042667 0 0 0 7.509333 21.504 14.506667 14.506667 0 0 0 5.290667 1.536 17.066667 17.066667 0 0 0 18.773333-11.093333c8.533333-17.92 16.213333-36.693333 23.04-55.466667a17.066667 17.066667 0 0 0-9.898667-23.04z m388.096-210.773333a17.066667 17.066667 0 0 0-17.066666-17.066667h-1.536a17.066667 17.066667 0 0 0-15.36 17.066667c0.853333 28.16 0 55.466667-1.706667 83.626667 0 12.8 5.973333 19.626667 16.213333 20.48a17.066667 17.066667 0 0 0 18.090667-17.066667v-2.56c0-18.773333 2.56-38.4 1.706667-56.32a174.592 174.592 0 0 0 0-29.866667z m-573.44 107.52a17.066667 17.066667 0 0 0-21.333333 11.946667c-1.706667 4.266667-2.56 9.386667-4.266667 13.653333A539.477333 539.477333 0 0 1 256 832.682667a17.066667 17.066667 0 0 0 5.290667 23.04 18.090667 18.090667 0 0 0 9.386666 2.56 17.066667 17.066667 0 0 0 16.213334-11.093334 443.733333 443.733333 0 0 0 33.28-85.333333 17.066667 17.066667 0 0 0-10.24-20.992h-0.853334z m283.306667-39.253333a17.066667 17.066667 0 0 0-18.773333 15.189333 895.317333 895.317333 0 0 1-26.453334 125.44c-6.826667 23.893333-15.36 47.786667-24.064 71.68a17.066667 17.066667 0 0 0 27.477334 19.626667 31.061333 31.061333 0 0 0 6.826666-12.8 694.954667 694.954667 0 0 0 26.624-81.92 900.949333 900.949333 0 0 0 23.893334-118.613334 17.066667 17.066667 0 0 0-15.530667-18.602666zM134.997333 403.456a18.090667 18.090667 0 0 0-10.410666-23.381333h-1.536A17.92 17.92 0 0 0 102.4 392.533333a440.490667 440.490667 0 0 0-17.066667 121.173334 378.88 378.88 0 0 0 1.706667 41.813333 421.888 421.888 0 0 0 19.797333 90.453333 14.506667 14.506667 0 0 0 14.506667 11.093334c14.506667 0.853333 21.333333-10.24 17.066667-25.6a385.706667 385.706667 0 0 1-3.413334-228.693334z m408.234667 240.64a417.962667 417.962667 0 0 0-2.56-54.613333 635.733333 635.733333 0 0 0-11.946667-80.213334 17.066667 17.066667 0 0 0-19.626666-13.653333 17.066667 17.066667 0 0 0-14.165334 19.456v1.877333a617.130667 617.130667 0 0 1 12.8 99.84 580.266667 580.266667 0 0 1-16.213333 172.373334 17.066667 17.066667 0 0 0 10.410667 22.869333 18.432 18.432 0 0 0 22.016-13.653333v-1.706667a605.354667 605.354667 0 0 0 17.066666-152.746667z m179.712-202.24a17.066667 17.066667 0 0 0-21.333333-11.093333 17.066667 17.066667 0 0 0-11.605334 19.968v1.365333a810.666667 810.666667 0 0 1 22.186667 157.866667 845.824 845.824 0 0 1-27.306667 258.56c-2.56 11.093333 1.706667 21.333333 11.093334 23.04a17.066667 17.066667 0 0 0 21.504-10.922667 26.453333 26.453333 0 0 0 0-3.584 870.4 870.4 0 0 0 29.184-226.986667 856.405333 856.405333 0 0 0-11.264-147.626666 324.266667 324.266667 0 0 0-13.653334-60.586667z m-563.2-102.4a367.274667 367.274667 0 0 1 63.317333-91.306667 388.266667 388.266667 0 0 1 281.6-127.146666c12.8 0 20.650667-6.826667 20.650667-17.066667s-7.68-17.066667-21.333333-17.066667A426.666667 426.666667 0 0 0 129.877333 320.853333a31.232 31.232 0 0 0-3.413333 11.946667 14.848 14.848 0 0 0 8.533333 15.36 17.066667 17.066667 0 0 0 23.381334-6.826667 15.189333 15.189333 0 0 0 1.365333-2.901333z m236.202667 204.8a125.44 125.44 0 0 1 26.453333-110.08A14.848 14.848 0 0 0 426.666667 426.666667a15.530667 15.530667 0 0 0-9.386667-18.773334 17.066667 17.066667 0 0 0-21.333333 5.12 149.162667 149.162667 0 0 0-34.133334 124.586667 807.424 807.424 0 0 1 10.24 107.349333 470.869333 470.869333 0 0 1-10.24 104.96 480.256 480.256 0 0 1-42.837333 116.906667 22.357333 22.357333 0 0 0-4.266667 14.506667 17.066667 17.066667 0 0 0 12.8 14.506666 17.066667 17.066667 0 0 0 20.48-10.24 490.325333 490.325333 0 0 0 53.077334-162.986666 593.92 593.92 0 0 0-3.413334-178.176z m-199.509334 47.786667a401.749333 401.749333 0 0 1-5.973333-115.2 323.072 323.072 0 0 1 136.533333-229.546667 17.066667 17.066667 0 0 0 8.533334-21.333333c-4.266667-11.946667-16.213333-14.506667-28.16-6.826667a332.629333 332.629333 0 0 0-72.021334 66.389333 353.28 353.28 0 0 0-80.725333 216.917334 1200.128 1200.128 0 0 0 12.117333 123.733333 224.426667 224.426667 0 0 1-5.973333 81.92c-2.56 8.533333-5.290667 17.066667-7.850667 24.746667a17.066667 17.066667 0 0 0 15.36 18.773333H170.666667c10.410667 0 14.677333-5.973333 18.090666-14.506667a291.84 291.84 0 0 0 8.533334-145.92z m736.938667-150.357334q-51.2-256-300.373333-337.749333a245.418667 245.418667 0 0 0-56.32-11.946667 14.848 14.848 0 0 0-17.066667 11.605334v2.048a15.701333 15.701333 0 0 0 11.264 19.114666 13.653333 13.653333 0 0 0 2.56 0c3.413333 0 6.826667 0 9.386667 1.706667A386.218667 386.218667 0 0 1 802.133333 249.173333a377.173333 377.173333 0 0 1 76.288 123.733334A409.6 409.6 0 0 1 904.533333 500.053333a17.066667 17.066667 0 0 0 16.213334 17.066667 17.066667 17.066667 0 0 0 5.973333 0c8.533333-2.56 12.8-9.386667 11.946667-23.04a219.136 219.136 0 0 0-5.12-52.906667z m-225.792-143.872a249.514667 249.514667 0 0 0-55.808-39.253333 17.066667 17.066667 0 0 0-22.698667 5.12v0.853333a17.066667 17.066667 0 0 0 5.290667 23.04h1.536a22.698667 22.698667 0 0 0 5.973333 3.413334 252.245333 252.245333 0 0 1 116.394667 148.309333 786.773333 786.773333 0 0 1 23.04 190.293333A892.416 892.416 0 0 1 768 811.349333c-1.706667 12.8 3.413333 20.48 13.824 22.186667s18.773333-4.266667 20.48-17.066667a881.664 881.664 0 0 0 12.8-153.6 1194.666667 1194.666667 0 0 0-14.506667-189.44 293.034667 293.034667 0 0 0-93.354666-176.469333z m-142.165333 69.802667a153.6 153.6 0 0 0-103.424 0 17.066667 17.066667 0 0 0-14.165334 19.968 17.066667 17.066667 0 0 0 25.941334 12.458667 119.466667 119.466667 0 0 1 151.04 73.728 112.469333 112.469333 0 0 1 4.778666 18.432 877.226667 877.226667 0 0 1 12.8 94.72 755.370667 755.370667 0 0 1 0 138.922666 807.253333 807.253333 0 0 1-38.570666 174.933334c0 3.413333-2.56 5.973333-1.706667 9.386666a17.066667 17.066667 0 0 0 15.530667 14.506667 17.066667 17.066667 0 0 0 18.773333-12.8 787.456 787.456 0 0 0 44.544-256 921.6 921.6 0 0 0-14.506667-162.133333 153.6 153.6 0 0 0-100.181333-124.586667z m-237.056 104.106667a190.464 190.464 0 0 1 219.136-144.213334A193.194667 193.194667 0 0 1 657.92 392.533333a48.981333 48.981333 0 0 0 9.386667 9.386667 17.066667 17.066667 0 0 0 20.48-5.12 18.261333 18.261333 0 0 0-1.706667-24.746667 213.333333 213.333333 0 0 0-152.234667-81.066666A216.064 216.064 0 0 0 337.749333 375.466667a211.114667 211.114667 0 0 0-45.226666 167.253333 607.744 607.744 0 0 1 9.386666 85.333333c0 20.48 0 40.96-1.706666 60.586667a17.066667 17.066667 0 0 0 14.848 17.066667 17.066667 17.066667 0 0 0 18.773333-14.165334 540.16 540.16 0 0 0-0.853333-112.64 379.904 379.904 0 0 1-8.533334-66.56 218.794667 218.794667 0 0 1 3.413334-40.96z m534.869333 111.786666a17.066667 17.066667 0 0 0 17.066667-18.432v-6.144c-3.413333-32.426667-6.826667-64.853333-12.117334-97.28a347.477333 347.477333 0 0 0-88.064-187.733333 348.501333 348.501333 0 0 0-267.946666-119.466667 354.816 354.816 0 0 0-138.581334 28.16 17.066667 17.066667 0 0 0-12.117333 22.186667 17.066667 17.066667 0 0 0 22.528 9.216h1.365333a328.192 328.192 0 0 1 156.672-23.893333A316.928 316.928 0 0 1 733.866667 277.333333a326.826667 326.826667 0 0 1 100.352 197.12c4.266667 30.72 7.68 61.44 10.24 91.989334a19.797333 19.797333 0 0 0 18.773333 17.066666z m-399.701333-55.466666a62.464 62.464 0 0 1 0-30.72A50.005333 50.005333 0 0 1 516.608 460.8 51.2 51.2 0 0 1 563.2 505.002667a811.690667 811.690667 0 0 1 14.506667 145.066666 17.066667 17.066667 0 0 0 15.36 18.773334h1.706666a17.066667 17.066667 0 0 0 17.066667-17.066667v-15.701333c-1.706667-22.186667-2.56-44.373333-5.12-66.56s-5.973333-44.373333-9.386667-66.56a87.210667 87.210667 0 0 0-96.768-74.922667 85.333333 85.333333 0 0 0-73.557333 92.842667c3.413333 26.453333 7.68 52.906667 10.24 79.36a549.717333 549.717333 0 0 1-25.6 217.6 584.874667 584.874667 0 0 1-32.426667 76.8 17.066667 17.066667 0 0 0 0.853334 18.773333 15.36 15.36 0 0 0 16.213333 6.826667 19.114667 19.114667 0 0 0 15.36-12.8 608.426667 608.426667 0 0 0 51.2-378.88z m-201.045334 46.933333a378.538667 378.538667 0 0 1-6.485333-87.893333 255.146667 255.146667 0 0 1 245.248-229.546667 248.661333 248.661333 0 0 1 70.144 6.826667 19.114667 19.114667 0 0 0 10.24 0 15.701333 15.701333 0 0 0 13.824-15.36 17.066667 17.066667 0 0 0-12.8-17.92 263.338667 263.338667 0 0 0-72.021333-8.533334 198.826667 198.826667 0 0 0-53.077334 5.12 282.965333 282.965333 0 0 0-197.632 139.093334A278.016 278.016 0 0 0 223.914667 546.133333c2.56 23.893333 7.68 46.933333 9.386666 70.826667a327.168 327.168 0 0 1-30.72 168.106667 17.066667 17.066667 0 0 0-2.56 11.093333 15.530667 15.530667 0 0 0 14.506667 14.506667 18.432 18.432 0 0 0 18.944-11.093334 364.544 364.544 0 0 0 29.013333-224.597333z" fill="#232323" ></path></symbol></svg>',m=(m=document.getElementsByTagName("script"))[m.length-1].getAttribute("data-injectcss");if(m&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: ;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}function h(){o||(o=!0,l())}t=function(){var a,t,e;(e=document.createElement("div")).innerHTML=c,c=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",a=t,(e=document.body).firstChild?(t=e.firstChild).parentNode.insertBefore(a,t):e.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(l=t,i=a.document,o=!1,(n=function(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}h()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,h())})}(window);
\ No newline at end of file
--- a/src/assets/icon_font/iconfont.json
+++ b/src/assets/icon_font/iconfont.json
+{
+  "id": "2614723",
+  "name": "指纹",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "22284741",
+      "name": "下拉",
+      "font_class": "xiala",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "22284742",
+      "name": "播放",
+      "font_class": "bofang",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "22284743",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "22284744",
+      "name": "选中",
+      "font_class": "xuanzhong",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "22284745",
+      "name": "选择器",
+      "font_class": "xuanzeqi",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "22284746",
+      "name": "文件夹",
+      "font_class": "wenjianjia",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "22284747",
+      "name": "预览",
+      "font_class": "yulan",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "22284748",
+      "name": "暂停",
+      "font_class": "zanting",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "22284749",
+      "name": "指纹",
+      "font_class": "zhiwen",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "22284750",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "22284751",
+      "name": "指纹采集标记",
+      "font_class": "zhiwencaijibiaoji",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    }
+  ]
+}
--- a/src/assets/icon_font/iconfont.ttf
+++ b/src/assets/icon_font/iconfont.ttf
--- a/src/assets/icon_font/iconfont.woff
+++ b/src/assets/icon_font/iconfont.woff
--- a/src/assets/icon_font/iconfont.woff2
+++ b/src/assets/icon_font/iconfont.woff2
--- a/src/assets/img/zw/anaphora.png
+++ b/src/assets/img/zw/anaphora.png
--- a/src/assets/img/zw/error.png
+++ b/src/assets/img/zw/error.png
--- a/src/assets/img/zw/finger.png
+++ b/src/assets/img/zw/finger.png
--- a/src/assets/img/zw/fingers/1-g.png
+++ b/src/assets/img/zw/fingers/1-g.png
--- a/src/assets/img/zw/fingers/1-r.png
+++ b/src/assets/img/zw/fingers/1-r.png
--- a/src/assets/img/zw/fingers/1-y.png
+++ b/src/assets/img/zw/fingers/1-y.png
--- a/src/assets/img/zw/fingers/10-g.png
+++ b/src/assets/img/zw/fingers/10-g.png
--- a/src/assets/img/zw/fingers/10-r.png
+++ b/src/assets/img/zw/fingers/10-r.png
--- a/src/assets/img/zw/fingers/10-y.png
+++ b/src/assets/img/zw/fingers/10-y.png
--- a/src/assets/img/zw/fingers/2-g.png
+++ b/src/assets/img/zw/fingers/2-g.png
--- a/src/assets/img/zw/fingers/2-r.png
+++ b/src/assets/img/zw/fingers/2-r.png
--- a/src/assets/img/zw/fingers/2-y.png
+++ b/src/assets/img/zw/fingers/2-y.png
--- a/src/assets/img/zw/fingers/3-g.png
+++ b/src/assets/img/zw/fingers/3-g.png
--- a/src/assets/img/zw/fingers/3-r.png
+++ b/src/assets/img/zw/fingers/3-r.png
--- a/src/assets/img/zw/fingers/3-y.png
+++ b/src/assets/img/zw/fingers/3-y.png
--- a/src/assets/img/zw/fingers/4-g.png
+++ b/src/assets/img/zw/fingers/4-g.png
--- a/src/assets/img/zw/fingers/4-r.png
+++ b/src/assets/img/zw/fingers/4-r.png
--- a/src/assets/img/zw/fingers/4-y.png
+++ b/src/assets/img/zw/fingers/4-y.png
--- a/src/assets/img/zw/fingers/5-g.png
+++ b/src/assets/img/zw/fingers/5-g.png
--- a/src/assets/img/zw/fingers/5-r.png
+++ b/src/assets/img/zw/fingers/5-r.png
--- a/src/assets/img/zw/fingers/5-y.png
+++ b/src/assets/img/zw/fingers/5-y.png
--- a/src/assets/img/zw/fingers/6-g.png
+++ b/src/assets/img/zw/fingers/6-g.png
--- a/src/assets/img/zw/fingers/6-r.png
+++ b/src/assets/img/zw/fingers/6-r.png
--- a/src/assets/img/zw/fingers/6-y.png
+++ b/src/assets/img/zw/fingers/6-y.png
--- a/src/assets/img/zw/fingers/7-g.png
+++ b/src/assets/img/zw/fingers/7-g.png
--- a/src/assets/img/zw/fingers/7-r.png
+++ b/src/assets/img/zw/fingers/7-r.png
--- a/src/assets/img/zw/fingers/7-y.png
+++ b/src/assets/img/zw/fingers/7-y.png
--- a/src/assets/img/zw/fingers/8-g.png
+++ b/src/assets/img/zw/fingers/8-g.png
--- a/src/assets/img/zw/fingers/8-r.png
+++ b/src/assets/img/zw/fingers/8-r.png
--- a/src/assets/img/zw/fingers/8-y.png
+++ b/src/assets/img/zw/fingers/8-y.png
--- a/src/assets/img/zw/fingers/9-g.png
+++ b/src/assets/img/zw/fingers/9-g.png
--- a/src/assets/img/zw/fingers/9-r.png
+++ b/src/assets/img/zw/fingers/9-r.png
--- a/src/assets/img/zw/fingers/9-y.png
+++ b/src/assets/img/zw/fingers/9-y.png
--- a/src/assets/img/zw/play.png
+++ b/src/assets/img/zw/play.png
--- a/src/assets/img/zw/pointer.png
+++ b/src/assets/img/zw/pointer.png
--- a/src/assets/img/zw/right.png
+++ b/src/assets/img/zw/right.png
--- a/src/assets/img/zw/setting.png
+++ b/src/assets/img/zw/setting.png
--- a/src/assets/img/zw/warning.png
+++ b/src/assets/img/zw/warning.png
--- a/src/assets/img/zw/zwcjTitle2.png
+++ b/src/assets/img/zw/zwcjTitle2.png
--- a/src/assets/img/zw/zwleft2x.png
+++ b/src/assets/img/zw/zwleft2x.png
--- a/src/assets/img/zw/zwright2x.png
+++ b/src/assets/img/zw/zwright2x.png
--- a/src/assets/video/04547201cc9389620e3111b31c1df7d9.mp4
+++ b/src/assets/video/04547201cc9389620e3111b31c1df7d9.mp4
--- a/src/assets/video/1346911083e6bab876f1306aea27ceeb.mp4
+++ b/src/assets/video/1346911083e6bab876f1306aea27ceeb.mp4
--- a/src/assets/video/726a41d8886ee5240b0ab63bfea88715.mp4
+++ b/src/assets/video/726a41d8886ee5240b0ab63bfea88715.mp4
--- a/src/assets/video/beb3543396dc0831a2470aec7a08a9ac.mp4
+++ b/src/assets/video/beb3543396dc0831a2470aec7a08a9ac.mp4
--- a/src/assets/video/cc6c41d074f8c595f4a33f4b5e61adc4.mp4
+++ b/src/assets/video/cc6c41d074f8c595f4a33f4b5e61adc4.mp4
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -13,6 +13,24 @@ export default[
    component: () => import("@/views/zwxt/fingerprint.vue")
  },
  {
+    path: "/fingerprintIndex2",
+    name: "fingerprintIndex2",
+    meta: {
+      title: '指纹界面',
+      auth: 5
+    },
+    component: () => import("@/views/zwxt/fingerprint2.vue")
+  },
+  {
+    path: "/fingerprintIndex3",
+    name: "fingerprintIndex3",
+    meta: {
+      title: '指纹界面',
+      auth: 5
+    },
+    component: () => import("@/views/zwxt/fingerprint3.vue")
+  },
+  {
    path: "/home",
    name: "Home",
    meta: {

--- a/src/views/zwxt/fingerprint.scss
+++ b/src/views/zwxt/fingerprint.scss
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.fingerprint {
+  background-color: #000;
+  .head_box {
+    width: 100%;
+    height: 56px;
+    background: #323232;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .head-left {
+      display: flex;
+      align-items: center;
+      img {
+        margin: 16px 16px 15px 40px;
+        width: 22.25px;
+        height: 25px;
+      }
+      span {
+        height: 26px;
+        font-size: 20px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 26px;
+        color: #ffffff;
+      }
+      p {
+        margin-left: 42px;
+        height: 20px;
+        font-size: 15px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 20px;
+        color: #909090;
+      }
+    }
+    .head-right {
+      display: flex;
+      align-items: center;
+      .equipment-model {
+        height: 19px;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 19px;
+        color: #dddddd;
+        cursor: pointer;
+      }
+      .setting {
+        display: flex;
+        align-items: center;
+        margin-left: 40px;
+        cursor: pointer;
+        .setting-img {
+          width: 15px;
+          height: 14px;
+          background-image: url(../../assets/img/zw/setting.png);
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          opacity: 1;
+        }
+        .txt {
+          height: 20px;
+          font-size: 15px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          line-height: 20px;
+          color: #dddddd;
+          opacity: 1;
+          margin: 18px 40px 18px 4px;
+        }
+      }
+    }
+  }
+  .content {
+    display: flex;
+    width: 100%;
+    height: 922px;
+    // background: #323232;
+    opacity: 1;
+    margin-top: 2px;
+    border-top: 1px solid #464646;
+    .content-left {
+      width: 350px;
+      margin-right: 2px;
+      border-right: 1px solid #464646;
+      background: #323232;
+      .select {
+        margin: 40px 40px 40px 50px;
+        .el-select {
+          width: 260px;
+          height: 45px;
+          background: #2a2a2a;
+          opacity: 1;
+          border-radius: 4px;
+          /deep/ .el-input__inner {
+            height: 21px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 21px;
+            width: 260px;
+            height: 45px;
+            background: #2a2a2a;
+            border: 1px solid #505050;
+            color: #dddddd;
+          }
+        }
+      }
+      .collection-type {
+        .el-checkbox-group {
+          display: flex;
+          flex-direction: column;
+          margin-left: 50px;
+          .el-checkbox {
+            height: 21px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 21px;
+            color: #dddddd;
+            margin-bottom: 24px;
+          }
+          /deep/ .el-checkbox__inner {
+            border: 1px solid #404040;
+            background-color: #1b1b1b;
+          }
+          /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+            color: #dddddd;
+          }
+          /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
+          /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+            background-color: #dfdfdf !important;
+            border-color: #dfdfdf !important;
+          }
+          /deep/ .el-checkbox__inner::after {
+            border: 1px solid #1b1b1b;
+            border-left: 0;
+            border-top: 0;
+          }
+        }
+      }
+      .light {
+        margin: 40px 40px 0 50px;
+        /deep/ .el-slider__runway {
+          height: 3px;
+          background-color: #1b1b1b;
+          opacity: 1;
+          border-radius: 2px;
+        }
+        /deep/ .el-slider__bar {
+          height: 3px;
+          background: #c4c4c4;
+          opacity: 1;
+          border-radius: 2px;
+        }
+        /deep/ .el-slider__button {
+          width: 11px;
+          height: 11px;
+          background: #dddddd;
+          border: 2px solid #909090;
+          border-radius: 50%;
+          opacity: 1;
+        }
+        /deep/ .el-slider__button-wrapper {
+          top: -17px;
+        }
+        .light-text {
+          height: 21px;
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          line-height: 21px;
+          color: #909090;
+          opacity: 1;
+          // margin-bottom: 18px;
+          span {
+            height: 21px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 21px;
+            color: #dddddd;
+            opacity: 1;
+          }
+        }
+      }
+      .contrast {
+        margin: 30px 40px 0 50px;
+      }
+      .movie {
+        margin: 268px 40px 60px 50px;
+        width: 260px;
+        height: 160px;
+        background: #999999;
+        opacity: 0.3;
+        border-radius: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        video {
+          width: 260px;
+          height: 160px;
+        }
+        .tip {
+          width: 50px;
+          height: 50px;
+          background-image: url(../../assets/img/zw/play.png);
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+        }
+      }
+    }
+    .content-right {
+      flex: 1;
+      background: #323232;
+      display: flex;
+      justify-content: space-between;
+      .capture-preview {
+        display: flex;
+        .views {
+          margin-top: 12px;
+          .looking-txt {
+            margin-left: 44px;
+            height: 21px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 21px;
+            color: #909090;
+            opacity: 1;
+          }
+          .looking {
+            position: relative;
+            margin-left: 38px;
+            margin-top: 7px;
+            width: 540px;
+            height: 480px;
+            background: #161712;
+            border: 1px solid #464646;
+            opacity: 1;
+            border-radius: 4px;
+            .tip {
+              position: absolute;
+              top: 16px;
+              left: 90px;
+              width: 360px;
+              height: 40px;
+              background: rgba(23, 208, 16, 0.2);
+              opacity: 1;
+              border-radius: 2px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              .icon {
+                width: 16px;
+                height: 16px;
+                // background: #17d010;
+                opacity: 1;
+                margin-right: 12px;
+              }
+              .txt {
+                height: 20px;
+                font-size: 15px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                line-height: 20px;
+                color: #17d010;
+                opacity: 1;
+              }
+            }
+            .tip-success {
+              .success-icon {
+                background-image: url(../../assets/img/zw/right.png);
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: contain;
+              }
+            }
+            .tip-warning {
+              background: rgba(255, 192, 5, 0.2);
+              .warning-icon {
+                background-image: url(../../assets/img/zw/warning.png);
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: contain;
+              }
+              .warning-txt {
+                color: #ffc005;
+              }
+            }
+            .tip-error {
+              background: rgba(232, 37, 16, 0.2);
+              .error-icon {
+                background-image: url(../../assets/img/zw/error.png);
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: contain;
+              }
+              .error-txt {
+                color: #e82510;
+              }
+            }
+            .looking-pre {
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .dash-border {
+              position: absolute;
+              left: 160px;
+              top: 77px;
+              width: 220px;
+              height: 388px;
+              background: #161712;
+              border: 3px dashed #707070;
+              border-bottom: none;
+              opacity: 1;
+              border-radius: 110px 110px 0px 0px;
+              @keyframes luAnimate {
+                0% {
+                  height: 100%;
+                }
+                50% {
+                  height: 50%;
+                }
+                100% {
+                  height: 0;
+                }
+              }
+              @keyframes yellowAnimate {
+                0% {
+                  opacity: 0;
+                }
+                80% {
+                  opacity: 0.5;
+                }
+                100% {
+                  opacity: 1;
+                }
+              }
+              .finger-icon {
+                position: absolute;
+                left: 40px;
+                top: -16px;
+                font-size: 140px;
+                color: #FFC005;
+                opacity: 1;
+                animation: yellowAnimate 2s linear forwards;
+              }
+              // .success {
+              //   position: absolute;
+              //   left: 40px;
+              //   top: -16px;
+              //   font-size: 140px;
+              //   color: #17D010;
+              // }
+              .cover {
+                overflow: hidden;
+                position: absolute;
+                width: 140px;
+                height: 185px;
+                left: 40px;
+                top: -16px;
+                animation: luAnimate 2s linear forwards;
+                .finger-icon-f {
+                  font-size: 140px;
+                }
+              }
+            }
+            .anaphora {
+              position: absolute;
+              width: 96px;
+              height: 36px;
+              background: #323232;
+              // opacity: 0.5;
+              bottom: 12px;
+              right: 12px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /deep/ .el-checkbox {
+                height: 20px;
+                font-size: 15px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                line-height: 24px;
+                color: #909090;
+              }
+              /deep/ .el-checkbox__inner {
+                border: 1px solid #404040;
+                background-color: #1b1b1b;
+              }
+              /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+                color: #dddddd;
+              }
+              /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
+              /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+                background-color: #dfdfdf !important;
+                border-color: #dfdfdf !important;
+              }
+              /deep/ .el-checkbox__inner::after {
+                border: 1px solid #1b1b1b;
+                border-left: 0;
+                border-top: 0;
+              }
+            }
+          }
+          .hands {
+            margin-left: 40px;
+            margin-top: 12px;
+            width: 540px;
+            height: 200px;
+            background: #2d2d2d;
+            opacity: 1;
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 20px;
+            position: relative;
+            @keyframes pointerAnimate {
+              0% {
+                transform: scale(1);
+              }
+              50% {
+                transform: scale(1.3);
+              }
+              100% {
+                transform: scale(1);
+              }
+            }
+            span[class^="absoluteC"] {
+              z-index: 10;
+              position: absolute;
+              width: 30px;
+              height: 30px;
+              background-image: url(../../assets/img/zw/pointer.png);
+              background-position: center;
+              background-repeat: no-repeat;
+              background-size: contain;
+              opacity: 1;
+              animation: pointerAnimate 2s linear infinite;
+            }
+            .absoluteC6 {
+              left: 213px;
+              top: 78px;
+            }
+            .absoluteC7 {
+              left: 174px;
+              top: 12px;
+            }
+            .absoluteC8 {
+              left: 147px;
+              top: 5px;
+            }
+            .absoluteC9 {
+              left: 124px;
+              top: 10px;
+            }
+            .absoluteC10 {
+              left: 103px;
+              top: 31px;
+            }
+            .absoluteC1 {
+              right: 213px;
+              top: 78px;
+            }
+            .absoluteC2 {
+              right: 174px;
+              top: 12px;
+            }
+            .absoluteC3 {
+              right: 147px;
+              top: 5px;
+            }
+            .absoluteC4 {
+              right: 124px;
+              top: 10px;
+            }
+            .absoluteC5 {
+              right: 103px;
+              top: 31px;
+            }
+            .left-hand,
+            .right-hand {
+              display: flex;
+              align-items: center;
+              .txt {
+                width: 15px;
+                height: 40px;
+                font-size: 15px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                line-height: 20px;
+                color: #909090;
+                opacity: 1;
+                margin-right: 77px;
+              }
+              .hand {
+                width: 120px;
+                height: 168px;
+                display: flex;
+                img {
+                  object-fit: contain;
+                }
+              }
+            }
+            .right-hand {
+              .txt {
+                margin-right: 0;
+                margin-left: 77px;
+              }
+              .hand {
+                position: relative;
+                .right-finger {
+                  .finger1 {
+                    position: absolute;
+                    width: 41px;
+                    height: 50px;
+                    top: 76px;
+                    right: 80px;
+                  }
+                  .finger2 {
+                    position: absolute;
+                    width: 18px;
+                    height: 61px;
+                    top: 5px;
+                    right: 65px;
+                  }
+                  .finger3 {
+                    position: absolute;
+                    width: 18px;
+                    height: 62px;
+                    top: -2px;
+                    right: 42px;
+                  }
+                  .finger4 {
+                    position: absolute;
+                    width: 18px;
+                    height: 56px;
+                    top: 7px;
+                    right: 21px;
+                  }
+                  .finger5 {
+                    position: absolute;
+                    width: 19px;
+                    height: 45px;
+                    top: 27px;
+                    right: 0px;
+                  }
+                }
+              }
+            }
+            .left-hand {
+              .hand {
+                position: relative;
+              }
+              .left-finger {
+                .finger6 {
+                  position: absolute;
+                  width: 41px;
+                  height: 50px;
+                  top: 76px;
+                  left: 80px;
+                }
+                .finger7 {
+                  position: absolute;
+                  width: 18px;
+                  height: 61px;
+                  top: 5px;
+                  left: 65px;
+                }
+                .finger8 {
+                  position: absolute;
+                  width: 18px;
+                  height: 62px;
+                  top: -2px;
+                  left: 42px;
+                }
+                .finger9 {
+                  position: absolute;
+                  width: 18px;
+                  height: 56px;
+                  top: 7px;
+                  left: 21px;
+                }
+                .finger10 {
+                  position: absolute;
+                  width: 19px;
+                  height: 45px;
+                  top: 27px;
+                  left: 0px;
+                }
+              }
+            }
+          }
+          .tip-txt {
+            margin-left: 60px;
+            margin-top: 12px;
+            .title {
+              height: 26px;
+              font-size: 20px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 26px;
+              color: #ffc005;
+              opacity: 1;
+            }
+            p {
+              margin-top: 12px;
+              width: 460px;
+              font-size: 15px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 24px;
+              color: #c4c4c4;
+              opacity: 1;
+            }
+          }
+        }
+        .roll-plane {
+          margin-top: 40px;
+          margin-left: 40px;
+          .roll,
+          .plane {
+            width: 588px;
+            display: flex;
+            justify-content: space-between;
+            .txt {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 32px;
+              height: 96px;
+              background: #2b2b2b;
+              // opacity: 0.28;
+              border-radius: 2px;
+              span {
+                width: 15px;
+                height: 40px;
+                font-size: 15px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                line-height: 20px;
+                color: #909090;
+                opacity: 1;
+              }
+            }
+            .add-box {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              .pic {
+                width: 96px;
+                height: 96px;
+                background: #1b1b1b;
+                border: 1px solid #464646;
+                opacity: 1;
+                border-radius: 2px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #909090;
+                font-size: 40px;
+                img {
+                  object-fit: contain;
+                }
+              }
+              :hover {
+                cursor: pointer;
+                border: 1px solid #909090;
+              }
+              .pic.select {
+                border: 1px solid #ffc005;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                img {
+                  width: 40px;
+                  height: 40px;
+                }
+              }
+              .pic.fail {
+                border: 1px solid #ffc005;
+                position: relative;
+                .score {
+                  position: absolute;
+                  bottom: 0;
+                  right: 0;
+                  width: 42px;
+                  height: 20px;
+                  background: #ffc005;
+                  opacity: 1;
+                  text-align: center;
+                  font-size: 15px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  line-height: 20px;
+                  color: #1b1b1b;
+                  border-top-left-radius: 10px;
+                }
+              }
+              .pic.success {
+                border: 1px solid #17d010;
+                position: relative;
+                .score {
+                  position: absolute;
+                  bottom: 0;
+                  right: 0;
+                  width: 42px;
+                  height: 20px;
+                  background: #17d010;
+                  opacity: 1;
+                  text-align: center;
+                  font-size: 15px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  line-height: 20px;
+                  color: #1b1b1b;
+                  border-top-left-radius: 10px;
+                }
+              }
+              .pic.anaphora {
+                background-image: url(../../assets/img/zw/anaphora.png);
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: contain;
+              }
+              .pic.anaphora,
+              .pic.get {
+                border: 1px solid #e82510;
+              }
+              .desc {
+                margin-top: 2px;
+                height: 21px;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                line-height: 21px;
+                color: #dddddd;
+                opacity: 1;
+              }
+            }
+          }
+          .roll {
+            margin-bottom: 12px;
+          }
+          .plane {
+            margin-bottom: 40px;
+          }
+        }
+      }
+      .btns {
+        margin-top: 47px;
+        margin-left: 122px;
+        .finish,
+        .save {
+          width: 180px;
+          height: 45px;
+          background: #323232;
+          border: 2px solid #464646;
+          opacity: 1;
+          border-radius: 26px;
+          font-size: 15px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          line-height: 34px;
+          color: #efefef;
+          outline: none;
+          cursor: pointer;
+        }
+        :hover {
+          border: 2px solid #efefef;
+        }
+        .save {
+          margin-top: 23px;
+        }
+      }
+    }
+  }
+}
--- a/src/views/zwxt/fingerprint2.vue
+++ b/src/views/zwxt/fingerprint2.vue
+<template>
+  <div class="fingerprint">
+    <!-- 顶部 -->
+    <div class="head_box">
+      <div class="head-left">
+        <img src="@/assets/img/zw/zwcjTitle2.png" /><span>指纹采集</span>
+        <p>采集设备型号</p>
+      </div>
+      <div class="head-right">
+        <span class="equipment-model">切换皮肤</span>
+        <div class="setting">
+          <div class="setting-img"></div>
+          <div class="txt">设置</div>
+        </div>
+      </div>
+    </div>
+    <!-- 主体 -->
+    <div class="content">
+      <div class="content-left">
+        <!-- 下拉选择 -->
+        <div class="select">
+          <el-select class="" :clearable="false" v-model="value" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 选择采集类型 -->
+        <div class="collection-type">
+          <el-checkbox-group v-model="checkList">
+            <el-checkbox label="四联指平面采集"></el-checkbox>
+            <el-checkbox label="指纹交叉验证"></el-checkbox>
+            <el-checkbox label="随时中止采集"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <!-- 亮度 -->
+        <div class="light">
+          <div class="light-text">
+            亮度：<span>{{lightvalue}}</span>
+          </div>
+          <div class="block">
+            <el-slider v-model="lightvalue" :show-tooltip="false"></el-slider>
+          </div>
+        </div>
+        <!-- 对比度 -->
+        <div class="light contrast">
+          <div class="light-text">
+            对比度：<span>{{contrastvalue}}</span>
+          </div>
+          <div class="block">
+            <el-slider v-model="contrastvalue" :show-tooltip="false"></el-slider>
+          </div>
+        </div>
+        <!-- 视频 -->
+        <div class="movie" @click="playFn">
+          <div class="tip"></div>
+          <video v-show="isPlay" ref="video" src="../../assets/video/center_bg.mp4" controls></video>
+        </div>
+      </div>
+      <div class="content-right">
+        <!-- 采集预览 -->
+        <div class="capture-preview">
+          <!-- 视图 -->
+          <div class="views">
+            <span class="looking-txt">
+              采集预览
+            </span>
+            <div class="looking">
+              <!-- 采集成功 -->
+              <div ref="tip" v-if="tipType=='success'" class="tip tip-success">
+                <div class="icon success-icon"></div>
+                <div class="txt">采集成功</div>
+              </div>
+              <!-- 采集成功 -->
+              <div ref="tip" v-else-if="tipType=='warning'" class="tip tip-warning">
+                <div class="icon warning-icon"></div>
+                <div class="txt warning-txt">采集成功</div>
+              </div>
+              <!-- 采集失败 -->
+              <div ref="tip" v-else-if="tipType=='error'" class="tip tip-error">
+                <div class="icon error-icon"></div>
+                <div class="txt error-txt">采集失败</div>
+              </div>
+              <!-- 指纹图片 -->
+              <img src="../../assets/img/zw/fp-loading.gif" alt="">
+              <!-- 缺指 -->
+              <div class="anaphora">
+                <el-checkbox v-model="checked" @change="setLackFinger">缺指</el-checkbox>
+              </div>
+            </div>
+            <!-- 左手|右手 -->
+            <div class="hands">
+              <span :class="cur==1?'absoluteC1':(cur==2?'absoluteC2':(cur==3?'absoluteC3':(cur==4?'absoluteC4':(cur==5?'absoluteC5':(cur==6?'absoluteC6':(cur==7?'absoluteC7':(cur==8?'absoluteC8':(cur==9?'absoluteC9':'absoluteC10'))))))))"></span>
+              <div class="left-hand">
+                <div class="txt">左手</div>
+                <div class="hand">
+                  <img src="../../assets/img/zw/zwleft2x.png" alt="">
+                </div>
+              </div>
+              <div class="right-hand">
+                <div class="hand">
+                  <img src="../../assets/img/zw/zwright2x.png" alt="">
+                </div>
+                <div class="txt">右手</div>
+              </div>
+            </div>
+            <!-- 提示文字 -->
+            <div class="tip-txt">
+              <div class="title">{{tipTitle}}</div>
+              <p>{{tipP}}</p>
+            </div>
+          </div>
+          <!-- 滚动，平面指纹 -->
+          <div class="roll-plane">
+            <div class="roll">
+              <div class="txt"><span>滚动</span></div>
+              <div v-for="(item, i) in fingersRight" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelectR(item, i)" @click="lookFingerR(item, i)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFingerR(item, i)" @dblclick="changeSelectR(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFingerR(item, i)" @dblclick="changeSelectR(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelectR(item, i)" @click="lookFingerR(item, i)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+            <div class="plane">
+              <div class="txt"><span>平面</span></div>
+              <div v-for="(item, i) in fingersRight" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelectR(item, i)" @click="lookFingerR(item, i)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFingerR(item, i)" @dblclick="changeSelectR(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFingerR(item, i)" @dblclick="changeSelectR(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelectR(item, i)" @click="lookFingerR(item, i)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+            <div class="roll">
+              <div class="txt"><span>滚动</span></div>
+              <div v-for="(item, i) in fingersLeft" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelectL(item, i)" @click="lookFingerL(item, i)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFingerL(item, i)" @dblclick="changeSelectL(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFingerL(item, i)" @dblclick="changeSelectL(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelectL(item, i)" @click="lookFingerL(item, i)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+            <div class="plane">
+              <div class="txt"><span>平面</span></div>
+              <div v-for="(item, i) in fingersLeft" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelectL(item, i)" @click="lookFingerL(item, i)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFingerL(item, i)" @dblclick="changeSelectL(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFingerL(item, i)" @dblclick="changeSelectL(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelectL(item, i)" @click="lookFingerL(item, i)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 完成按钮 -->
+        <div class="btns">
+          <!-- 采集完成按钮 -->
+          <button class="finish">采集完成</button>
+          <!-- 保存图片按钮 -->
+          <button class="save">保存图片</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 解决单击和双击事件的冲突
+var time = null;
+export default {
+  data () {
+    return {
+      options: [{
+        value: '干燥指纹',
+        label: '干燥指纹'
+      }, {
+        value: '潮湿指纹',
+        label: '潮湿指纹'
+      }],
+      value: '干燥指纹',
+      checkList: ['四联指平面采集'],
+      lightvalue: 36,
+      contrastvalue: 50,
+      isPlay: false,
+      // 缺指
+      checked: false,
+      tipType: 'none',
+      tipTitle: '右手拇指',
+      tipP: '待预览窗口出现图像后，保持适当下压用力，匀速向另一侧滚动手指，完成采集。',
+      // 0: 常态，1：选中/采集，2：采集完成-不及格，3：采集完成-及格，4：缺指，5：不可补采，6：可补采
+      fingersRight: [
+        { status: 0, name: '拇', isLackFinger: false },
+        { status: 0, name: '食', isLackFinger: false },
+        { status: 0, name: '中', score: 25, isLackFinger: false },
+        { status: 0, name: '环', score: 100, isLackFinger: false },
+        { status: 0, name: '小', isLackFinger: false }
+      ],
+      fingersLeft: [
+        { status: 0, name: '拇', isLackFinger: false },
+        { status: 0, name: '食', isLackFinger: false },
+        { status: 0, name: '中', score: 25, isLackFinger: false },
+        { status: 0, name: '环', score: 100, isLackFinger: false },
+        { status: 0, name: '小', isLackFinger: false }
+      ],
+      // 手指提示数组
+      fingerTips: ['右手拇指', '右手食指', '右手中指', '右手环指', '右手小指', '左手拇指', '左手食指', '左手中指', '左手环指', '左手小指'],
+      isSuccess: false,
+      isFingerRight: false,
+      // 指纹的位置
+      cur: 1,
+      // 打断自动录制的标志位
+      isInterrupt: false,
+      // 定时器
+      timer: null,
+      // 自动录制指纹
+      Auto: false
+    }
+  },
+  methods: {
+    /**
+     * @name: 播放视频
+     * @param {*}
+     * @return {*}
+     */
+    playFn () {
+      // console.log([this.$refs.video]);
+      if (this.$refs.video.paused) {
+        this.isPlay = true
+        this.$refs.video.play()
+      } else {
+        this.isPlay = false
+        this.$refs.video.pause()
+      }
+    },
+    /**
+     * @name: 双击开始自动采集（右手）
+     * @param {Object} finger
+     * @param {Number} index
+     * @return {*}
+     */
+    changeSelectR (finger, index) {
+      clearTimeout(time);  // 清除定时器
+      this.Auto = true
+      this.$set(this.fingersRight[index], 'status', 1)
+      this.cur = index + 1
+      this.changeFinger(this.fingersRight, index)
+    },
+    /**
+     * @name: 双击开始自动采集（左手）
+     * @param {Object} finger
+     * @param {Number} index
+     * @return {*}
+     */
+    changeSelectL (finger, index) {
+      clearTimeout(time);  // 清除定时器
+      this.Auto = true
+      this.$set(this.fingersLeft[index], 'status', 1)
+      this.cur = index + 6
+      this.changeFinger(this.fingersRight, index, 'left')
+    },
+    /**
+     * @name: 触发左手指纹的改变
+     * @param {*}
+     * @return {*}
+     */
+    leftEvent () {
+      this.$set(this.fingersLeft[0], 'status', 1)
+      this.cur = 6
+      this.tipTitle = this.fingerTips[5]
+    },
+    /**
+     * @name: 改变录入指纹顺序
+     * @param {Array} fingerList
+     * @param {Number} start
+     * @param {String} flag
+     * @return {*}
+     */
+    changeFinger (fingerList, start = 0, flag = 'right') {
+      if (flag == 'right') {
+        clearTimeout(this.timer)
+        for (let i = start; i < fingerList.length; i++) {
+          // if ((i - 1 >= 0) && fingerList[i].status == 0 && fingerList[i - 1].status == 4) {
+          //   fingerList[i].status = 1
+          // }
+          if(fingerList[i].status == 4) {
+            i++
+          }
+          if (i == 0) {
+            if (fingerList[i].status == 1 && !this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 2
+                fingerList[i].score = 25
+                this.tipType = 'warning'
+                this.showTip()
+                if (fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.tipTitle = this.fingerTips[i + 1]
+                  this.cur = i + 2
+                }
+              }, 3000);
+            }
+            if (fingerList[i].status == 1 && this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 3
+                fingerList[i].score = 100
+                this.tipType = 'success'
+                this.showTip()
+                if (fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.tipTitle = this.fingerTips[i + 1]
+                  this.cur = i + 2
+                }
+              }, 3000);
+            }
+          } else {
+            if (fingerList[i].status == 1 && !this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 2
+                fingerList[i].score = 25
+                this.tipType = 'warning'
+                this.showTip()
+                if (i + 1 < fingerList.length && fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.tipTitle = this.fingerTips[i + 1]
+                  this.cur = i + 2
+                }
+              }, 3000);
+            }
+            if (fingerList[i].status == 1 && this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 3
+                fingerList[i].score = 100
+                this.tipType = 'success'
+                this.showTip()
+                if (i + 1 < fingerList.length && fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.tipTitle = this.fingerTips[i + 1]
+                  this.cur = i + 2
+                }
+              }, 3000);
+            }
+          }
+        }
+      } else {
+        clearTimeout(this.timer)
+        for (let i = start; i < fingerList.length; i++) {
+          if ((i - 1 >= 0) && fingerList[i].status == 0 && fingerList[i - 1].status == 4) {
+            fingerList[i].status = 1
+            this.isFingerRight = false
+          }
+          if (i == 0) {
+            if (fingerList[i].status == 0 && !this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 1
+                this.cur = i + 6
+                this.tipTitle = this.fingerTips[i + 5]
+              }, 3000);
+            }
+            if (fingerList[i].status == 0 && this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 1
+                this.cur = i + 6
+                this.tipTitle = this.fingerTips[i + 5]
+              }, 3000);
+            }
+            if (fingerList[i].status == 1 && !this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 2
+                fingerList[i].score = 25
+                this.tipType = 'warning'
+                this.showTip()
+                if (fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.cur = i + 7
+                  this.tipTitle = this.fingerTips[i + 6]
+                }
+              }, 3000);
+            }
+            if (fingerList[i].status == 1 && this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 3
+                fingerList[i].score = 100
+                this.tipType = 'success'
+                this.showTip()
+                if (fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.cur = i + 7
+                  this.tipTitle = this.fingerTips[i + 6]
+                }
+              }, 3000);
+            }
+          } else {
+            if (fingerList[i].status == 1 && !this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 2
+                fingerList[i].score = 25
+                this.tipType = 'warning'
+                this.showTip()
+                if (i + 1 < fingerList.length && fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.cur = i + 7
+                  this.tipTitle = this.fingerTips[i + 6]
+                }
+              }, 3000);
+            }
+            if (fingerList[i].status == 1 && this.isSuccess) {
+              this.timer = setTimeout(() => {
+                fingerList[i].status = 3
+                fingerList[i].score = 100
+                this.tipType = 'success'
+                this.showTip()
+                if (i + 1 < fingerList.length && fingerList[i + 1].status == 0) {
+                  this.$set(fingerList[i + 1], 'status', 1)
+                  this.cur = i + 7
+                  this.tipTitle = this.fingerTips[i + 6]
+                }
+              }, 3000);
+            }
+          }
+        }
+      }
+    },
+    /**
+     * @name: 展示指纹提示
+     * @param {*}
+     * @return {*}
+     */
+    showTip () {
+      setTimeout(() => {
+        this.tipType = 'none'
+      }, 2000);
+    },
+    /**
+     * @name: 预览指纹(右手)
+     * @param {Object} finger
+     * @param {Number} index
+     * @return {*}
+     */
+    lookFingerR (finger, index) {
+      clearTimeout(time);  //首先清除计时器
+      this.Auto = false
+      time = setTimeout(() => {
+        // console.log('预览指纹：' + finger.status);
+        console.log('第几个指纹：' + index);
+        this.cur = index + 1
+        this.$set(this.fingersRight[index], 'status', 9)
+        console.log(finger.isLackFinger);
+        this.checked = finger.isLackFinger
+        // localStorage.selectFinger = JSON.stringify(finger)
+        localStorage.selectFinger = index
+        localStorage.fingerType = 'right'
+        console.log(this.checked);
+      }, 300);
+    },
+    /**
+     * @name: 预览指纹(左手)
+     * @param {Object} finger
+     * @param {Number} index
+     * @return {*}
+     */
+    lookFingerL (finger, index) {
+      clearTimeout(time);  //首先清除计时器
+      this.Auto = false
+      time = setTimeout(() => {
+        // console.log('预览指纹：' + finger.status);
+        console.log('第几个指纹：' + index);
+        this.cur = index + 1
+        this.$set(this.fingersLeft[index], 'status', 9)
+        console.log(finger.isLackFinger);
+        this.checked = finger.isLackFinger
+        // localStorage.selectFinger = JSON.stringify(finger)
+        localStorage.selectFinger = index
+        localStorage.fingerType = 'left'
+        console.log(this.checked);
+      }, 300);
+    },
+    /**
+     * @name: 设置缺指
+     * @param {*}
+     * @return {*}
+     */
+    setLackFinger () {
+      // console.log('缺指');
+      console.log(this.checked);
+      let fingerType = localStorage.getItem('fingerType')
+      if (fingerType == 'right') {
+        if (this.checked) {
+          let fingerIndex = localStorage.getItem('selectFinger')
+          this.$set(this.fingersRight[fingerIndex], 'status', 4)
+          this.$set(this.fingersRight[fingerIndex], 'isLackFinger', true)
+          this.Auto = false
+        } else {
+          let fingerIndex = localStorage.getItem('selectFinger')
+          this.$set(this.fingersRight[fingerIndex], 'status', 1)
+          this.$set(this.fingersRight[fingerIndex], 'isLackFinger', false)
+          this.Auto = true
+        }
+      } else {
+        if (this.checked) {
+          let fingerIndex = localStorage.getItem('selectFinger')
+          this.$set(this.fingersLeft[fingerIndex], 'status', 4)
+          this.$set(this.fingersLeft[fingerIndex], 'isLackFinger', true)
+          this.Auto = false
+        } else {
+          let fingerIndex = localStorage.getItem('selectFinger')
+          this.$set(this.fingersLeft[fingerIndex], 'status', 1)
+          this.$set(this.fingersLeft[fingerIndex], 'isLackFinger', false)
+          this.Auto = true
+        }
+      }
+    }
+  },
+  watch: {
+    // 监听录入指纹的状态变化(右手)
+    fingersRight: {
+      handler (newName) {
+        if(this.Auto) {
+          this.changeFinger(newName)
+          let flag = false
+          newName.forEach(element => {
+            if (element.status != 2 && element.status != 3 && element.status != 4) {
+              flag = false
+            } else {
+              flag = true
+            }
+          });
+          this.isFingerRight = flag
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    // 监听右手指纹录制完毕
+    isFingerRight (newName) {
+      if (newName && this.fingersLeft[0].status == 0) {
+        this.leftEvent()
+      }
+    },
+    // 监听录入指纹的状态变化(左手)
+    fingersLeft: {
+      handler (newName) {
+        if(this.Auto) {
+          let start = 0
+          newName.forEach((item, i) => {
+            if (item.status == 1) {
+              start = i
+            }
+          })
+          this.changeFinger(newName, start, 'left')
+        }
+      },
+      deep: true
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "./fingerprint.scss"
+</style>
\ No newline at end of file
--- a/src/views/zwxt/fingerprint3.vue
+++ b/src/views/zwxt/fingerprint3.vue
+<template>
+  <div class="fingerprint">
+    <!-- 顶部 -->
+    <div class="head_box">
+      <div class="head-left">
+        <img src="@/assets/img/zw/zwcjTitle2.png" /><span>指纹采集</span>
+        <p>采集设备型号</p>
+      </div>
+      <div class="head-right">
+        <span class="equipment-model">切换皮肤</span>
+        <div class="setting">
+          <div class="setting-img"></div>
+          <div class="txt">设置</div>
+        </div>
+      </div>
+    </div>
+    <!-- 主体 -->
+    <div class="content">
+      <div class="content-left">
+        <!-- 下拉选择 -->
+        <div class="select">
+          <el-select class="" :clearable="false" v-model="value" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 选择采集类型 -->
+        <div class="collection-type">
+          <el-checkbox-group v-model="checkList">
+            <el-checkbox label="四联指平面采集"></el-checkbox>
+            <el-checkbox label="指纹交叉验证"></el-checkbox>
+            <el-checkbox label="随时中止采集"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <!-- 亮度 -->
+        <div class="light">
+          <div class="light-text">
+            亮度：<span>{{lightvalue}}</span>
+          </div>
+          <div class="block">
+            <el-slider v-model="lightvalue" :show-tooltip="false"></el-slider>
+          </div>
+        </div>
+        <!-- 对比度 -->
+        <div class="light contrast">
+          <div class="light-text">
+            对比度：<span>{{contrastvalue}}</span>
+          </div>
+          <div class="block">
+            <el-slider v-model="contrastvalue" :show-tooltip="false"></el-slider>
+          </div>
+        </div>
+        <!-- 视频 -->
+        <div class="movie" @click="playFn">
+          <div class="tip"></div>
+          <video v-show="isPlay" ref="video" src="../../assets/video/center_bg.mp4" controls></video>
+        </div>
+      </div>
+      <div class="content-right">
+        <!-- 采集预览 -->
+        <div class="capture-preview">
+          <!-- 视图 -->
+          <div class="views">
+            <span class="looking-txt">
+              采集预览
+            </span>
+            <div class="looking">
+              <!-- 采集成功 -->
+              <div ref="tip" v-if="tipType=='success'" class="tip tip-success">
+                <div class="icon success-icon"></div>
+                <div class="txt">采集成功</div>
+              </div>
+              <!-- 采集成功 -->
+              <div ref="tip" v-else-if="tipType=='warning'" class="tip tip-warning">
+                <div class="icon warning-icon"></div>
+                <div class="txt warning-txt">采集成功</div>
+              </div>
+              <!-- 采集失败 -->
+              <div ref="tip" v-else-if="tipType=='error'" class="tip tip-error">
+                <div class="icon error-icon"></div>
+                <div class="txt error-txt">采集失败</div>
+              </div>
+              <!-- 指纹图片 -->
+              <div class="looking-pre" v-if="fingerImg != ''">
+                <img :src="fingerImg" alt="">
+              </div>
+              <div class="dash-border" v-else>
+                <span ref="fingerIcon" class="iconfont icon-zhiwencaijibiaoji finger-icon"></span>
+                <!-- <span v-else-if="animateStatus == 3" class="iconfont icon-zhiwencaijibiaoji success"></span> -->
+                <div class="cover">
+                  <span class="iconfont icon-zhiwencaijibiaoji finger-icon-f"></span>
+                </div>
+              </div>
+              <!-- 缺指 -->
+              <div class="anaphora">
+                <el-checkbox v-model="checked" @change="setLackFinger">缺指</el-checkbox>
+              </div>
+            </div>
+            <!-- 左手|右手 -->
+            <div class="hands">
+              <span :class="cur==1?'absoluteC1':(cur==2?'absoluteC2':(cur==3?'absoluteC3':(cur==4?'absoluteC4':(cur==5?'absoluteC5':(cur==6?'absoluteC6':(cur==7?'absoluteC7':(cur==8?'absoluteC8':(cur==9?'absoluteC9':'absoluteC10'))))))))"></span>
+              <div class="left-hand">
+                <div class="txt">左手</div>
+                <div class="hand">
+                  <img src="../../assets/img/zw/zwleft2x.png" alt="">
+                  <div ref="leftFinger" class="left-finger">
+                    <img class="finger6" src="../../assets/img/zw/fingers/6-g.png" alt="">
+                    <img class="finger7" src="../../assets/img/zw/fingers/7-g.png" alt="">
+                    <img class="finger8" src="../../assets/img/zw/fingers/8-g.png" alt="">
+                    <img class="finger9" src="../../assets/img/zw/fingers/9-g.png" alt="">
+                    <img class="finger10" src="../../assets/img/zw/fingers/10-g.png" alt="">
+                  </div>
+                </div>
+              </div>
+              <div class="right-hand">
+                <div class="hand">
+                  <img src="../../assets/img/zw/zwright2x.png" alt="">
+                  <div ref="rightFinger" class="right-finger">
+                    <img class="finger1" :src="fingerArr[0]" alt="">
+                    <img class="finger2" src="../../assets/img/zw/fingers/2-g.png" alt="">
+                    <img class="finger3" src="../../assets/img/zw/fingers/3-g.png" alt="">
+                    <img class="finger4" src="../../assets/img/zw/fingers/4-g.png" alt="">
+                    <img class="finger5" src="../../assets/img/zw/fingers/5-g.png" alt="">
+                  </div>
+                </div>
+                <div class="txt">右手</div>
+              </div>
+            </div>
+            <!-- 提示文字 -->
+            <div class="tip-txt">
+              <div class="title">{{tipTitle}}</div>
+              <p>{{tipP}}</p>
+            </div>
+          </div>
+          <!-- 滚动，平面指纹 -->
+          <div class="roll-plane">
+            <div class="roll">
+              <div class="txt"><span>滚动</span></div>
+              <div v-for="(item, i) in fingersRight" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelect(item, i)" @click="lookFinger(item, i)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFinger(item, i)" @dblclick="changeSelect(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFinger(item, i)" @dblclick="changeSelect(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelect(item, i)" @click="lookFinger(item, i)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+            <div class="plane">
+              <div class="txt"><span>平面</span></div>
+              <div v-for="(item, i) in fingersRight" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelect(item, i)" @click="lookFinger(item, i)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFinger(item, i)" @dblclick="changeSelect(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFinger(item, i)" @dblclick="changeSelect(item, i)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelect(item, i)" @click="lookFinger(item, i)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+            <div class="roll">
+              <div class="txt"><span>滚动</span></div>
+              <div v-for="(item, i) in fingersLeft" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelect(item, i+5)" @click="lookFinger(item, i+5)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFinger(item, i+5)" @dblclick="changeSelect(item, i+5)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFinger(item, i+5)" @dblclick="changeSelect(item, i+5)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelect(item, i+5)" @click="lookFinger(item, i+5)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+            <div class="plane">
+              <div class="txt"><span>平面</span></div>
+              <div v-for="(item, i) in fingersLeft" :key="i" class="add-box">
+                <div v-if="item.status == 0" class="pic" @dblclick="changeSelect(item, i+5)" @click="lookFinger(item, i+5)">
+                  +
+                </div>
+                <div v-else-if="item.status == 9" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 1" class="pic select">
+                  <img src="../../assets/img/zw/finger.png" alt="">
+                </div>
+                <div v-else-if="item.status == 2" class="pic fail" @click="lookFinger(item, i+5)" @dblclick="changeSelect(item, i+5)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 3" class="pic success" @click="lookFinger(item, i+5)" @dblclick="changeSelect(item, i+5)">
+                  <img src="" alt="">
+                  <div class="score">{{item.score}}</div>
+                </div>
+                <div v-else-if="item.status == 4" class="pic anaphora" @dblclick="changeSelect(item, i+5)" @click="lookFinger(item, i+5)">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 5" class="pic noget">
+                  <img src="" alt="">
+                </div>
+                <div v-else-if="item.status == 6" class="pic get">
+                  <img src="" alt="">
+                </div>
+                <span class="desc">{{item.name}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 完成按钮 -->
+        <div class="btns">
+          <!-- 采集完成按钮 -->
+          <button class="finish">采集完成</button>
+          <!-- 保存图片按钮 -->
+          <button class="save">保存图片</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 引入iconfont
+import '@/assets/icon_font/iconfont.js'
+import '@/assets/icon_font/iconfont.css'
+// 解决单击和双击事件的冲突
+var time = null;
+// 手指图片
+var g1 = require('@/assets/img/zw/fingers/1-g.png')
+var g2 = require('@/assets/img/zw/fingers/2-g.png')
+var g3 = require('@/assets/img/zw/fingers/3-g.png')
+var g4 = require('@/assets/img/zw/fingers/4-g.png')
+var g5 = require('@/assets/img/zw/fingers/5-g.png')
+var g6 = require('@/assets/img/zw/fingers/6-g.png')
+var g7 = require('@/assets/img/zw/fingers/7-g.png')
+var g8 = require('@/assets/img/zw/fingers/8-g.png')
+var g9 = require('@/assets/img/zw/fingers/9-g.png')
+var g10 = require('@/assets/img/zw/fingers/10-g.png')
+var y1 = require('@/assets/img/zw/fingers/1-y.png')
+var y2 = require('@/assets/img/zw/fingers/2-y.png')
+var y3 = require('@/assets/img/zw/fingers/3-y.png')
+var y4 = require('@/assets/img/zw/fingers/4-y.png')
+var y5 = require('@/assets/img/zw/fingers/5-y.png')
+var y6 = require('@/assets/img/zw/fingers/6-y.png')
+var y7 = require('@/assets/img/zw/fingers/7-y.png')
+var y8 = require('@/assets/img/zw/fingers/8-y.png')
+var y9 = require('@/assets/img/zw/fingers/9-y.png')
+var y10 = require('@/assets/img/zw/fingers/10-y.png')
+var r1 = require('@/assets/img/zw/fingers/1-r.png')
+var r2 = require('@/assets/img/zw/fingers/2-r.png')
+var r3 = require('@/assets/img/zw/fingers/3-r.png')
+var r4 = require('@/assets/img/zw/fingers/4-r.png')
+var r5 = require('@/assets/img/zw/fingers/5-r.png')
+var r6 = require('@/assets/img/zw/fingers/6-r.png')
+var r7 = require('@/assets/img/zw/fingers/7-r.png')
+var r8 = require('@/assets/img/zw/fingers/8-r.png')
+var r9 = require('@/assets/img/zw/fingers/9-r.png')
+var r10 = require('@/assets/img/zw/fingers/10-r.png')
+export default {
+  data () {
+    return {
+      options: [{
+        value: '干燥指纹',
+        label: '干燥指纹'
+      }, {
+        value: '潮湿指纹',
+        label: '潮湿指纹'
+      }],
+      value: '干燥指纹',
+      checkList: ['四联指平面采集'],
+      lightvalue: 36,
+      contrastvalue: 50,
+      isPlay: false,
+      // 缺指
+      checked: false,
+      tipType: 'none',
+      tipTitle: '右手拇指',
+      tipP: '待预览窗口出现图像后，保持适当下压用力，匀速向另一侧滚动手指，完成采集。',
+      // 0: 常态，1：选中/采集，2：采集完成-不及格，3：采集完成-及格，4：缺指，5：不可补采，6：可补采
+      fingersRight: [
+        { status: 0, name: '拇', isLackFinger: false, code: 1 },
+        { status: 0, name: '食', isLackFinger: false, code: 2 },
+        { status: 0, name: '中', score: 25, isLackFinger: false, code: 3 },
+        { status: 0, name: '环', score: 100, isLackFinger: false, code: 4 },
+        { status: 0, name: '小', isLackFinger: false, code: 5 }
+      ],
+      fingersLeft: [
+        { status: 0, name: '拇', isLackFinger: false, code: 6 },
+        { status: 0, name: '食', isLackFinger: false, code: 7 },
+        { status: 0, name: '中', score: 25, isLackFinger: false, code: 8 },
+        { status: 0, name: '环', score: 100, isLackFinger: false, code: 9 },
+        { status: 0, name: '小', isLackFinger: false, code: 10 }
+      ],
+      // 手指提示数组
+      fingerTips: ['右手拇指', '右手食指', '右手中指', '右手环指', '右手小指', '左手拇指', '左手食指', '左手中指', '左手环指', '左手小指'],
+      // 指纹的位置
+      cur: 1,
+      // 指纹预览图
+      fingerImg: '',
+      // 之前的指纹的下标
+      preIndex: null,
+      // 之前的指纹的状态
+      preStatus: null,
+      // 单击后终止录制
+      stop: false,
+      // 手指不同状态的数组
+      fingerArr: [g1, g2, g3, g4, g5, g6, g7, g8, g9, g10, y1, y2, y3, y4, y5, y6, y7, y8, y9, y10, r1, r2, r3, r4, r5, r6, r7, r8, r9, r10],
+    }
+  },
+  created () {
+    // console.log(this.fingerArr);
+    // console.log(g1);
+  },
+  mounted () {
+    // console.log(this.$refs.rightFinger)
+    // console.log(this.$refs.rightFinger.children)
+    this.$refs.rightFinger.children[0].setAttribute('src', this.fingerArr[10])
+    // this.fingerAnimate()
+  },
+  methods: {
+    /**
+     * @name: 设置采集动画
+     * @param {String} el
+     * @return {*}
+     */    
+    fingerAnimate(el) {
+      console.log(el);
+      document.styleSheets[0].insertRule(
+        `@keyframes luAnimate {
+          0% {
+            height: 100%;
+          }
+          50% {
+            height: 50%;
+          }
+          100% {
+            height: 0;
+          }
+        }`,0)
+        el.style.animation = 'luAnimate 2s linear forwards;'
+    },
+    /**
+     * @name: 重新录制单个指纹
+     * @param {String} type
+     * @param {Number} index
+     * @return {*}
+     */
+    oddFinger (type, index) {
+      if (type == 'right') {
+        // 进入录制状态
+        this.$set(this.fingersRight[index], 'status', 1)
+        this.$set(this.fingersRight[index], 'isLackFinger', false)
+        this.fingerAnimate(this.$refs.fingerIcon)
+        this.cur = index + 1
+        this.tipTitle = this.fingerTips[index]
+        // 录制函数
+        // TODO
+        // 录制成功
+        let result = true
+        if (result) {
+          let score = 100
+          if (score > 90) {
+            this.$set(this.fingersRight[index], 'status', 3)
+            this.$set(this.fingersRight[index], 'score', score)
+            this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index])
+            if(this.$refs.fingerIcon) this.$refs.fingerIcon.style.color = '#17D010'
+            this.preStatus = 3
+            this.tipType = 'success'
+            this.showTip()
+          } else {
+            this.$set(this.fingersRight[index], 'status', 2)
+            this.$set(this.fingersRight[index], 'score', score)
+            this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index + 10])
+            if(this.$refs.fingerIcon) this.$refs.fingerIcon.style.color = '#FFC005'
+            this.preStatus = 2
+            this.tipType = 'warning'
+            this.showTip()
+          }
+        } else { // 产品没有录制失败的情况
+          // 录制失败
+          this.tipType = 'error'
+          this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index + 20])
+          this.showTip()
+        }
+      } else if (type == 'left') {
+        // 进入录制状态
+        this.$set(this.fingersLeft[index - 5], 'status', 1)
+        this.$set(this.fingersLeft[index - 5], 'isLackFinger', false)
+        this.fingerAnimate(this.$refs.fingerIcon)
+        this.cur = index + 1
+        this.tipTitle = this.fingerTips[index]
+        // 录制函数
+        // TODO
+        // 录制成功
+        let result = true
+        if (result) {
+          let score = 10
+          if (score > 90) {
+            this.$set(this.fingersLeft[index - 5], 'status', 3)
+            this.$set(this.fingersLeft[index - 5], 'score', score)
+            this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index])
+            if(this.$refs.fingerIcon) this.$refs.fingerIcon.style.color = '#17D010'
+            this.preStatus = 3
+            this.tipType = 'success'
+            this.showTip()
+          } else {
+            this.$set(this.fingersLeft[index - 5], 'status', 2)
+            this.$set(this.fingersLeft[index - 5], 'score', score)
+            this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index + 10])
+            if(this.$refs.fingerIcon)  this.$refs.fingerIcon.style.color = '#FFC005'
+            this.preStatus = 2
+            this.tipType = 'warning'
+            this.showTip()
+          }
+        } else { // 产品没有录制失败的情况
+          // 录制失败
+          this.tipType = 'error'
+          this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index + 20])
+          this.showTip()
+        }
+      }
+    },
+    /**
+     * @name: 自动录制指纹
+     * @param {Array} leftList
+     * @param {Array} rightList
+     * @param {Number} index
+     * @return {*}
+     */
+    AutoLu (leftList, rightList, index) {
+      if (this.stop) {
+        return;
+      }
+      while (index < 5) {
+        if (rightList[index].status == 0) {
+          // 进入录制状态
+          this.$set(rightList[index], 'status', 1)
+          this.$set(rightList[index], 'isLackFinger', false)
+          
+          this.$nextTick(() => {
+            console.log(this);
+            console.log(this.$refs);
+            this.fingerAnimate(this.$refs.fingerIcon)
+          })
+          
+          this.cur = index + 1
+          this.tipTitle = this.fingerTips[index]
+          // 录制函数
+          // TODO
+          // 录制成功
+          let result = true
+          if (result) {
+            let score = 100
+            if (score > 90) {
+              this.$set(rightList[index], 'status', 3)
+              this.$set(rightList[index], 'score', score)
+              this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index])
+              if(this.$refs.fingerIcon) this.$refs.fingerIcon.style.color = '#17D010'
+              this.$nextTick(() => {
+                this.$refs.fingerIcon.style.color = '#17D010'
+              })
+              this.preStatus = 3
+              this.tipType = 'success'
+              this.showTip()
+            } else {
+              this.$set(rightList[index], 'status', 2)
+              this.$set(rightList[index], 'score', score)
+              this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index + 10])
+              this.preStatus = 2
+              this.tipType = 'warning'
+              this.showTip()
+            }
+          } else { // 产品没有录制失败的情况
+            // 录制失败
+            this.tipType = 'error'
+            this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index + 20])
+            this.showTip()
+          }
+          index++
+        } else {
+          index++
+        }
+      }
+      while (index < 10) {
+        if (leftList[index - 5].status == 0) {
+          // 进入录制状态
+          this.$set(leftList[index - 5], 'status', 1)
+          this.$set(leftList[index - 5], 'isLackFinger', false)
+          this.$nextTick(() => {
+            console.log(this);
+            console.log(this.$refs);
+            this.fingerAnimate(this.$refs.fingerIcon)
+          })
+          this.cur = index + 1
+          this.tipTitle = this.fingerTips[index]
+          // 录制函数
+          // TODO
+          // 录制成功
+          let result = true
+          if (result) {
+            let score = 99
+            if (score > 90) {
+              this.$set(leftList[index - 5], 'status', 3)
+              this.$set(leftList[index - 5], 'score', score)
+              this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index])
+              if(this.$refs.fingerIcon) this.$refs.fingerIcon.style.color = '#17D010'
+              this.$nextTick(() => {
+                this.$refs.fingerIcon.style.color = '#17D010'
+              })
+              this.preStatus = 3
+              this.tipType = 'success'
+              this.showTip()
+            } else {
+              this.$set(leftList[index - 5], 'status', 2)
+              this.$set(leftList[index - 5], 'score', score)
+              this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index + 10])
+              this.preStatus = 2
+              this.tipType = 'warning'
+              this.showTip()
+            }
+          } else { // 产品没有录制失败的情况
+            // 录制失败
+            this.tipType = 'error'
+            this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index + 20])
+            this.showTip()
+          }
+          index++
+        } else {
+          index++
+        }
+      }
+    },
+    /**
+     * @name: 播放视频
+     * @param {*}
+     * @return {*}
+     */
+    playFn () {
+      // console.log([this.$refs.video]);
+      if (this.$refs.video.paused) {
+        this.isPlay = true
+        this.$refs.video.play()
+      } else {
+        this.isPlay = false
+        this.$refs.video.pause()
+      }
+    },
+    /**
+     * @name: 双击开始自动采集
+     * @param {Object} finger
+     * @param {Number} index
+     * @return {*}
+     */
+    changeSelect (finger, index) {
+      clearTimeout(time);  // 清除定时器
+      console.log(index);
+      this.stop = false
+      if (finger.status == 0) {
+        this.AutoLu(this.fingersLeft, this.fingersRight, index)
+      } else {
+        let type = ''
+        console.log('录制单个');
+        if (index >= 5) {
+          type = 'left'
+        } else {
+          type = 'right'
+        }
+        this.oddFinger(type, index)
+      }
+    },
+    /**
+     * @name: 展示指纹提示
+     * @param {*}
+     * @return {*}
+     */
+    showTip () {
+      setTimeout(() => {
+        this.tipType = 'none'
+      }, 2000);
+    },
+    /**
+     * @name: 预览指纹
+     * @param {Object} finger
+     * @param {Number} index
+     * @return {*}
+     */
+    lookFinger (finger, index) {
+      clearTimeout(time);  //首先清除计时器
+      this.stop = true
+      time = setTimeout(() => {
+        if (this.preIndex != null && this.preStatus != null) {
+          if (this.preIndex >= 5) {
+            console.log(5555);
+            this.$set(this.fingersLeft[this.preIndex - 5], 'status', this.preStatus)
+            // this.fingersLeft[this.preIndex - 5].status = this.preStatus
+          } else {
+            console.log(6666);
+            this.$set(this.fingersRight[this.preIndex], 'status', this.preStatus)
+            console.log(this.fingersRight[this.preIndex]);
+            // this.fingersRight[this.preIndex].status = this.preStatus
+          }
+        }
+        this.preIndex = index
+        this.preStatus = finger.status
+        // 调用api获取finger图像  finger.code
+        let result = '123.jpg'
+        this.fingerImg = result
+        if (index < 5) {
+          console.log(11111);
+          this.$set(this.fingersRight[index], 'status', 9)
+          this.checked = finger.isLackFinger
+          this.cur = index + 1
+          this.tipTitle = this.fingerTips[index]
+        } else {
+          console.log(22222);
+          this.$set(this.fingersLeft[index - 5], 'status', 9)
+          this.checked = finger.isLackFinger
+          this.cur = index + 1
+          this.tipTitle = this.fingerTips[index]
+        }
+      }, 300)
+    },
+    /**
+     * @name: 设置缺指
+     * @param {*}
+     * @return {*}
+     */
+    setLackFinger () {
+      // console.log('缺指');
+      console.log(this.checked);
+      let index = this.preIndex
+      // 选中的是右手
+      if (index < 5) {
+        if (this.checked) {
+          this.$set(this.fingersRight[index], 'status', 4)
+          this.$set(this.fingersRight[index], 'isLackFinger', true)
+          this.$refs.rightFinger.children[index].setAttribute('src', this.fingerArr[index + 20])
+          this.preStatus = 4
+        } else {
+          this.$set(this.fingersRight[index], 'isLackFinger', false)
+          this.$set(this.fingersRight[index], 'status', 0)
+          this.fingerImg = ''
+          // 继续当前位自动录制
+          this.stop = false
+          this.AutoLu(this.fingersLeft, this.fingersRight, index)
+        }
+      } else {
+        // 选中的是左手
+        if (this.checked) {
+          this.$set(this.fingersLeft[index - 5], 'status', 4)
+          this.$set(this.fingersLeft[index - 5], 'isLackFinger', true)
+          this.$refs.leftFinger.children[index - 5].setAttribute('src', this.fingerArr[index + 20])
+          this.preStatus = 4
+        } else {
+          this.$set(this.fingersLeft[index - 5], 'isLackFinger', false)
+          this.$set(this.fingersLeft[index - 5], 'status', 0)
+          this.fingerImg = ''
+          // 继续当前位自动录制
+          this.stop = false
+          this.AutoLu(this.fingersLeft, this.fingersRight, index)
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "./fingerprint.scss"
+</style>
\ No newline at end of file