fix: 记住密码修改样式。
This commit is contained in:
@@ -25,7 +25,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 密码输入 -->
|
<!-- 密码输入 -->
|
||||||
<view class="input-item">
|
<view class="input-item password-item">
|
||||||
<uni-icons type="locked" size="20" color="#E8841A"></uni-icons>
|
<uni-icons type="locked" size="20" color="#E8841A"></uni-icons>
|
||||||
<input
|
<input
|
||||||
v-model="loginForm.password"
|
v-model="loginForm.password"
|
||||||
@@ -36,28 +36,25 @@
|
|||||||
placeholder-class="placeholder"
|
placeholder-class="placeholder"
|
||||||
maxlength="20"
|
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>
|
</view>
|
||||||
|
|
||||||
<!-- 用户协议(H5 端记住密码在同一行前面) -->
|
<!-- 用户协议 -->
|
||||||
<view class="agreement-box">
|
<view class="agreement-box">
|
||||||
<view class="agreement-line">
|
<view class="agreement-row" @click="agreeChange">
|
||||||
<!-- H5 端记住密码(放前面) -->
|
<view :class="['checkbox-small', agree ? 'checked' : '']">
|
||||||
<view v-if="isH5" class="agreement-row remember-part" @click="rememberChange">
|
<uni-icons v-if="agree" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
<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>
|
</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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -328,6 +325,52 @@ page {
|
|||||||
.placeholder {
|
.placeholder {
|
||||||
color: #c0c4cc;
|
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 {
|
.agreement-box {
|
||||||
@@ -335,29 +378,12 @@ page {
|
|||||||
margin-top: 24rpx;
|
margin-top: 24rpx;
|
||||||
padding: 0 4rpx;
|
padding: 0 4rpx;
|
||||||
|
|
||||||
.agreement-line {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agreement-row {
|
.agreement-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
|
||||||
&.remember-part {
|
|
||||||
margin-right: 32rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.agree-part {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-small {
|
.checkbox-small {
|
||||||
width: 28rpx;
|
width: 28rpx;
|
||||||
height: 28rpx;
|
height: 28rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user