BJ_web_developers / wxgzh

Commit e41f30ee17172a630f14a2a338350fc1d3b253d8

Authored by 刘淇
1 parent 1214e256

输入车牌优化

Inline Side-by-side
Showing 1 changed file with 52 additions and 50 deletions
src/views/parkPay/plateNumber.vue
  View file @e41f30e
1 1 <template>
2 2 <div id="page">
3 3  
4   - <div class="swiper-container" style="height: 260px">
  4 + <div class="swiper-container" style="height: 160px">
5 5 <div class="swiper-wrapper">
6 6 <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
7 7 :style="{backgroundImage:'url(' + item.url + ')'}"
... ... @@ -37,7 +37,7 @@
37 37 <span>{{formData.num0}}</span>
38 38 </div>
39 39 <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
40   - <!--<em class="spot"></em>-->
  40 + <em class="spot"></em>
41 41 <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
42 42 <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
43 43 <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
... ... @@ -250,15 +250,15 @@
250 250 :key="index"
251 251 @click="clickKeyBoard(item)">{{item}}</span>
252 252 </div>
253   - <div class="keyboard" v-if="activeKeyWordIndex !== 1">
254   - <span v-for="(item,index) in allKeyWord._2"
255   - :key="index"
256   - @click="clickKeyBoard(item)">{{item}}</span>
257   - <span class="bordernone"></span>
258   - <span class="bordernone"></span>
259   - <span class="bordernone"></span>
260   - <span class="bordernone"></span>
261   - </div>
  253 + <!--<div class="keyboard" v-if="activeKeyWordIndex !== 1">-->
  254 + <!--<span v-for="(item,index) in allKeyWord._2"-->
  255 + <!--:key="index"-->
  256 + <!--@click="clickKeyBoard(item)">{{item}}</span>-->
  257 + <!--<span class="bordernone"></span>-->
  258 + <!--<span class="bordernone"></span>-->
  259 + <!--<span class="bordernone"></span>-->
  260 + <!--<span class="bordernone"></span>-->
  261 + <!--</div>-->
262 262 <div class="keyboard">
263 263 <span v-for="(item,index) in allKeyWord._3"
264 264 :key="index"
... ... @@ -274,27 +274,27 @@
274 274 :key="index"
275 275 @click="clickKeyBoard(item)">{{item}}</span>
276 276 </div>
277   - <div class="keyboard">
278   - <span v-for="(item,index) in allKeyWord._6"
279   - :key="index"
280   - @click="clickKeyBoard(item)">{{item}}</span>
281   - <span class="bordernone"></span>
282   - <span class="bordernone"></span>
283   - <span class="bordernone"></span>
284   - <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
285   - <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
286   - <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
287   - </div>
288   - <div class="keyboard" v-if="activeKeyWordIndex !== 1">
289   - <span v-for="(item,index) in allKeyWord._7"
290   - :key="index"
291   - @click="clickKeyBoard(item)">{{item}}</span>
292   - <span class="bordernone"></span>
293   - <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
294   - </div>
295   - <div class="cancel">
296   - <span @click="keyBoardStatus = false">完成</span>
297   - </div>
  277 + <!--<div class="keyboard">-->
  278 + <!--<span v-for="(item,index) in allKeyWord._6"-->
  279 + <!--:key="index"-->
  280 + <!--@click="clickKeyBoard(item)">{{item}}</span>-->
  281 + <!--<span class="bordernone"></span>-->
  282 + <!--<span class="bordernone"></span>-->
  283 + <!--<span class="bordernone"></span>-->
  284 + <!--&lt;!&ndash; <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>-->
  285 + <!--<span class="bordernone" v-if="activeKeyWordIndex === 1"></span> &ndash;&gt;-->
  286 + <!--&lt;!&ndash; <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> &ndash;&gt;-->
  287 + <!--</div>-->
  288 + <!--<div class="keyboard" v-if="activeKeyWordIndex !== 1">-->
  289 + <!--<span v-for="(item,index) in allKeyWord._7"-->
  290 + <!--:key="index"-->
  291 + <!--@click="clickKeyBoard(item)">{{item}}</span>-->
  292 + <!--<span class="bordernone"></span>-->
  293 + <!--<span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>-->
  294 + <!--</div>-->
  295 + <!--<div class="cancel">-->
  296 + <!--<span @click="keyBoardStatus = false">完成</span>-->
  297 + <!--</div>-->
298 298 </div>
299 299  
300 300  
... ... @@ -348,13 +348,13 @@ export default {
348 348 num7: ''
349 349 },
350 350 allKeyWord: {
351   - _1: [1, 2, 3, 4, 5, 6, 7],
352   - _2: [8, 9, 0],
353   - _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
354   - _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
355   - _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
356   - _6: ['W', 'X', 'Y', 'Z'],
357   - _7: ['港', '澳', '学', '领', '警']
  351 + _1: [1, 2, 3, 4, 5, 6, 7,8, 9, 0],
  352 + // _2: [],
  353 + _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G','H', 'J', 'K',],
  354 + _4: [ 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S','T', 'U',],
  355 + _5: [ 'V','W', 'X', 'Y', 'Z','港', '澳', '学', '领', '警'],
  356 + _6: [],
  357 + _7: []
358 358 },
359 359 activeKeyWordIndex: 1, // 当前车牌号
360 360 keyBoardStatus: false,
... ... @@ -640,12 +640,12 @@ export default {
640 640 <style lang="scss" scoped>
641 641  
642 642 .swiper-container {
643   - height: 206px;
  643 + height: 160px;
644 644 }
645 645  
646 646 .swiper-slide {
647 647 /*width: 100%;*/
648   - height: 206px;
  648 + height: 150px;
649 649 background-repeat: no-repeat;
650 650 background-size: 100% 100%;
651 651 }
... ... @@ -706,8 +706,8 @@ export default {
706 706 background-color: #d8d8d8;
707 707 }
708 708 & > div {
709   - width: 1.8rem;
710   - height: 1.8rem;
  709 + width: 2.2rem;
  710 + height: 2.2rem;
711 711 border: 1px solid #e4e4e4;
712 712 &.first {
713 713 position: relative;
... ... @@ -751,7 +751,7 @@ export default {
751 751 width: 100%;
752 752 height: 100%;
753 753 font-size: 1rem;
754   - color: #828282;
  754 + color: #666;
755 755 &.first {
756 756 background-color: #9cbce2;
757 757 color: #fff;
... ... @@ -797,8 +797,8 @@ export default {
797 797 margin-bottom: 0.45rem;
798 798 .word {
799 799 box-sizing: border-box;
800   - width: 1.8rem;
801   - height: 1.8rem;
  800 + width: 2.2rem;
  801 + height: 2.2rem;
802 802 // border: 1px solid #9cbce2;
803 803 box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
804 804 border-radius: 0.16rem;
... ... @@ -819,6 +819,7 @@ export default {
819 819 color: #000;
820 820 // border: 1px solid #fff;
821 821 border-radius: 0.125rem;
  822 + font-size: 1.4rem;
822 823 }
823 824 img {
824 825 width: 1.6rem;
... ... @@ -840,16 +841,17 @@ export default {
840 841 display: flex;
841 842 justify-content: space-between;
842 843 align-items: center;
843   - height: 2rem;
  844 + height: 2.2rem;
844 845 margin-bottom: 0.3rem;
  846 + font-size: 1.2rem;
845 847 span {
846 848 text-align: center;
847 849 display: flex;
848   - width: 1.8rem;
  850 + width: 2.2rem;
849 851 align-items: center;
850 852 justify-content: center;
851   - height: 1.8rem;
852   - margin: 0 0.3rem;
  853 + height: 2.2rem;
  854 + margin: 0 0.1rem;
853 855 box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
854 856 background-color: #fff;
855 857 border-radius: 0.125rem;
... ...