diff --git a/package-lock.json b/package-lock.json
index 1f884157..3b3629a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "element-ui": "^2.15.9",
         "less": "^4.1.3",
         "less-loader": "^11.1.3",
+        "qrcode": "^1.5.4",
         "qs": "^6.11.2",
         "sass": "^1.65.1",
         "sass-loader": "^13.3.2",
@@ -3350,7 +3351,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4801,6 +4801,15 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -5020,6 +5029,12 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5210,8 +5225,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -6215,7 +6229,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -6370,7 +6383,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -6992,7 +7004,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7408,7 +7419,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -8445,7 +8455,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -8460,7 +8469,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -8485,7 +8493,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -8582,7 +8589,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8663,6 +8669,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -9394,6 +9409,131 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -9643,7 +9783,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9657,6 +9796,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -10033,6 +10178,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10324,7 +10475,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -10338,7 +10488,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11702,6 +11851,12 @@
         "which": "bin/which"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/wildcard": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
@@ -14418,8 +14573,7 @@
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -15473,6 +15627,11 @@
         }
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
     "decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -15627,6 +15786,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -15783,8 +15947,7 @@
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -16545,7 +16708,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "requires": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -16650,8 +16812,7 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
     "get-intrinsic": {
       "version": "1.2.1",
@@ -17088,8 +17249,7 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
     "is-glob": {
       "version": "4.0.3",
@@ -17399,7 +17559,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "requires": {
         "p-locate": "^4.1.0"
       }
@@ -18184,7 +18343,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -18193,7 +18351,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "requires": {
         "p-limit": "^2.2.0"
       }
@@ -18211,8 +18368,7 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
     "param-case": {
       "version": "3.0.4",
@@ -18292,8 +18448,7 @@
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -18350,6 +18505,11 @@
         "find-up": "^4.0.0"
       }
     },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
     "portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -18835,6 +18995,96 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
     },
+    "qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
@@ -19021,8 +19271,7 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
     },
     "require-from-string": {
       "version": "2.0.2",
@@ -19030,6 +19279,11 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -19293,6 +19547,11 @@
         "send": "0.18.0"
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -19534,7 +19793,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -19545,7 +19803,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "requires": {
         "ansi-regex": "^5.0.1"
       }
@@ -20524,6 +20781,11 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
     "wildcard": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
diff --git a/package.json b/package.json
index fe5da75a..891d8c7f 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "element-ui": "^2.15.9",
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
+    "qrcode": "^1.5.4",
     "qs": "^6.11.2",
     "sass": "^1.65.1",
     "sass-loader": "^13.3.2",
diff --git a/src/assets/supplier/companyPhoto.png b/src/assets/supplier/companyPhoto.png
new file mode 100644
index 00000000..7d93bfc5
Binary files /dev/null and b/src/assets/supplier/companyPhoto.png differ
diff --git a/src/assets/supplier/failIcon.png b/src/assets/supplier/failIcon.png
new file mode 100644
index 00000000..23624f42
Binary files /dev/null and b/src/assets/supplier/failIcon.png differ
diff --git a/src/assets/supplier/idCardBack.png b/src/assets/supplier/idCardBack.png
new file mode 100644
index 00000000..7b81dc06
Binary files /dev/null and b/src/assets/supplier/idCardBack.png differ
diff --git a/src/assets/supplier/idCardPerson.png b/src/assets/supplier/idCardPerson.png
new file mode 100644
index 00000000..2648cc14
Binary files /dev/null and b/src/assets/supplier/idCardPerson.png differ
diff --git a/src/assets/supplier/successIcon.png b/src/assets/supplier/successIcon.png
new file mode 100644
index 00000000..0c71c043
Binary files /dev/null and b/src/assets/supplier/successIcon.png differ
diff --git a/src/assets/supplier/title1.png b/src/assets/supplier/title1.png
new file mode 100644
index 00000000..4cc4dded
Binary files /dev/null and b/src/assets/supplier/title1.png differ
diff --git a/src/assets/supplier/title2.png b/src/assets/supplier/title2.png
new file mode 100644
index 00000000..92d0af6d
Binary files /dev/null and b/src/assets/supplier/title2.png differ
diff --git a/src/assets/supplier/topBg.png b/src/assets/supplier/topBg.png
new file mode 100644
index 00000000..0388953a
Binary files /dev/null and b/src/assets/supplier/topBg.png differ
diff --git a/src/assets/supplier/waitIcon.png b/src/assets/supplier/waitIcon.png
new file mode 100644
index 00000000..ab61b634
Binary files /dev/null and b/src/assets/supplier/waitIcon.png differ
diff --git a/src/assets/supplier/weiCodeBg.png b/src/assets/supplier/weiCodeBg.png
new file mode 100644
index 00000000..508bfefc
Binary files /dev/null and b/src/assets/supplier/weiCodeBg.png differ
diff --git a/src/router/index.js b/src/router/index.js
index e784b599..ff3b734c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,22 @@ const routes = [
       path: '/',
       redirect: '/index'
     },
+    {
+        path: '/supplierAdd',
+        name: 'supplierAdd',
+        component: () => import('@/views/index/supplierAdd'),
+        meta:{
+            title: '信息录入',
+        }
+    },
+    {
+        path: '/supplierInfo',
+        name: 'supplierInfo',
+        component: () => import('@/views/index/supplierInfo'),
+        meta:{
+            title: '信息查看',
+        }
+    },
     {
       path: '/toDoList',
       name: 'toDoList',
diff --git a/src/views/index/supplierAdd.vue b/src/views/index/supplierAdd.vue
new file mode 100644
index 00000000..bec0098d
--- /dev/null
+++ b/src/views/index/supplierAdd.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="wrap">
+    <div class="top_banner">
+      <img src="@/assets/supplier/topBg.png" alt="">
+    </div>
+    <div class="content_wrap">
+      <div class="credentials_info">
+        <img class="title1" src="@/assets/supplier/title1.png" alt="">
+        <div class="credentials_wrap">
+          <div class="credentials_item">
+            <div class="credentials_title">1. 法人身份证正面</div>
+            <van-uploader
+              accept="image/*"
+              v-model="idFrontPhotoList"
+              :after-read="idFrontPhotoHandler"
+              :max-size="5 * 1024 * 1024"
+              max-count="1">
+              <div class="custom-background">
+                <img src="@/assets/supplier/idCardPerson.png" alt="">
+              </div>
+            </van-uploader>
+          </div>
+          <div class="credentials_item ml2">
+            <div class="credentials_title">2. 法人身份证反面</div>
+            <van-uploader
+              accept="image/*"
+              v-model="idBackPhotoList"
+              :after-read="idBackPhotoHandler"
+              :max-size="5 * 1024 * 1024"
+              max-count="1">
+              <div class="custom-background">
+                <img src="@/assets/supplier/idCardBack.png" alt="">
+              </div>
+            </van-uploader>
+          </div>
+          <div class="credentials_item ml2">
+            <div class="credentials_title">3. 营业执照</div>
+            <van-uploader
+              accept="image/*"
+              v-model="companyPhotoList"
+              :after-read="companyPhotoHandler"
+              :max-size="5 * 1024 * 1024"
+              max-count="1">
+              <div class="custom-background">
+                <img src="@/assets/supplier/companyPhoto.png" alt="">
+              </div>
+            </van-uploader>
+          </div>
+        </div>
+      </div>
+      <div class="company_info">
+        <img class="title2" src="@/assets/supplier/title2.png" alt="">
+        <div class="company_wrap">
+          <van-form>
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务商名称" placeholder="请输入"  :rules="[{ required: true, message: '请输入服务商名称' }]" />
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="法人名称" placeholder="请输入"  :rules="[{ required: true, message: '请输入法人名称' }]" />
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="联系人姓名" placeholder="请输入"  :rules="[{ required: true, message: '请输入联系人姓名' }]" />
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="联系电话" placeholder="请输入"  :rules="[{ required: true, message: '请输入联系电话' }]" />
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力" placeholder="请输入"  :rules="[{ required: true, message: '请选择服务能力' }]" />
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="服务能力"  :rules="[{ required: true, message: '请选择服务能力' }]">
+              <template #input>
+                <el-tree
+                  show-checkbox
+                  node-key="id"
+                  ref="tree"
+                  :highlight-current="true"
+                  :expand-on-click-node="false"
+                  :data="supplierServiceList"
+                  :props="defaultProps">
+                </el-tree>
+              </template>
+            </van-field>
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="拖车数量" placeholder="请输入"  :rules="[{ required: true, message: '请输入拖车数量' }]" />
+            <van-field :border="true" v-model="form.supplierName" class="required" name="supplierName" label="抢修车数量" placeholder="请输入"  :rules="[{ required: true, message: '请输入抢修车数量' }]" />
+            <van-field name="supplierName" class="required" label="服务区域" placeholder="请选择"  :rules="[{ required: true, message: '请选择服务区域' }]">
+              <template #input>
+                <span @click="areaShow = true">省/市/区</span>
+              </template>
+            </van-field>
+          </van-form>
+          <div class="wei_code_wrap">
+            <div class="wei_title">请先添加企业微信，保证申请流程正常进行。</div>
+            <div class="wei_code_bg">
+              <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="企业微信二维码" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn_wrap">
+      <div class="btn">
+        提交申请
+      </div>
+    </div>
+    <van-popup
+      v-model="areaShow"
+      position="bottom"
+    >
+      <van-area title="服务区域" :area-list="areaList" :columns-num="3"  closeable="true" :value="form.areaCode ? String(form.areaCode) : ''"
+                @cancel="areaShow = false" @confirm="confirmHandle"/>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import QRCode from 'qrcode'
+  import { uploadImage, supplierServiceTree } from "@/api/mine"
+  import {myMixins} from "@/utils/myMixins"
+  import {areaList} from "@vant/area-data";
+  export default {
+    name: "supplierAdd",
+    mixins:[myMixins],
+    data() {
+      return {
+        id:'', //车辆Id
+        idBackPhotoList: [],
+        idBackPhoto: '',
+        idFrontPhotoList: [],
+        idFrontPhoto: '',
+        companyPhotoList: [],
+        companyPhoto: '',
+        form: {
+          supplierName: '',
+        },
+        qrCodeUrl: '',
+        areaShow: false,
+        areaList: areaList,
+        region: [],
+        supplierServiceList: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
+      }
+    },
+    mounted() {
+      this.getQrCode();
+      this.getSupplierServiceTree();
+    },
+    methods: {
+      async getSupplierServiceTree(){
+        let res = await supplierServiceTree();
+        this.supplierServiceList=res.data
+      },
+      confirmHandle(val){
+        this.region=[]
+        val?.forEach(item => this.region.push(item.name))
+        let code=[]
+        val?.forEach(item => code.push(item.code))
+        this.form.areaCode=code[code.length - 1]
+        this.areaShow=false
+      },
+      async getQrCode() {
+        try {
+          this.qrCodeUrl = await QRCode.toDataURL('123123', {
+            width: 150,
+            margin: 2,
+            color: {
+              dark: '#000000',
+              light: '#FFFFFF'
+            },
+          })
+        } catch (error) {
+          console.error('生成二维码失败:', error)
+        }
+      },
+      async idBackPhotoHandler(file) {
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.idBackPhoto = res.data
+      },
+      async idFrontPhotoHandler(file) {
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.idFrontPhoto = res.data
+      },
+      async companyPhotoHandler(file) {
+        const formData = new FormData();
+        formData.append("file" , file.file);
+        let res = await uploadImage(formData);
+        this.companyPhoto = res.data
+      }
+    },
+    computed: {
+      regionText() {
+        return this.region.length ? `${this.region[0]}/${this.region[1]}/${this.region[2]}` : '请选择所在地区';
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/mixin.scss";
+  @import "@/styles/common.scss";
+  .wrap{
+    @include wh(100%,100%);
+    box-sizing: border-box;
+    padding-bottom: 100px;
+    overflow-y: auto;
+  }
+.top_banner {
+  width: 100%;
+  img {
+    width: 100%;
+    height: 169px;
+  }
+}
+.content_wrap {
+  padding: 0 20px;
+}
+.credentials_info {
+  height: 170px;
+}
+.credentials_wrap {
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  .credentials_item {
+    width: 32%;
+    text-align: center;
+    .credentials_title {
+      font-size: 12px;
+      color: #4A4A4A;
+      padding: 10px 0;
+    }
+    .custom-background img {
+      width: 97px;
+      height: 64px;
+    }
+  }
+  .ml2 {
+    margin-left: 2%;
+  }
+}
+::v-deep .van-uploader__preview-image {
+  width: 97px;
+  height: 64px;
+}
+.title1 {
+  width: 106px;
+  height: 19px;
+  margin-top: 25px;
+}
+.title2 {
+  width: 90px;
+  height: 18px;
+  margin-top: 25px;
+  margin-bottom: 10px;
+}
+.van-cell.required::before{
+  content: "＊";
+  position: absolute;
+  color: #F00;
+  left: 0px;
+  top: .25rem;
+  font-size: .3rem;
+}
+  .wei_code_wrap {
+    .wei_title {
+      font-size: 15px;
+      color: #FF553B;
+      text-align: center;
+    }
+    .wei_code_bg {
+      width: 163px;
+      height: 173px;
+      background-image: url("~@/assets/supplier/weiCodeBg.png");
+      background-size: 100% 100%;
+      margin: 8px auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .btn_wrap {
+    width: 100%;
+    padding: 15px 0;
+    position: fixed;
+    bottom: 0;
+    background: #F7F7F9;
+    box-shadow: 0px -7px 24px 0px rgba(0, 0, 0, 0.11);
+    z-index: 10000 !important;
+    .btn {
+      width: calc(100% - 80px);
+      margin-left: 40px;
+      height: 46px;
+      background: #0E76F4;
+      border-radius: 5px;
+      font-size: 15px;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 46px;
+    }
+  }
+
+</style>
diff --git a/src/views/index/supplierInfo.vue b/src/views/index/supplierInfo.vue
new file mode 100644
index 00000000..825dc51f
--- /dev/null
+++ b/src/views/index/supplierInfo.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div class="nav_bar_bg status_danger">
+      <template v-if="false">
+        <div class="status_wrap">
+          <img class="wait_icon" src="@/assets/supplier/waitIcon.png" alt="">
+          <span class="wait_status">审批中</span>
+        </div>
+      </template>
+      <template v-if="false">
+        <div class="status_wrap">
+          <img class="wait_icon" src="@/assets/supplier/successIcon.png" alt="">
+          <span class="wait_status success_status">恭喜你，审核通过！</span>
+        </div>
+      </template>
+      <template>
+        <div class="status_wrap">
+          <img class="wait_icon" src="@/assets/supplier/failIcon.png" alt="">
+          <span class="wait_status danger_status">审核不通过</span>
+        </div>
+        <div class="danger_tip">
+          不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道不知道是多是少，就按照这样给字号了不知道
+        </div>
+      </template>
+    </div>
+    <div class="supplier_content">
+      <div class="credentials_info">
+        <div class="common_title">证件照信息</div>
+        <div class="credentials_wrap">
+          <div class="credentials_item">
+            <div class="credentials_title">1. 法人身份证正面</div>
+            <img src="@/assets/supplier/idCardPerson.png" alt="">
+          </div>
+          <div class="credentials_item ml2">
+            <div class="credentials_title">2. 法人身份证反面</div>
+            <img src="@/assets/supplier/idCardPerson.png" alt="">
+          </div>
+          <div class="credentials_item ml2">
+            <div class="credentials_title">3. 营业执照</div>
+            <img src="@/assets/supplier/idCardPerson.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="company_info">
+        <div class="common_title">公司信息</div>
+        <div class="info_wrap">
+          <div class="info_item">
+            <div class="label">服务商名称：</div>
+            <div class="content">苏州速道汽车服务有限公司</div>
+          </div>
+          <div class="info_item">
+            <div class="label">法人姓名：</div>
+            <div class="content">666</div>
+          </div>
+          <div class="info_item">
+            <div class="label">联系人姓名：</div>
+            <div class="content">666</div>
+          </div>
+          <div class="info_item">
+            <div class="label">联系电话：</div>
+            <div class="content">666</div>
+          </div>
+          <div class="info_item">
+            <div class="label">服务能力：</div>
+            <div class="content service_color">拖车服务、抢修服务</div>
+          </div>
+          <div class="info_item">
+            <div class="label">拖车数量：</div>
+            <div class="content">23</div>
+          </div>
+          <div class="info_item">
+            <div class="label">抢修车数量：</div>
+            <div class="content">12</div>
+          </div>
+          <div class="info_item">
+            <div class="label">服务区域：</div>
+            <div class="content">省/市/区</div>
+          </div>
+        </div>
+      </div>
+      <div class="btn_wrap">
+        修改信息
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {myMixins} from "@/utils/myMixins"
+  export default {
+    name: "supplierInfo",
+    mixins:[myMixins],
+    data() {
+      return {
+        id:'', //车辆Id
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .nav_bar_bg {
+    width: 100%;
+    height: 125px;
+    padding-top: 50px;
+  }
+  .status_wait {
+    background: linear-gradient( 180deg, #FFE4C9 0%, rgba(255,248,233,0) 100%);
+  }
+  .status_success {
+    background: linear-gradient( 180deg, #DAFFF8 0%, rgba(237,255,233,0) 100%);
+  }
+  .status_danger {
+    background: linear-gradient( 180deg, #FFE8DA 0%, rgba(255,233,233,0) 100%);
+  }
+  .status_wrap {
+    display: flex;
+    align-items: center;
+    .wait_icon {
+      width: 34px;
+      height: 34px;
+      margin-left: 31px;
+    }
+    .wait_status {
+      color: #E69B0B;
+      font-weight: 600;
+      font-size: 16px;
+      margin-left: 11px;
+    }
+    .success_status {
+      color: #37B864;
+    }
+    .danger_status {
+      color: #ED440C;
+    }
+  }
+  .danger_tip {
+    font-size: 12px;
+    color: #FF553B;
+    line-height: 18px;
+    padding-left: 38px;
+    padding-right: 23px;
+    margin-top: 5px;
+  }
+  .supplier_content {
+    padding: 0 24px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .common_title {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(50, 54, 67, 0.66);
+    padding-left: 2px;
+  }
+  .common_title::after {
+    content: '';
+    display: block;
+    width: 100%;
+    border: 1px solid;
+    margin-top: 10px;
+    opacity: 0.16;
+    border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
+  }
+  .credentials_wrap {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    .credentials_item {
+      width: 32%;
+      text-align: center;
+      .credentials_title {
+        font-size: 12px;
+        color: #4A4A4A;
+        padding: 10px 0;
+      }
+      img {
+        width: 97px;
+        height: 64px;
+      }
+    }
+    .ml2 {
+      margin-left: 2%;
+    }
+  }
+  .company_info {
+    margin-top: 20px;
+    .company_wrap {
+      .info_wrap {
+        margin-top: 10px;
+        .info_item {
+          display: flex;
+          padding: 10px 2px;
+          .label {
+            font-size: 13px;
+            color: rgba(50, 54, 67, 0.6);
+            width: 90px;
+            flex-shrink: 0;
+          }
+          .content {
+            font-size: 13px;
+            color: #323643;
+            /*font-weight: bold;*/
+            flex: 1;
+          }
+          .service_color {
+            color: rgba(230, 155, 11, 0.9);
+          }
+        }
+      }
+    }
+  }
+  .btn_wrap {
+    width: calc(100% - 80px);
+    height: 46px;
+    position: fixed;
+    bottom: 20px;
+    left: 40px;
+    background: #0E76F4;
+    border-radius: 5px;
+    font-size: 15px;
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 46px;
+  }
+</style>