修改登录背景

chenyao

2025-03-31 9ea41b373d4de218a8f5b3201b62d27101213d9a

修改登录背景

 src/assets/images/login/bg.png

 src/page/login/index.vue

@@ -1,12 +1,10 @@
<template>
  <div class="login-container" @keyup.enter="handleLogin">
  <div class="login-index" @keyup.enter="handleLogin">
    <div class="login-header">
      <div class="title">中图智飞低空智能感知网平台</div>
    </div>
    <div class="login-left-title-new">中国图强 智领飞跃</div>
    <div class="login-left-new">
      <img src="@/assets/images/login/left-logo.png" alt="" />
    </div>
    <div class="login-left-title">中国图强 智领飞跃</div>
    <div class="login-left"></div>
    <userLogin v-if="activeName === 'user'"></userLogin>
  </div>
</template>
@@ -131,3 +129,129 @@
  },
};
</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%;
  }

  .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;
    }
  }
}
</style>

 src/styles/login.scss

@@ -51,11 +51,11 @@
  top: 334px;
  border: 1px solid red;
  left: 147px;
  img {
    width: 858px;
    height: 540px;
    border: 1px solid yellow;
  }
  // img {
  //   width: 858px;
  //   height: 540px;
  //   border: 1px solid yellow;
  // }
  // width: 858px;
  // background: url('../assets/images/login/left-logo.png') no-repeat center / 100% 100%;
}