+
+
+
+
-
-
-
-
- {{ $t('login.989807-10') }}
-
-
-
-
- {{ $t('login.989807-11') }}
-
-
-
- {{ $t('login.989807-12') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
![]()
-
-
-
-
-
-
-
- {{ $t('login.989807-7') }}
-
-
-
-
-
-
- {{ $t('login.989807-3') }}
- {{ $t('login.989807-13') }}
-
-
- {{ $t('login.989807-15') }}
- {{ $t('login.989807-16') }}
-
- {{ $t('login.989807-2') }}
-
+
+
+
+
+ {{ $t('login.989807-10') }}
+
+
+
+
+ {{ $t('login.989807-11') }}
+
+
+
+ {{ $t('login.989807-12') }}
+
+
+
-
-
-
-
-
-
-
-
-
-
- {{ buttonText }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('login.989807-34') }}
-
-
-
- {{ $t('login.989807-35') }}
- {{ $t('login.989807-36') }}
-
-
-
-
-
- {{ $t('login.989807-3') }}
- {{ $t('login.989807-13') }}
-
- {{ $t('login.989807-1') }}
-
+
+
+
+
-
-
-
-
-
{{ $t('login.989807-37') }}
-
-
{{ $t('login.989807-38') }}
-

-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+ {{ $t('login.989807-7') }}
+
+
+
+
+
+
+ {{ $t('login.989807-3') }}
+ {{ $t('login.989807-13') }}
+
+
+ {{ $t('login.989807-15') }}
+ {{ $t('login.989807-16') }}
+
+
{{ $t('login.989807-2') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ buttonText }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('login.989807-34') }}
+
+
+
+ {{ $t('login.989807-35') }}
+
+
+ {{ $t('login.989807-36') }}
+
+
+
+
+
+
+ {{ $t('login.989807-3') }}
+ {{ $t('login.989807-13') }}
+
+ {{ $t('login.989807-1') }}
+
+
+
+
+
+
+
{{ $t('login.989807-37') }}
+
+
{{ $t('login.989807-38') }}
+
+
+
@@ -560,636 +664,638 @@ export default {
*,
*::after,
*::before {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- user-select: none;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ user-select: none;
}
.login {
- height: 100%;
- overflow: auto;
- width: 100%;
- // height: 100vh;
+ height: 100%;
+ overflow: auto;
+ width: 100%;
+ // height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: 'Montserrat', sans-serif;
+ font-size: 12px;
+ //background: url('../assets/images/bg.png');
+ //background: linear-gradient(to right, #0f73ee 40%, #ffffffc6 40%), url('../assets/images/bg.png');
+ background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/bg.png');
+ color: #a0a5a8;
+
+ .main {
+ position: relative;
+ width: 1100px;
+ // min-width: 1100px;
+ // min-height: 600px;
+ height: 600px;
+ padding: 25px;
+ background-color: #fff;
+ box-shadow: 10px 0 10px #d0d5dd;
+ border-radius: 12px;
+ overflow: hidden;
+ }
+
+ .container {
display: flex;
justify-content: center;
align-items: center;
- font-family: 'Montserrat', sans-serif;
- font-size: 12px;
- //background: url('../assets/images/bg.png');
- //background: linear-gradient(to right, #0f73ee 40%, #ffffffc6 40%), url('../assets/images/bg.png');
- background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/bg.png');
- color: #a0a5a8;
+ position: absolute;
+ top: 0;
+ width: 600px;
+ height: 100%;
+ padding: 25px;
+ background-color: #fff;
+ transition: 1.25s;
+ }
- .main {
- position: relative;
- width: 1100px;
- // min-width: 1100px;
- // min-height: 600px;
- height: 600px;
- padding: 25px;
- background-color: #fff;
- box-shadow: 10px 0 10px #d0d5dd;
- border-radius: 12px;
- overflow: hidden;
- }
+ .form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ }
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 0;
- width: 600px;
- height: 100%;
- padding: 25px;
- background-color: #fff;
- transition: 1.25s;
- }
+ .username {
+ position: relative;
- .form {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 100%;
- height: 100%;
- }
-
- .username {
- position: relative;
-
- // margin-bottom: 1.5rem;
- .icon {
- position: absolute;
- top: 50%;
- left: 0.5rem;
- transform: translateY(-50%);
- color: #888;
- }
-
- .form__input {
- padding-left: 2rem;
- /* 确保输入框内文本不会被图标遮挡 */
- }
- }
-
- .is-null {
- margin-top: 20px;
- }
-
- .password {
- position: relative;
-
- .icon {
- position: absolute;
- top: 50%;
- color: #888;
- }
-
- .icon.left {
- left: 0.5rem;
- transform: translateY(-50%);
- }
-
- .icon.right {
- right: 0.5rem;
- transform: translateY(-50%);
- }
-
- .form__input {
- padding-left: 2rem;
- /* 确保输入框内文本不会被左侧图标遮挡 */
- padding-right: 2.5rem;
- /* 确保输入框内文本不会被右侧图标遮挡 */
- }
- }
-
- .check {
- position: relative;
- display: flex;
- text-align: center;
- justify-content: center;
- align-items: center;
-
- // margin-bottom: 1.5rem;
- .icon {
- position: absolute;
- top: 50%;
- left: 0.5rem;
- transform: translateY(-50%);
- color: #888;
- }
-
- .form__input__code {
- padding-left: 2rem;
- /* 确保输入框内文本不会被图标遮挡 */
- }
- }
-
- .remember {
- width: 350px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- .other_login {
- width: 350px;
- margin-top: 20px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
-
- .other-opt {
- flex: 1;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- }
- }
-
- .telphone {
- display: flex;
- text-align: center;
- justify-content: center;
- align-items: center;
- position: relative;
-
- // margin-bottom: 1.5rem;
- .icon {
- position: absolute;
- top: 50%;
- left: 0.5rem;
- transform: translateY(-50%);
- color: #888;
- }
-
- .form__input__code {
- padding-left: 2rem;
- /* 确保输入框内文本不会被图标遮挡 */
- }
- }
-
- .smscode {
- position: relative;
-
- // margin-bottom: 1.5rem;
- .icon {
- position: absolute;
- top: 50%;
- left: 0.5rem;
- transform: translateY(-50%);
- color: #888;
- }
-
- .form__input {
- padding-left: 2rem;
- /* 确保输入框内文本不会被图标遮挡 */
- }
- }
-
- .sendcode {
- width: 34%;
- float: right;
- }
-
- .form__icon {
- object-fit: contain;
- width: 30px;
- margin: 0 5px;
- opacity: 0.5;
- transition: 0.15s;
- }
-
- .form__icon:hover {
- opacity: 1;
- transition: 0.15s;
- cursor: pointer;
+ // margin-bottom: 1.5rem;
+ .icon {
+ position: absolute;
+ top: 50%;
+ left: 0.5rem;
+ transform: translateY(-50%);
+ color: #888;
}
.form__input {
- width: 350px;
- height: 40px;
- margin: 4px 0;
- padding-left: 25px;
- font-size: 13px;
- letter-spacing: 0.15px;
- border: none;
- outline: none;
- font-family: 'Montserrat', sans-serif;
- background-color: #fff;
- transition: 0.25s ease;
- border-radius: 8px;
- box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
+ padding-left: 2rem;
+ /* 确保输入框内文本不会被图标遮挡 */
+ }
+ }
+
+ .is-null {
+ margin-top: 20px;
+ }
+
+ .password {
+ position: relative;
+
+ .icon {
+ position: absolute;
+ top: 50%;
+ color: #888;
+ }
+
+ .icon.left {
+ left: 0.5rem;
+ transform: translateY(-50%);
+ }
+
+ .icon.right {
+ right: 0.5rem;
+ transform: translateY(-50%);
+ }
+
+ .form__input {
+ padding-left: 2rem;
+ /* 确保输入框内文本不会被左侧图标遮挡 */
+ padding-right: 2.5rem;
+ /* 确保输入框内文本不会被右侧图标遮挡 */
+ }
+ }
+
+ .check {
+ position: relative;
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+
+ // margin-bottom: 1.5rem;
+ .icon {
+ position: absolute;
+ top: 50%;
+ left: 0.5rem;
+ transform: translateY(-50%);
+ color: #888;
}
.form__input__code {
- width: 66%;
- height: 40px;
- margin: 4px 0;
- padding-left: 25px;
- font-size: 13px;
- letter-spacing: 0.15px;
- border: none;
- outline: none;
- font-family: 'Montserrat', sans-serif;
- background-color: #fff;
- transition: 0.25s ease;
- border-radius: 8px;
- box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
+ padding-left: 2rem;
+ /* 确保输入框内文本不会被图标遮挡 */
+ }
+ }
+
+ .remember {
+ width: 350px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .other_login {
+ width: 350px;
+ margin-top: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ .other-opt {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+ }
+
+ .telphone {
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ // margin-bottom: 1.5rem;
+ .icon {
+ position: absolute;
+ top: 50%;
+ left: 0.5rem;
+ transform: translateY(-50%);
+ color: #888;
}
- .form__input:focus {
- box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
+ .form__input__code {
+ padding-left: 2rem;
+ /* 确保输入框内文本不会被图标遮挡 */
+ }
+ }
+
+ .smscode {
+ position: relative;
+
+ // margin-bottom: 1.5rem;
+ .icon {
+ position: absolute;
+ top: 50%;
+ left: 0.5rem;
+ transform: translateY(-50%);
+ color: #888;
}
- .form__input__code:focus {
- box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
+ .form__input {
+ padding-left: 2rem;
+ /* 确保输入框内文本不会被图标遮挡 */
+ }
+ }
+
+ .sendcode {
+ width: 34%;
+ float: right;
+ }
+
+ .form__icon {
+ object-fit: contain;
+ width: 30px;
+ margin: 0 5px;
+ opacity: 0.5;
+ transition: 0.15s;
+ }
+
+ .form__icon:hover {
+ opacity: 1;
+ transition: 0.15s;
+ cursor: pointer;
+ }
+
+ .form__input {
+ width: 350px;
+ height: 40px;
+ margin: 4px 0;
+ padding-left: 25px;
+ font-size: 13px;
+ letter-spacing: 0.15px;
+ border: none;
+ outline: none;
+ font-family: 'Montserrat', sans-serif;
+ background-color: #fff;
+ transition: 0.25s ease;
+ border-radius: 8px;
+ box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
+ }
+
+ .form__input__code {
+ width: 66%;
+ height: 40px;
+ margin: 4px 0;
+ padding-left: 25px;
+ font-size: 13px;
+ letter-spacing: 0.15px;
+ border: none;
+ outline: none;
+ font-family: 'Montserrat', sans-serif;
+ background-color: #fff;
+ transition: 0.25s ease;
+ border-radius: 8px;
+ box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
+ }
+
+ .form__input:focus {
+ box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
+ }
+
+ .form__input__code:focus {
+ box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
+ }
+
+ .form__span {
+ font-size: 15px;
+ margin-top: 5px;
+ margin-bottom: 12px;
+ color: #0f73ee9e;
+ }
+
+ .form__link {
+ display: none;
+ color: #181818;
+ font-size: 15px;
+ margin-top: 25px;
+ border-bottom: 1px solid #a0a5a8;
+ line-height: 2;
+ }
+
+ .title {
+ font-size: 34px;
+ font-weight: 700;
+ line-height: 3;
+ color: #181818;
+ }
+
+ .description {
+ font-size: 14px;
+ letter-spacing: 0.25px;
+ text-align: center;
+ line-height: 1.6;
+ }
+
+ .button {
+ width: 180px;
+ height: 50px;
+ border-radius: 25px;
+ margin-top: 45px;
+ font-weight: 700;
+ font-size: 14px;
+ letter-spacing: 1.15px;
+ background-color: #0f73ee;
+ color: #f9f9f9;
+ box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
+ border: none;
+ outline: none;
+ }
+
+ /**/
+ .a-container {
+ z-index: 100;
+ left: calc(100% - 600px);
+ }
+
+ .b-container {
+ left: calc(100% - 600px);
+ z-index: 0;
+ }
+
+ .switch {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 500px;
+ padding: 50px;
+ z-index: 200;
+ transition: 1.25s;
+ background-color: #fff;
+ overflow: hidden;
+ }
+
+ .switch__circle {
+ position: absolute;
+ width: 450px;
+ height: 450px;
+ border-radius: 50%;
+ background-color: #fff;
+ box-shadow: inset 8px 8px 12px #dde6f4, inset -8px -8px 12px #f9f9f9;
+ bottom: -60%;
+ left: -60%;
+ transition: 1.25s;
+ }
+
+ .switch__circle--t {
+ top: -30%;
+ left: 60%;
+ width: 300px;
+ height: 300px;
+ }
+
+ .switch__container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ position: absolute;
+ width: 400px;
+ padding: 50px 55px;
+ transition: 1.25s;
+ }
+
+ .switch__button {
+ cursor: pointer;
+ }
+
+ .switch__button:hover {
+ box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
+ transform: scale(0.985);
+ transition: 0.25s;
+ }
+
+ .switch__button:active,
+ .switch__button:focus {
+ box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
+ transform: scale(0.97);
+ transition: 0.25s;
+ }
+
+ /**/
+ .is-txr {
+ left: calc(100% - 500px);
+ transition: 1.3s;
+ transform-origin: left;
+ }
+
+ .is-txl {
+ left: 0;
+ transition: 1.25s;
+ transform-origin: right;
+ }
+
+ .is-z200 {
+ z-index: 200;
+ transition: 1.25s;
+ }
+
+ .is-hidden {
+ visibility: hidden;
+ opacity: 0;
+ position: absolute;
+ transition: 1.25s;
+ }
+
+ .is-gx {
+ animation: is-gx 1.25s;
+ }
+
+ @keyframes is-gx {
+ 0%,
+ 10%,
+ 100% {
+ width: 500px;
}
- .form__span {
- font-size: 15px;
- margin-top: 5px;
- margin-bottom: 12px;
- color: #0f73ee9e;
+ 30%,
+ 50% {
+ width: 550px;
+ }
+ }
+
+ .tabs {
+ width: 400px;
+ border-bottom: none;
+ // border: solid white 1px;
+ box-shadow: none !important;
+ }
+
+ .tabs ::v-deep .el-tabs__nav {
+ background-color: white;
+ box-shadow: none !important;
+ text-decoration: none;
+ /* 设置导航栏背景颜色 */
+ }
+
+ /*去掉切换时el-tab-pane底部的蓝色下划线*/
+ ::v-deep .el-tabs__active-bar {
+ background-color: transparent !important;
+ }
+
+ /*去掉tabs底部的下划线*/
+ ::v-deep .el-tabs__nav-wrap::after {
+ position: static !important;
+ }
+
+ .tabs ::v-deep .el-tabs__item {
+ font-size: 20px;
+ /* 设置字体大小 */
+ border: none;
+ /* 去除默认边框 */
+ }
+
+ .bindAccountTitle {
+ margin: 0px auto 30px auto;
+ text-align: center;
+ color: #333;
+ font-size: 24px;
+ }
+
+ .tabs-login {
+ margin: 20px auto 0 auto;
+ z-index: 1000;
+ max-width: 350px;
+ }
+
+ .login-form {
+ margin: 10px 0 0 0;
+ z-index: 1000;
+ max-width: 350px;
+
+ input {
+ height: 38px;
+ background-color: #f1f1f1;
+ color: #666;
+ }
+
+ .input-icon {
+ height: 39px;
+ width: 14px;
+ margin-left: 2px;
+ }
+ }
+
+ .login-code {
+ width: 34%;
+ float: right;
+
+ img {
+ cursor: pointer;
+ vertical-align: middle;
+ border-radius: 3px;
+ height: 38px;
+ }
+ }
+
+ .el-login-footer {
+ height: 40px;
+ line-height: 40px;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ color: #333;
+ font-family: Arial;
+ font-size: 12px;
+ letter-spacing: 1px;
+ }
+
+ .alert-box-wrap {
+ border: 1px solid #f78e21;
+
+ .alert-message-wrap {
+ font-size: 14px;
+ font-family: '微软雅黑';
+ color: rgba(197, 41, 41, 0.856);
+ margin-left: 10px;
+ }
+ }
+}
+
+@media (max-width: 1200px) {
+ .main {
+ transform: scale(0.9);
+
+ .switch {
+ width: 40%;
+ }
+
+ .container {
+ width: 60%;
+ }
+ }
+}
+
+@media (max-width: 1000px) {
+ .main {
+ transform: scale(0.8);
+
+ .switch {
+ width: 40%;
+ }
+
+ .container {
+ width: 60%;
+ }
+ }
+}
+
+@media (max-width: 800px) {
+ .main {
+ transform: scale(0.9);
+ display: flex;
+ justify-content: center;
+ /* 水平居中 */
+ align-items: center;
+ /* 垂直居中 */
+ height: 100vh;
+ /* 设置容器高度为视口高度,实现垂直居中 */
+ width: 600px;
+
+ .a-container {
+ position: absolute;
+ z-index: 100;
+ left: 50%;
+ /* 将元素的左边缘移动到父容器的水平中心 */
+ transform: translateX(-50%);
+ /* 通过向左平移自身宽度的一半来实现水平居中 */
+ }
+
+ .b-container {
+ position: absolute;
+ z-index: 100;
+ left: 50%;
+ /* 将元素的左边缘移动到父容器的水平中心 */
+ transform: translateX(-50%);
+ /* 通过向左平移自身宽度的一半来实现水平居中 */
+ }
+
+ .switch {
+ display: none;
}
.form__link {
+ display: block;
+ color: #181818;
+ font-size: 15px;
+ margin-top: 25px;
+ border-bottom: 1px solid #a0a5a8;
+ line-height: 2;
+ }
+ }
+}
+
+@media (max-width: 600px) {
+ .login {
+ background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/login.png');
+
+ .main {
+ transform: scale(0.9);
+ display: flex;
+ justify-content: center;
+ /* 水平居中 */
+ align-items: center;
+ /* 垂直居中 */
+ height: 75vh;
+ width: 100vh;
+ box-shadow: 10px 0 10px #5c7aaa;
+
+ .a-container {
+ //background: linear-gradient(to bottom, #0f73ee 25%, #ffffff 25%);
+ position: absolute;
+ width: 100%;
+ z-index: 100;
+ left: 50%;
+ /* 将元素的左边缘移动到父容器的水平中心 */
+ transform: translateX(-50%);
+ /* 通过向左平移自身宽度的一半来实现水平居中 */
+ }
+
+ .switch {
display: none;
+ }
+
+ .b-container {
+ position: absolute;
+ z-index: 100;
+ left: 50%;
+ /* 将元素的左边缘移动到父容器的水平中心 */
+ transform: translateX(-50%);
+ /* 通过向左平移自身宽度的一半来实现水平居中 */
+ }
+
+ .form__link {
+ display: block;
color: #181818;
font-size: 15px;
margin-top: 25px;
border-bottom: 1px solid #a0a5a8;
line-height: 2;
+ }
}
-
- .title {
- font-size: 34px;
- font-weight: 700;
- line-height: 3;
- color: #181818;
- }
-
- .description {
- font-size: 14px;
- letter-spacing: 0.25px;
- text-align: center;
- line-height: 1.6;
- }
-
- .button {
- width: 180px;
- height: 50px;
- border-radius: 25px;
- margin-top: 45px;
- font-weight: 700;
- font-size: 14px;
- letter-spacing: 1.15px;
- background-color: #0f73ee;
- color: #f9f9f9;
- box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
- border: none;
- outline: none;
- }
-
- /**/
- .a-container {
- z-index: 100;
- left: calc(100% - 600px);
- }
-
- .b-container {
- left: calc(100% - 600px);
- z-index: 0;
- }
-
- .switch {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 500px;
- padding: 50px;
- z-index: 200;
- transition: 1.25s;
- background-color: #fff;
- overflow: hidden;
- }
-
- .switch__circle {
- position: absolute;
- width: 450px;
- height: 450px;
- border-radius: 50%;
- background-color: #fff;
- box-shadow: inset 8px 8px 12px #dde6f4, inset -8px -8px 12px #f9f9f9;
- bottom: -60%;
- left: -60%;
- transition: 1.25s;
- }
-
- .switch__circle--t {
- top: -30%;
- left: 60%;
- width: 300px;
- height: 300px;
- }
-
- .switch__container {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- position: absolute;
- width: 400px;
- padding: 50px 55px;
- transition: 1.25s;
- }
-
- .switch__button {
- cursor: pointer;
- }
-
- .switch__button:hover {
- box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
- transform: scale(0.985);
- transition: 0.25s;
- }
-
- .switch__button:active,
- .switch__button:focus {
- box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
- transform: scale(0.97);
- transition: 0.25s;
- }
-
- /**/
- .is-txr {
- left: calc(100% - 500px);
- transition: 1.3s;
- transform-origin: left;
- }
-
- .is-txl {
- left: 0;
- transition: 1.25s;
- transform-origin: right;
- }
-
- .is-z200 {
- z-index: 200;
- transition: 1.25s;
- }
-
- .is-hidden {
- visibility: hidden;
- opacity: 0;
- position: absolute;
- transition: 1.25s;
- }
-
- .is-gx {
- animation: is-gx 1.25s;
- }
-
- @keyframes is-gx {
- 0%,
- 10%,
- 100% {
- width: 500px;
- }
-
- 30%,
- 50% {
- width: 550px;
- }
- }
-
- .tabs {
- width: 400px;
- border-bottom: none;
- // border: solid white 1px;
- box-shadow: none !important;
- }
-
- .tabs ::v-deep .el-tabs__nav {
- background-color: white;
- box-shadow: none !important;
- text-decoration: none;
- /* 设置导航栏背景颜色 */
- }
-
- /*去掉切换时el-tab-pane底部的蓝色下划线*/
- ::v-deep .el-tabs__active-bar {
- background-color: transparent !important;
- }
-
- /*去掉tabs底部的下划线*/
- ::v-deep .el-tabs__nav-wrap::after {
- position: static !important;
- }
-
- .tabs ::v-deep .el-tabs__item {
- font-size: 20px;
- /* 设置字体大小 */
- border: none;
- /* 去除默认边框 */
- }
-
- .bindAccountTitle {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #333;
- font-size: 24px;
- }
-
- .tabs-login {
- margin: 20px auto 0 auto;
- z-index: 1000;
- max-width: 350px;
- }
-
- .login-form {
- margin: 10px 0 0 0;
- z-index: 1000;
- max-width: 350px;
-
- input {
- height: 38px;
- background-color: #f1f1f1;
- color: #666;
- }
-
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 2px;
- }
- }
-
- .login-code {
- width: 34%;
- float: right;
-
- img {
- cursor: pointer;
- vertical-align: middle;
- border-radius: 3px;
- height: 38px;
- }
- }
-
- .el-login-footer {
- height: 40px;
- line-height: 40px;
- position: fixed;
- bottom: 0;
- width: 100%;
- text-align: center;
- color: #333;
- font-family: Arial;
- font-size: 12px;
- letter-spacing: 1px;
- }
-
- .alert-box-wrap {
- border: 1px solid #f78e21;
-
- .alert-message-wrap {
- font-size: 14px;
- font-family: '微软雅黑';
- color: rgba(197, 41, 41, 0.856);
- margin-left: 10px;
- }
- }
+ }
}
-@media (max-width: 1200px) {
- .main {
- transform: scale(0.9);
-
- .switch {
- width: 40%;
- }
-
- .container {
- width: 60%;
- }
- }
-}
-
-@media (max-width: 1000px) {
- .main {
- transform: scale(0.8);
-
- .switch {
- width: 40%;
- }
-
- .container {
- width: 60%;
- }
- }
-}
-
-@media (max-width: 800px) {
- .main {
- transform: scale(0.9);
- display: flex;
- justify-content: center;
- /* 水平居中 */
- align-items: center;
- /* 垂直居中 */
- height: 100vh;
- /* 设置容器高度为视口高度,实现垂直居中 */
- width: 600px;
-
- .a-container {
- position: absolute;
- z-index: 100;
- left: 50%;
- /* 将元素的左边缘移动到父容器的水平中心 */
- transform: translateX(-50%);
- /* 通过向左平移自身宽度的一半来实现水平居中 */
- }
-
- .b-container {
- position: absolute;
- z-index: 100;
- left: 50%;
- /* 将元素的左边缘移动到父容器的水平中心 */
- transform: translateX(-50%);
- /* 通过向左平移自身宽度的一半来实现水平居中 */
- }
-
- .switch {
- display: none;
- }
-
- .form__link {
- display: block;
- color: #181818;
- font-size: 15px;
- margin-top: 25px;
- border-bottom: 1px solid #a0a5a8;
- line-height: 2;
- }
- }
-}
-
-@media (max-width: 600px) {
- .login {
- background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/login.png');
-
- .main {
- transform: scale(0.9);
- display: flex;
- justify-content: center;
- /* 水平居中 */
- align-items: center;
- /* 垂直居中 */
- height: 75vh;
- width: 100vh;
- box-shadow: 10px 0 10px #5c7aaa;
-
- .a-container {
- //background: linear-gradient(to bottom, #0f73ee 25%, #ffffff 25%);
- position: absolute;
- width: 100%;
- z-index: 100;
- left: 50%;
- /* 将元素的左边缘移动到父容器的水平中心 */
- transform: translateX(-50%);
- /* 通过向左平移自身宽度的一半来实现水平居中 */
- }
-
- .switch {
- display: none;
- }
-
- .b-container {
- position: absolute;
- z-index: 100;
- left: 50%;
- /* 将元素的左边缘移动到父容器的水平中心 */
- transform: translateX(-50%);
- /* 通过向左平移自身宽度的一半来实现水平居中 */
- }
-
- .form__link {
- display: block;
- color: #181818;
- font-size: 15px;
- margin-top: 25px;
- border-bottom: 1px solid #a0a5a8;
- line-height: 2;
- }
- }
- }
-}
+/* 路由跳转 Loading 样式 */