pet-system-fulfiller-app/unpackage/dist/dev/app-plus/pages/login/login.css

.agreement-mask[data-v-c8509778] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agreement-container[data-v-c8509778] {
  width: 18.75rem;
  max-height: 80vh;
  background-color: #ffffff;
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn-c8509778 0.3s ease;
}
.agreement-header[data-v-c8509778] {
  padding: 0.9375rem;
  text-align: center;
  border-bottom: 0.0625rem solid #f5f5f5;
}
.agreement-title[data-v-c8509778] {
  font-size: 1rem;
  font-weight: bold;
  color: #333333;
}
.agreement-body[data-v-c8509778] {
  flex: 1;
  padding: 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666666;
  max-height: 50vh;
}
.agreement-footer[data-v-c8509778] {
  padding: 0.9375rem;
  border-top: 0.0625rem solid #f5f5f5;
}
.confirm-btn[data-v-c8509778] {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #ff5722;
  color: #ffffff;
  border-radius: 1.25rem;
  font-size: 0.875rem;
}
@keyframes fadeIn-c8509778 {
from {
    opacity: 0;
    transform: scale(0.9);
}
to {
    opacity: 1;
    transform: scale(1);
}
}


/* 引用样式文件 */
/* 页面容器 */
.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: -2.5rem;
  /* 向上覆盖 banner，形成遮挡 */
  /* 实现向上凸起的圆弧效果: 使用 border-radius 实现顶部椭圆 */
  border-radius: 100% 100% 0 0 / 1.875rem 1.875rem 0 0;

  position: relative;
  z-index: 10;
  padding: 0 1.5625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 悬浮 Logo */
.logo-wrapper {
  margin-top: -2.1875rem;
  /* Logo 向上悬浮 */
  margin-bottom: 1.5625rem;
  /* 添加白色光晕/阴影增强悬浮感 */
  border-radius: 50%;
  box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 0.25rem;
  /* 白色边框 */
}
.logo-img {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  display: block;
}
/* Tabs */
.tabs {
  display: flex;
  align-items: center;
  margin-bottom: 1.875rem;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.9375rem;
}
.tab-text {
  font-size: 1rem;
  color: #999;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}
.tab-item.active .tab-text {
  color: #FF5722;
  /* 主色调橙色 */
  font-weight: bold;
  font-size: 1.125rem;
}
.tab-indicator {
  width: 1.25rem;
  height: 0.1875rem;
  background-color: #FF5722;
  border-radius: 0.09375rem;
}
.divider {
  width: 1px;
  height: 0.9375rem;
  background-color: #eee;
  margin: 0 0.3125rem;
}
/* 表单 */
.form-area {
  width: 100%;
}
.input-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding: 0.9375rem 0;
  margin-bottom: 0.625rem;
}
.area-code {
  display: flex;
  align-items: center;
  margin-right: 0.625rem;
  font-size: 1rem;
  color: #333;
  height: 100%;
  /* 确保高度撑满 */
}
.arrow {
  font-size: 0.625rem;
  color: #999;
  margin-left: 0.25rem;
  /* margin-top: 4rpx; 移除微调，依靠 flex 居中 */
}
.input {
  flex: 1;
  font-size: 0.9375rem;
}
.get-code-btn {
  background-color: #FFF0E9;
  /* 浅橙色背景 */
  padding: 0.46875rem 0.9375rem;
  /* 增大内边距 */
  border-radius: 1.25rem;
  /* 稍微增大圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-text {
  color: #FF5722;
  font-size: 0.875rem;
  /* 增大字体 */
  line-height: 1;
  /* 修正文字垂直居中 */
}
.eye-icon {
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svg-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.forgot-pwd {
  width: 100%;
  text-align: right;
  padding-top: 0.625rem;
  font-size: 0.8125rem;
  color: #666;
}
/* 按钮 */
.login-btn {
  /* 鲜亮的橙色渐变 */
  background: linear-gradient(90deg, #FF9E60 0%, #FF5722 100%);
  color: #fff;
  border-radius: 1.5625rem;
  margin-top: 1.875rem;
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  font-weight: bold;
  box-shadow: 0 0.3125rem 0.9375rem 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: 1rem;
  height: 1rem;
  border: 0.0625rem solid #ccc;
  border-radius: 50%;
  margin-right: 0.375rem;
  /* 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: 0.6875rem;
  line-height: 1;
  /* 确保勾选符号居中 */
}
.agree-text {
  font-size: 0.75rem;
  color: #999;
  line-height: 1.5;
}
.link {
  color: #666;
}
/* 底部招募 */
.footer-recruit {
  margin-top: auto;
  padding-bottom: 2.5rem;
  /* 增加底部距离 */
  width: 100%;
  display: flex;
  justify-content: center;
}
.recruit-badge {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.5625rem;
  background-color: #fff;
  /* 白色背景 */
  border: 1px solid #FF5722;
  /* 橙色边框 */
  border-radius: 1.875rem;
  /* 胶囊圆角 */
  color: #FF5722;
  /* 橙色文字 */
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.2);
  /* 橙色阴影 */
}
.flag-icon {
  margin-right: 0.46875rem;
  font-size: 0.875rem;
  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: 18.75rem;
  background-color: #fff;
  border-radius: 0.625rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.modal-header {
  padding: 0.9375rem;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.modal-title {
  font-size: 1rem;
  font-weight: bold;
}
.modal-body {
  padding: 0.9375rem;
  flex: 1;
  overflow-y: auto;
}
.modal-text {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
}
.modal-footer {
  padding: 0.625rem 0.9375rem 0.9375rem;
}
.confirm-btn {
  background-color: #FF5722;
  color: #fff;
  font-size: 0.9375rem;
  border-radius: 1.25rem;
}