修改登录界面

new-map
H 2022-11-11 10:42:13 +08:00
parent e61eb546e7
commit a87d4290bf
4 changed files with 35 additions and 32 deletions

2
.env
View File

@ -2,7 +2,7 @@
VITE_PORT = 3100
# spa-title
VITE_GLOB_APP_TITLE = Admin
VITE_GLOB_APP_TITLE = 隆昌农业大数据监控平台
# spa shortname
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

View File

@ -4,20 +4,20 @@
-->
<template>
<div class="anticon" :class="getAppLogoClass" @click="goHome">
<img src="../../../assets/images/logo.png" />
<!-- <img src="../../../assets/images/logo.png" />
<div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
{{ title }}
</div>
</div> -->
</div>
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting';
import { useGo } from '/@/hooks/web/usePage';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { PageEnum } from '/@/enums/pageEnum';
import { useUserStore } from '/@/store/modules/user';
import { computed, unref } from 'vue'
import { useGlobSetting } from '/@/hooks/setting'
import { useGo } from '/@/hooks/web/usePage'
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
import { useDesign } from '/@/hooks/web/useDesign'
import { PageEnum } from '/@/enums/pageEnum'
import { useUserStore } from '/@/store/modules/user'
const props = defineProps({
/**
@ -32,29 +32,29 @@
* The title is also displayed when the menu is collapsed
*/
alwaysShowTitle: { type: Boolean },
});
})
const { prefixCls } = useDesign('app-logo');
const { getCollapsedShowTitle } = useMenuSetting();
const userStore = useUserStore();
const { title } = useGlobSetting();
const go = useGo();
const { prefixCls } = useDesign('app-logo')
const { getCollapsedShowTitle } = useMenuSetting()
const userStore = useUserStore()
const { title } = useGlobSetting()
const go = useGo()
const getAppLogoClass = computed(() => [
prefixCls,
props.theme,
{ 'collapsed-show-title': unref(getCollapsedShowTitle) },
]);
])
const getTitleClass = computed(() => [
`${prefixCls}__title`,
{
'xs:opacity-0': !props.alwaysShowTitle,
},
]);
])
function goHome() {
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
}
</script>
<style lang="less" scoped>

View File

@ -10,7 +10,7 @@
</div>
<span class="-enter-x xl:hidden">
<AppLogo :alwaysShowTitle="true" />
<!-- <AppLogo :alwaysShowTitle="false" /> -->
</span>
<div class="container relative h-full py-2 mx-auto sm:px-10">
@ -24,11 +24,14 @@
class="w-1/2 -mt-16 -enter-x"
/>
<div class="mt-10 font-medium text-white -enter-x">
<span class="inline-block mt-4 text-4xl"> 隆昌农业大数据监控平台</span>
</div>
<!-- <div class="mt-10 font-medium text-white -enter-x">
<span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
</div>
<div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
{{ t('sys.login.signInDesc') }}
</div>
</div> -->
</div>
</div>
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">

View File

@ -25,10 +25,10 @@
/>
</FormItem>
<ARow class="enter-x">
<!-- <ARow class="enter-x">
<ACol :span="12">
<FormItem>
<!-- No logic, you need to deal with it yourself -->
<Checkbox v-model:checked="rememberMe" size="small">
{{ t('sys.login.rememberMe') }}
</Checkbox>
@ -36,13 +36,13 @@
</ACol>
<ACol :span="12">
<FormItem :style="{ 'text-align': 'right' }">
<!-- No logic, you need to deal with it yourself -->
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
{{ t('sys.login.forgetPassword') }}
</Button>
</FormItem>
</ACol>
</ARow>
</ARow> -->
<FormItem class="enter-x">
<Button type="primary" size="large" block @click="handleLogin" :loading="loading">
@ -55,7 +55,7 @@
{{ t('sys.login.registerButton') }}
</Button> -->
</FormItem>
<ARow class="enter-x">
<!-- <ARow class="enter-x">
<ACol :md="8" :xs="24">
<Button block @click="setLoginState(LoginStateEnum.MOBILE)">
{{ t('sys.login.mobileSignInFormTitle') }}
@ -71,17 +71,17 @@
{{ t('sys.login.registerButton') }}
</Button>
</ACol>
</ARow>
</ARow> -->
<Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>
<!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider> -->
<div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
<!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
<GithubFilled />
<WechatFilled />
<AlipayCircleFilled />
<GoogleCircleFilled />
<TwitterCircleFilled />
</div>
</div> -->
</Form>
</template>
<script lang="ts" setup>
@ -122,8 +122,8 @@
const rememberMe = ref(false)
const formData = reactive({
account: 'admin',
password: 'admin',
account: '',
password: '',
})
const { validForm } = useFormValid(formRef)