feat: 调整首页样式和新建任务日期，以及小文字调整

chenyao

2025-04-21 7b70bb16c3fd3d3b2c0fa4a464cee90054834cbf

 src/page/login/index.vue

@@ -1,11 +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">中国图强 智领飞跃</div> -->
    <div class="login-left"></div>
    <userLogin v-if="activeName === 'user'"></userLogin>
  </div>
</template>
<script>
@@ -30,6 +32,7 @@
  },
  data() {
    return {
      narrowScreen: false,
      login:{
        info: '中图智飞低空智能感知网平台'
      },
@@ -53,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,127 +141,40 @@
</script>

<style lang="scss" scoped>
// .login-index {
//   position: relative;
//   width: 100%;
//   height: 100%;
//   background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
//   .login-header {
//     background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%;
//     width: 100%;
//     height: 102px;
//     position: relative;
//     .title {
//       position: absolute;
//       left: 637px;
//       top: 22px;
//       width: 646px;
//       height: 58px;
//       font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
//       font-weight: 400;
//       font-size: 54px;
//       line-height: 58px;
//       // text-shadow: 0px 2px 6px #0C3D79;
//       text-align: center;
//       font-style: normal;
//       text-transform: none;
//       color: #fff;
//       // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%);
//     }
//   }
//   .login-left-title {
//     position: absolute;
//     left: 147px;
//     top: 263px;
//     width: 926px;
//     height: 42px;
//     font-family: Source Han Sans CN, Source Han Sans CN;
//     font-weight: bold;
//     font-size: 28px;
//     line-height: 33px;
//     letter-spacing: 30px;
//     // text-shadow: 0px 4px 6px rgba(0,0,0,0.72);
//     color: #fff;
//     text-align: center;
//     font-style: normal;
//     text-transform: none;
//     // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%);
//   }
//   .login-left {
//     position: absolute;
//     top: 334px;
//     left: 147px;
//     width: 858px;
//     height: 540px;
//     background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%;
//   }
.loginContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none; /* Chrome、Safari 隐藏滚动条 */
  }

//   .login-right {
//     position: absolute;
//     top: 305px;
//     right: 291px;
//     width: 488px;
//     height: 508px;
//     background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%;
//     .user-login {
//       position: absolute;
//       top: 72px;
//       left: 180px;
//       width: 118px;
//       height: 26px;
//       font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
//       font-weight: 400;
//       font-size: 32px;
//       // color: #D1E0F9;
//       color: #fff;
//       line-height: 26px;
//       text-align: center;
//     }
//     .username {
//       position: absolute;
//       top: 127px;
//       left: 46px;
//       width: 394px;
//       height: 72px;
//       background: url('../assets/images/login/username.png') no-repeat center / 100% 100%;
//       // :deep(.el-form-item) {
//       //   width: 120px;
//       // }
//     }
//     .password {
//       position: absolute;
//       top: 208px;
//       left: 46px;
//       width: 394px;
//       height: 72px;
//       background: url('../assets/images/login/password.png') no-repeat center / 100% 100%;
//     }
//     .forgot-password {
//       position: absolute;
//       width: 64px;
//       height: 24px;
//       top: 289px;
//       right: 58px;
//       font-family: Source Han Sans CN, Source Han Sans CN;
//       font-weight: 500;
//       font-size: 16px;
//       color: #D1E0F9;
//       line-height: 19px;
//     }
//     .login-click {
//       position: absolute;
//       bottom: 106px;
//       left: 44px;
//       width: 391px;
//       height: 61px;
//       background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%;
//       font-family: Source Han Sans CN, Source Han Sans CN;
//       font-weight: 500;
//       font-size: 24px;
//       line-height: 50px;
//       text-align: center;
//       color: #fff;
//     }
//   }
// }
  &.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>