小程序开发记录贴(陕西挂测)一

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

登陆代码设计：
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;
}

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