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>
<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" />
<div v-show="type === 'login'">
<div class="aui-content">
@ -8,14 +8,14 @@
<div class="aui-form">
<div class="aui-image">
<div class="aui-image-text">
<div>
<span class="introduce-text" >哈尔滨师范大学</span>
<br>
<span class="introduce-text" >英语四六级综合管理平台</span>
<br>
<br>
<span class="introduce-text" style="font-size: 18px;">深入分析 多维展示</span>
</div>
<div>
<span class="introduce-text">哈尔滨师范大学</span>
<br />
<span class="introduce-text">英语四六级综合管理平台</span>
<br />
<br />
<span class="introduce-text" style="font-size: 18px">深入分析 多维展示</span>
</div>
</div>
</div>
<div class="aui-formBox">
@ -62,7 +62,8 @@
<div class="aui-formButton">
<div class="aui-flex">
<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 class="aui-flex">
<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" />
</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>
</template>
<script lang="ts" setup name="login-mini">
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 { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
@ -101,8 +120,8 @@
import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import { useLocaleStore } from '/@/store/modules/locale';
import { useDesign } from "/@/hooks/web/useDesign";
import { useAppInject } from "/@/hooks/web/useAppInject";
import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from '/@/hooks/web/useAppInject';
const { prefixCls } = useDesign('mini-login');
const { notification, createMessage } = useMessage();
@ -146,7 +165,6 @@
const loginLoading = ref<boolean>(false);
const { getIsMobile } = useAppInject();
/**
* 获取验证码
*/
@ -282,8 +300,6 @@
}
}
/**
* 返回登录页面
*/
@ -298,7 +314,7 @@
*/
function handleSuccess(value) {
Object.assign(formData, value);
Object.assign(phoneFormData, { mobile: "", smscode: "" });
Object.assign(phoneFormData, { mobile: '', smscode: '' });
type.value = 'login';
activeIndex.value = 'accountLogin';
handleChangeCheckCode();
@ -314,7 +330,6 @@
}, 300);
}
onMounted(() => {
//加载验证码
handleChangeCheckCode();
@ -357,11 +372,11 @@
color: #aaa !important;
}
:deep(.jeecg-dark-switch){
position:absolute;
:deep(.jeecg-dark-switch) {
position: absolute;
margin-right: 10px;
}
.aui-link-login{
.aui-link-login {
height: 42px;
padding: 10px 15px;
font-size: 14px;
@ -371,100 +386,103 @@
flex: 1;
color: #fff;
}
.aui-phone-logo{
.aui-phone-logo {
position: absolute;
margin-left: 10px;
width: 60px;
top:2px;
top: 2px;
z-index: 4;
}
.top-3{
.top-3 {
top: 0.45rem;
}
</style>
<style lang="less">
@prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146;
@prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146;
html[data-theme='dark'] {
.@{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{
html[data-theme='dark'] {
.@{prefix-cls} {
background-color: @dark-bg !important;
}
.aui-third-text span{
background-color: @dark-bg !important;
}
.aui-form-nav .aui-flex-box{
color: #c9d1d9 !important;
}
background-image: none;
.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;
&::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;
}
&:hover {
color: @primary-color !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;
}
.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,
.fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important;
input.fix-auto-fill,
.fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !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>