repair-project-240821/pages/login/login.vue

<template>
  <view class="content">
    <view class="topBox">
      <h3 class="title">{{ index ? "注册" : "登录"}}</h3>
      <h3>欢迎使用xx报修</h3>
    </view>
    <view class="inputBox">
      <view class="ipt">
        <h4>学号</h4>
        <input type="text" value="" placeholder="请输入学生学号" />
      </view>
      <view class="ipt">
        <h4>密码</h4>
        <input type="text" value="" placeholder="请输入密码" />
      </view>
      <button class="loginBtn">{{ index ? '注册' : '登录' }}</button>
      <button @click="changeState(1)" class="registerBtn">{{ index ? '已有账号立即登录' : "暂无账号立即注册" }}</button>

      <!-- <view class="tipbox">
        <view class="txt">
          —— 其他账号登录 ——
        </view>
        <view class="otherUser">
          <uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
          <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
		index : 0
      }
    },
    methods: {
		
		//切换状态
		changeState(index){
			this.index = this.index ? 0 : 1
		}
		
    }
  }
</script>

<style scoped>
  .content {
    height: 100vh;
    background-color: aquamarine;
    background: url("@/static/login/bj.jpg") no-repeat center;
    background-size: cover;
  }

  .topBox {
    font-size: 34rpx;
    color: #fff;
    padding: 80rpx 50rpx;
  }
  
  .topBox .title{
	  font-size: 45rpx;
  }

  h3 {
    margin-bottom: 10rpx;
  }

  .inputBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 85vh;
    background-color: #fff;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    padding: 60rpx;
    box-sizing: border-box;
  }

  .ipt {
    margin-bottom: 50rpx;
  }

  .ipt h4 {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    color: #333;
  }

  .ipt input {
    border-bottom: 1px solid #dedede;
    padding-bottom: 20rpx;
    font-size: 28rpx;
  }

  .loginBtn {
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    background: #3c9cff;
    border-radius: 40rpx;
    color: #fff;
    margin-top: 50rpx;
  }

  .registerBtn {
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    border-radius: 40rpx;
    color: #ccc;
    margin-top: 50rpx;
    border: none;
  }

  .tipbox {
    position: fixed;
    bottom: 120rpx;
    left: 50%;
    transform: translate(-50%, -120px);
  }

  .otherUser {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }

  .txt {
    font-size: 28rpx;
    color: #969696;
  }

  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
</style>