[feat][环境探索][高校]

src/views/xjc-integratedmachine/environment/university/query_universitydb_conditions.vue

@@ -56,6 +56,7 @@
                     style="width: 1392px;height: 84px"
                     placeholder="请输入你要查询的高校"
                     @input="byKeyword"
+                    @focus="focusSearchKeyboard"
                 >
                   <template #suffix>
                                     <span @click="clearResult" style="font-size: 38px;color: #444040;margin-left: 37px;">
@@ -124,6 +125,13 @@
         </div>
       </el-dialog>
     </div>
+    <SearchKeyboard
+            v-if="showSearchKeyboard"
+            :input="form.name"
+            @onChange="handleSearchKeyboardInputChange"
+            @onKeyPress="handleSearchKeyboardKeyPress"
+            @onClose="showSearchKeyboard = false"
+    />
   </div>
 
 </template>
@@ -131,6 +139,7 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import SearchKeyboard from '@/views/xjc-integratedmachine/components/xjc_keyboard.vue'
 import {ref} from "vue";
 import {getUniversityByKeyword} from "@/api/xjc-integratedmachine/environment/university.js";
 
@@ -170,6 +179,7 @@ function setHeadinfo() {
 
 //切换tabs
 const showPage = (val) => {
+  showSearchKeyboard.value = false
   if (val === 1) {
     onePage.value = true;
     twoPage.value = false;
@@ -310,6 +320,24 @@ function clearResult(item) {
   byKeyword();
 }
 
+
+    /* 软键盘事件 ↓*/
+    // 启动软键盘标识
+    const showSearchKeyboard = ref(false)
+    function focusSearchKeyboard(){
+      showSearchKeyboard.value = true
+    }
+    function handleSearchKeyboardInputChange(input) {
+      form.value.name = input
+    }
+    function handleSearchKeyboardKeyPress(button) {
+      if(button === '{enter}'){
+        showSearchKeyboard.value = false
+      }
+    }
+
+    /* 软键盘事件 ↑*/
+
 </script>
 
 
@@ -513,65 +541,67 @@ p , div{
 
 }
 
+
+
+.item-result-box-active {
+  min-width: 220px;
+  height: 92px;
+  background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
+  box-shadow: inset 0px -2px 7px 0px #1E410E;
+  border-radius: 5px 5px 5px 5px;
+  border: 1px solid #A2F57F;
+  font-weight: 400;
+  font-size: 30px;
+  color: #0DE6A1;
+  line-height: 90px;
+  text-align: center;
+  margin-left: 50px;
+  margin-right: 50px;
+  margin-top: 32px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.item-result-box {
+  min-width: 220px;
+  height: 92px;
+  background: #E0EEF4;
+  border-radius: 5px 5px 5px 5px;
+  font-weight: 400;
+  font-size: 30px;
+  color: #000000;
+  line-height: 92px;
+  text-align: center;
+  margin-left: 50px;
+  margin-right: 50px;
+  margin-top: 32px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.item-result-box:hover {
+  min-width: 220px;
+  height: 92px;
+  background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
+  box-shadow: inset 0px -2px 7px 0px #1E410E;
+  border-radius: 5px 5px 5px 5px;
+  border: 1px solid #A2F57F;
+  font-weight: 400;
+  font-size: 30px;
+  color: #000000;
+  //line-height: 90px;
+  text-align: center;
+  margin-left: 50px;
+  margin-top: 32px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 .dialog-box {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 
-
-  .item-result-box-active {
-    min-width: 220px;
-    height: 92px;
-    background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
-    box-shadow: inset 0px -2px 7px 0px #1E410E;
-    border-radius: 5px 5px 5px 5px;
-    border: 1px solid #A2F57F;
-    font-weight: 400;
-    font-size: 30px;
-    color: #0DE6A1;
-    line-height: 90px;
-    text-align: center;
-    margin-left: 50px;
-    margin-right: 50px;
-    margin-top: 32px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .item-result-box {
-    min-width: 220px;
-    height: 92px;
-    background: #E0EEF4;
-    border-radius: 5px 5px 5px 5px;
-    font-weight: 400;
-    font-size: 30px;
-    color: #000000;
-    line-height: 92px;
-    text-align: center;
-    margin-left: 50px;
-    margin-right: 50px;
-    margin-top: 32px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .item-result-box:hover {
-    min-width: 220px;
-    height: 92px;
-    background: linear-gradient(180deg, #B6FFEF 0%, #C5EEFF 100%);
-    box-shadow: inset 0px -2px 7px 0px #1E410E;
-    border-radius: 5px 5px 5px 5px;
-    border: 1px solid #A2F57F;
-    font-weight: 400;
-    font-size: 30px;
-    color: #000000;
-    //line-height: 90px;
-    text-align: center;
-    margin-left: 50px;
-    margin-top: 32px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
   //p {
   //  min-width: 120px;
   //  padding-left: 10px;