qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 记住密码修改样式。

Browse Source
This commit is contained in:
tianyongbao
2026-06-25 22:19:38 +08:00
parent cdba9f6569
commit b443454bab
1 changed files with 62 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/login.vue
View File

@@ -25,7 +25,7 @@
</view>
<!-- 密码输入 -->
<view class="input-item">
<view class="input-item password-item">
<uni-icons type="locked" size="20" color="#E8841A"></uni-icons>
<input
v-model="loginForm.password"
@@ -36,28 +36,25 @@
placeholder-class="placeholder"
maxlength="20"
/>
<!-- H5 端记住密码开关（在密码框右侧） -->
<view v-if="isH5" class="pwd-remember" @click.stop="rememberChange">
<text class="pwd-remember-text">记住密码</text>
<view :class="['mini-switch', rememberPwd ? 'on' : '']">
<view class="mini-switch-dot"></view>
</view>
</view>
</view>
<!-- 用户协议（H5 端记住密码在同一行前面） -->
<!-- 用户协议 -->
<view class="agreement-box">
<view class="agreement-line">
<!-- H5 端记住密码（放前面） -->
<view v-if="isH5" class="agreement-row remember-part" @click="rememberChange">
<view :class="['checkbox-small', rememberPwd ? 'checked' : '']">
<uni-icons v-if="rememberPwd" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
</view>
<text class="agreement-text">记住密码</text>
</view>
<!-- 同意协议 -->
<view class="agreement-row agree-part" @click="agreeChange">
<view :class="['checkbox-small', agree ? 'checked' : '']">
<uni-icons v-if="agree" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
</view>
<text class="agreement-text">已阅读并同意</text>
<text class="link-text" @click.stop="handleUserAgrement">《用户协议》</text>
<text class="agreement-text">和</text>
<text class="link-text" @click.stop="handlePrivacy">《隐私协议》</text>
<view class="agreement-row" @click="agreeChange">
<view :class="['checkbox-small', agree ? 'checked' : '']">
<uni-icons v-if="agree" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
</view>
<text class="agreement-text">已阅读并同意</text>
<text class="link-text" @click.stop="handleUserAgrement">《用户协议》</text>
<text class="agreement-text">和</text>
<text class="link-text" @click.stop="handlePrivacy">《隐私协议》</text>
</view>
</view>
@@ -328,6 +325,52 @@ page {
.placeholder {
color: #c0c4cc;
}
/* H5 端记住密码开关 */
.pwd-remember {
display: flex;
align-items: center;
margin-left: 16rpx;
flex-shrink: 0;
padding: 6rpx 4rpx;
.pwd-remember-text {
font-size: 22rpx;
color: #909399;
margin-right: 10rpx;
line-height: 1;
}
/* 迷你开关（关闭：灰色） */
.mini-switch {
width: 56rpx;
height: 30rpx;
border-radius: 15rpx;
background: #dcdfe6;
position: relative;
transition: background 0.25s ease;
&.on {
background: #E8841A;
}
.mini-switch-dot {
position: absolute;
top: 3rpx;
left: 3rpx;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background: #ffffff;
transition: transform 0.25s ease;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}
&.on .mini-switch-dot {
transform: translateX(26rpx);
}
}
}
}
.agreement-box {
@@ -335,29 +378,12 @@ page {
margin-top: 24rpx;
padding: 0 4rpx;
.agreement-line {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
line-height: 1.6;
}
.agreement-row {
display: flex;
align-items: center;
flex-wrap: wrap;
line-height: 1.6;
&.remember-part {
margin-right: 32rpx;
flex-shrink: 0;
}
&.agree-part {
flex: 1;
min-width: 0;
}
.checkbox-small {
width: 28rpx;
height: 28rpx;