<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const onSubmit = (values) => {
  console.log('submit', values)
}
</script>
<template>
  <div class="counter">
    <div style="height: 7%"></div>
    <div class="ban">
      <div class="left1">
        <h2>用户登录</h2>
        <div class="login">
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
              <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit"> 登录 </van-button>
            </div>
          </van-form>
        </div>
        <div class="msg">
          <div class="left">新用户注册</div>
          <div class="right">其他方式登录 ></div>
        </div>
        <!-- <div class="bit">其他方式登录 ></div> -->
        <div class="footer">
          登录即表示同意平台 <span>《隐私政策》</span>和 <span>《用户协议》</span>
        </div>
      </div>
      <div class="right1">
        <div class="waiter">客服</div>
        <img src="@/static/erweima.png" alt="">
        <div class="bit2">使用学习通APP扫码登录</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.counter {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  .left1{
    width: 60%;
  }
  .ban {
    position: relative;
    margin: 7% auto;
    width: 800px;
    height: 500px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    .van-button--block {
    display: block;
    width: 130%;
}
    h2 {
      padding: 60px 0 0 40px;
    }

    .login {
      margin-top: 60px;
      width: 55%;
      padding-left: 20px;

      .van-field__left-icon {
        padding-right: 10px;
      }
    }

    .msg {
      padding-left: 45px;
      display: flex;
      width: 65%;
      justify-content: space-between;
      align-items: center;

      .left {
        color: #7888ff;
      }

      .right {
        color: darkgray;
        position: absolute;
        left: 210px;
      }
    }
    // .bit{
    //   color: darkgray;
    //   text-align: center;
    //   position: absolute;
    //   bottom: 100px;
    //   left:20% ;
    //   font-size: 12px;
    // }
    .footer {
      position: absolute;
      bottom: 50px;
      left: 10%;
      text-align: center;
      font-size: 12px;

      span {
        color: #7888ff;
      }
    }
  }

  .right1 {
    width: 34%;
    margin-left: 20px;
    .waiter {
      color: darkgray;
      font-size: 14px;
      text-align: end;
      margin-top: 20px;
      padding-right: 5px;
    }
    img{
      height: 290px;
      width: 270px;
      margin-top: 40px;
      padding-left: -20px;
    }
    .bit2{
      color: darkgray;
      text-align: center;
      position: absolute;
      bottom: 100px;
      left:70% ;
      font-size: 12px;
    }
  }
}
</style>