<template>
|
<div class="page">
|
<!-- 插件下载按钮 -->
|
<a href="http://" target="_blank" rel="noopener noreferrer" class="plugin">点击下载插件</a>
|
<!-- 左图 -->
|
<div class="chips"></div>
|
<!-- 登录表单 -->
|
<div class="login-container">
|
<div class="website_name">
|
<span>智慧校园</span>
|
<span>三维可视化</span>
|
<span>信息管理平台</span>
|
</div>
|
<div class="school">
|
<span class="arrow1"></span>
|
<p>江西经济管理干部学院</p>
|
<span class="arrow2"></span>
|
</div>
|
<div class="login_bg">
|
<div class="title-container">
|
<h3 class="title">用户登录</h3>
|
</div>
|
<form action method="post">
|
<div class="username_container">
|
<input type="text" placeholder="用户名" />
|
<i></i>
|
</div>
|
<div class="pwd_container">
|
<input type="password" placeholder="密码" />
|
<i></i>
|
</div>
|
<div class="aboutPwd">
|
<span>
|
<input type="checkbox" id="keepPwd" />
|
<label for="keepPwd">记住密码</label>
|
</span>
|
<a href>忘记密码？</a>
|
</div>
|
<button @click="onLogin">登录</button>
|
<div class="tip">
|
<p>注意：使用IE浏览器查看</p>
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'Login',
|
methods: {
|
onLogin () {
|
this.$router.push({ path: '/homepage' })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page {
|
position: relative;
|
height: 100%;
|
background: url(/zhjg/img/login/background.png);
|
background-size: 100% auto;
|
.chips {
|
position: absolute;
|
left: 200px;
|
top: 268px;
|
background: url(/zhjg/img/login/left.png) no-repeat;
|
background-size: contain;
|
width: 750px;
|
height: 543px;
|
z-index: 1;
|
}
|
input {
|
outline: none;
|
}
|
}
|
.plugin {
|
position: absolute;
|
top: 46px;
|
right: 80px;
|
display: block;
|
width: 130px;
|
height: 50px;
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #58e2f5;
|
line-height: 50px;
|
text-align: center;
|
background: url(/zhjg/img/login/object.png);
|
background-size: contain;
|
}
|
a {
|
text-decoration: none;
|
}
|
.login-container {
|
position: absolute;
|
top: 247px;
|
right: 190px;
|
width: 667px;
|
height: 620px;
|
z-index: 2;
|
.website_name {
|
width: 667px;
|
height: 42px;
|
font-size: 43px;
|
font-weight: 400;
|
color: #cfdde7;
|
line-height: 70px;
|
text-align: center;
|
:nth-child(2) {
|
color: #58e2f5;
|
}
|
}
|
.school {
|
margin: 24px auto 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.arrow1 {
|
display: block;
|
width: 217px;
|
height: 22px;
|
background: url(/zhjg/img/login/zu1.png) no-repeat;
|
background-size: contain;
|
}
|
p {
|
display: block;
|
width: 283px;
|
height: 26px;
|
line-height: 26px;
|
font-size: 26px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #92bef0;
|
font-size: 24px;
|
margin: 0 20px;
|
}
|
.arrow2 {
|
display: block;
|
width: 217px;
|
height: 22px;
|
background: url(/zhjg/img/login/zu1.png) no-repeat;
|
background-size: contain;
|
-moz-transform: scaleX(-1);
|
-webkit-transform: scaleX(-1);
|
-o-transform: scaleX(-1);
|
transform: scaleX(-1);
|
filter: FlipH;
|
}
|
}
|
.login_bg {
|
position: absolute;
|
margin-top: 21px;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 605px;
|
height: 509px;
|
background: url(/zhjg/img/login/login.png) no-repeat;
|
background-size: contain;
|
}
|
.title-container {
|
position: absolute;
|
top: 94px;
|
left: 239px;
|
height: 27px;
|
font-size: 27px;
|
font-weight: bold;
|
color: #cfdde7;
|
line-height: 64px;
|
}
|
form {
|
overflow: hidden;
|
position: absolute;
|
top: 146px;
|
left: 137px;
|
width: 315px;
|
height: 267px;
|
.username_container {
|
i {
|
background: url(/zhjg/img/login/user.png);
|
background-size: contain;
|
}
|
}
|
.pwd_container {
|
i {
|
background: url(/zhjg/img/login/password.png);
|
background-size: contain;
|
}
|
}
|
.aboutPwd {
|
display: flex;
|
justify-content: space-between;
|
font-size: 12px;
|
color: #c3d4e0;
|
a {
|
color: #c3d4e0;
|
}
|
}
|
button {
|
display: block;
|
margin-top: 38px;
|
width: 100%;
|
height: 47.3px;
|
color: #154c82;
|
font-size: 16px;
|
font-weight: 700;
|
background-color: #58e2f5;
|
border-radius: 7px;
|
}
|
.tip {
|
p {
|
position: absolute;
|
color: #58e2f5;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
.login-container .website_name :nth-child(1),
|
.login-container .website_name :nth-child(3) {
|
color: #cfdde7;
|
}
|
.login-container form .username_container,
|
.login-container form .pwd_container {
|
position: relative;
|
}
|
.login-container form .username_container input,
|
.login-container form .pwd_container input {
|
width: 100%;
|
height: 47.2px;
|
border: none;
|
margin-bottom: 14px;
|
background-color: #00376c;
|
font-size: 18px;
|
font-weight: 600;
|
color: #b4c6d2;
|
padding-left: 60px;
|
}
|
.login-container form .username_container i,
|
.login-container form .pwd_container i {
|
display: block;
|
position: absolute;
|
top: 16px;
|
left: 22px;
|
width: 16px;
|
height: 18px;
|
}
|
</style>
|
