|
@@ -34,16 +34,42 @@
|
|
|
</el-form-item>
|
|
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
|
|
<el-form-item style="width:100%;">
|
|
|
+ <div class="medTitle">
|
|
|
+ 快捷登录
|
|
|
+ </div>
|
|
|
+ <div class="med_icons">
|
|
|
+ <div class="med_icons_item" @click="btns">
|
|
|
+ <img src="@/assets/images/icon_kjdl_dd@2x.png" alt="" class="icon">
|
|
|
+ <p>钉钉</p>
|
|
|
+ </div>
|
|
|
+ <div class="med_icons_item" @click="btns">
|
|
|
+ <img src="@/assets/images/icon_kjdl_wx@2x.png" alt="" class="icon">
|
|
|
+ <p>微信</p>
|
|
|
+ </div>
|
|
|
+ <div class="med_icons_item" @click="btns">
|
|
|
+ <img src="@/assets/images/icon_kjdl_qywx@2x.png" alt="" class="icon">
|
|
|
+ <p>企业微信</p>
|
|
|
+ </div>
|
|
|
+ <div class="med_icons_item" @click="btns">
|
|
|
+ <img src="@/assets/images/icon_kjdl_qq@2x.png" alt="" class="icon">
|
|
|
+ <p>QQ</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:100%;margin-bottom: 0;">
|
|
|
<el-button
|
|
|
:loading="loading"
|
|
|
size="medium"
|
|
|
type="primary"
|
|
|
- style="width:100%;"
|
|
|
+ style="width:100%;background-color: #2865E1;"
|
|
|
@click.native.prevent="handleLogin"
|
|
|
>
|
|
|
<span v-if="!loading">登 录</span>
|
|
|
<span v-else>登 录 中...</span>
|
|
|
</el-button>
|
|
|
+ <p class="div_p">
|
|
|
+ * 使用快捷登录,请先绑定第三方账号
|
|
|
+ </p>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 底部 -->
|
|
@@ -97,6 +123,9 @@ export default {
|
|
|
this.getCookie();
|
|
|
},
|
|
|
methods: {
|
|
|
+ btns() {
|
|
|
+ this.msgInfo('暂未开放')
|
|
|
+ },
|
|
|
getCode() {
|
|
|
getCodeImg().then(res => {
|
|
|
this.codeUrl = "data:image/gif;base64," + res.img;
|
|
@@ -142,23 +171,90 @@ export default {
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
.login {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
height: 100%;
|
|
|
background-image: url("../assets/images/login-background.jpg");
|
|
|
background-size: cover;
|
|
|
}
|
|
|
+.div_p{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #AAAAAA;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.medTitle{
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ position: relative;
|
|
|
+ color: #343434;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ &::before{
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 30px;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 1px;
|
|
|
+ background-color: #F4AD6B;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+.med_icons{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .med_icons_item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon{
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.title {
|
|
|
- margin: 0px auto 30px auto;
|
|
|
+ margin: 0px auto 40px auto;
|
|
|
text-align: center;
|
|
|
- color: #707070;
|
|
|
+ color: #343434;
|
|
|
+ padding: 0 15px;
|
|
|
+ position: relative;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 22px;
|
|
|
+ &::before{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 145px;
|
|
|
+ height: 15px;
|
|
|
+ background-image: url('../assets/images/pic_dlbt_hx@2x.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ bottom: -15px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.login-form {
|
|
|
border-radius: 6px;
|
|
|
background: #ffffff;
|
|
|
width: 400px;
|
|
|
- padding: 25px 25px 5px 25px;
|
|
|
+ box-shadow: 0 0 25px #E3E3EA;
|
|
|
+ margin-right: 101px;
|
|
|
+ background-image: urk;
|
|
|
+ padding: 35px 25px 25px 25px;
|
|
|
.el-input {
|
|
|
height: 38px;
|
|
|
input {
|