movecar_wx/package-user/components/captcha/index.wxss

/* 弹窗基础样式（如果已有可忽略，重点加动画相关） */
.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;
}