xinkeaboard/xinkeaboard-web/components/LoginDialog.vue

<template>
  <el-dialog
    v-model="visible"
    :title="L['loginDialog']['登录']"
    width="500px"
    :before-close="handleClose"
    align-center
    modal-class="login-dialog-model"
  >
    <div class="login-form">
      <el-form :model="form" ref="formRef" label-position="top">
        <el-form-item :label="L['loginDialog']['邮箱']">
          <el-input v-model="form.email" clearable />
        </el-form-item>

        <el-form-item class="item-password" :label="L['loginDialog']['密码']">
          <el-input v-model="form.password" show-password type="password" />
          <div class="actions">
            <el-button type="text" @click="onForgotPassword"
              >{{ L['忘记密码']  }}</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="login-bottom">
      <el-button class="login-btn" @click="onLogin" round>{{ L['loginDialog']['登录']  }}</el-button>
      <el-button type="default" class="register-btn" @click="onRegister" round
        >{{ L['注册'] }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from "vue";

const L = getCurLanguage();


const visible = ref(false);
const form = reactive({
  email: "",
  password: "",
});

const emit = defineEmits(["login", "register", "forgot", "close"]);

function open() {
  visible.value = true;
}

function close() {
  visible.value = false;
}

function handleClose() {
  close();
  emit("close");
}

function onLogin() {
  emit("login", { ...form });
  close();
}

function onRegister() {
  emit("register");
  close();
}

function onForgotPassword() {
  emit("forgot");
}

defineExpose({ open });
</script>

<style lang="scss">
.login-dialog-model {
  .el-dialog__body {
    padding: 20px 40px;
  }
}
</style>
<style lang="scss" scoped>
.login-form {
  display: flex;
  justify-content: center;

  :deep(.el-input) {
    width: 300px;
  }

  :deep(.el-input__inner) {
    height: 40px;
  }

  .item-password {
    position: relative;

    .actions {
        position: absolute;
        right: 0;
        top: -35px;

        .el-button {
            color: #606266;
        }
    }
  }
}

.login-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  :deep(.el-button) {
    width: 300px;
    height: 35px;
    margin-left: 0;
    margin-top: 10px;
  }

  .login-btn {
    background-color: $colorMain;
    color: #fff;
  }

  .register-btn {
    &:hover {
      color: $colorMain;
    }
  }
}
</style>