/* ============================================================ 树智云｜对外公开门户 — 绿色儿童友好主题（覆盖 style.css 中的 pub-* 段） 加载顺序：style.css 之后，故同等特异度下本文件胜出。 仅作用于 body.public，不影响后台（body.app）。 设计：明亮清新绿、柔和、圆润、活泼，适配小学生阅读体验。 ============================================================ */ /* ---------- 设计令牌（仅公开站作用域） ---------- */ body.public { --p-green: #2FB372; /* 主绿：明亮清新、柔和不过艳 */ --p-green-deep: #1F9A5C; /* 深绿：标题/强调，易读 */ --p-green-bright: #49C98C; /* 亮绿：链接/点缀 */ --p-green-soft: #E7F8EF; /* 极浅薄荷底 */ --p-green-line: #CDEBDC; /* 柔和描边 */ --p-sun: #FFC24B; /* 暖阳黄：活泼点缀（克制使用） */ --p-sun-soft: #FFF3DA; --p-ink: #1F3A2C; /* 墨绿近黑，正文 */ --p-muted: #5E7A6B; /* 柔和灰绿，次要文字 */ --p-bg: #F4FBF6; /* 极浅绿白，清新 */ --p-bg2: #EAF7F0; /* 富文本正文兼容别名：外部粘贴 HTML 常引用的变量名（映射到本站色板） */ --green-deep: #1F9A5C; /* = --p-green-deep */ --green: #2FB372; /* = --p-green */ --ink-soft: #5E7A6B; /* = --p-muted */ --ink: #1F3A2C; /* = --p-ink */ --p-card: #FFFFFF; --p-radius: 20px; --p-radius-sm: 14px; --p-shadow: 0 10px 28px rgba(31,154,92,.10); --p-shadow-sm: 0 4px 14px rgba(31,154,92,.08); background: var(--p-bg); color: var(--p-ink); font-size: 16px; /* 比后台更大的基础字号，更护眼 */ line-height: 1.85; /* 宽松行距，便于小学生阅读 */ -webkit-font-smoothing: antialiased; } /* ---------- 顶部导航 ---------- */ /* 锚点定位补偿：吸顶导航（高 60px）会遮住锚点目标标题（如首页 #intro-section）， 点击页内锚点滚动时预留导航高度，确保标题完整可见 */ .public [id] { scroll-margin-top: 72px; } .pub-topnav { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--p-green-line); box-shadow: 0 2px 14px rgba(31,154,92,.06); } .pub-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 60px; } .pub-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; color: var(--p-green-deep); } .pub-brand:hover { text-decoration: none; } .pub-logo-icon { font-size: 24px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--p-green-soft); border-radius: 12px; color: var(--p-green-deep); } .pub-school-name { font-weight: 800; letter-spacing: .3px; } .pub-nav-menu { display: flex; gap: 6px; font-size: 15px; margin-left: 8px; } .pub-nav-menu a { color: var(--p-ink); padding: 8px 14px; border-radius: 999px; font-weight: 600; transition: background .15s, color .15s; } .pub-nav-menu a:hover { background: var(--p-green-soft); color: var(--p-green-deep); text-decoration: none; } .pub-nav-menu a.on { background: var(--p-green); color: #fff; box-shadow: 0 4px 12px rgba(47,179,114,.30); } .pub-btn-login { margin-left: auto; background: var(--p-green) !important; color: #fff !important; padding: 9px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(47,179,114,.28); transition: background .15s, transform .15s; } .pub-btn-login:hover { background: var(--p-green-deep) !important; color: #fff !important; text-decoration: none; transform: translateY(-1px); } /* ---------- 内容卡片区域 ---------- */ .pub-cards-section { background: linear-gradient(180deg, var(--p-bg) 0%, var(--p-bg2) 100%); padding: 26px 0 10px; } .pub-cards-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 友好欢迎语 */ .pub-welcome { background: var(--p-green-soft); border-bottom: 1px solid var(--p-green-line); } .pub-welcome-inner { max-width: 1200px; margin: 0 auto; padding: 20px 20px; } .pub-welcome p { margin: 0; text-align: center; font-size: 17px; line-height: 1.9; color: var(--p-green-deep); font-weight: 600; } /* 分区标题（活泼的绿底胶囊式小标题） */ .pub-section-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 16px; } .pub-section-head h2 { font-size: 21px; font-weight: 800; color: var(--p-green-deep); margin: 0; letter-spacing: .3px; } .pub-section-head .pub-section-emoji { font-size: 24px; } .pub-section-head .pub-section-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--p-green-line), transparent); } .pub-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; } .pub-row-mid { grid-template-columns: 1fr 1.3fr; } .pub-card { background: var(--p-card); border: 1px solid var(--p-green-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow-sm); padding: 20px; margin-bottom: 0; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .pub-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow); border-color: var(--p-green); } .pub-card-title { display: inline-block; font-size: 17px; font-weight: 400; color: var(--p-green-deep); margin-bottom: 8px; text-decoration: none; } .pub-card-title:hover { color: var(--p-green); text-decoration: none; } .pub-card-desc { color: var(--p-muted); font-size: 15px; line-height: 1.8; margin: 2px 0 12px; } .pub-link-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .pub-link-grid a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--p-green-soft); color: var(--p-green-deep); font-weight: 600; font-size: 14px; transition: background .15s, transform .15s; } .pub-link-grid a:hover { background: var(--p-green); color: #fff; text-decoration: none; transform: translateY(-1px); } .pub-card-list { padding: 20px; } /* 列表条目：保持 5 条仍与旧 3 条等高 —— 行距收紧（line-height 1.85→1.4）、上下内边距 12→5px， 单条 ≈31px（原 ≈53px），5 条总高 159px ≈ 原 3 条 160px，卡片高度不变且更细致。 */ .pub-bullet-list { list-style: none; padding: 0; margin: 0; } .pub-bullet-list li { padding: 5px 0; border-bottom: 1px dashed var(--p-green-line); display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; } .pub-bullet-list li:last-child { border-bottom: none; } /* 注意：style.css 里同选择器把 ::before 设为 position:absolute（遗留写法）， 必须显式复位为 static，否则 🌱 会脱离文档流叠在标题文字上。 */ .pub-bullet-list li::before { content: "🌱"; position: static; left: auto; top: auto; flex: none; font-size: 13px; } /* 列表条目标题：常规字重（原 600 → 400）。字体栈 PingFang SC / Microsoft YaHei 无 600 字重， 浏览器会合成伪粗体，观感偏黑重；改 400 即回归真实常规体。 */ .pub-bullet-list a { color: var(--p-ink); font-weight: 400; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pub-bullet-list a:hover { color: var(--p-green-deep); text-decoration: none; } .pub-ext-tag { font-size: 11px; background: var(--p-sun-soft); color: #B26A00; border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; flex: none; } .pub-muted { color: var(--p-muted) !important; } /* 照片卡 / 轮播卡 */ .pub-card-photo { padding: 0; display: flex; flex-direction: column; } .pub-card-photo > a { flex: 1; display: flex; min-height: 0; color: inherit; text-decoration: none; } /* 需求：前台首页图片区域移除悬停放大/位移动效——图片保持原始尺寸，鼠标悬浮时无缩放、无放大动画（不影响点击与轮播交互） */ body.public .pub-card-photo:hover, body.public .pub-card-carousel:hover, body.public .pub-card-portrait:hover { transform: none; box-shadow: var(--p-shadow-sm); } .pub-photo-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; border-radius: var(--p-radius); overflow: hidden; position: relative; background: radial-gradient(circle at 20% 20%, rgba(73,201,140,.18), transparent 45%), radial-gradient(circle at 80% 70%, rgba(47,179,114,.16), transparent 50%), var(--p-green-soft); } .pub-card-sm .pub-photo-placeholder { min-height: 150px; border-radius: var(--p-radius-sm); } .pub-card-portrait .pub-photo-placeholder { flex: 1; aspect-ratio: auto; min-height: 170px; } .pub-photo-icon { font-size: 40px; opacity: .5; } .pub-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(31,58,44,.42), transparent); color: #fff; font-size: 14px; font-weight: 700; padding: 16px 14px 10px; text-align: left; } .pub-photo-placeholder .pub-hicon { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; display: block; } /* 轮播（Edge 兼容修复：用显式 top/right/bottom/left 替代 inset 简写；占位层给出确定高度兜底， 避免 Edge 下「绝对定位 + 百分比高度」链解析异常 => 轮播图片显示异常。各内核渲染保持一致。） */ .pub-card-carousel { display: flex; flex-direction: column; } .pub-card-carousel .pub-photo-placeholder { flex: 1 1 auto; align-self: stretch; min-height: 200px; } .pub-carousel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--p-radius); } .pub-carousel-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; opacity: 0; transition: opacity .6s ease; } .pub-carousel-img.on { opacity: 1; } .pub-carousel-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 3; } .pub-carousel-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.6); cursor: pointer; transition: width .25s, background .25s; } .pub-carousel-dot.on { background: #fff; width: 22px; } /* 图标入口行：4 个横版图标卡单行排布（不换行）；图片容器随卡片宽度自适应，保持 2:1 横版比例 */ .pub-icons-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 6px 0 18px; } .pub-ic { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 22px 14px 18px; background: var(--p-card); border: 1px solid var(--p-green-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow-sm); text-decoration: none; color: var(--p-ink); transition: transform .2s, box-shadow .2s, border-color .2s; } /* 需求：移除栏目图标悬停放大/位移——保持原始尺寸，悬停仅做描边提示，不缩放、不浮起 */ .pub-ic:hover { transform: none; box-shadow: var(--p-shadow-sm); border-color: var(--p-green); text-decoration: none; } .pub-ic-box { /* 回滚单行布局：容器宽度=卡片内宽（桌面约 250px），自适应并保持 2:1 横版比例，4 卡同行不换行 */ width: 100%; aspect-ratio: 2 / 1; height: auto; border-radius: 18px; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--p-green-soft), #CDEBDD); box-shadow: inset 0 2px 8px rgba(47,179,114,.14); } /* 旧内核兜底：不支持 aspect-ratio 时按 2:1 近似固定高度 */ @supports not (aspect-ratio: 1 / 1) { .pub-ic-box { height: 125px; } } .pub-ic-teal .pub-ic-box { background: linear-gradient(145deg, #EAF7F0, #CDEBDD); } .pub-ic-gold .pub-ic-box { background: linear-gradient(145deg, var(--p-sun-soft), #FFE2A6); } /* 图片居中等比填充：cover + object-position 居中，旧正方形图标自动居中裁剪，禁止拉伸变形 */ .pub-ic-box .pub-hicon { width: 100%; height: 100%; object-fit: cover; object-position: center center; max-width: none; max-height: none; display: block; } .pub-ic-box .emoji { font-size: 56px; line-height: 1; } .pub-ic-label { font-size: 15px; font-weight: 700; color: var(--p-green-deep); } /* ---------- 系统介绍横幅 ---------- */ .intro-band { max-width: 1200px; margin: 8px auto 0; padding: 34px 24px 30px; text-align: center; background: linear-gradient(180deg, var(--p-bg2), var(--p-bg)); } .intro-band h2 { font-size: 22px; color: var(--p-green-deep); margin-bottom: 12px; font-weight: 800; } .intro-band p { font-size: 17px; color: var(--p-muted); max-width: 820px; margin: 0 auto; line-height: 1.95; } /* ---------- 页脚 ---------- */ .pub-footer { background: var(--p-green-deep); color: #d8f0e2; padding: 28px 18px 30px; margin-top: 18px; } .pub-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .pub-footer-links { font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; } .pub-footer-links a { color: #d8f0e2; text-decoration: none; font-weight: 600; } .pub-footer-links a:hover { color: #fff; } .pub-sep { margin: 0 8px; color: rgba(255,255,255,.4); } .pub-copyright { font-size: 13px; color: #a9d8bf; margin: 0; } /* ============================================================ 新闻详情页（home/news.php，作用域限定 body.public） ============================================================ */ body.public .news-detail.card { background: var(--p-card); border: 1px solid var(--p-green-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow-sm); padding: 30px 34px; margin-bottom: 22px; max-width: 880px; } body.public .news-detail h2 { font-size: 25px; font-weight: 800; color: var(--p-green-deep); line-height: 1.4; margin: 0 0 12px; } body.public .news-detail .meta { font-size: 13px; color: var(--p-muted); margin: 0 0 18px; } body.public .news-detail .content, body.public .news-rich.content { font-size: 16.5px; line-height: 1.95; color: var(--p-ink); word-break: break-word; } body.public .news-detail .content img, body.public .news-rich.content img { max-width: 100%; height: auto; border-radius: var(--p-radius-sm); margin: 14px 0; display: block; } body.public .news-detail .content h2, body.public .news-detail .content h3, body.public .news-rich.content h2, body.public .news-rich.content h3 { color: var(--p-green-deep); margin: 24px 0 10px; } body.public .news-detail .content a, body.public .news-rich.content a { color: var(--p-green-deep); } body.public .news-detail .content ul, body.public .news-detail .content ol, body.public .news-rich.content ul, body.public .news-rich.content ol { padding-left: 24px; } body.public .news-detail .content li, body.public .news-rich.content li { margin: 8px 0; } body.public .news-src { font-size: 14px; color: var(--p-muted); background: var(--p-green-soft); border-radius: var(--p-radius-sm); padding: 10px 14px; margin-top: 16px; } body.public .news-ext { background: var(--p-green-soft); border-radius: var(--p-radius-sm); padding: 18px; margin-top: 8px; } body.public .news-ext-tip { font-weight: 700; color: var(--p-green-deep); margin: 0 0 10px; } body.public .video-embed { border-radius: var(--p-radius-sm); overflow: hidden; } /* 新闻详情页「其他新闻」侧栏 / 列表 */ body.public aside.card { background: var(--p-card); border: 1px solid var(--p-green-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow-sm); padding: 20px; margin-bottom: 22px; } body.public aside.card h3 { font-size: 17px; color: var(--p-green-deep); margin: 0 0 12px; } body.public .news-list { list-style: none; padding: 0; margin: 0; } body.public .news-list li { padding: 10px 0; border-bottom: 1px dashed var(--p-green-line); } body.public .news-list li:last-child { border-bottom: none; } body.public .news-list a { color: var(--p-ink); font-weight: 400; font-size: 15px; } body.public .news-list a:hover { color: var(--p-green-deep); text-decoration: none; } body.public .news-list time { display: block; font-size: 12px; color: var(--p-muted); margin-top: 3px; } body.public .news-detail + p a, body.public .pub-cards-inner > p a { color: var(--p-green-deep); font-weight: 700; } /* 新闻详情页主容器：双栏（正文 + 侧栏） */ body.public .pub-news-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; } body.public .pub-news-layout > p:last-child { grid-column: 1 / -1; } /* ============================================================ 二级栏目列表页（home/column.php） 该类页的内联