弹窗样式

2023-11-21 18:33:00 +08:00
parent 8681e068bf
commit d98e51e99b
6 changed files with 68 additions and 23 deletions
--- a/src/components/SimpleKeyboard.vue
+++ b/src/components/SimpleKeyboard.vue
@@ -129,15 +129,10 @@ export default {
        }
      } else if (button === '{clear}') {
        this.keyboard.clearInput()
-      } else {
-        // let value = $event.target.offsetParent.parentElement.children[0].children[0].value
-        // // 输入框有默认值时，覆写
-        // if (value) {
-        //   this.keyboard.setInput(value)
-        // }
-        this.$emit('onKeyPress', button)
+      } else if (button === '{shift}' || button === '{lock}') {
+        this.handleShift()
      }
-      if (button === '{shift}' || button === '{lock}') this.handleShift()
+      this.$emit('onKeyPress', button)
    },
    // 切换shift/默认布局
    handleShift () {
--- a/src/components/keyboard-input.vue
+++ b/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)
    }
  }
--- a/src/pages/modules/login/login.vue
+++ b/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
--- a/src/pages/modules/login/login1.vue
+++ b/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>
--- a/src/pages/modules/systemmanage/user.vue
+++ b/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="radio__input" :class="{'icon_radio_checked': e.value === sex}" @click="toRadio(e)">
-                <input type="radio" class="radio__original" v-model="e.value">
+            <div class="form_item__radio_wrap">
+              <div class="form_item__radio" v-for="(e, i) in sexArr" :key="i">
+                <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>
--- a/src/style/common.styl
+++ b/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;