antissoft / lvqianmeiye_ERP

<template>
	<view class="lp-page">

		<!-- 顶部装饰圆 -->
		<view class="lp-deco lp-deco--1"></view>
		<view class="lp-deco lp-deco--2"></view>
		<view class="lp-deco lp-deco--3"></view>

		<!-- 主卡片 -->
		<view class="lp-card">

			<!-- Logo + 品牌名 -->
			<view class="lp-brand">
				<view class="lp-logo-wrap">
					<image src="../../static/login/logo.jpg" class="lp-logo" mode="widthFix"></image>
				</view>
				<text class="lp-brand-name">绿纤协同平台</text>
				<text class="lp-brand-sub">专业美业管理系统</text>
			</view>

			<!-- 表单 -->
			<view class="lp-form">

				<!-- 用户名 -->
				<view class="lp-field" :class="{ 'is-focus': focusUser }">
					<view class="lp-field-icon">
						<u-icon name="account" size="18" color="#43a047"></u-icon>
					</view>
					<input
						class="lp-input"
						type="text"
						v-model="formData.username"
						placeholder="请输入用户名"
						placeholder-class="lp-placeholder"
						@focus="focusUser = true"
						@blur="focusUser = false"
					/>
				</view>

				<!-- 密码 -->
				<view class="lp-field" :class="{ 'is-focus': focusPwd }">
					<view class="lp-field-icon">
						<u-icon name="lock" size="18" color="#43a047"></u-icon>
					</view>
					<input
						class="lp-input"
						type="text"
						:password="!showPassword"
						v-model="formData.password"
						placeholder="请输入密码"
						placeholder-class="lp-placeholder"
						@focus="focusPwd = true"
						@blur="focusPwd = false"
					/>
					<view class="lp-field-suffix" @tap="togglePassword">
						<u-icon :name="showPassword ? 'eye-off' : 'eye'" size="19" color="#43a047"></u-icon>
					</view>
				</view>

			</view>

			<!-- 账号密码登录按钮 -->
			<view
				class="lp-btn lp-btn--primary"
				:class="{ 'is-loading': loading }"
				@tap="handleLogin"
			>
				<text>{{ loading ? '登录中...' : '登 录' }}</text>
			</view>

			<!-- 分隔线（仅微信小程序显示） -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="lp-divider">
				<view class="lp-divider-line"></view>
				<text class="lp-divider-text">其他登录方式</text>
				<view class="lp-divider-line"></view>
			</view>

			<!-- 微信登录按钮 -->
			<view
				class="lp-btn lp-btn--wechat"
				:class="{ 'is-loading': wechatLoading }"
				@tap="handleWechatLogin"
			>
				<!-- 微信官方 SVG 图标 -->
				<view class="lp-wechat-ico">
					<svg width="22" height="22" viewBox="0 0 24 24" fill="#ffffff">
						<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-3.898-6.348-7.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-7.062-6.122zm-3.453 3.31c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/>
					</svg>
				</view>
				<text>{{ wechatLoading ? '微信登录中...' : '微信一键登录' }}</text>
			</view>
			<!-- #endif -->

		</view>

		<!-- 隐私政策 -->
		<view class="lp-privacy">
			<u-checkbox-group :value="privacyValue" shape="circle" @input="onPrivacyValueInput" @change="onPrivacyValueInput">
				<u-checkbox active-color="#43a047" name="tongyi" :label-disabled="true"></u-checkbox>
			</u-checkbox-group>
			<text class="lp-privacy-txt">我已阅读并同意</text>
			<text class="lp-privacy-link" @tap.stop="goyinsi">《隐私政策》</text>
		</view>

		<!-- 未勾选隐私时：页面内弹层（不依赖 uni.showModal，避免小程序端不弹出） -->
		<view v-if="showPrivacyGateDialog" class="lp-privacy-mask" @tap="onPrivacyGateCancel">
			<view class="lp-privacy-dialog" @tap.stop>
				<text class="lp-privacy-dialog-title">隐私政策</text>
				<text class="lp-privacy-dialog-content">登录需阅读并同意《隐私政策》，是否同意并继续？</text>
				<view class="lp-privacy-dialog-actions">
					<view class="lp-privacy-dialog-btn lp-privacy-dialog-btn--cancel" @tap="onPrivacyGateCancel">取消</view>
					<view class="lp-privacy-dialog-btn lp-privacy-dialog-btn--ok" @tap="onPrivacyGateConfirm">同意并继续</view>
				</view>
			</view>
		</view>

		<!-- 初始密码强制修改弹层：检测到使用 123456 登录，必须修改后才能进入（不可取消/关闭） -->
		<view v-if="showForcePwdDialog" class="lp-force-mask">
			<view class="lp-force-dialog" @tap.stop>
				<text class="lp-force-title">请修改登录密码</text>
				<text class="lp-force-tip">检测到当前为初始密码或纯数字密码，为保障账号安全需修改。新密码需为 6-20 位，且同时包含英文字母和数字。</text>
				<view class="lp-force-field">
					<input
						class="lp-force-input"
						:password="!forceShowPwd"
						type="text"
						v-model="forcePwd"
						placeholder="请输入新密码"
						placeholder-class="lp-placeholder"
						maxlength="20"
					/>
					<view class="lp-force-eye" @tap="toggleForcePwd">
						<u-icon :name="forceShowPwd ? 'eye-off' : 'eye'" size="19" color="#43a047"></u-icon>
					</view>
				</view>
				<view class="lp-force-field">
					<input
						class="lp-force-input"
						:password="!forceShowPwd"
						type="text"
						v-model="forcePwd2"
						placeholder="请再次输入新密码"
						placeholder-class="lp-placeholder"
						maxlength="20"
					/>
				</view>
				<view
					class="lp-btn lp-btn--primary lp-force-submit"
					:class="{ 'is-loading': forceSubmitting }"
					@tap="submitForcePassword"
				>
					<text>{{ forceSubmitting ? '提交中...' : '确认修改' }}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import md5 from '@/service/md5.js'
import auth from '@/common/auth.js'
import { loadItemCategoryMap } from '@/utils/item-category.js'
import { loadWatermarkSwitch } from '@/utils/watermark.js'
import { loadPrivacyMobileMask } from '@/utils/mobile-mask.js'
import { loadCommissionTierHelpSwitch } from '@/utils/commission-tier-help-switch.js'
import oauthApi from '@/apis/modules/oauth.js'
export default {
	data() {
		return {
			/** 选中的 name 列表，与 u-checkbox-group 同步 */
			privacyValue: [],
			/** 是否已同意隐私（登录校验只看此字段，避免组件 v-model 与真实勾选不一致） */
			privacyAgreed: false,
			showPrivacyGateDialog: false,
			/** 弹窗关闭后要执行的登录：account | wechat */
			pendingLogin: null,
			loading: false,
			wechatLoading: false,
			showPassword: false,
			focusUser: false,
			focusPwd: false,
			formData: {
				username: '',
				password: ''
			},
			/** 初始密码强制修改弹层 */
			showForcePwdDialog: false,
			forcePwd: '',
			forcePwd2: '',
			forceShowPwd: false,
			forceSubmitting: false,
			forcePwdUserId: '',
			/** 已登录自动进首页，避免重复 reLaunch */
			autoEntering: false
		}
	},
	onLoad() {
		this.tryAutoEnterHome()
	},
	onShow() {
		this.tryAutoEnterHome()
	},
	methods: {
		tryAutoEnterHome() {
			if (this.autoEntering) return
			if (!auth.getToken()) return
			this.autoEntering = true
			uni.reLaunch({
				url: '/pages/home/home',
				complete: () => {
					this.autoEntering = false
				}
			})
		},
		clearRememberedCredentials() {
			uni.removeStorageSync('rememberPassword')
			uni.removeStorageSync('rememberedUsername')
			uni.removeStorageSync('rememberedPassword')
		},
		goyinsi() {
			// 走小程序原生页，避免 web-view 业务域名未配置导致点击“无效”
			uni.navigateTo({
				url: '/pages/privacy-policy/privacy-policy',
				fail: (err) => {
					console.error('打开隐私政策失败', err)
					uni.showToast({
						title: '暂时无法打开隐私政策',
						icon: 'none'
					})
				}
			})
		},
		onPrivacyValueInput(val) {
			const arr = Array.isArray(val) ? val : []
			this.privacyValue = arr
			this.privacyAgreed = arr.indexOf('tongyi') !== -1
		},
		onPrivacyGateConfirm() {
			this.privacyAgreed = true
			this.privacyValue = ['tongyi']
			this.showPrivacyGateDialog = false
			const kind = this.pendingLogin
			this.pendingLogin = null
			this.$nextTick(() => {
				if (kind === 'account') this.runAccountLogin()
				else if (kind === 'wechat') this.runWechatLogin()
			})
		},
		onPrivacyGateCancel() {
			this.showPrivacyGateDialog = false
			this.pendingLogin = null
		},
		togglePassword() {
			this.showPassword = !this.showPassword
		},
		validateCredentials() {
			if (!this.formData.username.trim()) {
				uni.showToast({ title: '请输入用户名', icon: 'none' })
				return false
			}
			if (!this.formData.password.trim()) {
				uni.showToast({ title: '请输入密码', icon: 'none' })
				return false
			}
			return true
		},
		async getuser() {
			const res = await this.API.getCurrentUser()
			if (res && res.code === 200) {
				uni.setStorageSync('userInfo', res.data.userInfo)
				return res.data.userInfo
			}
			return null
		},
		handleLogin() {
			if (this.loading) return
			if (!this.privacyAgreed) {
				this.pendingLogin = 'account'
				this.showPrivacyGateDialog = true
				return
			}
			this.runAccountLogin()
		},
		async runAccountLogin() {
			if (this.loading) return
			if (!this.privacyAgreed) return
			if (!this.validateCredentials()) return
			this.loading = true
			try {
				const password = md5.hex_md5(this.formData.password)
				const res = await this.API.AppLogin({
					account: this.formData.username,
					password: password
				})
				if (res.code === 200 || res.success) {
					const { token } = res.data
					auth.setToken(token)
					loadItemCategoryMap()
					loadWatermarkSwitch(true)
					loadPrivacyMobileMask(true)
					loadCommissionTierHelpSwitch(true)
					this.clearRememberedCredentials()
					const userInfo = await this.getuser()
					await this.tryBindWechat()
					uni.$emit && uni.$emit('watermark-user-change')
					// 检测到使用初始密码 123456 登录，强制修改密码后才能进入
					if (this.isInitialPassword(this.formData.password)) {
						this.forcePwdUserId = (userInfo && userInfo.userId) || (uni.getStorageSync('userInfo') || {}).userId || ''
						this.forcePwd = ''
						this.forcePwd2 = ''
						this.forceShowPwd = false
						this.showForcePwdDialog = true
						return
					}
					uni.showToast({ title: '登录成功', icon: 'success' })
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/home/home' })
					}, 1500)
				} else {
					uni.showToast({ title: res.msg || '登录失败，请重试', icon: 'none' })
				}
			} catch (error) {
				uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		handleWechatLogin() {
			if (this.wechatLoading) return
			if (!this.privacyAgreed) {
				this.pendingLogin = 'wechat'
				this.showPrivacyGateDialog = true
				return
			}
			this.runWechatLogin()
		},
		async runWechatLogin() {
			if (this.wechatLoading) return
			if (!this.privacyAgreed) return
			this.wechatLoading = true
			try {
				const code = await this.getWechatCode()
				const res = await this.API.WechatLogin({ code })
				if (res.code === 200 || res.success) {
					const { token } = res.data
					auth.setToken(token)
					loadItemCategoryMap()
					loadWatermarkSwitch(true)
					loadPrivacyMobileMask(true)
					loadCommissionTierHelpSwitch(true)
					await this.getuser()
					uni.$emit && uni.$emit('watermark-user-change')
					uni.showToast({ title: '登录成功', icon: 'success' })
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/home/home' })
					}, 1500)
				} else {
					uni.showToast({ title: res.msg || '微信登录失败，请先使用账号密码登录', icon: 'none' })
				}
			} catch (error) {
				uni.showToast({ title: '微信登录失败，请稍后重试', icon: 'none' })
			} finally {
				this.wechatLoading = false
			}
		},
		getWechatCode() {
			return new Promise((resolve, reject) => {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							resolve(res.code)
							return
						}
						reject(new Error('未获取到微信授权码'))
					},
					fail: (error) => {
						reject(error)
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				reject(new Error('当前环境不支持微信登录'))
				// #endif
			})
		},
		async tryBindWechat() {
			// #ifdef MP-WEIXIN
			try {
				const code = await this.getWechatCode()
				await this.API.BindWechat({ code })
			} catch (error) {
				console.error('自动绑定微信失败:', error)
			}
			// #endif
		},
		/** 是否需要强制修改密码：初始密码 123456 或纯数字密码 */
		isInitialPassword(pwd) {
			if (!pwd) return false
			return pwd === '123456' || /^\d+$/.test(pwd)
		},
		/** 校验新密码：英文+数字，6-20位；返回错误提示，空字符串表示通过 */
		validateNewPassword(pwd) {
			if (!pwd) return '请输入新密码'
			if (pwd.length < 6 || pwd.length > 20) return '密码长度需为6-20位'
			if (!/^[A-Za-z0-9]+$/.test(pwd)) return '密码只能包含英文字母和数字'
			if (!/[A-Za-z]/.test(pwd) || !/[0-9]/.test(pwd)) return '密码必须同时包含英文字母和数字'
			if (pwd === '123456') return '新密码不能与初始密码相同'
			return ''
		},
		toggleForcePwd() {
			this.forceShowPwd = !this.forceShowPwd
		},
		/** 提交强制修改密码 */
		async submitForcePassword() {
			if (this.forceSubmitting) return
			const err = this.validateNewPassword(this.forcePwd)
			if (err) {
				uni.showToast({ title: err, icon: 'none' })
				return
			}
			if (this.forcePwd !== this.forcePwd2) {
				uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
				return
			}
			if (!this.forcePwdUserId) {
				uni.showToast({ title: '未获取到用户信息，请重新登录', icon: 'none' })
				return
			}
			this.forceSubmitting = true
			try {
				const enc = md5.hex_md5(this.forcePwd)
				const res = await oauthApi.changePassword(this.forcePwdUserId, {
					userPassword: enc,
					validatePassword: enc
				})
				if (res && (res.code === 200 || res.success)) {
					this.showForcePwdDialog = false
					uni.showToast({ title: '密码修改成功', icon: 'success' })
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/home/home' })
					}, 1200)
				} else {
					uni.showToast({ title: (res && res.msg) || '修改失败，请重试', icon: 'none' })
				}
			} catch (error) {
				uni.showToast({ title: '修改失败，请稍后重试', icon: 'none' })
			} finally {
				this.forceSubmitting = false
			}
		}
	}
}
</script>

<style scoped lang="scss">
/* ── 页面底层 ── */
.lp-page {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(160deg, #c8e6c9 0%, #b2dfdb 45%, #a5d6a7 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 60rpx 0 40rpx;
	box-sizing: border-box;
}

/* 背景装饰圆 */
.lp-deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.lp-deco--1 {
	width: 500rpx;
	height: 500rpx;
	background: radial-gradient(circle, rgba(67, 160, 71, 0.18) 0%, transparent 70%);
	top: -120rpx;
	right: -100rpx;
}
.lp-deco--2 {
	width: 360rpx;
	height: 360rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
	bottom: 100rpx;
	left: -80rpx;
}
.lp-deco--3 {
	width: 200rpx;
	height: 200rpx;
	background: radial-gradient(circle, rgba(102, 187, 106, 0.15) 0%, transparent 70%);
	top: 40%;
	right: 20rpx;
}

/* ── 主卡片 ── */
.lp-card {
	position: relative;
	z-index: 2;
	width: 86%;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border-radius: 32rpx;
	box-shadow:
		0 20rpx 60rpx rgba(0, 0, 0, 0.1),
		0 4rpx 16rpx rgba(0, 0, 0, 0.06),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
	padding: 48rpx 40rpx 44rpx;
	box-sizing: border-box;
}

/* ── 品牌区 ── */
.lp-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 44rpx;
}

.lp-logo-wrap {
	width: 120rpx;
	height: 120rpx;
	border-radius: 28rpx;
	overflow: hidden;
	box-shadow:
		0 8rpx 24rpx rgba(67, 160, 71, 0.25),
		0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	margin-bottom: 20rpx;
}

.lp-logo {
	width: 100%;
}

.lp-brand-name {
	font-size: 36rpx;
	font-weight: 800;
	color: #1b5e20;
	letter-spacing: 3rpx;
	margin-bottom: 6rpx;
}

.lp-brand-sub {
	font-size: 22rpx;
	color: #66bb6a;
	letter-spacing: 1rpx;
}

/* ── 表单 ── */
.lp-form {
	margin-bottom: 36rpx;
}

.lp-field {
	display: flex;
	align-items: center;
	height: 96rpx;
	background: rgba(232, 245, 233, 0.5);
	border-radius: 20rpx;
	border: 2rpx solid rgba(67, 160, 71, 0.15);
	padding: 0 24rpx;
	margin-bottom: 20rpx;
	transition: border-color 0.2s ease, background 0.2s ease;
	box-sizing: border-box;

	&.is-focus {
		border-color: #43a047;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 0 6rpx rgba(67, 160, 71, 0.08);
	}
}

.lp-field-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36rpx;
	height: 36rpx;
	margin-right: 16rpx;
	color: #43a047;
}

.lp-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	font-size: 28rpx;
	color: #1f2937;
	background: transparent;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;

	&:focus {
		border: none;
		outline: none;
		box-shadow: none;
	}
}

.lp-placeholder {
	color: #9ca3af;
	font-size: 28rpx;
}

.lp-field-suffix {
	flex-shrink: 0;
	padding: 10rpx 0 10rpx 16rpx;
	display: flex;
	align-items: center;
}

/* ── 按钮 ── */
.lp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 92rpx;
	border-radius: 20rpx;
	font-size: 30rpx;
	font-weight: 600;
	letter-spacing: 2rpx;
	transition: opacity 0.15s ease;
	box-sizing: border-box;

	&:active {
		opacity: 0.75;
	}

	&.is-loading {
		opacity: 0.6;
		pointer-events: none;
	}
}

.lp-btn--primary {
	background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
	color: #ffffff;
	box-shadow:
		0 8rpx 24rpx rgba(67, 160, 71, 0.38),
		0 2rpx 8rpx rgba(67, 160, 71, 0.2);
}

/* ── 分隔线 ── */
.lp-divider {
	display: flex;
	align-items: center;
	margin: 32rpx 0 28rpx;
	gap: 16rpx;
}

.lp-divider-line {
	flex: 1;
	height: 1rpx;
	background: rgba(0, 0, 0, 0.08);
}

.lp-divider-text {
	font-size: 22rpx;
	color: #9ca3af;
	flex-shrink: 0;
	white-space: nowrap;
}

/* ── 微信登录按钮 ── */
.lp-btn--wechat {
	background: #07c160;
	color: #ffffff;
	gap: 14rpx;
	box-shadow:
		0 8rpx 24rpx rgba(7, 193, 96, 0.32),
		0 2rpx 8rpx rgba(7, 193, 96, 0.18);
}

.lp-wechat-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ── 隐私政策 ── */
.lp-privacy {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 36rpx;
	gap: 6rpx;
}

.lp-privacy-txt {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.85);
}

.lp-privacy-link {
	font-size: 22rpx;
	color: #1b5e20;
	font-weight: 600;
	text-decoration: underline;
}

/* 隐私快捷同意：页面内弹层 */
.lp-privacy-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10050;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48rpx;
	box-sizing: border-box;
}

.lp-privacy-dialog {
	width: 100%;
	max-width: 600rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx 36rpx 32rpx;
	box-sizing: border-box;
	box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.18);
}

.lp-privacy-dialog-title {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #1b5e20;
	text-align: center;
	margin-bottom: 24rpx;
}

.lp-privacy-dialog-content {
	display: block;
	font-size: 28rpx;
	color: #4b5563;
	line-height: 1.55;
	text-align: center;
	margin-bottom: 36rpx;
}

.lp-privacy-dialog-actions {
	display: flex;
	flex-direction: row;
	gap: 24rpx;
}

.lp-privacy-dialog-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-weight: 600;
	box-sizing: border-box;
}

.lp-privacy-dialog-btn--cancel {
	background: #f3f4f6;
	color: #6b7280;
}

.lp-privacy-dialog-btn--ok {
	background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
	color: #ffffff;
}

/* ── 初始密码强制修改弹层 ── */
.lp-force-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10060;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48rpx;
	box-sizing: border-box;
}

.lp-force-dialog {
	width: 100%;
	max-width: 640rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 44rpx 36rpx 36rpx;
	box-sizing: border-box;
	box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.2);
}

.lp-force-title {
	display: block;
	font-size: 34rpx;
	font-weight: 700;
	color: #1b5e20;
	text-align: center;
	margin-bottom: 16rpx;
}

.lp-force-tip {
	display: block;
	font-size: 24rpx;
	color: #6b7280;
	line-height: 1.6;
	margin-bottom: 30rpx;
}

.lp-force-field {
	display: flex;
	align-items: center;
	height: 92rpx;
	background: rgba(232, 245, 233, 0.5);
	border-radius: 18rpx;
	border: 2rpx solid rgba(67, 160, 71, 0.15);
	padding: 0 24rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
}

.lp-force-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	font-size: 28rpx;
	color: #1f2937;
	background: transparent;
	border: none;
	outline: none;
}

.lp-force-eye {
	flex-shrink: 0;
	padding: 10rpx 0 10rpx 16rpx;
	display: flex;
	align-items: center;
}

.lp-force-submit {
	margin-top: 12rpx;
}
</style>