快速搭建登录页面

Hello^_^Monkey

已于 2022-03-26 14:42:48 修改

阅读量454

点赞数

分类专栏：页面文章标签：登录

于 2022-03-26 13:43:40 首次发布

本文链接：https://blog.csdn.net/weixin_48010432/article/details/123754645

版权

页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码如下：

 <el-card>
      <!-- title -->
      <div class="title">Login Form</div>
      <!-- login body -->
      <el-form>
        <el-form-item>
          <el-input
            placeholder="请输入手机号"
            v-model="loginForm.phone"
            name="phone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入密码"
            v-model="loginForm.password"
            name="password"
          >
            <!-- <i-slot>22</i-slot> -->
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox :value="true"
            >我已阅读并同意「用户协议」和「隐私条款」</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary">点击登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

样式文件：

.Login-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #2d3a4b;

  //   background: url(../../assets/login.png);

  .el-card {
    width: 520px;
    height: 380px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    background: #2d3a4b;
    border: 0;

    // background: skyblue;
    .title {
      font-size: 30px;
      color: lightgray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .el-form {
      padding: 0 20px;
      .el-button {
        width: 85%;
        background-color: #46a6ff;
      }

      .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;
        /deep/ input {
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: rgba(0, 0, 0, 0.1);
          border-radius: 5px;
          color: white;
        }
      }
    }
  }
}