sov
This commit is contained in:
228
src/components/SimpleKeyboard.vue
Normal file
228
src/components/SimpleKeyboard.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div :class="keyboardClass"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Keyboard from 'simple-keyboard'
|
||||
import 'simple-keyboard/build/css/index.css'
|
||||
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
|
||||
|
||||
export default {
|
||||
name: 'SimpleKeyboard',
|
||||
props: {
|
||||
keyboardClass: {
|
||||
default: 'simple-keyboard',
|
||||
type: String
|
||||
},
|
||||
input: {
|
||||
default: ''
|
||||
},
|
||||
maxLength: { default: '' }
|
||||
},
|
||||
data: () => ({
|
||||
keyboard: null,
|
||||
displayDefault: {
|
||||
'{bksp}': 'backspace',
|
||||
'{lock}': 'Caps lock',
|
||||
'{enter}': 'Enter',
|
||||
'{tab}': 'Tab',
|
||||
'{shift}': 'Shift',
|
||||
'{change}': '中文<span class="font-s">/En</span>',
|
||||
'{space}': ' ',
|
||||
'{clear}': 'Clear',
|
||||
'{close}': 'Close'
|
||||
}
|
||||
}),
|
||||
mounted () {
|
||||
this.keyboard = new Keyboard(this.keyboardClass, {
|
||||
onChange: this.onChange,
|
||||
onKeyPress: this.onKeyPress,
|
||||
layoutCandidates: layout.layoutCandidates,
|
||||
layout: {
|
||||
// 默认布局
|
||||
default: [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
"{lock} a s d f g h j k l ; ' {enter}",
|
||||
'{shift} z x c v b n m , . / {clear}',
|
||||
'{change} {space} {close}'
|
||||
], // shift布局
|
||||
shift: [
|
||||
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
||||
'{tab} Q W E R T Y U I O P { } |',
|
||||
'{lock} A S D F G H J K L : " {enter}',
|
||||
'{shift} Z X C V B N M < > ? {clear}',
|
||||
'{change} {space} {close}'
|
||||
]
|
||||
},
|
||||
// 按钮展示文字
|
||||
display: this.displayDefault,
|
||||
// 按钮样式
|
||||
buttonTheme: [
|
||||
{
|
||||
class: 'hg-gray',
|
||||
buttons: '{bksp}'
|
||||
},
|
||||
{
|
||||
class: 'hg-gray',
|
||||
buttons: '{tab}'
|
||||
},
|
||||
{
|
||||
class: 'hg-gray',
|
||||
buttons: '{lock}'
|
||||
},
|
||||
{
|
||||
class: 'hg-gray',
|
||||
buttons: '{enter}'
|
||||
},
|
||||
{
|
||||
class: 'hg-gray',
|
||||
buttons: '{shift}'
|
||||
},
|
||||
{
|
||||
class: 'hg-gray',
|
||||
buttons: '{clear}'
|
||||
},
|
||||
{
|
||||
class: 'hg-blue',
|
||||
buttons: '{close}'
|
||||
},
|
||||
{
|
||||
class: 'hg-blue',
|
||||
buttons: '{change}'
|
||||
}
|
||||
],
|
||||
// 输入限制长度
|
||||
maxLength: this.maxLength
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onChange (input) {
|
||||
this.$emit('onChange', input)
|
||||
},
|
||||
onKeyPress (button, $event) {
|
||||
// 点击关闭
|
||||
if (button === '{close}') {
|
||||
// debugger
|
||||
// this.$parent.closekeyboard()
|
||||
let arr = document.querySelectorAll('.hg-theme-default')
|
||||
arr.forEach((ele) => {
|
||||
ele.style.visibility = 'hidden'
|
||||
})
|
||||
return false
|
||||
} else if (button === '{change}') {
|
||||
// 切换中英文输入法
|
||||
if (this.keyboard.options.layoutCandidates !== null) {
|
||||
this.$set(this.displayDefault, '{change}', 'En<span class="font-s">/中文</span>')
|
||||
// 切换至英文
|
||||
this.keyboard.setOptions({
|
||||
layoutCandidates: null,
|
||||
display: this.displayDefault
|
||||
})
|
||||
} else {
|
||||
// 切换至中文
|
||||
this.$set(this.displayDefault, '{change}', '中文<span class="font-s">/En</span>')
|
||||
this.keyboard.setOptions({
|
||||
layoutCandidates: layout.layoutCandidates,
|
||||
display: this.displayDefault
|
||||
})
|
||||
}
|
||||
} else if (button === '{clear}') {
|
||||
this.keyboard.clearInput()
|
||||
} else if (button === '{shift}' || button === '{lock}') {
|
||||
this.handleShift()
|
||||
}
|
||||
this.$emit('onKeyPress', button)
|
||||
},
|
||||
// 切换shift/默认布局
|
||||
handleShift () {
|
||||
let currentLayout = this.keyboard.options.layoutName
|
||||
let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
input (input) {
|
||||
this.keyboard.setInput(input)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@deep: ~'>>>';
|
||||
.hg-theme-default
|
||||
visibility hidden
|
||||
position fixed
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width 100%
|
||||
padding: 1em;
|
||||
background-color: #eee;
|
||||
box-shadow: 0 -3px 10px rgba(0,0,0,.3);
|
||||
border-radius: 10px;
|
||||
font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
|
||||
overflow visible
|
||||
/deep/ .hg-rows
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
& .hg-row:not(:last-child)
|
||||
margin-bottom: 0.5em;
|
||||
& .hg-row
|
||||
justify-content: space-around;
|
||||
& .hg-row .hg-button:not(:last-child)
|
||||
margin-right: 0.5em;
|
||||
& .hg-button
|
||||
flex: 40;
|
||||
height: 2.2em;
|
||||
line-height: 2.2em;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #ccc;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px rgba(0,0,0,.6);
|
||||
border-radius: 0.35em;
|
||||
font-size: 1.25em;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
& .hg-button-bksp
|
||||
flex: 65 1 0%;
|
||||
background-image: url("../images/backspace.svg");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 35%;
|
||||
color: #fff;
|
||||
background-color: #7d7d7d;
|
||||
border-color: #656565;
|
||||
span
|
||||
color transparent
|
||||
& .hg-gray
|
||||
color: #fff;
|
||||
background-color: #7d7d7d;
|
||||
border-color: #656565;
|
||||
& .hg-blue
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
border-color: #2e6da4;
|
||||
& .hg-button-tab
|
||||
flex: 60 1 0%;
|
||||
& .hg-button-lock, .hg-button-enter
|
||||
flex: 80 1 0%;
|
||||
& .hg-button-shift, .hg-button-clear
|
||||
flex: 100 1 0%;
|
||||
& .hg-button-space
|
||||
flex: 180 1 0%;
|
||||
& .font-s
|
||||
font-size .75em
|
||||
opacity 0.6
|
||||
</style>
|
||||
136
src/components/keyboard-input.vue
Normal file
136
src/components/keyboard-input.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="input-keyboard">
|
||||
<input
|
||||
v-model="inputValue"
|
||||
:autofocus="autofocus"
|
||||
:class="inputClass"
|
||||
:type="type"
|
||||
:show-password="showPassword"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
@focus="focusInput($event)"
|
||||
@input="inputFun"
|
||||
>
|
||||
<SimpleKeyboard
|
||||
:ref="keyboardClass"
|
||||
:keyboardClass="keyboardClass"
|
||||
@onChange="onChange"
|
||||
@onKeyPress="onKeyPress"
|
||||
:input="inputValue"
|
||||
:maxLength="maxlength"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SimpleKeyboard from './SimpleKeyboard'
|
||||
export default {
|
||||
name: 'keyboard-input',
|
||||
components: {
|
||||
SimpleKeyboard
|
||||
},
|
||||
props: {
|
||||
keyboardClass: String,
|
||||
autofocus: Boolean,
|
||||
value: {
|
||||
default: ''
|
||||
},
|
||||
inputClass: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
showPassword: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxlength: Number,
|
||||
placeholder: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
input: null,
|
||||
inputEle: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.value
|
||||
},
|
||||
set (value) {
|
||||
this.$emit('inputChange', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inputChange () {
|
||||
this.$emit('inputChange')
|
||||
},
|
||||
inputFun () {
|
||||
this.$emit('input')
|
||||
},
|
||||
focusInput (e) {
|
||||
this.inputEle = e.srcElement
|
||||
// 关闭所有keyboard
|
||||
let arr = document.querySelectorAll('.hg-theme-default')
|
||||
arr.forEach((ele) => {
|
||||
ele.style.visibility = 'hidden'
|
||||
})
|
||||
// 打开当前输入框的keyboard
|
||||
let currentKeyborad = this.$refs[this.keyboardClass]
|
||||
currentKeyborad.$el.style.visibility = 'visible'
|
||||
this.$nextTick(() => {
|
||||
this.$emit('focus')
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$emit('focus')
|
||||
}, 0)
|
||||
},
|
||||
onChange (input) {
|
||||
this.inputValue = input
|
||||
this.$nextTick(() => {
|
||||
this.inputEle.focus()
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.inputEle.focus()
|
||||
}, 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.input-keyboard
|
||||
width 100%
|
||||
.login-input
|
||||
width 100%
|
||||
_font(30px, 78px, #fff,,)
|
||||
background: rgba(45,88,184,0.1);
|
||||
border: 1px solid #4980BD;
|
||||
padding 0 22px
|
||||
&:focus
|
||||
background: rgba(45,88,184,0.25);
|
||||
border: 2px solid #21D0F2;
|
||||
line-height 76px
|
||||
</style>
|
||||
1
src/images/backspace.svg
Normal file
1
src/images/backspace.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M44 6h-30c-1.38 0-2.47.7-3.19 1.76l-10.81 16.23 10.81 16.23c.72 1.06 1.81 1.78 3.19 1.78h30c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm-6 25.17l-2.83 2.83-7.17-7.17-7.17 7.17-2.83-2.83 7.17-7.17-7.17-7.17 2.83-2.83 7.17 7.17 7.17-7.17 2.83 2.83-7.17 7.17 7.17 7.17z" fill="white"/></svg>
|
||||
|
After Width: | Height: | Size: 438 B |
@@ -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
|
||||
|
||||
299
src/pages/modules/login/login1.vue
Normal file
299
src/pages/modules/login/login1.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<div class="login_logo"></div>
|
||||
</div>
|
||||
<div class="login-bottom"></div>
|
||||
<div class="login-wraper">
|
||||
<div class="navs-wraper">
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">密码登录</button>
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
|
||||
</div>
|
||||
<div v-show="tab === 0" class="login-content_wraper">
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(1)">用户名</div>
|
||||
<div class="login_value">
|
||||
<!-- <input type="text" class="login-input" ref="input1" v-model="username" data-refs="username" @focus="onInputFocus($event, 'username')"> -->
|
||||
<keyboard-input
|
||||
inputClass="login-input"
|
||||
keyboardClass="username"
|
||||
:value="username"
|
||||
@inputChange="inputChange1"
|
||||
></keyboard-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-item">
|
||||
<div class="login-label" @click="toFocus(2)">密码</div>
|
||||
<div class="login_value">
|
||||
<!-- <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal"> -->
|
||||
<keyboard-input
|
||||
inputClass="login-input"
|
||||
keyboardClass="password"
|
||||
type="text"
|
||||
:value="password"
|
||||
@inputChange="inputChange2"
|
||||
></keyboard-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-buttons-wraper">
|
||||
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tab === 1" class="login-content_wraper">
|
||||
<div class="login-items-wraper">
|
||||
<div class="login-item">
|
||||
<div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
|
||||
<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>
|
||||
<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">
|
||||
<button class="button_control" @click="saveSetup"><p>配置</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" /> -->
|
||||
</div>
|
||||
</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,
|
||||
username: '啊啊',
|
||||
password: '',
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
disabled: false,
|
||||
visible: false,
|
||||
layout: 'compact',
|
||||
input: '',
|
||||
options: {
|
||||
useKbEvents: false,
|
||||
preventClickEvent: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 点对点项目分辨率 1024 * 768
|
||||
// alert(document.body.clientWidth, 'a')
|
||||
// alert(document.body.clientHeight, 'b')
|
||||
// alert(window.screen.width, 'c')
|
||||
// alert(window.screen.height, 'd')
|
||||
},
|
||||
methods: {
|
||||
toFocus (i) {
|
||||
switch (i) {
|
||||
case 1:
|
||||
this.$refs.input1.focus()
|
||||
break
|
||||
case 2:
|
||||
this.$refs.input2.focus()
|
||||
break
|
||||
case 3:
|
||||
this.$refs.input3.focus()
|
||||
break
|
||||
case 4:
|
||||
this.$refs.input4.focus()
|
||||
break
|
||||
}
|
||||
},
|
||||
toSetup () {
|
||||
this.tab = 1
|
||||
this.hide()
|
||||
},
|
||||
toLogin () {
|
||||
this.tab = 0
|
||||
this.hide()
|
||||
},
|
||||
saveSetup () {
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this.toLogin()
|
||||
},
|
||||
saveLogin () {
|
||||
this.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('请输入用户名')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
this.toast('请输入密码')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
this._authlogin()
|
||||
},
|
||||
async _authlogin () {
|
||||
try {
|
||||
let res = await authlogin(this.username, encrypt(this.password))
|
||||
let obj = {}
|
||||
obj = Object.assign({}, res)
|
||||
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
||||
this.hide()
|
||||
this.$router.push('/index/home')
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
this.toast(err)
|
||||
}
|
||||
},
|
||||
show (e) {
|
||||
this.input = e.target
|
||||
this.layout = e.target.dataset.layout
|
||||
if (!this.visible) {
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
hide () {
|
||||
this.visible = false
|
||||
},
|
||||
accept () {
|
||||
this.hide()
|
||||
},
|
||||
next () {
|
||||
let inputs = document.querySelectorAll('input')
|
||||
let found = false;
|
||||
[].forEach.call(inputs, (item, i) => {
|
||||
if (!found && item === this.input && i < inputs.length - 1) {
|
||||
found = true
|
||||
this.$nextTick(() => {
|
||||
inputs[i + 1].focus()
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!found) {
|
||||
this.input.blur()
|
||||
this.hide()
|
||||
}
|
||||
},
|
||||
inputChange1 (val) {
|
||||
this.username = val
|
||||
},
|
||||
inputChange2 (val) {
|
||||
this.password = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.login-container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
|
||||
_fj(center)
|
||||
.login-header
|
||||
position absolute
|
||||
top 0
|
||||
_wh(100%, 181px)
|
||||
background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
|
||||
.login_logo
|
||||
_wh(100%, 100%)
|
||||
background center / 532px 127px url(../../../images/new/logo.png) no-repeat
|
||||
.login-bottom
|
||||
position absolute
|
||||
bottom 0
|
||||
_wh(100%, 175px)
|
||||
background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
|
||||
.login-wraper
|
||||
_wh(900px, 702px)
|
||||
padding 87px 85px 50px 70px
|
||||
background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
|
||||
.login-content_wraper
|
||||
width 100%
|
||||
padding 51px 45px 51px
|
||||
margin 0 auto
|
||||
_fj(center,,column)
|
||||
.navs-wraper
|
||||
_wh(100%, 107px)
|
||||
_fj(flex-start)
|
||||
background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
|
||||
padding 1px 0 35px 28px
|
||||
.nav_item
|
||||
_wh(270px, 73px)
|
||||
padding 10px 0 0 52px
|
||||
_font(40px, 40px, #99B1DD,,)
|
||||
font-family: YouSheBiaoTiHei;
|
||||
background none
|
||||
&:first-child
|
||||
background center / 100% url(../../../images/new/login_tab.png) no-repeat
|
||||
.nav_item_active
|
||||
color #fff
|
||||
.login-items-wraper
|
||||
width 100%
|
||||
.login-item
|
||||
_fj()
|
||||
width 100%
|
||||
margin-bottom 40px
|
||||
.login-label
|
||||
width 115px
|
||||
_font(30px, 80px, #AFBED8,,right)
|
||||
.login-label_1
|
||||
width 215px
|
||||
.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;
|
||||
padding 0 22px
|
||||
&:focus
|
||||
background: rgba(45,88,184,0.25);
|
||||
border: 2px solid #21D0F2;
|
||||
line-height 76px
|
||||
.login-buttons-wraper
|
||||
width 100%
|
||||
margin-top 12px
|
||||
padding-left 180px
|
||||
.button-login
|
||||
width 100%
|
||||
border-radius 20px
|
||||
letter-spacing 5px
|
||||
.footer_wraper
|
||||
position absolute
|
||||
width 70%
|
||||
bottom 20px
|
||||
left 50%
|
||||
transform translateX(-50%)
|
||||
.footer_p1
|
||||
_font(14px, 24px, #fff,,center)
|
||||
.footer_p2
|
||||
_font(15px, 24px, #fff,,center)
|
||||
#keyboard
|
||||
position fixed
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
z-index 1000
|
||||
width 100%
|
||||
// max-width 1366px
|
||||
margin 0 auto
|
||||
padding 1em
|
||||
background-color #EEE
|
||||
box-shadow 0px -3px 10px rgba(black, 0.3)
|
||||
border-radius 10px
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user