键盘样式问题

src/components/AddPreSetting.vue

@@ -220,7 +220,7 @@
       <div class="btn" @click="save">保存</div>
       <div class="btn ml" @click="hiddleSettingModal">返回</div>
     </div>
-    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
+    <div class="key_wrap" v-show="showkeyboard" id="keyboard_formula">
       <SimpleKeyboard @onChange="onChange" :input="formula_id" />
     </div>
   </div>
@@ -788,10 +788,10 @@ onMounted(() => {
   }
   .key_wrap {
     position: absolute;
-    left: 0;
-    right: 0;
+    right: 97px;
     bottom: 0;
-    height: 230px;
+    height: 245px;
+    width: 520px;
   }
 }
 </style>

src/components/UpdatePreSetting.vue

@@ -220,7 +220,7 @@
       <!-- <div class="btn" @click="save">保存</div> -->
       <div class="btn ml" @click="hiddleSettingModal">返回</div>
     </div>
-    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
+    <div class="key_wrap" v-show="showkeyboard" id="keyboard_formula">
       <SimpleKeyboard @onChange="onChange" :input="formula_id" />
     </div>
   </div>
@@ -723,6 +723,7 @@ const setSprayLiquidVal = () => {
 
 const showkeyboard = ref(false)
 const onChange = a => {
+  console.log(a)
   formula_id.value = a
 }
 const handleShowKeyBoard = () => {
@@ -733,6 +734,7 @@ onMounted(() => {
   document.addEventListener('click', e => {
     let box = document.getElementById('keyboard_formula')
     let room = document.getElementById('id_formula')
+    let fontBox = document.getElementsByClassName('hg-candidate-box')
     if (!box?.contains(e.target) && e.target != room) {
       showkeyboard.value = false
     }
@@ -837,10 +839,10 @@ onMounted(() => {
   }
   .key_wrap {
     position: absolute;
-    left: 0;
-    right: 0;
+    right: 97px;
     bottom: 0;
-    height: 230px;
+    height: 245px;
+    width: 520px;
   }
 }
 </style>