/* 头部banner */ .intro-banner { height: 300px; position: relative; overflow: hidden; margin-bottom: 60px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(images/内蒙古工业大学白天.jpg) center/cover no-repeat; transition: background 0.3s ease; } body.night-mode .intro-banner { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url(images/内蒙古工业大学夜晚.jpg) center/cover no-repeat; } .intro-banner-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 10; } .intro-banner-text h1 { font-size: 36px; margin-bottom: 12px; letter-spacing: 1px; } .intro-banner-text p { font-size: 18px; opacity: 0.9; } /* 板块一:核心信息(三列两行布局) */ .intro-section1 { margin-bottom: 80px; padding: 30px 0; } .intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; row-gap: 40px; } .intro-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(22,93,255,0.08); padding: 24px; transition: all 0.3s ease; } body.night-mode .intro-card { background-color: #2C3036; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .intro-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(22,93,255,0.12); } body.night-mode .intro-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .intro-card h3 { font-size: 18px; color: #165DFF; margin-bottom: 12px; display: flex; align-items: center; } .intro-card h3::before { content: ""; width: 4px; height: 20px; background-color: #165DFF; margin-right: 8px; border-radius: 2px; } .intro-card p { font-size: 14px; color: #4E5969; line-height: 1.8; } body.night-mode .intro-card p { color: #E5E6EB; } /* 板块二:坤班负责人 + 通用板块标题 */ .intro-section2 { margin-bottom: 80px; padding: 30px 0; } .section-title { text-align: center; margin-bottom: 40px; } .section-title h2 { font-size: 28px; color: #000; margin-bottom: 8px; display: inline-block; border-bottom: 2px solid #165DFF; padding-bottom: 6px; background: rgba(255,255,255,0.8); padding: 0 20px 6px; border-radius: 4px 4px 0 0; } body.night-mode .section-title h2 { color: #fff; border-bottom: 2px solid #fff; background: rgba(29,33,41,0.8); } .leader-container { display: flex; align-items: flex-start; gap: 40px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(22,93,255,0.08); padding: 30px; margin-bottom: 20px; } /* .dash{ border-style: dashed; } */ body.night-mode .leader-container { background-color: #2C3036; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .leader-avatar { flex: 0 0 180px; text-align: center; } .leader-avatar img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #F2F3F5; } body.night-mode .leader-avatar img { border-color: #373B41; } .leader-avatar p { margin-top: 12px; font-size: 16px; font-weight: 600; color: #000; } body.night-mode .leader-avatar p { color: #fff; } .leader-timeline { flex: 1; } .timeline-item { margin-bottom: 20px; padding-left: 24px; position: relative; border-left: 2px solid #165DFF; padding-bottom: 20px; } .timeline-item .md-h3{ color:#165DFF; } .timeline-item .md-h2{ color:#165DFF; } .timeline-item .md-b{ color:#165DFF; } .timeline-item:last-child { border-left: 2px solid transparent; margin-bottom: 0; padding-bottom: 0; } /* .timeline-item::before { content: ""; position: absolute; left: -8px; top: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #165DFF; } */ .timeline-time { font-size: 14px; color: #165DFF; font-weight: 600; margin-bottom: 6px; } .timeline-content { font-size: 14px; color: #4E5969; line-height: 1.7; } body.night-mode .timeline-content { color: #E5E6EB; } /* 坤班简介页专属移动端适配 */ @media (max-width: 768px) { .intro-banner { height: 200px; } .intro-banner-text h1 { font-size: 24px; } .intro-banner-text p { font-size: 16px; } .intro-grid { grid-template-columns: 1fr; gap: 20px; } .leader-container { flex-direction: column; gap: 20px; padding: 20px; } .leader-avatar { flex: none; width: 100%; } }