引言

酷炫的登陆界面是应用的首要门面。而在我们的开发小程序过程中，由于显示条件的限制我们几乎都是自己一个人既要保证接口的高可用，还要尽力去美化小程序的样式。所以这个时候，寻找到靠谱且贴合需求的样式模板，这就显得尤其重要。

在多年的小程序开发积累下，特此总结了文中几十款小程序登陆界面。强烈推荐收藏！总有一个能帮到你！如果喜欢的话，期待留下你一个小小的赞。

一、带注册功能

1.1.1 样式一

1-1-1 效果图

1-1-1 完整代码

<template>
  <view class="container">
    <view class="bg bg-color-base margin-b20"></view>
    <view class="tab vs-row vs-align-center">
      <image class="tab-bg" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/banner-icon.png?sign=d63f6b91aed3733b261cc0127d2cf702&t=1604049324"
       mode=""></image>
      <view class="vs-row vs-align-center">
        <view class="vs-column vs-align-center margin-r40" @click="cur = 0">
          <text class="font-50 margin-b20" :class="[cur ? 'color-black-3': 'color-base']">登录</text>
          <view class="line bg-color-base" v-if="!cur"></view>
        </view>
        <view class="vs-column vs-align-center" @click="cur = 1">
          <text class="font-46 margin-b20" :class="[cur ? 'color-base': 'color-black-3']">注册</text>
          <view class="line bg-color-base" v-if="cur"></view>
        </view>
      </view>
    </view>
    <view class="login margin-b80" v-if="!cur">
      <view class="input vs-row vs-align-center margin-b40">
        <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/account.png?sign=599d8600e2d55f39ebd1cbc159a04729&t=1604049340"
         mode=""></image>
        <input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
         placeholder-class="input-placeholder" />
      </view>
      <view class="input vs-row vs-align-center margin-b40">
        <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/password.png?sign=9f8fdd0ae0a1ae530a9226de8917ebbd&t=1604049354"
         mode=""></image>
        <input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码"
         placeholder-class="input-placeholder" />
      </view>
    </view>
    <view class="register margin-b80" v-if="cur">
      <view class="input vs-row vs-align-center margin-b40">
        <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/account.png?sign=599d8600e2d55f39ebd1cbc159a04729&t=1604049340"
         mode=""></image>
        <input class="vs-flex-item color-base font-30" type="text" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
         placeholder-class="input-placeholder" />
      </view>
      <view class="input vs-row vs-align-center margin-b40">
        <image class="input-icon margin-r20" src="https://6e69-niew6-1302638010.tcb.qcloud.la/denglu/%E7%99%BB%E5%BD%955/password.png?sign=9f8fdd0ae0a1ae530a9226de8917ebbd&t=1604049354"
         mode=""></image>
        <input class="vs-flex-item color-base font-30" type="text" password value="" placeholder="请输入您的登录密码"
         placeholder-class="input-placeholder" />
      </view>
    </view>
    <view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b20">
      <text class="color-white font-34">立即{{ cur ? '注册': '登录' }}</text>
    </view>
    <view class="vs-row vs-align-center vs-space-center margin-b100">
      <text class="color-base font-28">忘记密码？</text>
    </view>
    <view class="other">
      <view class="vs-row vs-align-center margin-b40">
        <view class="separator vs-flex-item"></view>
        <text class="color-black-3 font-28">更多登录方式</text>
        <view class="separator vs-flex-item"></view>
      </view>
      <view class="other-items vs-row vs-align-center vs-space-around">
        <image class="other-icon" src="/static/other/wx.png" mode=""></image>
        <image class="other-icon" src="/static/other/wb.png" mode=""></image>
        <image class="other-icon" src="/static/other/zfb.png" mode=""></image>
      </view>
    </view>
    <soure :url="url"></soure>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        url: 'https://ext.dcloud.net.cn/plugin?id=1931',
        cur: 0
      }
    }
  }
</script>
<style lang="scss">
  .container {
    position: relative;
  }
  .bg {
    position: relative;
    width: 750rpx;
    height: 400rpx;
  }
  .tab {
    position: absolute;
    top: 250rpx;
    left: 20rpx;
    right: 20rpx;
    height: 150rpx;
    padding: 0 50rpx;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    &-bg {
      position: absolute;
      top: -200rpx;
      right: -50rpx;
      width: 440rpx;
      height: 285rpx;
    }
  }
  .line {
    width: 25rpx;
    height: 7rpx;
  }
  .login,
  .register {
    padding: 0 60rpx;
  }
  .input {
    width: 580rpx;
    height: 90rpx;
    padding: 0 30rpx;
    background-color: rgba(80, 100, 235, 0.1);
    border-radius: 100rpx;
    &-icon {
      width: 30rpx;
      height: 38rpx;
    }
    &-placeholder {
      color: #5064eb;
    }
  }
  .button {
    width: 630rpx;
    height: 90rpx;
    margin-left: 60rpx;
    border-radius: 100rpx;
  }
  .separator {
    height: 2rpx;
    margin: 0 30rpx;
    background-color: #f5f5f5;
  }
  .other {
    &-items {
      padding: 0 200rpx;
    }
    &-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
  // 下边距
  .margin-b5 {
    margin-bottom: 5rpx;
  }
  .margin-b10 {
    margin-bottom: 10rpx;
  }
  .margin-b15 {
    margin-bottom: 15rpx;
  }
  .margin-b20 {
    margin-bottom: 20rpx;
  }
  .margin-b25 {
    margin-bottom: 25rpx;
  }
  .margin-b30 {
    margin-bottom: 30rpx;
  }
  .margin-b40 {
    margin-bottom: 40rpx;
  }
  .margin-b60 {
    margin-bottom: 60rpx;
  }
  .margin-b80 {
    margin-bottom: 80rpx;
  }
  .margin-b100 {
    margin-bottom: 100rpx;
  }
  // 右边距
  .margin-r5 {
    margin-right: 5rpx;
  }
  .margin-r10 {
    margin-right: 10rpx;
  }
  .margin-r15 {
    margin-right: 15rpx;
  }
  .margin-r20 {
    margin-right: 20rpx;
  }
  .margin-r25 {
    margin-right: 25rpx;
  }
  .margin-r30 {
    margin-right: 30rpx;
  }
  .margin-r40 {
    margin-right: 40rpx;
  }
  .margin-r60 {
    margin-right: 60rpx;
  }
  // 字体大小
  .font-18 {
    font-style: normal;
    font-size: 18rpx;
    font-family: Droid Sans Fallback;
  }
  .font-20 {
    font-style: normal;
    font-size: 20rpx;
    font-family: Droid Sans Fallback;
  }
  .font-22 {
    font-style: normal;
    font-size: 22rpx;
    font-family: Droid Sans Fallback;
  }
  .font-24 {
    font-style: normal;
    font-size: 24rpx;
    font-family: Droid Sans Fallback;
  }
  .font-26 {
    font-style: normal;
    font-size: 26rpx;
    font-family: Droid Sans Fallback;
  }
  .font-28 {
    font-style: normal;
    font-size: 28rpx;
    font-family: Droid Sans Fallback;
  }
  .font-30 {
    font-style: normal;
    font-size: 30rpx;
    font-family: Droid Sans Fallback;
  }
  .font-32 {
    font-style: normal;
    font-size: 32rpx;
    font-family: Droid Sans Fallback;
  }
  .font-34 {
    font-style: normal;
    font-size: 34rpx;
    font-family: Droid Sans Fallback;
  }
  .font-36 {
    font-style: normal;
    font-size: 36rpx;
    font-family: Droid Sans Fallback;
  }
  .font-38 {
    font-style: normal;
    font-size: 38rpx;
    font-family: Droid Sans Fallback;
  }
  .font-40 {
    font-style: normal;
    font-size: 40rpx;
    font-family: Droid Sans Fallback;
  }
  .font-46 {
    font-style: normal;
    font-size: 46rpx;
    font-family: Droid Sans Fallback;
  }
  .font-50 {
    font-style: normal;
    font-size: 50rpx;
    font-family: Droid Sans Fallback;
  }
  .font-60 {
    font-style: normal;
    font-size: 60rpx;
    font-family: Droid Sans Fallback;
  }
  .font-80 {
    font-style: normal;
    font-size: 80rpx;
    font-family: Droid Sans Fallback;
  }
  // 字体对齐
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  // color相关
  .color-white {
    color: #FFFFFF;
  }
  .color-red {
    color: #dc0000;
  }
  // 黑色色阶向下
  .color-black {
    color: #000;
  }
  .color-black-3 {
    color: #333;
  }
  .color-black-6 {
    color: #666;
  }
  .color-black-9 {
    color: #999;
  }
  // 字体宽度
  .font-weight-400 {
    font-weight: 400;
  }
  .font-weight-500 {
    font-weight: bold;
  }
  // 间隔
  .spacing-20 {
    width: 750rpx;
    height: 20rpx;
    background-color: #f8f8f8;
  }
  // 圆角
  .radius-10 {
    border-radius: 10rpx;
  }
  .radius-20 {
    border-radius: 20rpx;
  }
  .radius-30 {
    border-radius: 30rpx;
  }
  .radius-circle {
    border-radius: 50%;
  }
  .radius-height {
    border-radius: 10000px;
  }
  // flex相关
  .vs-flex-item {
    flex: 1;
  }
  .vs-space-between {
    justify-content: space-between;
  }
  .vs-space-around {
    justify-content: space-around;
  }
  .vs-space-center {
    justify-content: center;
  }
  .vs-space-end {
    justify-content: flex-end;
  }
  .vs-row {
    flex-direction: row;
  }
  .vs-column {
    flex-direction: column;
  }
  .vs-align-end {
    align-items: flex-end;
  }
  .vs-align-center {
    display: flex;
    align-items: center;
  }
  .vs-align-start {
    align-items: flex-start;
  }
  .vs-item-hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .vs-btn-hover {
    opacity: 0.8;
  }
  .color-base {
    color: #5064eb;
  }
  .bg-color-base {
    background-color: #5064eb;
  }
</style>

1.1.2 样式二

1-1-2 效果图

1-1-2 完整代码

1-1-2 登陆模块

<template>
  <view class="content">
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/b4dc6deb-b506-4f79-820f-8254fb1ed4bf.png"></image>
      <input placeholder="账号或邮箱" maxlength="18" />
    </view>
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image>
      <input placeholder="请输入您的密码" maxlength="18" />
    </view>
    <view class="login-btn">
      确认登录
    </view>
    <view class="function-link">
      <text @click="register">新用户注册</text>
      <text @click="forget">忘记密码</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    onLoad() {
    },
    methods: {
      // 注册
      register() {
        uni.navigateTo({
          url: '/pages/login1/register'
        })
      },
      // 忘记密码
      forget() {
        uni.navigateTo({
          url: '/pages/login1/forget'
        })
      }
    }
  }
</script>
<style lang="scss">
  .content {
    padding: 100rpx 60rpx;
    display: flex;
    flex-direction: column;
  }
  .row-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30rpx;
    height: 100rpx;
    border-bottom: 1rpx solid #818181;
    image {
      width: 45rpx;
      height: 45rpx;
    }
    input {
      font-size: 30rpx;
      padding-left: 30rpx;
      width: 500rpx;
    }
  }
  .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    margin-top: 80rpx;
    height: 80rpx;
    font-size: 30rpx;
    background-color: #fd661f;
    color: #FFFFFF;
  }
  .function-link {
    margin: 0 20rpx;
    height: 70rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    color: #fd661f;
  }
</style>

1-1-2 注册模块

<template>
  <view class="content">
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/87427b5e-c2d8-4534-a4a0-e12b48c88440.png"></image>
      <input placeholder="注册邮箱" maxlength="18" />
    </view>
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/b4dc6deb-b506-4f79-820f-8254fb1ed4bf.png"></image>
      <input placeholder="用户名" maxlength="18" />
    </view>
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image>
      <input placeholder="设置密码" maxlength="18" />
    </view>
    <view class="login-btn">
      立即注册
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    onLoad() {
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .content {
    padding: 100rpx 60rpx;
    display: flex;
    flex-direction: column;
  }
  .row-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30rpx;
    height: 100rpx;
    border-bottom: 1rpx solid #818181;
    image {
      width: 45rpx;
      height: 45rpx;
    }
    input {
      font-size: 30rpx;
      padding-left: 30rpx;
      width: 500rpx;
    }
  }
  .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    margin-top: 80rpx;
    height: 80rpx;
    font-size: 30rpx;
    background-color: #fd661f;
    color: #FFFFFF;
  }
</style>

1-1-2 忘记密码模块

<template>
  <view class="content">
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image>
      <input placeholder="旧密码" maxlength="18" />
    </view>
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image>
      <input placeholder="新密码" maxlength="18" />
    </view>
    <view class="row-input">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/a8677dbc-1b40-4c25-b401-32316d8705df.png"></image>
      <input placeholder="再次新密码" maxlength="18" />
    </view>
    <view class="login-btn">
      立即修改
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    onLoad() {
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .content {
    padding: 100rpx 60rpx;
    display: flex;
    flex-direction: column;
  }
  .row-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30rpx;
    height: 100rpx;
    border-bottom: 1rpx solid #818181;
    image {
      width: 45rpx;
      height: 45rpx;
    }
    input {
      font-size: 30rpx;
      padding-left: 30rpx;
      width: 500rpx;
    }
  }
  .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    margin-top: 80rpx;
    height: 80rpx;
    font-size: 30rpx;
    background-color: #fd661f;
    color: #FFFFFF;
  }
</style>

1.1.3 样式三

1-1-3 效果图

1-1-3 完整代码

<template>
  <view class="content">
    <view class="logo">
      LOGO
    </view>
    <view class="form-box">
      <view class="tab-menu">
        <view class="tab-name" @click="tabChange(0)">
          <text :class="tabIndex==0?'tab-txt':''">登录</text>
          <text v-show="tabIndex==0" class="tab-active"></text>
        </view>
        <view class="tab-name" @click="tabChange(1)">
          <text :class="tabIndex==1?'tab-txt':''">注册</text>
          <text v-show="tabIndex==1" class="tab-active"></text>
        </view>
      </view>
      <view v-show="tabIndex==0">
        <view class="row-input">
          <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/ca9b79b9-844e-4d88-8738-19a1b6fdf83a.png"></image>
          <input placeholder="输入账号/手机号" maxlength="11" />
        </view>
        <view class="row-input">
          <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/6b93574b-73ce-4d3e-8353-a65095e9ba87.png"></image>
          <input placeholder="输入密码" maxlength="18" />
        </view>
        <view class="menu-link">
          <text>忘记密码?</text>
        </view>
        <view class="login-btn">
          登录
        </view>
      </view>
      <view v-show="tabIndex==1">
        <view class="row-input-code">
          <view class="input-box">
            <image class="img" mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/ca9b79b9-844e-4d88-8738-19a1b6fdf83a.png"></image>
            <input placeholder="输入手机号" maxlength="11" type="number" />
          </view>
          <view class="code-box" @click="getCode">
            获取验证码
          </view>
        </view>
        <view class="row-input">
          <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/8e1c961a-cf6d-4190-bedb-bdf3cdc8b66d.png"></image>
          <input placeholder="输入验证码" maxlength="6" type="number" />
        </view>
        <view class="row-input">
          <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/6b93574b-73ce-4d3e-8353-a65095e9ba87.png"></image>
          <input placeholder="输入6位密码" maxlength="6" />
        </view>
        <view class="login-btn register">
          注册
        </view>
        <view class="agree-txt">注册即表示您同意<text>《xx用户协议》</text></view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tabIndex: 0 //登录注册下标
      }
    },
    methods: {
      // tab切换
      tabChange(id) {
        this.tabIndex = id
      },
      // 获取验证码
      getCode() {
        uni.showToast({
          title: "获取验证码"
        })
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #5de97f;
  }
  .logo {
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 120rpx;
    letter-spacing: 5rpx;
    font-weight: bold;
  }
  .form-box {
    padding: 0 50rpx;
    margin: 0 70rpx;
    height: 750rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    .tab-menu {
      padding-top: 50rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 100rpx;
      .tab-name {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        width: 150rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #afafaf;
      }
      .tab-txt {
        color: #5b5b5b;
      }
      .tab-active {
        margin-top: 10rpx;
        width: 100rpx;
        height: 13rpx;
        background-color: #6bb3fe;
        border-radius: 15rpx;
      }
    }
    .row-input {
      margin: 60rpx 0 0 0;
      padding: 0 20rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 80rpx;
      border: 5rpx solid #bbf7c8;
      border-radius: 8rpx;
      image {
        width: 30rpx;
        height: 30rpx;
      }
      input {
        padding-left: 20rpx;
        font-size: 28rpx;
        width: 400rpx;
      }
    }
    .row-input-code {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      font-size: 28rpx;
      .input-box {
        padding: 0 20rpx;
        width: 60%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        border: 5rpx solid #bbf7c8;
        border-top-left-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
        box-sizing: border-box;
        .img {
          width: 40rpx;
          height: 30rpx;
        }
        input {
          padding-left: 20rpx;
          font-size: 28rpx;
          width: 300rpx;
        }
      }
      .code-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40%;
        height: 100%;
        color: #FFFFFF;
        border-top-right-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
        background: linear-gradient(#44aae8, #4889e2);
      }
    }
    .menu-link {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 70rpx;
      color: #007AFF;
      font-size: 24rpx;
    }
    .login-btn {
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80rpx;
      background: linear-gradient(#44aae8, #4889e2);
      border-radius: 50rpx;
      color: #FFFFFF;
      font-size: 35rpx;
      font-weight: bold;
      letter-spacing: 4rpx;
    }
    .register {
      margin-top: 50rpx;
    }
    .agree-txt {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 70rpx;
      font-size: 24rpx;
      text {
        color: #007AFF;
      }
    }
  }
</style>

1.1.4 样式四

1-1-4 效果图

1-1-4 完整代码

1-1-4 登陆模块

<template>
  <view class="content">
    <view class="head">
      <view class="logo">
        logo
      </view>
      <text class="tip">欢迎登录xxxx系统</text>
    </view>
    <view class="form-box">
      <view class="tab-box">
        <view class="row-tab" @click="tabClick(0)">
          <text :class="tabIndex==0?'tab-active':''">账号登录</text>
          <text class="thing" v-show="tabIndex==0?true:false"></text>
        </view>
        <view class="row-tab" @click="tabClick(1)">
          <text :class="tabIndex==1?'tab-active':''">验证码登录</text>
          <text class="thing" v-show="tabIndex==1?true:false"></text>
        </view>
      </view>
      <view v-show="tabIndex==0">
        <view class="row-input">
          <input maxlength="11" placeholder="手机号码" />
        </view>
        <view class="row-input">
          <input password maxlength="18" placeholder="密码" />
        </view>
      </view>
      <view v-show="tabIndex==1">
        <view class="row-input">
          <input maxlength="11" placeholder="手机号码" />
          <view class="code">
            <text @click="getCode">获取验证码</text>
          </view>
        </view>
        <view class="row-input">
          <input maxlength="6" placeholder="验证码" />
        </view>
      </view>
      <view class="login-btn">
        登录
      </view>
      <view class="menu-link">
        <text @click="register">注册</text>
        <text>找回密码</text>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tabIndex: 0, //tab下标
      }
    },
    methods: {
      // tab点击
      tabClick(id) {
        this.tabIndex = id
      },
      // 获取验证码
      getCode() {
        uni.showToast({
          title: "获取验证码"
        })
      },
      // 注册
      register() {
        uni.navigateTo({
          url: '/pages/login4/register'
        })
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: #007AFF;
  }
  .head {
    padding-left: 80rpx;
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      width: 110rpx;
      height: 110rpx;
      font-size: 40rpx;
      color: #007AFF;
      font-weight: bold;
      background-color: #FFFFFF;
    }
    .tip {
      padding-top: 50rpx;
      color: #FFFFFF;
      font-size: 40rpx;
      letter-spacing: 5rpx;
      font-weight: bold;
    }
  }
  .form-box {
    padding: 0rpx 80rpx;
    height: 70vh;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    background-color: #FFFFFF;
    .tab-box {
      padding-top: 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      color: #929293;
      font-weight: bold;
      .row-tab {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-weight: bold;
        font-size: 35rpx;
        width: 50%;
        height: 100%;
        .tab-active {
          color: #4d88f8;
        }
        .thing {
          margin-top: 20rpx;
          width: 50rpx;
          height: 6rpx;
          background-color: #3884f6;
        }
      }
    }
    .row-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 50rpx;
      font-size: 30rp;
      height: 100rpx;
      border-bottom: 1rpx solid #cfcfd0;
      input {
        flex: 1;
      }
      .code {
        display: flex;
        justify-content: flex-end;
        font-weight: bold;
        color: #0b77f7;
        width: 200rpx;
        font-size: 26rpx;
      }
    }
    .login-btn {
      margin-top: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      letter-spacing: 10rpx;
      background: linear-gradient(to right, #0a7df7, #0f62f3);
      color: #FFFFFF;
      border-radius: 10rpx;
      font-size: 30rpx;
    }
    .menu-link {
      position: fixed;
      left: 80rpx;
      right: 80rpx;
      bottom: 50rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
</style>

1-1-4 注册模块

<template>
  <view class="content">
    <view class="row-input">
      <text>电话号码</text>
      <view class="input-box">
        <input placeholder="请输入您的电话号码" maxlength="11" />
      </view>
    </view>
    <view class="row-input2">
      <text>验证码</text>
      <view class="input-box2">
        <input class="input2" placeholder="请输入您的验证码" maxlength="6" />
        <view class="code">
          <text>获取验证码</text>
        </view>
      </view>
    </view>
    <view class="row-input">
      <text>登录密码</text>
      <view class="input-box">
        <input placeholder="请输入您的登录密码" maxlength="18" />
      </view>
    </view>
    <view class="row-input">
      <text>确认密码</text>
      <view class="input-box">
        <input placeholder="再次输入登录密码" maxlength="18" />
      </view>
    </view>
    <view class="row-input">
      <text>邀请码</text>
      <view class="input-box">
        <input placeholder="请输入您的邀请码" maxlength="10" />
      </view>
    </view>
    <view class="register-btn">
      注册
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
  }
</script>
<style lang="scss">
  .content {
    padding: 0 40rpx;
    .row-input {
      display: flex;
      flex-direction: column;
      font-size: 30rpx;
      text {
        font-size: 28rpx;
        line-height: 100rpx;
        font-weight: bold;
      }
      .input-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
        height: 80rpx;
        border-radius: 8rpx;
        background-color: #f2f3f4;
        .code {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          letter-spacing: 3rpx;
          width: 200rpx;
          height: 80rpx;
          border-radius: 8rpx;
          background-color: #0a7ff7;
          color: #FFFFFF;
        }
      }
    }
    .row-input2 {
      display: flex;
      flex-direction: column;
      font-size: 30rpx;
      text {
        font-size: 28rpx;
        line-height: 100rpx;
        font-weight: bold;
      }
      .input-box2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .input2{
          padding: 0 20rpx;
          width: 400rpx;
          height: 80rpx;
          border-radius: 8rpx;
          background-color: #f2f3f4;
        }
        .code {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          letter-spacing: 3rpx;
          width: 200rpx;
          height: 80rpx;
          border-radius: 8rpx;
          background-color: #0a7ff7;
          color: #a5ceff;
        }
      }
    }
    .register-btn {
      margin-top: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100rpx;
      background: linear-gradient(to right, #0a7df7, #0f62f3);
      color: #FFFFFF;
      letter-spacing: 10rpx;
      font-size: 30rpx;
      border-radius: 10rpx;
    }
  }
</style>

1.1.5 样式五

1-1-5 效果图

1-1-5 完整代码

1-1-5 登陆模块

<template>
  <view class="content">
    <view class="head">
      <image class="bg-set" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/41141602-7965-4978-b750-c2873d8def13.png"></image>
    </view>
    <view class="form-box">
      <text class="tip">登录</text>
      <view class="row-input">
        <view class="row-img">
          <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/3c033a89-4444-4d85-ab8b-4870b1721ab6.png"></image>
        </view>
        <input placeholder="your email@xxxx.com" maxlength="18" />
        <text class="row-lable" style="background-color: #FFFFFF;">邮箱</text>
      </view>
      <view class="row-input">
        <view class="row-img">
          <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/bf43fe90-2627-4a45-a52b-7337966ee4a8.png"></image>
        </view>
        <input placeholder="密码" maxlength="18" password />
        <text class="row-lable" style="background-color: #FFFFFF;">密码</text>
      </view>
      <view class="login-btn">登录</view>
      <text class="menu-link">忘记密码?</text>
      <view class="register-tip">
        还没有账号？<text @click="gotoRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
      // 去注册
      gotoRegister() {
        uni.navigateTo({
          url: '/pages/login5/register'
        })
      }
    }
  }
</script>
<style lang="scss">
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    .head {
      width: 100%;
      height: 40vh;
      .bg-set {
        width: 100%;
        height: 100%;
      }
    }
    .form-box {
      display: flex;
      align-items: center;
      flex-direction: column;
      position: fixed;
      top: 35vh;
      left: 0;
      right: 0;
      bottom: 0;
      .tip {
        padding-bottom: 20rpx;
        font-size: 60rpx;
        letter-spacing: 20rpx;
      }
      .row-input {
        margin: 25rpx 0;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 600rpx;
        height: 100rpx;
        border: 4rpx solid #e2e2e2;
        border-radius: 70rpx;
        .row-img {
          margin-right: 30rpx;
          padding-left: 10rpx;
          width: 100rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 4rpx solid #e2e2e2;
          image {
            width: 50rpx;
            height: 50rpx;
          }
        }
        .row-lable {
          position: absolute;
          width: 100rpx;
          display: block;
          left: 100rpx;
          top: -20rpx;
          font-size: 26rpx;
          text-align: center;
          color: #c5c7d1;
        }
        input {
          color: #c3c3c3;
        }
      }
      .check-box {
        width: 100%;
        padding-left: 180rpx;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        color: #dfdaef;
        font-size: 26rpx;
        letter-spacing: 5rpx;
      }
      .login-btn {
        margin-top: 30rpx;
        width: 600rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        border-radius: 50rpx;
        font-size: 40rpx;
        background: linear-gradient(#501da2, #6b47d6);
        letter-spacing: 20rpx;
        color: #FFFFFF;
      }
      .menu-link {
        line-height: 80rpx;
        letter-spacing: 3rpx;
        color: #5621af;
        font-size: 26rpx;
      }
      .register-tip {
        position: fixed;
        color: #adadad;
        bottom: 30rpx;
        font-size: 28rpx;
        text {
          color: #5621af;
        }
      }
    }
  }
</style>

1.1.6 样式六

1-1-6 效果图

1-1-6 完整代码

<template>
  <view class="content">
    <view class="head">
      <image mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/6a985dd3-855d-49cd-98cb-6176a4a88e13.png"></image>
    </view>
    <view class="form-box">
      <view class="row-input">
        <input placeholder="手机号" maxlength="11" type="number" />
      </view>
      <view class="row-input">
        <input placeholder="密码" password maxlength="18" />
      </view>
      <view class="login-btn">登录</view>
      <view class="menu-link">
        <text>忘记密码</text>
        <text @click="goToRegister">注册账号</text>
      </view>
      <view class="line">第三方账号登录</view>
      <view class="quick-login">
        <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/0cb0980e-d1dd-42be-b916-ab3187c115a9.png"></image>
        <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1714171-183a-4753-b538-8fabcab0d8b6/524cd104-1f67-4f25-8408-1f6d435fb47f.png"></image>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {
      // 去注册
      goToRegister() {
        uni.navigateTo({
          url: '/pages/login6/register'
        })
      }
    }
  }
</script>
<style lang="scss">
  .head {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32vh;
    image {
      width: 360rpx;
      height: 360rpx;
    }
  }
  .form-box {
    padding: 0rpx 80rpx;
    .row-input {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 120rpx;
      border-bottom: 1rpx solid #ececec;
    }
    .login-btn {
      margin-top: 30rpx;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      height: 100rpx;
      background-color: #393a3e;
      letter-spacing: 10rpx;
      color: #f1f1f3;
    }
    .menu-link {
      line-height: 100rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #676769;
    }
    .line {
      width: 100%;
      margin: 50rpx 0rpx;
      align-self: center;
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .line:before {
      content: "";
      margin-right: 20rpx;
      border-top: 1px solid #dddddd;
      flex: 1 1 0rpx;
    }
    .line::after {
      content: "";
      margin-left: 20rpx;
      border-top: 1px solid #dddddd;
      flex: 1 1 0rpx;
    }
    .quick-login {
      padding: 0 120rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
        background-color: #000000;
      }
    }
  }
</style>

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

引言

一、带注册功能

1.1.1 样式一

1-1-1 效果图

1-1-1 完整代码

1.1.2 样式二

1-1-2 效果图

1-1-2 完整代码

1-1-2 登陆模块

1-1-2 注册模块

1-1-2 忘记密码模块

1.1.3 样式三

1-1-3 效果图

1-1-3 完整代码

1.1.4 样式四

1-1-4 效果图

1-1-4 完整代码

1-1-4 登陆模块

1-1-4 注册模块

1.1.5 样式五

1-1-5 效果图

1-1-5 完整代码

1-1-5 登陆模块

1.1.6 样式六

1-1-6 效果图

1-1-6 完整代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景