elementplus好看的登入界面

### 使用Element Plus设计美观登录界面

#### 组件选择与布局规划

为了创建一个美观的登录页面，可以利用`el-container`作为主要布局容器[^2]。此组件能够有效地管理不同部分的内容分布，比如将输入框、按钮以及可能存在的提示信息合理安排。

对于具体的交互元素，则推荐采用如下几个核心部件：

- `el-input`: 适用于接收用户的账号密码等信息输入。
- `el-button`: 提供提交表单的功能，并可通过属性配置调整其外观风格以适应整体视觉效果。
- `el-link`: 如果存在找回密码链接或其他辅助选项时可选用该标签展示超链接形式的文字说明。

#### 样式美化建议

借助于Element Plus自带的一系列预定义样式类名可以直接应用于HTML标记上从而简化前端开发工作量的同时也保证了一定程度上的美感统一性。例如，在设置背景颜色方面可以通过`.el-header{background-color:#B3C0D1}`这样的方式来自定义头部区域的颜色；而对于整个登录面板而言也可以指定特定的选择器如`.login-panel{...}`来进行全局性的装饰设定[^3]。

另外值得注意的是，除了官方提供的默认主题外还可以基于Less/Sass文件自定义一套全新的配色方案满足个性化需求。

<template>
  <div class="login-page">
    <!-- 外层包裹 -->
    <el-container style="height: 100vh;">
      <!-- 中心居中的卡片 -->
      <el-main>
        <el-card shadow="always" header="欢迎登陆">
          <form @submit.prevent="handleLogin()">
            <el-form-item label="用户名">
              <el-input v-model="username"></el-input>
            </el-form-item>
            <el-form-item label="密　码">
              <el-input type="password" v-model="password"></el-input>
            </el-form-item>
            <el-row justify="end">
              <el-col :span="8">
                <el-button round native-type="submit">登 录</el-button>
              </el-col>
            </el-row>
          </form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const username = ref('');
const password = ref('');

function handleLogin() {
  console.log('模拟登录操作');
}
</script>

<style scoped>
.login-page{
  display:flex;
  align-items:center;
  justify-content:center;
}

.el-card.is-always-shadow{
  width:40%;
  min-width:300px;
}
</style>