<template>
  <div>
    <div class="content">
      <div class="servrept">
        新型经济主体掌上<br />
        <span class="serc"> 综合服务平台</span>
      </div>
      <div class="contbottom">
        <div class="toggle">
          <button class="nolog">农户登录</button>
          <button class="qylog">企业登录</button>
        </div>
        <div class="register">
          <div class="usern">
            <span>用户名</span>
            <input type="text" class="username" placeholder="请输入用户名" />
          </div>
          <div class="passw">
            <span class="passhz">密码</span>
            <input type="text" class="password" placeholder="请输入密码" />
            <span class="qhpass">
              <img
                src="../../assets/images/Newbusinessentity/2_03.jpg"
                alt=""
              />
            </span>
          </div>
          <div class="loggoto">
            <button class="loggo">登录</button>
          </div>
          <div class="jumpreg">没有农户账号？点此 <a href="#"  @click="$router.push('./register')" >注册</a></div>
        </div>
    
      </div>
    </div>
    <tabbar class="fotter"></tabbar>
  </div>
</template>
<script>
import tabbar from "./conter.vue";
export default {
  components:{
      tabbar
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style scoped lang="scss">
span,
li,
ul {
  display: block;
}
.content {
  position: relative;
  height: 21.2rem;
  width: 100%;
  background: url("../../assets/images/Newbusinessentity/333_01.jpg") no-repeat;
  background-size: 10.16rem;
  .servrept {
    font-size: 0.8rem;
    font-weight: bold;
    position: absolute;
    top: 1.7rem;
    left: 1.8rem;
  }
  .serc {
    margin-left: 0.8rem;
  }
  .contbottom {
    position: absolute;
    width: 8.7rem;
    height: 8rem;
    background: white;
    border-radius: 0.3rem;
    top: 10.6rem;
    left: 0.7rem;

    .register {
      height: 5rem;
      width: 7rem;
   
      position: absolute;
      top: 2rem;
      left: 0.9rem;
      //密码

      .passw {
        display: flex;
        position: relative;
        top: 0.6rem;
        background: #eeeeee;
        height: 0.8rem;
        width: 7rem;
        border-radius: 1rem;

        .passhz {
          position: absolute;
          left: 0.6rem;
          top: 0.14rem;
          color: #b0b0b0;
          font-size: 0.36rem;
        }
        .password {
          background: #eeeeee;
          position: absolute;
          left: 2rem;
          // background: pink;
          height: 0.8rem;
          width: 3rem;
          font-size: 0.36rem;
          color: #dbdbdb;
        }
        .qhpass {
          width: 0.5rem;
          height: 0.5rem;
          position: absolute;
          right: 0.3rem;
          top: 0.2rem;
        }
      }
      //用户名

      .usern {
        display: flex;
        position: relative;
        background: #eeeeee;
        height: 0.8rem;
        width: 7rem;
        border-radius: 1rem;
        span {
          position: absolute;
          left: 0.6rem;
          top: 0.14rem;
          color: #b0b0b0;
          font-size: 0.36rem;
        }
        .username {
          background: #eeeeee;
          position: absolute;
          left: 2rem;
          // background: pink;
          height: 0.8rem;
          width: 3rem;
          font-size: 0.36rem;
          color: #dbdbdb;
        }

        //密码
      }
    }
    .toggle {
      position: absolute;
      top: 0.5rem;
      left: 0.8rem;
      width: 7rem;
      height: 1.2rem;

      display: flex;
      justify-content: space-between;
      .nolog,
      .qylog {
        font-size: 0.4rem;
        font-weight: bold;
        background: #ffffff;
      }
    }
    .loggoto {
      position: relative;
      top: 1.4rem;
      .loggo {
        width: 5rem;
        height: 1rem;
        text-align: center;
        color: #ffffff;
        background: #41d25e;
        font-size: 0.4rem;
        position: absolute;
        left: 1rem;
        border-radius: 0.3rem;
      }
    }


    //跳转
    .jumpreg{
        position: relative;
        top: 2.8rem;
        left: 1.7rem;
        font-weight:normal;
        font-size: 0.32rem;
        a{
            color:#5bcc5b;
        }
    }
  }
}
.fotter{
    position: relative;
    height: 0.1rem;
}
</style>