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

<script lang="ts" setup>
import { ref } from 'vue'
import Login from './components/Login.vue'
import Forget from './components/Forget.vue'

const show = ref(false)
const ifLogin = ref(true)

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: 100vh;

  .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: 121px;
    height: 35px;
  }

  .img-ai{
    width: 97px;
    height: 90px;
  }

  .img-item{
    width: 53px;
    height: 52px;
    margin-left: -10px;
  }

  .img-task{
    width: 138px;
    height: 54px;
    border-radius: 6px;
    background-image: url('../../assets/images/login/img-task.png');
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 14px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #666666;
    margin-left: -10px;
    margin-top: -10px;
    padding-top: 10px;
    box-sizing: border-box;
    text-align: center;
  }

  .img-ip{
    width: 80px;
    height: 80px;
  }

  .img-text{
    width: 600px;
    height: 65px;
    margin-top: 43px;
  }

  .img-icon-1{
    width: 54px;
    height: 54px;
  }

  .img-icon-2{
    width: 54px;
    height: 54px;
    margin-left: 830px;
  }

  .content{
    width: 1300px;
    margin: 0 auto;
    padding-top: 27px;
  }

  .header{
    margin-bottom: 44px;

    .btn-login{
      width: 76px;
      height: 40px;
      border: 1px solid #666666;
      border-radius: 8px;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      color: #333333;
      cursor: pointer;
    }
  }

  .img-wrap{
    padding-left: 174px;
  }

  .center-text{
    margin: 0 auto;
    width: 776px;
  }

  .text{
    font-size: 20px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: center;
    color: #666666;
    line-height: 28px;
    margin-top: 32px;
  }

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

  .item-wrap{
    margin-top: 78px;
    .item{
      width: 258px;
      height: 132px;
      background-image: url('../../assets/images/login/item-bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      padding-top: 50px;
      padding-left: 28px;
      box-sizing: border-box;
    }

    .item-img{
      width: 66px;
      height: 76px;
      position: absolute;
      top: -15px;
      left: 20px;
    }

    .title{
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      color: #333333;
      line-height: 22px;
      margin-bottom: 8px;
    }

    .subtitle{
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      color: #666666;
      line-height: 17px;
    }
  }

  .item-footer{
    width: 970px;
    height: 119px;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -485px;
  }
}
</style>