/* ========== IMA网站统一CSS变量系统 ========== */
:root {
--primary: #0F2B5B;
--primary-dark: #0A1F42;
--primary-light: #1A365D;
--gold: #D4AF37;
--gold-dark: #B8860B;
--gold-light: #E6C97A;
--gold-soft: rgba(212, 175, 55, 0.15);
--bg: #F0F4F8;
--surface: #FFFFFF;
--text: #1A1F2B;
--text-muted: #64748B;
--text-light: #94A3B8;
--border: rgba(15, 43, 91, 0.12);
--border-light: rgba(15, 43, 91, 0.06);
--border-gold: rgba(212, 175, 55, 0.3);
--shadow-sm: 0 1px 2px rgba(10, 31, 66, 0.04);
--shadow-md: 0 4px 16px rgba(10, 31, 66, 0.08);
--shadow-lg: 0 12px 40px rgba(10, 31, 66, 0.12);
--shadow-gold: 0 8px 32px rgba(212, 175, 55, 0.25);
--radius: 16px;
--radius-sm: 12px;
--container: 1280px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font);
background: linear-gradient(135deg, #F0F4F8 0%, #E2E8F0 50%, #F8FAFC 100%);
background-attachment: fixed;
color: var(--text);
line-height: 1.7;
font-size: 16px;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: all 0.2s var(--ease); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: 72px 0; position: relative; }
.section-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 40px; padding-bottom: 16px;
border-bottom: 2px solid var(--border-light);
}
.section-title {
font-size: 26px; font-weight: 700; color: var(--primary);
display: flex; align-items: center; gap: 12px;
}
.section-title::before {
content: ''; width: 5px; height: 28px;
background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 3px;
}
.section-subtitle {
font-size: 15px; color: var(--text-muted);
margin-top: 8px; max-width: 520px;
}
.view-all {
font-size: 14px; color: var(--primary-light); font-weight: 600;
display: flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 20px;
transition: all 0.3s var(--ease);
}
.view-all:hover {
background: var(--gold-soft);
color: var(--gold-dark);
transform: translateX(4px);
}
.view-all::after { content: '→'; transition: transform 0.2s var(--ease); }
.view-all:hover::after { transform: translateX(4px); }
/* ========== 顶部导航 ========== */
header {
position: sticky; top: 0; z-index: 100;
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
border-bottom: 2px solid var(--border-gold);
padding: 0;
box-shadow: 0 4px 24px rgba(10, 31, 66, 0.2);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.logo {
display: flex; align-items: center; gap: 10px;
color: var(--surface); font-weight: 700; font-size: 25px;
letter-spacing: -0.3px; padding: 16px 0;
}
.logo-badge {
font-size: 11px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
padding: 3px 10px; border-radius: 6px; font-weight: 700;
letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(212,175,55,0.3);
}
.logo-en {
font-size: 11px; color: var(--gold-light); font-weight: 500;
margin-left: 4px; letter-spacing: 1px; display: none;
}
@media(min-width: 1200px) { .logo-en { display: block; } }
.nav-menu {
display: flex; gap: 0; align-items: stretch;
position: relative;
margin: 0 auto;
}
.nav-item { position: relative; }
.nav-item > a {
display: flex; align-items: center; justify-content: center;
padding: 20px 18px;
font-weight: 500; color: rgba(255,255,255,0.9); font-size: 14px;
transition: all 0.3s var(--ease);
white-space: nowrap; height: 100%;
position: relative;
}
.nav-item > a::after {
content: ''; position: absolute; bottom: 0; left: 50%;
width: 0; height: 3px; background: var(--gold);
transition: all 0.3s var(--ease); transform: translateX(-50%);
}
.nav-item:hover > a, .nav-item.active > a {
color: var(--gold);
background: rgba(212,175,55,0.1);
}
.nav-item:hover > a::after, .nav-item.active > a::after { width: 70%; }
.submenu {
position: absolute; top: 100%; left: 0;
min-width: 180px; background: var(--surface);
box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
border-top: 3px solid var(--gold);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all 0.3s var(--ease); z-index: 1000;
padding: 8px 0;
}
.nav-item:hover .submenu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
display: block; padding: 11px 20px;
color: var(--text); font-size: 13px; font-weight: 500;
transition: all 0.2s var(--ease);
border-left: 3px solid transparent;
}
.submenu a:hover {
background: var(--gold-soft);
color: var(--gold-dark);
padding-left: 24px;
border-left-color: var(--gold);
}
.nav-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.btn-nav {
padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 13px;
cursor: pointer; transition: all 0.3s var(--ease); border: none;
}
.btn-nav-outline {
background: transparent; color: var(--gold);
border: 2px solid var(--gold);
}
.btn-nav-outline:hover {
background: var(--gold);
color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}
.btn-nav-gold {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}
.btn-nav-gold:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(184,134,11,0.4);
}
.mobile-toggle {
display: none; background: none; border: none;
font-size: 26px; cursor: pointer; color: var(--surface); padding: 16px;
}
/* ========== 广告位 ========== */
.ad-banner {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
padding: 0;
border-bottom: 2px solid var(--border-gold);
position: relative;
overflow: hidden;
height: 45px;
line-height: 45px;
}
.ad-banner::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 50%, rgba(212,175,55,0.1) 0%, transparent 50%);
}
.ad-content {
position: relative;
z-index: 2;
height: 45px;
overflow: hidden;
}
.ad-item {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
opacity: 0;
transform: translateY(100%);
transition: all 0.5s ease;
}
.ad-item.active {
opacity: 1;
transform: translateY(0);
}
.ad-text {
color: var(--surface);
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
flex: 1;
max-width: 800px;
height: 45px;
line-height: 45px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ad-text::before {
content: '📢';
animation: pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.ad-link {
color: var(--gold);
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 6px 14px;
border-radius: 20px;
border: 2px solid var(--gold);
transition: all 0.3s var(--ease);
flex-shrink: 0;
height: 32px;
line-height: 1;
margin-right: 13px;
}
.ad-link:hover {
background: var(--gold);
color: var(--primary-dark);
transform: translateY(-2px);
}
.ad-link::after { content: '→'; transition: transform 0.2s; }
.ad-link:hover::after { transform: translateX(4px); }
/* ========== 顶部幻灯片（居中+背景图）========== */
.hero-slider {
position: relative; height: 560px; overflow: hidden;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}
.slider-bg-container {
position: absolute;
inset: 0;
z-index: 1;
}
.slider-bg {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.7s ease;
overflow: hidden;
}
.slider-bg.active {
opacity: 0.25;
}
.slider-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slider-track {
display: flex; transition: transform 0.7s var(--ease);
height: 100%; position: relative; z-index: 2;
}
.slide {
min-width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: 0 50px; position: relative;
}
.slide::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(212,175,55,0.08) 0%, transparent 60%);
}
.slide-content {
position: relative; z-index: 2;
text-align: center;
max-width: 800px;
padding: 40px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.slide-tag {
display: inline-flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(212,175,55,0.25) 100%);
color: var(--gold-dark);
padding: 6px 16px; border-radius: 24px;
font-size: 12px; font-weight: 700; margin-bottom: 20px;
border: 2px solid var(--border-gold);
box-shadow: 0 2px 12px rgba(212,175,55,0.2);
}
.slide-title {
font-size: clamp(32px, 4vw, 42px);
font-weight: 700; color: var(--surface);
margin-bottom: 16px; line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.slide-desc {
font-size: 17px; color: rgba(255,255,255,0.9);
margin-bottom: 28px; line-height: 1.7;
}
.slide-cta {
display: inline-flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
padding: 14px 32px; border-radius: 10px;
font-weight: 700; font-size: 15px;
transition: all 0.3s var(--ease);
box-shadow: 0 4px 16px rgba(212,175,55,0.4);
}
.slide-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 24px rgba(184,134,11,0.5);
}
.slider-controls {
position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 16px; z-index: 3;
}
.slider-dots { display: flex; gap: 10px; }
.slider-dot {
width: 12px; height: 12px; border-radius: 50%;
background: rgba(255,255,255,0.4); border: 2px solid transparent;
cursor: pointer; transition: all 0.3s var(--ease);
}
.slider-dot.active {
background: var(--gold);
border-color: var(--surface);
transform: scale(1.3);
box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}
.slider-arrows { display: flex; gap: 10px; }
.slider-arrow {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 2px solid rgba(255,255,255,0.3);
color: var(--surface);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.3s var(--ease);
font-size: 20px; font-weight: 300;
}
.slider-arrow:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--primary-dark);
transform: scale(1.1);
}
/* ========== 证书查询（精美背景+优化排版）========== */
.query-section {
padding: 60px 0;
background: linear-gradient(135deg, rgba(15,43,91,0.03) 0%, rgba(212,175,55,0.05) 100%);
border-bottom: 2px solid var(--border-gold);
position: relative;
overflow: hidden;
}
.query-section::before {
content: ''; position: absolute; top: -50%; right: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);
border-radius: 50%;
}
.query-section::after {
content: ''; position: absolute; bottom: -40%; left: -5%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(15,43,91,0.06) 0%, transparent 65%);
border-radius: 50%;
}
.query-card {
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
border-radius: var(--radius);
border: 2px solid var(--border-gold);
border-left: 5px solid var(--gold);
box-shadow: var(--shadow-lg), var(--shadow-gold);
padding: 36px 40px;
display: flex; align-items: center; gap: 28px;
position: relative; z-index: 2;
backdrop-filter: blur(10px);
}
.query-icon {
width: 64px; height: 64px; flex-shrink: 0;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
box-shadow: 0 4px 16px rgba(212,175,55,0.4);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.query-content { flex: 1; }
.query-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.query-title {
font-size: 20px; font-weight: 700; color: var(--primary);
display: flex; align-items: center; gap: 10px;
}
.query-title::before {
content: ''; width: 4px; height: 24px;
background: var(--gold); border-radius: 2px;
}
.query-subtitle {
font-size: 14px; color: var(--text-muted);
font-weight: 500;
}
.query-form {
display: flex; gap: 16px; align-items: flex-end;
}
.form-group { flex: 1; min-width: 140px; }
.form-label {
display: block; font-size: 13px; font-weight: 600;
color: var(--primary); margin-bottom: 6px;
}
.form-input {
width: 100%; padding: 12px 16px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 14px; color: var(--text);
background: var(--surface);
transition: all 0.3s var(--ease);
font-weight: 500;
}
.form-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 4px var(--gold-soft);
transform: translateY(-2px);
}
.query-btn {
padding: 12px 32px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
border: none; border-radius: 10px;
font-size: 15px; font-weight: 700;
cursor: pointer;
transition: all 0.3s var(--ease);
white-space: nowrap;
box-shadow: 0 4px 16px rgba(212,175,55,0.3);
}
.query-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(184,134,11,0.4);
}
.query-note {
font-size: 12px; color: var(--text-light);
margin-top: 10px; font-style: italic;
}
.query-result {
display: none; margin-top: 20px; padding: 24px;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-radius: 12px;
border-left: 5px solid #22c55e;
box-shadow: 0 4px 16px rgba(34,197,94,0.15);
}
.query-result.active {
display: block;
animation: slideUp 0.4s var(--ease);
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.result-header {
font-size: 16px; color: #166534; font-weight: 700;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(34,197,94,0.2);
}
.result-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.result-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
.result-label {
color: #6b7280;
font-weight: 600;
min-width: 90px;
flex-shrink: 0;
}
.result-value {
color: #1f2937;
font-weight: 500;
}
.result-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.result-card {
background: rgba(255,255,255,0.7);
padding: 16px;
border-radius: 8px;
border: 1px solid rgba(34,197,94,0.2);
}
.result-card-title {
font-size: 14px;
font-weight: 700;
color: #166534;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(34,197,94,0.2);
}
.result-error {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #dc2626;
font-weight: 500;
}
.result-success {
display: flex; align-items: center; gap: 12px;
font-size: 14px; color: #166534; font-weight: 500;
}
.result-icon {
width: 24px; height: 24px; border-radius: 50%;
background: #22c55e; color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
/* ========== 作品展示（横向滚动）========== */
.gallery-section {
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
position: relative;
overflow: hidden;
}
.gallery-wrapper {
position: relative;
padding: 0 60px;
}
.gallery-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 20px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item {
flex: 0 0 320px;
height: 420px;
position: relative;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-md);
transition: all 0.4s var(--ease);
}
.gallery-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-lg), var(--shadow-gold);
}
.gallery-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.gallery-item:hover .gallery-img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(10,31,66,0.9) 0%, rgba(10,31,66,0.4) 50%, transparent 100%);
opacity: 0;
transition: all 0.4s var(--ease);
display: flex; flex-direction: column;
justify-content: flex-end;
padding: 24px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-tag {
font-size: 11px; color: var(--gold);
font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; margin-bottom: 8px;
display: inline-block;
padding: 4px 12px;
background: rgba(212,175,55,0.2);
border-radius: 12px;
width: fit-content;
}
.gallery-title {
font-size: 18px; color: white;
font-weight: 700; line-height: 1.4;
margin-bottom: 8px;
}
.gallery-author {
font-size: 13px; color: rgba(255,255,255,0.85);
font-weight: 500;
}
.gallery-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 50px; height: 50px;
background: var(--surface);
border: 2px solid var(--border-gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 20px;
color: var(--gold);
box-shadow: var(--shadow-md);
transition: all 0.3s var(--ease);
z-index: 10;
}
.gallery-nav:hover {
background: var(--gold);
color: var(--primary-dark);
transform: translateY(-50%) scale(1.1);
}
.gallery-nav.prev { left: 0; }
.gallery-nav.next { right: 0; }
/* ========== 行业动态（轮播+鼠标效果）========== */
.news-section {
background: linear-gradient(135deg, rgba(15,43,91,0.02) 0%, rgba(212,175,55,0.03) 100%);
position: relative;
}
.news-carousel {
position: relative;
overflow: hidden;
padding: 20px 0;
}
.news-track {
display: flex;
transition: transform 0.6s var(--ease);
}
.news-item {
flex: 0 0 calc(50% - 12px);
padding: 24px 28px;
background: var(--surface);
border-radius: var(--radius-sm);
border: 2px solid var(--border);
border-left: 4px solid var(--gold);
box-shadow: var(--shadow-sm);
margin-right: 24px;
transition: all 0.3s var(--ease);
cursor: pointer;
}
.news-item:hover {
transform: translateX(8px) translateY(-4px);
box-shadow: var(--shadow-lg), 0 0 0 2px var(--gold-soft);
border-left-color: var(--gold-dark);
}
.news-item::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(212,175,55,0.03) 0%, transparent 50%);
opacity: 0; transition: opacity 0.3s;
border-radius: inherit; pointer-events: none;
}
.news-item:hover::before { opacity: 1; }
.news-tag {
display: inline-block;
font-size: 11px; font-weight: 700;
padding: 4px 12px; border-radius: 12px;
margin-bottom: 10px;
background: linear-gradient(135deg, rgba(30,58,95,0.1) 0%, rgba(30,58,95,0.05) 100%);
color: var(--primary-light);
border: 1px solid rgba(30,58,95,0.15);
}
.news-tag.event {
background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(212,175,55,0.08) 100%);
color: var(--gold-dark);
border-color: var(--border-gold);
}
.news-title {
font-size: 16px; font-weight: 700;
color: var(--primary);
margin-bottom: 8px; line-height: 1.5;
transition: color 0.2s;
}
.news-item:hover .news-title { color: var(--gold-dark); }
.news-meta {
font-size: 13px; color: var(--text-light);
display: flex; align-items: center; gap: 12px;
}
.news-meta span {
display: flex; align-items: center; gap: 4px;
}
.news-meta span::before {
content: ''; width: 4px; height: 4px;
background: var(--gold); border-radius: 50%;
}
.news-controls {
display: flex; justify-content: center; gap: 12px; margin-top: 32px;
}
.news-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: all 0.3s var(--ease);
}
.news-dot.active {
background: var(--gold);
transform: scale(1.3);
box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}
/* ========== 行业赛事（加强高级感效果）========== */
.events-section {
background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}
.events-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.event-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
border-top: 5px solid var(--gold);
overflow: hidden;
transition: all 0.4s var(--ease);
position: relative;
height: 420px;
display: flex; flex-direction: column;
}
.event-card::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(212,175,55,0.03) 0%, transparent 50%);
opacity: 0; transition: opacity 0.4s;
pointer-events: none;
}
.event-card:hover {
transform: translateY(-12px);
box-shadow: var(--shadow-lg), var(--shadow-gold);
border-color: var(--border-gold);
}
.event-card:hover::before { opacity: 1; }
.event-badge {
position: absolute; top: 16px; right: 16px;
font-size: 11px; font-weight: 700;
padding: 6px 14px; border-radius: 20px;
z-index: 2; color: white;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.event-badge.upcoming {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
animation: pulse-badge 2s ease-in-out infinite;
}
.event-badge.ended {
background: linear-gradient(135deg, var(--text-light) 0%, #64748B 100%);
}
@keyframes pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.event-image {
height: 160px;
background: linear-gradient(135deg, #1E3A5F 0%, #0F2B5B 100%);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85); font-size: 13px;
text-align: center; padding: 20px;
position: relative; overflow: hidden;
}
.event-image::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.15) 0%, transparent 50%);
}
.event-image::after {
content: '🏆'; font-size: 48px; opacity: 0.3;
}
.event-content {
padding: 24px;
flex: 1; display: flex; flex-direction: column;
}
.event-title {
font-size: 18px; font-weight: 700;
color: var(--primary);
margin-bottom: 12px; line-height: 1.4;
}
.event-info {
font-size: 13px; color: var(--text-muted);
margin-bottom: 16px;
flex: 1;
}
.event-info-item {
display: flex; align-items: flex-start; gap: 8px;
margin-bottom: 8px;
padding-left: 8px;
border-left: 2px solid var(--border-gold);
}
.event-info-item::before {
content: ''; width: 6px; height: 6px;
background: var(--gold); border-radius: 50%;
margin-top: 6px; flex-shrink: 0;
}
.event-cta {
display: block; width: 100%;
padding: 12px; text-align: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
border-radius: 8px;
font-weight: 700; font-size: 14px;
transition: all 0.3s var(--ease);
border: 2px solid transparent;
}
.event-cta:hover {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(212,175,55,0.3);
}
.event-cta.disabled {
background: var(--bg);
color: var(--text-light);
cursor: not-allowed;
border-color: var(--border);
}
.event-cta.disabled:hover {
transform: none; box-shadow: none;
}
/* ========== 联盟院校 & 名师 ========== */
.grid-section {
display: grid; grid-template-columns: 1.1fr 1.3fr;
gap: 32px;
}
.grid-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
border-top: 5px solid var(--gold);
box-shadow: var(--shadow-md);
padding: 28px;
transition: all 0.3s var(--ease);
}
.grid-card:hover {
box-shadow: var(--shadow-lg), 0 0 0 2px var(--gold-soft);
}
.grid-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 22px; padding-bottom: 16px;
border-bottom: 2px solid var(--border-light);
}
.grid-title {
font-size: 19px; font-weight: 700;
color: var(--primary);
display: flex; align-items: center; gap: 10px;
}
.grid-title::before {
content: ''; width: 5px; height: 20px;
background: var(--gold); border-radius: 3px;
}
.school-list {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px 16px;
}
.school-item {
font-size: 14px; color: var(--text);
padding: 8px 12px;
border-bottom: 1px dashed var(--border-light);
border-left: 3px solid transparent;
transition: all 0.2s var(--ease);
border-radius: 0 6px 6px 0;
}
.school-item:hover {
color: var(--primary-light);
background: var(--gold-soft);
border-left-color: var(--gold);
padding-left: 16px;
}
.master-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 20px; padding-bottom: 16px;
border-bottom: 2px solid var(--border-light);
}
.master-tag {
font-size: 12px; padding: 6px 14px;
border-radius: 18px;
background: var(--bg);
color: var(--text-muted);
border: 2px solid var(--border-light);
cursor: pointer;
transition: all 0.3s var(--ease);
font-weight: 500;
}
.master-tag:hover, .master-tag.active {
background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(212,175,55,0.2) 100%);
color: var(--gold-dark);
border-color: var(--border-gold);
font-weight: 600;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(212,175,55,0.2);
}
.masters-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.master-card {
text-align: center;
padding: 16px 12px;
border-radius: var(--radius-sm);
transition: all 0.3s var(--ease);
cursor: pointer;
border: 2px solid transparent;
}
.master-card:hover {
background: linear-gradient(135deg, rgba(212,175,55,0.05) 0%, rgba(212,175,55,0.1) 100%);
border-color: var(--border-gold);
transform: translateY(-6px);
box-shadow: var(--shadow-md), 0 0 0 2px var(--gold-soft);
}
.master-avatar {
width: 72px; height: 72px; border-radius: 50%;
overflow: hidden; margin: 0 auto 12px;
border: 3px solid var(--border-gold);
position: relative;
background: #F1F5F9;
box-shadow: 0 4px 12px rgba(212,175,55,0.2);
}
.master-avatar img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.master-card:hover .master-avatar img {
transform: scale(1.1);
}
.master-name {
font-size: 15px; font-weight: 700;
color: var(--primary);
}
.master-title {
font-size: 13px; color: var(--text-muted);
margin-top: 4px; font-weight: 500;
}
/* ========== 名师栏目头部横幅 ========== */
.teachers-hero {
position: relative;
height: 280px;
background: linear-gradient(135deg, #0F2B5B 0%, #1A3A6B 50%, #0F2B5B 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 0;
}
.teachers-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
z-index: 1;
}
.teachers-hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
z-index: 3;
}
.teachers-hero-bg {
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') center bottom/cover no-repeat;
opacity: 0.6;
z-index: 1;
}
.teachers-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 20px;
max-width: 800px;
}
.teachers-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4);
animation: teachersIconFloat 3s ease-in-out infinite;
}
@keyframes teachersIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.teachers-title {
font-size: 36px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 12px 0;
letter-spacing: 2px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.teachers-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
font-weight: 500;
}
/* ========== 作品展示页面头部横幅 ========== */
.works-hero {
position: relative;
height: 240px;
background: linear-gradient(135deg, #1A3A6B 0%, #0F2B5B 50%, #1A3A6B 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 0;
}
.works-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 50%),
radial-gradient(circle at 70% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 50%);
z-index: 1;
}
.works-hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
z-index: 3;
}
.works-hero-bg {
position: absolute;
inset: 0;
background: url('data:image/svg+xml,') center bottom/cover no-repeat;
opacity: 0.7;
z-index: 1;
}
.works-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 20px;
max-width: 800px;
}
.works-icon {
width: 70px;
height: 70px;
margin: 0 auto 18px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: var(--primary-dark);
box-shadow: 0 8px 28px rgba(212, 175, 55, 0.4);
animation: worksIconFloat 3s ease-in-out infinite;
}
.works-icon::before {
content: '🎨';
}
@keyframes worksIconFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(5deg); }
}
.works-title {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 10px 0;
letter-spacing: 1.5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.works-description {
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
max-width: 650px;
margin: 0 auto;
line-height: 1.7;
font-weight: 400;
}
/* ========== 作品列表板块 ========== */
.works-list-block {
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
padding: 50px 0 70px;
}
/* ========== 板块通用样式 ========== */
.section-block {
padding: 60px 0;
position: relative;
}
.section-block::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
/* 板块头部 */
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-title {
font-size: 32px;
font-weight: 700;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
position: relative;
}
.section-title i {
color: var(--gold);
font-size: 28px;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 2px;
margin-top: 8px;
}
.section-subtitle {
font-size: 16px;
color: var(--text-muted);
margin: 0;
font-weight: 500;
}
/* ========== 作品展示板块 ========== */
.works-block {
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
border-top: 2px solid var(--border-light);
}
.works-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.work-card {
background: var(--surface);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 2px solid var(--border);
transition: all 0.4s var(--ease);
position: relative;
}
.work-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg), 0 0 0 2px var(--gold-soft);
border-color: var(--border-gold);
}
.work-card-link {
display: block;
color: inherit;
text-decoration: none;
}
.work-card-image {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background: var(--bg);
}
.work-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
.work-card:hover .work-card-image img {
transform: scale(1.08);
}
.work-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 43, 91, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.work-card:hover .work-card-overlay {
opacity: 1;
}
.work-view-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--gold);
transform: scale(0.8);
transition: transform 0.3s var(--ease);
}
.work-card:hover .work-view-icon {
transform: scale(1);
}
.work-card-content {
padding: 20px;
}
.work-title {
font-size: 16px;
font-weight: 700;
color: var(--primary);
margin: 0 0 12px 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s;
}
.work-card:hover .work-title {
color: var(--gold-dark);
}
.work-meta {
display: flex;
gap: 16px;
margin-bottom: 12px;
font-size: 13px;
color: var(--text-muted);
}
.work-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.work-meta i {
color: var(--gold);
font-size: 12px;
}
.work-description {
font-size: 14px;
color: var(--text);
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 作品查看更多按钮 */
.works-more-wrapper {
text-align: center;
margin-top: 40px;
}
.btn-works-more {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
font-size: 15px;
font-weight: 700;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s var(--ease);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
border: 2px solid transparent;
}
.btn-works-more:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
border-color: var(--gold);
}
.btn-works-more i:last-child {
transition: transform 0.3s;
}
.btn-works-more:hover i:last-child {
transform: translateX(4px);
}
/* ========== 底部 ========== */
footer {
background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
color: var(--text-light);
padding: 64px 0 32px;
font-size: 14px;
border-top: 3px solid var(--border-gold);
position: relative;
}
footer::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr;
gap: 40px; margin-bottom: 40px;
}
.footer-col h4 {
color: var(--surface);
margin-bottom: 16px;
font-weight: 700; font-size: 15px;
display: flex; align-items: center; gap: 8px;
}
.footer-col h4::before {
content: ''; width: 3px; height: 18px;
background: var(--gold); border-radius: 2px;
}
.footer-col a {
display: block; margin-bottom: 10px;
transition: all 0.2s var(--ease);
color: var(--text-light);
padding-left: 0;
}
.footer-col a:hover {
color: var(--gold);
padding-left: 6px;
}
.footer-desc {
line-height: 1.8; max-width: 300px;
margin-top: 14px;
color: rgba(255,255,255,0.7);
}
.copyright {
text-align: center; padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.1);
color: var(--text-light);
font-size: 13px;
}
.copyright a { color: var(--gold); margin: 0 8px; }
/* ========== 返回顶部按钮 ========== */
.back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s var(--ease);
z-index: 999;
font-size: 10px;
font-weight: 600;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.6);
}
.back-to-top:active {
transform: translateY(-2px);
}
.back-to-top svg {
width: 20px;
height: 20px;
}
.back-to-top span {
line-height: 1;
}
/* ========== 动效 & 响应式 ========== */
.fade-up {
opacity: 0; transform: translateY(30px);
transition: all 0.7s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1100px) {
.hero-slider { height: 500px; }
.slide-content { max-width: 650px; padding: 32px; }
.slide-title { font-size: 32px; }
.gallery-item { flex: 0 0 280px; height: 380px; }
.events-grid { grid-template-columns: 1fr 1fr; }
.news-item { flex: 0 0 calc(50% - 12px); }
.grid-section { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.teachers-hero { height: 240px; }
.teachers-icon { width: 70px; height: 70px; font-size: 35px; }
.teachers-title { font-size: 32px; }
.works-hero { height: 220px; }
.works-icon { width: 65px; height: 65px; font-size: 30px; }
.works-title { font-size: 28px; }
}
@media (max-width: 768px) {
.nav-menu {
display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--primary-dark); flex-direction: column;
padding: 16px 0; border-top: 2px solid var(--border-gold);
}
.nav-menu.open { display: flex; }
.nav-item { width: 100%; }
.nav-item > a { padding: 14px 24px; justify-content: flex-start; }
.submenu {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border-top: none;
background: rgba(0,0,0,0.2); display: none; border-radius: 0;
}
.nav-item.active .submenu { display: block; }
.submenu a {
padding: 10px 24px 10px 36px; color: rgba(255,255,255,0.85);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-toggle { display: block; }
.hero-slider { height: 440px; }
.slide-content { padding: 24px; margin: 0 16px; }
.slide-title { font-size: 26px; }
.teachers-hero { height: 200px; }
.teachers-icon { width: 60px; height: 60px; font-size: 30px; margin-bottom: 16px; }
.teachers-title { font-size: 26px; }
.teachers-description { font-size: 14px; }
.works-hero { height: 180px; }
.works-icon { width: 55px; height: 55px; font-size: 26px; margin-bottom: 14px; }
.works-title { font-size: 24px; }
.works-description { font-size: 13px; }
.works-list-block { padding: 40px 0 50px; }
.query-card {
flex-direction: column; padding: 28px;
}
.query-header { flex-direction: column; align-items: flex-start; gap: 6px; }
.query-form { width: 100%; flex-direction: column; }
.form-group { min-width: 100%; }
.query-btn { width: 100%; }
.gallery-wrapper { padding: 0 40px; }
.gallery-item { flex: 0 0 260px; height: 360px; }
.gallery-nav { display: none; }
.news-item { flex: 0 0 100%; margin-right: 0; margin-bottom: 20px; }
.events-grid { grid-template-columns: 1fr; }
.event-card { height: auto; min-height: 420px; }
.school-list { grid-template-columns: 1fr; }
.masters-grid { grid-template-columns: repeat(3, 1fr); }
.works-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
.footer-desc { margin: 14px auto 0; }
}
@media (max-width: 480px) {
.masters-grid { grid-template-columns: repeat(2, 1fr); }
.works-grid { grid-template-columns: 1fr; }
.ad-content { flex-direction: column; text-align: center; gap: 12px; }
.gallery-item { flex: 0 0 240px; height: 340px; }
.teachers-hero { height: 180px; }
.teachers-icon { width: 50px; height: 50px; font-size: 24px; margin-bottom: 12px; }
.teachers-title { font-size: 22px; }
.teachers-description { font-size: 13px; }
.section-title { font-size: 24px; }
.works-hero { height: 160px; }
.works-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 12px; }
.works-title { font-size: 20px; }
.works-description { font-size: 12px; }
.works-list-block { padding: 30px 0 40px; }
}
/* 用户下拉菜单样式 */
.ep-user-menu.show {
display: block !important;
}
.ep-user-menu a:hover {
background: var(--gold-soft) !important;
color: var(--gold-dark) !important;
padding-left: 24px !important;
border-left-color: var(--gold) !important;
}
/* 退出登录确认框样式 */
.logout-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 10000;
animation: fadeIn 0.3s var(--ease);
}
.logout-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.logout-modal-content {
background: var(--surface);
border-radius: var(--radius);
padding: 32px;
max-width: 400px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 2px solid var(--border-gold);
animation: slideUp 0.3s var(--ease);
}
.logout-modal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.logout-modal-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(212,175,55,0.25) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.logout-modal-title {
font-size: 18px;
font-weight: 700;
color: var(--primary);
}
.logout-modal-message {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
}
.logout-modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.logout-modal-btn {
padding: 10px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s var(--ease);
border: none;
}
.logout-modal-btn-cancel {
background: var(--bg);
color: var(--text);
border: 2px solid var(--border);
}
.logout-modal-btn-cancel:hover {
background: var(--border-light);
transform: translateY(-2px);
}
.logout-modal-btn-confirm {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}
.logout-modal-btn-confirm:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(184,134,11,0.4);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ============================================= */
/* IMA 新闻栏目页 - Banner背景版专属样式 */
/* ============================================= */
.news-cat-page {
background-color: #f5f7fa; /* 页面整体底色 */
min-height: calc(100vh - 120px); /* 减去头部尾部高度 */
}
/* --- 1. Banner 区域核心样式 (仿截图效果) --- */
.news-banner {
position: relative;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, #0F2B5B 0%, #1A365D 100%);
}
.news-banner .banner-bg {
position: absolute;
inset: 0;
background: url('/static/img/news-bg.jpg') center/cover;
opacity: 0.2;
z-index: 1;
}
/* 黑色遮罩层 (让文字更清晰) */
.news-banner .banner-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(212,175,55,0.1) 0%, transparent 60%);
z-index: 2;
}
.news-banner .banner-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}
.banner-icon {
width: 70px;
height: 70px;
border-radius: 18px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #0A1F42;
margin-bottom: 18px;
box-shadow: 0 8px 28px rgba(212,175,55,0.45);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.banner-title {
font-size: 32px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 12px 0;
letter-spacing: 1px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.banner-description {
font-size: 16px;
color: rgba(255,255,255,0.9);
max-width: 700px;
line-height: 1.8;
margin: 0;
}
.banner-content h1 {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: 2px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.banner-content p {
font-size: 16px;
opacity: 0.9;
line-height: 1.6;
}
/* --- 3. 筛选区域 --- */
.filter-section {
background-color: #fff;
padding: 25px 0;
border-bottom: 1px solid var(--border);
}
.filter-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/* 左侧标签 */
.filter-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tag {
padding: 6px 16px;
border-radius: 30px;
font-size: 13px;
cursor: pointer;
border: 1px solid #eee;
color: #666;
transition: all 0.3s;
}
.tag:hover { border-color: var(--gold); color: var(--gold); }
.tag.active {
background-color: var(--gold);
color: #fff;
border-color: var(--gold);
font-weight: 600;
}
/* 右侧控件 */
.filter-controls { display: flex; align-items: center; gap: 15px; }
.custom-select-wrapper { position: relative; }
.custom-select {
appearance: none;
-webkit-appearance: none;
padding: 10px 30px 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
font-size: 14px;
cursor: pointer;
min-width: 140px;
}
.custom-select:focus { border-color: var(--gold); outline: none; }
/* ========================================
【category.html】搜索框美化样式
修改页面：新闻栏目主页 (category.html)
修改部分：第44-52行 - 搜索表单区域
功能说明：美化搜索框，添加渐变按钮、悬停效果、聚焦动画
======================================== */
.search-form {
width: 100%;
}
.search-box {
position: relative;
display: flex;
align-items: center;
gap: 0;
background: #FFFFFF;
border-radius: 25px;
box-shadow: 0 2px 12px rgba(15, 43, 91, 0.08);
transition: all 0.3s ease;
overflow: hidden;
border: 2px solid transparent;
}
.search-box:hover {
box-shadow: 0 4px 16px rgba(15, 43, 91, 0.12);
}
.search-box:focus-within {
border-color: #D4AF37;
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}
.search-icon {
position: absolute;
left: 16px;
color: #94A3B8;
font-size: 16px;
pointer-events: none;
z-index: 2;
transition: color 0.3s ease;
}
.search-box:focus-within .search-icon {
color: #D4AF37;
}
.search-box input {
flex: 1;
padding: 12px 16px 12px 44px;
border: none;
outline: none;
font-size: 14px;
color: #0F2B5B;
background: transparent;
min-width: 200px;
}
.search-box input::placeholder {
color: #CBD5E1;
}
.search-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #FFFFFF;
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.search-btn:hover {
background: linear-gradient(135deg, #B8860B 0%, #9A7209 100%);
transform: scale(1.05);
}
.search-btn:active {
transform: scale(0.98);
}
/* --- 4. 新闻列表网格 --- */
.news-list-section { padding: 40px 0; }
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* PC端三列 */
gap: 30px;
}
/* ========================================
【category.html】新闻卡片美化样式
修改页面：新闻栏目主页 (category.html)
修改部分：第82-136行 - 新闻卡片列表区域
功能说明：美化新闻卡片，添加图片、分类标签、悬停效果，支持动态链接
======================================== */
.news-card {
background: #FFFFFF;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(15, 43, 91, 0.08);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.news-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(15, 43, 91, 0.15);
}
.card-link {
display: block;
text-decoration: none;
color: inherit;
}
.card-image {
position: relative;
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card:hover .card-image img {
transform: scale(1.08);
}
.card-category {
position: absolute;
top: 12px;
left: 12px;
padding: 6px 14px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
z-index: 2;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 17px;
font-weight: 700;
color: #0F2B5B;
margin: 0 0 10px 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 51px;
transition: color 0.3s ease;
}
.news-card:hover .card-title {
color: #D4AF37;
}
.card-excerpt {
font-size: 14px;
color: #64748B;
line-height: 1.7;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 48px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid rgba(15, 43, 91, 0.08);
}
.card-meta {
display: flex;
gap: 16px;
font-size: 13px;
color: #94A3B8;
}
.meta-date,
.meta-views {
display: flex;
align-items: center;
gap: 4px;
}
.read-more {
font-size: 13px;
color: #D4AF37;
font-weight: 600;
transition: all 0.3s ease;
white-space: nowrap;
}
.news-card:hover .read-more {
color: #B8860B;
transform: translateX(4px);
}
/* --- 5. 响应式适配 --- */
@media (max-width: 992px) {
.news-grid { grid-template-columns: repeat(2, 1fr); } /* 平板两列 */
.news-banner { height: 240px; }
.banner-title { font-size: 28px; }
.banner-icon { width: 60px; height: 60px; font-size: 28px; }
}
@media (max-width: 768px) {
.filter-inner { flex-direction: column; align-items: stretch; }
.filter-controls { flex-direction: column; }
.search-box {
width: 100%;
}
.search-box input { width: 100%; min-width: unset; }
.search-btn {
width: 100%;
margin-top: 8px;
}
.news-grid { grid-template-columns: 1fr; } /* 手机单列 */
.news-banner { height: 200px; }
.banner-title { font-size: 24px; }
.banner-description { font-size: 14px; }
.banner-icon { width: 50px; height: 50px; font-size: 24px; margin-bottom: 12px; }
}
/* ========================================
【category.html】面包屑导航美化样式
修改页面：新闻栏目主页 (category.html)
修改部分：第25-33行 - 面包屑导航区域
功能说明：美化面包屑导航，添加渐变背景、图标、悬停效果
======================================== */
.breadcrumb {
background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%);
padding: 18px 0;
border-bottom: 2px solid rgba(212, 175, 55, 0.2);
box-shadow: 0 2px 8px rgba(15, 43, 91, 0.04);
}
.breadcrumb-inner {
display: flex;
align-items: center;
font-size: 14px;
color: #64748B;
gap: 8px;
}
.breadcrumb-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary);
font-weight: 500;
transition: all 0.3s ease;
text-decoration: none;
}
.breadcrumb-item:hover {
color: var(--gold-dark);
transform: translateY(-1px);
}
.breadcrumb-item i {
font-size: 12px;
}
.breadcrumb-separator {
color: var(--text-light);
margin: 0 4px;
}
.breadcrumb-inner::before {
content: '🏠';
font-size: 16px;
margin-right: 4px;
}
.breadcrumb a {
color: #0F2B5B;
transition: all 0.3s ease;
font-weight: 500;
text-decoration: none;
position: relative;
}
.breadcrumb a:hover {
color: #D4AF37;
transform: translateY(-1px);
}
.breadcrumb a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #D4AF37, #B8860B);
transition: width 0.3s ease;
}
.breadcrumb a:hover::after {
width: 100%;
}
.breadcrumb-sep {
margin: 0 4px;
color: #CBD5E1;
font-weight: 300;
}
.breadcrumb-current {
color: #0F2B5B;
font-weight: 600;
padding: 4px 12px;
background: rgba(212, 175, 55, 0.1);
border-radius: 6px;
border-left: 3px solid #D4AF37;
}
/* ========================================
【category.html】分页组件美化样式
修改页面：新闻栏目主页 (category.html)
修改部分：第118-125行 - 分页导航区域
功能说明：美化分页按钮，添加渐变、阴影、悬停动画效果
======================================== */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 50px;
padding: 20px 0;
flex-wrap: wrap;
}
.page-btn,
.page-num {
min-width: 42px;
height: 42px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
border: 2px solid transparent;
text-decoration: none;
position: relative;
overflow: hidden;
}
.page-btn::before,
.page-num::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(212, 175, 55, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.page-btn:hover::before,
.page-num:hover::before {
width: 200%;
height: 200%;
}
/* 上一页/下一页按钮 */
.page-btn {
color: #0F2B5B;
background: #FFFFFF;
border-color: rgba(15, 43, 91, 0.15);
box-shadow: 0 2px 8px rgba(15, 43, 91, 0.08);
}
.page-btn:hover {
color: #D4AF37;
border-color: #D4AF37;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.25);
}
.page-btn:active {
transform: translateY(0);
}
/* 页码按钮 */
.page-num {
color: #475569;
background: #FFFFFF;
border-color: rgba(15, 43, 91, 0.1);
box-shadow: 0 2px 6px rgba(15, 43, 91, 0.06);
}
.page-num:hover {
color: #D4AF37;
border-color: rgba(212, 175, 55, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}
/* 当前页码 */
.page-num.active {
color: #FFFFFF;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
border-color: transparent;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
transform: scale(1.05);
}
.page-num.active::before {
display: none;
}
/* 响应式适配 */
@media (max-width: 768px) {
.breadcrumb-inner {
font-size: 13px;
}
.pagination {
gap: 6px;
margin-top: 35px;
}
.page-btn,
.page-num {
min-width: 38px;
height: 38px;
padding: 0 12px;
font-size: 13px;
}
}
/* ==================== 搜索结果页专用样式 ==================== */
/* 搜索页面容器 */
.search-page {
min-height: calc(100vh - 200px);
background: linear-gradient(135deg, #F0F4F8 0%, #E2E8F0 50%, #F8FAFC 100%);
background-attachment: fixed;
padding-bottom: 60px;
}
.search-container {
display: flex;
gap: 30px;
padding-top: 30px;
}
/* 左侧主内容区 */
.search-main {
flex: 1;
min-width: 0;
}
/* 搜索筛选区域 */
.search-filters {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 24px;
margin-bottom: 24px;
box-shadow: var(--shadow-md);
}
.filter-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.filter-row:last-child {
margin-bottom: 0;
}
.filter-row--center {
align-items: center;
}
.filter-label {
font-size: 14px;
font-weight: 600;
color: var(--primary);
min-width: 60px;
flex-shrink: 0;
}
.filter-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-btn {
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
background: var(--bg);
color: var(--text-muted);
border: 2px solid var(--border-light);
transition: all 0.3s var(--ease);
cursor: pointer;
text-decoration: none;
}
.filter-btn:hover {
background: var(--gold-soft);
color: var(--gold-dark);
border-color: var(--border-gold);
transform: translateY(-2px);
}
.filter-btn.active {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
border-color: var(--gold);
font-weight: 600;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.filter-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
margin: 20px 0;
}
/* 关键词搜索 */
.search-input-wrap {
flex: 1;
position: relative;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 16px;
z-index: 2;
}
.search-input {
width: 100%;
padding: 12px 16px 12px 44px;
border: 2px solid var(--border);
border-radius: 10px;
background: var(--surface);
font-size: 14px;
color: var(--text);
transition: all 0.3s var(--ease);
}
.search-input:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
.search-btn {
padding: 12px 24px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s var(--ease);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
flex-shrink: 0;
}
.search-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
}
/* 搜索结果统计 */
.search-stats {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding: 16px 20px;
background: var(--surface);
border-radius: var(--radius-sm);
border-left: 4px solid var(--gold);
}
.stats-text {
font-size: 14px;
color: var(--text);
}
.stats-text strong {
color: var(--primary);
font-weight: 700;
}
.keyword-tag {
font-size: 13px;
color: var(--text-muted);
background: var(--bg);
padding: 4px 12px;
border-radius: 12px;
border: 1px solid var(--border-light);
}
.keyword-tag em {
color: var(--gold-dark);
font-style: normal;
font-weight: 600;
}
/* 搜索结果列表 */
.search-results {
margin-bottom: 40px;
}
.result-item {
display: flex;
gap: 20px;
padding: 24px;
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
margin-bottom: 20px;
transition: all 0.4s var(--ease);
box-shadow: var(--shadow-sm);
}
.result-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg), var(--shadow-gold);
border-color: var(--border-gold);
}
.result-content {
flex: 1;
min-width: 0;
}
.result-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.4;
}
.result-title a {
color: var(--primary);
text-decoration: none;
transition: color 0.3s var(--ease);
}
.result-title a:hover {
color: var(--gold-dark);
}
.result-desc {
font-size: 14px;
color: var(--text);
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.result-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.result-tag {
font-size: 12px;
padding: 4px 10px;
background: var(--gold-soft);
color: var(--gold-dark);
border-radius: 4px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s var(--ease);
}
.result-tag:hover {
background: var(--gold);
color: var(--primary-dark);
transform: translateY(-2px);
}
.meta-item {
font-size: 12px;
color: var(--text-light);
display: flex;
align-items: center;
gap: 4px;
}
.meta-icon {
font-size: 12px;
}
.result-thumb {
width: 160px;
height: 120px;
border-radius: var(--radius-sm);
overflow: hidden;
flex-shrink: 0;
background: var(--bg);
}
.result-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s var(--ease);
}
.result-item:hover .result-thumb img {
transform: scale(1.05);
}
/* 分页样式 */
.search-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 40px;
}
.search-pagination .page-btn,
.search-pagination .page-number {
min-width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-weight: 500;
cursor: pointer;
transition: all 0.3s var(--ease);
font-size: 14px;
text-decoration: none;
}
.search-pagination .page-btn:hover,
.search-pagination .page-number:hover {
border-color: var(--gold);
background: var(--gold-soft);
color: var(--gold-dark);
}
.search-pagination .page-number.active {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-color: var(--gold);
color: var(--primary-dark);
font-weight: 700;
}
.search-pagination .page-dots {
color: var(--text-light);
padding: 0 5px;
}
/* 右侧边栏 */
.search-sidebar {
width: 320px;
flex-shrink: 0;
}
.sidebar-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
overflow: hidden;
box-shadow: var(--shadow-md);
margin-bottom: 24px;
}
.sidebar-header {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 24px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-bottom: 2px solid var(--border-gold);
}
.sidebar-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--primary-dark);
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.sidebar-title {
font-size: 16px;
font-weight: 700;
color: var(--surface);
margin: 0;
}
.sidebar-content {
padding: 20px 24px;
}
.hot-item {
display: flex;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--border-light);
}
.hot-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.hot-item:first-child {
padding-top: 0;
}
.hot-thumb {
width: 80px;
height: 60px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: var(--bg);
}
.hot-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hot-content {
flex: 1;
min-width: 0;
}
.hot-title {
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 6px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
transition: color 0.3s var(--ease);
}
.hot-title:hover {
color: var(--gold-dark);
}
.hot-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.search-container {
flex-direction: column;
}
.search-sidebar {
width: 100%;
}
.result-thumb {
width: 120px;
height: 90px;
}
}
@media (max-width: 768px) {
.filter-row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.filter-label {
min-width: auto;
}
.filter-options {
width: 100%;
}
.filter-btn {
flex: 1;
text-align: center;
justify-content: center;
}
.search-input-wrap {
width: 100%;
}
.result-item {
flex-direction: column;
}
.result-thumb {
width: 100%;
height: 180px;
}
.result-meta {
gap: 12px;
}
.search-pagination {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.search-stats {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.result-title {
font-size: 16px;
}
.result-desc {
font-size: 13px;
}
.hot-item {
flex-direction: column;
}
.hot-thumb {
width: 100%;
height: 140px;
}
}
/* ==================== 名师列表（卡片·一排4个）专用样式 ==================== */
/* 页面标题区域 */
.page-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: 60px 0 40px;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
.page-hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.page-title {
font-size: 36px;
font-weight: 800;
color: var(--surface);
margin-bottom: 12px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.page-subtitle {
font-size: 16px;
color: var(--gold-light);
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
/* 搜索和筛选 */
.filter-section {
background: var(--surface);
padding: 24px 0;
box-shadow: var(--shadow-sm);
position: sticky;
top: 70px;
z-index: 50;
}
.filter-bar {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.filter-search {
position: relative;
flex: 1;
min-width: 280px;
}
.filter-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 14px;
}
.filter-input {
width: 100%;
padding: 12px 16px 12px 44px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
transition: all 0.3s var(--ease);
background: var(--bg);
}
.filter-input:focus {
outline: none;
border-color: var(--gold);
background: var(--surface);
box-shadow: 0 0 0 4px var(--gold-soft);
}
.filter-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-tag {
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
background: var(--bg);
border: 2px solid var(--border-light);
cursor: pointer;
transition: all 0.3s var(--ease);
}
.filter-tag:hover,
.filter-tag.active {
background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(212,175,55,0.2) 100%);
color: var(--gold-dark);
border-color: var(--border-gold);
font-weight: 600;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(212,175,55,0.2);
}
/* 卡片容器：一排4个 */
.masters-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
/* 单个卡片 */
.master-card {
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border-light);
overflow: hidden;
transition: all 0.4s var(--ease);
position: relative;
}
.master-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease);
}
.master-card:hover {
transform: translateY(-8px);
border-color: var(--border-gold);
box-shadow: var(--shadow-lg), 0 0 0 2px var(--gold-soft);
}
.master-card:hover::before {
transform: scaleX(1);
}
.master-card-link {
display: block;
text-decoration: none;
color: inherit;
}
/* 卡片顶部 - 头像区域 */
.master-card-top {
background: linear-gradient(135deg, var(--bg) 0%, #E8EEF4 100%);
padding: 32px 24px;
position: relative;
}
.master-avatar-wrapper {
position: relative;
display: inline-block;
}
.master-avatar {
width: 100px;
height: 140px;
border-radius: var(--radius-sm);
overflow: hidden;
margin: 0 auto;
border: 4px solid var(--surface);
box-shadow: var(--shadow-md);
position: relative;
background: var(--surface);
}
.master-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s var(--ease);
}
.master-card:hover .master-avatar img {
transform: scale(1.08);
}
.master-avatar-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 43, 91, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.master-card:hover .master-avatar-overlay {
opacity: 1;
}
.view-detail {
color: var(--surface);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--gold);
border-radius: 20px;
transform: translateY(10px);
transition: transform 0.3s var(--ease);
}
.master-card:hover .view-detail {
transform: translateY(0);
}
.master-badge {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 20px;
color: var(--surface);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
box-shadow:
0 4px 12px rgba(212, 175, 55, 0.3),
0 2px 4px rgba(10, 31, 66, 0.1);
border: 2px solid var(--surface);
letter-spacing: 0.5px;
z-index: 2;
}
/* 卡片主体 */
.master-card-body {
padding: 20px 24px 24px;
text-align: center;
}
.master-name {
font-size: 20px;
font-weight: 700;
color: var(--primary);
margin-bottom: 12px;
transition: color 0.3s var(--ease);
}
.master-card:hover .master-name {
color: var(--gold-dark);
}
.master-meta {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 12px;
font-size: 12px;
color: var(--text-light);
}
.master-meta i {
margin-right: 4px;
color: var(--gold);
}
.master-bio {
font-size: 14px;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.master-card-footer {
padding-top: 16px;
border-top: 1px solid var(--border-light);
}
.read-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--gold-dark);
transition: all 0.3s var(--ease);
}
.read-more i {
transition: transform 0.3s var(--ease);
}
.master-card:hover .read-more i {
transform: translateX(4px);
}
/* 分页 */
.pagination-wrapper {
margin-top: 48px;
text-align: center;
}
.pagination {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
background: var(--surface);
border: 2px solid var(--border-light);
transition: all 0.3s var(--ease);
}
.pagination a:hover {
background: var(--gold-soft);
border-color: var(--border-gold);
color: var(--gold-dark);
transform: translateY(-2px);
}
.pagination .current,
.pagination span.current {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-color: var(--gold);
color: var(--surface);
font-weight: 700;
box-shadow: var(--shadow-md);
}
/* 响应式调整 */
@media (max-width: 1200px) {
.masters-grid {
grid-template-columns: repeat(3, 1fr);
}
.page-title {
font-size: 30px;
}
}
@media (max-width: 768px) {
.masters-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.page-hero {
padding: 40px 0 30px;
}
.page-title {
font-size: 26px;
}
.page-subtitle {
font-size: 14px;
}
.filter-section {
top: 60px;
}
.filter-bar {
flex-direction: column;
gap: 16px;
}
.filter-search {
min-width: 100%;
}
.master-avatar {
width: 120px;
height: 145px;
}
.master-card-top {
padding: 24px 16px;
}
.master-card-body {
padding: 16px;
}
.master-name {
font-size: 17px;
}
}
@media (max-width: 480px) {
.masters-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.page-title {
font-size: 22px;
}
.master-card {
display: flex;
flex-direction: row;
text-align: left;
}
.master-card-top {
flex: 0 0 120px;
padding: 20px;
}
.master-avatar {
width: 100px;
height: 120px;
}
.master-card-body {
flex: 1;
padding: 20px;
text-align: left;
}
.master-meta {
justify-content: flex-start;
}
}
/* ==================== 作品详情页专用样式 ==================== */
/* 详情页容器 */
.work-detail-page {
min-height: calc(100vh - 200px);
background: linear-gradient(135deg, #F0F4F8 0%, #E2E8F0 50%, #F8FAFC 100%);
background-attachment: fixed;
}
/* 作品主内容区 */
.work-detail-main {
padding: 60px 0;
}
.work-detail-grid {
display: grid;
grid-template-columns: 1fr; /* 改为单列全宽布局 */
gap: 40px;
align-items: start;
}
/* 左侧：作品大图轮播 */
.work-gallery {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.gallery-main {
height: 700px; /* 增加高度，更大气 */
overflow: hidden;
position: relative;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.gallery-main img:hover {
transform: scale(1.02);
}
.gallery-thumbs {
display: flex;
gap: 12px;
padding: 16px;
border-top: 1px solid var(--border-light);
}
.thumb {
width: 80px;
height: 60px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s var(--ease);
}
.thumb.active {
border-color: var(--gold);
box-shadow: 0 0 0 2px var(--gold-soft);
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 右侧：作品信息 */
.work-info {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 32px;
box-shadow: var(--shadow-md);
}
.work-detail-title {
font-size: 28px;
font-weight: 700;
color: var(--primary);
margin-bottom: 20px;
line-height: 1.3;
}
.work-detail-meta {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-light);
}
.meta-item {
font-size: 14px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.meta-icon {
font-size: 14px;
color: var(--gold);
}
.work-detail-desc {
font-size: 15px;
color: var(--text);
line-height: 1.7;
margin-bottom: 32px;
}
.work-detail-desc p {
margin-bottom: 16px;
}
.work-detail-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.action-btn {
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s var(--ease);
border: none;
display: flex;
align-items: center;
gap: 8px;
}
.like-btn {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.like-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
}
.share-btn {
background: var(--bg);
color: var(--text);
border: 2px solid var(--border);
}
.share-btn:hover {
border-color: var(--gold);
color: var(--gold-dark);
background: var(--gold-soft);
}
.back-btn {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.back-btn:hover {
background: var(--primary);
color: white;
}
/* 作者信息卡片 */
.author-card {
padding: 40px 0;
background: rgba(212, 175, 55, 0.03);
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.author-grid {
display: flex;
align-items: center;
gap: 32px;
}
.author-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--border-gold);
flex-shrink: 0;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info {
flex: 1;
}
.author-name {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.author-title {
font-size: 14px;
color: var(--gold-dark);
font-weight: 600;
margin-bottom: 16px;
}
.author-bio {
font-size: 14px;
color: var(--text);
line-height: 1.6;
margin-bottom: 20px;
}
.author-link {
font-size: 14px;
color: var(--gold);
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s var(--ease);
}
.author-link:hover {
color: var(--gold-dark);
gap: 10px;
}
/* 相关作品推荐 */
.related-works {
padding: 40px 0;
}
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.related-work {
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
overflow: hidden;
transition: all 0.3s var(--ease);
}
.related-link {
display: block;
text-decoration: none;
color: inherit;
}
.related-work:hover {
transform: translateY(-6px);
border-color: var(--border-gold);
box-shadow: var(--shadow-md);
}
.related-thumb {
height: 160px;
overflow: hidden;
}
.related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s var(--ease);
}
.related-work:hover .related-thumb img {
transform: scale(1.05);
}
.related-info {
padding: 16px;
}
.related-title {
font-size: 16px;
font-weight: 600;
color: var(--primary);
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-author {
font-size: 13px;
color: var(--text-muted);
}
/* 响应式设计 */
@media (max-width: 1200px) {
.work-detail-grid {
grid-template-columns: 1fr; /* 上下布局 */
}
.gallery-main {
height: 400px;
}
.related-grid {
grid-template-columns: repeat(3, 1fr); /* 3列 */
}
}
@media (max-width: 768px) {
.author-grid {
flex-direction: column;
text-align: center;
}
.related-grid {
grid-template-columns: repeat(2, 1fr); /* 2列 */
}
.work-detail-title {
font-size: 24px;
}
.work-info {
padding: 24px;
}
}
@media (max-width: 480px) {
.related-grid {
grid-template-columns: 1fr; /* 1列 */
}
.work-detail-actions {
flex-direction: column;
}
.action-btn {
width: 100%;
justify-content: center;
}
.gallery-main {
height: 300px;
}
.gallery-thumbs {
flex-wrap: wrap;
justify-content: center;
}
}
/* ==================== 作品详情页专用样式结束 ==================== */
/* ==================== 作品详情页大气版样式 ==================== */
/* 全宽轮播容器 */
.work-gallery-full {
margin-bottom: 50px;
}
.gallery-main-large {
height: 700px;
overflow: hidden;
position: relative;
border-radius: var(--radius);
background: var(--surface);
border: 2px solid var(--border);
box-shadow: var(--shadow-lg);
}
.gallery-main-large img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease);
}
.gallery-main-large:hover img {
transform: scale(1.03);
}
/* 轮播控制按钮 */
.gallery-prev,
.gallery-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--primary);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s var(--ease);
z-index: 10;
box-shadow: var(--shadow-md);
}
.gallery-prev {
left: 20px;
}
.gallery-next {
right: 20px;
}
.gallery-prev:hover,
.gallery-next:hover {
background: var(--gold);
color: white;
transform: translateY(-50%) scale(1.1);
}
/* 居中缩略图 */
.gallery-thumbs-center {
display: flex;
gap: 16px;
padding: 24px;
justify-content: center;
margin-top: 20px;
}
.gallery-thumbs-center .thumb {
width: 100px;
height: 75px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
transition: all 0.3s var(--ease);
box-shadow: var(--shadow-sm);
}
.gallery-thumbs-center .thumb.active {
border-color: var(--gold);
box-shadow: 0 0 0 4px var(--gold-soft), var(--shadow-md);
transform: translateY(-5px);
}
.gallery-thumbs-center .thumb:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.gallery-thumbs-center .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 作品信息区 */
.work-info-section {
max-width: 1000px;
margin: 0 auto;
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 50px;
box-shadow: var(--shadow-lg);
}
.work-info-header {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 2px solid var(--border-light);
}
.work-detail-title-large {
font-size: 36px;
font-weight: 800;
color: var(--primary);
margin-bottom: 24px;
line-height: 1.3;
letter-spacing: -0.5px;
}
.work-meta-bar {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.meta-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(212, 175, 55, 0.1) 100%);
border: 1px solid var(--border-gold);
border-radius: 20px;
font-size: 14px;
color: var(--text);
font-weight: 500;
transition: all 0.3s var(--ease);
}
.meta-tag i {
color: var(--gold);
font-size: 14px;
}
.meta-tag:hover {
background: var(--gold);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.meta-tag:hover i {
color: white;
}
/* 作品内容区 */
.work-content-area {
font-size: 16px;
color: var(--text);
line-height: 1.9;
margin-bottom: 40px;
}
.work-content-area p {
margin-bottom: 20px;
}
.work-content-area img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 24px 0;
box-shadow: var(--shadow-md);
}
/* 操作按钮栏 */
.work-action-bar {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
padding-top: 30px;
border-top: 2px solid var(--border-light);
}
.action-btn-lg {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 30px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s var(--ease);
border: 2px solid var(--border);
background: var(--surface);
color: var(--text);
text-decoration: none;
}
.action-btn-lg i {
font-size: 16px;
}
.like-btn {
border-color: #ff6b6b;
color: #ff6b6b;
}
.like-btn:hover {
background: #ff6b6b;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
}
.like-count {
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
.like-count em {
color: #ff6b6b;
font-weight: 700;
font-style: normal;
margin: 0 2px;
}
.share-btn {
border-color: var(--gold);
color: var(--gold-dark);
}
.share-btn:hover {
background: var(--gold);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.gallery-main-large {
height: 500px;
}
.work-info-section {
padding: 30px;
}
.work-detail-title-large {
font-size: 28px;
}
}
@media (max-width: 768px) {
.work-detail-main {
padding: 30px 0;
}
.gallery-main-large {
height: 350px;
}
.gallery-prev,
.gallery-next {
width: 40px;
height: 40px;
font-size: 16px;
}
.gallery-thumbs-center .thumb {
width: 70px;
height: 52px;
}
.work-info-section {
padding: 24px;
}
.work-detail-title-large {
font-size: 24px;
}
.work-meta-bar {
gap: 10px;
}
.meta-tag {
padding: 6px 12px;
font-size: 13px;
}
.work-action-bar {
flex-direction: column;
}
.action-btn-lg {
width: 100%;
justify-content: center;
}
}
/* ==================== 作品详情页大气版样式结束 ==================== */
/* ==================== 名师详情页样式开始 ==================== */
/* 面包屑导航样式 */
.breadcrumb {
padding: 24px 0;
background: var(--surface);
border-bottom: 2px solid var(--border-light);
}
.breadcrumb-inner {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--text-muted);
flex-wrap: wrap;
}
.breadcrumb-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-weight: 500;
transition: all 0.3s var(--ease);
}
.breadcrumb-item:hover {
color: var(--gold-dark);
}
.breadcrumb-item i {
font-size: 12px;
}
.breadcrumb-separator {
color: var(--text-light);
font-size: 16px;
}
.breadcrumb-inner::before {
content: '🏠';
font-size: 16px;
margin-right: 4px;
}
/* 名师头部区域 */
.teacher-header {
position: relative;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
overflow: hidden;
padding: 80px 0;
}
.teacher-header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 40%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.8;
}
.teacher-header-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 300px 1fr;
gap: 60px;
align-items: center;
}
.teacher-avatar-large {
width: 300px;
height: 375px;
border-radius: var(--radius);
overflow: hidden;
border: 4px solid var(--gold);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
position: relative;
}
.teacher-avatar-large::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.2) 100%);
z-index: 1;
pointer-events: none;
}
.teacher-avatar-large img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.teacher-avatar-large:hover img {
transform: scale(1.05);
}
.teacher-info-main {
color: white;
}
.teacher-badge-large {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
font-size: 14px;
font-weight: 700;
border-radius: 24px;
margin-bottom: 20px;
box-shadow: var(--shadow-gold);
letter-spacing: 1px;
}
.teacher-name-large {
font-size: 48px;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.2;
letter-spacing: -1px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.teacher-title-large {
font-size: 20px;
color: var(--gold-light);
margin-bottom: 24px;
font-weight: 600;
letter-spacing: 0.5px;
}
.teacher-intro-short {
font-size: 17px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 32px;
max-width: 700px;
}
.teacher-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.teacher-meta-item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-size: 15px;
color: white;
transition: all 0.3s var(--ease);
}
.teacher-meta-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.teacher-meta-icon {
font-size: 18px;
}
.teacher-content-simple {
max-width: 100%;
margin: 0 auto;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
border-radius: var(--radius);
padding: 56px 64px;
border: 2px solid var(--border-gold);
box-shadow:
0 4px 24px rgba(10, 31, 66, 0.08),
0 8px 32px rgba(212, 175, 55, 0.1);
line-height: 2.2;
font-size: 16px;
color: var(--text);
text-align: center;
position: relative;
overflow: hidden;
}
.teacher-content-simple::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 50%, var(--gold) 100%);
}
.teacher-content-simple::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 50%, var(--gold) 100%);
}
.teacher-content-simple img {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
margin: 24px 0;
}
.teacher-content-simple p {
margin-bottom: 20px;
text-align: justify;
}
.teacher-content-simple h2,
.teacher-content-simple h3,
.teacher-content-simple h4 {
color: var(--primary);
margin: 32px 0 16px;
font-weight: 700;
}
.teacher-content-simple h2 {
font-size: 28px;
padding-bottom: 12px;
border-bottom: 3px solid var(--gold);
}
.teacher-content-simple h3 {
font-size: 24px;
}
.teacher-content-simple h4 {
font-size: 20px;
}
.teacher-content-simple ul,
.teacher-content-simple ol {
margin: 24px auto;
padding: 0;
max-width: 700px;
list-style: none;
}
.teacher-content-simple li {
margin-bottom: 16px;
padding: 16px 24px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.03) 100%);
border-left: 4px solid var(--gold);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 15px;
color: var(--text);
transition: all 0.3s var(--ease);
text-align: left;
position: relative;
}
.teacher-content-simple li::before {
content: '◆';
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--gold);
font-size: 12px;
opacity: 0.6;
}
.teacher-content-simple li:hover {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.06) 100%);
transform: translateX(8px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}
.teacher-content-simple blockquote {
margin: 24px 0;
padding: 20px 24px;
background: var(--gold-soft);
border-left: 4px solid var(--gold);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-style: italic;
color: var(--primary);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.teacher-header-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.teacher-avatar-large {
margin: 0 auto;
width: 250px;
height: 312px;
}
.teacher-intro-short {
max-width: 100%;
}
.teacher-meta {
justify-content: center;
}
.teacher-content {
grid-template-columns: 1fr;
}
.teacher-sidebar {
position: static;
}
.teacher-name-large {
font-size: 36px;
}
}
@media (max-width: 768px) {
.teacher-header {
padding: 50px 0;
}
.teacher-avatar-large {
width: 200px;
height: 250px;
}
.teacher-name-large {
font-size: 28px;
}
.teacher-title-large {
font-size: 16px;
}
.teacher-intro-short {
font-size: 15px;
}
.teacher-meta-item {
font-size: 13px;
padding: 10px 14px;
}
.content-card {
padding: 24px;
}
.content-card-title {
font-size: 20px;
}
.honor-item {
grid-template-columns: 60px 1fr;
gap: 16px;
padding: 16px;
}
.honor-year {
font-size: 22px;
}
.honor-content h4 {
font-size: 16px;
}
}
@media (max-width: 480px) {
.teacher-header {
padding: 40px 0;
}
.teacher-avatar-large {
width: 160px;
height: 200px;
}
.teacher-name-large {
font-size: 24px;
}
.teacher-meta {
flex-direction: column;
align-items: stretch;
}
.teacher-meta-item {
justify-content: center;
}
.works-grid {
grid-template-columns: 1fr;
}
.contact-card,
.course-card,
.skills-card {
padding: 20px;
}
}
/* ==================== 名师详情页样式结束 ==================== */
/* ==================== 关于我们页面样式 ==================== */
/* 页面头部横幅 */
.about-hero {
position: relative;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
margin-bottom: 40px;
}
.about-hero-bg {
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1522335787203-66a40592a7f8?w=1600&auto=format&fit=crop&q=80') center/cover;
opacity: 0.15;
z-index: 1;
}
.about-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(212,175,55,0.1) 0%, transparent 60%);
z-index: 2;
}
.about-hero-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}
.about-icon {
width: 60px;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--primary-dark);
margin-bottom: 15px;
box-shadow: 0 6px 24px rgba(212,175,55,0.4);
}
.about-title {
font-size: 28px;
font-weight: 700;
color: var(--surface);
margin-bottom: 8px;
letter-spacing: -0.5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.about-description {
font-size: 16px;
color: rgba(255,255,255,0.9);
max-width: 600px;
line-height: 1.6;
}
/* 关于我们内容布局 */
.about-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
max-width: var(--container);
margin: 0 auto 60px;
}
/* 左侧主内容区 */
.about-main {
display: flex;
flex-direction: column;
gap: 30px;
}
/* 内容卡片 */
.content-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 30px;
box-shadow: var(--shadow-md);
}
.content-card-title {
font-size: 20px;
color: var(--primary);
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-light);
display: flex;
align-items: center;
gap: 10px;
}
.content-card-title::before {
content: '';
width: 4px;
height: 24px;
background: var(--gold);
border-radius: 2px;
}
/* 组织简介 */
.org-intro {
line-height: 1.8;
color: var(--text);
}
.org-intro p {
margin-bottom: 16px;
}
.highlight-text {
color: var(--gold-dark);
font-weight: 600;
}
/* 使命愿景 */
.mission-vision {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
}
.mv-card {
background: var(--gold-soft);
padding: 24px;
border-radius: var(--radius-sm);
border-left: 4px solid var(--gold);
}
.mv-title {
font-size: 16px;
color: var(--primary);
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.mv-title::before {
content: '🎯';
font-size: 14px;
}
.mv-card:nth-child(2) .mv-title::before {
content: '🌟';
}
.mv-card:nth-child(3) .mv-title::before {
content: '🎨';
}
.mv-card:nth-child(4) .mv-title::before {
content: '🤝';
}
.mv-desc {
font-size: 13px;
color: var(--text);
line-height: 1.6;
}
/* 发展历程 */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--border);
}
.timeline-item {
position: relative;
padding-bottom: 30px;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -38px;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--surface);
border: 3px solid var(--gold);
z-index: 2;
}
.timeline-year {
font-size: 14px;
color: var(--gold-dark);
font-weight: 700;
margin-bottom: 8px;
}
.timeline-content {
font-size: 14px;
color: var(--text);
line-height: 1.6;
}
/* 核心优势 */
.advantages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.advantage-item {
display: flex;
gap: 15px;
padding: 20px;
background: var(--bg);
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
transition: all 0.3s var(--ease);
}
.advantage-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--border-gold);
}
.adv-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--primary-dark);
flex-shrink: 0;
}
.adv-content h4 {
font-size: 15px;
color: var(--primary);
font-weight: 700;
margin-bottom: 8px;
}
.adv-content p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
/* 组织架构 */
.org-structure {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.org-level {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.org-node {
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius-sm);
padding: 20px;
text-align: center;
min-width: 180px;
box-shadow: var(--shadow-sm);
transition: all 0.3s var(--ease);
}
.org-node:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--border-gold);
}
.org-node.top {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--surface);
border-color: var(--gold);
}
.org-node.top h4 {
color: var(--surface);
}
.org-node h4 {
font-size: 15px;
color: var(--primary);
font-weight: 700;
margin-bottom: 8px;
}
.org-node p {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
.org-node.top p {
color: rgba(255,255,255,0.9);
}
.org-connector {
width: 2px;
height: 30px;
background: var(--border);
}
/* 右侧侧边栏 */
.about-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 联系卡片 */
.contact-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 24px;
box-shadow: var(--shadow-md);
}
.contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
}
.contact-item:last-child {
border-bottom: none;
}
.contact-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--gold-soft);
color: var(--gold-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.contact-text {
font-size: 13px;
color: var(--text);
}
/* 数据统计 */
.stats-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 24px;
box-shadow: var(--shadow-md);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 28px;
color: var(--gold-dark);
font-weight: 700;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
color: var(--text-muted);
}
/* 合作伙伴 */
.partners-card {
background: var(--surface);
border-radius: var(--radius);
border: 2px solid var(--border);
padding: 24px;
box-shadow: var(--shadow-md);
}
.partners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.partner-item {
background: var(--bg);
padding: 15px;
border-radius: var(--radius-sm);
text-align: center;
border: 1px solid var(--border-light);
transition: all 0.3s var(--ease);
}
.partner-item:hover {
background: var(--gold-soft);
border-color: var(--border-gold);
}
.partner-logo {
font-size: 24px;
margin-bottom: 8px;
}
.partner-name {
font-size: 12px;
color: var(--text);
font-weight: 600;
}
/* 页面动效 */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s var(--ease);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.about-content {
grid-template-columns: 1fr;
}
.mission-vision {
grid-template-columns: 1fr;
}
.advantages-grid {
grid-template-columns: 1fr;
}
.org-level {
flex-direction: column;
align-items: center;
}
.org-connector {
display: none;
}
}
@media (max-width: 768px) {
.content-card {
padding: 20px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.partners-grid {
grid-template-columns: repeat(2, 1fr);
}
.container {
padding: 0 20px;
}
}
@media (max-width: 480px) {
.about-title {
font-size: 24px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.partners-grid {
grid-template-columns: 1fr;
}
}
/* ==================== 关于我们页面样式结束 ==================== */
/* ==================== 简单单页内容样式 ==================== */
.page-content-simple {
max-width: 900px;
margin: 0 auto;
background: var(--surface);
border-radius: var(--radius);
padding: 48px 56px;
border: 2px solid var(--border-gold);
box-shadow:
0 4px 24px rgba(10, 31, 66, 0.08),
0 8px 32px rgba(212, 175, 55, 0.1);
line-height: 2;
font-size: 16px;
color: var(--text);
}
.page-content-simple img {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
margin: 24px 0;
}
.page-content-simple p {
margin-bottom: 20px;
text-align: justify;
}
.page-content-simple h2 {
font-size: 28px;
color: var(--primary);
font-weight: 700;
margin: 32px 0 16px;
padding-bottom: 12px;
border-bottom: 3px solid var(--gold);
}
.page-content-simple h3 {
font-size: 22px;
color: var(--primary);
font-weight: 600;
margin: 24px 0 12px;
}
.page-content-simple ul,
.page-content-simple ol {
margin: 20px 0;
padding-left: 24px;
}
.page-content-simple li {
margin-bottom: 12px;
line-height: 1.8;
}
.page-content-simple blockquote {
margin: 24px 0;
padding: 20px 24px;
background: var(--gold-soft);
border-left: 4px solid var(--gold);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-style: italic;
color: var(--primary);
}
/* 后台编辑器生成的富文本内容样式 */
.page-content-simple .content-card {
margin-bottom: 40px;
padding: 32px;
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
border-radius: var(--radius);
border: 1px solid var(--border-gold);
box-shadow: 0 2px 12px rgba(10, 31, 66, 0.06);
}
.page-content-simple .content-card-title {
font-size: 28px;
color: var(--primary);
font-weight: 700;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 3px solid var(--gold);
display: inline-block;
}
.page-content-simple .org-intro p {
margin-bottom: 16px;
line-height: 2;
text-align: justify;
color: var(--text);
}
.page-content-simple .highlight-text {
color: var(--gold-dark);
font-weight: 600;
background: linear-gradient(120deg, transparent 0%, var(--gold-soft) 100%);
padding: 2px 8px;
border-radius: 4px;
}
.page-content-simple .mission-vision {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
margin-top: 24px;
}
.page-content-simple .mv-card {
padding: 24px;
background: white;
border-radius: var(--radius-sm);
border: 1px solid var(--border-gold);
transition: all 0.3s ease;
}
.page-content-simple .mv-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
border-color: var(--gold);
}
.page-content-simple .mv-title {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--gold-soft);
}
.page-content-simple .mv-desc {
font-size: 14px;
line-height: 1.8;
color: var(--text-light);
}
.page-content-simple .timeline {
position: relative;
padding-left: 40px;
margin-top: 24px;
}
.page-content-simple .timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--gold), var(--gold-soft));
border-radius: 2px;
}
.page-content-simple .timeline-item {
position: relative;
margin-bottom: 32px;
padding-left: 24px;
}
.page-content-simple .timeline-dot {
position: absolute;
left: -32px;
top: 4px;
width: 12px;
height: 12px;
background: var(--gold);
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 0 0 3px var(--gold-soft);
}
.page-content-simple .timeline-year {
font-size: 18px;
font-weight: 700;
color: var(--gold-dark);
margin-bottom: 8px;
}
.page-content-simple .timeline-content {
font-size: 15px;
line-height: 1.8;
color: var(--text);
}
@media (max-width: 768px) {
.page-content-simple {
padding: 32px 24px;
}
.page-content-simple h2 {
font-size: 24px;
}
.page-content-simple h3 {
font-size: 20px;
}
}
/* ==================== 简单单页内容样式结束 ==================== */
/* ==================== 关于我们页面专用样式 ==================== */
/* 关于我们页面容器 */
.about-page {
min-height: calc(100vh - 200px);
background: linear-gradient(135deg, #F0F4F8 0%, #E2E8F0 50%, #F8FAFC 100%);
background-attachment: fixed;
}
/* 页面标题区域 */
.about-header {
background: url('/static/img/ima.jpg') center center / cover no-repeat;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.about-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 43, 91, 0.85) 0%, rgba(10, 31, 66, 0.9) 100%);
z-index: 1;
}
.about-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
z-index: 2;
}
.about-header .container {
position: relative;
z-index: 3;
}
.about-header .section-header {
border-bottom: none;
padding-bottom: 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-header .section-header > div {
text-align: center;
width: 100%;
}
.about-header .section-title {
font-size: 42px;
font-weight: 700;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
position: relative;
letter-spacing: -0.5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.about-header .section-title span {
font-size: 48px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.about-header .section-title::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
border-radius: 2px;
margin-top: 16px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 2px 12px rgba(212, 175, 55, 0.5);
}
.about-header .section-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
margin: 0;
font-weight: 400;
line-height: 1.8;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* 简介区域 */
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.intro-content {
padding-right: 20px;
}
.intro-title {
font-size: 28px;
font-weight: 700;
color: var(--primary);
margin-bottom: 24px;
position: relative;
padding-bottom: 12px;
}
.intro-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--gold);
border-radius: 2px;
}
.intro-text {
font-size: 16px;
color: var(--text);
line-height: 1.8;
margin-bottom: 20px;
}
.intro-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid var(--border-light);
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 28px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
color: var(--text-muted);
}
.intro-image {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.intro-image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.intro-image:hover img {
transform: scale(1.05);
}
/* 使命愿景区域 */
.mission-section {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, rgba(15, 43, 91, 0.02) 100%);
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.mission-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.mission-card {
background: var(--surface);
border-radius: var(--radius);
padding: 40px;
border: 2px solid var(--border);
box-shadow: var(--shadow-md);
transition: all 0.4s var(--ease);
height: 100%;
}
.mission-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg), var(--shadow-gold);
border-color: var(--border-gold);
}
.mission-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 24px;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
}
.mission-title {
font-size: 24px;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
}
.mission-text {
font-size: 16px;
color: var(--text);
line-height: 1.7;
margin-bottom: 24px;
}
.mission-list {
list-style: none;
padding: 0;
}
.mission-list li {
font-size: 15px;
color: var(--text);
padding: 10px 0 10px 28px;
border-bottom: 1px dashed var(--border-light);
position: relative;
}
.mission-list li:last-child {
border-bottom: none;
}
.mission-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 10px;
width: 18px;
height: 18px;
background: var(--gold);
color: var(--primary-dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
}
/* 发展历程时间轴 */
.timeline-section {
background: linear-gradient(135deg, rgba(15, 43, 91, 0.02) 0%, rgba(212, 175, 55, 0.03) 100%);
}
.timeline {
position: relative;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--gold) 0%, var(--primary-light) 100%);
border-radius: 2px;
}
.timeline-item {
display: flex;
justify-content: flex-end;
padding-right: 30px;
position: relative;
margin: 40px 0;
width: 50%;
}
.timeline-item:nth-child(even) {
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
margin-left: 50%;
}
.timeline-year {
position: absolute;
top: 0;
width: 80px;
height: 36px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
z-index: 2;
}
.timeline-item .timeline-year {
right: -40px;
}
.timeline-item:nth-child(even) .timeline-year {
left: -40px;
right: auto;
}
.timeline-content {
background: var(--surface);
border-radius: var(--radius-sm);
padding: 24px;
border: 2px solid var(--border);
box-shadow: var(--shadow-md);
width: 100%;
max-width: 450px;
transition: all 0.3s var(--ease);
}
.timeline-content:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--border-gold);
}
.timeline-title {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 12px;
}
.timeline-text {
font-size: 15px;
color: var(--text);
line-height: 1.6;
}
/* 联系我们区域 */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-card {
background: var(--surface);
border-radius: var(--radius-sm);
padding: 24px;
border: 2px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all 0.3s var(--ease);
}
.contact-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--border-gold);
}
.contact-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--gold-soft) 0%, rgba(212, 175, 55, 0.2) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 16px;
border: 1px solid var(--border-gold);
}
.contact-title {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.contact-text {
font-size: 16px;
color: var(--text);
font-weight: 500;
margin-bottom: 4px;
}
.contact-desc {
font-size: 13px;
color: var(--text-muted);
}
.contact-social {
background: var(--surface);
border-radius: var(--radius-sm);
padding: 24px;
border: 2px solid var(--border);
box-shadow: var(--shadow-sm);
}
.social-title {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 16px;
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.social-link {
padding: 8px 16px;
background: var(--bg);
color: var(--text);
border-radius: 20px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s var(--ease);
border: 1px solid var(--border-light);
}
.social-link:hover {
background: var(--gold);
color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
/* 联系表单 */
.contact-form {
background: var(--surface);
border-radius: var(--radius);
padding: 40px;
border: 2px solid var(--border);
box-shadow: var(--shadow-md);
}
.form-title {
font-size: 24px;
font-weight: 700;
color: var(--primary);
margin-bottom: 30px;
padding-bottom: 16px;
border-bottom: 2px solid var(--border-light);
}
.message-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 8px;
}
.form-input,
.form-select,
.form-textarea {
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 15px;
color: var(--text);
background: var(--surface);
transition: all 0.3s var(--ease);
font-family: var(--font);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.form-submit {
padding: 14px 32px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s var(--ease);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
align-self: flex-start;
}
.form-submit:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(184, 134, 11, 0.4);
}
/* 响应式设计 */
@media (max-width: 1024px) {
.intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.intro-content {
padding-right: 0;
}
.intro-stats {
grid-template-columns: repeat(2, 1fr);
}
.mission-grid {
grid-template-columns: 1fr;
}
.timeline::before {
left: 30px;
}
.timeline-item {
width: 100%;
padding-left: 60px;
padding-right: 0;
margin-left: 0;
justify-content: flex-start;
}
.timeline-item:nth-child(even) {
margin-left: 0;
padding-left: 60px;
}
.timeline-item .timeline-year {
left: 10px;
right: auto;
}
.timeline-item:nth-child(even) .timeline-year {
left: 10px;
}
.contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.intro-stats {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.stat-number {
font-size: 24px;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-form {
padding: 30px 24px;
}
.mission-card {
padding: 30px 24px;
}
}
@media (max-width: 480px) {
.intro-stats {
grid-template-columns: 1fr;
}
.stat-item {
text-align: left;
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.stat-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.stat-number {
font-size: 28px;
margin-bottom: 0;
}
.mission-card {
padding: 24px 20px;
}
.mission-title {
font-size: 20px;
}
.timeline-content {
padding: 20px;
}
.timeline-title {
font-size: 16px;
}
}
/* ==================== 关于我们页面专用样式结束 ==================== */
/* ==================== IMA 证书查询专属样式 ==================== */
.ima-cert-page {
min-height: calc(100vh - 200px);
background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
padding: 60px 0;
}
.ima-cert-wrapper {
max-width: 1100px;
margin: 0 auto;
display: flex;
background: #fff;
border-radius: 20px;
box-shadow: 0 25px 80px rgba(15, 43, 91, 0.1);
overflow: hidden;
min-height: 550px;
}
/* 左侧视觉区 */
.ima-cert-visual {
flex: 0 0 320px;
background: linear-gradient(160deg, #0f2b5b 0%, #1a365d 100%);
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.ima-cert-visual::before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
top: -50px;
right: -50px;
}
.ima-cert-brand {
font-size: 48px;
font-weight: 800;
color: #d4af37;
letter-spacing: 4px;
margin-bottom: 20px;
display: flex;
gap: 2px;
}
.ima-cert-brand span {
display: inline-block;
animation: imaFloat 3s ease-in-out infinite;
}
.ima-cert-brand span:nth-child(2) { animation-delay: 0.1s; }
.ima-cert-brand span:nth-child(3) { animation-delay: 0.2s; }
.ima-cert-brand span:nth-child(4) { animation-delay: 0.3s; }
@keyframes imaFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.ima-cert-slogan {
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 40px;
}
.ima-cert-dots {
display: flex;
gap: 10px;
margin-top: auto;
}
.ima-cert-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.5);
}
.ima-cert-dots span:nth-child(2) { background: rgba(212, 175, 55, 0.8); }
.ima-cert-dots span:nth-child(3) { background: #d4af37; }
/* 右侧功能区 */
.ima-cert-main {
flex: 1;
padding: 50px;
}
.ima-cert-header h2 {
font-size: 28px;
color: #0f2b5b;
margin-bottom: 10px;
font-weight: 700;
}
.ima-cert-header p {
font-size: 14px;
color: #64748b;
margin-bottom: 40px;
}
.ima-form-row {
display: flex;
gap: 24px;
margin-bottom: 24px;
}
.ima-input-group {
flex: 1;
display: flex;
flex-direction: column;
}
.ima-input-group label {
font-size: 13px;
font-weight: 600;
color: #0f2b5b;
margin-bottom: 8px;
}
.ima-input-group input {
height: 50px;
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 0 16px;
font-size: 15px;
transition: all 0.3s ease;
}
.ima-input-group input:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
/* 验证码 */
.ima-captcha-box {
display: flex;
gap: 12px;
align-items: center;
}
.ima-captcha-box input {
flex: 1;
}
/* 系统验证码图片样式 */
.ima-captcha-box img {
height: 36px;
width: 140px;
cursor: pointer;
border-radius: 6px;
transition: opacity 0.2s;
flex-shrink: 0;
}
.ima-captcha-box img:hover {
opacity: 0.8;
}
/* 旧的自定义验证码样式（保留兼容） */
.ima-captcha-img {
width: 100px;
height: 50px;
background: #0f2b5b;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #fff;
letter-spacing: 4px;
cursor: pointer;
user-select: none;
}
.ima-refresh-btn {
width: 50px;
height: 50px;
border: 2px solid #e2e8f0;
background: #fff;
border-radius: 10px;
font-size: 20px;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
}
.ima-refresh-btn:hover {
border-color: #d4af37;
color: #d4af37;
transform: rotate(30deg);
}
.ima-form-tip {
font-size: 13px;
color: #64748b;
margin: 20px 0 30px;
display: flex;
align-items: center;
gap: 8px;
}
.ima-submit-btn {
width: 100%;
height: 56px;
background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
border: none;
border-radius: 12px;
color: #0f2b5b;
font-size: 17px;
font-weight: 700;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.ima-submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
.ima-btn-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.6s;
}
.ima-submit-btn:hover .ima-btn-glow {
left: 100%;
}
/* 结果区 */
.ima-result-area {
margin-top: 40px;
padding: 30px;
border-radius: 16px;
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 响应式 */
@media (max-width: 992px) {
.ima-cert-wrapper { flex-direction: column; }
.ima-cert-visual { flex: none; }
.ima-form-row { flex-direction: column; }
}
/* ==================== 结果展示区样式 ==================== */
/* 结果统计头部 */
.ima-result-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: linear-gradient(135deg, #0F2B5B 0%, #1A365D 100%);
border-radius: 12px 12px 0 0;
border-bottom: 3px solid #D4AF37;
}
.ima-result-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}
.ima-result-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.ima-result-header h3 strong {
color: #D4AF37;
font-size: 20px;
}
/* 证书列表容器 */
.ima-cert-list {
background: #ffffff;
border-radius: 0 0 12px 12px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* 证书卡片 */
.ima-cert-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.ima-cert-card:last-child {
margin-bottom: 0;
}
.ima-cert-card:hover {
border-color: #D4AF37;
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
transform: translateY(-2px);
}
/* 卡片标题 */
.ima-card-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #D4AF37;
}
.ima-card-number {
display: inline-block;
font-size: 16px;
font-weight: 700;
color: #D4AF37;
}
.ima-card-title h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1f2937;
}
/* 信息网格 */
.ima-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 24px;
}
.ima-grid-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #f3f4f6;
}
.ima-grid-label {
font-size: 13px;
color: #6b7280;
font-weight: 500;
}
.ima-grid-value {
font-size: 15px;
color: #1f2937;
font-weight: 600;
}
/* 卡片操作按钮 */
.ima-card-actions {
display: flex;
justify-content: center;
padding-top: 16px;
border-top: 1px solid #f3f4f6;
}
.ima-view-cert-btn {
padding: 12px 36px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #0F2B5B;
border: none;
border-radius: 24px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.ima-view-cert-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
background: linear-gradient(135deg, #E6C97A 0%, #D4AF37 100%);
}
.ima-view-cert-btn:active {
transform: translateY(0);
}
/* 空结果状态 */
.ima-result-empty {
text-align: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.ima-empty-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 50%;
position: relative;
}
.ima-empty-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
}
.ima-result-empty h3 {
margin: 0 0 8px;
font-size: 20px;
color: #1f2937;
font-weight: 600;
}
.ima-result-empty p {
margin: 0;
font-size: 14px;
color: #6b7280;
}
/* 响应式适配 */
@media (max-width: 768px) {
.ima-card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.ima-cert-card {
padding: 16px;
}
.ima-card-title h4 {
font-size: 16px;
}
.ima-grid-item {
padding: 10px;
}
.ima-grid-label {
font-size: 12px;
}
.ima-grid-value {
font-size: 14px;
}
.ima-view-cert-btn {
padding: 10px 28px;
font-size: 14px;
}
}
/* ==================== IMA 新闻动态模块 (悬浮分层效果) ==================== */
.ima-news-section {
padding: 60px 0;
background-color: #f4f7fc; /* 浅灰蓝背景 */
}
.ima-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
/* 标题区 */
.ima-section-header {
text-align: center;
margin-bottom: 40px;
}
.ima-section-icon {
font-size: 40px;
display: block;
margin-bottom: 10px;
}
.ima-section-header h2 {
font-size: 28px;
color: #1a202c;
margin-bottom: 10px;
font-weight: 700;
}
.ima-section-header p {
font-size: 14px;
color: #718096;
}
/* 筛选按钮 */
.ima-news-filters {
text-align: center;
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.ima-filter-btn {
background: #fff;
border: 1px solid #e2e8f0;
padding: 8px 20px;
margin: 0;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
color: #4a5568;
transition: all 0.3s;
}
.ima-filter-btn.active, .ima-filter-btn:hover {
background: #2b6cb0; /* 深蓝色 */
color: #fff;
border-color: #2b6cb0;
}
/* 新闻列表 */
.ima-news-list {
display: flex;
flex-direction: column;
gap: 24px; /* 卡片间距 */
}
/* 新闻 Item - 核心悬浮效果 */
.ima-news-item {
display: flex;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.03); /* 柔和阴影 */
transition: transform 0.4s ease, box-shadow 0.4s ease;
border: 1px solid #f0f0f0;
}
.ima-news-item:hover {
transform: translateY(-8px); /* 悬停上浮 */
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); /* 悬停加深阴影 */
}
/* 图片区 */
.ima-news-image {
width: 35%;
position: relative;
flex-shrink: 0;
border-right: 1px solid #f0f0f0; /* 分割线 */
}
.ima-news-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.ima-news-item:hover .ima-news-image img {
transform: scale(1.05); /* 图片微放大 */
}
/* 标签 */
.ima-news-tag {
position: absolute;
top: 15px;
left: 15px;
padding: 4px 10px;
font-size: 12px;
border-radius: 4px;
font-weight: 500;
color: #fff;
}
.ima-news-tag.announcement {
background: linear-gradient(135deg, #2b6cb0, #4299e1); /* 蓝色渐变 */
}
.ima-news-tag.industry {
background: linear-gradient(135deg, #ed8936, #f6ad55); /* 橙色渐变 */
}
/* 内容区 */
.ima-news-content {
width: 65%;
padding: 25px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ima-news-content h3 {
font-size: 18px;
color: #1a202c;
margin: 0 0 15px 0;
line-height: 1.4;
font-weight: 600;
}
.ima-news-content p {
font-size: 14px;
color: #718096;
line-height: 1.7;
margin: 0 0 20px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 底部元信息 */
.ima-news-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: #a0aec0;
}
.ima-news-meta span {
margin-right: 15px;
}
.ima-news-meta i {
margin-right: 4px;
}
.ima-read-more {
color: #2b6cb0;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}
.ima-read-more:hover {
color: #1a202c;
text-decoration: underline;
}
/* 响应式：平板和手机端变成上下布局 */
@media (max-width: 768px) {
.ima-news-item {
flex-direction: column;
}
.ima-news-image {
width: 100%;
height: 200px;
border-right: none;
border-bottom: 1px solid #f0f0f0;
}
.ima-news-content {
width: 100%;
}
}
/* ==================== 新闻列表美化样式 ==================== */
/* 列表头部 */
.ima-news-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #e8e8e8;
}
.ima-news-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.ima-news-header-icon {
width: 4px;
height: 32px;
background: linear-gradient(180deg, #D4AF37 0%, #B8860B 100%);
border-radius: 2px;
}
.ima-news-header-title {
font-size: 24px;
font-weight: 700;
color: #0F2B5B;
margin: 0;
}
.ima-news-header-line {
display: block;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #D4AF37 0%, transparent 100%);
margin-left: 8px;
}
/* 排序按钮 */
.ima-news-sort {
display: flex;
gap: 8px;
}
.ima-sort-btn {
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
color: #64748b;
text-decoration: none;
border: 1px solid #e2e8f0;
background: #fff;
transition: all 0.3s;
cursor: pointer;
}
.ima-sort-btn:hover,
.ima-sort-btn.active {
background: linear-gradient(135deg, #0F2B5B 0%, #1a3a6e 100%);
color: #fff;
border-color: #0F2B5B;
box-shadow: 0 4px 12px rgba(15, 43, 91, 0.2);
}
/* 新闻卡片 */
.ima-news-card {
display: flex;
background: #fff;
border-radius: 16px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ima-news-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
border-color: #D4AF37;
}
/* 卡片图片区 */
.ima-news-card-image {
width: 38%;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.ima-news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
min-height: 220px;
}
.ima-news-card:hover .ima-news-card-image img {
transform: scale(1.08);
}
.ima-news-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 43, 91, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s;
}
.ima-news-card:hover .ima-news-card-overlay {
opacity: 1;
}
/* 标签 */
.ima-news-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
background: linear-gradient(135deg, #0F2B5B 0%, #1a3a6e 100%);
color: #fff;
font-size: 12px;
font-weight: 600;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(15, 43, 91, 0.3);
z-index: 2;
}
.ima-news-badge-orange {
background: linear-gradient(135deg, #ed8936 0%, #f6ad55 100%);
box-shadow: 0 4px 12px rgba(237, 137, 54, 0.3);
}
/* 卡片内容区 */
.ima-news-card-content {
width: 62%;
padding: 28px 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ima-news-card-title {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}
.ima-news-card-title a {
color: #1a202c;
text-decoration: none;
transition: color 0.3s;
}
.ima-news-card-title a:hover {
color: #D4AF37;
}
.ima-news-card-desc {
font-size: 14px;
color: #718096;
line-height: 1.8;
margin: 0 0 20px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 卡片底部 */
.ima-news-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
}
.ima-news-card-meta {
display: flex;
gap: 16px;
}
.ima-news-date,
.ima-news-views {
font-size: 13px;
color: #a0aec0;
display: flex;
align-items: center;
gap: 6px;
}
.ima-news-date i,
.ima-news-views i {
font-size: 14px;
}
.ima-news-read-more {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #fff;
text-decoration: none;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.ima-news-read-more:hover {
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}
.ima-news-read-more i {
font-size: 12px;
transition: transform 0.3s;
}
.ima-news-read-more:hover i {
transform: translateX(4px);
}
/* 分页 */
.ima-news-pagination {
margin-top: 50px;
text-align: center;
}
.ima-pagination {
display: inline-flex;
gap: 8px;
align-items: center;
}
.ima-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 8px;
background: #fff;
border: 1px solid #e2e8f0;
color: #64748b;
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
}
.ima-page-btn:hover {
background: #0F2B5B;
color: #fff;
border-color: #0F2B5B;
box-shadow: 0 4px 12px rgba(15, 43, 91, 0.2);
}
.ima-page-btn.active {
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #fff;
border-color: #D4AF37;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.ima-page-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.ima-news-card {
flex-direction: column;
}
.ima-news-card-image {
width: 100%;
height: 220px;
}
.ima-news-card-content {
width: 100%;
padding: 24px;
}
.ima-news-header {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.ima-news-sort {
width: 100%;
}
.ima-sort-btn {
flex: 1;
text-align: center;
}
}
/* ... existing code ... */
/* 分页 */
.ima-news-pagination {
margin-top: 50px;
text-align: center;
}
.ima-pagination-wrapper {
display: inline-block;
}
/* 迅睿CMS默认分页样式覆盖 */
.ima-pagination-wrapper .pagination {
display: inline-flex;
gap: 8px;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.ima-pagination-wrapper .pagination a,
.ima-pagination-wrapper .pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 8px;
background: #fff;
border: 1px solid #e2e8f0;
color: #64748b;
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
line-height: 1;
}
.ima-pagination-wrapper .pagination a:hover {
background: #0F2B5B;
color: #fff;
border-color: #0F2B5B;
box-shadow: 0 4px 12px rgba(15, 43, 91, 0.2);
}
.ima-pagination-wrapper .pagination .active,
.ima-pagination-wrapper .pagination .active a {
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #fff;
border-color: #D4AF37;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.ima-pagination-wrapper .pagination .disabled,
.ima-pagination-wrapper .pagination .disabled a {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* 响应式设计 */
/* ... existing code ... */
/* ==================== 作品内容页专用样式 (沉浸式) ==================== */
/* 页面基础 */
.ima-work-detail-page {
background: #f0f2f5;
padding-bottom: 60px;
}
/* 核心展示区布局 */
.work-showcase {
display: grid;
grid-template-columns: 2fr 1fr; /* 大图占2/3, 信息卡占1/3 */
gap: 0;
max-width: 1400px;
margin: 0 auto;
background: #fff;
min-height: 70vh;
}
/* 大图区域 */
.work-main-image {
position: relative;
overflow: hidden;
cursor: zoom-in;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.work-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.work-main-image:hover img {
transform: scale(1.05);
}
.image-overlay-hint {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(0,0,0,0.6);
color: #fff;
padding: 10px 20px;
border-radius: 30px;
font-size: 14px;
opacity: 0;
transition: all 0.4s ease;
backdrop-filter: blur(5px);
}
.work-main-image:hover .image-overlay-hint {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 悬浮信息卡片 */
.work-info-card {
background: linear-gradient(160deg, #ffffff 0%, #f8f9fa 100%);
padding: 40px;
display: flex;
align-items: center;
border-left: 1px solid #eee;
}
.info-card-inner {
width: 100%;
}
.work-category {
margin-bottom: 20px;
}
.category-tag {
display: inline-block;
background: linear-gradient(135deg, var(--gold-soft), rgba(212,175,55,0.2));
color: var(--gold-dark);
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-right: 8px;
border: 1px solid var(--border-gold);
}
.work-title {
font-size: 32px;
font-weight: 800;
color: var(--primary);
margin-bottom: 20px;
line-height: 1.2;
}
.work-excerpt {
font-size: 15px;
color: var(--text);
line-height: 1.8;
margin-bottom: 30px;
}
/* Meta 网格 */
.work-meta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.meta-item {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
padding: 15px;
border-radius: 10px;
border: 1px solid #f0f0f0;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.meta-icon {
font-size: 24px;
}
.meta-text {
display: flex;
flex-direction: column;
font-size: 12px;
color: var(--text-muted);
}
.meta-text strong {
font-size: 16px;
color: var(--primary);
font-weight: 700;
}
/* 操作按钮 */
.work-actions {
display: flex;
gap: 15px;
}
.action-btn {
flex: 1;
padding: 14px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
border: none;
text-align: center;
}
.action-btn.primary {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: var(--primary-dark);
box-shadow: 0 4px 15px rgba(212,175,55,0.3);
}
.action-btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(184,134,11,0.4);
}
.action-btn.secondary {
background: #fff;
color: var(--text);
border: 2px solid #e0e0e0;
}
.action-btn.secondary:hover {
border-color: var(--gold);
color: var(--gold-dark);
}
/* 作者信息栏 */
.author-bar {
background: #fff;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.author-bar-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.author-profile {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--gold);
}
.author-info h4 {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 4px;
}
.author-info p {
font-size: 14px;
color: var(--text-muted);
}
.view-profile-btn {
padding: 10px 24px;
background: var(--primary);
color: #fff;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
.view-profile-btn:hover {
background: var(--gold);
color: var(--primary-dark);
}
/* 相关作品 */
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.related-item {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 3/4;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
transition: all 0.4s ease;
}
.related-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.related-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.related-item:hover img {
transform: scale(1.1);
}
.related-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 10px 15px;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
font-size: 14px;
font-weight: 600;
}
/* 灯箱样式 */
.lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.lightbox.active {
display: block;
opacity: 1;
}
.lightbox-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.95);
backdrop-filter: blur(10px);
}
.lightbox-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.lightbox-image {
max-width: 90%;
max-height: 90vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
position: absolute;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
background: var(--gold);
color: var(--primary-dark);
transform: scale(1.1);
}
.lightbox-close { top: 30px; right: 30px; width: 50px; height: 50px; font-size: 24px; }
.lightbox-prev { left: 30px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; font-size: 30px; }
.lightbox-next { right: 30px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; font-size: 30px; }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.1); }
.lightbox-caption { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 10px 25px; border-radius: 30px; font-size: 14px; }
/* 响应式 */
@media (max-width: 1024px) {
.work-showcase { grid-template-columns: 1fr; }
.work-info-card { border-left: none; border-top: 1px solid #eee; padding: 30px 20px; }
.work-title { font-size: 28px; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.work-meta-grid { grid-template-columns: 1fr; }
.work-actions { flex-direction: column; }
.author-bar-inner { flex-direction: column; gap: 15px; text-align: center; }
}
/* ==================== 作品内容页样式结束 ==================== */
/* 内容详情区样式 */
.work-content-section {
padding: 60px 0;
background: #f8f9fa;
}
.work-content-body {
max-width: 1000px;
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
line-height: 1.8;
font-size: 16px;
color: #333;
}
.work-content-body img {
max-width: 100%;
height: auto;
margin: 20px 0;
border-radius: 8px;
display: block;
}
.work-content-body p {
margin-bottom: 16px;
}
.content-image-item {
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.content-image-item img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
transition: transform 0.3s ease;
}
.content-image-item img:hover {
transform: scale(1.02);
}
/* ==================== 证书预览弹窗样式 ==================== */
.ima-cert-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
padding: 20px;
}
.ima-cert-modal-overlay.active {
opacity: 1;
}
.ima-cert-modal-container {
position: relative;
max-width: 900px;
width: 100%;
max-height: 90vh;
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.ima-cert-modal-overlay.active .ima-cert-modal-container {
transform: scale(1);
}
.ima-cert-modal-header {
background: linear-gradient(135deg, #0F2B5B 0%, #0A1F42 100%);
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid #D4AF37;
}
.ima-cert-modal-title {
color: #fff;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.ima-cert-modal-title::before {
content: '';
width: 4px;
height: 24px;
background: linear-gradient(180deg, #D4AF37 0%, #B8860B 100%);
border-radius: 2px;
}
.ima-cert-modal-close {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 8px;
color: #D4AF37;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
line-height: 1;
}
.ima-cert-modal-close:hover {
background: rgba(212, 175, 55, 0.2);
transform: rotate(90deg);
}
.ima-cert-modal-body {
padding: 30px;
overflow-y: auto;
max-height: calc(90vh - 80px);
}
.ima-cert-image-wrapper {
position: relative;
width: 100%;
background: #f5f5f5;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.ima-cert-background {
width: 100%;
height: auto;
display: block;
position: relative;
}
.ima-cert-content-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.ima-cert-title-section {
width: 100%;
position: relative;
}
.ima-cert-main-title {
font-size: 38px;
color: #0F2B5B;
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 8px;
/* 位置控制 - 可根据需要调整 */
position: absolute;
top: 208px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.ima-cert-sub-title {
font-size: 16px;
color: #D4AF37;
font-weight: 500;
letter-spacing: 1px;
/* 位置控制 - 可根据需要调整 */
position: absolute;
top: 280px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.ima-cert-auth-text {
font-size: 22px;
color: #1A1F2B;
line-height: 1.6;
/* 位置控制 - 可根据需要调整 */
position: absolute;
top: 415px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.ima-cert-name-display {
/* 位置控制 - 可根据需要调整 */
position: absolute;
top: 320px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.ima-cert-name-text {
font-size: 52px;
color: #0F2B5B;
font-weight: 700;
letter-spacing: 12px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ima-cert-certification-text {
font-size: 40px;
color: #1A1F2B;
font-weight: 600;
line-height: 1.2;
/* 位置控制 - 可根据需要调整 */
position: absolute;
top: 640px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.ima-cert-info-vertical {
width: 100%;
max-width: 600px;
/* 位置控制 - 可根据需要调整 */
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.ima-cert-info-line {
font-size: 22px;
color: #1A1F2B;
line-height: 1.6;
font-weight: 500;
width: 100%;
/* 位置控制 - 每行独立定位 */
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ima-cert-info-line.ima-cert-line-1 {
/* 证书编号行 */
top: 530px;
}
.ima-cert-info-line.ima-cert-line-2 {
/* 技能分数行 */
top: 570px;
}
.ima-cert-info-line.ima-cert-line-3 {
/* 身份证号行 */
top: 610px;
}
.ima-cert-info-line.ima-cert-line-4 {
/* 认证日期行 */
top: 790px;
}
.ima-cert-info-line strong {
color: #0F2B5B;
font-weight: 700;
}
.ima-cert-download-btn {
width: 100%;
margin-top: 20px;
padding: 14px 30px;
background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
color: #0F2B5B;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}
.ima-cert-download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}
.ima-cert-loading {
text-align: center;
padding: 60px 20px;
color: #64748B;
}
.ima-cert-loading-spinner {
width: 50px;
height: 50px;
margin: 0 auto 20px;
border: 4px solid #E2E8F0;
border-top-color: #D4AF37;
border-radius: 50%;
animation: ima-cert-spin 1s linear infinite;
}
@keyframes ima-cert-spin {
to { transform: rotate(360deg); }
}
/* 响应式 */
@media (max-width: 768px) {
.ima-cert-modal-container {
max-width: 100%;
max-height: 95vh;
}
.ima-cert-modal-body {
padding: 20px;
}
.ima-cert-content-overlay {
padding: 10% 8%;
}
.ima-cert-main-title {
font-size: 22px;
letter-spacing: 2px;
}
.ima-cert-sub-title {
font-size: 13px;
}
.ima-cert-auth-text {
font-size: 14px;
}
.ima-cert-name-text {
font-size: 32px;
letter-spacing: 8px;
}
.ima-cert-certification-text {
font-size: 16px;
}
.ima-cert-info-line {
font-size: 15px;
line-height: 2;
}
}
/* ==================== 证书预览弹窗样式结束 ==================== */