Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
NewTruckTerminalSyetem
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
SQL_Mou
NewTruckTerminalSyetem
Commits
5e6db50c
Commit
5e6db50c
authored
May 20, 2022
by
caicaicai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改
parent
d234e186
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
218 additions
and
275 deletions
+218
-275
SimpleKeyboardLogin.vue
src/components/simpleKeyboard/SimpleKeyboardLogin.vue
+0
-137
SimpleKeyboardPassWord.vue
src/components/simpleKeyboard/SimpleKeyboardPassWord.vue
+0
-136
index.vue
src/components/simpleKeyboard/index.vue
+174
-0
Login.vue
src/views/Login.vue
+44
-2
No files found.
src/components/simpleKeyboard/SimpleKeyboardLogin.vue
deleted
100644 → 0
View file @
d234e186
<
template
>
<div
:class=
"keyboardClass"
></div>
</
template
>
<
script
>
import
Keyboard
from
"
simple-keyboard
"
;
import
"
simple-keyboard/build/css/index.css
"
;
export
default
{
props
:
{
keyboardClass
:
{
default
:
"
simple-keyboard
"
,
type
:
String
},
input
:
{
type
:
String
}
},
data
:
()
=>
({
keyboard
:
null
,
}),
mounted
()
{
this
.
keyboard
=
new
Keyboard
(
this
.
keyboardClass
,
{
onChange
:
this
.
onChange
,
onKeyPress
:
this
.
onKeyPress
});
this
.
setKeyboard
()
},
methods
:
{
onChange
(
input
)
{
this
.
$emit
(
"
onChange
"
,
input
);
},
onKeyPress
(
button
)
{
this
.
$emit
(
"
onKeyPress
"
,
button
);
},
setKeyboard
()
{
this
.
keyboard
.
setOptions
({
layoutName
:
"
default
"
,
theme
:
"
hg-theme-default hg-layout-default myTheme
"
,
layout
:
{
default
:
[
"
1 2 3 4 5 6 7 8 9 0
"
,
"
q w e r t y u i o p
"
,
'
a s d f g h j k l
'
,
"
{bksp} z x c v b n m {enter}
"
,
]},
buttonTheme
:
[
{
class
:
"
bksp
"
,
buttons
:
"
{bksp}
"
},
{
class
:
"
enter
"
,
buttons
:
"
{enter}
"
}
],
display
:
{
'
{bksp}
'
:
"
删除
"
,
'
{enter}
'
:
"
确认
"
}
});
}
},
watch
:
{
input
(
input
)
{
this
.
keyboard
.
setInput
(
input
);
}
}
};
</
script
>
<
style
>
.simple-keyboard
{
max-width
:
950px
;
padding
:
15px
;
margin
:
0
auto
;
margin-top
:
380px
;
box-shadow
:
0
4px
0
#b2b2b2
,
0
7px
16px
rgba
(
0
,
0
,
0
,
.6
);
}
.hg-theme-default
.hg-button.hg-standardBtn
{
width
:
48px
;
height
:
50px
;
margin
:
8px
10px
;
font-size
:
23px
;
background-color
:
#fff
;
border-radius
:
8px
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
4px
0
#b2b2b2
,
0
5px
10px
rgba
(
0
,
0
,
0
,
.7
);
box-shadow
:
0
3px
0
#b2b2b2
,
0
4px
6px
rgba
(
0
,
0
,
0
,
.7
);
}
.hg-theme-default
.hg-button.hg-standardBtn
:active
{
box-shadow
:
0
4px
0
#717070
,
0
5px
3px
rgba
(
0
,
0
,
0
,
.9
);
background-color
:
#efefef
;
}
.simple-keyboard.hg-layout-default
.hg-button.bksp
{
height
:
50px
;
margin
:
8px
10px
;
font-size
:
23px
;
background-color
:
#fff
;
border-radius
:
8px
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
4px
0
#b2b2b2
,
0
5px
10px
rgba
(
0
,
0
,
0
,
.7
);
box-shadow
:
0
3px
0
#b2b2b2
,
0
4px
6px
rgba
(
0
,
0
,
0
,
.7
);
background
:
#a8001e
;
color
:
white
;
}
.simple-keyboard.hg-layout-default
.hg-button.bksp
:active
{
box-shadow
:
0
4px
0
#717070
,
0
5px
3px
rgba
(
0
,
0
,
0
,
.9
);
background-color
:
#efefef
;
color
:
#000000
;
}
.simple-keyboard.hg-layout-default
.hg-button.enter
{
height
:
50px
;
margin
:
8px
10px
;
font-size
:
23px
;
background-color
:
#fff
;
border-radius
:
8px
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
4px
0
#b2b2b2
,
0
5px
10px
rgba
(
0
,
0
,
0
,
.7
);
box-shadow
:
0
3px
0
#b2b2b2
,
0
4px
6px
rgba
(
0
,
0
,
0
,
.7
);
background
:
#a8001e
;
color
:
white
;
}
.simple-keyboard.hg-layout-default
.hg-button.enter
:active
{
box-shadow
:
0
4px
0
#717070
,
0
5px
3px
rgba
(
0
,
0
,
0
,
.9
);
background-color
:
#efefef
;
color
:
#000000
;
}
</
style
>
src/components/simpleKeyboard/SimpleKeyboardPassWord.vue
deleted
100644 → 0
View file @
d234e186
<
template
>
<div
:class=
"keyboardClass"
></div>
</
template
>
<
script
>
import
Keyboard
from
"
simple-keyboard
"
;
import
"
simple-keyboard/build/css/index.css
"
;
export
default
{
props
:
{
keyboardClass
:
{
default
:
"
simple-keyboard
"
,
type
:
String
},
input
:
{
type
:
String
}
},
data
:
()
=>
({
keyboard
:
null
,
}),
mounted
()
{
this
.
keyboard
=
new
Keyboard
(
this
.
keyboardClass
,
{
onChange
:
this
.
onChange
,
onKeyPress
:
this
.
onKeyPress
});
this
.
setKeyboard
()
},
methods
:
{
onChange
(
input
)
{
this
.
$emit
(
"
onChange
"
,
input
);
},
onKeyPress
(
button
)
{
this
.
$emit
(
"
onKeyPress
"
,
button
);
},
setKeyboard
()
{
this
.
keyboard
.
setOptions
({
layoutName
:
"
default
"
,
theme
:
"
hg-theme-default hg-layout-default myTheme
"
,
layout
:
{
default
:
[
"
1 2 3 4 5 6 7 8 9 0
"
,
"
q w e r t y u i o p
"
,
'
a s d f g h j k l
'
,
"
{bksp} z x c v b n m {enter}
"
,
]},
buttonTheme
:
[
{
class
:
"
bksp
"
,
buttons
:
"
{bksp}
"
},
{
class
:
"
enter
"
,
buttons
:
"
{enter}
"
}
],
display
:
{
'
{bksp}
'
:
"
删除
"
,
'
{enter}
'
:
"
确认
"
}
});
}
},
watch
:
{
input
(
input
)
{
this
.
keyboard
.
setInput
(
input
);
}
}
};
</
script
>
<
style
>
.simple-keyboard
{
max-width
:
950px
;
padding
:
15px
;
margin
:
0
auto
;
box-shadow
:
0
4px
0
#b2b2b2
,
0
7px
16px
rgba
(
0
,
0
,
0
,
.6
);
}
.hg-theme-default
.hg-button.hg-standardBtn
{
width
:
48px
;
height
:
50px
;
margin
:
8px
10px
;
font-size
:
23px
;
background-color
:
#fff
;
border-radius
:
8px
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
4px
0
#b2b2b2
,
0
5px
10px
rgba
(
0
,
0
,
0
,
.7
);
box-shadow
:
0
3px
0
#b2b2b2
,
0
4px
6px
rgba
(
0
,
0
,
0
,
.7
);
}
.hg-theme-default
.hg-button.hg-standardBtn
:active
{
box-shadow
:
0
4px
0
#717070
,
0
5px
3px
rgba
(
0
,
0
,
0
,
.9
);
background-color
:
#efefef
;
}
.simple-keyboard.hg-layout-default
.hg-button.bksp
{
height
:
50px
;
margin
:
8px
10px
;
font-size
:
23px
;
background-color
:
#fff
;
border-radius
:
8px
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
4px
0
#b2b2b2
,
0
5px
10px
rgba
(
0
,
0
,
0
,
.7
);
box-shadow
:
0
3px
0
#b2b2b2
,
0
4px
6px
rgba
(
0
,
0
,
0
,
.7
);
background
:
#a8001e
;
color
:
white
;
}
.simple-keyboard.hg-layout-default
.hg-button.bksp
:active
{
box-shadow
:
0
4px
0
#717070
,
0
5px
3px
rgba
(
0
,
0
,
0
,
.9
);
background-color
:
#efefef
;
color
:
#000000
;
}
.simple-keyboard.hg-layout-default
.hg-button.enter
{
height
:
50px
;
margin
:
8px
10px
;
font-size
:
23px
;
background-color
:
#fff
;
border-radius
:
8px
;
cursor
:
pointer
;
-webkit-box-shadow
:
0
4px
0
#b2b2b2
,
0
5px
10px
rgba
(
0
,
0
,
0
,
.7
);
box-shadow
:
0
3px
0
#b2b2b2
,
0
4px
6px
rgba
(
0
,
0
,
0
,
.7
);
background
:
#a8001e
;
color
:
white
;
}
.simple-keyboard.hg-layout-default
.hg-button.enter
:active
{
box-shadow
:
0
4px
0
#717070
,
0
5px
3px
rgba
(
0
,
0
,
0
,
.9
);
background-color
:
#efefef
;
color
:
#000000
;
}
</
style
>
src/components/simpleKeyboard/index.vue
0 → 100644
View file @
5e6db50c
<
template
>
<div
class=
"keyboardViews"
>
<ul
class=
"keyboard"
>
<li
v-for=
"(key,index) in keyList"
:key=
"index"
track-by=
"$index"
:class=
"
{delete: key === 'Delete', tab: key === 'Tab', capslock: key === 'Caps', enter: key === 'Enter', shift: key === 'Shift', space: key === 'Space', shifted: (key === 'Shift')
&&
hasShifted, capsed: (key === 'Caps')
&&
hasCapsed }" v-text="key" @click="clickKey(key)">
</li>
</ul>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
keyList
:
[],
normalKeyList
:
[],
shiftedKeyList
:
[],
capsedKeyList
:
[],
hasShifted
:
false
,
hasCapsed
:
false
,
keyvalue
:
''
,
closeText
:
''
,
}
},
created
(){
this
.
ready
();
},
methods
:
{
clickKey
(
key
)
{
switch
(
key
)
{
case
"
Delete
"
:
this
.
closeText
=
''
;
let
kbt
=
this
.
keyvalue
;
this
.
keyvalue
=
kbt
.
length
?
kbt
.
substring
(
0
,
kbt
.
length
-
1
)
:
kbt
;
break
;
case
"
Tab
"
:
this
.
closeText
=
''
;
this
.
keyvalue
+=
"
"
;
break
;
case
"
Enter
"
:
this
.
closeText
=
'
Enter
'
;
this
.
keyvalue
+=
"
"
;
break
;
case
"
Space
"
:
this
.
closeText
=
''
;
this
.
keyvalue
+=
"
"
;
break
;
case
"
Caps
"
:
this
.
closeText
=
''
;
this
.
hasCapsed
=
!
this
.
hasCapsed
;
this
.
keyList
=
this
.
hasCapsed
?
this
.
capsedKeyList
:
this
.
normalKeyList
;
break
;
case
"
Shift
"
:
this
.
closeText
=
''
;
this
.
hasShifted
=
!
this
.
hasShifted
;
this
.
keyList
=
this
.
hasShifted
?
this
.
shiftedKeyList
:
this
.
normalKeyList
;
break
;
default
:
this
.
closeText
=
''
;
this
.
keyvalue
+=
key
;
break
;
}
console
.
log
(
this
.
keyvalue
)
this
.
$emit
(
"
updatekey
"
,
this
.
keyvalue
,
this
.
closeText
)
this
.
$nextTick
(()
=>
{
if
(
this
.
closeText
==
'
Enter
'
){
this
.
keyvalue
=
''
;
}
})
},
ready
()
{
let
normalKeyList
=
[
'
`
'
,
'
1
'
,
'
2
'
,
'
3
'
,
'
4
'
,
'
5
'
,
'
6
'
,
'
7
'
,
'
8
'
,
'
9
'
,
'
0
'
,
'
-
'
,
'
=
'
,
'
Delete
'
,
'
Tab
'
,
'
q
'
,
'
w
'
,
'
e
'
,
'
r
'
,
'
t
'
,
'
y
'
,
'
u
'
,
'
i
'
,
'
o
'
,
'
p
'
,
'
[
'
,
'
]
'
,
'
\\
'
,
'
Caps
'
,
'
a
'
,
'
s
'
,
'
d
'
,
'
f
'
,
'
g
'
,
'
h
'
,
'
j
'
,
'
k
'
,
'
l
'
,
'
;
'
,
"
'
"
,
'
Enter
'
,
'
Shift
'
,
'
z
'
,
'
x
'
,
'
c
'
,
'
v
'
,
'
b
'
,
'
n
'
,
'
m
'
,
'
,
'
,
'
.
'
,
'
/
'
,
'
Shift
'
,
'
Space
'
],
shiftedKeyList
=
[
'
~
'
,
'
!
'
,
'
@
'
,
'
#
'
,
'
$
'
,
'
%
'
,
'
^
'
,
'
&
'
,
'
*
'
,
'
(
'
,
'
)
'
,
'
_
'
,
'
+
'
,
'
Delete
'
,
'
Tab
'
,
'
Q
'
,
'
W
'
,
'
E
'
,
'
R
'
,
'
T
'
,
'
Y
'
,
'
U
'
,
'
I
'
,
'
O
'
,
'
P
'
,
'
{
'
,
'
}
'
,
'
|
'
,
'
Caps
'
,
'
A
'
,
'
S
'
,
'
D
'
,
'
F
'
,
'
G
'
,
'
H
'
,
'
J
'
,
'
K
'
,
'
L
'
,
'
:
'
,
'
"
'
,
'
Enter
'
,
'
Shift
'
,
'
Z
'
,
'
X
'
,
'
C
'
,
'
V
'
,
'
B
'
,
'
N
'
,
'
M
'
,
'
<
'
,
'
>
'
,
'
?
'
,
'
Shift
'
,
'
Space
'
],
capsedKeyList
=
[
'
`
'
,
'
1
'
,
'
2
'
,
'
3
'
,
'
4
'
,
'
5
'
,
'
6
'
,
'
7
'
,
'
8
'
,
'
9
'
,
'
0
'
,
'
-
'
,
'
=
'
,
'
Delete
'
,
'
Tab
'
,
'
Q
'
,
'
W
'
,
'
E
'
,
'
R
'
,
'
T
'
,
'
Y
'
,
'
U
'
,
'
I
'
,
'
O
'
,
'
P
'
,
'
[
'
,
'
]
'
,
'
\\
'
,
'
Caps
'
,
'
A
'
,
'
S
'
,
'
D
'
,
'
F
'
,
'
G
'
,
'
H
'
,
'
J
'
,
'
K
'
,
'
L
'
,
'
;
'
,
"
'
"
,
'
Enter
'
,
'
Shift
'
,
'
Z
'
,
'
X
'
,
'
C
'
,
'
V
'
,
'
B
'
,
'
N
'
,
'
M
'
,
'
,
'
,
'
.
'
,
'
/
'
,
'
Shift
'
,
'
Space
'
];
this
.
keyList
=
this
.
normalKeyList
=
normalKeyList
;
this
.
shiftedKeyList
=
shiftedKeyList
;
this
.
capsedKeyList
=
capsedKeyList
;
}
},
}
</
script
>
<
style
lang=
"scss"
scoped
>
.keyboardViews
{
height
:
100vh
;
width
:
100vw
;
background-color
:
rgba
(
0
,
0
,
0
,
0
.2
);
}
.keyboard
{
position
:
absolute
;
bottom
:
0
;
left
:
50%
;
transform
:
translateX
(
-50%
);
width
:
688px
;
margin
:
0
;
padding
:
0
;
list-style
:
none
;
user-select
:
none
;
li
{
float
:
left
;
margin
:
0
5px
5px
0
;
width
:
40px
;
height
:
40px
;
line-height
:
40px
;
text-align
:
center
;
background
:
#fff
;
border
:
1px
solid
#e5e5e5
;
border-radius
:
5px
;
&
:hover
{
position
:
relative
;
border-color
:
gray
;
cursor
:
pointer
;
}
&
:active
{
top
:
1px
;
left
:
1px
;
}
}
.tab
,
.delete
{
width
:
70px
;
}
.capslock
{
width
:
80px
;
}
.enter
{
width
:
77px
;
}
.shift
{
width
:
102px
;
}
.space
{
clear
:
left
;
width
:
681px
;
}
.shifted
{
position
:
relative
;
top
:
1px
;
left
:
1px
;
border-color
:
#e5e5e5
;
cursor
:
pointer
;
}
.capsed
{
position
:
relative
;
top
:
1px
;
left
:
1px
;
border-color
:
#e5e5e5
;
cursor
:
pointer
;
}
}
</
style
>
\ No newline at end of file
src/views/Login.vue
View file @
5e6db50c
...
...
@@ -14,6 +14,7 @@
v-model=
"loginForm.username"
id=
"userInp"
placeholder=
"输入你的用户名"
@
focus=
"showkey('username')"
></el-input>
</el-form-item>
<el-form-item
class=
"passWordInpBody"
>
...
...
@@ -21,16 +22,18 @@
<img
src=
"../assets/imgs/mima.png"
/>
</div>
<el-input
type=
"password"
v-model=
"loginForm.password"
id=
"passWordInp"
placeholder=
"输入你的密码"
@
focus=
"showkey('password')"
></el-input>
</el-form-item>
</el-form>
<button
class=
"loginBtn"
@
click=
"LoginInitiation"
>
安全登录
</button>
</div>
</div>
<keyboard
v-on:updatekey=
"GetKeyVal"
class=
"keyboardStyle"
v-show=
"keyboardShow"
></keyboard>
</div>
</
template
>
...
...
@@ -40,6 +43,9 @@ import { login, code } from "@/axios/api.js";
import
{
encrypt
}
from
"
@/utils/rsaEncrypt.js
"
;
import
Cookies
from
"
js-cookie
"
;
import
{
config
as
appConfig
}
from
"
../config.js
"
;
import
Keyboard
from
'
../components/simpleKeyboard/index.vue
'
export
default
{
name
:
"
login
"
,
data
()
{
...
...
@@ -50,6 +56,8 @@ export default {
uuid
:
""
,
},
loading
:
false
,
keyboardShow
:
false
,
keyboardShowType
:
''
,
};
},
created
()
{
...
...
@@ -58,6 +66,9 @@ export default {
// 获取用户名密码等Cookie
this
.
getCookie
();
},
components
:
{
Keyboard
},
methods
:
{
getCode
()
{
httpGet
(
code
).
then
((
res
)
=>
{
...
...
@@ -124,6 +135,31 @@ export default {
})
}
this
.
loading
=
false
;
},
//开启键盘
showkey
(
text
){
this
.
keyboardShowType
=
text
;
this
.
keyboardShow
=
true
;
if
(
this
.
keyboardShowType
==
'
username
'
){
this
.
loginForm
.
username
=
''
;
}
else
{
this
.
loginForm
.
password
=
''
;
}
},
//关闭键盘
closekey
(){
this
.
keyboardShow
=
false
;
},
GetKeyVal
(
val
,
close
){
if
(
close
==
'
Enter
'
){
this
.
keyboardShow
=
false
;
}
else
{
if
(
this
.
keyboardShowType
==
'
username
'
){
this
.
loginForm
.
username
=
val
;
}
else
{
this
.
loginForm
.
password
=
val
;
}
}
}
},
};
...
...
@@ -134,6 +170,12 @@ export default {
margin
:
0
;
padding
:
0
;
}
.keyboardStyle
{
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
100
;
}
.backGround
{
padding-top
:
50px
;
box-sizing
:
border-box
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment