fix: 登录页去除头尾栏,暗色背景修改
This commit is contained in:
@@ -38,7 +38,7 @@ onBeforeMount(() => {
|
|||||||
// 输出应用版本号
|
// 输出应用版本号
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
console.info(
|
console.info(
|
||||||
`%c ${t('common.title')} %c ${appStore.appCode} - ${appStore.appVersion} `,
|
`%c ${t('common.desc')} %c ${appStore.appCode} - ${appStore.appVersion} `,
|
||||||
'color: #fadfa3; background: #030307; padding: 4px 0;',
|
'color: #fadfa3; background: #030307; padding: 4px 0;',
|
||||||
'color: #030307; background: #fadfa3; padding: 4px 0;'
|
'color: #030307; background: #fadfa3; padding: 4px 0;'
|
||||||
);
|
);
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 114 B After Width: | Height: | Size: 226 KiB |
@@ -6,7 +6,7 @@ export default {
|
|||||||
|
|
||||||
// 通用
|
// 通用
|
||||||
common: {
|
common: {
|
||||||
title: 'Core Network Management Platform',
|
title: 'Login Platform',
|
||||||
desc: 'Core Network Management Platform',
|
desc: 'Core Network Management Platform',
|
||||||
loading: 'Please wait...',
|
loading: 'Please wait...',
|
||||||
inputPlease: 'Please input',
|
inputPlease: 'Please input',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ export default {
|
|||||||
|
|
||||||
// 通用
|
// 通用
|
||||||
common: {
|
common: {
|
||||||
title: '核心网管理平台',
|
title: '登录平台',
|
||||||
desc: '核心网管理平台',
|
desc: '核心网管理平台',
|
||||||
loading: '请稍等...',
|
loading: '请稍等...',
|
||||||
inputPlease: '请输入',
|
inputPlease: '请输入',
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import useLayoutStore from '@/store/modules/layout';
|
|||||||
import { viewTransitionTheme } from 'antdv-pro-layout';
|
import { viewTransitionTheme } from 'antdv-pro-layout';
|
||||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||||
import { parseUrlPath } from '@/plugins/file-static-url';
|
import { parseUrlPath } from '@/plugins/file-static-url';
|
||||||
const { t, changeLocale, optionsLocale, currentLocale } = useI18n();
|
const { t, changeLocale, optionsLocale } = useI18n();
|
||||||
const layoutStore = useLayoutStore();
|
const layoutStore = useLayoutStore();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -89,28 +89,12 @@ function fnGetCaptcha() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// LOGO地址
|
|
||||||
const logoUrl = computed(() => {
|
|
||||||
let url =
|
|
||||||
appStore.logoType === 'brand'
|
|
||||||
? parseUrlPath(appStore.filePathBrand)
|
|
||||||
: parseUrlPath(appStore.filePathIcon);
|
|
||||||
|
|
||||||
if (url.indexOf('{language}') === -1) {
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
// 语言参数替换
|
|
||||||
const local = currentLocale.value;
|
|
||||||
const lang = local.split('_')[0];
|
|
||||||
return url.replace('{language}', lang);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 判断是否有背景地址
|
// 判断是否有背景地址
|
||||||
const calcBG = computed(() => {
|
const calcBG = computed(() => {
|
||||||
const bgURL = parseUrlPath(appStore.loginBackground);
|
const bgURL = parseUrlPath(appStore.loginBackground);
|
||||||
if (bgURL && bgURL !== '#') {
|
if (bgURL && bgURL !== '#') {
|
||||||
return {
|
return {
|
||||||
backgroundImage: `url(${bgURL})`,
|
backgroundImage: `url('${bgURL}')`,
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
};
|
};
|
||||||
@@ -157,21 +141,9 @@ function fnChangeLocale(e: any) {
|
|||||||
<div class="animation animation5"></div>
|
<div class="animation animation5"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<header class="header">
|
|
||||||
<div class="header-left">
|
|
||||||
<template v-if="appStore.logoType === 'icon'">
|
|
||||||
<img :src="logoUrl" class="logo-icon" :alt="appStore.appName" />
|
|
||||||
<span class="title">{{ appStore.appName }}</span>
|
|
||||||
</template>
|
|
||||||
<template v-if="appStore.logoType === 'brand'">
|
|
||||||
<img :src="logoUrl" class="logo-brand" :alt="appStore.appName" />
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<a-card :bordered="false" class="login-card">
|
<a-card :bordered="false" class="login-card">
|
||||||
<div class="desc">
|
<div class="title">
|
||||||
{{ t('common.desc') }}
|
{{ t('common.title') }}
|
||||||
</div>
|
</div>
|
||||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
@@ -317,10 +289,6 @@ function fnChangeLocale(e: any) {
|
|||||||
</a-row>
|
</a-row>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="footer-copyright">{{ appStore.copyright }}</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -386,52 +354,6 @@ function fnChangeLocale(e: any) {
|
|||||||
background-color: #141414;
|
background-color: #141414;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
background-color: rgb(255 255 255 / 85%);
|
|
||||||
padding: 0 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.logo-icon {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
margin-right: 14px;
|
|
||||||
vertical-align: top;
|
|
||||||
border-style: none;
|
|
||||||
border-radius: 6.66px;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.logo-brand {
|
|
||||||
height: 48px;
|
|
||||||
width: 174px;
|
|
||||||
vertical-align: top;
|
|
||||||
border-style: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
position: relative;
|
|
||||||
top: 12px;
|
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 24px;
|
|
||||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .header {
|
|
||||||
background-color: rgb(0 0 0 / 85%);
|
|
||||||
.title {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
width: 368px;
|
width: 368px;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
@@ -439,10 +361,10 @@ function fnChangeLocale(e: any) {
|
|||||||
margin-left: 60%;
|
margin-left: 60%;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
||||||
& .desc {
|
& .title {
|
||||||
text-align: center;
|
text-align: left;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
color: #666;
|
color: #141414;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
@@ -450,8 +372,10 @@ function fnChangeLocale(e: any) {
|
|||||||
color: #8c8c8c;
|
color: #8c8c8c;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-theme='dark'] & .desc {
|
[data-theme='dark'] .login-card {
|
||||||
|
& .title {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -461,28 +385,4 @@ function fnChangeLocale(e: any) {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0px 16px;
|
|
||||||
text-align: left;
|
|
||||||
background-color: rgba(255, 255, 255, 0.85);
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
|
|
||||||
&-copyright {
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(0, 0, 0, 0.75);
|
|
||||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .footer {
|
|
||||||
background-color: rgb(0 0 0 / 85%);
|
|
||||||
&-copyright {
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user