<!--login.wxml-->
<view class="login-container">
<view class="main-container">
<view class="account-password-container">
<image src="/images/account.png"></image>
<input placeholder="请输入注册邮箱" bindinput="accountInput" />
</view>
<view class="account-password-container">
<image src="/images/password.png"></image>
<input placeholder="请输入密码" password='{{true}}' bindinput="passwordInput" />
</view>
</view>
<button class="login-button" catchtap="login">登录</button>
</view>
|
/* login.wxss */
page{
height: 100%;
width: 100%;
}
.login-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #eee;
}
.main-container{
display: flex;
flex-direction: column;
margin: 50rpx 20rpx 30rpx 20rpx;
background-color: #fff;
}
.account-password-container {
display: flex;
flex-direction: row;
width: 100%;
height: 100rpx;
align-items: center;
border-bottom: 1rpx solid #eee;
}
image {
height: 48rpx;
width: 48rpx;
}
input {
margin-left: 10rpx;
font-size: 32rpx;
}
.login-button {
height: 100rpx;
background-color: #fb7c58;
font-size: 34rpx;
margin: 20rpx 50rpx;
color: #fff;
text-align: center;
}
|
// mine.js
Page({
/**
* 页面的初始数据
*/
data: {
datas: [
[
{ "name": "我的会员" },
{ "name": "我的收藏" },
{ "name": "推送记录" },
{ "name": "最新活动" }
],
[
{ "name": "版本更新" },
{ "name": "清空缓存" },
{ "name": "夜间模式" }
],
[
{ "name": "使用帮助" },
{ "name": "关于我们" }
]
]
},
login: function (event) {
console.log(event);
wx.navigateTo({
url: 'login/login',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
模板简介：该模板名称为【微信小程序红色风格注册邮箱登录页样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
