Big-Data-Lab
/
CET-vue-3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

登录页面优化

This commit is contained in:
YuNan 2024-12-10 14:27:04 +08:00
parent f0b15ce2da
commit 7cc1046d67
1 changed files with 117 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
src/views/system/loginmini/MiniLogin.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="prefixCls" class="login-background-img"> <div :class="prefixCls" class="login-background-img">
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/> <AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false" />
<AppDarkModeToggle class="absolute top-3 right-7 enter-x" /> <AppDarkModeToggle class="absolute top-3 right-7 enter-x" />
<div v-show="type === 'login'"> <div v-show="type === 'login'">
<div class="aui-content"> <div class="aui-content">
@ -8,14 +8,14 @@
<div class="aui-form"> <div class="aui-form">
<div class="aui-image"> <div class="aui-image">
<div class="aui-image-text"> <div class="aui-image-text">
<div> <div>
<span class="introduce-text" >哈尔滨师范大学</span> <span class="introduce-text">哈尔滨师范大学</span>
<br> <br />
<span class="introduce-text" >英语四六级综合管理平台</span> <span class="introduce-text">英语四六级综合管理平台</span>
<br> <br />
<br> <br />
<span class="introduce-text" style="font-size: 18px;">深入分析 多维展示</span> <span class="introduce-text" style="font-size: 18px">深入分析 多维展示</span>
</div> </div>
</div> </div>
</div> </div>
<div class="aui-formBox"> <div class="aui-formBox">
@ -62,7 +62,8 @@
<div class="aui-formButton"> <div class="aui-formButton">
<div class="aui-flex"> <div class="aui-flex">
<a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick"> <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
{{ t('sys.login.loginButton') }}</a-button> {{ t('sys.login.loginButton') }}</a-button
>
</div> </div>
<div class="aui-flex"> <div class="aui-flex">
<a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a> <a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
@ -84,12 +85,30 @@
<MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" /> <MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
</div> </div>
<!-- 第三方登录相关弹框 --> <!-- 第三方登录相关弹框 -->
<ThirdModal ref="thirdModalRef"></ThirdModal> <ThirdModal ref="thirdModalRef" />
<div class="square">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="circle">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup name="login-mini"> <script lang="ts" setup name="login-mini">
import { getCaptcha, getCodeInfo } from '/@/api/sys/user'; import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
import { onMounted, reactive, ref, toRaw, unref } from 'vue'; import { defineComponent, onMounted, reactive, ref, toRaw, unref } from 'vue';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
@ -101,8 +120,8 @@
import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png'; import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import { useLocaleStore } from '/@/store/modules/locale'; import { useLocaleStore } from '/@/store/modules/locale';
import { useDesign } from "/@/hooks/web/useDesign"; import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from "/@/hooks/web/useAppInject"; import { useAppInject } from '/@/hooks/web/useAppInject';
const { prefixCls } = useDesign('mini-login'); const { prefixCls } = useDesign('mini-login');
const { notification, createMessage } = useMessage(); const { notification, createMessage } = useMessage();
@ -146,7 +165,6 @@
const loginLoading = ref<boolean>(false); const loginLoading = ref<boolean>(false);
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
/** /**
* 获取验证码 * 获取验证码
*/ */
@ -282,8 +300,6 @@
} }
} }
/** /**
* 返回登录页面 * 返回登录页面
*/ */
@ -298,7 +314,7 @@
*/ */
function handleSuccess(value) { function handleSuccess(value) {
Object.assign(formData, value); Object.assign(formData, value);
Object.assign(phoneFormData, { mobile: "", smscode: "" }); Object.assign(phoneFormData, { mobile: '', smscode: '' });
type.value = 'login'; type.value = 'login';
activeIndex.value = 'accountLogin'; activeIndex.value = 'accountLogin';
handleChangeCheckCode(); handleChangeCheckCode();
@ -314,7 +330,6 @@
}, 300); }, 300);
} }
onMounted(() => { onMounted(() => {
//加载验证码 //加载验证码
handleChangeCheckCode(); handleChangeCheckCode();
@ -357,11 +372,11 @@
color: #aaa !important; color: #aaa !important;
} }
:deep(.jeecg-dark-switch){ :deep(.jeecg-dark-switch) {
position:absolute; position: absolute;
margin-right: 10px; margin-right: 10px;
} }
.aui-link-login{ .aui-link-login {
height: 42px; height: 42px;
padding: 10px 15px; padding: 10px 15px;
font-size: 14px; font-size: 14px;
@ -371,100 +386,103 @@
flex: 1; flex: 1;
color: #fff; color: #fff;
} }
.aui-phone-logo{ .aui-phone-logo {
position: absolute; position: absolute;
margin-left: 10px; margin-left: 10px;
width: 60px; width: 60px;
top:2px; top: 2px;
z-index: 4; z-index: 4;
} }
.top-3{ .top-3 {
top: 0.45rem; top: 0.45rem;
} }
</style> </style>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-mini-login'; @prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146; @dark-bg: #293146;
html[data-theme='dark'] { html[data-theme='dark'] {
.@{prefix-cls} { .@{prefix-cls} {
background-color: @dark-bg !important;
background-image: none;
&::before {
background-image: url(/@/assets/svg/login-bg-dark.svg);
}
.aui-inputClear{
background-color: #232a3b !important;
}
.ant-input,
.ant-input-password {
background-color: #232a3b !important;
}
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
border: 1px solid #4a5569 !important;
}
&-form {
background: @dark-bg !important;
}
.app-iconify {
color: #fff !important;
}
.aui-inputClear input,.aui-input-line input,.aui-choice{
color: #c9d1d9 !important;
}
.aui-formBox{
background-color: @dark-bg !important; background-color: @dark-bg !important;
} background-image: none;
.aui-third-text span{
background-color: @dark-bg !important;
}
.aui-form-nav .aui-flex-box{
color: #c9d1d9 !important;
}
.aui-formButton .aui-linek-code{ &::before {
background: @dark-bg !important; background-image: url(/@/assets/svg/login-bg-dark.svg);
color: white !important; }
} .aui-inputClear {
.aui-code-line{ background-color: #232a3b !important;
border-left: none !important; }
} .ant-input,
.ant-checkbox-inner,.aui-success h3{ .ant-input-password {
border-color: #c9d1d9; background-color: #232a3b !important;
} }
//update-begin---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
&-sign-in-way {
.anticon {
font-size: 22px !important;
color: #888 !important;
cursor: pointer !important;
&:hover { .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
color: @primary-color !important; border: 1px solid #4a5569 !important;
}
&-form {
background: @dark-bg !important;
}
.app-iconify {
color: #fff !important;
}
.aui-inputClear input,
.aui-input-line input,
.aui-choice {
color: #c9d1d9 !important;
}
.aui-formBox {
background-color: @dark-bg !important;
}
.aui-third-text span {
background-color: @dark-bg !important;
}
.aui-form-nav .aui-flex-box {
color: #c9d1d9 !important;
}
.aui-formButton .aui-linek-code {
background: @dark-bg !important;
color: white !important;
}
.aui-code-line {
border-left: none !important;
}
.ant-checkbox-inner,
.aui-success h3 {
border-color: #c9d1d9;
}
//update-begin---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
&-sign-in-way {
.anticon {
font-size: 22px !important;
color: #888 !important;
cursor: pointer !important;
&:hover {
color: @primary-color !important;
}
} }
} }
//update-end---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
} }
//update-end---author:wangshuai ---date:20230828 for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
}
input.fix-auto-fill, input.fix-auto-fill,
.fix-auto-fill input { .fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !important; -webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important; box-shadow: inherit !important;
}
.ant-divider-inner-text {
font-size: 12px !important;
color: @text-color-secondary !important;
}
.aui-third-login a {
background: transparent;
}
} }
.ant-divider-inner-text {
font-size: 12px !important;
color: @text-color-secondary !important;
}
.aui-third-login a{
background: transparent;
}
}
</style> </style>