Skip to content

蒋秀川 / miniProject

Go to a project
Commit 8ecec743 by 李君
Options

密码增加显示隐藏

1 parent ffc98fe3
Inline Side-by-side
Showing 5 changed files with 114 additions and 86 deletions
miniProject/images/login/eye.svg 0 → 100644
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<path id="Vector" d="M2.5 1.5L17.5 16.5" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M8.82 7.82251C8.50727 8.13502 8.33149 8.55897 8.33133 9.00109C8.33117 9.4432 8.50665 9.86728 8.81917 10.18C9.13168 10.4927 9.55563 10.6685 9.99774 10.6687C10.4399 10.6688 10.8639 10.4934 11.1767 10.1808" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M7.8025 3.47084C8.51701 3.26644 9.25683 3.16404 10 3.16668C13.3333 3.16668 16.1108 5.11084 18.3333 9.00001C17.685 10.1342 16.99 11.1033 16.2475 11.9067M14.4642 13.4575C13.105 14.3742 11.6183 14.8333 10 14.8333C6.66666 14.8333 3.88916 12.8892 1.66666 9.00001C2.8075 7.00418 4.09416 5.52084 5.52666 4.54918" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
miniProject/images/login/eyeOpen.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703125499432" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2245" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="2246" fill="#9CA3AF"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="2247" fill="#9CA3AF"></path></svg>
\ No newline at end of file \ No newline at end of file
miniProject/pages/login/index.js
...@@ -27,7 +27,8 @@ Page({ ...@@ -27,7 +27,8 @@ Page({
accountId: '', accountId: '',
modalShow: false, modalShow: false,
wechat: false, wechat: false,
pageShow: false pageShow: false,
pwdShow:true
}, },
/** /**
...@@ -66,7 +67,12 @@ Page({ ...@@ -66,7 +67,12 @@ Page({
}) })
} }
}, },
changeInputType:function(val){
console.log(this.data.pwdShow);
this.setData({
pwdShow: !this.data.pwdShow,
})
},
// 登陆 // 登陆
login: function () { login: function () {
const { name, password } = this.data const { name, password } = this.data
......
miniProject/pages/login/index.wxml
...@@ -20,13 +20,15 @@ ...@@ -20,13 +20,15 @@
<view class="login-form"> <view class="login-form">
<view class="login-label">用户名</view> <view class="login-label">用户名</view>
<view class="inputBox userBox"> <view class="inputBox userBox">
<image src="../../images/login/user.png" mode=""></image> <image class="image" src="../../images/login/user.png" mode=""></image>
<input class="userInput" placeholder="请输入用户名" bindinput="changeUser" value="{{ name }}" cursor-spacing="{{40}}" /> <input class="userInput" placeholder="请输入用户名" bindinput="changeUser" value="{{ name }}" cursor-spacing="{{40}}" />
</view> </view>
<view class="login-label">密码</view> <view class="login-label">密码</view>
<view class="inputBox pwdBox"> <view class="inputBox pwdBox">
<image src="../../images/login/pwd.png" mode=""></image> <image class="image" src="../../images/login/pwd.png" mode=""></image>
<input class="userInput" placeholder="请输入密码" password bindinput="changePassword" value="{{ password }}" cursor-spacing="{{40}}" /> <input class="userInput" placeholder="请输入密码" password bindinput="changePassword" value="{{ password }}" password = "{{pwdShow}}" cursor-spacing="{{40}}" />
<image wx:if="{{!pwdShow}}" class="eye" bind:tap="changeInputType" src="../../images/login/eyeOpen.svg" mode=""></image>
<image wx:else class="eye" bind:tap="changeInputType" src="../../images/login/eye.svg" mode=""></image>
</view> </view>
<view class="login-btn"> <view class="login-btn">
<!-- <view style="opacity:0;pointer-events: none;" class="login-btn-text" bindtap="changeBaseUrl">切换地址</view> --> <!-- <view style="opacity:0;pointer-events: none;" class="login-btn-text" bindtap="changeBaseUrl">切换地址</view> -->
......
miniProject/pages/login/index.wxss
/* pages/login/index.wxss */ /* pages/login/index.wxss */
.login-content { .login-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
} }
.login-form { .login-form {
width: calc(100% - 84rpx); width: calc(100% - 84rpx);
position: absolute; position: absolute;
left: 42rpx; left: 42rpx;
top: 60%; top: 60%;
} }
.login-form .title { .login-form .title {
font-size: 48rpx; font-size: 48rpx;
font-family: MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI;
color: #4A4A4A; color: #4A4A4A;
letter-spacing: 2rpx; letter-spacing: 2rpx;
margin-top: 85rpx; margin-top: 85rpx;
text-align: center; text-align: center;
margin-bottom: 120rpx; margin-bottom: 120rpx;
} }
.bg { .bg {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.bg .loginBg { .bg .loginBg {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.bg .logo { .bg .logo {
position: absolute; position: absolute;
left: 0; left: 0;
top: 240rpx; top: 240rpx;
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.bg .logo image { .bg .logo image {
width: 152rpx; width: 152rpx;
height: 152rpx; height: 152rpx;
} }
.bg .logo .logoText { .bg .logo .logoText {
margin-top: 2rpx; margin-top: 2rpx;
font-size: 32rpx; font-size: 32rpx;
color: #fff; color: #fff;
} }
.inputBox { .inputBox {
width: 100%; width: 100%;
border-bottom: 2rpx solid rgba(155, 155, 155, 0.34); border-bottom: 2rpx solid rgba(155, 155, 155, 0.34);
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
.userInput{ .userInput {
position: relative; position: relative;
display: inline-block; display: inline-block;
font-size: 28rpx; font-size: 28rpx;
padding: 9rpx 0 0 0; padding: 9rpx 0 0 50rpx;
width: calc(100% - 54rpx); width: calc(100% - 54rpx);
} }
.userBox{ .userBox {
margin-bottom: 43rpx; margin-bottom: 43rpx;
} }
.userBox image { .userBox image {
height:32.6rpx ; height: 32.6rpx;
width: 25.5rpx; width: 25.5rpx;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 16.3rpx;
right: 0;
} }
.pwdBox{ .userBox .image {
margin-bottom: 74rpx; top: 16.3rpx;
left: 0;
}
.pwdBox {
margin-bottom: 74rpx;
} }
.pwdBox image { .pwdBox image {
height:32.6rpx; height: 32.6rpx;
width: 32.6rpx; width: 32.6rpx;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 16.3rpx; }
right: 0;
.pwdBox .image {
top: 16.3rpx;
left: 0;
}
.pwdBox .eye {
right: 20rpx;
top: 16.3rpx;
z-index: 99;
} }
.login-btn { .login-btn {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.login-btn .login-btn-text { .login-btn .login-btn-text {
font-size: 28rpx; font-size: 28rpx;
color: #3BB7FF; color: #3BB7FF;
} }
.login-btn .btn { .login-btn .btn {
width: 100%; width: 100%;
height: 84rpx; height: 84rpx;
background:rgba(0,105,255,1); background: rgba(0, 105, 255, 1);
border-radius: 16rpx; border-radius: 16rpx;
font-size: 36rpx; font-size: 36rpx;
color:rgba(255,255,255,1); color: rgba(255, 255, 255, 1);
letter-spacing: 25.36rpx; letter-spacing: 25.36rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
padding-left: 64rpx !important; padding-left: 64rpx !important;
} }
.login-label { .login-label {
font-size: 28rpx; font-size: 28rpx;
color: #8181A5; color: #8181A5;
line-height: 42rpx; line-height: 42rpx;
} }
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!