/* pages/mine/contact.wxss 与首页、陪诊指南页共用一套暖橙 + 暖白令牌,保证内页风格一致 */ page { --brand-strong: #C2410C; /* 实心块/按钮:白字 4.69:1,过 AA 正文 */ --brand-soft: #FFF4E8; /* 图标衬底、标签底 */ --brand-line: #FFE0C2; /* 浅橙衬底描边 */ --brand-ink: #9A3412; /* 浅橙衬底上的文字/图标:6.8:1,过 AA */ --ink: #2B2521; --muted: #6F655C; /* 与首页同一档。原 #7A7068 在白卡上 4.8:1 达标, 但 .header-subtitle 直接落在纸面上只有 4.49:1,不过 AA。 改后:纸面 5.36:1 / 白卡 5.69:1 */ --line: #ECE3D6; /* 米色发丝边:纸面 1.20:1 / 白卡 1.27:1 */ --paper: #FAF8F5; /* 暖白纸面:R−B 由 10 降到 5,去掉"旧纸"的黄闷感 */ --white: #FFFFFF; --shadow-card: 0 2rpx 10rpx rgba(63, 43, 25, 0.07); background-color: var(--paper); } .page-bg { min-height: 100vh; background: var(--paper); } .container { padding: 32rpx 32rpx 0; } /* ===== 头部:小色带 + 深墨标题 ===== */ .page-header { padding: 24rpx 0 8rpx; } .header-accent { width: 64rpx; height: 8rpx; border-radius: 4rpx; background: var(--brand-strong); } .header-title { display: block; margin-top: 20rpx; font-size: 46rpx; font-weight: 700; color: var(--ink); letter-spacing: 1rpx; } .header-subtitle { display: block; margin-top: 12rpx; font-size: 26rpx; color: var(--muted); letter-spacing: 1rpx; } /* ===== 联系方式卡片 ===== */ .card { margin-top: 32rpx; padding: 8rpx 26rpx; border-radius: 28rpx; background: var(--white); border: 2rpx solid var(--line); box-shadow: var(--shadow-card); } .contact-item { display: flex; align-items: center; padding: 26rpx 0; border-bottom: 2rpx solid var(--line); } .contact-item:last-child { border-bottom: none; } .contact-item:active { opacity: 0.7; } /* 浅橙衬底圆角方块:与首页 .contact-icon 同构 */ .contact-icon { width: 68rpx; height: 68rpx; border-radius: 20rpx; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; margin-right: 18rpx; flex-shrink: 0; } .contact-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .contact-label { font-size: 24rpx; color: var(--muted); } .contact-value { margin-top: 6rpx; font-size: 30rpx; font-weight: 600; color: var(--ink); word-break: break-all; } /* 右侧动作标签:浅橙底 + 橙字,提示这一行可点 */ .contact-action { flex-shrink: 0; margin-left: 16rpx; padding: 6rpx 16rpx; border-radius: 999rpx; background: var(--brand-soft); color: var(--brand-ink); font-size: 24rpx; font-weight: 600; } /* ===== 提示条 ===== */ .tips-card { margin-top: 24rpx; padding: 24rpx 26rpx; border-radius: 20rpx; background: var(--brand-soft); border: 2rpx solid var(--brand-line); /* 居中对齐放在父级:text 是行内元素,给自身设 text-align 不生效 */ text-align: center; } .tips-text { font-size: 26rpx; color: var(--brand-ink); line-height: 1.7; } /* ===== 二维码卡片 ===== 图片是 888×1131 竖版海报,自带昵称与「扫二维码」说明,动作提示已由上方提示条承担, 故卡内只放图。左右留出空气,避免海报灰底顶满白卡 */ .card.qr-card { margin-top: 24rpx; padding: 28rpx; } .qr-image { display: block; width: 100%; max-width: 520rpx; margin: 0 auto; border-radius: 16rpx; } .footer-space { height: 60rpx; }