吐血整理的几十款小程序登陆界面【附完整代码】（三）

<template>
  <view class="t-login">
    <view class="t-b">{{title}}</view>
    <form class="cl">
      <view class="t-a">
        <image src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9510/%E8%B4%A6%E5%8F%B7.png"></image>
        <input name="phone" placeholder="请输入手机号" />
      </view>
      <view class="t-a">
        <image src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9510/%E5%AF%86%E7%A0%81.png"></image>
        <input name="code" placeholder="请输入验证码" />
        <view class="t-c">发送短信</view>
      </view>
      <view class="t-d">未注册的手机号验证后将自动注册</view>
      <button form-type="submit">立即登录</button>
    </form>
    <view class="t-f">登录即同意<text>用户协议</text></view>
    <view class="t-e cl">
        <view class="t-g">
        <image src="/static/other/wx.png"></image>
        <view>微信</view>
        </view>
        <view class="t-g">
            <image src="/static/other/wb.png"></image>
            <view>微博</view>
        </view>
    </view>
    <soure :url="url"></soure>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: '欢迎回来',
      url:'https://ext.dcloud.net.cn/plugin?id=3335'
    }
  },
  onLoad() {
  },
  methods: {
  }
}
</script>
<style>
.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000
}
.t-login button {
  font-size: 28rpx;
  background: #000;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx
}
.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  background: #f4f4f4;
  font-size: 28rpx;
  border-radius: 50rpx
}
.t-login .t-a {
  position: relative
}
.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  border-right: 2rpx solid #dedede;
  padding-right: 20rpx
}
.t-login .t-b {
  text-align: center;
  font-size: 46rpx;
  color: #000;
  padding: 150rpx 0
}
.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #000;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx
}
.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0
}
.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0
}
.t-login .t-g {
  float: left;
  width: 50%
}
.t-login .t-e image {
  width: 50rpx;
  height: 50rpx
}
.t-login .t-f {
  text-align: center;
  margin: 80rpx 0 0 0;
  color: #666
}
.t-login .t-f text {
  margin-left: 8rpx;
  color: #999
}
.t-login .uni-input-placeholder {
  color: #000
}
.cl {
  zoom: 1
}
.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20'
}
</style>

<template>
  　　<view class="box">
    <view class="loginBox">
      <view class="popup">
        <view class="loginMode">
          <view class="account" @click="isAccount" :class="!isshowAccount ? 'isAccMax': 'isAccMin'">账号登录
          </view>　
          　<view class="verification" @click="isVerification"
            :class="!isshowVerification ? 'isAccMax': 'isAccMin'">验证码登录</view>
        </view>
        <view v-show="isshowAccount" class="isshowBox">　
          <view class="inputBox">
            <text>账号</text>
            <input placeholder="请输入账号" placeholder-class="placeholder" maxlength="20" />
          </view>
          <view class="inputBox">
            <text>密码</text>
            <input placeholder="请输入密码" placeholder-class="placeholder" maxlength="20" />
          </view>
          <view class="agreement">
            <checkbox checked="true" color="#2979ff" style="transform:scale(0.6)" />
            <text>登录即同意用户协议</text>
          </view>
          <view @click="viewProtocol" class="denglu">登录</view>
        </view>
        <view v-show="isshowVerification" class="isshowBox">
          <view class="inputBox">
            <text>手机号</text>
            <input placeholder="请输入账号" placeholder-class="placeholder" maxlength="11" />
          </view>
          <view class="inputBox">
            <text>验证码</text>
            <input placeholder="请输入密码" placeholder-class="placeholder" maxlength="6" />
            <view class="countDownBox" @click="codeChange">
              <text style="width: 100%;text-align: center;">{{countDown?second+'秒':codeText}}</text>
            </view>
          </view>
          <view class="agreement">
            <checkbox checked="true" color="#2979ff" style="transform:scale(0.6)" />
            <text>登录即同意用户协议</text>
          </view>
          <view @click="viewProtocol" class="denglu">登录</view>
        </view>　
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        interval: null,
        mobile: '', // 手机号
        code: '', // 密码
        second: 60,
        countDown: false,
        codeText: '获取验证码', // 模拟获取验证码
        isshowAccount: true, // 默认显示账号密码登录
        isshowVerification: false, // 隐藏验证码登录
      }
    },
    onUnload() {
      clearInterval(this.interval);
    },
    methods: {
      // 点击验证码
      isVerification() {
        this.isshowAccount = false // 隐藏账号登录
        this.isshowVerification = true // 显示验证码登录
      },
      // 点击账号
      isAccount() {
        this.isshowVerification = false // 隐藏验证码登录
        this.isshowAccount = true // 显示账号登录
      },
      // 模拟获取验证码
      codeChange() {
        if (!this.countDown) {
          this.countDown = true
          var interval = setInterval(() => {
            if (this.second == 0) {
              this.countDown = false
              this.codeText = '重新获取'
              this.second = 60
              clearInterval(this.interval);
            }
            --this.second;
          }, 1000)
          this.interval = interval
        }
      }
    }
  }
</script>
<style lang="scss">
  .box {
    width: 100%;
    height: 100%;
    position: relative;
    .loginBox {
      width: 100%;
      height: 100%;
      background-color: #409EFF;
      position: fixed;
      top: 0px;
      left: 0px;
      .popup {
        width: 280px;
        height: 320px;
        background-color: #FFFFFF;
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 0 25px;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        .inputBox {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 55px;
          font-size: 26rpx;
          text {
            width: 100rpx;
            flex-shrink: 0;
          }
          input {
            flex: 1;
            width: 100%;
            border-bottom: 1rpx solid #d6d6d6;
          }
          .placeholder {
            font-size: 24rpx;
            color: #c5c5c5;
          }
          .countDownBox {
            width: 150rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            background-color: #e9f1f9;
            color: #2979FF;
            padding: 10rpx;
            border-radius: 20rpx;
          }
        }
        .agreement {
          height: 100rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 22rpx;
          color: #0f6bff;
          font-weight: bold;
          text-decoration: underline;
        }
        .loginMode {
          width: 300px;
          height: 31px;
          margin-top: 36px;
          margin-bottom: 20px;
          // 控制切换登录时的样式
          .isAccMax {
            font-size: 15px;
            margin-top: 6px;
            color: #D3D3D3;
          }
          .isAccMin {
            font-size: 18px;
            font-weight: 600;
            margin-top: 3px;
          }
          .account,
          .verification {
            width: 140px;
            height: 33px;
            display: inline-block;
            text-align: center;
          }
        }
        .denglu {
          border-radius: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #FFFFFF;
          width: 100%;
          height: 100rpx;
          background-color: #409eff;
        }
      }
    }
  }
</style>

<template>
  <view class="content">
    <view class="bg"></view>
    <view class="bg2"></view>
    <view class="tips">
      <text class="title">登录</text>
      <text class="subtitle">欢迎再次回来~</text>
    </view>
    <view class="form-box">
      <view class="input-box">
        <image class="left"
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E8%B4%A6%E5%8F%B7.png">
        </image>
        <input placeholder="请输入账号" />
        <image class="right"
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E4%B8%8B%E6%8B%89.png">
        </image>
      </view>
      <view class="input-box">
        <image class="left"
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E5%AF%86%E7%A0%81.png">
        </image>
        <input placeholder="请输入密码" />
        <image class="right"
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E6%98%BE%E7%A4%BA%E5%AF%86%E7%A0%81.png">
        </image>
      </view>
      <view class="btn">登录</view>
      <view class="other">
        <text>找回密码</text>
        <text style="color:#00c6fc;">快速注册</text>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style lang="scss">
  .content {
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    .tips {
      padding-top: 200rpx;
      padding-left: 80rpx;
      display: flex;
      flex-direction: column;
      .title {
        line-height: 70rpx;
        font-weight: bold;
        font-size: 50rpx;
      }
      .subtitle {
        line-height: 70rpx;
        font-size: 35rpx;
        font-weight: bold;
        color: #b0b0b1;
      }
    }
    .bg {
      position: fixed;
      top: -250rpx;
      right: -250rpx;
      width: 600rpx;
      height: 600rpx;
      border-radius: 100%;
      background-color: #00baef;
      z-index: 2
    }
    .bg2 {
      position: fixed;
      top: -150rpx;
      right: -300rpx;
      width: 600rpx;
      height: 600rpx;
      border-radius: 100%;
      background-color: #ade8f9;
      z-index: 1;
    }
    .form-box {
      padding-top: 180rpx;
      padding-left: 70rpx;
      width: 610rpx;
      .input-box {
        margin: 40rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100rpx;
        background-color: #f5f5f5;
        border-radius: 100rpx;
        width: 100%;
        input {
          flex: 1;
          height: 100%;
          font-size: 30rpx;
        }
        .left {
          padding: 0 30rpx;
          width: 35rpx;
          height: 35rpx;
        }
        .right {
          padding: 0 30rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100rpx;
        border-radius: 100rpx;
        color: #FFFFFF;
        background: linear-gradient(to right, #00c6fc, #9adcf1);
      }
      .other {
        display: flex;
        justify-content: space-between;
        text {
          line-height: 80rpx;
          font-size: 28rpx;
        }
      }
    }
  }
</style>

<template>
  <view class="content">
    <view class="logo-box">
      <view class="logo"></view>
      <view class="name">LOGO</view>
    </view>
    <view class="info-box">
      <view class="item">
        <image
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9511/%E8%B4%A6%E5%8F%B7.png">
        </image>
        <input placeholder="手机号" maxlength="11" placeholder-class="placeholder-input" />
      </view>
      <view class="item">
        <image
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9511/%E5%AF%86%E7%A0%81.png">
        </image>
        <input :password="true" maxlength="20" placeholder="密码" placeholder-class="placeholder-input" />
      </view>
      <view class="forget-pass">忘记密码?</view>
      <view class="btn-box">
        <view class="login-btn">登 录</view>
        <view class="register-btn">注册</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #54455a;
  }
  .logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 100rpx 0;
  }
  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    background-color: #fed009;
    border: 5rpx solid #FFFFFF;
  }
  .name {
    padding-top: 30rpx;
    font-weight: bold;
    font-size: 100rpx;
    -webkit-text-fill-color: #fed009;
    -webkit-text-stroke: 3rpx #FFFFFF;
  }
  .info-box {
    margin: 100rpx;
    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 30rpx 0;
      width: 100%;
      border: 1rpx solid #fed009;
      border-radius: 50rpx;
      background-color: #68546f;
      height: 90rpx;
      .placeholder-input {
        font-size: 28rpx;
        color: #fed009;
      }
      image {
        margin: 0 20rpx;
        width: 50rpx;
        height: 50rpx;
      }
      input {
        flex: 1;
        font-size: 28rpx;
        color: #fed009;
      }
    }
    .forget-pass {
      padding-right: 30rpx;
      display: flex;
      justify-content: flex-end;
      color: #fed009;
      font-size: 26rpx;
    }
    .btn-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .login-btn {
        width: 350rpx;
        height: 80rpx;
        background-color: #fed009;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
        font-size: 40rpx;
        color: #54455a;
        margin: 50rpx 0;
      }
      .register-btn {
        width: 150rpx;
        height: 60rpx;
        background-color: #68546f;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #af97b9;
        border-radius: 50rpx;
        font-size: 30rpx;
      }
    }
  }
</style>

<template>
  <view class="content">
    <view class="tab-box">
      <view class="title" :class="tabsIndex==0?'tabs-selected':'tabs-no-selected'" @click="tabsClick(0)">手机登录
      </view>
      <view class="title" :class="tabsIndex==1?'tabs-selected':'tabs-no-selected'" @click="tabsClick(1)">账号登录
      </view>
    </view>
    <view class="name">手机号</view>
    <view class="input-box">
      <input placeholder="请输入手机号" maxlength="11" placeholder-class="placeholder-input" />
    </view>
    <view class="input-box">
      <input :placeholder="tabsIndex==0?'请输入验证码':'请输入密码'" :password="tabsIndex==0?false:true" maxlength="20" placeholder-class="placeholder-input" />
      <view v-if="tabsIndex==0" class="code">获取验证码</view>
    </view>
    <view class="login-btn">登录</view>
    <view class="agreement">注册即同意
      <text class="link">用户协议</text>和<text class="link">隐私政策</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tabsIndex: 0
      }
    },
    methods: {
      tabsClick(index) {
        this.tabsIndex = index
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #FFFFFF;
  }
  .content {
    padding: 200rpx 60rpx;
    .tab-box {
      display: flex;
      align-items: flex-end;
      .title {
        margin-right: 50rpx;
        height: 55rpx;
      }
      .tabs-no-selected {
        font-size: 32rpx;
      }
      .tabs-selected {
        font-size: 40rpx;
        font-weight: bold;
        border-bottom: 6rpx solid #fe8d85;
      }
    }
    .name {
      padding-top: 100rpx;
      font-size: 26rpx;
    }
    .input-box {
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      border-bottom: 1rpx solid #dfdfdf;
      .placeholder-input {
        font-size: 26rpx;
        color: #c5c5c5;
      }
      input {
        height: 120rpx;
      }
      .code {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fe8d85;
        font-size: 26rpx;
      }
    }
    .login-btn {
      margin-top: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 80rpx;
      background-color: #fe8d85;
      color: #FFFFFF;
      border-radius: 50rpx;
    }
    .agreement {
      display: flex;
      justify-content: center;
      line-height: 100rpx;
      font-size: 24rpx;
      .link {
        color: #007AFF;
        text-decoration: underline;
      }
    }
  }
</style>

<template>
  <view class="content">
    <view class="login-tip">
      <view class="title">Sign In</view>
      <view class="sub-title">Welcome Back</view>
    </view>
    <view class="form-box">
      <input placeholder-class="input-placeholder" placeholder="Email" />
      <input placeholder-class="input-placeholder" placeholder="Password" />
      <view class="radio-box">
        <radio checked="true" color="#4a6ef5" style="transform: scale(0.8)"></radio>
        <text>Keep me Logged in</text>
      </view>
      <view class="btn-box">
        Login
      </view>
      <text class="forget-password">Forgot Password</text>
    </view>
    <text class="sign-up">Sign Up</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .content {
    padding: 180rpx 80rpx 100rpx 80rpx;
    .title {
      font-size: 60rpx;
      line-height: 100rpx;
    }
    .sub-title {
      line-height: 80rpx;
      font-size: 24rpx;
      color: #a1a1a2;
    }
    .form-box {
      margin-top: 40rpx;
      flex-direction: column;
      input {
        padding: 0 20rpx;
        margin: 30rpx 0;
        background-color: #f2f3f5;
        border-radius: 40rpx;
        height: 100rpx;
        font-size: 26rpx;
      }
      .radio-box {
        display: flex;
        height: 50rpx;
        font-size: 26rpx;
        text {
          height: 100%;
          padding-top: 10rpx;
          padding-left: 10rpx;
        }
      }
      .btn-box {
        margin-top: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        background-color: #496df4;
        border-radius: 40rpx;
        color: #FFFFFF;
        font-size: 30rpx;
        box-shadow: 0rpx 20rpx 40rpx #859df4;
      }
      .forget-password {
        line-height: 120rpx;
        font-size: 28rpx;
        display: block;
        text-align: center;
      }
      .input-placeholder {
        color: #bcbcbc;
      }
    }
  }
  .sign-up{
    position: fixed;
    left: 325rpx;
    width: 100rpx;
    bottom: 100rpx;
    font-size: 26rpx;
    bottom: 180rpx;
    color: #6e87e5;
  }
</style>

<template>
  <view class="content">
    <view class="login-tip">
      <view class="title">用户登录</view>
    </view>
    <view class="form-box">
      <view class="account-name">登录账号</view>
      <input placeholder-class="placeholder-input" maxlength="11" placeholder="输入手机号" />
      <view class="row">
        <input class="half" placeholder-class="placeholder-input" maxlength="6" placeholder="短信验证码" />
        <view class="send-code">发送</view>
      </view>
      <view class="login-box">
        <text>登录</text>
        <text class="right-icon">→</text>
      </view>
      <view class="forget-password">忘记密码</view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .content {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 350rpx;
      font-size: 80rpx;
    }
    .form-box {
      padding: 0 80rpx;
      .account-name {
        line-height: 100rpx;
        font-size: 35rpx;
      }
      input {
        padding-left: 50rpx;
        border: 1rpx solid #cdcdcd;
        height: 120rpx;
      }
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 120rpx;
        margin-top: 70rpx;
        .half {
          width: 280rpx;
        }
        .send-code {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 220rpx;
          height: 100%;
          background-color: #000000;
          color: #e5e5e5;
          box-shadow: 0 0 0 1rpx #a5a5a5, 0 0 0 5rpx #ffffff inset;
          font-size: 28rpx;
        }
      }
      .placeholder-input {
        font-size: 28rpx;
        color: #d5d5d5;
      }
      .login-box {
        position: relative;
        margin-top: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120rpx;
        background-color: #000000;
        color: #e5e5e5;
        box-shadow: 0 0 0 1rpx #a5a5a5, 0 0 0 5rpx #ffffff inset;
        color: #FFFFFF;
        .right-icon {
          position: absolute;
          top: 40rpx;
          right: 50rpx;
          color: #e5e5e5;
        }
      }
      .forget-password{
        display: flex;
        justify-content: flex-end;
        font-size: 28rpx;
        line-height: 90rpx;
      }
    }
  }
</style>

<template>
  <view class="content">
    <view class="logo-box">
      <view class="logo"></view>
      <view class="name">LOGO</view>
    </view>
    <view class="info-box">
      <view class="item">
        <image
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9515/%E8%B4%A6%E5%8F%B7.png">
        </image>
        <input placeholder="请输入您的手机号" maxlength="11" placeholder-class="placeholder-input" />
      </view>
      <view class="item">
        <image
          src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%9515/%E5%AF%86%E7%A0%81.png">
        </image>
        <input :password="true" maxlength="20" placeholder="请输入密码" placeholder-class="placeholder-input" />
      </view>
      <view class="forget-pass">忘记密码?</view>
      <view class="btn-box">
        <view class="login-btn">登 录</view>
        <view class="register-btn">注册</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #faca10;
  }
  .logo-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 100rpx 0;
  }
  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    background-color: #fff795;
    box-shadow: 0 0 0 1rpx #fff795, 0 0 0 5rpx #ffd61b inset;
  }
  .name {
    padding-top: 30rpx;
    font-weight: bold;
    font-size: 100rpx;
    color: #fff795;
  }
  .info-box {
    margin: 100rpx;
    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 30rpx 0;
      width: 100%;
      border-radius: 50rpx;
      background-color: #ffdf2a;
      height: 90rpx;
      .placeholder-input {
        font-size: 28rpx;
        color: #dab20e;
      }
      image {
        margin: 0 30rpx;
        width: 30rpx;
        height: 30rpx;
      }
      input {
        flex: 1;
        font-size: 28rpx;
        color: #dab20e;
      }
    }
    .forget-pass {
      padding-right: 30rpx;
      display: flex;
      justify-content: flex-end;
      font-size: 26rpx;
      letter-spacing: 5rpx;
    }
    .btn-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .login-btn {
        width: 350rpx;
        height: 80rpx;
        background-color: #fcda55;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
        font-size: 40rpx;
        margin: 50rpx 0;
        box-shadow: 0rpx 10rpx 20rpx #cf9305;
      }
      .register-btn {
        height: 100rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>

<template>
  <view>
    <view class="top-right-corner"></view>
    <view class="lower-left-corner"></view>
    <view class="form-box">
      <view class="logo">
        欢迎登录!
      </view>
      <view class="input-box">
        <view class="row-box">
          <text>电话</text>
          <input />
        </view>
        <view class="row-box">
          <text>密码</text>
          <input :password="true" />
        </view>
      </view>
      <view class="login-btn">
        登录
      </view>
      <view class="other-link">
        <text class="sign">忘记密码?</text>
        <text>还没有账号?<text class="sign">马上登录</text></text>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #ffffff;
  }
  .top-right-corner {
    position: fixed;
    top: -280rpx;
    right: -280rpx;
    width: 400rpx;
    height: 400rpx;
    background-color: #FFFFFF;
    border: 100rpx solid #ffdddf;
    border-radius: 100%;
    z-index: 1;
  }
  .lower-left-corner {
    position: fixed;
    bottom: -450rpx;
    left: -200rpx;
    width: 400rpx;
    height: 400rpx;
    background-color: #FFFFFF;
    border: 100rpx solid #c7e1fa;
    transform: rotate(-45deg);
    z-index: 1;
  }
  .form-box {
    margin: 100rpx 80rpx;
    .logo {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 300rpx;
      font-size: 50rpx;
      letter-spacing: 5rpx;
      font-weight: bold;
      z-index: 2;
    }
    .input-box {
      margin-top: 100rpx;
      .row-box {
        margin: 50rpx 0;
        padding: 0 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 110rpx;
        background-color: #f8f7fc;
        border-radius: 8rpx;
        text {
          line-height: 60rpx;
          font-size: 30rpx;
          color: #999ca1;
          font-weight: 600;
        }
      }
    }
    .login-btn {
      margin: 70rpx 0rpx 50rpx 0rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      font-size: 30rpx;
      height: 110rpx;
      font-weight: bold;
      background-color: #f64068;
    }
    .other-link {
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 28rpx;
      font-weight: bold;
      letter-spacing: 3rpx;
      .sign{
        color: #f987a1;
      }
    }
  }
</style>