修改登录页面样式
This commit is contained in:
parent
437677cf59
commit
94e8b015da
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
|
|
@ -358,7 +358,7 @@ a {
|
|||
}
|
||||
|
||||
.login-background-img {
|
||||
background-image: url(../icon/jeecg_bg.png);
|
||||
background-image: url(../icon/jeecg_bg.jpg);
|
||||
background-size: cover;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
.aui-container {
|
||||
max-width: 1000px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
.aui-form {
|
||||
width: 100%;
|
||||
background: #eee;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
// display: -webkit-box;
|
||||
// display: -moz-box;
|
||||
// display: -ms-flexbox;
|
||||
// display: -webkit-flex;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.aui-image {
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
.aui-logo {
|
||||
width: 180px;
|
||||
width: auto;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,37 @@
|
|||
<template>
|
||||
<div :class="prefixCls" class="login-background-img">
|
||||
<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 class="aui-logo" v-if="!getIsMobile">
|
||||
<!-- <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 class="aui-logo" >
|
||||
<div>
|
||||
<h3>
|
||||
<img :src="logoImg" alt="jeecg" />
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="aui-phone-logo">
|
||||
<!-- <div v-else class="aui-phone-logo">
|
||||
<img :src="logoImg" alt="jeecg" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div v-show="type === 'login'">
|
||||
<div class="aui-content">
|
||||
<div class="aui-container">
|
||||
<div class="aui-form">
|
||||
<div class="aui-image">
|
||||
<div style="margin-bottom: 40px;text-align: center;">
|
||||
<h3 style="color:aliceblue;font-size: 40px;font-weight: 700;">
|
||||
高校课程信息管理平台
|
||||
</h3>
|
||||
</div>
|
||||
<div class="aui-container" >
|
||||
<div class="aui-form" style="border-radius: 15px;">
|
||||
<!-- <div class="aui-image">
|
||||
<div class="aui-image-text">
|
||||
<img :src="adTextImg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-formBox">
|
||||
</div> -->
|
||||
<div class="aui-formBox" style="border-radius: 15px;">
|
||||
<div class="aui-formWell">
|
||||
<div class="aui-flex aui-form-nav investment_title">
|
||||
<div class="aui-flex-box" :class="activeIndex === 'accountLogin' ? 'activeNav on' : ''" @click="loginClick('accountLogin')"
|
||||
>{{ t('sys.login.signInFormTitle') }}
|
||||
</div>
|
||||
<div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
|
||||
<!-- <div class="aui-flex-box" :class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''" @click="loginClick('phoneLogin')"
|
||||
>{{ t('sys.login.mobileSignInFormTitle') }}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="aui-form-box" style="height: 180px">
|
||||
<a-form ref="loginRef" :model="formData" v-if="activeIndex === 'accountLogin'" @keyup.enter.native="loginHandleClick">
|
||||
|
|
@ -56,7 +58,7 @@
|
|||
<img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex">
|
||||
<!-- <div class="aui-flex">
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-choice">
|
||||
<a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
|
||||
|
|
@ -66,10 +68,10 @@
|
|||
<div class="aui-forget">
|
||||
<a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</a-form>
|
||||
<a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
|
||||
<!-- <a-form v-else ref="phoneFormRef" :model="phoneFormData" @keyup.enter.native="loginHandleClick">
|
||||
<div class="aui-account phone">
|
||||
<div class="aui-inputClear phoneClear">
|
||||
<a-input class="fix-auto-fill" :placeholder="t('sys.login.mobile')" v-model:value="phoneFormData.mobile" />
|
||||
|
|
@ -84,56 +86,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-form> -->
|
||||
</div>
|
||||
<div class="aui-formButton">
|
||||
<div class="aui-flex">
|
||||
<a-button :loading="loginLoading" class="aui-link-login aui-flex-box" type="primary" @click="loginHandleClick">
|
||||
{{ t('sys.login.loginButton') }}</a-button>
|
||||
</div>
|
||||
<div class="aui-flex">
|
||||
<!-- <div class="aui-flex">
|
||||
<a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
|
||||
</div>
|
||||
<div class="aui-flex">
|
||||
<a class="aui-linek-code aui-flex-box" @click="registerHandleClick">{{ t('sys.login.registerButton') }}</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<a-form @keyup.enter.native="loginHandleClick">
|
||||
<div class="aui-flex aui-third-text">
|
||||
<div class="aui-flex-box aui-third-border">
|
||||
<span>{{ t('sys.login.otherSignIn') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex" :class="`${prefixCls}-sign-in-way`">
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="github" @click="onThirdLogin('github')"><GithubFilled /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="钉钉" @click="onThirdLogin('dingtalk')"><DingtalkCircleFilled /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aui-flex-box">
|
||||
<div class="aui-third-login">
|
||||
<a title="微信" @click="onThirdLogin('wechat_open')"><WechatFilled /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
|
||||
<!-- <div v-show="type === 'forgot'" :class="`${prefixCls}-form`">
|
||||
<MiniForgotpad ref="forgotRef" @go-back="goBack" @success="handleSuccess" />
|
||||
</div>
|
||||
<div v-show="type === 'register'" :class="`${prefixCls}-form`">
|
||||
|
|
@ -141,9 +114,9 @@
|
|||
</div>
|
||||
<div v-show="type === 'codeLogin'" :class="`${prefixCls}-form`">
|
||||
<MiniCodelogin ref="codeRef" @go-back="goBack" @success="handleSuccess" />
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 第三方登录相关弹框 -->
|
||||
<ThirdModal ref="thirdModalRef"></ThirdModal>
|
||||
<!-- <ThirdModal ref="thirdModalRef"></ThirdModal> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="login-mini">
|
||||
|
|
|
|||
Loading…
Reference in New Issue