Ver Fonte

优化移动端佣金输入组件,调整输入属性和样式以提升用户体验,确保在不同屏幕尺寸下的可用性和可读性。

wilhelm wong há 2 meses atrás
pai
commit
800d5ed1c0
1 ficheiros alterados com 61 adições e 2 exclusões
  1. 61 2
      src/views/TeamView.vue

+ 61 - 2
src/views/TeamView.vue

@@ -185,9 +185,23 @@
             v-model="editForm.commissionRate"
             :min="0"
             :max="100"
-            :step="0.1"
+            :step="1"
             suffix=" %"
-            class="w-full"
+            class="w-full mobile-commission-input"
+            :inputProps="{
+              type: 'number',
+              inputmode: 'numeric',
+              pattern: '[0-9]*',
+              style: {
+                fontSize: '16px',
+                padding: '12px',
+                minHeight: '48px'
+              }
+            }"
+            :useGrouping="false"
+            :allowEmpty="true"
+            :showButtons="false"
+            placeholder="请输入佣金比例"
           />
         </div>
 
@@ -578,4 +592,49 @@ const teamData = computed(() => tableData.value?.content?.[0] || null)
 .p-password .p-password-input {
   width: 100%;
 }
+
+/* 移动端佣金输入优化 */
+.mobile-commission-input {
+  width: 100%;
+}
+
+.mobile-commission-input .p-inputnumber-input {
+  font-size: 16px !important; /* 防止iOS自动缩放 */
+  padding: 12px !important;
+  border-radius: 8px !important;
+  border: 2px solid #e5e7eb !important;
+  transition: all 0.2s ease !important;
+  min-height: 48px; /* 确保足够的触摸区域 */
+}
+
+.mobile-commission-input .p-inputnumber-input:focus {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+  outline: none !important;
+}
+
+/* 移动端特殊优化 */
+@media (max-width: 768px) {
+  .mobile-commission-input .p-inputnumber-input {
+    font-size: 16px !important; /* 防止iOS自动缩放 */
+    padding: 14px 12px !important;
+    min-height: 52px; /* 更大的触摸区域 */
+    border-radius: 10px !important;
+  }
+  
+  .mobile-commission-input .p-inputnumber-input:focus {
+    transform: scale(1.02);
+    border-color: #3b82f6 !important;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
+  }
+}
+
+/* 小屏幕移动端进一步优化 */
+@media (max-width: 480px) {
+  .mobile-commission-input .p-inputnumber-input {
+    font-size: 18px !important; /* 更大的字体便于输入 */
+    padding: 16px 12px !important;
+    min-height: 56px;
+  }
+}
 </style>