造轮子系列复制粘贴，不多说

<view class=""><view class="logo h400 flex jc-ai-center"><image src="../../assets/images/yh.png"></image></view><view class="ipt-wrap"><view class="flex jc-center"><view class="p-lr20  _w100 {{ isIptactive == 1 ? 'iptactive' : ' ' }}" ><view class="ipt-item flex h70 _w100 jc-sb ai-center"><text class="iconfont font22 icon-geren"></text><input type="text" data-ipt="1" placeholder="请输入手机号码" class="ipt flex1 {{isIptborder == 1 ? 'iptnoneborder' : 'iptborder'}}" maxlength="11" bindfocus="selectFoucs" bindinput="IptPhoneValue" bindblur="selectBlur"></input></view></view></view><view class="mt50 flex jc-center"><view class="p-lr20  _w100 {{ isIptactive == 3 ? 'iptactive' : ' ' }}" ><view class="ipt-item flex h70 _w100 jc-sb ai-center"><text class="iconfont font20 icon-mima"></text><input type="password" data-ipt="3" placeholder="请输入密码" class="ipt flex1 {{isIptborder == 3 ? 'iptnoneborder' : 'iptborder'}}" bindfocus="selectFoucs" maxlength="16" bindinput="IptPassValue" bindblur="selectBlur"></input></view></view></view></view><view class="r-wrap"><view class="loginbtn font16 _w100 mt20 color-fff" bindtap="loginGO">登录</view><view class="mt10 flex jc-center"><text class="color-767676">没有账号？</text><text class="color-279efd" data-url="../register/register" bindtap="goRedirect"> 快速注册 </text></view></view><view class="agreement flex ai-center f-column"><view class="mt50 color-767676">说明：注册、登录代表您阅读并已同意</view><view class="mt10 color-279efd" data-url="../agreement/agreement" bindtap="goNavigate">天图极客网用户协议</view>          </view>
</view>

如果不知道icon.css的可以看我的“小程序造轮子”小图标篇 

@import "../../assets/iconfont/icon.wxss";.logo>image{width: 250rpx;height: 208rpx;
}
.iptactive{box-shadow: 0 0rpx 10rpx #ccc;border-radius: 8rpx;
}
.iptnoneborder{border-bottom:1px solid transparent;
}
.iptborder{border-bottom:1px solid #e7f2ff;
}
.ipt-item{position: relative;
}
.ipt{margin-left: 20rpx;height: 60rpx;padding-top: 5rpx;padding-bottom: 5rpx;padding-left: 10rpx;
}
.loginbtn{text-align: center;height: 80rpx;line-height: 80rpx;margin: 80rpx auto 20rpx;border-radius: 10rpx;background: linear-gradient(to right, #66ded0, #229dfe);
}
.ipt-wrap, .r-wrap, .agreement{padding: 0 100rpx;
}

const common = require('../../utils/common');
const api = require('../../utils/api');
const app = getApp();Page({data: {isIptactive: 0,isIptborder: 0,phoneNum:0,userPass:0,// code:''},selectFoucs: function (e) {let ipt = e.target.dataset.ipt;this.setData({ isIptactive: ipt, isIptborder: ipt });},selectBlur: function () {this.setData({ isIptactive: 0, isIptborder: 0 });},IptPhoneValue: function (e) {this.setData({ phoneNum: e.detail.value });},IptPassValue: function (e) {this.setData({ userPass: e.detail.value });},goNavigate: function (e) {common.NAVIGATE(e.target.dataset.url);},goRedirect: function (e){common.REDIRECT(e.target.dataset.url);},  onLoad(){},loginGO: function () {var that = thisvar phoneNum = that.data.phoneNumvar userPass = that.data.userPassvar url = api.SINGLOGIN.singLoginconsole.log("userLogin:" + url)if (!common.ISPHONE(phoneNum)) {common.SHOWTIPS('请输入11位有效手机号码', 'none'); return;} else if (!common.ISPASS(userPass)) {common.SHOWTIPS('密码必须大于6位且小于16位，由数字和字母组合构成', 'none');      return;} else {common.LOADTIPS('正在登录', function () {wx.login({success(res) {that.setData({code: res.code})wx.request({url: url,method: 'post',data: {code:that.data.code,loginName: that.data.phoneNum,password: that.data.userPass,deviceType: 0,userType: 0,},success(res) {console.log(res.data)wx.hideLoading();if (res.data.head.statusCode == "USR_003") {common.MODALTIPS('该手机号码未注册', '是否前往注册', function (res) {if (res.confirm) {common.REDIRECT('../register/register');} else if (res.cancel) {return;}});} else if (res.data.head.status == 1) {common.SHOWTIPS('登录成功', 'success');app.globalData.loginName = res.data.data.loginName;app.globalData.imageUrl = res.data.data.imageUrl;app.globalData.token = res.data.data.token;app.globalData.inviteCode = res.data.data.inviteCode;app.globalData.phone = res.data.data.phone;app.globalData.userType = res.data.data.userType;app.globalData.isLogin = 1;app.globalData.loginWay = 'app';common.SETSTORAGE('userID', res.data.data.token);setTimeout(function () {common.SWITCHTAB('../personal/personal')}, 1500);} else if (res.data.head.statusCode == "USR_005") {common.SHOWTIPS(res.data.head.message, 'none');} else {common.SHOWTIPS('未知错误，请重试', 'none');}},})}})})}},onShareAppMessage: function () {common.share()}
})