微信小程序（六）登录

最新推荐文章于 2024-05-15 14:16:15 发布

Zaltana

最新推荐文章于 2024-05-15 14:16:15 发布

阅读量368

点赞数 9

分类专栏：微信小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/zhoulina815/article/details/124004165

版权

微信小程序专栏收录该内容

13 篇文章 27 订阅

订阅专栏

logon.wxml

<!--pages/logon/logon.wxml-->
<view style="margin-top:40%">
    <form bindsubmit="submit">
      <view class="form_item" style="margin-bottom: 20px;">
        <i class="iconfont icon-user"></i>
        <input type="text" placeholder="用户名" />
      </view>
      <view class="form_item" style="margin-bottom: 40px;">
        <i class="iconfont icon-password"></i>
        <input type="password" placeholder="密码" />
      </view>
      <view>
        <button class="login_btn">登录</button>
        <button bindtap="enroll">注册</button>
      </view>
    </form>
  </view>

logon.wxss

.form_item {
  margin: 0 50rpx;
  height: 36px;
  border: 1px solid #FFC0CB;
  border-radius: 5px;
}
.form_item i {
  float: left;
  height: 36px;
  margin: 0 5px;
  font-size: 20px;
  color: #FFC0CB;
  line-height: 36px;
}
.form_item input {
  float: left;
  height: 36px;
}
.login_btn {
  background: #FFC0CB;
  color: white;
  margin-bottom: 15px;
}

效果图