/* 页面整体背景 - 橙色 */ body { background-color: #FF9800; } .container { min-height: 100vh; display: flex; flex-direction: column; position: relative; } /* 自定义导航栏 */ .nav-bar { height: 2.75rem; /* 标准导航栏高度 */ display: flex; align-items: center; padding: 0 0.9375rem; /* 适配状态栏高度在 vue 中通过 padding-top 实现,这里仅控制栏本身 */ } .back-icon { font-size: 1.875rem; color: #fff; font-weight: bold; /* 增大点击区域 */ width: 1.875rem; height: 1.875rem; line-height: 1.75rem; text-align: center; display: block; } /* 头部文案 */ .header-area { padding: 1.25rem 1.25rem 0.625rem; color: #fff; text-align: center; } .main-title { font-size: 1.5rem; font-weight: bold; display: block; margin-bottom: 0.625rem; } .sub-title { font-size: 1rem; opacity: 0.9; display: block; } /* 内容卡片 */ .content-card { background-color: #fff; border-radius: 0.9375rem; /* 四周圆角 */ margin: 1.25rem 0.9375rem; /* 上下40 左右30 */ padding: 1.875rem 1.25rem; display: flex; flex-direction: column; box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1); } .benefit-item { display: flex; align-items: center; /* 垂直居中对齐 */ margin-bottom: 1.875rem; } .icon-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 0.9375rem; flex-shrink: 0; color: #fff; /* 图标文字白色 */ font-weight: bold; } /* 图1 配色复刻 */ .icon-money { background-color: #26A69A; /* 青色/绿色 */ } .icon-loc { background-color: #2979FF; /* 蓝色 */ } .icon-clock { background-color: #FF7043; /* 橙色 */ } .icon-text { font-size: 1.25rem; } .info { flex: 1; } .item-title { font-size: 1rem; font-weight: bold; color: #333; margin-bottom: 0.25rem; /* 减小间距 */ display: block; } .item-desc { font-size: 0.8125rem; color: #666; line-height: 1.6; display: block; } /* 底部区域 */ .footer-area { margin-top: auto; /* 推到最底部 */ padding: 0.625rem 1.25rem 2.5rem; display: flex; flex-direction: column; align-items: center; /* 移除白色背景,呈现底色橙色 */ } .join-btn { width: 100%; height: 2.8125rem; line-height: 2.8125rem; background: #fff; /* 白色按钮 */ color: #FF5722; /* 橙色文字 */ font-size: 1.0625rem; font-weight: bold; border-radius: 1.40625rem; box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.1); } .join-btn::after { border: none; } .faq { margin-top: 0.9375rem; color: #fff; /* 白色文字 */ font-size: 0.8125rem; display: flex; align-items: center; } .help-icon { width: 0.9375rem; height: 0.9375rem; border: 1px solid #fff; /* 白色边框 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; margin-right: 0.3125rem; color: #fff; /* 白色问号 */ }