修复idcard插入样式及密码输入范围，修改软键盘9键

components.d.ts

@@ -9,14 +9,12 @@ declare module 'vue' {
   export interface GlobalComponents {
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ErrorModal: typeof import('./src/components/dialogs/ErrorModal.vue')['default']
@@ -26,7 +24,4 @@ declare module 'vue' {
     SimpleKeyboard: typeof import('./src/components/SimpleKeyboard.vue')['default']
     StackInfoModal: typeof import('./src/components/dialogs/StackInfoModal.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/components/SimpleKeyboard.vue

@@ -20,15 +20,23 @@ export default {
       type: Function,
       default: () => { },
     },
+    layout: Object
   },
   data: () => ({
     keyboard: null,
   }),
   mounted() {
-    this.keyboard = new Keyboard(this.keyboardClass, {
+    let keyParams = {
       onChange: this.onChange,
       onKeyPress: this.onKeyPress,
-    })
+      layout: this.layout,
+    }
+    if(this.layout){
+      keyParams.display = {
+        '{bksp}': "回退" // 设置删除键的显示字符
+      }
+    }
+    this.keyboard = new Keyboard(this.keyboardClass, keyParams)
   },
   methods: {
     onChange(input) {

src/pages/Index/Index.vue

@@ -467,10 +467,15 @@ const handleAppEvent = (data: AppEventMessage['data']) => {
     consumableStore.setIdCardInfo(projectInfo)
     //显示部分id卡信息。 项目名称，过期时间，批次号
     idCardInserted.value = true
-    idCardMessage.value = `<div>
-      <div>项目名称：${projectInfo.projName}, 批次号：${projectInfo.lotId}, 过期时间：${formatDate(projectInfo.expiryDate)}</div>
-      <div>id卡已插入，是否确保？</div>
-    </div>`
+    idCardMessage.value = `
+    <div style='line-height:0.5;margin-top: -90px;'>
+      <div style='margin-left:25%'>
+        <div style='display:flex'><div>项目名称：</div><div>${projectInfo.projName}</div></div>
+        <div style='display:flex'><div>批次号：</div><div>${projectInfo.lotId}</div></div>
+        <div style='display:flex'><div>过期时间：</div><div>${formatDate(projectInfo.expiryDate)}</div></div>
+      </div>
+      <div style='font-weight: 700;font-size: 1.75rem'>id卡已插入，是否保存？</div>
+    </div><br/>`
   } else if (data.typeName === 'AppIDCardUnmountEvent') {
     consumableStore.setIdCardInserted(false)
     consumableStore.setIdCardInfo(null)
@@ -1116,6 +1121,7 @@ watch(
 
 .pd-5{
   padding: 0 5px;
+  font-size: 25px;
 }
 
 .loading-overlay {

src/pages/Index/components/Consumables/Warn/InitWarn.vue

@@ -12,9 +12,9 @@
           <!-- 错误提示信息 -->
           <p v-if="errorTip" class="modal-error">{{ errorTip }}</p>
         </div>
-        <div class="modal-buttons" style="float:right">
-          <el-button style="width:100px;" v-if="cancelText" @click="onCancel" class="cancel-btn">{{ cancelText }}</el-button>
-          <el-button style="width:auto;" type="primary" @click="onConfirm" class="confirm-btn">
+        <div class="modal-buttons">
+          <el-button v-if="cancelText" @click="onCancel" class="cancel-btn">{{ cancelText }}</el-button>
+          <el-button type="primary" @click="onConfirm" class="confirm-btn">
             {{ confirmText }}
           </el-button>
         </div>
@@ -163,7 +163,8 @@ const onConfirm = () => {
     font-weight: bold;
     cursor: pointer;
     border: none;
-    height: 50px;
+    height: 5rem;
+    width:200px;
     transition:
       background-color 0.3s ease,
       color 0.3s ease; // 增加平滑过渡效果
@@ -172,7 +173,7 @@ const onConfirm = () => {
   .cancel-btn {
     background-color: #ddd;
     color: #333;
-
+    width:200px;
     &:hover {
       background-color: #bbb; // 增加悬停效果
     }

src/pages/Index/components/Setting/EnterPinModal.vue

@@ -20,7 +20,7 @@
        <!-- 键盘 -->
       <transition name="slide-up">
         <div class="keyboard" v-if="keyboardVisible">
-          <SimpleKeyboard :input="currentInputValue" @onChange="handleKeyboardInput" @onKeyPress="handleKeyPress" />
+          <SimpleKeyboard :layout="keyLayout"  :input="currentInputValue" @onChange="handleKeyboardInput" @onKeyPress="handleKeyPress" />
         </div>
       </transition>
     </div>
@@ -47,7 +47,14 @@ const confirmPin = () => {
 const keyboardVisible = ref(false)
 const currentInputValue = ref('')
 const currentInputField = ref<'sampleBarcode' | 'userid' | ''>('')
-
+const keyLayout = ref({
+  default: [
+    "1 2 3",
+    "4 5 6",
+    "7 8 9",
+    "0 {bksp}"
+  ]
+})
 // 隐藏键盘
 const hideKeyboard = () => {
   keyboardVisible.value = false

src/pages/Index/components/Setting/UpdatePinModal.vue

@@ -72,6 +72,7 @@
         <div class="keyboard" v-if="keyboardVisible">
           <SimpleKeyboard
             :input="currentInputValue"
+            :layout="keyLayout"
             @onChange="handleKeyboardInput"
             @onKeyPress="handleKeyPress"
           />
@@ -98,7 +99,14 @@ const showConfirmPassword = ref(false)
 const oldpasswd = ref('')
 const password = ref('')
 const confirmPassword = ref('')
-
+const keyLayout = ref({
+  default: [
+    "1 2 3",
+    "4 5 6",
+    "7 8 9",
+    "0 {bksp}"
+  ]
+})
 const confirmPin = () => {
   if (!oldpasswd.value) {
     eMessage.error('请输入旧密码')