zhgdyun/src/views/home/components/loginInfo.vue

<template>
    <div class="leftContent">
      <div class="title_r">
        <div class="backBtn" @click="goBackBtn">
          返回到首页
        </div>
        <!-- <el-button type="primary" plain size="small" class="backBtn" @click="goBackBtn">返回到首页</el-button> -->
      </div>
      <!-- <img src="../../assets/images/zjsj/zjsj_logo.png" /> -->
      <div class="logoImg"></div>
      <div class="btnContent">
        <div class="minBox">
          <el-form :model="form" :rules="rules" ref="form" label-width="0px">
            <el-form-item label="" prop="account">
              <div class="row1">
                <el-input
                  prefix-icon=" "
                  v-model="form.account"
                  placeholder="请输入帐号"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item style="margin-top: 39px" label="" prop="password">
              <div class="row2">
                <el-input
                  prefix-icon=" "
                  v-model="form.password"
                  type="password"
                  show-password
                  placeholder="请输入密码"
                ></el-input>
              </div>
            </el-form-item>
          </el-form>
          <div>
            <el-button class="loginBtn" @click="loginFn">登录</el-button>
          </div>
          <div class="about">
            <el-radio v-model="radio" label="1">记住登录密码</el-radio>
            <span>忘记密码？</span>
          </div>
          <div>
            <el-button class="registerBtn">注册账户</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
    },
    rules: {
      type: Object,
    },
  },
  data() {
    return {
        radio:'',
    };
  },
  methods: {
    goBackBtn() {
      this.$router.push({ path: "/" });
    },
    loginFn(){
        this.$emit('loginFn');
    }
  },
};
</script>

<style lang="less" scoped>
::v-deep ::-webkit-input-placeholder {
  color: #eeeeee;
  -webkit-text-fill-color: #eeeeee;
}
::v-deep .el-input__inner {
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-radius: 0%;
  background-color: rgba(2, 38, 64, 0.1);
  color: #ffffff;
  font-size: 14px;
}
::v-deep .el-radio {
  color: #27e1f0;
}
::v-deep .el-radio__inner {
  border-radius: 0%;
  background-color: rgba(2, 38, 64, 0);
  border-color: #27e1f0;
}
::v-deep .el-radio__label {
  padding-left: 5px;
}

// 在使用浏览器保存的数据时 输入框的样式
::v-deep input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    // 字体颜色
    -webkit-text-fill-color: #eeeeee;
    // 背景颜色
    background-color: rgba(2, 38, 64,0);
    //设置input输入框的背景颜色为透明色
    transition: background-color 50000s ease-in-out 0s;  
  }
.leftContent {
  position: absolute;
  top: 15%;
  right: 9%;
  width: 32%;
  .backBtn {
    margin-left: 59%;
    color: #fff;
    height: 50px;
    line-height: 25px;
    text-align: center;
    width: 125px;
    background-image: url("./../../../assets/images/zjsj/zjsj_back.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .logoImg {
    height: 100px;
    background-image: url("./../../../assets/images/zjsj/zjsj_logo.png");
    background-size: 80%;
    background-repeat: no-repeat;
  }
  .btnContent {
    margin-top: 5%;
    height: 575px;
    background-image: url("./../../../assets/images/zjsj/zjsj_loginInpt.png");
    background-size: 80%;
    background-repeat: no-repeat;
    .minBox {
      box-sizing: border-box;
      padding-left: 15%;
      .img {
        display: inline-block;
      }
      .row1,
      .row2 {
        width: 57%;
        position: relative;
        .text {
          color: #eeeeee;
          font-size: 14px;
        }
      }
      .row1 {
        padding-top: 15%;
      }
      .row1::before {
        content: url("./../../../assets/images/zjsj/zjsj_admin.png");
        top: 70%;
        left: 0%;
        position: absolute;
      }
      .row2::before {
        content: url("./../../../assets/images/zjsj/zjsj_pass.png");
        top: 10%;
        left: 0%;
        position: absolute;
      }

      .loginBtn {
        width: 300px;
        color: #eeeeee;
        background-color: #27e1f0;
        border-color: #27e1f0;
      }
      .registerBtn {
        width: 300px;
        margin-top: 3%;
        color: #696969;
        background-color: #eeeeee;
        border-color: #eeeeee;
      }
      .about {
        margin-top: 3%;
        color: #27e1f0;
        font-size: 12px;
        span {
          margin-left: 21%;
        }
      }
    }
  }
}
</style>