ocr-web/src/views/login/index.vue

<script lang="ts" setup>
import Login from "./components/Login.vue";
import Forget from "./components/Forget.vue";
import { onMounted, nextTick, ref, onDeactivated } from "vue";
onMounted(() => {
  nextTick(() => {
    initRem();
  });
  window.addEventListener("resize", () => {
    initRem();
  });
});
onDeactivated(()=>{
  window.removeEventListener('resize',()=>{
    
  })
})
const show = ref(false);
const ifLogin = ref(true);
const initRem = () => {
  const designWidth = 1440;
  const rempPx = 16;
  const scale = window.innerWidth / designWidth;
  document.documentElement.style.fontSize = scale * rempPx + "px";
};

function showLogin() {
  show.value = true;
}

function close() {
  show.value = false;
  ifLogin.value = true;
}
</script>

<template>
  <div class="wrap-login">
    <div class="content">
      <div class="header f-c-b">
        <img class="img-logo" src="@/assets/images/login/logo.png" alt="" />
        <div class="btn-login f-c-c" @click="showLogin">登录</div>
      </div>
      <div class="img-wrap f-s">
        <img class="img-ai" src="../../assets/images/login/ai.png" alt="" />
        <div class="right">
          <div class="f-c">
            <img class="img-item" src="../../assets/images/login/img-item-1.png" alt="" />
            <img class="img-item" src="../../assets/images/login/img-item-2.png" alt="" />
            <img class="img-item" src="../../assets/images/login/img-item-3.png" alt="" />
            <img class="img-item" src="../../assets/images/login/img-item-4.png" alt="" />
            <img class="img-item" src="../../assets/images/login/img-item-5.png" alt="" />
          </div>
          <div class="img-task">Task approval</div>
        </div>
      </div>

      <div class="center-text f-c-b">
        <img class="img-ip" src="../../assets/images/login/img-ip.png" alt="" />
        <img class="img-text" src="../../assets/images/login/img-text.png" alt="" />
        <img class="img-icon-1" src="../../assets/images/login/img-icon-1.png" alt="" />
      </div>
      <div class="text">企业级 SaaS 智能审批解决方案</div>
      <img class="img-icon-2" src="../../assets/images/login/img-icon-2.png" alt="" />
      <div class="btn-login-2 f-c-c" @click="showLogin">立即登录 -></div>
      <div class="item-wrap f-c">
        <div class="item">
          <img class="item-img" src="../../assets/images/login/item-1.png" alt="" />
          <div class="title">AI一键查重</div>
          <div class="subtitle">一键查重，生成任务包</div>
        </div>
        <div class="item">
          <img class="item-img" src="../../assets/images/login/item-2.png" alt="" />
          <div class="title">AI工单管理</div>
          <div class="subtitle">智能批量辨识真假，假图快速审批</div>
        </div>
        <div class="item">
          <img class="item-img" src="../../assets/images/login/item-3.png" alt="" />
          <div class="title">AI快速审批</div>
          <div class="subtitle">智能图片比对，批量审批，一键确认</div>
        </div>
        <div class="item">
          <img class="item-img" src="../../assets/images/login/item-4.png" alt="" />
          <div class="title">OCR</div>
          <div class="subtitle">图片自动识别、文档图片版面解析</div>
        </div>
        <div class="item">
          <img class="item-img" src="../../assets/images/login/item-5.png" alt="" />
          <div class="title">更多功能</div>
          <div class="subtitle">探索更多功能</div>
        </div>
      </div>
      <img class="item-footer" src="../../assets/images/login/footer.png" alt="" />
    </div>
    <n-modal v-model:show="show" :mask-closable="false">
      <Login v-if="ifLogin" @close="close" @forget="ifLogin = !ifLogin" />
      <Forget v-else @close="close" @forget="ifLogin = !ifLogin" />
    </n-modal>
  </div>
</template>

<style lang="less" scoped>
.wrap-login {
  background-image: url("../../assets/images/login/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 56.25rem;

  .f-c-c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .f-c-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .f-c {
    display: flex;
    align-items: center;
  }

  .f-s {
    display: flex;
    align-items: flex-start;
  }

  .img-logo {
    width: 7.5625rem;
    height: 2.1875rem;
  }

  .img-ai {
    width: 6.0625rem;
    height: 5.625rem;
  }

  .img-item {
    width: 3.3125rem;
    height: 3.25rem;
    margin-left: -0.625rem;
  }

  .img-task {
    width: 8.625rem;
    height: 3.375rem;
    border-radius: 0.375rem;
    background-image: url("../../assets/images/login/img-task.png");
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 0.875rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #666666;
    margin-left: -0.625rem;
    margin-top: -1rem;
    padding-top: 0.625rem;
    box-sizing: border-box;
    text-align: center;
  }

  .img-ip {
    width: 5rem;
    height: 5rem;
  }

  .img-text {
    width: 37.5rem;
    height: 4.0625rem;
    margin-top: 2.6875rem;
  }

  .img-icon-1 {
    width: 3.375rem;
    height: 3.375rem;
  }

  .img-icon-2 {
    width: 3.375rem;
    height: 3.375rem;
    margin-left: 51.875rem;
  }

  .content {
    width: 81.25rem;
    margin: 0 auto;
    padding-top: 1.6875rem;
  }

  .header {
    margin-bottom: 2.75rem;

    .btn-login {
      width: 4.75rem;
      height: 2.5rem;
      border: 1px solid #666666;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      color: #333333;
      cursor: pointer;
    }
  }

  .img-wrap {
    padding-left: 10.875rem;
  }

  .center-text {
    margin: 0 auto;
    width: 48.5rem;
  }

  .text {
    font-size: 1.25rem;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: center;
    color: #666666;
    line-height: 1.75rem;
    margin-top: 2rem;
  }

  .btn-login-2 {
    width: 8.625rem;
    height: 2.75rem;
    background: linear-gradient(136deg, #3258e8, #786efc 100%);
    border-radius: 0.5rem;
    box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
    font-size: 1rem;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #ffffff;
    line-height: 1.375rem;
    margin: 0 auto;
    cursor: pointer;
  }

  .item-wrap {
    width: 76.375rem;
    margin: 4.875rem auto 0;
    .item {
      // width: 16.125rem;
      // height: 8.25rem;
      width: 14.875rem;
      height: 7rem;
      background-image: url("../../assets/images/login/item-bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      padding-top: 3.125rem;
      padding-left: 1.75rem;
      box-sizing: border-box;
    }

    .item-img {
      width: 4.125rem;
      height: 4.75rem;
      position: absolute;
      top: -0.9375rem;
      left: 1.25rem;
    }

    .title {
      font-size: 1rem;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      color: #333333;
      line-height: 1.375rem;
      margin-bottom: 0.5rem;
    }

    .subtitle {
      font-size: 0.75rem;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      color: #666666;
      line-height: 1.0625rem;
    }
  }
  .item-footer {
    width: 60.625rem;
    height: 7.4375rem;
    position: absolute;
    // position: fixed;
    left: 44.5rem;
    bottom: 0;
    margin-left: -30.3125rem;
  }
}
::v-deep(.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.n-form-item-feedback--error){
  color: #FF4E4F !important;
  font-size: .75rem !important;
}

</style>