|
|
@@ -1,13 +1,47 @@
|
|
|
<template>
|
|
|
<div class="oa-login">
|
|
|
- <div class="title">
|
|
|
- <img src="@/assets/imgs/OA/zdwwIcon.png" alt="" />
|
|
|
- <h1>{{ oaLoginTitle }}</h1>
|
|
|
- </div>
|
|
|
- <div class="imgBox"> </div>
|
|
|
- <div class="loginBox">
|
|
|
- <div class="ssoBox">
|
|
|
- <iframe id="iframe" :src="dingCodeLogin" frameborder="0" scrolling="no"></iframe>
|
|
|
+ <div class="login_box">
|
|
|
+ <div class="title_box">
|
|
|
+ <img src="../../assets/imgs/OA/title_bg.png" />
|
|
|
+ <span class="circle"></span>
|
|
|
+ <span class="title">自然资源和规划局一体化系统</span>
|
|
|
+ </div>
|
|
|
+ <div class="login_container">
|
|
|
+ <div class="account_login">
|
|
|
+ <h4>账号登录</h4>
|
|
|
+ <div class="form_box">
|
|
|
+ <div class="form_item">
|
|
|
+ <label>
|
|
|
+ <el-icon><User /></el-icon>
|
|
|
+ </label>
|
|
|
+ <input type="text" placeholder="请输入账号" />
|
|
|
+ </div>
|
|
|
+ <div class="form_item">
|
|
|
+ <label>
|
|
|
+ <el-icon><Lock /></el-icon>
|
|
|
+ </label>
|
|
|
+ <input type="password" placeholder="请输入密码" />
|
|
|
+ </div>
|
|
|
+ <div class="flex-center">
|
|
|
+ <el-checkbox label="记住密码" size="large" />
|
|
|
+ <div class="edit-pwd">
|
|
|
+ <label>
|
|
|
+ <el-icon><Edit /></el-icon>
|
|
|
+ </label>
|
|
|
+ <span>修改密码</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button type="button">登录</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="qr_login">
|
|
|
+ <h4>扫码登录</h4>
|
|
|
+ <div class="qr_box">
|
|
|
+ <iframe id="iframe" :src="dingCodeLogin" frameborder="0" scrolling="no"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -62,80 +96,122 @@ onMounted(() => {
|
|
|
background: url(@/assets/imgs/OA/loginBj.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: relative;
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- left: 100px;
|
|
|
- top: 50px;
|
|
|
- h1 {
|
|
|
- margin-left: 15px;
|
|
|
- font-size: 40px;
|
|
|
- font-family: AlibabaPuHuiTiR;
|
|
|
- color: #121518;
|
|
|
- }
|
|
|
- }
|
|
|
- .imgBox {
|
|
|
- width: 652px;
|
|
|
- height: 431px;
|
|
|
- background: url(@/assets/imgs/OA/loginImg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- margin-top: -215px;
|
|
|
- left: 340px;
|
|
|
- }
|
|
|
-
|
|
|
- .loginBox {
|
|
|
- width: 500px;
|
|
|
- height: 625px;
|
|
|
- background: rgba(255, 255, 255, 0.26);
|
|
|
- border-radius: 20px;
|
|
|
- opacity: 1;
|
|
|
- border: 1px solid #ffffff;
|
|
|
+ > .login_box {
|
|
|
+ width: 900px;
|
|
|
position: absolute;
|
|
|
- right: 310px;
|
|
|
top: 50%;
|
|
|
- margin-top: -299px;
|
|
|
- padding: 10px;
|
|
|
- .ssoBox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20px;
|
|
|
- opacity: 1;
|
|
|
- position: relative;
|
|
|
- h4 {
|
|
|
- font-size: 20px;
|
|
|
- font-family: AlibabaPuHuiTiR;
|
|
|
- text-align: center;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ margin: auto;
|
|
|
+ > .title_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ > img {
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
- #iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 20px;
|
|
|
- background-color: #ffffff;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 0;
|
|
|
+ > .circle {
|
|
|
+ display: block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #292e34;
|
|
|
+ margin-right: 6px;
|
|
|
}
|
|
|
- .iframeZzc {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 60px);
|
|
|
- border: 24px solid #ffffff;
|
|
|
- top: 60px;
|
|
|
- left: 0;
|
|
|
- border-top-width: 60px;
|
|
|
- pointer-events: none;
|
|
|
- border-bottom-width: 60px;
|
|
|
- z-index: 1;
|
|
|
- border-radius: 18px;
|
|
|
+ > .title {
|
|
|
+ color: #292e34;
|
|
|
+ font-size: 42px;
|
|
|
}
|
|
|
}
|
|
|
+ > .login_container {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 50px 0px;
|
|
|
+ display: flex;
|
|
|
+ > div {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ padding: 0px 60px;
|
|
|
+ > h4 {
|
|
|
+ color: #292e34;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ &.account_login {
|
|
|
+ border-right: 1px solid #e3e8ee;
|
|
|
+ > .form_box {
|
|
|
+ > div {
|
|
|
+ margin-top: 15px;
|
|
|
+ > button {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ background: linear-gradient(90deg, #4d82fd 0%, #5989fa 100%);
|
|
|
+ box-shadow: 0px 15px 20px 1px rgba(152, 173, 241, 0.44);
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 0px;
|
|
|
+ outline: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ :deep(.el-checkbox__label) {
|
|
|
+ color: #292e34;
|
|
|
+ }
|
|
|
+ &.flex-center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ > .edit-pwd {
|
|
|
+ > label {
|
|
|
+ vertical-align: middle;
|
|
|
+ color: #bdc2c9;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ color: #292e34;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .form_item {
|
|
|
+ background: #f3f6fc;
|
|
|
+ border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0px 10px;
|
|
|
+ > input {
|
|
|
+ border: 0px;
|
|
|
+ outline: none;
|
|
|
+ padding: 15px 10px;
|
|
|
+ background: none;
|
|
|
+ min-width: 280px;
|
|
|
+ }
|
|
|
+ > label {
|
|
|
+ color: #1a81f8;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.qr_login {
|
|
|
+ flex: 1;
|
|
|
+ > .qr_box {
|
|
|
+ height: 200px;
|
|
|
+ iframe {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 通过拉长过渡时间，和延迟过渡开始时间，掩盖input自动填充背景颜色
|
|
|
+ input:-internal-autofill-previewed,
|
|
|
+ input:-internal-autofill-selected {
|
|
|
+ transition: background-color 1500s ease-out 10s;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
