提交 8f62c13f 编写于 作者: RedPig97's avatar RedPig97

update: 更新

上级 76f3f461
<template>
<div class="login">
<img src="@/assets/img/background.png" />
<img src="@/assets/img/background.png" class="login-background" />
<div class="login-con" v-if="!isEmbedThridPlatForm">
<card :bordered="false">
<p slot="title" style="text-align: center">&nbsp;&nbsp;{{ appTitle }}</p>
<card :bordered="false" class="login-card">
<div slot="title" class="login-header">
<p class="login-caption" style="text-align: center">桌面端应用示例</p>
</div>
<div class="login-content">
<div class="form-con">
<a-form ref="loginForm" :rules="rules" :model="loginState">
<a-form-item name="loginname">
......@@ -37,7 +40,6 @@
重置
</a-button>
</a-form-item>
<a-form-item>
<div style="text-align: center">
<span class="form_tipinfo">其他登录方式</span>
......@@ -52,27 +54,20 @@
</div>
</a-form-item>
</a-form>
<p class="login-tip">
{{ this.loginTip }}
</p>
<p class="login-tip">\{{loginTip}}</p>
</div>
</div>
</card>
<div class="log_footer">
<div class="copyright">
<a href="https://www.ibizlab.cn/" target="_blank">{{ appTitle }} is based on ibizlab .</a>
<a href="https://www.ibizlab.cn/" target="_blank"> is based on ibizlab .</a>
</div>
</div>
</div>
<div class="login-loadding-container" v-if="isEmbedThridPlatForm">
<div class="content-loadding">
<span>第三方登录跳转中</span>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- loading待补充 -->
</div>
</div>
</div>
......@@ -393,179 +388,3 @@ const getNeedLocation = () => {
return baseUrl;
};
</script>
\ No newline at end of file
<style lang='scss'>
.login {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: #108cee;
> img {
width: 100vw;
height: 100vh;
}
&-con {
position: absolute;
left: 0;
right: 0;
top: 20%;
margin: auto;
width: 450px;
.ivu-card-head {
padding: 30px 0px 20px 0px;
border-bottom: 0px;
> p {
height: 30px;
line-height: 30px;
font-size: 20px;
color: #666666;
font-weight: 600;
}
}
&-header {
font-size: 16px;
font-weight: 300;
text-align: center;
padding: 30px 0;
}
.form-con {
padding: 0px 20px 0px 20px;
> i-button {
width: 170px;
height: 40px;
}
}
.login-tip {
font-size: 10px;
text-align: center;
color: red;
height: 30px;
}
}
&-loadding-container {
position: absolute;
left: 0;
right: 0;
top: 70%;
margin: auto;
width: 450px;
}
}
.login_btn {
width: 175px;
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.login_reset {
width: 175px;
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
float: right;
}
.form_tipinfo {
font-family: MicrosoftYaHei-Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
line-height: 24px;
letter-spacing: 0px;
color: #666666;
}
.form_tipinfo_more {
font-family: MicrosoftYaHei;
font-size: 14px;
font-weight: normal;
letter-spacing: 0px;
color: #666666;
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.sign-btn {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.third-svg-container {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
padding-top: 1px;
border-radius: 4px;
margin-bottom: -20px;
margin-top: 10px;
}
.content-loadding {
display: flex;
> span {
font-size: 24px;
color: #fff;
}
}
.loading {
width: 150px;
height: 15px;
margin: 0 auto;
margin-top: 12px;
padding-left: 12px;
> span {
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: #fff;
-webkit-animation: load 1.04s ease infinite;
}
> span:last-child {
margin-right: 0px;
}
> span:nth-child(1) {
-webkit-animation-delay: 0.13s;
}
> span:nth-child(2) {
-webkit-animation-delay: 0.26s;
}
> span:nth-child(3) {
-webkit-animation-delay: 0.39s;
}
> span:nth-child(4) {
-webkit-animation-delay: 0.52s;
}
> span:nth-child(5) {
-webkit-animation-delay: 0.65s;
}
}
@-webkit-keyframes load {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
\ No newline at end of file
.login {
display: flex;
flex-direction: column;
min-height: 100%;
.login-background {
width: 100vw;
height: 100vh;
}
.login-con {
position: absolute;
left: 0;
right: 0;
top: 20%;
margin: auto;
width: 450px;
.login-card {
display: block;
background-color: #fff;
border-radius: 4px;
.login-header {
padding: 30px 0px 20px 0px;
.login-caption {
height: 30px;
line-height: 30px;
font-size: 20px;
color: #666666;
font-weight: 600;
}
}
.login-content {
padding: 16px;
.form-con {
padding: 0px 20px 0px 20px;
}
}
}
}
.login-loadding-container {
position: absolute;
left: 0;
right: 0;
top: 70%;
margin: auto;
width: 450px;
}
.login_btn {
width: 175px;
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
}
.login_reset {
width: 175px;
height: 40px;
font-size: 18px;
font-family: MicrosoftYaHei;
float: right;
}
.login-tip {
font-size: 10px;
text-align: center;
color: red;
height: 30px;
padding-top: 10px;
margin: 0;
}
.form_tipinfo {
font-family: MicrosoftYaHei-Bold;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
line-height: 24px;
letter-spacing: 0px;
color: #666666;
}
.log_footer {
display: block;
padding: 0 16px;
margin: 48px 0 24px;
text-align: center;
color: #212529;
}
.log_footer a {
color: white;
text-decoration: none;
}
.sign-btn {
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.third-svg-container {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
padding-top: 1px;
border-radius: 4px;
margin-bottom: -20px;
margin-top: 10px;
}
.content-loadding {
display: flex;
> span {
font-size: 24px;
color: #fff;
}
}
}
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册