pet-system-fulfiller-app/pages/login/style.css

/* 页面容器 */
.container {
  height: 100vh;
  /* 强制全屏高度 */
  overflow: hidden;
  /* 禁止溢出滚动 */
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 顶部 Banner */
.banner-area {
  width: 100%;
  position: relative;
  /* 移除高度限制，依靠 content-card 的 margin-top 控制遮挡 */
}

.banner-img {
  width: 100%;
  display: block;
  /* 消除图片底部空隙 */
}

/* 内容卡片 - 核心布局技巧 */
.content-card {
  flex: 1;
  background-color: #fff;
  margin-top: -80rpx;
  /* 向上覆盖 banner，形成遮挡 */
  /* 实现向上凸起的圆弧效果: 使用 border-radius 实现顶部椭圆 */
  border-radius: 100% 100% 0 0 / 60rpx 60rpx 0 0;

  position: relative;
  z-index: 10;
  padding: 0 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 悬浮 Logo */
.logo-wrapper {
  margin-top: -70rpx;
  /* Logo 向上悬浮 */
  margin-bottom: 50rpx;
  /* 添加白色光晕/阴影增强悬浮感 */
  border-radius: 50%;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 8rpx;
  /* 白色边框 */
}

.logo-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: block;
}

/* Tabs */
.tabs {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;
}

.tab-text {
  font-size: 32rpx;
  color: #999;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.tab-item.active .tab-text {
  color: #FF5722;
  /* 主色调橙色 */
  font-weight: bold;
  font-size: 36rpx;
}

.tab-indicator {
  width: 40rpx;
  height: 6rpx;
  background-color: #FF5722;
  border-radius: 3rpx;
}

.divider {
  width: 1px;
  height: 30rpx;
  background-color: #eee;
  margin: 0 10rpx;
}

/* 表单 */
.form-area {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}

.area-code {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  font-size: 32rpx;
  color: #333;
  height: 100%;
  /* 确保高度撑满 */
}

.arrow {
  font-size: 20rpx;
  color: #999;
  margin-left: 8rpx;
  /* margin-top: 4rpx; 移除微调，依靠 flex 居中 */
}

.input {
  flex: 1;
  font-size: 30rpx;
}

.get-code-btn {
  background-color: #FFF0E9;
  /* 浅橙色背景 */
  padding: 15rpx 30rpx;
  /* 增大内边距 */
  border-radius: 40rpx;
  /* 稍微增大圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.code-text {
  color: #FF5722;
  font-size: 28rpx;
  /* 增大字体 */
  line-height: 1;
  /* 修正文字垂直居中 */
}

.eye-icon {
  padding: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-icon {
  width: 40rpx;
  height: 40rpx;
}

.forgot-pwd {
  width: 100%;
  text-align: right;
  padding-top: 20rpx;
  font-size: 26rpx;
  color: #666;
}

/* 按钮 */
.login-btn {
  /* 鲜亮的橙色渐变 */
  background: linear-gradient(90deg, #FF9E60 0%, #FF5722 100%);
  color: #fff;
  border-radius: 50rpx;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
  font-size: 34rpx;
  font-weight: bold;
  box-shadow: 0 10rpx 30rpx rgba(255, 87, 34, 0.35);
  /* 增强投影 */
}

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

/* 协议 */
.agreement {
  display: flex;
  align-items: center;
  /* 改为居中对齐，如果文字换行可能需要改为 flex-start 并调整 margin-top */
  justify-content: center;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
  margin-right: 12rpx;
  /* margin-top: 4rpx;  移除顶部 margin，由 align-items: center 控制 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox.checked {
  border-color: #FF5722;
  background-color: #FF5722;
}

.check-mark {
  color: #fff;
  font-size: 22rpx;
  line-height: 1;
  /* 确保勾选符号居中 */
}

.agree-text {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

.link {
  color: #666;
}

/* 底部招募 */
.footer-recruit {
  margin-top: auto;
  padding-bottom: 80rpx;
  /* 增加底部距离 */
  width: 100%;
  display: flex;
  justify-content: center;
}

.recruit-badge {
  display: flex;
  align-items: center;
  padding: 20rpx 50rpx;
  background-color: #fff;
  /* 白色背景 */
  border: 1px solid #FF5722;
  /* 橙色边框 */
  border-radius: 60rpx;
  /* 胶囊圆角 */
  color: #FF5722;
  /* 橙色文字 */
  font-size: 28rpx;
  font-weight: bold;
  box-shadow: 0 5rpx 15rpx rgba(255, 87, 34, 0.2);
  /* 橙色阴影 */
}

.flag-icon {
  margin-right: 15rpx;
  font-size: 28rpx;
  color: #FF5722;
}

/* 弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.modal-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.modal-body {
  padding: 30rpx;
  flex: 1;
  overflow-y: auto;
}

.modal-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.modal-footer {
  padding: 20rpx 30rpx 30rpx;
}

.confirm-btn {
  background-color: #FF5722;
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
}