首页天道酬勤html精美登录界面源码,小程序源代码

html精美登录界面源码,小程序源代码

张世龙 05-03 20:55 99次浏览

微信小程序登陆界面login.wxml :

view class='container '

view class='login-icon '

imageclass=' log in-img ' src=' ./images/logi nlog.jpg '/image

/view

view class='login-from '! -帐户-

view class='inputView '

imageclass=' name image ' src=' ./images/name.png '/image

label class='loginLab '帐户/label

input class=' input text ' placeholder='请输入帐户'

bindinput='phoneInput' /

/view

view class='line'/view! -密码-

view class='inputView '

imageclass=' key image ' src=' ./images/key.png '/image

label class='loginLab '密码/label

请输入input class=' input text ' password=' true ' placeholder='密集

代码' bindinput='passwordInput' /

/view! -按钮-

view class='loginBtnView '

button class=' log in BTN ' type=' primary ' size=' { primary size } }

loading={ { loading } } ' plain={ { plain } } ' disabled={ { disabled } }

bindtap='login '登录/button

/view

/view

/viewlogin.wxss :

page{

height: 100%;

} .container {

height: 100%;

显示: Flex;

flex-direction: column; padding: 0;

盒尺寸: border-box;

背景色: # f2f2f 2

()注册图bbdbwb/

. login-icon{

flex: none;

}

. login-img{

width: 750rpx;

()表单中平静的饼干/

. login-from {

margin-top: 20px;

flex :自动;

height:100%;

} .inputView {

背景色: # fff;

line-height: 44px;

}

cxdcjl/

. nameImage, keyImage {

玛姬- left : 22px;

width: 14px;

height: 14px

} .loginLab {

margin: 15px 15px 15px 10px;

color: #545454;

font-size: 14px

}

. inputText {

flex :区块;

浮点:轻型;

文本对齐: right;

margin-right: 22px;

margin-top: 11px;

color: #cccccc;

font-size: 14px } .line {

width: 100%;

height: 1px;

背景色: # cccccc;

margin-top: 1px;

}

axdsg/

. loginBtnView {

width: 100%;

height :自动;

背景色: # f2f2f 2;

margin-top: 0px;

玛姬- bottom : 0px;

padding-bottom: 0px;

} .loginBtn {

width: 80%;

margin-top: 35px;

}login.js :

page({ ()

数据: {

phone: ',

password: ' '

、//获取输入帐户

phone input :功能(e ) {

this.setData({ (

phone:e.detail.value

() )

、//获取输入密码

密码输入:功能(e ) {

this.setData({ (

password:e.detail.value

()、

//登录

login: function () {

if (this.data.phone.length==0||this.data.password.length==

0 ) {

wx.showToast({ (

title: '用户名和密码不能为空',

icon: 'loading ',

duration: 2000

() )

}else {

//此处修改为跳转页面

wx.showToast({ (

title:“登录成功”、

icon: 'success ',

duration: 2000

() )

}

}

() )

只有这个登录页面,剩下的页面可以点击我的主页下载

key.png

loginLog.jpg

name.png

html电子邮件链接格式,邮箱html代码