AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2022-11-24 444
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 吐血整理的几十款小程序登陆界面【附完整代码】（三）

2.2 通用类型

2.2.1 样式一

2-2-1 效果图

6fa6fa5bba29487ebd2894fe05b2264c.png


2-2-1 完整代码
<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>


2.2.2 样式二

2-2-2 效果图

0a614851ad7f4ae180cbc3d45d774ced.gif


2-2-2 完整代码
<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>


2.2.3 样式三

2-2-3 效果图

bcb5508e28d74af5997b9d7785bae268.png


2-2-3 完整代码
<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>


2.2.4 样式四

2-2-4 效果图

5cb3fff4b5994a0498b5ee5aab6308ff.png


2-2-4 完整代码
<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>


2.2.5 样式五

2-2-5 效果图

e7f2422369b048098ca3df1ae6734d28.gif


2-2-5 完整代码
<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>


2.2.6 样式六

2-2-6 效果图

ffc879c23fff4ca882f36e47486668e1.png


2-2-6 完整代码
<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>


2.2.7 样式七

2-2-7 效果图

31b73005582d4e1395698d50bd5279a6.png


2-2-7 完整代码
<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>


2.2.8 样式八

2-2-8 效果图

c611f0ced45f4c53b87f81f1dafaf0a9.png


2-2-8 完整代码
<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>


2.2.9 样式九

2-2-9 效果图

c7ff6ce553424102afa7ce21433cd7c1.png


2-2-9 完整代码
<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>



文章标签：
小程序
关键词：
小程序登陆
小程序界面代码
qasxfte752dni
目录
相关文章
chnjames
|
22天前
|
开发框架 小程序 JavaScript
小程序代码丢失！反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而，现在的小程序开发框架采用像 Babel 这样的打包工具，将 JavaScript 逻辑代码混合在一个文件中并进行转编译，使其变得难以理解。
chnjames
28 0
小程序代码丢失！反编译找回
wishCoding
|
6月前
|
JavaScript Java 测试技术
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
wishCoding
45 0
rbvb2ms5saimy
|
2月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码，包括电商系统、同城拼车、博客等多种应用，涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例，适合初学者和开发者参考学习。提取码：8888，代码效果参考：http://www.603393.com/sitemap.xml。
rbvb2ms5saimy
54 2
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付（代码和注释很详细）
微信小程序实现微信支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
1512 0
石小石Orz
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识：基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
石小石Orz
100 0
微信小程序开发必备前置知识：基本代码构成与语法
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
小程序 JavaScript 安全
微信小程序实现云闪付支付（代码和注释很详细）
微信小程序实现云闪付支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
184 0
67vpym2vvkfhs
|
5月前
|
XML 小程序 Java
java小程序代码详细展示
java小程序代码详细展示
67vpym2vvkfhs
38 0
wishCoding
|
6月前
|
JavaScript Java 测试技术
基于小程序的汽车保养系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的汽车保养系统+springboot+vue.js附带文章和源代码说明文档ppt
wishCoding
37 0
wishCoding
|
6月前
|
JavaScript Java 测试技术
基于小程序的童装商城+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的童装商城+springboot+vue.js附带文章和源代码说明文档ppt
wishCoding
39 0
wishCoding
|
6月前
|
JavaScript Java 测试技术
基于小程序的个人行政复议在线预约系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的个人行政复议在线预约系统+springboot+vue.js附带文章和源代码说明文档ppt
wishCoding
37 0

热门文章

最新文章

  • 1
    阿里20亿小程序繁星计划你最需要知道的几个问题（0325更新）
  • 2
    小程序审核常见驳回类型
  • 3
    微信小程序页面之间的传值
  • 4
    微信小程序获取input值的方法
  • 5
    微信小程序把玩（十四）button组件
  • 6
    【视频教程】微信小程序开发-初探篇
  • 7
    【微信小程序登录错误】"code":-1,"error":"ERR_GET_SESSION_KEY\n{\"code\":0,\"message\":\"\",\"codeDesc\":\"Succe
  • 8
    微信小程序新增推广功能，支持自定义关键词
  • 9
    微信小程序：引入阿里巴巴矢量图标库iconfont
  • 10
    微信小程序把玩（十三）progress组件
  • 1
    微信小程序echart图片不显示 问题解决
    58
  • 2
    小程序和vue写法的区别
    53
  • 3
    小程序和页面生命周期详解
    52
  • 4
    小程序；vue；uniapp优缺点（各5条）
    133
  • 5
    UniApp与微信小程序介绍及区别
    564
  • 6
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    535
  • 7
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    273
  • 8
    轻松学会微信小程序开发（一）
    211
  • 9
    使用阿里云短信+微信短链接跳转微信小程序
    463
  • 10
    【专栏】小程序图片合成就绪渲染的转变，从异步并发渲染到同步阻塞渲染
    87

    • 相关课程

    更多
  • IoT小程序框架课程
  • Lua完全自学手册图文教程
  • 机器阅读技术与应用
  • Servlet完全自学手册图文教程
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • Go语言完全自学手册图文教程

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • Linux指令入门-系统管理
  • MySQL基础-学生管理系统数据库设计
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！