企业认证，个人认证完成

.babelrc

@@ -1,18 +1,12 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
       }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
-  "env": {
-    "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
-    }
-  }
-}
+    ]
+  ]
+}

package-lock.json

@@ -60,6 +60,35 @@
         "@babel/types": "7.0.0-beta.42"
       }
     },
+    "@babel/helper-module-imports": {
+      "version": "7.0.0-beta.35",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+      "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.0.0-beta.35",
+        "lodash": "4.17.5"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.35.tgz",
+          "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+          "dev": true,
+          "requires": {
+            "esutils": "2.0.2",
+            "lodash": "4.17.5",
+            "to-fast-properties": "2.0.0"
+          }
+        },
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+          "dev": true
+        }
+      }
+    },
     "@babel/helper-split-export-declaration": {
       "version": "7.0.0-beta.42",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.42.tgz",
@@ -335,7 +364,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "1.9.1"
       }
@@ -524,6 +552,14 @@
       "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.2.tgz",
+      "integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -847,8 +883,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
-      "dev": true
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
     },
     "babel-helpers": {
       "version": "6.24.1",
@@ -899,6 +934,15 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-component/-/babel-plugin-component-1.1.0.tgz",
+      "integrity": "sha512-NIc3eLr96/5cG6UOJgkLCzQIJxEWX5knQOfKRTkTIPceXHpEvU3exccYlf8D0GxB5Dw4HYym3vjX0rhiTAZ+KQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.2.0.tgz",
@@ -1379,6 +1423,38 @@
         "semver": "5.5.0"
       }
     },
+    "babel-preset-es2015": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
+      "integrity": "sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-check-es2015-constants": "6.22.0",
+        "babel-plugin-transform-es2015-arrow-functions": "6.22.0",
+        "babel-plugin-transform-es2015-block-scoped-functions": "6.22.0",
+        "babel-plugin-transform-es2015-block-scoping": "6.26.0",
+        "babel-plugin-transform-es2015-classes": "6.24.1",
+        "babel-plugin-transform-es2015-computed-properties": "6.24.1",
+        "babel-plugin-transform-es2015-destructuring": "6.23.0",
+        "babel-plugin-transform-es2015-duplicate-keys": "6.24.1",
+        "babel-plugin-transform-es2015-for-of": "6.23.0",
+        "babel-plugin-transform-es2015-function-name": "6.24.1",
+        "babel-plugin-transform-es2015-literals": "6.22.0",
+        "babel-plugin-transform-es2015-modules-amd": "6.24.1",
+        "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
+        "babel-plugin-transform-es2015-modules-systemjs": "6.24.1",
+        "babel-plugin-transform-es2015-modules-umd": "6.24.1",
+        "babel-plugin-transform-es2015-object-super": "6.24.1",
+        "babel-plugin-transform-es2015-parameters": "6.24.1",
+        "babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
+        "babel-plugin-transform-es2015-spread": "6.22.0",
+        "babel-plugin-transform-es2015-sticky-regex": "6.24.1",
+        "babel-plugin-transform-es2015-template-literals": "6.22.0",
+        "babel-plugin-transform-es2015-typeof-symbol": "6.23.0",
+        "babel-plugin-transform-es2015-unicode-regex": "6.24.1",
+        "babel-plugin-transform-regenerator": "6.26.0"
+      }
+    },
     "babel-preset-jest": {
       "version": "21.2.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-21.2.0.tgz",
@@ -1461,7 +1537,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "2.5.4",
         "regenerator-runtime": "0.11.1"
@@ -2033,7 +2108,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
       "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "3.2.1",
         "escape-string-regexp": "1.0.5",
@@ -2373,7 +2447,6 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
       "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -2381,8 +2454,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "0.3.0",
@@ -2658,8 +2730,7 @@
     "core-js": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.4.tgz",
-      "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA=",
-      "dev": true
+      "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3178,6 +3249,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+    },
     "default-require-extensions": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
@@ -3534,6 +3610,18 @@
       "integrity": "sha1-fjNkPgDNhe39F+BBlPbQDnNzcjU=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.3.3.tgz",
+      "integrity": "sha512-0Xa0GlwR57+6XBQlHkzutgIgiupAM2O9XNI7y6A1vdDhKmvZM8IBSqrqb9gQ5+onKuQ5afh69vkX2eeumFF5rA==",
+      "requires": {
+        "async-validator": "1.8.2",
+        "babel-helper-vue-jsx-merge-props": "2.0.3",
+        "deepmerge": "1.5.2",
+        "normalize-wheel": "1.0.1",
+        "throttle-debounce": "1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
@@ -3725,8 +3813,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.9.1",
@@ -6189,8 +6276,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-value": {
       "version": "1.0.0",
@@ -9289,6 +9375,11 @@
         "sort-keys": "1.1.2"
       }
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9837,8 +9928,7 @@
     "path-parse": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
-      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
-      "dev": true
+      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -9885,8 +9975,7 @@
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -10719,6 +10808,29 @@
         }
       }
     },
+    "postcss-import": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
+      "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
+      "requires": {
+        "postcss": "6.0.21",
+        "postcss-value-parser": "3.3.0",
+        "read-cache": "1.0.0",
+        "resolve": "1.6.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.21",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz",
+          "integrity": "sha512-y/bKfbQz2Nn/QBC08bwvYUxEFOVGfPIUOTsJ2CK5inzlXW9SdYR1x4pEsG9blRAF/PX+wRNdOah+gx/hv4q7dw==",
+          "requires": {
+            "chalk": "2.3.2",
+            "source-map": "0.6.1",
+            "supports-color": "5.3.0"
+          }
+        }
+      }
+    },
     "postcss-js": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-0.2.0.tgz",
@@ -12166,8 +12278,7 @@
     "postcss-value-parser": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
     },
     "postcss-zindex": {
       "version": "2.2.0",
@@ -12536,6 +12647,14 @@
         "unpipe": "1.0.0"
       }
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "requires": {
+        "pify": "2.3.0"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -12678,8 +12797,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -12893,7 +13011,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",
       "integrity": "sha512-mw7JQNu5ExIkcw4LPih0owX/TZXjD/ZUF/ZQ/pDnkw3ZKhDcZZw5klmBlj6gVMwjQ3Pz5Jgu7F3d0jcDVuEWdw==",
-      "dev": true,
       "requires": {
         "path-parse": "1.0.5"
       }
@@ -13513,8 +13630,7 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-resolve": {
       "version": "0.5.1",
@@ -13903,7 +14019,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
       "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
-      "dev": true,
       "requires": {
         "has-flag": "3.0.0"
       }
@@ -13980,6 +14095,11 @@
       "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.0.1.tgz",
+      "integrity": "sha1-2tD+Ew+drzcZ/eoz3Dao5rp/MLU="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -14,6 +14,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "element-ui": "^2.3.3",
+    "postcss-import": "^11.1.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },
@@ -24,12 +26,14 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^21.0.2",
     "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^1.1.0",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",

src/components/keyboard.vue

@@ -0,0 +1,150 @@
+<template>
+	<div>
+	<ul class="keyboard">
+		<li v-for="key in keyList" track-by="$index" :class="{
+		delete: key === 'Delete', 
+		tab: key === 'Tab', 
+		capslock: key === 'Caps', 
+		enter: key === 'Enter', 
+		shift: key === 'Shift', 
+		space: key === 'Space',
+		shifted: (key === 'Shift') && hasShifted,
+		capsed: (key === 'Caps') && hasCapsed }"
+		v-text="key" @click="clickKey(key)"></li>
+	</ul>
+</div>
+</template>
+<script>
+	export default {		
+		data() {
+			return {
+				keyList: [],
+				normalKeyList: [],
+				shiftedKeyList: [],
+				capsedKeyList: [],
+				hasShifted: false,
+				hasCapsed: false,
+				keyboardtext: this.keyboardText
+			}
+		},
+		props: ['keyboardText'],
+		watch: {
+        keyboardText(val) {
+            this.keyboardtext = val;//新增result的watch，监听变更并同步到myResult上
+        },
+        keyboardtext(val){
+            //xxcanghai 小小沧海 博客园
+            this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
+        }
+    },
+		methods: {
+			clickKey(key) {
+				switch(key) {
+					case "Delete":
+						let kbt = this.keyboardText;
+						this.keyboardText = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt;
+						break;
+					case "Tab":
+						this.keyboardText += "\t";
+						break;
+					case "Enter":
+						this.keyboardText += "\n";
+						break;
+					case "Space":
+						this.keyboardText += " ";
+						break;
+					case "Caps":
+						this.hasCapsed = !this.hasCapsed;
+						this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList;
+						break;
+					case "Shift":
+						this.hasShifted = !this.hasShifted;
+						this.keyList = this.hasShifted ? this.shiftedKeyList : this.normalKeyList;
+						break;
+					default:
+						this.keyboardText += key.toString();
+						break;
+				}
+			}
+		},
+		mounted() {
+			let normalKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
+						'Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\',
+						'Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'", 'Enter',
+						'Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift', 
+						'Space'], 
+				shiftedKeyList = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', 'Delete',
+						'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|',
+						'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '"', 'Enter',
+						'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', 'Shift', 
+						'Space'],
+				capsedKeyList = ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Delete',
+						'Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\',
+						'Caps', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', "'", 'Enter',
+						'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'Shift', 
+						'Space'];
+			this.keyList = this.normalKeyList = normalKeyList;
+			this.shiftedKeyList = shiftedKeyList;
+			this.capsedKeyList = capsedKeyList;
+		}
+	}
+</script>
+<style scoped>
+.keyboard {
+	width: 688px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	user-select: none;
+	li {
+		float: left;
+		margin: 0 5px 5px 0;
+		width: 40px;
+		height: 40px;
+		line-height: 40px;
+		text-align: center;
+		background: #fff;
+		border: 1px solid #e5e5e5;
+		border-radius: 5px;
+		&:hover {
+			position: relative;
+			border-color: gray;
+			cursor: pointer;
+		}
+		&:active {
+			top: 1px;
+			left: 1px;
+		}
+	}
+	.tab, .delete {
+		width: 70px;
+	}
+	.capslock {
+		width: 80px;
+	}
+	.enter {
+		width: 77px;
+	}
+	.shift {
+		width: 102px;
+	}
+	.space {
+		clear: left;
+		width: 681px;
+	}
+	.shifted {
+		position: relative;
+		top: 1px;
+		left: 1px;
+		border-color: #e5e5e5;
+		cursor: pointer;
+	}
+	.capsed {
+		position: relative;
+		top: 1px;
+		left: 1px;
+		border-color: #e5e5e5;
+		cursor: pointer;
+	}
+}
+</style>

src/main.js

@@ -1,6 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+import { Form,Input,FormItem } from 'element-ui';
 import App from './App';
 import router from './router';
 import './assets/css/base.css';
@@ -9,11 +10,14 @@ import VueRouter from 'vue-router';
 // import 'element-ui/lib/theme-chalk/index.css';
 // import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
 
-Vue.config.productionTip = false
-
+Vue.config.productionTip = false;
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Input);
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+   render: h => h(App),
   router,
   components: { App },
   template: '<App/>'

src/router/index.js

@@ -11,6 +11,7 @@ import Enterinfor from '../views/enterinfor.vue'
 import Legalinfor from '../views/legalinfor.vue'
 import Authorinfor from '../views/authorinfor.vue'
 import Certified   from '../views/certified.vue'
+import Keyboth  from  '../views/keyboth.vue'
 
 Vue.use(Router)
 
@@ -40,6 +41,10 @@ export default new Router({
         path:'/self',
         component: Self,
     },
+    {
+        path:'/keyboth',
+        component: Keyboth,
+    },
     {
         path:'/enterprise',
         component: Enterprise,

src/views/authorinfor.vue

@@ -38,9 +38,6 @@
           PicTure 
 		},
 	}
-
-
-	
 </script>
 <style scoped>
 	.en-infor{

src/views/contant.vue

@@ -17,7 +17,7 @@
 						<p class="onetitle">
 							<span>{{it.number}}</span>
 							<span v-if="it.state===0" class="red">待签署</span>
-							<span v-else-if="it.state===1" class="blue">已签署</span>
+							<span v-else-if="it.state===1" class="orange">已签署</span>
 							<span v-else class="gray">待修改</span>
 						</p>
 						<h4>{{it.name}}</h4>
@@ -146,11 +146,14 @@
 		.red{
 					color: #f1325f;
 				}
+				.orange{
+					color:#c88411;
+				}
 				.blue{
 					color: #1199c8;
 					}
 				.gray{
-					color:#1a5164;
+					color:#5da523;
 				}
 		.contant-both{
 			width: 100%;

src/views/enterprise.vue

@@ -9,7 +9,6 @@
 	export default{
 		data(){
 			return{
-
 			}
 		},
 		components:{

src/views/keyboth.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="keyboth">
+        <h1>Just Enter Text:</h1>
+        <textarea type="text" v-model="keyboardText" @on-result-change="onResultChange"></textarea>
+        <key-board :keyboard-text.sync="keyboardText"></key-board>
+    </div>
+</template>
+
+<script>
+import KeyBoard from '../components/Keyboard.vue'
+export default {
+    data() {
+        return {
+            keyboardText: ""
+        }
+    },
+    components: {
+        KeyBoard
+    },
+     methods: {
+        change() {
+            // this.result = !this.result;
+        },
+        onResultChange(val){
+            this.keyboardText=val;
+            console.log(val)//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
+        }
+    }
+}
+</script>
+<style  scoped>
+    .keyboth{
+        width: 680px;
+        margin: 20px auto;
+        font-family: Verdana, Sans-Serif; 
+        h1 {
+            color: #42b983;
+            font-weight: bold;
+        }
+        textarea {
+            display: block;
+            width: 100%;
+            min-height: 100px;
+            padding: 0;
+            margin: 20px 0;
+            font-size: 16px;
+        }
+    }
+</style>

src/views/myself.vue

@@ -35,12 +35,12 @@
 				{
 					src:require('../assets/img/drawable-mdpi/sign.png'),
 					font:'我的签名',
-					routes:'/self'
+					routes:'/sign'
 				},
 				{
 					src:require('../assets/img/drawable-mdpi/safe.png'),
 					font:'安全设置',
-					routes:'/self'
+					routes:'/safe'
 				},
 				],
 			}

src/views/self.vue

@@ -1,3 +1,346 @@
 <template>
-	<div>hello</div>
-</template>
+  <div class="self">
+    <div class="enter-both">
+      <div class="enter-title">
+        <h4>
+          <router-link to="/myself"><i class="iconfont icon-fanhui"></i></router-link>
+          <span>个人认证</span>
+        </h4>   
+      </div>
+      <div class="both">
+        <div class="content">
+          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">      
+          <div class="part" v-show="seen">
+           <el-form-item label="姓名" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="请输入真实姓名"></el-input>
+            </el-form-item>
+          </div>
+          <div class="part" v-show="seen">
+            <el-form-item label="身份证号" prop="IDcard">
+              <el-input v-model="ruleForm.IDcard" placeholder="请输入身份证号码"></el-input>
+            </el-form-item>
+          </div>
+          <div class="part" v-show="seen">
+            <el-form-item label="银行卡号" prop="bankcard">
+              <el-input v-model="ruleForm.bankcard" placeholder="请输入银行卡号码"></el-input>
+            </el-form-item>
+          </div>
+          <div class="part" v-show="seen">
+            <el-form-item label="手机号码" prop="phone">
+              <el-input v-model="ruleForm.phone" placeholder="请输入银行预留手机号码"></el-input>
+            </el-form-item>
+          </div>
+          <div class="validation" v-show="seen">
+             <el-form-item label="验证码" prop="number">
+              <el-input v-model="ruleForm.number" placeholder="请输入验证码"></el-input>
+            </el-form-item>
+            <span class="send">获取验证码</span>
+          </div>
+        </el-form>
+          <div class="success" v-show="!seen">
+              <div class="picture">
+                <div></div>
+              </div>
+              <p>{{ruleForm.name}}<br>{{phone}}</p>
+             </div>
+          </div>
+        </div>
+        <div class="button" v-show="seen" @click="submitForm('ruleForm')">提交</div>
+     </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default{
+    data(){
+      var checkname = (rule, value, callback) => {
+        let regular=/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/;
+        if (!value) {
+          return callback(new Error(' '));/*请输入姓名*/
+        }
+        setTimeout(() => {
+          if (!regular.test(value)) {
+            callback(new Error(' '));/*输入不正确*/
+          } else {
+            callback();
+          }
+        }, 1000);
+      };
+        var checkIDcard = (rule, value, callback) => {
+        let regular=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
+        if (!value) {
+          return callback(new Error(' '));/*请输入身份证号码*/
+        }
+        setTimeout(() => {
+          if (!regular.test(value)) {
+            callback(new Error(' '));/*输入不正确*/
+          } else {
+            callback();
+          }
+        }, 1000);
+      };
+        var checkbankcard = (rule, value, callback) => {
+        let regular=/([\d]{4})([\d]{4})([\d]{4})([\d]{4})([\d]{0,})?/;
+        if (!value) {
+          return callback(new Error(' '));/*请输入银行卡号*/
+        }
+        setTimeout(() => {
+          if (!regular.test(value)) {
+            callback(new Error(' '));/*输入不正确*/
+          } else {
+            callback();
+          }
+        }, 1000);
+      };
+        var checkphone = (rule, value, callback) => {
+        let regular=/^1[3|4|5|8][0-9]\d{4,8}$/;
+        if (!value) {
+          return callback(new Error(' '));/*请输入手机号码*/
+        }
+        setTimeout(() => {
+          if (!regular.test(value)) {
+            callback(new Error(' '));/*输入不正确*/
+          } else {
+            callback();
+          }
+        }, 1000);
+      };
+        var checknumber = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error(' '));/*请输入验证码*/
+        }
+        else{
+            callback();
+          }
+        };
+     
+      return{
+        objectT:{},
+        seen:true,
+        last:'',
+        name:'',
+        phone:'',
+        place:"1********",
+        regular:'',
+        cerfirst:'',
+        cersecond:'',
+        certhree:'',
+        cerfourth:'',
+         ruleForm: {
+          name: '',
+          IDcard:'',
+          bankcard:'',
+          phone:'',
+          number:'',
+        },
+        rules: {
+          name: [
+            { validator: checkname,  trigger: 'blur' },
+          ],
+          IDcard: [
+             { validator: checkIDcard,  trigger: 'blur' },
+          ],
+          bankcard: [
+            { validator: checkbankcard,  trigger: 'blur' },
+          ],
+          phone: [
+            { validator: checkphone,  trigger: 'blur' },
+          ],
+          number: [
+             { validator: checknumber,  trigger: 'blur' },
+          ],
+        }
+      }
+
+    },
+    methods:{
+      verify(){
+        this.seen=false;
+        this.center=document.getElementsByTagName("input")[3].value;
+        this.last=this.center.split("")[10];
+        this.phone=this.phone.concat(this.place,this.last);
+      },
+       submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.seen=false;
+            this.center=this.ruleForm.phone;
+            this.last=this.center.split("")[10];
+            this.phone=this.phone.concat(this.place,this.last);
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+    }   
+  }
+</script>
+
+<style>
+  .self{
+      .enter-both{
+          width: 100%;
+          .enter-title{
+            height: 3.041667rem;
+            background: #60c0ff;
+            width: 100%;
+            h4{
+              text-align: center;
+              color: #fff;
+              font-size: 0.472222rem;
+              padding: 0.541667rem 0;
+              position: relative;
+              .icon-fanhui{
+                float: left;
+                margin-left: 0.513889rem;
+                color: #fff !important;
+              }
+             span{
+                margin-left: -0.513889rem;
+              }
+            }   
+          }
+      .both{
+          width: 100%;
+          padding: 0 0.3rem;
+          .content{
+            float: left;
+            margin-top: -1.1111rem;
+            width: 100%;
+            background-color: #fff;
+            border-radius: 10px;
+            margin-bottom: 1.388889rem;
+            box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
+            padding: 0 0.291667rem;
+            .part{
+                width: 100%;
+                height: 1.311111rem;
+                line-height: 1.311111rem;
+                padding-left: 0.305556rem;
+                border-bottom: 1px solid #e8eff5;
+                .el-form-item.is-required .el-form-item__label::before{
+                  content:' ';
+                  margin: 0;
+                }
+                .el-form-item{
+                  margin: 0;
+                  clear: left;
+                  .el-form-item__label{
+                    color: #333;
+                    text-align: left;
+                    font-size: 0.388889rem;
+                    width: 2rem !important;
+
+                  }
+                  .el-form-item__content{
+                    height: 1.111111rem !important;
+                    margin-left:2.088889rem !important;
+                    .el-input__inner{
+                     margin-left: -0.5rem;
+                      height: 1.111111rem !important;
+                     border: 0;
+                  }
+                  } 
+                  
+                }
+            }
+            .part:nth-of-type(4){
+              border: 0;
+            }
+            .validation{
+              width: 100%;
+              padding-left: 0.305556rem;
+              margin-bottom: 1rem;
+               .el-form-item{
+                  margin: 0;
+                  clear: left;
+                  .el-form-item__label{
+                    color: #333;
+                    text-align: left;
+                    font-size: 0.388889rem;
+                    width: 2rem !important;
+
+                  }
+                  .el-form-item__content{
+                    height: 1.111111rem !important;
+                    margin-left:2.088889rem !important;
+                    .el-input__inner{
+                     margin-left: -0.5rem;
+                      height: 1.111111rem !important;
+                     border: 0;
+                     width: 60%;
+                  }
+                  .el-input__suffix{
+                    right: 2.5rem;
+                  }
+                  } 
+                  
+                }
+                .send{
+                  display: inline-block;
+                  padding: 0;
+                  margin: 0;
+                  width: 2.377778rem;
+                  height: 0.944444rem;
+                  line-height: 0.944444rem;
+                  text-align:center;
+                  font-size: 0.316667rem;
+                  border: 1px solid #60c0ff;
+                  border-radius: 34px;
+                  color: #60c0ff;
+                  float: right;
+                  margin-top: -1.15rem;
+                }
+            }
+            .success{
+              width: 100%;
+              height: 14.722222rem;
+              position: relative;
+              padding-top: 3.916667rem;
+              .picture{
+                width: 2.777778rem;
+                height: 2.777778rem;
+                border-radius: 50%;
+                background:url("../assets/img/drawable-mdpi/userimg.png");
+                background-size: cover;               
+                margin: 0 auto;           
+                text-align: center;   
+                div{
+                  width: 1.152778rem;
+                  height: 1.402778rem;
+                  border-radius: 24% 24% 24% 100%;
+                  background-image: url("../assets/img/drawable-mdpi/self.png");
+                  background-position: -1.35rem -1.35rem;
+                  background: cover;
+                  float: left;
+                  margin-left: 2rem;
+                  margin-top: 2rem;
+                }     
+              }
+              p{
+                clear: both;
+                font-size: 0.5rem;
+                line-height: 0.8rem;
+                color: #1491e2;
+                text-align: center;
+              }
+            }
+        }
+      }
+        .button{
+      clear: both;
+      width: 9.166667rem;
+      height: 1.111111rem;
+      margin-left: 0.4rem;
+      background-color: #60c0ff;
+      box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
+      border-radius: 40px;
+      line-height: 1.111111rem;
+      color: #ffffff;
+      text-align: center;
+    }
+    }
+  }
+</style>
+

src/views/selfcycle.vue

@@ -0,0 +1,235 @@
+<template>
+	<div class="self">
+		<div class="enter-both">
+			<div class="enter-title">
+				<h4>
+					<router-link to="/myself"><i class="iconfont icon-fanhui"></i></router-link>
+					<span>个人认证</span>
+				</h4>		
+			</div>
+			<div class="both">
+		    <div class="content">
+					<div class="part" v-for="item,key in list" v-show="seen">
+						<span>{{item.name}}</span>
+						<input type="text" :placeholder="'请输入'+item.content" @blur="canonical(key)">
+						<span>{{objectT[key]}}</span>
+					</div>
+					<div class="validation" v-show="seen">
+						<span>验证码</span>
+						<input type="text" placeholder="请输入验证码">
+						<span @click="getnumber()">获取验证码</span>
+					</div>
+          <div class="success" v-show="!seen">
+          	 	<div class="picture">
+          	 		<div></div>
+          	 	</div>
+              <p>
+              {{name}} <br>   
+              {{phone}}
+              </p>
+          	 </div>
+          </div>
+        </div>
+        <div class="button" v-show="seen" @click="verify()">提交</div>
+     </div>
+		</div>
+	</div>
+</template>
+<script>
+	export default{
+		data(){
+			return{
+				objectT:{},
+				seen:true,
+				phone:'',
+				name:'',
+				first:'',
+				last:'',
+				place:"1********",
+				center:'',
+				input:'',
+				regular:'',
+				innertext:[],
+				list:[
+				     {
+				     	 name:'姓名',
+				     	 content:'真实姓名',
+				     },
+				     {
+				     	 name:'身份证号',
+				     	 content:'身份证号码',
+				     },
+				     {
+				     	 name:'银行卡号',
+				     	 content:'银行卡号码',
+				     },
+				     {
+				     	 name:'预留手机',
+				     	 content:'银行预留手机号码',
+				     }
+				]
+			}
+
+		},
+		watch:{
+			value:function(){
+				this. canonical();
+			}		
+        	
+		},
+		mounted(){
+        this.canonical();
+		},
+		methods:{
+      verify(){
+      	this.seen=false;
+        this.name=document.getElementsByTagName("input")[0].value;
+        this.center=document.getElementsByTagName("input")[3].value;
+        this.last=this.center.split("")[10];
+        this.phone=this.phone.concat(this.place,this.last);
+      },
+			canonical(e){
+				console.log(e)//索引值
+				let ObjectX = ['','','',''];
+				for(let i in ObjectX){
+					console.log(ObjectX[i]);
+				}
+			}
+		}
+	}
+</script>
+<style scoped>
+	.self{
+			.enter-both{
+					width: 100%;
+					.enter-title{
+						height: 3.041667rem;
+						background: #60c0ff;
+						width: 100%;
+						h4{
+							text-align: center;
+							color: #fff;
+							font-size: 0.472222rem;
+							padding: 0.541667rem 0;
+							position: relative;
+							.icon-fanhui{
+								float: left;
+								margin-left: 0.513889rem;
+								color: #fff !important;
+							}
+				 		 span{
+				  			margin-left: -0.513889rem;
+				  		}
+						}		
+					}
+			.both{
+				  width: 100%;
+					padding: 0 0.3rem;
+      		.content{
+						float: left;
+						margin-top: -1.1111rem;
+						width: 100%;
+						background-color: #fff;
+						border-radius: 10px;
+						margin-bottom: 1.388889rem;
+						box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
+						padding: 0 0.291667rem;
+						.part{
+								width: 100%;
+								padding-left: 0.305556rem;
+								border-bottom: 1px solid #e8eff5;
+								span{
+									display: inline-block;
+									font-size: 0.388889rem;
+									color: #333333;
+									padding: 0.430556rem 0;
+									margin-right: 0.5rem;
+									width: 1.6rem;
+									text-align: left;
+								}
+								input{
+									border: 0;
+									width: 3.8rem;
+								}
+						}
+						.part:nth-of-type(4){
+							border: 0;
+						}
+						.validation{
+							width: 100%;
+							padding-left: 0.305556rem;
+							span{
+									display: inline-block;
+									font-size: 0.388889rem;
+									color: #333333;
+									padding: 0.430556rem 0;
+									margin-right: 0.5rem;
+									width: 1.6rem;
+									text-align: left;
+								}
+								input{
+									border: 0;
+								}
+								span:nth-of-type(2){
+									padding: 0;
+									margin: 0;
+									width: 2.377778rem;
+									height: 0.944444rem;
+									line-height: 0.944444rem;
+									text-align:center;
+									font-size: 0.316667rem;
+									border: 1px solid #60c0ff;
+									border-radius: 34px;
+									color: #60c0ff;
+								}
+						}
+						.success{
+							width: 100%;
+							height: 14.722222rem;
+							position: relative;
+							padding-top: 3.916667rem;
+							.picture{
+								width: 2.777778rem;
+								height: 2.777778rem;
+								border-radius: 50%;
+								background:url("../assets/img/drawable-mdpi/userimg.png");
+								background-size: cover;								
+								margin: 0 auto;						
+								text-align: center;		
+								div{
+									width: 1.152778rem;
+									height: 1.402778rem;
+									border-radius: 24% 24% 24% 100%;
+									background-image: url("../assets/img/drawable-mdpi/self.png");
+									background-position: -1.35rem -1.35rem;
+									background: cover;
+									float: left;
+									margin-left: 2rem;
+									margin-top: 2rem;
+								}			
+							}
+							p{
+								clear: both;
+								font-size: 0.5rem;
+								line-height: 0.8rem;
+                color: #1491e2;
+                text-align: center;
+							}
+						}
+				}
+			}
+				.button{
+			clear: both;
+			width: 9.166667rem;
+			height: 1.111111rem;
+			margin-left: 0.4rem;
+			background-color: #60c0ff;
+			box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
+			border-radius: 40px;
+			line-height: 1.111111rem;
+			color: #ffffff;
+			text-align: center;
+		}
+		}
+	}
+</style>

src/views/selfpart.vue

@@ -0,0 +1,255 @@
+<template>
+	<div class="self">
+		<div class="enter-both">
+			<div class="enter-title">
+				<h4>
+					<router-link to="/myself"><i class="iconfont icon-fanhui"></i></router-link>
+					<span>个人认证</span>
+				</h4>		
+			</div>
+			<div class="both">
+		    <div class="content">
+					<div class="part" v-show="seen">
+						<span>姓名</span>
+						<input type="text" placeholder="请输入真实姓名" @blur="canonicalfirst()" v-model="name">
+						<span>{{cerfirst}}</span>
+					</div>
+					<div class="part" v-show="seen">
+						<span>身份证号</span>
+						<input type="text" placeholder="请输入身份证号码" @blur="canonicalsecond()" v-model="IDcard">
+						<span>{{cersecond}}</span>
+					</div>
+					<div class="part" v-show="seen">
+						<span>银行卡号</span>
+						<input type="text" placeholder="请输入银行卡号码" @blur="canonicalthree()" v-model="bankcard">
+						<span>{{certhree}}</span>
+					</div>
+					<div class="part" v-show="seen">
+						<span>预留手机</span>
+						<input type="text" placeholder="请输入银行预留手机号码" @blur="canonicalfourth()" v-model="phone">
+						<span>{{cerfourth}}</span>
+					</div>
+					<div class="validation" v-show="seen">
+						<span>验证码</span>
+						<input type="text" placeholder="请输入验证码">
+						<span @click="getnumber()">获取验证码</span>
+					</div>
+          <div class="success" v-show="!seen">
+          	 	<div class="picture">
+          	 		<div></div>
+          	 	</div>
+              <p>{{name}}<br>{{phone}}</p>
+          	 </div>
+          </div>
+        </div>
+        <div class="button" v-show="seen" @click="verify()">提交</div>
+     </div>
+		</div>
+	</div>
+</template>
+<script>
+	export default{
+		data(){
+			return{
+				objectT:{},
+				seen:true,
+				phone:'',
+				name:'',
+				IDcard:'',
+				bankcard:'',
+				first:'',
+				last:'',
+				place:"1********",
+				regular:'',
+				cerfirst:'',
+				cersecond:'',
+				certhree:'',
+				cerfourth:'',
+			}
+
+		},
+		methods:{
+      verify(){
+      	this.seen=false;
+        this.center=document.getElementsByTagName("input")[3].value;
+        this.last=this.center.split("")[10];
+        this.phone=this.phone.concat(this.place,this.last);
+      },
+      canonicalfirst(){
+      	this.regular=/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/;
+      	if(this.regular.test(this.name)){
+            this.cerfirst=" ";
+      	}else{
+      		this.cerfirst="格式错误";
+      	}
+      },
+      canonicalsecond(){
+      	this.regular=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
+      	if(this.regular.test(this.IDcard)){
+            this.cersecond=" ";
+      	}else{
+      		this.cersecond="格式错误";
+      	}
+      },
+      canonicalthree(){
+      	this.regular=/([\d]{4})([\d]{4})([\d]{4})([\d]{4})([\d]{0,})?/;
+      	if(this.regular.test(this.bankcard)){
+            this.certhree=" ";
+      	}else{
+      		this.certhree="格式错误";
+      	}
+      },
+      canonicalfourth(){
+      	this.regular=/^1[3|4|5|8][0-9]\d{4,8}$/;
+      	if(this.regular.test(this.phone)){
+            this.cerfourth=" ";
+      	}else{
+      		this.cerfourth="格式错误";
+      	}
+      },
+			
+		}
+	}
+</script>
+<style scoped>
+	.self{
+			.enter-both{
+					width: 100%;
+					.enter-title{
+						height: 3.041667rem;
+						background: #60c0ff;
+						width: 100%;
+						h4{
+							text-align: center;
+							color: #fff;
+							font-size: 0.472222rem;
+							padding: 0.541667rem 0;
+							position: relative;
+							.icon-fanhui{
+								float: left;
+								margin-left: 0.513889rem;
+								color: #fff !important;
+							}
+				 		 span{
+				  			margin-left: -0.513889rem;
+				  		}
+						}		
+					}
+			.both{
+				  width: 100%;
+					padding: 0 0.3rem;
+      		.content{
+						float: left;
+						margin-top: -1.1111rem;
+						width: 100%;
+						background-color: #fff;
+						border-radius: 10px;
+						margin-bottom: 1.388889rem;
+						box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
+						padding: 0 0.291667rem;
+						.part{
+								width: 100%;
+								height: 1.111111rem;
+								line-height: 1.111111rem;
+								padding-left: 0.305556rem;
+								border-bottom: 1px solid #e8eff5;
+								span{
+									display: inline-block;
+									font-size: 0.388889rem;
+									color: #333333;
+									margin-right: 0.5rem;
+									width: 1.6rem;
+									text-align: left;
+								}
+								input{
+									border: 0;
+									width: 3.6rem;
+								}
+								span:nth-of-type(2){
+									font-size: 0.2rem;
+									width: 2rem;
+									color: #f00;
+								}
+						}
+						.part:nth-of-type(4){
+							border: 0;
+						}
+						.validation{
+							width: 100%;
+							padding-left: 0.305556rem;
+							span{
+									display: inline-block;
+									font-size: 0.388889rem;
+									color: #333333;
+									padding: 0.430556rem 0;
+									margin-right: 0.5rem;
+									width: 1.6rem;
+									text-align: left;
+								}
+								input{
+									border: 0;
+									width: 3.5rem;
+								}
+								span:nth-of-type(2){
+									padding: 0;
+									margin: 0;
+									width: 2.377778rem;
+									height: 0.944444rem;
+									line-height: 0.944444rem;
+									text-align:center;
+									font-size: 0.316667rem;
+									border: 1px solid #60c0ff;
+									border-radius: 34px;
+									color: #60c0ff;
+								}
+						}
+						.success{
+							width: 100%;
+							height: 14.722222rem;
+							position: relative;
+							padding-top: 3.916667rem;
+							.picture{
+								width: 2.777778rem;
+								height: 2.777778rem;
+								border-radius: 50%;
+								background:url("../assets/img/drawable-mdpi/userimg.png");
+								background-size: cover;								
+								margin: 0 auto;						
+								text-align: center;		
+								div{
+									width: 1.152778rem;
+									height: 1.402778rem;
+									border-radius: 24% 24% 24% 100%;
+									background-image: url("../assets/img/drawable-mdpi/self.png");
+									background-position: -1.35rem -1.35rem;
+									background: cover;
+									float: left;
+									margin-left: 2rem;
+									margin-top: 2rem;
+								}			
+							}
+							p{
+								clear: both;
+								font-size: 0.5rem;
+								line-height: 0.8rem;
+                color: #1491e2;
+                text-align: center;
+							}
+						}
+				}
+			}
+				.button{
+			clear: both;
+			width: 9.166667rem;
+			height: 1.111111rem;
+			margin-left: 0.4rem;
+			background-color: #60c0ff;
+			box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
+			border-radius: 40px;
+			line-height: 1.111111rem;
+			color: #ffffff;
+			text-align: center;
+		}
+		}
+	}
+</style>

src/views/sign.vue

@@ -0,0 +1 @@
+sign.vue