| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- /* 页面整体背景 - 橙色 */
- 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;
- /* 白色问号 */
- }
|