ai_dianshang/miniprogram/pages/user/phone-verify/index.wxss

/* pages/user/phone-verify/index.wxss */
.phone-verify {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx 32rpx;
}

/* 头部区域 */
.header {
  text-align: center;
  margin-bottom: 80rpx;
}

.title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

/* 表单容器 */
.form-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
}

/* 输入组 */
.input-group {
  margin-bottom: 40rpx;
}

.input-group:last-child {
  margin-bottom: 0;
}

.input-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

/* 手机号输入框 */
.phone-input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease;
}

.phone-input:focus {
  border-color: #0052d9;
}

/* 验证码容器 */
.verify-code-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.verify-input {
  flex: 1;
  height: 88rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #333;
  background: #fff;
  transition: border-color 0.3s ease;
}

.verify-input:focus {
  border-color: #0052d9;
}

/* 发送验证码按钮 */
.send-code-btn {
  width: 200rpx;
  height: 88rpx;
  background: #0052d9;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.send-code-btn.disabled {
  background: #ccc;
  color: #999;
}

.send-code-btn::after {
  border: none;
}

/* 按钮容器 */
.button-container {
  margin-bottom: 40rpx;
}

/* 确认按钮 */
.confirm-btn {
  width: 100%;
  height: 96rpx;
  background: #ccc;
  color: #999;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.confirm-btn.active {
  background: #0052d9;
  color: #fff;
}

.confirm-btn::after {
  border: none;
}

/* 提示信息 */
.tips {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
}

.tip-item {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12rpx;
}

.tip-item:last-child {
  margin-bottom: 0;
}

/* 加载状态 */
.t-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .phone-verify {
    padding: 32rpx 24rpx;
  }
  
  .title {
    font-size: 44rpx;
  }
  
  .subtitle {
    font-size: 26rpx;
  }
  
  .form-container {
    padding: 32rpx 24rpx;
  }
  
  .send-code-btn {
    width: 180rpx;
    font-size: 26rpx;
  }
}