Merge branch 'dev' into test

罗广辉

2025-04-21 22a23b05b25e4b5c616f65989ac0ca16324f4c29

 src/page/login/index.vue

@@ -1,42 +1,12 @@
<template>
  <div class="login-container" @keyup.enter="handleLogin">
    <div class="login-time">
      {{ time }}
    </div>
    <div class="login-weaper">
      <div class="login-left animate__animated animate__fadeInLeft">
        <img class="img" src="/img/logo.png" alt="" />
        <p class="title">{{ login.info }}</p>
  <div :class="{loginContainer:true, 'narrowScreen':narrowScreen}" @keyup.enter="handleLogin">
    <div class="login-container">
      <div class="login-header">
        <div class="title">中图智飞低空智能感知网平台</div>
      </div>
      <div class="login-border animate__animated animate__fadeInRight">
        <div class="login-main">
          <p class="login-title">
            {{ $t('login.title') }}{{ website.title }}
            <top-lang></top-lang>
          </p>
          <userLogin v-if="activeName === 'user'"></userLogin>
          <!-- <codeLogin v-else-if="activeName === 'code'"></codeLogin>
          <thirdLogin v-else-if="activeName === 'third'"></thirdLogin>
          <registerLogin v-else-if="activeName === 'register'"></registerLogin>
          <div class="login-menu">
            <el-link href="#" @click.stop="activeName = 'user'">{{
              $t('login.userLogin')
            }}</el-link>
            <el-link href="#" @click.stop="activeName = 'code'">{{
              $t('login.phoneLogin')
            }}</el-link>
            <el-link href="#" @click.stop="activeName = 'third'">{{
              $t('login.thirdLogin')
            }}</el-link>
            <el-link
              :href="
                website.oauth2.ssoBaseUrl + website.oauth2.ssoAuthUrl + website.oauth2.redirectUri
              "
              >{{ $t('login.ssoLogin') }}</el-link
            >
          </div> -->
        </div>
      </div>
      <!-- <div class="login-left-title">中国图强 智领飞跃</div> -->
      <!-- <div class="login-left"></div> -->
      <userLogin v-if="activeName === 'user'"></userLogin>
    </div>
  </div>
</template>
@@ -62,8 +32,9 @@
  },
  data() {
    return {
      narrowScreen: false,
      login:{
        info: '中图智绘低空无人机监测网平台'
        info: '中图智飞低空智能感知网平台'
      },
      website: website,
      time: '',
@@ -85,12 +56,19 @@
    this.handleLogin();
    this.getTime();
  },
  mounted() {},
  mounted() {
    this.narrowScreenFun()
    window.addEventListener('resize', this.narrowScreenFun);
  },
  computed: {
    ...mapGetters(['tagWel']),
  },
  props: [],
  methods: {
    narrowScreenFun() {
      // 监听窗口变化，计算是不是 窄屏幕
      this.narrowScreen = window.innerWidth / window.innerHeight < 16 / 9;
    },
    getTime() {
      setInterval(() => {
        this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss');
@@ -161,3 +139,42 @@
  },
};
</script>

<style lang="scss" scoped>
.loginContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none; /* Chrome、Safari 隐藏滚动条 */
  }

  &.narrowScreen{
    >div{
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  >div{
    left: 0;
    top: 0;
    position: absolute;
    height: 1080px;
    width: 1920px;
  }
  .login-container {
    background-image: url('@/assets/images/login/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
    pointer-events: none;

    > * {
      pointer-events: auto;
    }
  }
}
</style>