微信小程序登陆界面设计
管理员组 cary110 发表于 2018-12-20 09:45:26 600

只做分享代码,不做评论。(代码通透性,随便移植到自己的项目中去)

1、wxml部分

<!--pages/login/login.wxml-->
<view class="page">
  <!--页头-->
  <view class="page__hd">

    <view class="swiper-container">

      <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" style="height:{{Height}}">

        <block wx:for="{{slider}}" wx:key="picUrl">

          <swiper-item>

            <img src="{{item.picUrl}}" class="img" bindload="imgHeight">

          </swiper-item>

        </block>

      </swiper>

      <view class="dots">

        <block wx:for="{{slider}}" wx:key="picUrl">

          <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>

        </block>

      </view>
    </view>

  </view>
  <!--主体-->
  <view class="page__bd">

    <view class="login-from">

      <view class="inputView">

        <img class="keyImage" src="../../images/user.png">

        <label class="loginLab">账号</label>

        <input type="text" name="userName" class="inputText" placeholder="请输入用户名" value="{{userName}}" bindinput="userNameInput">

      </view>

      <view class="line"></view>

      <!--密码-->

      <view class="inputView">

        <img class="keyImage" src="../../images/pass.png">

        <label class="loginLab">密码</label>

        <input type="password" name="userPassword" class="inputText" placeholder="请输入密码" value="{{userPassword}}" bindinput="passWdInput">

      </view>

      <!--登陆按钮-->

      <view class="loginBtnView">

        <button type="primary" class="loginBtn" formtype="submit" bindtap="formSubmit">登陆</button>

      </view>

    </view>

  </view>
  
</view>

2、wxss部分

/* pages/login/login.wxss 封存*/

/*轮播图*/
.swiper-container{
  position: relative;
}

.swiper-container .swiper .img{
  width: 100%;
}
.swiper-container .dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}
.swiper-container .dots .dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all .6s;
}
.swiper-container .dots .dot.active{
  width: 24rpx;
  background: #f80;
}

/*表单内容*/

.login-from {
  margin-top: 20px;
  flex: auto;
  height: 100%;
  width: 100%;
}

.inputView {
  opacity:0.7;
  background-color: #f0f0f0;
  line-height: 44px;
}

/*输入框*/

.nameImage, .keyImage {
  margin-left: 22px;
  width: 14px;
  height: 14px;
}

.loginLab {
  margin: 15px 15px 15px 10px;
  color: #545454;
  font-size: 14px;
}

.inputText {
  flex: block;
  float: right;
  text-align: right;
  margin-right: 22px;
  margin-top: 11px;
  color: #ccc;
  font-size: 14px;
  width: 65%;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 1px;
}

/*按钮*/

.loginBtnView {
  width: 100%;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.loginBtn {
  width: 80%;
  margin-top: 35px;
}


最新回复 (0)