el-card是一种基于Vue框架的UI组件。它是一种卡片样式的容器，可以用于展示信息、图片、视频等多种形式的内容。
el-card具有直观的视觉效果和丰富的动态交互功能，让使用者可以轻松地创建出引人入胜的视觉体验。
El-Card是Element Plus组件库中的一个组件，用于展示卡片式的内容。它提供了丰富的配置选项，可以根据需求自定义卡片的样式和内容。
在Vue中使用el-card非常简单。首先，需要在Vue项目中引入element-ui框架。然后在需要使用el-card组件的页面中引入el-card组件。最后，就可以使用el-card组件了：
使用El-Card需要先引入Element Plus组件库，并按照以下步骤进行操作：
（1）在页面中引入Element Plus组件库的样式和脚本文件。可以通过CDN引入，也可以通过下载并引入本地文件的方式。
（2）在需要使用El-Card的地方，使用`<el-card>标签包裹卡片内容。
（3）可以为`<el-card>标签添加多个属性，来配置卡片的样式和行为。常用的属性包括：
- -`header`:设置卡片的头部内容，可以是文本或其他HTML元素。
- -body-style :设置卡片主体区域的样式，可以是一个CSS对象。
- -shadow:设置卡片的阴影样式，可选值为always 、 hover 或 never`。
- -border':设置卡片的边框样式，可选值为 always 或 never`。
- -padding:设置卡片的内边距大小，可以是一个字符串或数字。
- -dis-hover':设置是否取消鼠标悬停效果，可选值为true或 false`。
- - clickable:设置是否将卡片设置为可点击，可选值为true或 false。
4.在`<el-card>`标签内部，可以添加任意内容来展示在卡片中，可以是文本、图像、按钮或其他HTML元素。
在el-card组件中，可以包含一些额外的元素，例如标题、描述、封面图片等。这些元素可以通过el-card组件的props来设置。下面是el-card组件的一些常见props：
-
shadow: 控制el-card的投影效果。有三个可选值：always、hover和never。默认值为hover。
-
header: el-card的标题。可以是字符串、HTML元素或Vue组件。默认值为null。
-
body-style: el-card的内容区域的样式。可以是一个对象或字符串。默认值为{}
-
cover: el-card的封面图片。可以是字符串、HTML元素或Vue组件。默认值为null。
-
footer: el-card的底部内容。可以是字符串、HTML元素或Vue组件。默认值为null。
除了这些常见的props之外，el-card组件还有其他一些功能。例如，可以通过设置is-hover-shadow属性来控制鼠标悬停时的投影效果，可以通过设置body-style属性中的padding属性来设置内容区域的内边距，可以通过设置header和footer属性中的slot-scope属性来控制插槽的作用域等等。
总之，el-card是一个非常好用的Vue组件，它可以帮助我们轻松地创建出漂亮的卡片样式的容器。如果你想让你的页面看起来更加简洁、美观，不妨尝试一下el-card组件吧！
<el-card class="login-card">
<template #header>
<div class="login-card-header">
<span>用户登录</span>
</div>
</template>
<!--卡片的body 表单里面的数据全部都是对象里面的数据-->
<el-form :model="loginData" :rules="loginDataRules">
<!--这里的prop要跟rules里面的规则名对其用来校验规则-->
<el-form-item prop="username">
<!--refix-icon="UserFilled"图标做了全局引入，这里就不需要引入了-->
<!--v-model.trim 其实双向绑定了loginData.username trim其实就是去掉空格-->
<!--placeholder 默认文字提示 placeholde 清除按钮-->
<el-input prefix-icon="UserFilled" v-model.trim="loginData.username" maxlength="32" placeholder="请输入账号" clearable>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" prefix-icon="Lock" v-model.trim="loginData.password" maxlength="16" placeholder="请输入密码" clearable>
</el-input>
</el-form-item>
<!--这里面不需要加校验 因为只是一个按钮-->
<!--style="width: 100%;border-radius: 5px;" 这里设置的样式 圆角-->
<el-form-item prop="password">
<el-button type="primary" style="width: 100%;border-radius: 5px;" :loading="loginLoading" @click="handlerLogin()">登入</el-button>
</el-form-item>
</el-form>
</el-card><style scoped>
/*style中要加scoped,scoped用于各个页面之间的css属性的隔离，避免互相污染全局生效*/
.login{
position: absolute; /*图片平铺开来*/
width: 100%;/*最外层已经是body，有一层vh和vw了，其实定义完最外层就可以了，login会继承*/
height: 100%;
background-image: url(../../assets/img/bg.jpg);
background-size: 100%;
}
.login-card{
position: absolute;
left: 35%;
top: 35%;
width: 450px;
border: 40px;
}
.login-card-header{
text-align: center;
}
</style>