Browse Source

优化登录页面样式,调整执法人员信息显示及背景图样式

master
parent
commit
9bc14ab7c6
  1. 2
      .env.prod
  2. 59
      src/views/Login/Login.vue
  3. 2
      src/views/enterprises/index.vue

2
.env.prod

@ -4,7 +4,7 @@ NODE_ENV=production
VITE_DEV=false
# 请求路径
VITE_BASE_URL='https://hb.jzce.com'
VITE_BASE_URL='https://yxsthj.cn/'
# 文件上传类型:server - 后端上传, client - 前端直连上传,仅支持S3服务
VITE_UPLOAD_TYPE=server

59
src/views/Login/Login.vue

@ -7,15 +7,11 @@
<div
:class="`${prefixCls}__left flex-1 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
>
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-50px)] flex items-center justify-center">
</div>
<div class="h-[calc(100%-50px)] flex items-center justify-center"> </div>
</div>
<div
class="relative flex-1 bg-#fff bg-opacity-90 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
class="relative flex-1 bg-#fff bg-opacity-90 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
>
<!-- 右上角的主题语言选择 -->
<!-- <div
@ -29,15 +25,21 @@
</div>
</div> -->
<!-- 右边的登录界面 -->
<Transition appear enter-active-class="animate__animated animate__bounceInRight" class="rightLogin">
<Transition
appear
enter-active-class="animate__animated animate__bounceInRight"
class="rightLogin"
>
<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"
>
<!-- 账号登录 -->
<LoginForm v-if="isIpAccess" class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 二维码登录 -->
<QrCodeForm v-else class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 账号登录 -->
<LoginForm
v-if="isIpAccess"
class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)"
/>
<!-- 二维码登录 -->
<QrCodeForm v-else class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
</div>
</Transition>
</div>
@ -45,42 +47,37 @@
</div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
import {
LoginForm,
QrCodeForm,
} from './components'
defineOptions({ name: 'Login' })
const isIpAccess = ref(false)
onMounted(() => {
const hostname = window.location.hostname
if(hostname == 'localhost'){
isIpAccess.value = true;
}
else{
isIpAccess.value = /^(\d{1,3}\.){3}\d{1,3}$/.test(hostname)
}
const hostname = window.location.hostname
if (hostname == 'localhost') {
isIpAccess.value = true
} else {
isIpAccess.value = /^(\d{1,3}\.){3}\d{1,3}$/.test(hostname)
}
// IP访
})
const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>
<style lang="scss" scoped>
.loginBgCls{
.loginBgCls {
background-image: url('@/assets/imgs/screen/login-left.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.rightLogin{
.rightLogin {
transition: all 1s;
}
@ -116,4 +113,4 @@ $prefix-cls: #{$namespace}-login;
background-color: var(--login-bg-color);
}
}
</style>
</style>

2
src/views/enterprises/index.vue

@ -111,7 +111,7 @@
</el-table-column>
<el-table-column label="执法人员" width="200">
<template #default="scope">
{{`${scope.row.inviterName} | ${scope.row.inviterName}`}}
{{`${scope.row.inviterName} | ${scope.row.inviterNameDept}`}}
</template>
</el-table-column>
<el-table-column

Loading…
Cancel
Save