/* ============================================================ 产品解决方案 / 平台页面 通用样式 抽取自 student-management-service.html 验证通过的样式， 并严格匹配各平台页实际 HTML 类名（zs-/jw-/rl-/school-info/visual-/sol-/feature-）， 实现一份共享、全平台复用。 各平台页 引入： ============================================================ */ /* ====== 顶部横幅区（平台页通用） ====== */ .page-banner { background: linear-gradient(135deg, #1a3a6b 0%, #2d6cb4 100%); color: #fff; padding: 70px 0 50px; text-align: center; } .banner-content { max-width: 900px; margin: 0 auto; padding: 0 20px; } .banner-content h1 { font-size: 40px; font-weight: 700; margin-bottom: 18px; letter-spacing: 2px; } .banner-subtitle { font-size: 17px; line-height: 1.9; opacity: 0.92; } .banner-tag-list { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .banner-tag-list span { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); padding: 6px 16px; border-radius: 20px; font-size: 14px; } .breadcrumb { margin-top: 24px; font-size: 14px; } .breadcrumb a { color: #cfe0ff; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* ====== 区块背景与容器 ====== */ .bg-white { background: #fff; } .bg-light { background: #f5f7fa; } .section-wrapper { max-width: 1428px; margin: 0 auto; padding: 70px 20px; } .section-divider { max-width: 1428px; margin: 0 auto; } .section-divider hr { border: none; border-top: 1px solid #e8edf3; } /* ====== 特性（左文右图）区块（学生管理平台 feature- 体系） ====== */ .feature-section { display: flex; align-items: center; gap: 50px; } .feature-section.reverse { flex-direction: row-reverse; } .feature-image { flex: 1; min-width: 0; } .feature-image img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); display: block; } .feature-text { flex: 1; min-width: 0; } /* 占位图（渐变卡片） */ .img-placeholder { border-radius: 14px; padding: 50px 20px; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .placeholder-icon { font-size: 64px; margin-bottom: 14px; } .placeholder-label { font-size: 20px; font-weight: 600; letter-spacing: 1px; } /* 渐变配色（8 套） */ .bg-grad-1 { background: linear-gradient(135deg, #1a3a6b, #2d6cb4); } .bg-grad-2 { background: linear-gradient(135deg, #2d6cb4, #4f9ed9); } .bg-grad-3 { background: linear-gradient(135deg, #5b2c87, #8e44ad); } .bg-grad-4 { background: linear-gradient(135deg, #117a8b, #20c0d6); } .bg-grad-5 { background: linear-gradient(135deg, #b53471, #e84393); } .bg-grad-6 { background: linear-gradient(135deg, #c0392b, #e67e22); } .bg-grad-7 { background: linear-gradient(135deg, #1e8449, #58d68d); } .bg-grad-8 { background: linear-gradient(135deg, #6c3483, #af7ac5); } .bg-grad-9 { background: linear-gradient(135deg, #a8590c, #d68910); } /* 文字与标签 */ .section-number { color: #2d6cb4; font-size: 14px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; opacity: 0.8; } .feature-text h2 { font-size: 26px; color: #1a3a6b; margin-bottom: 18px; font-weight: 600; } .feature-text h3 { font-size: 19px; color: #1a3a6b; margin: 18px 0 10px; font-weight: 600; } .feature-text p { font-size: 15px; color: #555; line-height: 1.9; margin-bottom: 12px; } .feature-subtitle { font-size: 19px; color: #1a3a6b; margin: 4px 0 14px; font-weight: 600; } .feature-desc { font-size: 15px; color: #555; line-height: 1.9; } .feature-highlights { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .highlight-tag { background: #eef4fc; color: #2d6cb4; border: 1px solid #d4e4f7; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; } /* ============================================================ 各平台页实际 HTML 类名兼容映射 （严格按照页面中真实使用的 class 补齐，避免定义与 HTML 脱节） ============================================================ */ /* —— 招生就业平台 zs-* —— */ .zs-section { padding: 60px 0; } .zs-section-container { max-width: 1428px; margin: 0 auto; padding: 0 20px; } .zs-section-row { display: flex; align-items: center; gap: 50px; } .zs-section-row.reverse { flex-direction: row-reverse; } .zs-section-visual { flex: 1; min-width: 0; border-radius: 14px; padding: 60px 20px; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; min-height: 220px; } .zs-section-content { flex: 1; min-width: 0; } .zs-section-content h2 { font-size: 26px; color: #1a3a6b; margin-bottom: 18px; font-weight: 600; } .zs-section-content h3 { font-size: 19px; color: #1a3a6b; margin-bottom: 14px; font-weight: 600; } .zs-text { font-size: 15px; color: #555; line-height: 1.9; } .zs-highlights { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .zs-tag { background: #eef4fc; color: #2d6cb4; border: 1px solid #d4e4f7; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; } .zs-number { color: #2d6cb4; font-size: 14px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; opacity: 0.8; } /* zs 占位图配色 */ .zs-bg-blue { background: linear-gradient(135deg, #1a3a6b, #2d6cb4); } .zs-bg-indigo { background: linear-gradient(135deg, #5b2c87, #8e44ad); } .zs-bg-teal { background: linear-gradient(135deg, #117a8b, #20c0d6); } .zs-bg-orange { background: linear-gradient(135deg, #c0392b, #e67e22); } .zs-bg-purple { background: linear-gradient(135deg, #6c3483, #af7ac5); } .zs-bg-cyan { background: linear-gradient(135deg, #13547a, #80d0c7); } .zs-bg-green { background: linear-gradient(135deg, #1e8449, #58d68d); } .zs-bg-red { background: linear-gradient(135deg, #b53471, #e84393); } .zs-bg-amber { background: linear-gradient(135deg, #d68910, #f1c40f); } /* —— 教务管理平台 jw-* —— */ .jw-section { padding: 60px 0; } .jw-section-white { background: #fff; } .jw-section-gray { background: #f5f7fa; } .jw-row { display: flex; align-items: center; gap: 50px; max-width: 1428px; margin: 0 auto; padding: 0 20px; } .jw-row.reverse { flex-direction: row-reverse; } .jw-icon { width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, #1a3a6b, #2d6cb4); color: #fff; box-shadow: 0 8px 20px rgba(26,58,107,0.3); margin-bottom: 18px; } .jw-text { flex: 1; min-width: 0; } .jw-text h2 { font-size: 26px; color: #1a3a6b; margin-bottom: 18px; font-weight: 600; } .jw-text h3 { font-size: 19px; color: #1a3a6b; margin-bottom: 14px; font-weight: 600; } .jw-text p { font-size: 15px; color: #555; line-height: 1.9; } .jw-highlights { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .jw-tag { background: #eef4fc; color: #2d6cb4; border: 1px solid #d4e4f7; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; } /* —— 后勤管理平台 rl-* —— */ .rl-section { padding: 70px 0; } .rl-container { max-width: 1428px; margin: 0 auto; padding: 0 20px; } .rl-section-header { text-align: center; margin-bottom: 50px; } .rl-section-header h2 { font-size: 30px; color: #1a3a6b; margin-bottom: 12px; font-weight: 600; } .rl-section-header p { font-size: 16px; color: #666; max-width: 760px; margin: 0 auto; } .rl-flex { display: flex; align-items: center; gap: 50px; } .rl-flex-reverse { flex-direction: row-reverse; } .rl-img { flex: 1; min-width: 0; } .rl-img img { width: 100%; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .rl-placeholder { border-radius: 14px; padding: 70px 20px; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .rl-text { flex: 1; min-width: 0; } .rl-text h2 { font-size: 26px; color: #1a3a6b; margin-bottom: 18px; font-weight: 600; } .rl-text h3 { font-size: 19px; color: #1a3a6b; margin-bottom: 14px; font-weight: 600; } .rl-text p { font-size: 15px; color: #555; line-height: 1.9; } .rl-tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .rl-tag { background: #eef4fc; color: #2d6cb4; border: 1px solid #d4e4f7; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; } /* 资产管理网格 */ .rl-asset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; } .rl-asset-card { background: #f5f7fa; border: 1px solid #e8edf3; border-radius: 10px; padding: 18px; text-align: center; } .rl-asset-card .num { font-size: 26px; font-weight: 700; color: #2d6cb4; } .rl-asset-card .label { font-size: 13px; color: #666; margin-top: 6px; } /* —— 基础数据 / 一站式 / 观测中心 visual-* 占位（school-info 体系由 style.css 提供） —— */ .visual-placeholder { border-radius: 14px; padding: 50px 20px; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .visual-label { font-size: 20px; font-weight: 600; letter-spacing: 1px; } .visual-bg-1 { background: linear-gradient(135deg, #1a3a6b, #2d6cb4); } .visual-bg-2 { background: linear-gradient(135deg, #2d6cb4, #4f9ed9); } .visual-bg-3 { background: linear-gradient(135deg, #5b2c87, #8e44ad); } .visual-bg-4 { background: linear-gradient(135deg, #117a8b, #20c0d6); } .visual-bg-5 { background: linear-gradient(135deg, #b53471, #e84393); } .visual-bg-6 { background: linear-gradient(135deg, #1e8449, #58d68d); } .visual-bg-7 { background: linear-gradient(135deg, #c0392b, #e67e22); } .visual-bg-8 { background: linear-gradient(135deg, #6c3483, #af7ac5); } .visual-bg-blue { background: linear-gradient(135deg, #1a3a6b, #2d6cb4); } .visual-bg-indigo { background: linear-gradient(135deg, #2d6cb4, #4f9ed9); } .visual-bg-orange { background: linear-gradient(135deg, #c0392b, #e67e22); } .visual-bg-purple { background: linear-gradient(135deg, #6c3483, #af7ac5); } .visual-bg-cyan { background: linear-gradient(135deg, #117a8b, #20c0d6); } /* —— 一站式/观测中心 sol-* 标签 —— */ .sol-tag-list { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .sol-tag { background: #eef4fc; color: #2d6cb4; border: 1px solid #d4e4f7; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; } /* ====== 解决方案总览首页 sol-*（index.html 卡片网格） ====== */ .sol-overview { background: #fff; padding: 70px 0; text-align: center; } .sol-overview-inner { max-width: 1428px; margin: 0 auto; padding: 0 20px; } .sol-overview-inner h2 { font-size: 30px; color: #1a3a6b; margin-bottom: 18px; font-weight: 600; } .sol-overview-inner p { font-size: 16px; color: #666; line-height: 2; max-width: 1000px; margin: 0 auto; } /* 十六大平台卡片网格 */ .sol-grid { max-width: 1100px; margin: 0 auto; padding: 60px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; background: #f5f7fa; } .sol-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8edf3; border-radius: 14px; padding: 28px 26px; text-decoration: none; color: inherit; box-shadow: 0 6px 18px rgba(26,58,107,0.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .sol-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(26,58,107,0.14); border-color: #2d6cb4; } .sol-card-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eef2f7; } .sol-num { font-size: 30px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #1a3a6b, #2d6cb4); -webkit-background-clip: text; background-clip: text; color: transparent; } .sol-card-header h2 { font-size: 20px; color: #1a3a6b; font-weight: 600; margin: 0; } .sol-card-body { flex: 1; display: flex; flex-direction: column; } .sol-card-body p { font-size: 14px; color: #666; line-height: 1.9; margin-bottom: 18px; } .sol-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .sol-card .sol-tag { background: #eef4fc; color: #2d6cb4; border: 1px solid #d4e4f7; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; } /* CTA 区域（首页内联样式已设置，此处仅作兜底兼容） */ .sol-cta h2 { margin-bottom: 16px; } .sol-cta a:hover { opacity: 0.88; transition: opacity .2s ease; } /* ====== 响应式（移动端） ====== */ @media (max-width: 1100px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sol-grid { grid-template-columns: 1fr; padding: 40px 16px; gap: 20px; } .sol-overview { padding: 50px 0; } .sol-overview-inner h2 { font-size: 24px; } .sol-card-header h2 { font-size: 18px; } } /* ====== 响应式（移动端） ====== */ @media (max-width: 900px) { .feature-section, .feature-section.reverse, .zs-section-row, .zs-section-row.reverse, .jw-row, .jw-row.reverse, .rl-flex, .rl-flex-reverse { flex-direction: column; gap: 30px; } .banner-content h1 { font-size: 30px; } .section-wrapper, .zs-section-container { padding: 50px 16px; } .rl-asset-grid { grid-template-columns: repeat(2, 1fr); } .jw-section, .rl-section { padding: 50px 16px; } .jw-row { padding: 0 16px; } }