daikins/.svn/pristine/3b/3ba55e6b844669eae46e3c77dacc0fdcb8162fa4.svn-base

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

const message = useMessage()
const { push } = useRouter()
const store = useUserStore()

const themeOverrides:GlobalThemeOverrides = {
  common: {
    primaryColor: '#FF0000'
  },
  Select: {
    peers: {
      InternalSelection: {
          textColor: '#333',
          border:'0',
          placeholderColor:'#97A4D2',
          borderActive:''
        },
        InternalSelectMenu: {
          borderRadius: '6px',
        }
    }
  }
}
onMounted(()=>{
 const account =  localStorage.getItem("account")
 const password = localStorage.getItem("password")
 if(password){
  reds.value = true
  formState.account = account
  formState.password = password
 }
})
const formState = reactive<LoginReq>({
  account: '',
  password: '',
  authType:'1'
})


async function handleLogin() {
  const { account, password } = formState

  if (!account) return message.error('请输入您的账号')
  if (!password) return message.error('请输入您的密码')
  const { msg } = await login(formState)

  token.value = msg
  store.getUser()
  if(msg){
    push({ name: 'Home' })
    if(reds.value){
      localStorage.setItem('account', account);
      localStorage.setItem('password', password);
    }
    message.success('登录成功')
  }

}
const keyDown=(e)=>{
  if(e.key ==='Enter')
  {
    handleLogin()
  }
}
const reds = ref(false)
const pwd=(e)=>{
  reds.value = e
}
</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="reds"/>
        </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">
            登录
          </div>
        </section>
  </div>
</template>

<style scoped lang="less">
// :deep(.n-checkbox) {
//   --n-border-focus: 1px solid #fff !important;
//   --n-box-shadow-focus: none !important;
//   --n-border-checked: #fff !important;
//   --n-color-checked: #fff !important;
//   --n-check-mark-color: #3555f9 !important;
//   --n-text-color: #fff !important;
// }

.wrapper {
  background: url('./images/login.png') no-repeat;
  background-size: cover;
  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>