<template>
  <div id="maininfo">
    <el-row>
      <el-col :span="24" class="image" :style="'background: url(' + newsinfo.bgimg + ');background-position:center center;'"> </el-col>
      <el-col :span="24" class="login">
        <div class="w_1200">
          <el-col :span="15">
            <p>&nbsp;</p>
          </el-col>
          <el-col :span="8" class="loginform">
            <el-col :span="24" class="loginformTop">
              <span class="title">{{ newsinfo.title }}</span>
              <span class="jianyi">(建议您使用谷歌浏览器)</span>
              <el-button icon="el-icon-full-screen" class="button"></el-button>
            </el-col>
            <el-col :span="24" class="form">
              <el-form ref="form" :model="form">
                <el-form-item>
                  <el-input v-model="form.name" placeholder="用户名（手机号）"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input type="password" v-model="form.pass" placeholder="密码（首次登录密码为身份证密码后六位）"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="24" class="formdown">
              <el-col :span="12" class="button" style="text-align:left;">
                <el-button>注册</el-button>
              </el-col>
              <el-col :span="12" class="button" style="text-align:right;">
                <el-button>忘记登录密码</el-button>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'maininfo',
  props: {
    newsinfo: null,
  },
  components: {},
  data: () => ({
    form: {
      name: '',
      pass: '',
    },
  }),
  created() {},
  computed: {},
  methods: {
    onSubmit() {
      // eslint-disable-next-line no-console
      console.log('submit!');
    },
  },
};
</script>

<style lang="less" scoped>
.image {
  height: 943px;
}
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.login {
  position: absolute;
  top: 0;
}
.loginform {
  height: 316px;
  box-shadow: 0 0 10px #ccc;
  background: #fff;
  margin: 86px 0 0 0;
}
.loginformTop {
  padding: 28px 32px;
}
.loginformTop .title {
  font-size: 18px;
  color: #000;
}
.loginformTop .jianyi {
  color: red;
  font-size: 18px;
  margin: 0 5px;
}
/deep/.loginformTop .el-button {
  border-radius: 0;
  padding: 0;
  border: none;
  font-size: 22px;
  color: #000;
  margin: 0 19px;
}
.form {
  padding: 0 32px;
}
.form .el-button {
  width: 100%;
  background: #415285;
  border-color: #415285;
}
.formdown {
  padding: 0 32px;
}
.formdown .button .el-button {
  padding: 0;
  border: none;
  font-size: 14px;
  color: #9c9c9c;
}
</style>
