从小程序诞生之日起就想着要做个小程序,一直么想到好的项目可以真的帮助公司做个有用的东西,后来想到的项目,可是由于种种原因搁置了,人生就是这样,计划不如变化,现在终于有时间和有做这个项目,虽然现在的作用以及不能和当初的作用想比,但是还是完成最迟设计把。
缩略图预览:

登陆代码设计:
1、HTMLE页面



  
  

    

      

        

          

            

          

        

      

      

        

          

        

      
    

  
  
  

    

  
  

2、css页面

/* 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;
}

说明:由于界面设计代码的通用性,登陆界面完全可以移植到别的你的项目。

正文到此结束

留言

1条评论
  1. Gravatar 头像

    小中 回复

    看看,支持下、、 :sad:

LEAVE A REPLY

  • face face face face face face face face face face face face face face face face face face face face face face face face face