LanLingXiangMu/src/views/sys/login_lindidiaocha/Login.vue

<template>
  <div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
    <div
      class="title"
      :style="{
        top: `calc(${25}% - (${230 * bi}px))`,
        left: `${143 * bi}px`,
        height: `${99 * bi}px`,
      }"
    >
      <img
        src="/login_lindidiaocha/logo.png"
        :style="{
          width: `${99 * bi}px`,
          marginRight: `${28 * bi}px`,
        }"
      />
      <div
        class="title_span"
        :style="{
          top: `${22 * bi}px`,
        }"
      >
        <a-col>
          <a-row>
            <span
              class="title_CN"
              :style="{
                fontSize: `${50 * bi}px`,
                height: `${50 * bi}px`,
              }"
            >
              临沂市自然资源综合监管平台
            </span>
          </a-row>
          <a-row>
            <span
              class="title_EN"
              :style="{
                fontSize: `${22 * bi}px`,
                height: `${22 * bi}px`,
                top: `${10 * bi}px`,
                opacity: `${0.3 * bi}`,
              }"
            >
              Linyi City Natural Resources Comprehensive Supervision Platform
            </span>
          </a-row>
        </a-col>
      </div>
    </div>
    <div class="bg">
      <div
        class="bg_login"
        :style="{
          height: `${isRegister ? 600 * bi : 400 * bi}px`,
          width: `${294.1 * bi}px`,
        }"
      >
        <LoginForm :bi="bi" />
        <ForgetPasswordForm />
        <RegisterForm />
        <MobileForm />
        <QrCodeForm />
      </div>
    </div>
    <div
      class="bottom"
      :style="{
        width: `${628 * bi}px`,
        height: `${18 * bi}px`,
        fontSize: `${18 * bi}px`,
        borderRadius: `${5 * bi}px`,
        bottom: `${26 * bi}px`,
        left: `calc(${50}% - (${(628 / 2) * bi}px))`,
      }"
    >
      {{
        VITE_GLOB_APP_MANAGEMENT_UNIT
          ? VITE_GLOB_APP_MANAGEMENT_UNIT
          : t('sys.subject.bottom_copyright_lindidiaocha')
      }}
      &nbsp;&nbsp;&nbsp;&nbsp;
      {{
        VITE_GLOB_APP_TECHINICAL_SUPPORT
          ? VITE_GLOB_APP_TECHINICAL_SUPPORT
          : t('sys.subject.bottom_support')
      }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
  import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
  import { useGlobSetting } from '@/hooks/setting';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useLocaleStore } from '@/store/modules/locale';
  import ForgetPasswordForm from './ForgetPasswordForm.vue';
  import LoginForm from './LoginForm.vue';
  import MobileForm from './MobileForm.vue';
  import QrCodeForm from './QrCodeForm.vue';
  import RegisterForm from './RegisterForm.vue';
  import { LoginStateEnum, useLoginState } from './useLogin';
  const { getLoginState } = useLoginState();
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT } = getAppEnvConfig();

  const isRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });

  const globSetting = useGlobSetting();
  const { prefixCls } = useDesign('login');
  const { t } = useI18n();
  const localeStore = useLocaleStore();
  const showLocale = localeStore.getShowPicker;
  const title = computed(() => globSetting?.title ?? '');

  // 分辨率
  const viewportWidth = ref(window.innerWidth);
  const referenceWidth = 1920;
  const updateWindowSize = () => {
    viewportWidth.value = window.innerWidth;
  };
  const bi = computed(() => {
    return viewportWidth.value / referenceWidth;
  });

  onMounted(() => {
    window.addEventListener('resize', updateWindowSize);
    updateWindowSize(); // 初始化视口尺寸
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWindowSize);
  });
</script>
<style lang="less">
  .login {
    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .title {
    position: relative;
    display: inline-block;
    // left: 143px;
    // height: 99px;

    // img {
    //   width: 99px;
    //   margin-right: 28px;
    // }

    &_span {
      display: inline-block;
      position: relative;
      // top: 22px;
    }

    &_CN {
      width: 100%;
      // height: 50px;
      font-family: Alibaba PuHuiTi;
      font-weight: 900;
      // font-size: 50px;
      color: #131313;
      letter-spacing: 3px;
    }
    &_EN {
      position: relative;
      // top: 10px;
      width: 100%;
      // height: 22px;
      font-family: Alibaba PuHuiTi;
      font-weight: 300;
      // font-size: 22px;
      color: #131313;
      text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
      opacity: 0.3;
    }
  }

  .bg {
    position: relative;
    top: 50px;
    width: 100%;
    height: calc(100% - 280px);
    background-image: url('/login_lindidiaocha/bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    text-align: center;

    &_login {
      position: relative;
      left: calc(70%);
      // width: 294.1px;
      background-color: #ffffff;
      border-radius: 5px;
    }
  }

  .bottom {
    width: 628px;
    height: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 18px;
    border-radius: 5px;

    position: absolute;
    bottom: 26px;

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    left: calc(50% - 628px / 2);
  }
</style>