@charset "utf-8"; /** * 征集为人民 实事惠人民 —— 建言献策 H5 * 设计稿基准：900 x 1600 * 布局宽度固定 750px（viewport width=750），尺寸单位统一为整数值 px */ /* ---------------- 基础 ---------------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: #fffdfc; color: #1e1e1e; font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; } img { border: 0; vertical-align: middle; } /* 视觉隐藏（仅屏幕阅读器可读） */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @supports (clip-path: inset(50%)) { .sr-only { clip-path: inset(50%); } } /* ---------------- 竖向翻页容器（Swiper） ---------------- */ .h5-swiper { width: 100%; max-width: 750px; /* 宽屏（PC）下将 750px 版心居中显示 */ margin: 0 auto; /* 高度始终等于可视屏幕高度，页面整体不滚动，翻页只由手势/滚轮驱动 */ height: 100vh; height: 100dvh; background-color: #fffdfc; } /* 翻页模式下每页高度由容器决定，页面本身不再撑高 */ .h5-swiper .page { height: 100%; min-height: 0; max-width: none; } /* ---------------- PC（桌面）适配：750px 定宽居中，页面自然滚动 ---------------- */ /* 桌面浏览器不识别移动端 width=750 视口，index.html 检测宽屏后在 上添加 page-desktop： 页面以 750px 版心居中展示，取消整屏翻页，改为自然上下滚动（入场动画由 AOS 按滚动位置播放） */ .page-desktop body { background-color: #f5eee3; } .page-desktop .h5-swiper { height: auto; box-shadow: 0 0 40px rgba(150, 116, 62, .14); } /* PC 端不初始化 Swiper：取消其横向 flex 排列，两页纵向自然排布 */ .page-desktop .h5-swiper .swiper-wrapper { display: block; } /* 恢复页面自身高度规则（覆盖翻页模式的 height: 100%） */ .page-desktop .h5-swiper .page { height: auto; min-height: 1334px; } @supports (height: max(100vh, 1px)) { .page-desktop .h5-swiper .page { min-height: max(100vh, 1334px); } } @supports (height: 1dvh) { .page-desktop .h5-swiper .page { min-height: max(100dvh, 1334px); } } /* ---------------- 页面容器 ---------------- */ .page { position: relative; /* 兜底最少高度：矮屏机型按 750 x 1334 参考高度撑满，内容超出时页面可滚动 */ min-height: 1334px; max-width: 750px; margin: 0 auto; background-color: #fffdfc; overflow: hidden; } /* 支持 max() 的浏览器：取屏幕高度与兜底高度的较大值 */ @supports (height: max(100vh, 1px)) { .page { min-height: max(100vh, 1334px); } } /* 现代浏览器：dvh 跟随移动端地址栏伸缩，页面高度始终等于可视屏幕高度 */ @supports (height: 1dvh) { .page { min-height: max(100dvh, 1334px); } } /* 底部山水插画 */ .page-scenery { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; } /* 内容层（浮于插画之上） */ .page-body { position: relative; z-index: 1; } /* ---------------- 标题 ---------------- */ .page-title { padding-top: 120px; text-align: center; } .page-title img { width: 480px; height: auto; } /* ---------------- 首页正文 ---------------- */ .page-content { margin: 30px 80px 0; font-size: 32px; line-height: 1.5; color: #1e1e1e; text-align: justify; word-break: break-all; } .page-content p { margin: 0; text-indent: 2em; } /* ---------------- 第二页：征集时间 / 征集原则 ---------------- */ .page-notice .page-body { /* 顶部留白与首页呼应；翻页模式下页面高度固定，底部无需预留插画高度 */ padding: 120px 80px 80px; } .notice-block+.notice-block { margin-top: 70px; } .notice-heading { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.5; color: #1e1e1e; } .notice-text { margin: 26px 0 0; font-size: 32px; line-height: 1.5; color: #1e1e1e; text-align: justify; word-break: break-all; } /* 矮视口（平板竖屏 / 桌面预览，CSS 高度低于 1200px）：压缩留白，避免按钮与正文出屏 */ @media (max-height: 1200px) { .page-title { padding-top: 90px; } .page-btn { margin-top: 40px; } .page-notice .page-body { padding-top: 110px; } } /* 更矮视口（如 1080p 带书签栏的桌面预览，CSS 高度低于 950px）：进一步压缩留白 */ @media (max-height: 950px) { .page-title { padding-top: 50px; } .page-content { margin-top: 20px; } .page-btn { margin-top: 24px; } .page-notice .page-body { padding-top: 50px; } .page-notice .notice-block+.notice-block { margin-top: 40px; } .page-notice .page-btn { margin-top: 30px; } } /* ---------------- 通用金色胶囊按钮 ---------------- */ .btn-gold { display: inline-block; height: 60px; padding: 0 45px; border: 0; border-radius: 22px; background-color: #deb67b; color: #fff; font-family: inherit; font-size: 32px; line-height: 60px; text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } .btn-gold:hover { background-color: #d9ab68; } .btn-gold:focus { outline: none; } .btn-gold:focus-visible { outline: 2px solid #b9843a; outline-offset: 5px; } .btn-gold:active { transform: translateY(2px) scale(.97); } /* ---------------- 首页进入按钮 ---------------- */ .page-btn { margin-top: 60px; text-align: center; } /* 图片按钮（btn.png 设计稿尺寸 250x54）：固定显示尺寸、点击手型与反馈，替代原 .btn-gold 胶囊按钮 */ .page-btn .btn-advice { width: 250px; height: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .page-btn .btn-advice:active { animation: none; -webkit-transform: translateY(2px) scale(.97); transform: translateY(2px) scale(.97); box-shadow: 0 2px 7px rgba(222, 182, 123, .4); } @keyframes btnBreath { 0%, 100% { box-shadow: 0 4px 13px rgba(222, 182, 123, .35); } 50% { box-shadow: 0 4px 25px rgba(222, 182, 123, .72); } } /* ---------------- 首页下翻引导箭头 ---------------- */ .scroll-hint { margin-top: 36px; text-align: center; } .scroll-arrow { position: relative; display: inline-block; width: 50px; height: 60px; animation: scrollBounce 1.2s ease-in-out infinite; } .scroll-arrow::before, .scroll-arrow::after { content: ''; position: absolute; left: 50%; width: 50px; height: 50px; border-right: 3px solid #b9843a; border-bottom: 3px solid #b9843a; transform: translateX(-50%) rotate(45deg); } .scroll-arrow::before { top: 0; opacity: .55; } .scroll-arrow::after { top: 12px; } @keyframes scrollBounce { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } } /* PC 端自然滚动时箭头贴近页面底部，持续提示向下滚动 */ .page-desktop .scroll-hint { position: absolute; left: 0; right: 0; bottom: 30px; margin-top: 0; } /* ---------------- 建言页表单 ---------------- */ .advice-form { margin: 48px 152px 0 161px; } .form-row { display: flex; align-items: center; margin-bottom: 48px; } .form-row:last-of-type { margin-bottom: 0; } .form-row-textarea { align-items: flex-start; } .form-label { flex: none; box-sizing: border-box; width: 130px; padding-right: 18px; font-size: 28px; line-height: 28px; color: #1e1e1e; } .form-row-textarea .form-label { line-height: 70px; } .form-field { flex: 1; min-width: 0; } /* 输入框、文本域（覆盖 layui 默认样式） */ .form-field .layui-input, .form-field .layui-textarea { box-sizing: border-box; width: 100%; padding: 0 16px; border: 1px solid #deb67b; border-radius: 22px; background-color: #fff; color: #1e1e1e; caret-color: #b9843a; font-size: 28px; transition: none; } .form-field .layui-input { height: 58px; line-height: 58px; } .form-field .layui-textarea { height: 480px; min-height: 0; padding: 12px 16px; line-height: 46px; resize: none; } .form-field .layui-input:hover, .form-field .layui-textarea:hover { border-color: #deb67b !important; } .form-field .layui-input:focus, .form-field .layui-textarea:focus { border-color: #deb67b !important; box-shadow: 0 0 0 8px rgba(222, 182, 123, .2); } .form-field .layui-input::placeholder, .form-field .layui-textarea::placeholder { color: #c9c1b8; } /* 下拉选择框 */ .form-field .layui-form-select .layui-input { padding-right: 40px; } .form-field .layui-form-select .layui-edge { right: 18px; margin-top: -4px; border-width: 8px; border-top-color: #deb67b; } .form-field .layui-form-select dl { top: 64px; /* 覆盖 layui 固定 300px，改为容纳全部选项（12 项 + 提示行，共 13 x 58px + 内边距） */ max-height: 768px; padding: 6px 0; border: 1px solid #deb67b; border-radius: 16px; box-shadow: 0 6px 20px rgba(150, 116, 62, .16); font-size: 28px; } .form-field .layui-form-select dl dd { padding: 0 18px; font-size: 28px; line-height: 58px; } .form-field .layui-form-select dl dd.layui-select-tips { padding-left: 18px !important; } .form-field .layui-form-select dl dd.layui-this { background-color: #fbf1e2; color: #b9843a; font-weight: 400; } /* 提交按钮（与输入框左边缘对齐） */ .advice-submit { margin-top: 52px; margin-left: 130px; } /* ---------------- 建言填写弹层 ---------------- */ .advice-popup { border-radius: 26px; box-shadow: 0 8px 32px rgba(150, 116, 62, .18); } .advice-popup .layui-layer-content { box-sizing: border-box; padding: 70px 46px 52px; /* 下拉面板需溢出显示 */ overflow: visible; } /* 弹层内边距已控制留白，表单去掉页面级外边距 */ .advice-popup .advice-form { margin: 0; } /* 关闭按钮移到卡片内右上角 */ .advice-popup .layui-layer-setwin { top: 8px; right: 8px; } .advice-popup .layui-layer-setwin .layui-layer-close2 { top: 0; right: 0; box-sizing: border-box; width: 56px; height: 56px; padding: 0; border: 0; background-color: transparent; color: #c8a878; font-size: 30px; font-weight: 400; line-height: 56px; text-align: center; } .advice-popup .layui-layer-setwin .layui-layer-close2:hover { background-color: transparent; color: #b9843a; } /* 弹层内表单逐行浮现（backwards：动画结束后不残留 transform，避免遮挡下拉面板） */ .advice-popup .advice-form>* { animation: adviceRowIn .5s cubic-bezier(.22, .68, .4, 1) backwards; } /* 下拉所在行需盖在其他表单行之上 */ .advice-popup .advice-form>.form-row-select { position: relative; z-index: 2; } .advice-popup .advice-form>*:nth-child(1) { animation-delay: .1s; } .advice-popup .advice-form>*:nth-child(2) { animation-delay: .18s; } .advice-popup .advice-form>*:nth-child(3) { animation-delay: .26s; } @keyframes adviceRowIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* ---------------- 矮视口（PC 桌面窗口较矮时）：压缩建言弹层，避免超出屏幕 ---------------- */ /* 移动端 width=750 视口下 CSS 高度普遍在 1100px 以上，不受以下断点影响 */ @media (max-height: 1030px) { /* 768px 全展开的下拉面板在约 1030px 以下视口会超出屏幕底部； layui 下拉自带内部滚动，收矮后仍可滚动选择全部选项 */ .form-field .layui-form-select dl { max-height: 420px; } } @media (max-height: 900px) { .advice-popup .layui-layer-content { padding: 44px 46px 36px; } .advice-form .form-row { margin-bottom: 32px; } .form-field .layui-textarea { height: 320px; } .advice-submit { margin-top: 36px; } } @media (max-height: 640px) { .advice-popup .layui-layer-content { padding: 32px 46px 28px; } .advice-form .form-row { margin-bottom: 24px; } .form-field .layui-textarea { height: 200px; } .advice-submit { margin-top: 24px; } } /* ---------------- 感谢弹层 ---------------- */ .advice-thanks-popup { border-radius: 17px; box-shadow: 0 8px 32px rgba(150, 116, 62, .18); } .advice-thanks-popup .layui-layer-content { overflow: visible; } .advice-thanks { margin: 0; padding: 50px 42px 25px; color: #1e1e1e; font-size: 25px; line-height: 40px; text-align: center; } .advice-thanks-popup .layui-layer-btn { padding-bottom: 42px; text-align: center; } .advice-thanks-popup .layui-layer-btn a { height: auto; padding: 13px 37px; border: 0; border-radius: 21px; background-color: #deb67b; color: #fff; font-size: 23px; line-height: 23px; transition: transform .18s ease, background-color .18s ease; } .advice-thanks-popup .layui-layer-btn a:hover { background-color: #d9ab68; } .advice-thanks-popup .layui-layer-btn a:active { transform: scale(.97); } /* ---------------- 无障碍：跟随系统「减弱动态效果」 ---------------- */ @media (prefers-reduced-motion: reduce) { [data-aos], .btn-gold, .btn-advice, .advice-popup .advice-form>* { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }