键盘优化

刘淇
1 parent f9976583
Showing 3 changed files with 36 additions and 24 deletions
src/assets/images/carBg.png
src/components/parkRecord.vue
src/components/plateNumber.vue
@@ -15,7 +15,7 @@
       <div v-show="currentTabActive==0">
         <div v-if="parkingData.length>0">
-          <p class="free-tip" v-if="parkingData[0].parkDuration<=900">停车15分钟内无需缴费，请申请离场。</p>
+          <p class="free-tip" v-if="parkingData[0].parkDuration<=900">无需缴费，请直接离场。</p>
           <div class="cost-main" v-for="i in parkingData">
             <ul class="cost-header">
@@ -330,7 +330,7 @@ export default {
         } else {
           //$('.dialog-out').show()
-          this.$msgbox('提示', '停车15分钟内无需缴费，申请成功。')
+          this.$msgbox('提示', '无需缴费，请直接离场。')
         }
       })
 <template>
   <div id="page">
     <div class="wrap">
-      <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
+      <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
-      <ul class="color-choose">
-        <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
-        :style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"
-        >
-          {{i.name}}
-        </li>
+      <!--<ul class="color-choose">-->
+        <!--<li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"-->
+        <!--:style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"-->
+        <!--&gt;-->
+          <!--{{i.name}}-->
+        <!--</li>-->
-      </ul>
+      <!--</ul>-->
-      <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
+      <p style="margin-bottom: 18px;margin-top: 18px;" class="titleBg">请输入车牌号码</p>
       <div class="num-box">
         <div class="num0" @click="clickFirstWrap()">
           <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>
@@ -299,8 +299,8 @@ export default {
       activeBG:'#0054C0',
       formData: {
         commonCard: '1',
-        num0: '',
-        num1: '',
+        num0: '苏',
+        num1: 'B',
         num2: '',
         num3: '',
         num4: '',
@@ -538,6 +538,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+  .titleBg{
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    color: #fff;
+    font-size: 18px;
+    background: url("../assets/images/carBg.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+  }
   .flex-items-center {
     display: flex;
     align-items: center;
@@ -594,8 +604,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;
@@ -622,7 +632,7 @@ export default {
             width: 100%;
             height: 100%;
             // background-color: #9cbce2;
-            color: #828282;
+            color: #666;
             line-height: 1.8rem;
           }
         }
@@ -638,8 +648,8 @@ export default {
           justify-content: center;
           width: 100%;
           height: 100%;
-          font-size: 1rem;
-          color: #828282;
+          font-size: 1.2rem;
+          color: #666;
           &.first {
             background-color: #9cbce2;
             color: #fff;
@@ -685,8 +695,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;
@@ -707,6 +717,7 @@ export default {
           color: #000;
           // border: 1px solid #fff;
           border-radius: 0.125rem;
+          font-size: 1.2rem;
         }
         img {
           width: 1.6rem;
@@ -728,15 +739,16 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: 2rem;
+      height: 2.2rem;
       margin-bottom: 0.3rem;
       span {
         text-align: center;
         display: flex;
-        width: 1.8rem;
+        width: 2.2rem;
         align-items: center;
+        font-size: 1.2rem;
         justify-content: center;
-        height: 1.8rem;
+        height: 2.2rem;
         margin: 0 0.3rem;
         box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
         background-color: #fff;