简易登录样式

<template>
  <div class="login-container">
      <div class="login_cont">
          <p class="title">账号登录</p>
      <el-form
      :model="loginForm"
      :rules="rules"
      autocomplete="off"
      class="login-form"
      label-position="left"
      ref="loginForm"
    >
      <div style="width: 90%;margin:0 auto;">
        <el-form-item prop="account" label="账号">
          <el-input
            placeholder="输入管理员账号"
            @keyup.enter.native="handleLogin"
            autocomplete="off"
            name="account"
            ref="account"
            type="text"
            v-model="loginForm.account"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            placeholder="请输入密码"
            :show-password="true"
            @keyup.enter.native="handleLogin"
            autocomplete="off"
            name="password"
            ref="password"
            type="password"
            v-model="loginForm.password"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="code-input" prop="code" label="验证码">
          <el-input
            placeholder="验证码"
            @keyup.enter.native="handleLogin"
            autocomplete="off"
            name="code"
            ref="code"
            type="text"
            v-model="loginForm.code"
             
          >
          </el-input>
        </el-form-item>
          <img
            :src="imageCode"
            @click="getCodeImage"
            alt="codeImage"
            class="code-image"
          />
          <br/>
            <div @click="handleLogin" class="loginBtn">
            登录
        </div>
      </div>
    </el-form>
        </div>
    <span class="login-footer">
      北京有为信通科技发展有限公司 版权所有 <a href="http://beian.miit.gov.cn/" target="_blank">京ICP备15049025号</a>
    </span>
  </div>
</template>

<script>


  export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          account: "",
          password: "",
          code: "",
        },
        imageCode:'',
        rules: {
          account: {
            required: true,
            message: '账号不能为空',
            trigger: "blur"
          },
          password: {
            required: true,
            message: '密码不能为空',
            trigger: "blur"
          },
          // code: {
          //   validator: (rule, value, callback) => {
          //     if (this.isCaptcha && value === '') {
          //       callback('验证码不能为空')
          //     } else {
          //       callback()
          //     }
          //     callback()
          //   }, trigger: 'blur'
          // },
         
        },
      };
    },
    created() {
    },
    mounted() {
     
    },
    destroyed() {
      // window.removeEventListener("message", this.resolveSocialLogin);
    },
    methods: {
      // 验证码
      getCodeImage(){

      },
      // 登录
      handleLogin(){

      },
   
    }
  };
</script>

<style lang="scss">
  // $bg: #283443;
  // $light_gray: #fff;
  // $cursor: #555;

  // @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  //   .login-container .el-input input {
  //     color: $cursor;
  //   }
  // }
  
  // /* reset element-ui css */
  // .login-container {
  //   .el-input {
  //      ::placeholder{  //通过这个设置 
  //               color: #CCCCCC;
  //               font-size: 14px;
  //           }
  //     display: inline-block;

  //     input {
  //       background: transparent;
  //       border: 0;
  //       border-bottom:1px solid #EEEEEE;
  //       -webkit-appearance: none;
  //       border-radius: 0;
  //       color:#333333;
  //       height: 28px;
  //       margin-top: 8px;
  //       caret-color: $cursor;
  //       width: 250px;
  //       &:-webkit-autofill {
  //         // box-shadow: 0 0 0 1000px $bg inset !important;
  //         // -webkit-text-fill-color: $cursor !important;
  //       }
  //     }
  //   }
  //   .el-input__prefix{
  //     color: white !important;
  //   font-size: 20px;
  //   }
  //   .el-form-item {
  //     // border: 1px solid #dedede;
  //     border-radius: 2px;
  //     color: #333333;
  //     transition: all 0.3s;
  //     float: left;
  //     margin-left: 30px;
  //     // &:hover {
  //     //   border-color: #57a3f3;
  //     // }
  //   }
  //   .el-form-item__label{
  //     color: #333333;
  //   }
  //   .el-form-item__label:before {
  //     display: none;
  //   }
  // }
</style>
<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
  .login-container {
    position: relative;
    background-color: #2d3a4b;
    // background-size: cover;
    width: 100%;
    height: 100vh;
    .login_cont{
      width: 500px;
      height: 400px;
      position: absolute;
      left: 50%;
      margin-left: -270px;
      top: 50%;
      margin-top: -250px;
      background: #FFFFFF;
      border: 1px solid #333333;
      border-radius: 22px;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      padding: 50px 20px;
        .title{
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #111111;
          line-height: 32px;
          text-align: center;
          margin: 0;
        }
        .login-form{
          margin-top: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
           .code-input {
            width: 70%;
            display: inline-block;
            vertical-align: middle;
          }
          .code-image {
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
            margin-top: 55px;
          }
        }
      .loginBtn{
        background: #000099;
        background-position: center;
        background-blend-mode: normal;
        width: 340px;
        height: 58px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 58px;
        text-align: center;
        margin: 0 auto;
        margin-top: 40px;
        // position: absolute;
        // bottom: 45px;
        border-radius: 4px;
      }
    }
  
    // .login_icon{
    //    position: absolute;
    //     bottom: 3rem;
    //     right: 3rem;
    //     // background:url(../../assets/login/logo.png) 100% 100%;
    //     background-size: cover;
    //     width: 120px;
    //     height: 55px;
    // }
    .login-footer {
      position: absolute;
      bottom: 15px;
      width: 100%;
      text-align: center;
      color: white;
      font-size: 16px;
      line-height: 15px;
      height: 15px;
    }

    // @media only screen and (max-width: 470px) {
    //   .thirdparty-button {
    //     display: none;
    //   }
    // }

    // @media screen and (max-width: 1100px) {
    //   .login-info {
    //     left: 8%;
    //   }
    // }

    // @media screen and (max-width: 970px) {
    //   .login-form {
    //     left: 50%;
    //   }
    //   .login-info {
    //     display: none;
    //   }
    // }
  }
</style>