duanju_manage/resources/admin/views/login/index.vue

<template>
  <div class="bg-gray-50 h-screen flex items-center justify-center">
    <div class="flex w-full sm:w-[32rem] shadow bg-white lg:rounded-lg">
      <!--<div class="w-1/2 hidden sm:block">
              <img src="@/assets/login-left.png" />
            </div>-->
      <div class="w-full mx-auto pt-6 pb-6 pl-4 pr-4">
        <div class="flex mt-2">
          <img :src="logo" class="mx-auto w-8" />
        </div>
        <div class="w-full text-center text-2xl mt-6 mb-8 text-indigo-700">Hi, {{ $t('login.welcome') }}</div>
        <el-divider>{{ $t('login.sign_in') }}</el-divider>
        <div>
          <el-form
            ref="form"
            :model="params"
            status-icon
            v-loading.fullscreen.lock="loading"
            :rules="rules"
            element-loading-background="rgba(0, 0, 0, 0.7)"
            label-width="70px"
            class="w-11/12 sm:w-4/5 pt-2 space-y-8 mx-auto"
          >
            <el-form-item prop="email">
              <el-input v-model="params.email" type="email" autocomplete="off" :placeholder="$t('login.email')" size="large" :prefix-icon="Message" class="h-12 text-base" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="params.password" type="password" autocomplete="off" size="large" :placeholder="$t('login.password')" show-password :prefix-icon="Lock" class="h-12 text-base" />
            </el-form-item>
          </el-form>
        </div>
        <div class="flex justify-between w-11/12 sm:w-4/5 mx-auto mt-3">
          <el-checkbox v-model="params.remember" class="top-2">
            {{ $t('login.remember') }}
          </el-checkbox>
          <div class="text-sm pt-3 text-indigo-600 cursor-pointer">
            {{ $t('login.lost_password') }}
          </div>
        </div>
        <div class="w-11/12 sm:w-4/5 mx-auto mt-5">
          <el-button type="primary" @click="submit(form)" size="large" class="w-full text-xl">
            {{ $t('login.sign_in') }}
          </el-button>
        </div>

        <div class="w-full text-center text-sm text-gray-400 mt-8 mb-10">{{ $t('system.name') }} @copyright 2018-{{ new Date().getFullYear() }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Lock, Message } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useLogin } from './login'
import logo from '/admin/assets/logo.png'

const { params, loading, submit, form, rules } = useLogin()

// set default color-theme light
onMounted(() => {
  document.querySelector('html')?.setAttribute('class', 'light')
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}

:deep(.el-divider__text) {
  @apply text-xl text-slate-400;
}
</style>