弹窗样式

src/components/SimpleKeyboard.vue

@@ -129,15 +129,10 @@ export default {
         }
       } else if (button === '{clear}') {
         this.keyboard.clearInput()
-      } else {
+      } else if (button === '{shift}' || button === '{lock}') {
-        // let value = $event.target.offsetParent.parentElement.children[0].children[0].value
+        this.handleShift()
-        // // 输入框有默认值时，覆写
-        // if (value) {
-        //   this.keyboard.setInput(value)
-        // }
-        this.$emit('onKeyPress', button)
       }
-      if (button === '{shift}' || button === '{lock}') this.handleShift()
+      this.$emit('onKeyPress', button)
     },
     // 切换shift/默认布局
     handleShift () {

src/components/keyboard-input.vue

@@ -102,6 +102,17 @@ export default {
       }, 0)
     },
     onKeyPress (button) {
+      if (button === '{lock}' || button === '{shift}' || button === '{change}' || button === '{bksp}' || button === '{clear}') {
+        this.$nextTick(() => {
+          this.inputEle.focus()
+        })
+        setTimeout(() => {
+          this.inputEle.focus()
+        }, 0)
+      }
+      if (button === '{clear}') {
+        this.inputValue = ''
+      }
       console.log('onKeyPress', button)
     }
   }

src/pages/modules/login/login.vue

@@ -13,11 +13,21 @@
         <div class="login-items-wraper">
           <div class="login-item">
             <div class="login-label" @click="toFocus(1)">用户名</div>
-            <input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
+            <!-- <input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal"> -->
+            <div class="login_value">
+              <keyboard-input
+              inputClass="login-input"
+              keyboardClass="username"
+              :value="username"
+              @inputChange="inputChange"
+            ></keyboard-input>
+            </div>
           </div>
           <div class="login-item">
             <div class="login-label" @click="toFocus(2)">密码</div>
-            <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
+            <div class="login_value">
+              <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
+            </div>
           </div>
         </div>
         <div class="login-buttons-wraper">
@@ -28,11 +38,15 @@
         <div class="login-items-wraper">
           <div class="login-item">
             <div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
-            <input type="text" class="login-input login-input_1" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
+            <div class="login_value login_value_1">
+              <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
+            </div>
           </div>
           <div class="login-item">
             <div class="login-label login-label_1" @click="toFocus(4)">刷新时间（秒）</div>
-            <input type="number" class="login-input login-input_1" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
+            <div class="login_value login_value_1">
+              <input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
+            </div>
           </div>
         </div>
         <div class="login-buttons-wraper">
@@ -45,9 +59,13 @@
 </template>
 
 <script>
+import KeyboardInput from '@components/keyboard-input'
 import {authlogin} from '@config/getData2.js'
 import {encrypt} from '../../../main.js'
 export default {
+  components: {
+    KeyboardInput
+  },
   data () {
     return {
       tab: 0,
@@ -160,6 +178,9 @@ export default {
         this.input.blur()
         this.hide()
       }
+    },
+    inputChange (val) {
+      this.username = val
     }
   }
 }
@@ -220,8 +241,12 @@ export default {
   _font(30px, 80px, #AFBED8,,right)
 .login-label_1
   width 215px
-.login-input
+.login_value
   width calc(100% - 140px)
+.login_value_1
+  width calc(100% - 240px)
+.login-input
+  width 100%
   _font(30px, 78px, #fff,,)
   background: rgba(45,88,184,0.1);
   border: 1px solid #4980BD;
@@ -230,8 +255,6 @@ export default {
     background: rgba(45,88,184,0.25);
     border: 2px solid #21D0F2;
     line-height 76px
-.login-input_1
-  width calc(100% - 240px)
 .login-buttons-wraper
   width 100%
   margin-top 12px

src/pages/modules/login/login1.vue

@@ -30,7 +30,7 @@
               <keyboard-input
               inputClass="login-input"
               keyboardClass="password"
-              type="password"
+              type="text"
               :value="password"
               @inputChange="inputChange2"
             ></keyboard-input>

src/pages/modules/systemmanage/user.vue

@@ -72,11 +72,13 @@
         <div class="form_item">
           <div class="form_item__label">性别</div>
           <div class="form_item__content">
-            <div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
+            <div class="form_item__radio_wrap">
-              <div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
+              <div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
-                <input type="radio" class="radio__original" v-model="e.value">
+                <div class="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
+                  <input type="radio" class="radio__original" v-model="e.value">
+                </div>
+                <div class="radio__label" :class="{'radio__label_checked': e.value === sex}">{{ e.label }}</div>
               </div>
-              <div class="radio__label" :class="{'radio__label_checked': e.value === sex}">{{ e.label }}</div>
             </div>
           </div>
         </div>

src/style/common.styl

@@ -274,7 +274,7 @@
   -webkit-appearance: none;
   background-image: none;
   background: rgba(45,88,184,0.1);
-  border: 1px solid #4980BD;
+  border: 2px solid #4980BD;
   box-sizing: border-box;
   color: #fff;
   display: inline-block;
@@ -285,7 +285,7 @@
   padding: 0 10px;
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   width: 100%;
-  border-radius: 8px
+  // border-radius: 8px
   &:focus
     background: rgba(45,88,184,0.25);
     border: 2px solid #21D0F2;
@@ -293,6 +293,10 @@
   line-height 30px
   height 120px
   padding 10px
+.form_item__radio_wrap
+  height 80px;
+  display: flex;
+  align-items: center;
 .form_item__radio
   color: #fff;
   font-weight: 500;
@@ -341,7 +345,16 @@
   width 100%
 .el-select-dropdown
   background: rgba(7,31,62,0.95);
-  border: 1px solid #4980BD;
+  border: 2px solid #4980BD;
+.el-popper .popper__arrow
+  border-width: 10px;
+.el-popper[x-placement^=bottom] .popper__arrow
+  top: -10px;
+  border-bottom-color: #4980BD
+  &:after
+    border-bottom-color: #4980BD
+.el-select-dropdown__empty
+  font-size 30px
 .el-input, .el-select .el-input .el-select__caret, .el-select-dropdown__item
   font-size 30px
   color #fff
@@ -362,6 +375,7 @@
   font-size 30px
   line-height 80px
   height 80px
+  border 2px solid #4980BD
 .dialog_footer
   height 188px
   padding: 50px 20px;