/* 弹窗基础样式(如果已有可忽略,重点加动画相关) */ .verification-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: none; } .verification-popup.show { display: block; } .overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 320px; background: #fff; border-radius: 12px; padding: 20px; /* 初始边框样式 */ border: 2px solid #e5e5e5; /* 动画结束后恢复默认状态,避免位移 */ transform-origin: center center; } /* 1. 定义晃动关键帧动画(小程序兼容写法) */ @keyframes shake { 0%, 100% { transform: translate(-50%, -50%); } 20% { transform: translate(-50%, -50%) translateX(-5px); } 40% { transform: translate(-50%, -50%) translateX(5px); } 60% { transform: translate(-50%, -50%) translateX(-5px); } 80% { transform: translate(-50%, -50%) translateX(5px); } } /* 2. 检验失败的动画类(边框变红+晃动) */ .popup-content.shake-error { border-color: #ff4444 !important; /* 红色边框 */ animation: shake 0.5s ease-in-out; /* 绑定晃动动画 */ } /* 其他原有样式(如输入框、按钮)保持不变 */ .popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .code-input-container { display: flex; justify-content: space-between; margin: 20px 0; } .code-input { width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .code-input.active { border-color: #007aff; } .real-input { position: fixed; top: -100px; left: -100px; opacity: 0; } .resend-container { text-align: right; margin-top: 10px; } .resend-btn.active { color: #007aff; } .resend-btn { color: #07c160; font-size: 24rpx; } .resend-btn.disabled { color: #999; pointer-events: none; /* 倒计时期间禁止点击 */ } /* 结算密码加密符号样式优化 */ .code-input text { font-size: 20px; /* 放大●的字号,更醒目 */ color: #333; letter-spacing: 2px; /* 增加间距,避免●挤在一起 */ } /* 验证码仍用原有字号,不影响 */ .code-input-container:not([wx-if]) .code-input text { font-size: 18px; letter-spacing: 0; }