修改登录界面
parent
e61eb546e7
commit
a87d4290bf
2
.env
2
.env
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue