|
|
|
@ -1,42 +1,54 @@ |
|
|
|
<template> |
|
|
|
<div class="box"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="loginInput"> |
|
|
|
<div class="litterSemicircle"><img src="/images/logo.png"/> </div> |
|
|
|
|
|
|
|
<div class="importInput"> |
|
|
|
<div> |
|
|
|
<h1>南京生态环境评估决策平台</h1> |
|
|
|
<el-input v-model="input4" placeholder="请输入账户" class="input"> |
|
|
|
<el-input placeholder="请输入账户" type="text" class="input" v-model="inputName"> |
|
|
|
<template #prefix> |
|
|
|
<el-icon ><img src="/images/pen.png"></el-icon> |
|
|
|
</template> |
|
|
|
</el-input> |
|
|
|
<el-input placeholder="请输入登录密码" type="password" v-model="inputPassword" class="input" > |
|
|
|
<template #prefix> |
|
|
|
<el-icon class="el-input__icon"><search /></el-icon> |
|
|
|
<el-icon><img src="/images/lock.png"></el-icon> |
|
|
|
</template> |
|
|
|
</el-input> |
|
|
|
</div> |
|
|
|
<el-button type="primary" class="btn" @click="onLoginClick">登录</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import {reactive, toRefs} from "vue"; |
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus' |
|
|
|
export default { |
|
|
|
name: 'Login', |
|
|
|
setup() { |
|
|
|
return {} |
|
|
|
let option = reactive({ |
|
|
|
inputName: null, |
|
|
|
inputPassword: null, |
|
|
|
centerDialogVisible:false |
|
|
|
}) |
|
|
|
|
|
|
|
const onLoginClick = () => { |
|
|
|
if(option.inputName==null || option.inputPassword==null){ |
|
|
|
ElMessageBox.alert('请完善信息', '提示', { |
|
|
|
confirmButtonText: '确认', |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(option), |
|
|
|
onLoginClick |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
.box { |
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.loginInput { |
|
|
|
width: 651px; |
|
|
|
height: 689px; |
|
|
|
@ -60,7 +72,6 @@ export default { |
|
|
|
justify-content: center; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.importInput { |
|
|
|
@ -71,10 +82,13 @@ export default { |
|
|
|
opacity: 1; |
|
|
|
border-radius: 10px; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: center; |
|
|
|
align-content: flex-start; |
|
|
|
|
|
|
|
h1 { |
|
|
|
width: 393px; |
|
|
|
height: 40px; |
|
|
|
font-size: 30px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: bold; |
|
|
|
@ -83,20 +97,53 @@ export default { |
|
|
|
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|
|
|
opacity: 1; |
|
|
|
margin-top: 120px; |
|
|
|
margin-bottom: 52px; |
|
|
|
padding-left: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.input) { |
|
|
|
width: 496px; |
|
|
|
height: 69px; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #BCBCBC; |
|
|
|
opacity: 1; |
|
|
|
margin-bottom: 71px; |
|
|
|
|
|
|
|
.el-input__inner{ |
|
|
|
height: 100% !important; |
|
|
|
position: relative; |
|
|
|
border: none; |
|
|
|
font-size: 18px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 24px; |
|
|
|
color: #999999; |
|
|
|
padding-left: 54px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
width: 18px; |
|
|
|
height: 17.92px; |
|
|
|
position: absolute; |
|
|
|
top: -7px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
img { |
|
|
|
width: 157.33px; |
|
|
|
height: 157.15px; |
|
|
|
margin-top: 35px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.btn{ |
|
|
|
width: 496px; |
|
|
|
height: 69px; |
|
|
|
background: #498DF0; |
|
|
|
opacity: 1; |
|
|
|
color: #FFFFFF; |
|
|
|
border: none; |
|
|
|
font-size: 22px; |
|
|
|
margin-bottom: 127px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
