修改

package.json

@@ -7,14 +7,13 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "recorder-core": "*",
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.12.0",
-    "hls.js": "^1.0.12",
     "echarts": "^5.1.2",
     "element-ui": "^2.9.2",
     "ezuikit-js": "0.0.7",
+    "hls.js": "^1.0.12",
     "jquery": "^3.6.0",
     "js-cookie": "3.0.0",
     "jsencrypt": "^3.0.0-rc.1",
@@ -22,6 +21,8 @@
     "mars3d": "^3.1.3",
     "moment": "^2.29.1",
     "qs": "^6.10.1",
+    "recorder-core": "*",
+    "simple-keyboard": "^3.4.100",
     "underscore": "^1.13.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/components/simpleKeyboard/SimpleKeyboardLogin.vue

+<template>
+  <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from "simple-keyboard";
+import "simple-keyboard/build/css/index.css";
+
+export default {
+  props: {
+    keyboardClass: {
+      default: "simple-keyboard",
+      type: String
+    },
+    input: {
+      type: String
+    }
+  },
+  data: () => ({
+    keyboard: null,    
+  }),
+  mounted() {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress
+    });
+    this.setKeyboard()    
+  },
+  methods: {
+    onChange(input) {
+      this.$emit("onChange", input);
+    },
+    onKeyPress(button) {
+      this.$emit("onKeyPress", button);
+    },
+    setKeyboard() {
+      this.keyboard.setOptions({
+      layoutName: "default",
+      theme: "hg-theme-default hg-layout-default myTheme",
+      layout: {
+      default: [
+        "1 2 3 4 5 6 7 8 9 0",
+        "q w e r t y u i o p",
+        'a s d f g h j k l',
+        "{bksp} z x c v b n m {enter}",
+      ]},
+      buttonTheme: [
+        {
+          class: "bksp",
+          buttons: "{bksp}"
+        },
+        {
+          class: "enter",
+          buttons: "{enter}"
+        }
+      ],
+      display: {
+        '{bksp}': "删除",
+        '{enter}': "确认"
+      }
+    });
+    }
+  },
+  watch: {
+    input(input) {
+      this.keyboard.setInput(input); 
+    }
+  }
+};
+</script>
+<style>
+  .simple-keyboard {
+    max-width: 950px;
+    padding: 15px;
+    margin: 0 auto;
+    margin-top: 380px;
+    box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0,0,0,.6);
+  }
+
+  .hg-theme-default .hg-button.hg-standardBtn{
+    width: 48px;
+    height: 50px;
+    margin: 8px 10px;
+    font-size: 23px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
+    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
+  }
+  
+  .hg-theme-default .hg-button.hg-standardBtn:active {
+    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
+    background-color: #efefef;
+  }
+
+
+  .simple-keyboard.hg-layout-default .hg-button.bksp {
+    height: 50px;
+    margin: 8px 10px;
+    font-size: 23px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
+    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
+    background: #a8001e;
+    color: white;
+  }
+
+  .simple-keyboard.hg-layout-default .hg-button.bksp:active {
+    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
+    background-color: #efefef;
+    color: #000000;
+  }
+
+   .simple-keyboard.hg-layout-default .hg-button.enter {
+    height: 50px;
+    margin: 8px 10px;
+    font-size: 23px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
+    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
+    background: #a8001e;
+    color: white;
+  }
+
+  .simple-keyboard.hg-layout-default .hg-button.enter:active {
+    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
+    background-color: #efefef;
+    color: #000000;
+  }
+</style>
+
+

src/components/simpleKeyboard/SimpleKeyboardPassWord.vue

+<template>
+  <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from "simple-keyboard";
+import "simple-keyboard/build/css/index.css";
+
+export default {
+  props: {
+    keyboardClass: {
+      default: "simple-keyboard",
+      type: String
+    },
+    input: {
+      type: String
+    }
+  },
+  data: () => ({
+    keyboard: null,    
+  }),
+  mounted() {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress
+    });
+    this.setKeyboard()    
+  },
+  methods: {
+    onChange(input) {
+      this.$emit("onChange", input);
+    },
+    onKeyPress(button) {
+      this.$emit("onKeyPress", button);
+    },
+    setKeyboard() {
+      this.keyboard.setOptions({
+      layoutName: "default",
+      theme: "hg-theme-default hg-layout-default myTheme",
+      layout: {
+      default: [
+        "1 2 3 4 5 6 7 8 9 0",
+        "q w e r t y u i o p",
+        'a s d f g h j k l',
+        "{bksp} z x c v b n m {enter}",
+      ]},
+      buttonTheme: [
+        {
+          class: "bksp",
+          buttons: "{bksp}"
+        },
+        {
+          class: "enter",
+          buttons: "{enter}"
+        }
+      ],
+      display: {
+        '{bksp}': "删除",
+        '{enter}': "确认"
+      }
+    });
+    }
+  },
+  watch: {
+    input(input) {
+      this.keyboard.setInput(input); 
+    }
+  }
+};
+</script>
+<style>
+  .simple-keyboard {
+    max-width: 950px;
+    padding: 15px;
+    margin: 0 auto;
+    box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0,0,0,.6);
+  }
+
+  .hg-theme-default .hg-button.hg-standardBtn{
+    width: 48px;
+    height: 50px;
+    margin: 8px 10px;
+    font-size: 23px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
+    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
+  }
+  
+  .hg-theme-default .hg-button.hg-standardBtn:active {
+    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
+    background-color: #efefef;
+  }
+
+
+  .simple-keyboard.hg-layout-default .hg-button.bksp {
+    height: 50px;
+    margin: 8px 10px;
+    font-size: 23px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
+    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
+    background: #a8001e;
+    color: white;
+  }
+
+  .simple-keyboard.hg-layout-default .hg-button.bksp:active {
+    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
+    background-color: #efefef;
+    color: #000000;
+  }
+
+   .simple-keyboard.hg-layout-default .hg-button.enter {
+    height: 50px;
+    margin: 8px 10px;
+    font-size: 23px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);
+    box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);
+    background: #a8001e;
+    color: white;
+  }
+
+  .simple-keyboard.hg-layout-default .hg-button.enter:active {
+    box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);
+    background-color: #efefef;
+    color: #000000;
+  }
+</style>
+
+