busroute/src/pages/views/login/index.vue

<script lang='ts' setup>
import { nextTick, ref } from 'vue'
import NetService from '../../../services/net.service'
import useStore from '../../store'
const netService = new NetService()

const store = useStore()

const formRef = ref()
const model = ref({
  account: '',
  password: ''
})
const rules = {
  account: [ {
    required: true,
    trigger: [ 'blur', 'input' ],
    message: '请输入用户名'
  } ],
  password: [ {
    required: true,
    trigger: [ 'blur', 'input' ],
    message: '请输入密码'
  } ]
}
const labelStyle = {
  height: '50px',
  fontSize: '20px'
}
/** 登录 */
async function login() {
  formRef.value?.validate(async (errors?: Array<any>) => {
    if (!errors) {
      const params = {
        account: model.value.account.trim(),
        password: model.value.password.trim()
      }
      const { success, data, message } = await netService.post('/sys/login', params)
      if (!success) throw message
      store.setUserInfo(data)
      sessionStorage.setItem('token', data.satoken)
      await nextTick()
      // 页面跳转
      window.location.href = '/'
    }
  })
}

</script>
<template>
  <div class="login">
    <div
      class="form"
      @keydown.enter="login"
    >
      <div class="title">
        雅安可视化管控中心
      </div>
      <n-form
        ref="formRef"
        :model="model"
        :rules="rules"
        label-placement="left"
        label-width="80px"
        :show-require-mark="false"
      >
        <n-form-item
          label="用户名"
          path="account"
          :label-style="labelStyle"
        >
          <n-input
            v-model:value="model.account"
            placeholder="请输入用户名"
            size="large"
            round
          >
            <template #prefix>
              <icon
                name="user"
                :size="16"
              />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item
          label="密码"
          path="password"
          :label-style="labelStyle"
        >
          <n-input
            v-model:value="model.password"
            placeholder="请输入密码"
            size="large"
            round
            type="password"
          >
            <template #prefix>
              <icon
                name="lock"
                :size="16"
              />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item
          label=" "
          :label-style="labelStyle"
        >
          <n-button
            v-debounce
            round
            :bordered="false"
            @click="login"
          >
            登 录
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: #030E25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 160px;

  .form {
    width: 711px;
    height: 576px;
    background: linear-gradient(229deg, #050f25, #535c66);
    border-radius: 30px;
    border: 2px solid #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      display: flex;
      gap: 30px;
      margin-top: 81px;
      font-size: 36px;
      color: #FFFFFF;
      line-height: 41px;
      letter-spacing: 2px;
    }

    .n-form-item {
      &:first-child {
        margin-top: 110px;
      }

      margin-top: 16px;
      margin-bottom: 0;
    }

    :deep(.n-form-item-label__text) {
      text-align-last: justify;
    }

    .n-input,
    .n-button {
      width: 415px;
      --n-height: 50px
    }

    .n-button {
      background: #030E25;
      color: #FFFFFF;
      border-color: #fff;
      font-size: 20px;
    }
  }
}
</style>