输入车牌优化

刘淇
1 parent 1214e256
Showing 1 changed file with 52 additions and 50 deletions
src/views/parkPay/plateNumber.vue
 <template>
   <div id="page">
-    <div class="swiper-container" style="height: 260px">
+    <div class="swiper-container" style="height: 160px">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
              :style="{backgroundImage:'url(' + item.url + ')'}"
@@ -37,7 +37,7 @@
           <span>{{formData.num0}}</span>
         </div>
         <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
-        <!--<em class="spot"></em>-->
+        <em class="spot"></em>
         <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
         <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
         <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
@@ -250,15 +250,15 @@
               :key="index"
               @click="clickKeyBoard(item)">{{item}}</span>
       </div>
-      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
-        <span v-for="(item,index) in allKeyWord._2"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-      </div>
+      <!--<div class="keyboard" v-if="activeKeyWordIndex !== 1">-->
+        <!--<span v-for="(item,index) in allKeyWord._2"-->
+              <!--:key="index"-->
+              <!--@click="clickKeyBoard(item)">{{item}}</span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--<span class="bordernone"></span>-->
+      <!--</div>-->
       <div class="keyboard">
         <span v-for="(item,index) in allKeyWord._3"
               :key="index"
@@ -274,27 +274,27 @@
               :key="index"
               @click="clickKeyBoard(item)">{{item}}</span>
       </div>
-      <div class="keyboard">
-        <span v-for="(item,index) in allKeyWord._6"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
-        <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
-        <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
-      </div>
-      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
-        <span v-for="(item,index) in allKeyWord._7"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-        <span class="bordernone"></span>
-        <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
-      </div>
-      <div class="cancel">
-        <span @click="keyBoardStatus = false">完成</span>
-      </div>
+      <!--<div class="keyboard">-->
+        <!--<span v-for="(item,index) in allKeyWord._6"-->
+              <!--:key="index"-->
+              <!--@click="clickKeyBoard(item)">{{item}}</span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--&lt;!&ndash; <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>-->
+        <!--<span class="bordernone" v-if="activeKeyWordIndex === 1"></span> &ndash;&gt;-->
+        <!--&lt;!&ndash; <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> &ndash;&gt;-->
+      <!--</div>-->
+      <!--<div class="keyboard" v-if="activeKeyWordIndex !== 1">-->
+        <!--<span v-for="(item,index) in allKeyWord._7"-->
+              <!--:key="index"-->
+              <!--@click="clickKeyBoard(item)">{{item}}</span>-->
+        <!--<span class="bordernone"></span>-->
+        <!--<span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>-->
+      <!--</div>-->
+      <!--<div class="cancel">-->
+        <!--<span @click="keyBoardStatus = false">完成</span>-->
+      <!--</div>-->
     </div>
@@ -348,13 +348,13 @@ export default {
         num7: ''
       },
       allKeyWord: {
-        _1: [1, 2, 3, 4, 5, 6, 7],
-        _2: [8, 9, 0],
-        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
-        _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
-        _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
-        _6: ['W', 'X', 'Y', 'Z'],
-        _7: ['港', '澳', '学', '领', '警']
+        _1: [1, 2, 3, 4, 5, 6, 7,8, 9, 0],
+        // _2: [],
+        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G','H', 'J', 'K',],
+        _4: [ 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S','T', 'U',],
+        _5: [  'V','W', 'X', 'Y', 'Z','港', '澳', '学', '领', '警'],
+        _6: [],
+        _7: []
       },
       activeKeyWordIndex: 1, // 当前车牌号
       keyBoardStatus: false,
@@ -640,12 +640,12 @@ export default {
 <style lang="scss" scoped>
   .swiper-container {
-    height: 206px;
+    height: 160px;
   }
   .swiper-slide {
     /*width: 100%;*/
-    height: 206px;
+    height: 150px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
@@ -706,8 +706,8 @@ export default {
         background-color: #d8d8d8;
       }
       & > div {
-        width: 1.8rem;
-        height: 1.8rem;
+        width: 2.2rem;
+        height: 2.2rem;
         border: 1px solid #e4e4e4;
         &.first {
           position: relative;
@@ -751,7 +751,7 @@ export default {
           width: 100%;
           height: 100%;
           font-size: 1rem;
-          color: #828282;
+          color: #666;
           &.first {
             background-color: #9cbce2;
             color: #fff;
@@ -797,8 +797,8 @@ export default {
       margin-bottom: 0.45rem;
       .word {
         box-sizing: border-box;
-        width: 1.8rem;
-        height: 1.8rem;
+        width: 2.2rem;
+        height: 2.2rem;
         // border: 1px solid #9cbce2;
         box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
         border-radius: 0.16rem;
@@ -819,6 +819,7 @@ export default {
           color: #000;
           // border: 1px solid #fff;
           border-radius: 0.125rem;
+          font-size: 1.4rem;
         }
         img {
           width: 1.6rem;
@@ -840,16 +841,17 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: 2rem;
+      height: 2.2rem;
       margin-bottom: 0.3rem;
+      font-size: 1.2rem;
       span {
         text-align: center;
         display: flex;
-        width: 1.8rem;
+        width: 2.2rem;
         align-items: center;
         justify-content: center;
-        height: 1.8rem;
-        margin: 0 0.3rem;
+        height: 2.2rem;
+        margin: 0 0.1rem;
         box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
         background-color: #fff;
         border-radius: 0.125rem;