/* ========================================================================== 成都文化大数据官网 - 全局样式 global.css 说明：基础样式重置 + 设计规范变量 + 公共组件 + 移动端自适应 品牌色调为待确认项，当前使用占位橙色，后续统一替换 ========================================================================== */ /* ---------------------------------------- 1. 基础样式重置 (Reset) ---------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } body { font-family: var(--font-base); font-size: var(--fs-base); line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); /* 顶部为固定导航栏，预留出导航高度，避免内容被遮挡 */ padding-top: var(--header-height); min-width: 320px; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; font-size: inherit; } /* 隐藏工具类：模块/字段为空或后台关闭时统一使用 */ .is-hidden { display: none !important; } /* 视觉隐藏但保留给读屏/SEO（如 Banner 的页面主标题） */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------- 2. 设计规范变量 (Design Tokens) ---------------------------------------- */ :root { /* —— 色值规范（品牌色待确认，当前为占位值）—— */ --color-primary: #ff6a00; /* 主品牌色 / 行动按钮（橙色） */ --color-primary-dark: #e65c00; /* 主色按下/悬停态 */ --color-primary-light: #fff1e8; /* 主色浅底 */ --color-text: #1f2329; /* 正文主色 */ --color-text-secondary: #646a73; /* 次要文字 */ --color-text-muted: #8f959e; /* 弱化文字/占位 */ --color-bg: #ffffff; /* 页面背景 */ --color-bg-soft: #f7f8fa; /* 浅灰分区背景 */ --color-border: #e5e6eb; /* 边框/分割线 */ --color-footer-bg: #1f2329; /* 页脚深色背景 */ --color-footer-text: #c9cdd4; /* 页脚文字 */ --color-error: #e34d59; /* 错误/校验失败 */ --color-error-light: #fff0f1; /* 错误浅底 */ --color-success: #00a870; /* 成功 */ --color-success-light: #eafaf3; /* 成功浅底 */ --color-surface: #ffffff; /* 卡片/抽屉表面（暗色主题下与页面底分离） */ --color-cta: var(--color-primary); /* 行动按钮（主题可与品牌色分离，如深蓝主题橙色按钮） */ --color-cta-dark: var(--color-primary-dark); --color-header-bg: rgba(255, 255, 255, 0.96); /* 顶部导航半透明底 */ --ph-grad-a: #ffd9bf; /* 图片占位渐变起止（随主题） */ --ph-grad-b: #ffe9d6; /* —— 字体规范 —— */ --font-base: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; --fs-base: 16px; --fs-sm: 14px; --fs-lg: 18px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; /* —— 间距规范（8px 基准）—— */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --section-padding-y: 80px; /* 分区上下内边距 */ /* —— 布局规范 —— */ --container-max: 1200px; /* 内容最大宽度（最优展示 1440px 视口下留白） */ --header-height: 64px; /* 顶部导航栏高度 */ --radius-sm: 4px; --radius-md: 8px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --transition: 0.25s ease; } /* ---------------------------------------- 2.1 站点风格主题（后台「全局配置→站点风格」切换，common.js 写入 ） 默认（无 data-theme）= 暖橙；blue = 政企深蓝+橙点缀；dark = 深色科技感 ---------------------------------------- */ html[data-theme="blue"] { --color-primary: #0c447c; --color-primary-dark: #083258; --color-primary-light: #e6f1fb; --color-cta: #d85a30; --color-cta-dark: #b8481f; --color-text: #14202e; --color-bg-soft: #eef3f9; /* 冷色调分区底，与暖橙的暖灰区分 */ --color-border: #d9e2ee; --color-footer-bg: #07223f; --ph-grad-a: #c9daf0; --ph-grad-b: #e8f0fa; } /* 深蓝主题：分区标题用品牌深蓝，强化政企气质 */ html[data-theme="blue"] .section__title, html[data-theme="blue"] .page-hero__title { color: var(--color-primary); } html[data-theme="dark"] { --color-primary: #1d9e75; --color-primary-dark: #17845f; --color-primary-light: #12302a; --color-cta: #1d9e75; --color-cta-dark: #17845f; --color-text: #f2f6fb; --color-text-secondary: #a7b7cd; --color-text-muted: #8fa3bd; --color-bg: #16233a; --color-bg-soft: #0d1420; --color-border: #26354e; --color-surface: #16233a; --color-header-bg: rgba(13, 20, 32, 0.92); --color-footer-bg: #0a1018; --color-error-light: #3a1a20; --color-success-light: #12302a; --ph-grad-a: #16233a; --ph-grad-b: #1b2a44; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); } /* ---------------------------------------- 3. 通用布局 / 排版 ---------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: var(--space-md); padding-right: var(--space-md); } /* 较窄版心：详情类长文阅读（新闻详情 / 案例详情等） */ .container--narrow { max-width: 800px; } .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } .section--soft { background-color: var(--color-bg-soft); } .section__title { font-size: var(--fs-h2); font-weight: 700; text-align: center; margin-bottom: var(--space-sm); } .section__subtitle { font-size: var(--fs-lg); color: var(--color-text-secondary); text-align: center; margin-bottom: var(--space-lg); } /* —— 二级页面标题区（业务板块 / 新闻动态等子页通用）—— */ .page-hero { margin-bottom: var(--space-lg); } .page-hero__title { font-size: var(--fs-h2); font-weight: 700; } .page-hero__subtitle { margin-top: var(--space-xs); font-size: var(--fs-base); color: var(--color-text-secondary); } /* —— 面包屑导航（详情类子页通用：新闻详情 / 案例详情等）—— */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--color-text-secondary); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb__sep { color: var(--color-text-muted); } .breadcrumb__current { color: var(--color-text-muted); /* 标题过长时省略，避免面包屑换行过多 */ max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* —— 行动按钮（橙色主按钮）—— */ .btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 500; transition: background-color var(--transition), color var(--transition); } .btn--primary { background-color: var(--color-cta); color: #fff; } .btn--primary:hover { background-color: var(--color-cta-dark); } .btn--ghost { border: 1px solid var(--color-primary); color: var(--color-primary); } .btn--ghost:hover { background-color: var(--color-primary-light); } /* ========================================================================== 4. 公共组件 —— 顶部导航栏 (Header) 固定悬浮，滚动不消失；<768px 收起为汉堡菜单 ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background-color: var(--color-header-bg); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--color-border); z-index: 1000; } .site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; } /* Logo（点击返回首页，待确认项使用占位） */ .site-logo { display: flex; align-items: center; font-size: var(--fs-lg); font-weight: 700; color: var(--color-text); white-space: nowrap; } .site-logo__img { height: 36px; margin-right: var(--space-xs); } /* PC 端导航菜单 */ .nav { display: flex; align-items: center; gap: var(--space-lg); } .nav__link { position: relative; font-size: var(--fs-base); color: var(--color-text); padding: var(--space-xs) 0; transition: color var(--transition); } .nav__link:hover, .nav__link.is-active { color: var(--color-primary); } .nav__link.is-active::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: var(--color-primary); } /* 汉堡按钮：默认隐藏，移动端显示 */ .nav-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle__bar { display: block; width: 22px; height: 2px; background-color: var(--color-text); transition: transform var(--transition), opacity var(--transition); } /* 汉堡展开态：变 X */ .nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 5. 公共组件 —— 底部页脚 (Footer) ========================================================================== */ .site-footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding: var(--space-xl) 0 var(--space-md); } .site-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .site-footer__col { min-width: 200px; } .site-footer__title { color: #fff; font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-sm); } .site-footer__item { font-size: var(--fs-sm); line-height: 2; } /* 微信公众号二维码：后台未上传则隐藏（is-hidden 控制） */ .site-footer__qrcode img { width: 120px; height: 120px; background-color: #fff; padding: 6px; border-radius: var(--radius-sm); } .site-footer__qrcode-text { font-size: var(--fs-sm); text-align: center; margin-top: var(--space-xs); } .site-footer__bottom { padding-top: var(--space-md); text-align: center; font-size: var(--fs-sm); color: var(--color-text-muted); } .site-footer__bottom a:hover { color: #fff; } /* ========================================================================== 6. 首页 7 大分区占位骨架 ========================================================================== */ /* 通用占位提示（开发期标记，正式内容替换后移除） */ .placeholder-note { border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); text-align: center; color: var(--color-text-muted); background-color: var(--color-bg-soft); } /* 1. Banner 轮播（建议 1920×700） */ .banner { position: relative; height: 560px; overflow: hidden; background-color: var(--color-bg-soft); } .banner__viewport { position: absolute; inset: 0; } /* 幻灯片：淡入淡出切换 */ .banner__slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; } .banner__slide.is-active { opacity: 1; visibility: visible; } .banner__content { position: relative; max-width: 600px; } .banner__tag { display: inline-block; font-size: var(--fs-sm); color: var(--color-primary); background-color: #fff; padding: 4px 12px; border-radius: 999px; margin-bottom: var(--space-sm); } .banner__title { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--space-sm); } .banner__desc { font-size: var(--fs-lg); color: var(--color-text-secondary); margin-bottom: var(--space-lg); } /* 翻页箭头 */ .banner__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-h3); line-height: 1; color: var(--color-text); background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; z-index: 2; transition: background-color var(--transition); } .banner__arrow:hover { background-color: #fff; } .banner__arrow--prev { left: var(--space-md); } .banner__arrow--next { right: var(--space-md); } /* 指示点 */ .banner__dots { position: absolute; left: 0; right: 0; bottom: var(--space-md); display: flex; justify-content: center; gap: var(--space-xs); z-index: 2; } .banner__dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); transition: width var(--transition), background-color var(--transition); } .banner__dot.is-active { width: 24px; border-radius: 999px; background-color: var(--color-primary); } /* 2. 关于我们：左文字 + 右 2×2 数据 */ .about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } .about__intro { font-size: var(--fs-base); color: var(--color-text-secondary); margin-bottom: var(--space-lg); } .about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .stat-card { background-color: var(--color-bg-soft); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; } .stat-card__num { font-size: var(--fs-h2); font-weight: 700; color: var(--color-primary); } .stat-card__label { font-size: var(--fs-sm); color: var(--color-text-secondary); } /* 3. 核心业务：左图 + 右文 + 箭头切换 */ .biz__inner { display: grid; grid-template-columns: 800px 1fr; gap: var(--space-lg); align-items: center; } .biz__media { aspect-ratio: 800 / 500; background-color: var(--color-bg-soft); border-radius: var(--radius-md); overflow: hidden; } .biz__media img { width: 100%; height: 100%; object-fit: cover; } .biz__index { display: inline-block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-xs); } .biz__text h3 { font-size: var(--fs-h3); margin-bottom: var(--space-sm); } .biz__text p { color: var(--color-text-secondary); margin-bottom: var(--space-lg); } /* 「了解详情」+ 左右切换箭头 */ .biz__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); } .biz__nav { display: flex; gap: var(--space-xs); } .biz__arrow { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 50%; font-size: var(--fs-h3); line-height: 1; color: var(--color-text-secondary); background-color: var(--color-bg); transition: border-color var(--transition), color var(--transition); } .biz__arrow:hover { border-color: var(--color-primary); color: var(--color-primary); } /* 4. 新闻动态：3 条卡片 */ .news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .news-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition); } .news-card:hover { box-shadow: var(--shadow-md); } /* 居中「查看全部」等分区底部操作 */ .section__more { text-align: center; margin-top: var(--space-lg); } /* 通用预览卡片网格（首页 新闻动态 / 行业案例 预览复用） */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .feature-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg); transition: box-shadow var(--transition); } .feature-card:hover { box-shadow: var(--shadow-md); } .feature-card__cover { aspect-ratio: 16 / 10; background-color: var(--color-bg-soft); overflow: hidden; } .feature-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .feature-card:hover .feature-card__cover img { transform: scale(1.04); } .feature-card__cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--color-text-muted); background: linear-gradient(120deg, var(--ph-grad-a) 0%, var(--ph-grad-b) 100%); } .feature-card__body { padding: var(--space-md); } .feature-card__meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); } .feature-card__tag { font-size: var(--fs-sm); color: var(--color-primary); background-color: var(--color-primary-light); padding: 2px 10px; border-radius: 999px; } .feature-card__time { font-size: var(--fs-sm); color: var(--color-text-muted); } .feature-card__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .feature-card:hover .feature-card__title { color: var(--color-primary); } /* 7. 联系我们：左信息 + 右表单 */ .contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); } /* ========================================================================== 7. 移动端自适应 (Responsive) 断点：768px（导航收起）、480px（小屏单列） ========================================================================== */ @media (max-width: 768px) { :root { --section-padding-y: 48px; --fs-h1: 28px; --fs-h2: 24px; } /* 导航：PC 菜单变为下拉抽屉，显示汉堡按钮 */ .nav-toggle { display: flex; } .nav { position: fixed; top: var(--header-height); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); /* 默认收起 */ transform: translateY(-150%); transition: transform var(--transition); } .nav.is-open { transform: translateY(0); } .nav__link { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-border); } /* 分区改为单列堆叠 */ .about__inner, .biz__inner, .contact__inner { grid-template-columns: 1fr; gap: var(--space-lg); } .news-list, .feature-grid { grid-template-columns: 1fr; } .banner { height: 420px; } /* 移动端：翻页箭头收窄、贴边 */ .banner__arrow { width: 36px; height: 36px; } } @media (max-width: 480px) { .about__stats { grid-template-columns: repeat(2, 1fr); } .site-footer__top { flex-direction: column; } } /* ========================================================================== 首页 · 合作伙伴 Logo 墙（后台开启模块并上传 Logo 后由 home.js 渲染） ========================================================================== */ .partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); } .partners-grid__item { display: flex; align-items: center; justify-content: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); transition: box-shadow 0.2s ease; } a.partners-grid__item:hover { box-shadow: var(--shadow-md); } .partners-grid__logo { max-width: 100%; max-height: 48px; object-fit: contain; } @media (max-width: 767px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }