微信小程序前端登录页面模板,算不上特别精美,至少还算凑合能看...

小程序前端模板.png

Login.wxml

<!--pages/login/login.wxml-->
<view class="logo">
  <image src='/pages/login/static/logo.jpg'></image>
  <text>大凯云学生管理系统</text>
</view>
<view class="form">
  <view class="row-group">
    <text>用户名</text>
    <input placeholder="请输入用户名" type="text"  bindinput="usernameInput" />
  </view>
  <view class="row-group">
    <text>密码</text>
    <input placeholder="请输入密码" type="password" bindinput="passwordInput" />
  </view>
  <view>
    <button class="submit" catchtap="loginActionT">教师 | 登录</button>
    <button class="submit" catchtap="loginActionS">学生 | 登录</button>
  </view>
</view>

Login.wxss

/* pages/login/login.wxss */
.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo image{
  margin-top: 140rpx;
  width: 216rpx;
  height: 200rpx;
}
.form{
  padding: 40rpx;
}
.form .row-group{
  padding: 20rpx 0;
  position: relative;
  border-bottom: 1rpx solid #ddd;
}
.form .row-group text{
  font-size: 28rpx;
  padding:10rpx 0;
}
.form .row-group input{
  padding: 10rpx 0;
}
.form .submit{
  margin-top: 30rpx;
  color: #fff;
  border: 2rpx solid #00c8b6;
  background-color: #00c8b6;
  font-size: 32rpx;
  font-weight: bold;
  width: 100%;
}

最后修改:2020 年 12 月 18 日 09 : 34 AM
如果觉得我的文章对你有用,请随意赞赏