forked from drone/command-center-dashboard

罗广辉
2025-04-21 22a23b05b25e4b5c616f65989ac0ca16324f4c29
src/page/login/index.vue
@@ -1,13 +1,13 @@
<template>
  <div class="login-container" @keyup.enter="handleLogin">
    <div class="login-header">
      <div class="title">中图智飞低空智能感知网平台</div>
  <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-left-title">中国图强 智领飞跃</div> -->
      <!-- <div class="login-left"></div> -->
      <userLogin v-if="activeName === 'user'"></userLogin>
    </div>
    <div class="login-left-title-new">中国图强 智领飞跃</div>
    <div class="login-left-new">
      <img src="@/assets/images/login/left-logo.png" alt="" />
    </div>
    <userLogin v-if="activeName === 'user'"></userLogin>
  </div>
</template>
<script>
@@ -32,8 +32,9 @@
  },
  data() {
    return {
      narrowScreen: false,
      login:{
        info: '中图智绘低空无人机监测网平台'
        info: '中图智飞低空智能感知网平台'
      },
      website: website,
      time: '',
@@ -55,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');
@@ -131,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>