|
@@ -6,64 +6,38 @@
|
|
* @FilePath : \ambre-admin-noob\src\views\login.vue
|
|
* @FilePath : \ambre-admin-noob\src\views\login.vue
|
|
-->
|
|
-->
|
|
<template>
|
|
<template>
|
|
-<div class="loginPage">
|
|
|
|
- <!-- <div class="login">
|
|
|
|
-
|
|
|
|
- <div class="login-title">
|
|
|
|
-
|
|
|
|
- <div class="logo">
|
|
|
|
- <img src="../../public/img/logo3.png" style="width: 350px;padding:10px 0;display: bolck" alt="">
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="pwd-login">
|
|
|
|
- <el-form :model="loginForm" :rules="pwdRules" ref="pwdLogin" label-width="0">
|
|
|
|
- <el-form-item prop="loginname">
|
|
|
|
- <el-input v-model="loginForm.loginname" name="loginname" type="tel" autocomplete="new-password" placeholder="请输入账号">
|
|
|
|
- <span slot="prefix" class="iconfont iconshouji"></span>
|
|
|
|
- </el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item prop="password">
|
|
|
|
- <el-input type="password" v-model="loginForm.password" name="password" @keyup.enter.native="login" autocomplete="new-password" placeholder="请输入密码">
|
|
|
|
- <span slot="prefix" class="iconfont iconmima"></span>
|
|
|
|
- </el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
|
|
+<div class="login">
|
|
|
|
+ <div class="loginPage">
|
|
|
|
+ <div class="loginPage-left">
|
|
|
|
+ <div>
|
|
|
|
+ <img src="../../public/img/logo4.png" alt="">
|
|
|
|
+ <p>欢迎登录</p>
|
|
|
|
+ <p>优创后台系统</p>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div class="login-footer">
|
|
|
|
- <el-button class="login-btn" @click="login">登录</el-button>
|
|
|
|
- </div>
|
|
|
|
- <div class="forget" @click="forget">忘记密码?</div>
|
|
|
|
- </div> -->
|
|
|
|
- <div class="loginPage-left">
|
|
|
|
- <div>
|
|
|
|
- <img src="../../public/img/logo3.png" alt="">
|
|
|
|
- <p>欢迎登录</p>
|
|
|
|
- <p>优创后台系统</p>
|
|
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div class="loginPage-right">
|
|
|
|
- <div class="loginPage-right-content">
|
|
|
|
- <el-form :model="loginForm" :rules="pwdRules" ref="pwdLogin" label-width="0">
|
|
|
|
- <el-form-item prop="loginname">
|
|
|
|
- <!-- <el-input v-model="loginForm.loginname" name="loginname" type="tel" autocomplete="new-password" placeholder="请输入账号"> -->
|
|
|
|
- <!-- <span slot="prefix" class="iconfont iconshouji"></span> -->
|
|
|
|
- <!-- </el-input> --><i class="el-icon-postcard"></i>
|
|
|
|
- <input v-model="loginForm.loginname" name="loginname" type="tel" autofocus autocomplete="new-password" placeholder="请输入账号">
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item prop="password">
|
|
|
|
- <!-- <el-input type="password" v-model="loginForm.password" name="password" @keyup.enter.native="login" autocomplete="new-password" placeholder="请输入密码">
|
|
|
|
- <span slot="prefix" class="iconfont iconmima"></span>
|
|
|
|
- </el-input> --><i class="el-icon-unlock"></i>
|
|
|
|
- <input v-model="loginForm.password" name="password" type="password" autocomplete="new-password" @keyup.enter="login" placeholder="请输入密码">
|
|
|
|
- </el-form-item>
|
|
|
|
- </el-form>
|
|
|
|
- <button class="login-btn" @click="login">登录</button>
|
|
|
|
- <div class="forget" @click="forget">忘记密码?</div>
|
|
|
|
|
|
+ <div class="loginPage-right">
|
|
|
|
+ <div class="loginPage-right-content">
|
|
|
|
+ <el-form :model="loginForm" :rules="pwdRules" ref="pwdLogin" label-width="0">
|
|
|
|
+ <el-form-item prop="loginname">
|
|
|
|
+ <!-- <el-input v-model="loginForm.loginname" name="loginname" type="tel" autocomplete="new-password" placeholder="请输入账号"> -->
|
|
|
|
+ <!-- <span slot="prefix" class="iconfont iconshouji"></span> -->
|
|
|
|
+ <!-- </el-input> --><i class="el-icon-postcard"></i>
|
|
|
|
+ <input v-model="loginForm.loginname" name="loginname" type="tel" autofocus autocomplete="new-password" placeholder="请输入账号">
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item prop="password">
|
|
|
|
+ <!-- <el-input type="password" v-model="loginForm.password" name="password" @keyup.enter.native="login" autocomplete="new-password" placeholder="请输入密码">
|
|
|
|
+ <span slot="prefix" class="iconfont iconmima"></span>
|
|
|
|
+ </el-input> --><i class="el-icon-unlock"></i>
|
|
|
|
+ <input v-model="loginForm.password" name="password" type="password" autocomplete="new-password" @keyup.enter="login" placeholder="请输入密码">
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <div class="login-btn" @click="login">登录</div>
|
|
|
|
+ </el-form>
|
|
|
|
+ <div class="forget" @click="forget">忘记密码?</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -77,12 +51,24 @@
|
|
// text-align: right;
|
|
// text-align: right;
|
|
// line-height: 5px;
|
|
// line-height: 5px;
|
|
// }
|
|
// }
|
|
|
|
+.login {
|
|
|
|
+ background-image: url(../../public/static/loginBG.png);
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
.loginPage {
|
|
.loginPage {
|
|
|
|
+ box-shadow:0px 0px 99px #DBD9D9;
|
|
|
|
+ border-radius: 3px;
|
|
|
|
+ background-color: #fff;
|
|
display: flex;
|
|
display: flex;
|
|
- width: 100%;
|
|
|
|
- height: 100vh;
|
|
|
|
|
|
+ width: 60%;
|
|
|
|
+ height: 60%;
|
|
&-left {
|
|
&-left {
|
|
flex: 2;
|
|
flex: 2;
|
|
|
|
+ border-radius: 3px 0 0 3px;
|
|
background-color: #00A0E9;
|
|
background-color: #00A0E9;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -128,27 +114,32 @@
|
|
display: flex;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- button {
|
|
|
|
|
|
+ .login-btn {
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 40px;
|
|
border: none;
|
|
border: none;
|
|
background-color: #00A0E9;
|
|
background-color: #00A0E9;
|
|
- height: 60px;
|
|
|
|
- width: 160px;
|
|
|
|
- font-size: 24px;
|
|
|
|
- box-shadow: 5px 5px 5px 3px #888888;
|
|
|
|
|
|
+ height: 40px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ box-shadow:0px 0px 15px #DBD9D9;
|
|
margin-top: 30px;
|
|
margin-top: 30px;
|
|
color: #fff;
|
|
color: #fff;
|
|
font-family:"微软雅黑";
|
|
font-family:"微软雅黑";
|
|
|
|
+ box-sizing: content-box;
|
|
|
|
+ padding: 0 7px;
|
|
|
|
+ margin-left: -13px;
|
|
}
|
|
}
|
|
.forget {
|
|
.forget {
|
|
margin-top: 50px;
|
|
margin-top: 50px;
|
|
color: #00A0E9;
|
|
color: #00A0E9;
|
|
- font-size: 18px;
|
|
|
|
|
|
+ font-size: 14px;
|
|
}
|
|
}
|
|
input {
|
|
input {
|
|
border: none;
|
|
border: none;
|
|
height: 35px;
|
|
height: 35px;
|
|
padding: 5px 65px;
|
|
padding: 5px 65px;
|
|
- font-size: 21px;
|
|
|
|
|
|
+ font-size: 14px;
|
|
width: 100%;
|
|
width: 100%;
|
|
margin: 15px auto;
|
|
margin: 15px auto;
|
|
outline: none;
|
|
outline: none;
|