开始

首先把这个背景图加上

image.png

背景图
image.png
宽度为100%
image.png

左上角的关闭返回按钮，也就是差号。
image.png

image.png

  1. .icon-guanbi{
  2.     position: fixed;
  3.     top: 60upx;
  4.     left: 30upx;
  5.     font-size: 40upx;
  6.     font-weight: bold;
  7.     color: #332F0A;
  8. }

image.png

自己遇到的问题

中间会有一条缝隙，按钮也会被盖住
image.png
在H5端不仅有一条横线，而且差号还被盖住了。所以需要加z-index让按钮 现在最外层
image.png
让背景图网上外边距减去-5px 的距离 这样就盖住了上面白线
image.png

  1. .loginhead{
  2.     width: 100%;
  3.     margin-top: -5upx;
  4. }
  5. .icon-guanbi{
  6.     position: fixed;
  7.     top: 60upx;
  8.     left: 30upx;
  9.     font-size: 40upx;
  10.     font-weight: bold;
  11.     color: #332F0A;
  12.     z-index: 100;
  13. }

手机端看着没问题
image.png

关闭按钮事件

image.png

  1. @tap="back"

image.png

  1. methods: {
  2.             back(){
  3.                 console.log('返回上一步');
  4.             }
  5.         }

登陆的输入框

image.png
我们在修改页面有过这样的布局，所以我们直接复制类似的代码
image.png

  1. @import url('@/common/form.css');

先引入css
image.png

image.png
外层单独包裹一层body的view
image.png
body就是左右加内边距
image.png
input的 password和v-model先都是删除掉。
image.png

image.png

image.png

  1. submit(){
  2.                 console.log('提交登陆');
  3.             }

image.png
loading和按钮的状态
image.png

  1. <view class="body">
  2.             <input type="text" v-model="oldpassword" 
  3.             class="uni-input common-input" placeholder="昵称/手机号/邮箱" />
  4.             <input type="text" v-model="oldpassword" 
  5.             class="uni-input common-input" placeholder="请输入密码" />
  7.             <button class="user-set-btn"
  8.             :class="{'user-set-btn-disable':disabled}"
  9.             :loading="loading"
  10.              @tap="submit" type="primary" :disabled="disabled">登陆</button>
  11.         </view>

把这两个复制过来
image.png

  1. disabled:true,
  2. loading:false

image.png

  1. disabled:true,
  2. loading:false

验证登陆+第三方登陆

image.png
文字+向右的图标。
image.png

  1. <!-- 登陆状态切换 -->
  2.         <view class="login-status">
  3.             验证码登陆<view class="icon iconfont icon-jinru"></view>
  4.         </view>

水平方向和垂直方向都居中
image.png

  1. <view class="login-status u-f-ajc">
  2.             验证码登陆<view class="icon iconfont icon-jinru"></view>
  3.         </view>

第三方登陆
image.png

  1.     <!-- 第三方登陆 -->
  2.         <view class="other-login-title">第三方登陆</view>

水平垂直居中。
image.png

  1. <!-- 第三方登陆 -->
  2.         <view class="other-login-title u-f-ajc">第三方登陆</view>

微信微博qq登陆

在我的页面是一样的。这是单独封装的组件，我们单独拿出来。
image.png

image.png

  1. import otherLogin from '@/components/home/other-login.vue';
  3. otherLogin

image.png

  1. <other-login></other-login>

协议
image.png

image.png

  1. <!-- 协议 -->
  2.         <view class="login-rule">
  3.             注册即代表您同意《XXXX协议》
  4.         </view>

水平垂直剧集中，view单独加一个样式。
image.png

  1. <!-- 协议 -->
  2.         <view class="login-rule">
  3.             注册即代表您同意<view class="">《XXXX协议》</view>
  4.         </view>

加一个统一的内边距
image.png

image.png

image.png

image.png

  1. login-padding

image.png

优化

第三方登陆前后有两条线，颜色是灰色
image.png
这里的字体的颜色
image.png
整体页面黑色的字体
image.png

image.png
第三方登陆
image.png
验证码登陆
image.png

  1. <view class="login-rule u-f-ajc login-padding login-font-color">
  2.             注册即代表您同意<view class="login-font-color">《XXXX协议》</view>
  3.         </view>

第三方 登陆。前后都加上横线。
image.png
用伪元素来定义，在前后加上横线。父元素相对定位，子元素绝对定位。
image.png

image.png

  1. .other-login-title{
  2.     position: relative;
  3. }
  4. .other-login-title::before,.other-login-title::after{
  5.     content: '';
  6.     position: absolute;
  7.     background: #CCCCCC;
  8.     height: 1upx;
  9.     width: 100upx;
  10. }

content设置为空。
image.png

  1. .other-login-title::before,.other-login-title::after{
  2.     content: '';
  3.     position: absolute;
  4.     background: #CCCCCC;
  5.     height: 1upx;
  6.     width: 100upx;
  7. }

距离顶部有50%的距离
image.png

image.png

  1. .other-login-title::before,.other-login-title::after{
  2.     content: '';
  3.     position: absolute;
  4.     background: #CCCCCC;
  5.     height: 1upx;
  6.     width: 100upx;
  7.     top: 50%;
  8. }
  9. .other-login-title::before{
  10.     left: 25%;
  11. }
  12. .other-login-title::after{
  13.     right: 25%;
  14. }

image.png
调整整体的颜色
image.png

  1. .login-font-color{color: #BBBBBB;}

忘记密码

使用绝对定位。
image.png
密码的最外层套一个view
image.png

image.png

  1. <view class="login-input-box">
  2.                 <input type="text" v-model="oldpassword"
  3.                 class="uni-input common-input" placeholder="请输入密码" />
  4.                 <view class="forget">忘记密码</view>
  5.             </view>

首先需要设置它的父元素是相对定位
image.png

  1. .login-input-box{
  2.     position: relative;
  3. }

子元素绝对定位，高度为100%表示占满这一块。
image.png

  1. .login-input-box .forget{
  2.     position: absolute;
  3.     right: 0;
  4.     top: 0;
  5.     height: 100%;
  6. }

水平垂直居中，。
image.png

  1. <view class="forget u-f-ajc">忘记密码</view>

加个颜色测试一下
image.png
还需要加一个宽度
image.png
被盖住了。
image.png
设置登记
image.png

image.png
如果输入的太多 会被盖住
image.png

所以需要加一个内边距。单独加一个class属性。
image.png

  1. forget-input

image.png

  1. .login-input-box .forget-input{
  2.     padding-right: 150upx;
  3. }

内边距150 就是 右边 忘记密码的view的宽度。
image.png
没有再被遮挡
image.png
字体颜色改成统一的
image.png

  1. <view class="forget u-f-ajc login-font-color">忘记密码</view>

黄色的背景去掉
image.png

手机登陆的样式

image.png

image.png
原来的代码注释掉，复制一份进行修改
image.png
外层也是需要套一个view
image.png

image.png

水平垂直居中。
image.png

  1.     <view class="login-input-box">
  2.                 <view class="phone u-f-ajc">+86</view>
  3.                 <input type="text"
  4.                 class="uni-input common-input phone-input" placeholder="昵称/手机号/邮箱" />
  5.             </view>

宽度可能50就够了。
image.png

image.png

清理冗余的代码。把公共的代码提取出来。 单独的自己再去定义
image.png

image.png

image.png

image.png
定位的方向是不同的
image.png

image.png

宽度太窄了。
image.png

image.png

image.png
字体加粗一点
image.png

image.png
改成手机号。
image.png

image.png
外层再套一个view
image.png

image.png
加一个样式。验证码外头又套一层view
image.png

  1. <view class="forget u-f-ajc login-font-color yanzhengma">
  2.                     <view class="u-f-ajc">
  3.                         获取验证码
  4.                     </view>
  5.                 </view>

背景色，圆角。字体大小。
image.png
加点左右的内边距
image.png

  1. .yanzhengma view{
  2.     background: #EEEEEE;
  3.     border-radius: 10upx;
  4.     font-size: 25upx;
  5.     padding: 0 5upx;
  6. }

image.png

可以让padding再大一点，上下也大一点

这里不用padding了 改成宽度也是150
image.png
加一个水平垂直 居中
image.png
上下间距还是小点。
image.png
加一个上下 20的内边距
image.png

image.png
改成10upx
image.png

image.png

  1. .yanzhengma view{
  2.     background: #EEEEEE;
  3.     border-radius: 10upx;
  4.     font-size: 25upx;
  5.     width: 150upx;
  6.     padding: 10upx 0;
  7. }

本节代码

login.vue页面

  1. <template>
  2.     <view>
  3.         <!-- 状态栏 -->
  4.         <!-- <uni-status-bar></uni-status-bar> -->
  5.         <uni-nav-bar background-color="#FFE933" status-bar  />
  6.         <!-- 关闭按钮 -->
  7.         <view class="icon iconfont icon-guanbi" @tap="back"></view>
  8.         <!-- 引入背景图 -->
  9.         <image class="loginhead" src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>
  10.         <view class="body">
  12.         <!--     <input type="text" v-model="oldpassword" 
  13.             class="uni-input common-input" placeholder="昵称/手机号/邮箱" /> -->
  15.             <view class="login-input-box">
  16.                 <view class="phone u-f-ajc">+86</view>
  17.                 <input type="text"
  18.                 class="uni-input common-input phone-input" placeholder="手机号" />
  19.             </view>
  21.             <view class="login-input-box">
  22.                 <input type="text"
  23.                 class="uni-input common-input forget-input" placeholder="验证码" />
  24.                 <view class="forget u-f-ajc login-font-color yanzhengma">
  25.                     <view class="u-f-ajc">
  26.                         获取验证码
  27.                     </view>
  28.                 </view>
  29.             </view>
  32.             <button class="user-set-btn"
  33.             :class="{'user-set-btn-disable':disabled}"
  34.             :loading="loading"
  35.              @tap="submit" type="primary" :disabled="disabled">登陆</button>
  36.         </view>
  37.         <!-- 登陆状态切换 -->
  38.         <view class="login-status u-f-ajc login-padding">
  39.             验证码登陆<view class="icon iconfont icon-jinru"></view>
  40.         </view>
  41.         <!-- 第三方登陆 -->
  42.         <view class="other-login-title u-f-ajc login-padding">第三方登陆</view>
  44.         <other-login></other-login>
  45.         <!-- 协议 -->
  46.         <view class="login-rule u-f-ajc login-padding login-font-color">
  47.             注册即代表您同意<view class="login-font-color">《XXXX协议》</view>
  48.         </view>
  49.     </view>
  50. </template>
  52. <script>
  53.     import otherLogin from '@/components/home/other-login.vue';
  54.     export default {
  55.         components:{
  56.             otherLogin
  57.         },
  58.         data() {
  59.             return {
  60.                 disabled:true,
  61.                 loading:false
  62.             }
  63.         },
  64.         methods: {
  65.             back(){
  66.                 console.log('返回上一步');
  67.             },
  68.             submit(){
  69.                 console.log('提交登陆');
  70.             }
  71.         }
  72.     }
  73. </script>
  75. <style>
  76.     @import url('@/common/form.css');
  77.     .login-padding{
  78.         padding: 20upx;
  79.     }
  80.     .login-font-color{color: #BBBBBB;}
  81. .loginhead{
  82.     width: 100%;
  83.     margin-top: -5upx;
  84. }
  85. .icon-guanbi{
  86.     position: fixed;
  87.     top: 60upx;
  88.     left: 30upx;
  89.     font-size: 40upx;
  90.     font-weight: bold;
  91.     color: #332F0A;
  92.     z-index: 100;
  93. }
  94. .other-login-title{
  95.     position: relative;
  96. }
  97. .other-login-title::before,.other-login-title::after{
  98.     content: '';
  99.     position: absolute;
  100.     background: #CCCCCC;
  101.     height: 1upx;
  102.     width: 100upx;
  103.     top: 50%;
  104. }
  105. .other-login-title::before{
  106.     left: 25%;
  107. }
  108. .other-login-title::after{
  109.     right: 25%;
  110. }
  111. .login-input-box{
  112.     position: relative;
  113. }
  114. .login-input-box .forget-input{
  115.     padding-right: 150upx;
  116. }
  117. .login-input-box .forget{
  118.     position: absolute;
  119.     right: 0;
  120.     top: 0;
  121.     height: 100%;
  122.     width: 150upx;
  123.     /* background: yellow; */
  124.     z-index: 100;
  125. }
  126. .login-input-box .phone{
  127.     position: absolute;
  128.     left: 0;
  129.     top: 0;
  130.     height: 100%;
  131.     width: 100upx;
  132.     z-index: 100;
  133.     font-weight: bold;
  134. }
  135. .login-input-box .phone-input{
  136.     padding-left: 100upx;
  137. }
  138. .yanzhengma view{
  139.     background: #EEEEEE;
  140.     border-radius: 10upx;
  141.     font-size: 25upx;
  142.     width: 150upx;
  143.     padding: 10upx 0;
  144. }
  145. </style>

结束