technique_admin/src/views/login/index.vue

<template>
  <div class="login-container">
    <!-- 顶部 -->
    <div class="lang">
      <LangSelect class="cursor-pointer"></LangSelect>
    </div>
    <!-- 登录表单 -->
    <el-card class="card">
      <div class="text">
        <h2>{{ $t('login.title') }}</h2>
      </div>
      <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginData.account" size="large" :placeholder="$t('login.placeholder1')">
            <template #prefix>
              <el-icon>
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginData.password" size="large" type="password" show-password :placeholder="$t('login.placeholder2')">
            <template #prefix>
              <el-icon>
                <Unlock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-button :loading="loading" type="primary" size="large" class="button" @click.prevent="handleLogin">{{ $t('login.login') }} </el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
// 接口
import { LoginStore } from '@/store/api/login'
const router = useRouter()
const loginStore = LoginStore()
const loading = ref(false) // 按钮loading
const loginFormRef = ref({}) // 登录表单ref
const loginData = ref({
  account: 'admin',
  password: '1qaz2wsx',
  type: 'Admin'
})
const loginRules = computed(() => {})
const toLogin = async (data) => {
  const res = await loginStore.login(data)
  if (res.errcode == '0') {
    ElMessage({ message: `登录成功`, type: 'success' })
    localStorage.setItem('token', res.data)
    // 路由
    router.push({ path: '/' })
  } else {
    ElMessage({ message: `${res.errmsg}`, type: 'error' })
  }
  loading.value = false
}
/**
 * 登录
 */
function handleLogin() {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      toLogin(loginData.value)
    }
  })
}
</script>
<style scoped lang="scss">
.login-container {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/images/login-bg.jpg') no-repeat center right;
  .lang {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
    height: 5rem;
    padding: 0 1.25rem;
  }

  .login-form {
    padding: 30px 10px;
  }

  .card {
    width: 400px;
    height: 450px;
    border-radius: 15px;
    padding: 20px;
    box-shadow: var(--el-box-shadow-light);
    background: transparent;

    .text {
      text-align: center;
    }

    .button {
      width: 100%;
    }
  }
}

.el-form-item {
  background: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}

:deep(.el-input) {
  padding: 5px;

  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      /* 通过延时渲染背景色变相去除背景颜色 */
      transition: background-color 1000s ease-in-out 0s;
    }
  }
}
</style>