登录页面布局

最新推荐文章于 2024-07-09 11:00:37 发布

我爱甜甜圈

最新推荐文章于 2024-07-09 11:00:37 发布

阅读量338

点赞数

分类专栏： css 前端文章标签：前端

本文链接：https://blog.csdn.net/galaxyfanqi/article/details/127706365

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

页面水平、垂直居中
内容栏左右布局
左侧使用卡片，展示信息列表
右侧登录表单

<template>
  <div class="page">
    <div class="login">
      <div class="page-title">{{ welcomeTips }}</div>
      <div class="info">
        <div class="left">
          <img :src="logo">
          <div class="name">{{ title }}</div>
          <div class="list">
            <el-card class="card">
              <div slot="header" class="clearfix">
                <span>标题</span>
              </div>
              <div v-for="o in 2" :key="o" class="text">
                {{ '内容 ' + o }}
              </div>
            </el-card>
          </div>
        </div>
        <el-form class="right""></el-form>

      </div>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2018-2022 dhcad All Rights Reserved.</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("../assets/images/login-background.png");
  background-repeat: no-repeat;
  background-size: cover;

  .login {
    width: 80%;
    height: 82%;
  }

  .page-title {
    width: 100%;
    height: 130px;
    line-height: 130px;
    font-size: 75px;
    color: #ffffff;
    padding-left: 60px;
  }

  .info {
    overflow: auto;
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    height: calc(100% - 130px);
    border: 2px solid #97c2ff;
    border-radius: 6px;
    backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 8%);

    .left {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 0 60px;
      margin: 50px 0px 60px;
      border-right: 2px solid #97c2ff;

      img {
        width: 353px;
        transform: rotate(0deg);
        background-repeat: no-repeat;
        background-size: cover;
      }

      .name {
        margin: 6px 0 40px;
        font-size: 38px;
        color: #fff;
      }

      .list {
        width: 100%;
        height: 100%;
        min-height: 180px;
        border-radius: 5px;
        border: 1px dashed #909399;
        background-image: url("../assets/images/login-menu.png");
        background-repeat: no-repeat;
        background-size: cover;

        img {
          width: 200px;
          height: 20px;
        }

        .card {
          height: 100%;
          border: none;
          background-color: transparent;
          color: #fff;

          ::v-deep .el-card__header {
            height: 20%;
            padding: 0 30px;
            border-bottom: none;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
      }
    }



    .right {
      display: flex;
      flex-direction: column;
      min-width: 400px;
      width: 40%;
      padding: 60px 60px 20px 60px;

      .title {
        font-size: 60px;
        margin: 0px 0 15px 0;
        font-weight: 400;
        text-align: left;
        color: #fff;
      }

      .input-icon {
        width: 20px;
        height: 20px;
      }

      .company {
        position: absolute;
        left: 24px;
        top: 12px;
      }

      .input-bar {
        width: 1px;
        height: 30px;
        background-color: #97C2FF;
        position: absolute;
        left: 62px;
        top: 9px;
      }

      ::v-deep .el-input__prefix {
        top: 12px;
        left: 25px;
      }

      ::v-deep .el-input__inner {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        padding-left: 80px;
        border: none;
        border-radius: unset;
        border-bottom: 2px solid #97C2FF;
        color: #97C2FF;
        background-color: transparent;
      }

      .login-code-left {
        ::v-deep .el-input__inner {
          border: none;
          border-radius: 2px;
          border: 2px solid #97C2FF;
          padding: 0;
          text-align: center;
        }
      }

      .login-code-right {
        width: 35%;
        float: right;

        img {
          width: 100%;
          height: 50px;
          cursor: pointer;
          border-radius: 4px;
        }
      }
  
      ::v-deep .el-form-item {
        height: 100%;
        margin-bottom: 18px;
      }

      ::v-deep .el-form-item {
        margin-bottom: 0px;
      }

      .button {
        width: 100%;
        height: 60px;
        font-size: 25px;
      }

      .isc {
        padding-top: 5px;
        text-align: end;
        font-size: 20px;
        color: #f9d000;
        font-weight: 400;
      }
    }

  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 12px;
  }

}
</style>