fix: 登录页去除头尾栏，暗色背景修改

src/App.vue

@@ -38,7 +38,7 @@ onBeforeMount(() => {
   // 输出应用版本号
   const appStore = useAppStore();
   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: #030307; background: #fadfa3; padding: 4px 0;'
   );

src/i18n/locales/en-US.ts

@@ -6,7 +6,7 @@ export default {
 
   // 通用
   common: {
-    title: 'Core Network Management Platform',
+    title: 'Login Platform',
     desc: 'Core Network Management Platform',
     loading: 'Please wait...',
     inputPlease: 'Please input',

src/i18n/locales/zh-CN.ts

@@ -6,7 +6,7 @@ export default {
 
   // 通用
   common: {
-    title: '核心网管理平台',
+    title: '登录平台',
     desc: '核心网管理平台',
     loading: '请稍等...',
     inputPlease: '请输入',

src/views/login.vue

@@ -12,7 +12,7 @@ import useLayoutStore from '@/store/modules/layout';
 import { viewTransitionTheme } from 'antdv-pro-layout';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseUrlPath } from '@/plugins/file-static-url';
-const { t, changeLocale, optionsLocale, currentLocale } = useI18n();
+const { t, changeLocale, optionsLocale } = useI18n();
 const layoutStore = useLayoutStore();
 const appStore = useAppStore();
 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 bgURL = parseUrlPath(appStore.loginBackground);
   if (bgURL && bgURL !== '#') {
     return {
-      backgroundImage: `url(${bgURL})`,
+      backgroundImage: `url('${bgURL}')`,
       backgroundPosition: 'center',
       backgroundSize: 'cover',
     };
@@ -157,21 +141,9 @@ function fnChangeLocale(e: any) {
       <div class="animation animation5"></div>
     </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">
-      <div class="desc">
-        {{ t('common.desc') }}
+      <div class="title">
+        {{ t('common.title') }}
       </div>
       <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
         <a-form-item
@@ -317,10 +289,6 @@ function fnChangeLocale(e: any) {
         </a-row>
       </a-form>
     </a-card>
-
-    <footer class="footer">
-      <div class="footer-copyright">{{ appStore.copyright }}</div>
-    </footer>
   </div>
 </template>
 
@@ -386,52 +354,6 @@ function fnChangeLocale(e: any) {
   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 {
   width: 368px;
   min-width: 260px;
@@ -439,10 +361,10 @@ function fnChangeLocale(e: any) {
   margin-left: 60%;
   border-radius: 6px;
 
-  & .desc {
-    text-align: center;
+  & .title {
+    text-align: left;
     margin-bottom: 18px;
-    color: #666;
+    color: #141414;
     font-weight: 600;
     font-size: 18px;
   }
@@ -450,8 +372,10 @@ function fnChangeLocale(e: any) {
     color: #8c8c8c;
     font-size: 16px;
   }
+}
 
-  [data-theme='dark'] & .desc {
+[data-theme='dark'] .login-card {
+  & .title {
     color: #999;
   }
 }
@@ -461,28 +385,4 @@ function fnChangeLocale(e: any) {
     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>