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

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

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

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
|
19天前
|
开发框架 小程序 JavaScript
小程序代码丢失！反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而，现在的小程序开发框架采用像 Babel 这样的打包工具，将 JavaScript 逻辑代码混合在一个文件中并进行转编译，使其变得难以理解。
chnjames
26 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
53 2
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付（代码和注释很详细）
微信小程序实现微信支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
1469 0
石小石Orz
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识：基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
石小石Orz
97 0
微信小程序开发必备前置知识：基本代码构成与语法
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
小程序 JavaScript 安全
微信小程序实现云闪付支付（代码和注释很详细）
微信小程序实现云闪付支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
175 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
    【微信小程序登录错误】"code":-1,"error":"ERR_GET_SESSION_KEY\n{\"code\":0,\"message\":\"\",\"codeDesc\":\"Succe
  • 7
    微信小程序新增推广功能，支持自定义关键词
  • 8
    微信小程序把玩（十三）progress组件
  • 9
    【小程序开发】uniapp引入iconfont图标及使用方式
  • 10
    微信小程序：map地图自动缩放自适应大小
  • 1
    小程序的数据驱动和vue的双向绑定有何异同？
    64
  • 2
    微信小程序如何刷新当前页面
    646
  • 3
    微信小程序——解决异步问题
    310
  • 4
    微信小程序——属性配置大全
    111
  • 5
    C#动态生成带参数的小程序二维码
    89
  • 6
    分享全栈开发医疗小程序 -带源码课件（课件无解压密码），自行速度保存
    101
  • 7
    Serverless 应用引擎常见问题之在抖音快手小程序上使用如何解决
    66
  • 8
    mpaas常见问题之小程序容器,跑起来后一直提示 "网络不给力, 请稍后再试"如何解决
    110
  • 9
    mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
    96
  • 10
    在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
    363

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • Linux指令入门-系统管理
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月