|
|
@@ -1,871 +0,0 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<title>Document</title> |
|
|
|
<style> |
|
|
|
body{ |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
li { |
|
|
|
list-style-type: none; |
|
|
|
} |
|
|
|
@media screen and (orientation: portrait) { |
|
|
|
.login { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background-image: url("/static/img/phoneBgc.jpg"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
.register { |
|
|
|
background-image: url("/static/img/registerBgc.jpg") !important; |
|
|
|
padding-top: 15vh; |
|
|
|
} |
|
|
|
.logo { |
|
|
|
width: 15vw; |
|
|
|
margin: 4vw 0 0 4vw; |
|
|
|
} |
|
|
|
.login_title { |
|
|
|
width: 100vw; |
|
|
|
font-size: 8vw; |
|
|
|
text-align: center; |
|
|
|
margin-top: 15vh; |
|
|
|
} |
|
|
|
.register_loginTitle { |
|
|
|
width: 100vw; |
|
|
|
font-size: 8vw; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.input_box { |
|
|
|
width: 100vw; |
|
|
|
height: 25vw; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-top: 5vh; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.register_inputBox { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-top: 5vh; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.phone_input{ |
|
|
|
width: 50vw; |
|
|
|
height: 11vw; |
|
|
|
border-radius: 2vw; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 3vw; |
|
|
|
padding-left: 2vw; |
|
|
|
border: 1px solid #000; |
|
|
|
position: absolute; |
|
|
|
top: 0vw; |
|
|
|
} |
|
|
|
.register_phoneInput { |
|
|
|
width: 50vw; |
|
|
|
height: 5vh; |
|
|
|
border-radius: 2vw; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 3vw; |
|
|
|
padding-left: 2vw; |
|
|
|
border: 1px solid #000; |
|
|
|
margin-bottom: 2vh; |
|
|
|
} |
|
|
|
.code_input { |
|
|
|
width: 50vw; |
|
|
|
height: 11vw; |
|
|
|
margin-top: 2vh; |
|
|
|
border-radius: 2vw; |
|
|
|
padding-left: 2vw; |
|
|
|
font-size: 3vw; |
|
|
|
background-color: transparent; |
|
|
|
border: 1px solid #000; |
|
|
|
position: absolute; |
|
|
|
top: 10vw; |
|
|
|
} |
|
|
|
.register_codeInput { |
|
|
|
width: 50vw; |
|
|
|
height: 5vh; |
|
|
|
border-radius: 2vw; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 3vw; |
|
|
|
padding-left: 2vw; |
|
|
|
border: 1px solid #000; |
|
|
|
} |
|
|
|
.login_button { |
|
|
|
width: 40vw; |
|
|
|
height: 5vh; |
|
|
|
background-color: rgb(101, 161, 255); |
|
|
|
border-radius: 10vw; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color:#fff; |
|
|
|
font-size: 4vw; |
|
|
|
margin: 2vh 0 0 30vw; |
|
|
|
} |
|
|
|
.register_loginButton { |
|
|
|
width: 40vw; |
|
|
|
height: 5vh; |
|
|
|
background-color: rgb(101, 161, 255); |
|
|
|
border-radius: 10vw; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color:#fff; |
|
|
|
font-size: 4vw; |
|
|
|
margin: 2vh 0 0 30vw; |
|
|
|
} |
|
|
|
.send_code { |
|
|
|
position: absolute; |
|
|
|
font-size: 2.5vw; |
|
|
|
top: 18.5vw; |
|
|
|
right: 30vw; |
|
|
|
border-left: 2px solid; |
|
|
|
padding-left: 2vw; |
|
|
|
} |
|
|
|
.employee { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.administrator { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-left: 5vw; |
|
|
|
} |
|
|
|
.choose_employee { |
|
|
|
width: 2vw; |
|
|
|
height: 2vw; |
|
|
|
border-radius: 50%; |
|
|
|
border: 2px solid #000; |
|
|
|
margin-right: 1vw; |
|
|
|
} |
|
|
|
.choose_administrator { |
|
|
|
width: 2vw; |
|
|
|
height: 2vw; |
|
|
|
border-radius: 50%; |
|
|
|
border: 2px solid #000; |
|
|
|
margin-right: 1vw; |
|
|
|
} |
|
|
|
.login_style { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 2.5vw; |
|
|
|
margin-top: 2vh; |
|
|
|
} |
|
|
|
.hidden { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.active { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.background { |
|
|
|
background-color: #000; |
|
|
|
} |
|
|
|
.password-container { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.password_toggle { |
|
|
|
position: absolute; |
|
|
|
width: 5vw; |
|
|
|
top: 18vw; |
|
|
|
right: 26vw; |
|
|
|
} |
|
|
|
.approval_page { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background-image: url("/static/img/registerBgc.jpg"); |
|
|
|
background-size: 100% 100%; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.approval_box { |
|
|
|
max-width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
background-color:rgba(237,237,237,0.8); |
|
|
|
} |
|
|
|
.search_people { |
|
|
|
width: 80vw; |
|
|
|
height: 5vh; |
|
|
|
border-radius: 1vw; |
|
|
|
margin: 5vh 0 0 10vw; |
|
|
|
border: 0 solid #fff; |
|
|
|
font-size: 3vw; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.every_info { |
|
|
|
height: 7vh; |
|
|
|
margin-top: 3vh; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
font-size: 3vw; |
|
|
|
} |
|
|
|
#scroll-to-top-btn { |
|
|
|
display: none; |
|
|
|
position: fixed; |
|
|
|
right: 20px; |
|
|
|
bottom: 20px; |
|
|
|
width: 7vw; |
|
|
|
height: 10vh; |
|
|
|
color: #fff; |
|
|
|
border: none; |
|
|
|
border-radius: 5px; |
|
|
|
font-size: 3vw; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.people_img { |
|
|
|
width: 6vh; |
|
|
|
height: 6vh; |
|
|
|
} |
|
|
|
.pass_nopass { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.pass { |
|
|
|
background-color: rgb(92, 186, 45); |
|
|
|
width: 10vw; |
|
|
|
height: 5vw; |
|
|
|
border-radius: 1vw; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.no_pass { |
|
|
|
background-color: rgb(187, 44, 45); |
|
|
|
width: 10vw; |
|
|
|
height: 5vw; |
|
|
|
border-radius: 1vw; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-left: 2vw; |
|
|
|
} |
|
|
|
.goTop_img { |
|
|
|
width: 6vw; |
|
|
|
height: 6vw; |
|
|
|
} |
|
|
|
} |
|
|
|
@media screen and (orientation: landscape) { |
|
|
|
input:focus { |
|
|
|
border: 0.1vw solid #000; |
|
|
|
outline: none; /* 可选,用于去除默认的外边框样式 */ |
|
|
|
} |
|
|
|
.login { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background-image: url("/static/img/phoneBgc_pc.jpg"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.PC_img { |
|
|
|
width: 52.6vw; |
|
|
|
height: 64.44vh; |
|
|
|
background-image: url("/static/img/loginBox.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
top: 18.88vh; |
|
|
|
left: 23.7vw; |
|
|
|
} |
|
|
|
.register { |
|
|
|
background-image: url("/static/img/registerBgc_pc.jpg") !important; |
|
|
|
} |
|
|
|
.logo { |
|
|
|
width: 15vh; |
|
|
|
margin: 4vh 0 0 4vh; |
|
|
|
} |
|
|
|
.login_title { |
|
|
|
/* width: 100vw; */ |
|
|
|
font-size: 4vh; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 28vh; |
|
|
|
margin-left: 58vw; |
|
|
|
/* margin-top: 15vh;*/ |
|
|
|
} |
|
|
|
.register_loginTitle { |
|
|
|
width: 100vw; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
font-size: 4vh; |
|
|
|
text-align: center; |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
top: 10vh; |
|
|
|
} |
|
|
|
.uploadImg { |
|
|
|
width: 15vw; |
|
|
|
} |
|
|
|
.input_box { |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-top: 15vh; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.register_inputBox { |
|
|
|
width: 100vw; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
padding-top: 42vh; |
|
|
|
} |
|
|
|
.phone_input{ |
|
|
|
width: 15vw; |
|
|
|
height: 6.66vh; |
|
|
|
border-radius: 2vh; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 2vw; |
|
|
|
padding-left: 2vh; |
|
|
|
padding-right: 5vw; |
|
|
|
border: 0.1vw solid #000; |
|
|
|
margin-left: 25vw; |
|
|
|
} |
|
|
|
.register_phoneInput { |
|
|
|
width: 37vh; |
|
|
|
height: 6vh; |
|
|
|
border-radius: 2vh; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 3vh; |
|
|
|
border: 0.1vw solid #000; |
|
|
|
margin-bottom: 5vh; |
|
|
|
padding-left:1vw ; |
|
|
|
} |
|
|
|
.register_codeInput { |
|
|
|
width: 37vh; |
|
|
|
height: 6vh; |
|
|
|
border-radius: 2vh; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 3vh; |
|
|
|
border: 0.1vw solid #000; |
|
|
|
padding-left: 1vw ; |
|
|
|
} |
|
|
|
.code_input { |
|
|
|
width: 15vw; |
|
|
|
height: 6.66vh; |
|
|
|
margin-top: 2vw; |
|
|
|
border-radius: 2vh; |
|
|
|
padding-left: 2vh; |
|
|
|
font-size: 1.5vw; |
|
|
|
padding-right: 5vw; |
|
|
|
background-color: transparent; |
|
|
|
border: 0.1vw solid #000; |
|
|
|
margin-left: 25vw; |
|
|
|
} |
|
|
|
.login_button { |
|
|
|
width: 16vw; |
|
|
|
height: 3vw; |
|
|
|
background-color: rgb(101, 161, 255); |
|
|
|
border-radius: 10vh; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 2vw; |
|
|
|
/* margin: 2vh 0 0 30vh; */ |
|
|
|
position: absolute; |
|
|
|
left: 55vw; |
|
|
|
top: 65vh; |
|
|
|
} |
|
|
|
.register_loginButton { |
|
|
|
width: 30vh; |
|
|
|
height: 3vw; |
|
|
|
background-color: rgb(101, 161, 255); |
|
|
|
border-radius: 1vw; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 3vh; |
|
|
|
position: absolute; |
|
|
|
left: 42.5vw; |
|
|
|
top: 65vh; |
|
|
|
} |
|
|
|
.send_code { |
|
|
|
position: absolute; |
|
|
|
font-size: 1.5vh; |
|
|
|
top: 11.5vh; |
|
|
|
right: 27.3vw; |
|
|
|
border-left: 0.1vw solid; |
|
|
|
padding-left: 1vh; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 3vw; |
|
|
|
} |
|
|
|
.employee { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.administrator { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-left: 3vw; |
|
|
|
} |
|
|
|
.hand:hover{ |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.choose_employee { |
|
|
|
width: 2vh; |
|
|
|
height: 2vh; |
|
|
|
border-radius: 50%; |
|
|
|
border: 0.1vw solid #000; |
|
|
|
margin-right: 1vh; |
|
|
|
} |
|
|
|
.choose_administrator { |
|
|
|
width: 2vh; |
|
|
|
height: 2vh; |
|
|
|
border-radius: 50%; |
|
|
|
border: 0.1vw solid #000; |
|
|
|
margin-right: 1vh; |
|
|
|
} |
|
|
|
.login_style { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 1vw; |
|
|
|
margin-top: 2vw; |
|
|
|
position: absolute; |
|
|
|
left: 54.8vw; |
|
|
|
} |
|
|
|
.hidden { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.active { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.background { |
|
|
|
background-color: #000; |
|
|
|
} |
|
|
|
.password-container { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.password_toggle { |
|
|
|
width: 3vw; |
|
|
|
position: absolute; |
|
|
|
font-size: 1.5vh; |
|
|
|
top: 11.5vh; |
|
|
|
right: 28.5vw; |
|
|
|
padding-left: 0.5vh; |
|
|
|
} |
|
|
|
.approval_page { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background-image: url("/static/img/registerBgc.jpg"); |
|
|
|
background-size: 100% 100%; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.approval_box { |
|
|
|
max-width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
background-color:rgba(237,237,237,0.8); |
|
|
|
} |
|
|
|
.search_people { |
|
|
|
width: 60vw; |
|
|
|
height: 6vh; |
|
|
|
border-radius: 1vh; |
|
|
|
margin: 5vh 0 0 20vw; |
|
|
|
border: 0 solid #fff; |
|
|
|
font-size: 3vh; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.every_info { |
|
|
|
height: 7vw; |
|
|
|
margin-top: 3vw; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
font-size: 3vh; |
|
|
|
} |
|
|
|
#scroll-to-top-btn { |
|
|
|
display: none; |
|
|
|
position: fixed; |
|
|
|
right: 20px; |
|
|
|
bottom: 20px; |
|
|
|
width: 7vh; |
|
|
|
height: 10vw; |
|
|
|
color: #fff; |
|
|
|
border: none; |
|
|
|
border-radius: 5px; |
|
|
|
font-size: 3vh; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.people_img { |
|
|
|
width: 6vw; |
|
|
|
height: 6vw; |
|
|
|
} |
|
|
|
.pass_nopass { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.pass { |
|
|
|
background-color: rgb(92, 186, 45); |
|
|
|
width: 10vh; |
|
|
|
height: 5vh; |
|
|
|
border-radius: 1vh; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.no_pass { |
|
|
|
background-color: rgb(187, 44, 45); |
|
|
|
width: 10vh; |
|
|
|
height: 5vh; |
|
|
|
border-radius: 1vh; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-left: 2vh; |
|
|
|
} |
|
|
|
.goTop_img { |
|
|
|
width: 6vh; |
|
|
|
height: 6vh; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list_box{ |
|
|
|
padding-inline-start: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.uploadImg{ |
|
|
|
width: 48% !important; |
|
|
|
transform: translate(0%, 0%) !important; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-img-box { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-img-box .input-box { |
|
|
|
display: inline-block; |
|
|
|
width: 144px; |
|
|
|
height: 144px; |
|
|
|
/*border: solid black 1px;*/ |
|
|
|
} |
|
|
|
|
|
|
|
.upload-img-box .befor-img { |
|
|
|
display: flex; |
|
|
|
/*width: 300px;*/ |
|
|
|
/*height: 90px;*/ |
|
|
|
/*border: solid black 1px;*/ |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
left: 0px; |
|
|
|
/*background: #ffffff;*/ |
|
|
|
z-index: 30; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-img-box .befor-img.hasImg { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-img-box .after-img { |
|
|
|
display: inline-block; |
|
|
|
width: 144px; |
|
|
|
height: 144px; |
|
|
|
border: none; |
|
|
|
/*position: absolute;*/ |
|
|
|
top: 0px; |
|
|
|
left: 0px; |
|
|
|
/*background: #ffffff;*/ |
|
|
|
z-index: 20; |
|
|
|
} |
|
|
|
|
|
|
|
.after-img img, .uploadImg { |
|
|
|
/*position: absolute;*/ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; /*根据父容器的尺寸裁剪和缩放图片,以填充整个容器,并保持长宽比例不变。*/ |
|
|
|
object-position: center; /*指定对象的位置,如果不设置,则默认是center*/ |
|
|
|
background-size: cover; /*背景图片的大小,如果不设置,则默认是auto*/ |
|
|
|
background-position: center; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, 0%);/*将元素移动到中心*/ |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<!-- 登录页面 --> |
|
|
|
<div class="login"> |
|
|
|
<img class="logo" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="PC_img"></div> |
|
|
|
<div class="login_title">请 登 录</div> |
|
|
|
<div id="employeeForm" class="input_box hidden active"> |
|
|
|
<input class="phone_input" type="text" placeholder="请输入手机号"> |
|
|
|
<input class="code_input" type="text" placeholder="请输入验证码"> |
|
|
|
<div class="send_code hand">发送验证码</div> |
|
|
|
</div> |
|
|
|
<div id="adminForm" class="input_box hidden password-container"> |
|
|
|
<input class="phone_input" type="text" placeholder="请输入账号"> |
|
|
|
<input id="password-input" class="code_input" type="password" placeholder="请输入密码"> |
|
|
|
<img id="password_toggle" class="password_toggle hand" src="/static/img/close.png" alt=""> |
|
|
|
</div> |
|
|
|
<div class="login_style"> |
|
|
|
<div id="employeeBtn" class="employee hand"> |
|
|
|
<div id="choose_employee" class="choose_employee background"></div> |
|
|
|
<div>员工登录</div> |
|
|
|
</div> |
|
|
|
<div id="adminBtn" class="administrator hand"> |
|
|
|
<div id="choose_administrator" class="choose_administrator"></div> |
|
|
|
<div>管理员登录</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="login_button hand">登 录</div> |
|
|
|
</div> |
|
|
|
<!-- 注册页面 --> |
|
|
|
<div style="display: none;" class="register login"> |
|
|
|
<div class="register_loginTitle "> |
|
|
|
<div class="upload-img-box"> |
|
|
|
<div class="input-box"> |
|
|
|
<input type="file" id="img-file" hidden="hidden" name="选择图片"> |
|
|
|
</div> |
|
|
|
<div class="befor-img"> |
|
|
|
<img class="uploadImg hand" src="/static/img/upload.png" alt=""> |
|
|
|
</div> |
|
|
|
<div class="after-img"> |
|
|
|
<img id="img-box" src="" width="30%" height="auto"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="register_inputBox"> |
|
|
|
<input class="register_phoneInput" type="text" placeholder="员工编号"> |
|
|
|
<input class="register_codeInput" type="text" placeholder="员工姓名"> |
|
|
|
</div> |
|
|
|
<div class="register_loginButton hand">注册人脸</div> |
|
|
|
</div> |
|
|
|
<!-- 管理员页面 --> |
|
|
|
<div style="display: none;" class="approval_page"> |
|
|
|
<div id="scroll_box" class="approval_box"> |
|
|
|
<input id="search" class="search_people" type="text" placeholder="🔍 搜索"> |
|
|
|
<ul class="list_box"> |
|
|
|
<li class="every_info"> |
|
|
|
<img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
<li class="every_info"> <img class="people_img" src="/static/img/logo.png" alt=""> |
|
|
|
<div class="name">张三</div> |
|
|
|
<div class="people_code">001</div> |
|
|
|
<div class="pass_nopass"> |
|
|
|
<div class="pass">通过</div> |
|
|
|
<div class="no_pass">不通过</div> |
|
|
|
</div></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<a id="scroll-to-top-btn" href=""> |
|
|
|
<img class="goTop_img" src="/static/img/goTop.png" alt=""> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<script src="/static/js/jquery.min.js"></script> |
|
|
|
<script> |
|
|
|
$(function(){ |
|
|
|
$(".login_button").on("click",function(){ |
|
|
|
console.log("click"); |
|
|
|
$(".login").css("display","none"); |
|
|
|
// $(".approval_page").css("display","block"); |
|
|
|
$(".register").css("display","block"); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
$(document).on("click", ".upload-img-box .befor-img,.upload-img-box .after-img", function (e) { |
|
|
|
$(".input-box input").trigger("click"); |
|
|
|
}) |
|
|
|
// 使用input 的change事件,监听当文件上传的值进行改变的时候,才触发事件。 |
|
|
|
$(document).on("change", ".upload-img-box #img-file", function () { |
|
|
|
var file = $("#img-file")[0].files[0]; |
|
|
|
console.log(file); |
|
|
|
// file 内容包括: lastModified , lastModifiedDate , name , size , type |
|
|
|
var formdata = new FormData(); |
|
|
|
formdata.append('file', file); |
|
|
|
|
|
|
|
if (window.FileReader) { |
|
|
|
var fr = new FileReader(); |
|
|
|
fr.onloadend = function (e) { |
|
|
|
// console.log(this.result); |
|
|
|
// document.getElementById("portrait").src = e.target.result; |
|
|
|
$("#img-box").attr("src",e.target.result) |
|
|
|
$(".upload-img-box .befor-img").addClass("hasImg") |
|
|
|
}; |
|
|
|
//给FileReader对象一个读取完成的方法, |
|
|
|
//使用readAsDataURL会返回一个url |
|
|
|
//这个值就保存在事件对象的result里 |
|
|
|
//img通过加载这个地址,完成图片的加载 |
|
|
|
fr.readAsDataURL(file); |
|
|
|
} |
|
|
|
|
|
|
|
//判断图片大小 |
|
|
|
if (file.size > 3 * 1024 * 1024) { |
|
|
|
alert("上传图片不能大于3M"); |
|
|
|
} |
|
|
|
|
|
|
|
//判断图片数据类型 |
|
|
|
if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file.name)) { |
|
|
|
|
|
|
|
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种"); |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
// 切换登陆页面 |
|
|
|
document.getElementById("employeeBtn").addEventListener("click", function() { |
|
|
|
document.getElementById("employeeForm").classList.add("active"); |
|
|
|
document.getElementById("adminForm").classList.remove("active"); |
|
|
|
document.getElementById("choose_administrator").classList.remove("background"); |
|
|
|
document.getElementById("choose_employee").classList.add("background"); |
|
|
|
}); |
|
|
|
document.getElementById("adminBtn").addEventListener("click", function() { |
|
|
|
document.getElementById("employeeForm").classList.remove("active"); |
|
|
|
document.getElementById("adminForm").classList.add("active"); |
|
|
|
document.getElementById("choose_employee").classList.remove("background"); |
|
|
|
document.getElementById("choose_administrator").classList.add("background"); |
|
|
|
}); |
|
|
|
document.getElementById("password_toggle").addEventListener("click", function() { |
|
|
|
let passwordInput = document.getElementById("password-input") |
|
|
|
if (passwordInput.type === 'password') { |
|
|
|
passwordInput.type ='text'; |
|
|
|
document.getElementById("password_toggle").src = "/static/img/open.png" |
|
|
|
} else { |
|
|
|
passwordInput.type = "password"; |
|
|
|
document.getElementById("password_toggle").src = "/static/img/close.png" |
|
|
|
} |
|
|
|
}); |
|
|
|
// 点击回到顶部 |
|
|
|
var element = document.getElementById('search'); |
|
|
|
|
|
|
|
var observer = new IntersectionObserver(function(entries) { |
|
|
|
entries.forEach(function(entry) { |
|
|
|
var scrollToTopBtn = document.getElementById('scroll-to-top-btn'); |
|
|
|
if (entry.isIntersecting) { |
|
|
|
// 元素进入视口,执行代码 |
|
|
|
scrollToTopBtn.style.display = 'none'; |
|
|
|
} else { |
|
|
|
scrollToTopBtn.style.display = 'block'; |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
observer.observe(element); |
|
|
|
|
|
|
|
document.getElementById('scroll-to-top-btn').addEventListener('click', function() { |
|
|
|
document.getElementById("scroll_box").scrollTop = 0 |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |