/* 组织建设页面样式 */ /* 页面横幅 */ .org-banner { height: 625px; background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; margin-top: 80px; background-image: url('../../images/tmzzjsbanner.png'); background-size: cover; background-position: center; } .banner-quote { text-align: center; color: white; z-index: 2; margin-bottom: 60px; } .quote-text { font-size: 28px; font-weight: 400; margin: 0 0 15px 0; letter-spacing: 1px; } .quote-author { font-size: 18px; font-weight: 300; margin: 0; opacity: 0.95; } .org-banner .breadcrumb { position: absolute; bottom: 20px; left: 0; right: 0; } /* 主内容区 */ .org-page { padding: 60px 0 80px; } .section-title { font-size: 28px; font-weight: 500; color: #333; margin-bottom: 40px; } /* 组织架构 */ .org-structure-section { margin-bottom: 80px; } .org-description { margin-bottom: 50px; line-height: 2; color: #666; font-size: 15px; text-align: justify; } .org-chart-image { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .org-chart-image img { width: 100%; max-width: 100%; height: auto; display: block; } /* 党委荣誉 */ .party-honors-section { margin-bottom: 80px; } .honors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } .org-honor-item { background: #f5f5f5; padding: 20px; border-radius: 4px; transition: all 0.3s ease; cursor: pointer; } .org-honor-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .org-honor-item img { width: 100%; height: auto; display: block; } /* 学习文件 */ .study-files-section { margin-bottom: 80px; border-radius: 8px; } .study-files-section .section-title { margin-bottom: 30px; } .file-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .file-item { display: flex; align-items: center; gap: 20px; padding: 20px 30px; background: white; border: 1px solid #e8e8e8; border-radius: 4px; transition: all 0.3s ease; cursor: pointer; } .file-item:hover { border-color: var(--primary-color); box-shadow: 0 2px 12px rgba(27, 81, 190, 0.1); } .file-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .file-info { flex: 1; min-width: 0; } .file-title { font-size: 16px; font-weight: 400; color: #333; margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .file-action { flex-shrink: 0; } .view-btn { font-size: 14px; color: #999; white-space: nowrap; transition: color 0.3s ease; } .file-item:hover .view-btn { color: var(--primary-color); } /* 党委活动堆叠轮播 */ .party-activities-section { margin-bottom: 80px; } .activities-slider-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 40px 0; } .activities-slider { position: relative; width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; } .slider-track { position: relative; width: 100%; height: 100%; } .activity-slide { position: absolute; width: 60%; max-width: 700px; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; z-index: 1; } .activity-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 当前显示的图片 */ .activity-slide.active { opacity: 1 !important; z-index: 5; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } /* 左侧第1张 */ .activity-slide.prev { opacity: 0.8 !important; z-index: 4; transform: translate(-85%, -50%) scale(0.88) rotateY(12deg); pointer-events: auto; } /* 左侧第2张 */ .activity-slide.prev-2 { opacity: 0.6 !important; z-index: 3; transform: translate(-105%, -50%) scale(0.76) rotateY(18deg); pointer-events: auto; } /* 右侧第1张 */ .activity-slide.next { opacity: 0.8 !important; z-index: 4; transform: translate(-15%, -50%) scale(0.88) rotateY(-12deg); pointer-events: auto; } /* 右侧第2张 */ .activity-slide.next-2 { opacity: 0.6 !important; z-index: 3; transform: translate(-5%, -50%) scale(0.76) rotateY(-18deg); pointer-events: auto; } /* hover效果 */ .activity-slide.prev:hover { opacity: 0.95; transform: translate(-85%, -50%) scale(0.92) rotateY(12deg); } .activity-slide.prev-2:hover { opacity: 0.8; transform: translate(-105%, -50%) scale(0.8) rotateY(18deg); } .activity-slide.next:hover { opacity: 0.95; transform: translate(-15%, -50%) scale(0.92) rotateY(-12deg); } .activity-slide.next-2:hover { opacity: 0.8; transform: translate(-5%, -50%) scale(0.8) rotateY(-18deg); } .activity-slide.active:hover { transform: translate(-50%, -50%) scale(1.02); } /* 切换按钮 */ .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 28px; color: #333; cursor: pointer; transition: all 0.3s ease; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .slider-btn:hover { background: var(--primary-color); color: white; transform: translateY(-50%) scale(1.1); } .prev-btn { left: 20px; } .next-btn { right: 20px; } /* 隐藏指示器 */ .slider-dots { display: none; } /* 响应式设计 */ @media (max-width: 1200px) { .honors-grid { gap: 20px; } .activities-slider-container { max-width: 900px; } } @media (max-width: 768px) { .org-banner { height: 400px; } .quote-text { font-size: 20px; padding: 0 20px; } .quote-author { font-size: 16px; } .org-page { padding: 40px 0 60px; } .section-title { font-size: 24px; margin-bottom: 30px; } .org-chart-image { margin-top: 30px; } .honors-grid { grid-template-columns: 1fr; gap: 20px; } .org-honor-item { padding: 15px; } .study-files-section { padding: 30px 20px; } .file-list { grid-template-columns: 1fr; gap: 15px; } .file-item { padding: 18px 25px; gap: 15px; } .file-icon svg { width: 40px; height: 48px; } .activities-slider-container { max-width: 100%; padding: 30px 0; } .activities-slider { height: 350px; } .activity-slide { width: 70%; height: 70%; } .activity-slide.prev { transform: translate(-85%, -50%) scale(0.82) rotateY(10deg); } .activity-slide.prev-2 { transform: translate(-102%, -50%) scale(0.7) rotateY(15deg); } .activity-slide.next { transform: translate(-15%, -50%) scale(0.82) rotateY(-10deg); } .activity-slide.next-2 { transform: translate(-2%, -50%) scale(0.7) rotateY(-15deg); } .activity-slide.prev:hover { transform: translate(-85%, -50%) scale(0.86) rotateY(10deg); } .activity-slide.prev-2:hover { transform: translate(-102%, -50%) scale(0.74) rotateY(15deg); } .activity-slide.next:hover { transform: translate(-15%, -50%) scale(0.86) rotateY(-10deg); } .activity-slide.next-2:hover { transform: translate(-2%, -50%) scale(0.74) rotateY(-15deg); } .slider-btn { width: 40px; height: 40px; font-size: 24px; } .prev-btn { left: 10px; } .next-btn { right: 10px; } } @media (max-width: 480px) { .org-banner { height: 300px; } .quote-text { font-size: 18px; } .quote-author { font-size: 14px; } .section-title { font-size: 20px; } .org-chart-image { margin-top: 20px; } .org-honor-item { padding: 12px; } .study-files-section { padding: 25px 15px; } .file-item { padding: 15px 20px; gap: 12px; } .file-icon svg { width: 35px; height: 42px; } .file-title { font-size: 14px; } .view-btn { font-size: 13px; } .activities-slider-container { padding: 20px 0; } .activities-slider { height: 280px; } .activity-slide { width: 80%; height: 65%; } .activity-slide.prev { transform: translate(-85%, -50%) scale(0.75) rotateY(8deg); } .activity-slide.prev-2 { transform: translate(-100%, -50%) scale(0.6) rotateY(12deg); } .activity-slide.next { transform: translate(-15%, -50%) scale(0.75) rotateY(-8deg); } .activity-slide.next-2 { transform: translate(0%, -50%) scale(0.6) rotateY(-12deg); } .activity-slide.prev:hover { transform: translate(-85%, -50%) scale(0.78) rotateY(8deg); } .activity-slide.prev-2:hover { transform: translate(-100%, -50%) scale(0.64) rotateY(12deg); } .activity-slide.next:hover { transform: translate(-15%, -50%) scale(0.78) rotateY(-8deg); } .activity-slide.next-2:hover { transform: translate(0%, -50%) scale(0.64) rotateY(-12deg); } .slider-btn { width: 35px; height: 35px; font-size: 20px; } .prev-btn { left: 5px; } .next-btn { right: 5px; } }