pref:优化登录页背景重复

fengtao
1 parent 3fdd7293
Showing 1 changed file with 195 additions and 175 deletions
src/views/sys/login/Login.vue
--- a/src/views/sys/login/Login.vue
View file @058edc9
+++ b/src/views/sys/login/Login.vue
View file @058edc9
 <template>
-  <div :style="{ backgroundImage: 'url(' + (logoUrl !== undefined ? logoUrl : '') + ')',backgroundSize:'100% 100%;' }"
-    :class="prefixCls" class="relative w-full h-full px-4">
-    <AppLocalePicker class="absolute text-white top-4 right-4 enter-x xl:text-gray-600" :showText="false"
-      v-if="!sessionTimeout && showLocale" />
+  <div
+    style="background-size: 100% 100%"
+    :style="{ backgroundImage: 'url(' + (logoUrl !== undefined ? logoUrl : '') + ')' }"
+    :class="prefixCls"
+    class="relative w-full h-full px-4"
+  >
+    <AppLocalePicker
+      class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
+      :showText="false"
+      v-if="!sessionTimeout && showLocale"
+    />
     <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />
     <span class="-enter-x xl:hidden">
@@ -14,20 +21,31 @@
         <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
           <!-- <AppLogo class="-enter-x" /> -->
           <div style="display: flex; margin-top: 10px">
-            <img v-if="defaultLogo || getLogo" :src="defaultLogo || getLogo" style="width: 48px; height: 48px" />
+            <img
+              v-if="defaultLogo || getLogo"
+              :src="defaultLogo || getLogo"
+              style="width: 48px; height: 48px"
+            />
             <img style="width: 48px; height: 48px" v-else src="/src/assets/images/logo.png" />
-            <div class="ml-2 truncate md:opacity-100" style="
+            <div
+              class="ml-2 truncate md:opacity-100"
+              style="
                 line-height: 45px;
                 margin-left: 5px;
                 font-size: 24px;
                 color: #fff;
                 font-weight: 700;
-              ">
+              "
+            >
               {{ defaultTitle || getTitle }}
             </div>
           </div>
           <div v-if="ifCustom" class="my-auto">
-            <img :alt="title" src="../../../assets/svg/thingskit-login-background.svg" class="w-1/2 -mt-16 -enter-x" />
+            <img
+              :alt="title"
+              src="../../../assets/svg/thingskit-login-background.svg"
+              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-3xl"> {{ t('sys.login.signInTitle') }}</span>
             </div>
@@ -37,8 +55,10 @@
           </div>
         </div>
         <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
-          <div :class="`${prefixCls}-form`"
-            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x">
+          <div
+            :class="`${prefixCls}-form`"
+            class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
+          >
             <LoginForm />
             <ForgetPasswordForm />
             <RegisterForm />
@@ -50,213 +70,213 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref, onMounted } from 'vue';
-// import { AppLogo } from '/@/components/Application';
-import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
-import LoginForm from './LoginForm.vue';
-import ForgetPasswordForm from './ForgetPasswordForm.vue';
-import RegisterForm from './RegisterForm.vue';
-import MobileForm from './MobileForm.vue';
-import { useGlobSetting } from '/@/hooks/setting';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { useDesign } from '/@/hooks/web/useDesign';
-import { useLocaleStore } from '/@/store/modules/locale';
-import { useUserStore } from '/@/store/modules/user';
-import { getPlatForm } from '/@/api/oem/index';
-
-defineProps({
-  sessionTimeout: {
-    type: Boolean,
-  },
-});
-const defaultTitle = ref('');
-const defaultLogo = ref('');
-const logoUrl = ref('');
-onMounted(async () => {
-  const res = await getPlatForm();
-  logoUrl.value = res?.background;
-  defaultTitle.value = res?.name;
-  defaultLogo.value = res?.logo;
-  if (logoUrl.value !== undefined) {
-    ifCustom.value = false;
-  } else {
-    const defaultLogo = 'src/assets/svg/login-bg.svg';
-    logoUrl.value = 'url(' + defaultLogo + ')';
-  }
-});
-
-const userStore = useUserStore();
-
-const ifCustom = ref(true);
-const getLogo = computed(() => {
-  return userStore.platInfo?.logo;
-});
-const { title } = useGlobSetting();
-const getTitle = computed(() => {
-  // 设置icon
-  let link = (document.querySelector("link[rel*='icon']") ||
-    document.createElement('link')) as HTMLLinkElement;
-  link.type = 'image/x-icon';
-  link.rel = 'shortcut icon';
-  link.href = userStore.platInfo?.icon ?? '/favicon.ico';
-  document.getElementsByTagName('head')[0].appendChild(link);
-  logoUrl.value = userStore.platInfo?.background;
-  if (logoUrl.value !== undefined) {
-    ifCustom.value = false;
-  } else {
-    const defaultLogo = 'src/assets/svg/login-bg.svg';
-    logoUrl.value = 'url(' + defaultLogo + ')';
-  }
-  return userStore.platInfo?.name ?? title;
-});
-// const globSetting = useGlobSetting();
-const { prefixCls } = useDesign('login');
-const { t } = useI18n();
-const localeStore = useLocaleStore();
-const showLocale = localeStore.getShowPicker;
+  import { computed, ref, onMounted } from 'vue';
+  // import { AppLogo } from '/@/components/Application';
+  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
+  import LoginForm from './LoginForm.vue';
+  import ForgetPasswordForm from './ForgetPasswordForm.vue';
+  import RegisterForm from './RegisterForm.vue';
+  import MobileForm from './MobileForm.vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  import { useUserStore } from '/@/store/modules/user';
+  import { getPlatForm } from '/@/api/oem/index';
+
+  defineProps({
+    sessionTimeout: {
+      type: Boolean,
+    },
+  });
+  const defaultTitle = ref('');
+  const defaultLogo = ref('');
+  const logoUrl = ref('');
+  onMounted(async () => {
+    const res = await getPlatForm();
+    logoUrl.value = res?.background;
+    defaultTitle.value = res?.name;
+    defaultLogo.value = res?.logo;
+    if (logoUrl.value !== undefined) {
+      ifCustom.value = false;
+    } else {
+      const defaultLogo = 'src/assets/svg/login-bg.svg';
+      logoUrl.value = 'url(' + defaultLogo + ')';
+    }
+  });
+
+  const userStore = useUserStore();
+
+  const ifCustom = ref(true);
+  const getLogo = computed(() => {
+    return userStore.platInfo?.logo;
+  });
+  const { title } = useGlobSetting();
+  const getTitle = computed(() => {
+    // 设置icon
+    let link = (document.querySelector("link[rel*='icon']") ||
+      document.createElement('link')) as HTMLLinkElement;
+    link.type = 'image/x-icon';
+    link.rel = 'shortcut icon';
+    link.href = userStore.platInfo?.icon ?? '/favicon.ico';
+    document.getElementsByTagName('head')[0].appendChild(link);
+    logoUrl.value = userStore.platInfo?.background;
+    if (logoUrl.value !== undefined) {
+      ifCustom.value = false;
+    } else {
+      const defaultLogo = 'src/assets/svg/login-bg.svg';
+      logoUrl.value = 'url(' + defaultLogo + ')';
+    }
+    return userStore.platInfo?.name ?? title;
+  });
+  // const globSetting = useGlobSetting();
+  const { prefixCls } = useDesign('login');
+  const { t } = useI18n();
+  const localeStore = useLocaleStore();
+  const showLocale = localeStore.getShowPicker;
   // const title = computed(() => globSetting?.title ?? '');
 </script>
 <style lang="less">
-@prefix-cls: ~'@{namespace}-login';
-@logo-prefix-cls: ~'@{namespace}-app-logo';
-@countdown-prefix-cls: ~'@{namespace}-countdown-input';
-@dark-bg: #293146;
+  @prefix-cls: ~'@{namespace}-login';
+  @logo-prefix-cls: ~'@{namespace}-app-logo';
+  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
+  @dark-bg: #293146;
-html[data-theme='dark'] {
-  .@{prefix-cls} {
-    background-color: @dark-bg;
+  html[data-theme='dark'] {
+    .@{prefix-cls} {
+      background-color: @dark-bg;
-    &::before {
-      background-image: url(/@/assets/svg/login-bg-dark.svg);
-    }
+      &::before {
+        background-image: url(/@/assets/svg/login-bg-dark.svg);
+      }
-    .ant-input,
-    .ant-input-password {
-      background-color: #232a3b;
-    }
+      .ant-input,
+      .ant-input-password {
+        background-color: #232a3b;
+      }
-    .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
-      border: 1px solid #4a5569;
-    }
+      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
+        border: 1px solid #4a5569;
+      }
-    &-form {
-      background: transparent !important;
-    }
+      &-form {
+        background: transparent !important;
+      }
-    .app-iconify {
-      color: #fff;
+      .app-iconify {
+        color: #fff;
+      }
     }
-  }
-  input.fix-auto-fill,
-  .fix-auto-fill input {
-    -webkit-text-fill-color: #c9d1d9 !important;
-    box-shadow: inherit !important;
-  }
-}
-
-.@{prefix-cls} {
-  min-height: 100%;
-  overflow: hidden;
-
-  @media (max-width: @screen-xl) {
-    background-color: #293146;
-
-    .@{prefix-cls}-form {
-      background-color: #fff;
+    input.fix-auto-fill,
+    .fix-auto-fill input {
+      -webkit-text-fill-color: #c9d1d9 !important;
+      box-shadow: inherit !important;
     }
   }
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin-left: -48%;
-    background-image: v-bind(logoUrl);
-    // background-image: url(/@/assets/svg/login-bg.svg);
-    background-position: 100%;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    content: '';
+  .@{prefix-cls} {
+    min-height: 100%;
+    overflow: hidden;
     @media (max-width: @screen-xl) {
-      display: none;
-    }
-  }
-
-  .@{logo-prefix-cls} {
-    position: absolute;
-    top: 12px;
-    height: 30px;
+      background-color: #293146;
-    &__title {
-      font-size: 16px;
-      color: #fff;
+      .@{prefix-cls}-form {
+        background-color: #fff;
+      }
     }
-    img {
-      width: 32px;
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin-left: -48%;
+      background-image: v-bind(logoUrl);
+      // background-image: url(/@/assets/svg/login-bg.svg);
+      background-position: 100%;
+      background-repeat: no-repeat;
+      background-size: auto 100%;
+      content: '';
+
+      @media (max-width: @screen-xl) {
+        display: none;
+      }
     }
-  }
-  .container {
     .@{logo-prefix-cls} {
-      display: flex;
-      width: 60%;
-      height: 80px;
+      position: absolute;
+      top: 12px;
+      height: 30px;
       &__title {
-        font-size: 24px;
+        font-size: 16px;
         color: #fff;
       }
       img {
-        width: 48px;
+        width: 32px;
       }
     }
-  }
-  &-sign-in-way {
-    .anticon {
-      font-size: 22px;
-      color: #888;
-      cursor: pointer;
+    .container {
+      .@{logo-prefix-cls} {
+        display: flex;
+        width: 60%;
+        height: 80px;
+
+        &__title {
+          font-size: 24px;
+          color: #fff;
+        }
-      &:hover {
-        color: @primary-color;
+        img {
+          width: 48px;
+        }
       }
     }
-  }
-  input:not([type='checkbox']) {
-    min-width: 360px;
+    &-sign-in-way {
+      .anticon {
+        font-size: 22px;
+        color: #888;
+        cursor: pointer;
-    @media (max-width: @screen-xl) {
-      min-width: 320px;
+        &:hover {
+          color: @primary-color;
+        }
+      }
     }
-    @media (max-width: @screen-lg) {
-      min-width: 260px;
-    }
+    input:not([type='checkbox']) {
+      min-width: 360px;
-    @media (max-width: @screen-md) {
-      min-width: 240px;
-    }
+      @media (max-width: @screen-xl) {
+        min-width: 320px;
+      }
+
+      @media (max-width: @screen-lg) {
+        min-width: 260px;
+      }
+
+      @media (max-width: @screen-md) {
+        min-width: 240px;
+      }
-    @media (max-width: @screen-sm) {
-      min-width: 160px;
+      @media (max-width: @screen-sm) {
+        min-width: 160px;
+      }
     }
-  }
-  .@{countdown-prefix-cls} input {
-    min-width: unset;
-  }
+    .@{countdown-prefix-cls} input {
+      min-width: unset;
+    }
-  .ant-divider-inner-text {
-    font-size: 12px;
-    color: @text-color-secondary;
+    .ant-divider-inner-text {
+      font-size: 12px;
+      color: @text-color-secondary;
+    }
   }
-}
 </style>