daikins/.svn/pristine/a5/a5f5004947dfbe5590d9b944401789768f6e31e8.svn-base

<script setup lang="ts">
import type { LoginReq } from '@/api/daikin/base'
import { NCheckbox, useMessage } from 'naive-ui'
import { login } from '@/api/daikin/base'
import { token, useUserStore } from '@/stores/modules/user'

const message = useMessage()
const { push } = useRouter()
const store = useUserStore()
onMounted(()=>{
 const account =  localStorage.getItem("accounts")
 const password = localStorage.getItem("passwords")
 if(password){
  redss.value = true
  formState.account = account
  formState.password = password
 }
})
const formState = reactive({
  account: '',
  password: '',
  authType:'2'
})
const redss = ref(false)
const pwd=(e)=>{
  redss.value = e
}
async function handleLogin() {
  const { account, password } = formState

  const { msg } = await login(formState)

  token.value = msg

  store.getUser()
  if(msg){
    push({ name: 'external' })
    if(redss.value){
      localStorage.setItem('accounts', account);
      localStorage.setItem('passwords', password);
    }
    message.success('登录成功')
  }
}
const keyDown=(e)=>{
  if(e.key ==='Enter')
  {
    handleLogin()
  }
}

</script>

<template>



  <div class="bg-#fff w700px h610px text-center mx-auto p50px my20%">
    <p x="0" y="52" style="font-size: 52px; font-weight: 800;margin-bottom: 50px;">大金空调(上海)有限公司</p>


    <section>
      登录名称 ：
          <div
            class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
         <input class="h-full w-full text-#142142 text-18px  pr54px placeholder-#97a4d2" type="text"
              placeholder="请输入您的账号" maxlength="50" v-model="formState.account"   @keydown.enter="keyDown"/>
          </div>
        </section>
        <section class="mt28px">
          密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
          <div
            class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
           <input class="h-full w-full text-#142142 text-18px  pr54px placeholder-#97a4d2" type="password"
              placeholder="请输入您的密码" maxlength="50" v-model="formState.password"   @keydown.enter="keyDown"/>
          </div>
        </section>
        <section class="mt16px w-full text-right text-#000">
          <n-checkbox size="large" label="记住密码" :on-update:checked="pwd" class="mr-50px" :checked="redss"/>
        </section>
<!-- 
        <section class="mt28px">
        所属地区：
          <div
            class="b-1px b-solid b-#000 bg-#fff rd-12px inline-flex items-center w416px h-60px px12px cursor-pointer overflow-hidden relative">
            <input class="h-full w-full text-#142142 text-18px   placeholder-#97a4d2" type="password"
              placeholder="请输入企业名称" maxlength="50" v-model="formState.area" /> 
           </div>
        </section> -->

    <section class="mt48px text-#fff text-28px">
          <div
            class="inline-flex items-center justify-center rd-10px w416px h62px bg-#345fdd/80 hover-bg-#345fdd/100 cursor-pointer"
            @click="handleLogin"  @keydown.enter="keyDown">
            登录
          </div>
        </section>
  </div>
</template>

<style scoped lang="less">

.wrapper {
  // background: url('./images/denglbj.png') no-repeat;
  background-size: cover;
  background-color: #E4E4E4;
  overflow: hidden;
  .box {
    width: 716px;
    height: 743px;
    margin: 0 auto;
    margin-top: 211px;

    // background-color: rgba(22, 208, 255, 0.15);
    // border: 1px dashed #3699ff;

    user-select: none;

    position: relative;
    .inner-box {
      position: absolute;
      width: 582px;
      height: 496px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 3px solid #0d4da5;
      border-radius: 18px;

      & > * {
        z-index: 9;
      }
      &::before {
        z-index: 1;
        content: ' ';
        width: 537px;
        height: 247px;
        background-image: url('./images/light.svg');
        position: absolute;
        top: -25%;
        left: -35%;

        @keyframes toRight {
          0% {
            left: -35%;
          }
          50% {
            left: 30%;
          }
          100% {
            left: -35%;
          }
        }
        animation: toRight 10s linear infinite;
      }
      &::after {
        z-index: 1;
        content: ' ';
        width: 537px;
        height: 247px;
        background-image: url('./images/light.svg');
        transform: rotate(180deg);
        position: absolute;
        bottom: -25%;
        right: -35%;

        @keyframes toLeft {
          0% {
            right: -35%;
          }
          50% {
            right: 30%;
          }
          100% {
            right: -35%;
          }
        }
        animation: toLeft 10s linear infinite;
      }
    }
  }

  .title {
    font-size: 52px;
    font-weight: bold;
  }
}
</style>