style: ui修复

src/components/uni-number-box/uni-number-box.vue

@@ -1,11 +1,26 @@
 <template>
   <div class="uni-numbox">
     <div @click="_calcValue('minus')" class="uni-numbox__minus">
-      <span class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</span>
+      <span
+        class="uni-numbox--text"
+        :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }"
+        >-</span
+      >
     </div>
-    <input :disabled="inputDisabled" @blur="_onBlur" :adjust-position='false' class="uni-numbox__value" type="number" v-model="inputValue" />
+    <input
+      :disabled="inputDisabled"
+      @blur="_onBlur"
+      :adjust-position="false"
+      class="uni-numbox__value"
+      type="number"
+      v-model="inputValue"
+    />
     <div @click="_calcValue('plus')" class="uni-numbox__plus">
-      <span class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</span>
+      <span
+        class="uni-numbox--text"
+        :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }"
+        >+</span
+      >
     </div>
   </div>
 </template>
@@ -23,36 +38,36 @@
  */
 
 export default {
-  name: "UniNumberBox",
+  name: 'UniNumberBox',
   props: {
     value: {
       type: [Number, String],
-      default: 1
+      default: 1,
     },
     min: {
       type: Number,
-      default: 0
+      default: 0,
     },
     max: {
       type: Number,
-      default: 100
+      default: 100,
     },
     step: {
       type: Number,
-      default: 1
+      default: 1,
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     inputDisabled: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
-      inputValue: 0
+      inputValue: 0,
     };
   },
   watch: {
@@ -61,9 +76,9 @@ export default {
     },
     inputValue(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.$emit("input", newVal);
+        this.$emit('input', newVal);
       }
-    }
+    },
   },
   created() {
     this.inputValue = this.value;
@@ -76,21 +91,21 @@ export default {
       const scale = this._getDecimalScale();
       let value = this.inputValue * scale;
       let step = this.step * scale;
-      if (type === "minus") {
+      if (type === 'minus') {
         value -= step;
-        if (value < (this.min * scale)) {
+        if (value < this.min * scale) {
           return;
         }
-        if (value > (this.max * scale)) {
-          value = this.max * scale
+        if (value > this.max * scale) {
+          value = this.max * scale;
         }
-      } else if (type === "plus") {
+      } else if (type === 'plus') {
         value += step;
-        if (value > (this.max * scale)) {
+        if (value > this.max * scale) {
           return;
         }
-        if (value < (this.min * scale)) {
-          value = this.min * scale
+        if (value < this.min * scale) {
+          value = this.min * scale;
         }
       }
 
@@ -100,7 +115,7 @@ export default {
       let scale = 1;
       // 浮点型
       if (~~this.step !== this.step) {
-        scale = Math.pow(10, (this.step + "").split(".")[1].length);
+        scale = Math.pow(10, (this.step + '').split('.')[1].length);
       }
       return scale;
     },
@@ -117,8 +132,8 @@ export default {
         value = this.min;
       }
       this.inputValue = value;
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
@@ -130,22 +145,22 @@ export default {
   display: flex;
   /* #endif */
   flex-direction: row;
-  height: 35PX;
-  line-height: 35px;
-  width: 120px;
+  height: 40px;
+  /* line-height: 35px; */
+  width: 160px;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background-color: #ffffff;
 }
 
 .uni-numbox__value {
-  background-color: #ffffff;
-  width: 30PX;
-  height: 24PX;
+  flex: 1;
+  width: 50px;
+  height: 100%;
   text-align: center;
   font-size: 32px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-left-width: 0;
-  border-right-width: 0;
+  background-color: transparent;
+  border: 0;
 }
 
 .uni-numbox__minus {
@@ -156,21 +171,11 @@ export default {
   align-items: center;
   justify-content: center;
   width: 35px;
-  height: 26PX;
-  /* line-height: $box-line-height;
-*/
-  /* text-align: center;
-*/
-padding: 0 2px;
+  height: 100%;
+  padding: 0 5px;
   font-size: 20px;
   color: #333;
   background-color: #f8f8f8;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-  border-right-width: 0;
 }
 
 .uni-numbox__plus {
@@ -181,15 +186,9 @@ padding: 0 2px;
   align-items: center;
   justify-content: center;
   width: 35px;
-  height: 26PX;
-  padding: 0 2px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+  height: 100%;
+  padding: 0 5px;
   background-color: #f8f8f8;
-  border-left-width: 0;
 }
 
 .uni-numbox--text {

src/pages/parkingFee/parkingReceipt/parkingReceipt.vue

@@ -603,6 +603,7 @@ export default {
         }
         .choice_card_status {
           display: flex;
+          white-space: nowrap;
           align-items: center;
         }
       }