【无标题】

最新推荐文章于 2024-05-07 23:11:20 发布

xyz_road

最新推荐文章于 2024-05-07 23:11:20 发布

阅读量335

点赞数 3

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/xyz_road/article/details/137535903

版权

<template>
  <div class="main font_def">


    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" label-width="0px" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <div class="password">
          <van-field v-model="password" type="password" name="密码" label-width="0px" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]">
          </van-field>
          <van-button type="primary">获取验证码</van-button>
        </div>
      </van-cell-group>
      <div class="sub">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>


  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue';




const username = ref('');
const password = ref('');
const onSubmit = (values) => {
  console.log('submit', values);
};
</script>

<style scoped lang="scss">
$importSccss: var();
@import '@/style/common.scss';
@import '@/style/variable.scss';

::v-deep .van-form .van-cell {
  padding-left: 0;
  // padding-right: 0;

}

.sub {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 16px;

  .van-button {
    width: 80%;
  }
}

.password {
  display: flex;
  justify-content: center;
  align-items: center;

  .van-button {
    width: 40%
  }
}

.mainar {
  @include right;

  .back {
    transform: rotateY(180deg);
  }
}

.main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  padding-bottom: 20px;

  .main-head {
    width: 100%;
    height: 50px;
    margin-top: 108px;
    padding: 0 $diatance;
    transform: perspective(1000);
    background-color: #ffffff;

    .back {
      width: 35px;
      height: 35px;
      @include background_img('@/assets/images/back.png')
    }

    .title {
      text-align: center;
      font-family: $font-family-default;
      font-weight: 600;
      color: #000000;
      font-size: 34px;
    }

    .rule {
      width: 50px;
      height: 50px;
      @include background_img('@/assets/images/icon-help.png')
    }
  }
}
</style>