Skip to content

phsl / admin

Go to a project
Commit 0eadb0af by 孙美琪
Options

登录页面修改

parent 76844b4b
Showing with 57 additions and 114 deletions
src/store/modules/app.ts
...@@ -61,7 +61,7 @@ export const useAppStore = defineStore('app', { ...@@ -61,7 +61,7 @@ export const useAppStore = defineStore('app', {
message: false, // 消息图标 message: false, // 消息图标
tagsView: true, // 标签页 tagsView: true, // 标签页
tagsViewImmerse: false, // 标签页沉浸 tagsViewImmerse: false, // 标签页沉浸
tagsViewIcon: true, // 是否显示标签图标 tagsViewIcon: false, // 是否显示标签图标
logo: true, // logo logo: true, // logo
fixedHeader: true, // 固定toolheader fixedHeader: true, // 固定toolheader
footer: true, // 显示页脚 footer: true, // 显示页脚
......
src/views/Login/Login.vue
...@@ -3,62 +3,30 @@ ...@@ -3,62 +3,30 @@
:class="prefixCls" :class="prefixCls"
class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px" class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
> >
<div class="relative mx-auto h-full flex"> <div class="relative mx-auto h-full flex bg">
<!-- <div-->
<!-- :class="`${prefixCls}__left flex-1 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"-->
<!-- >-->
<!-- </div>-->
<div <div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`" class="flex-1 p-30px lt-sm:p-10px overflow-x-hidden overflow-y-auto"
style="display: flex; justify-content: center; align-items: center"
> >
<!-- 左上角的 logo + 系统标题 -->
<div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
appear
enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
>
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div key="3" class="mt-5 text-14px font-normal text-white">
{{ t('login.message') }}
</div>
</TransitionGroup>
</div>
</div>
<div
class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
>
<!-- 右上角的主题、语言选择 -->
<div
class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
style="color: var(--el-text-color-primary);"
>
<div class="flex items-center at-2xl:hidden at-xl:hidden">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold" >{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<div class="flex items-center justify-end space-x-10px h-48px">
<ThemeSwitch />
<LocaleDropdown />
</div>
</div>
<!-- 右边的登录界面 --> <!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight"> <Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div <div
class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px" class="form-bg m-auto w-[100%] flex items-center at-2xl:max-w-400px at-lg:max-w-400px at-md:max-w-400px at-xl:max-w-400px"
> >
<!-- 账号登录 --> <!-- 账号登录 -->
<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 手机登录 --> <!-- &lt;!&ndash; 手机登录 &ndash;&gt;-->
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <!-- <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
<!-- 二维码登录 --> <!-- &lt;!&ndash; 二维码登录 &ndash;&gt;-->
<QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <!-- <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
<!-- 注册 --> <!-- &lt;!&ndash; 注册 &ndash;&gt;-->
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <!-- <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
<!-- 三方登录 --> <!-- &lt;!&ndash; 三方登录 &ndash;&gt;-->
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <!-- <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
<!-- 忘记密码 --> <!-- 忘记密码 -->
<ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> <ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
</div> </div>
...@@ -68,14 +36,19 @@ ...@@ -68,14 +36,19 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch' import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown' import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components' import {
LoginForm,
MobileForm,
QrCodeForm,
RegisterForm,
SSOLoginVue,
ForgetPasswordForm
} from './components'
defineOptions({ name: 'Login' }) defineOptions({ name: 'Login' })
...@@ -118,4 +91,12 @@ $prefix-cls: #{$namespace}-login; ...@@ -118,4 +91,12 @@ $prefix-cls: #{$namespace}-login;
background-color: var(--login-bg-color); background-color: var(--login-bg-color);
} }
} }
</style>
\ No newline at end of file .bg {
background: url('@/assets/imgs/login-background.png') no-repeat center center/100%;
}
.form-bg {
background: #ffffff;
}
</style>
src/views/Login/components/LoginForm.vue
...@@ -12,7 +12,10 @@ ...@@ -12,7 +12,10 @@
<el-row style="margin-right: -10px; margin-left: -10px"> <el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
<LoginFormTitle style="width: 100%" /> <!-- <LoginFormTitle style="width: 100%" />-->
<div class="loginFormTitle"
>{{ underlineToHump(appStore.getTitle) }} <br />后台管理系统
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
...@@ -89,64 +92,6 @@ ...@@ -89,64 +92,6 @@
mode="pop" mode="pop"
@success="handleLogin" @success="handleLogin"
/> />
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<el-row :gutter="5" justify="space-between" style="width: 100%">
<el-col :span="8">
<XButton
:title="t('login.btnMobile')"
class="w-[100%]"
@click="setLoginState(LoginStateEnum.MOBILE)"
/>
</el-col>
<el-col :span="8">
<XButton
:title="t('login.btnQRCode')"
class="w-[100%]"
@click="setLoginState(LoginStateEnum.QR_CODE)"
/>
</el-col>
<el-col :span="8">
<XButton
:title="t('login.btnRegister')"
class="w-[100%]"
@click="setLoginState(LoginStateEnum.REGISTER)"
/>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<div class="w-[100%] flex justify-between">
<Icon
v-for="(item, key) in socialList"
:key="key"
:icon="item.icon"
:size="30"
class="anticon cursor-pointer"
color="#999"
@click="doSocialLogin(item.type)"
/>
</div>
</el-form-item>
</el-col>
<el-divider content-position="center">萌新必读</el-divider>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<div class="w-[100%] flex justify-between">
<el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>
<el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>
<el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">
⚡面试手册
</el-link>
<el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">
🤝外包咨询
</el-link>
</div>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
</template> </template>
...@@ -161,6 +106,8 @@ import * as authUtil from '@/utils/auth' ...@@ -161,6 +106,8 @@ import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission' import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login' import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin' import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { underlineToHump } from '@/utils'
import { useAppStore } from '@/store/modules/app'
defineOptions({ name: 'LoginForm' }) defineOptions({ name: 'LoginForm' })
...@@ -178,7 +125,7 @@ const redirect = ref<string>('') ...@@ -178,7 +125,7 @@ const redirect = ref<string>('')
const loginLoading = ref(false) const loginLoading = ref(false)
const verify = ref() const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
const appStore = useAppStore()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN) const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
const LoginRules = { const LoginRules = {
...@@ -358,4 +305,20 @@ onMounted(() => { ...@@ -358,4 +305,20 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.loginFormTitle {
color: #2e77e3;
margin: 0 auto;
text-align: center;
font-size: 30px;
font-family: YouSheBiaoTiHei, system-ui;
}
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}
:deep(.el-input__inner) {
color: #606266;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment