<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片展示网站</title>
<style>
/* 导入字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');
/* 基础字体设置 */
:root {
--primary-100: #0077C2;
--primary-200: #59a5f5;
--primary-300: #c8ffff;
--accent-100: #00BFFF;
--accent-200: #00619a;
--text-100: #333333;
--text-200: #5c5c5c;
--bg-100: #FFFFFF;
--bg-200: #f5f5f5;
--bg-300: #cccccc;
--font-heading: 'Noto Serif SC', serif;
--font-body: 'Noto Sans SC', sans-serif;
}
body {
background: linear-gradient(135deg, #EEEEEE, var(--bg-200));
background-attachment: fixed;
min-height: 100vh;
color: var(--text-100);
font-family: var(--font-body);
line-height: 1.6;
letter-spacing: 0.02em;
}
header {
background: linear-gradient(135deg, #0288d1, #26c6da);
position: relative;
padding: 60px 0;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 添加动态背景图案 */
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 25%),
radial-gradient(circle at 80% 30%, rgba(255,255,255,0.15) 0%, transparent 20%);
animation: headerGlow 10s ease-in-out infinite;
}
/* 添加几何装饰 */
header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.1) 50%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.1) 50%, transparent 52%);
background-size: 30px 30px;
opacity: 0.5;
}
/* 标题容器 */
.title-container {
text-align: center;
padding: 60px 20px 40px;
position: relative;
overflow: hidden;
}
/* 装饰容器 */
.decorations {
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: center;
gap: 30px;
pointer-events: none;
}
/* 标题装饰动画 */
.title-decoration {
display: inline-block;
font-size: 1.5em;
opacity: 0.8;
animation: float 3s ease-in-out infinite; /* 减慢动画速度 */
animation-delay: var(--delay, 0s);
}
/* 为每个装饰添加不同的延迟 */
.title-decoration:nth-child(1) { --delay: 0s; }
.title-decoration:nth-child(2) { --delay: 0.6s; }
.title-decoration:nth-child(3) { --delay: 1.2s; }
.title-decoration:nth-child(4) { --delay: 1.8s; }
.title-decoration:nth-child(5) { --delay: 2.4s; }
/* 优化浮动动画 */
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateY(-8px) rotate(5deg); /* 减小上下幅度 */
opacity: 1;
}
}
/* 标题样式 */
.title-container h1 {
margin: 40px 0 20px;
font-size: 2.8em;
color: white;
position: relative;
display: inline-block;
/* 增强文字阴影效果 */
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.2),
0 0 10px rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.2),
0 0 30px rgba(255, 255, 255, 0.1);
font-weight: 700;
letter-spacing: 0.05em;
/* 添加光泽效果 */
background: linear-gradient(
180deg,
#ffffff 0%,
#f0f0f0 50%,
#ffffff 100%
);
-webkit-background-clip: text;
background-clip: text;
/* 添加动画效果 */
animation: titleShine 3s ease-in-out infinite;
}
/* 添加标题光泽动画 */
@keyframes titleShine {
0%, 100% {
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.2),
0 0 10px rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.2),
0 0 30px rgba(255, 255, 255, 0.1);
}
50% {
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.2),
0 0 15px rgba(255, 255, 255, 0.6),
0 0 25px rgba(255, 255, 255, 0.3),
0 0 35px rgba(255, 255, 255, 0.2);
}
}
/* 装饰线条 */
.decoration-line {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg,
transparent,
var(--primary-100),
var(--primary-200),
var(--primary-100),
transparent
);
opacity: 0.8;
animation: shine 3s ease-in-out infinite;
}
/* 副标题样式 */
.title-container p {
color: white;
font-size: 1.3em;
margin-top: 15px;
opacity: 0.9;
font-weight: 500;
letter-spacing: 0.03em;
}
/* 装饰线动画 */
@keyframes shine {
0%, 100% {
opacity: 0.5;
transform: scaleX(0.95);
}
50% {
opacity: 0.8;
transform: scaleX(1);
}
}
/* 响应式调整 */
@media screen and (max-width: 768px) {
.title-container h1 {
font-size: 2em;
}
.title-container p {
font-size: 1.1em;
}
.decorations {
gap: 20px;
}
.title-decoration {
font-size: 1.2em;
}
}
/* 添加更多装饰元素 */
.title-container::before,
.title-container::after {
content: '✨';
position: absolute;
font-size: 1.5em;
animation: twinkle 3s ease-in-out infinite;
}
.title-container::before {
left: 20%;
top: 30%;
}
.title-container::after {
right: 20%;
top: 30%;
}
/* 闪烁动画 */
@keyframes twinkle {
0%, 100% {
opacity: 0.3;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
/* 装饰性引号 */
header h1::before,
header h1::after {
content: '"';
position: absolute;
font-size: 1.5em;
color: rgba(255,255,255,0.2);
animation: quoteFloat 3s ease-in-out infinite alternate;
transition: all 0.3s ease;
}
header h1::before {
left: -30px;
top: -20px;
}
header h1::after {
right: -30px;
bottom: -20px;
}
/* 动画定义 */
@keyframes shimmer {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes tiltShake {
0%, 100% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(-2deg) scale(1.02); }
75% { transform: rotate(2deg) scale(1.02); }
}
@keyframes quoteFloat {
from { transform: translateY(0) rotate(0deg); }
to { transform: translateY(-10px) rotate(5deg); }
}
/* 文字装饰线动画优化 */
header h1 .decoration-line {
content: '';
display: block;
width: 0;
height: 3px;
background: linear-gradient(to right,
rgba(255,255,255,0),
rgba(255,255,255,0.8),
rgba(255,255,255,0));
margin: 15px auto 0;
border-radius: 2px;
animation: lineGrow 1.5s ease-out forwards;
transition: all 0.3s ease;
}
@keyframes lineGrow {
0% {
width: 0;
opacity: 0;
}
100% {
width: 100px;
opacity: 1;
}
}
/* 装饰线动画增强 */
.decoration-line:hover {
animation: lineJump 0.6s ease infinite;
}
/* 响应式调整 */
@media screen and (max-width: 768px) {
header h1 {
font-size: 2.2em;
}
header p {
font-size: 1.1em;
}
header h1::before,
header h1::after {
display: none;
}
}
/* 添加浮动元素 */
.header-decoration {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.header-decoration:nth-child(1) {
top: -50px;
left: -50px;
animation: float 8s ease-in-out infinite;
}
.header-decoration:nth-child(2) {
bottom: -30px;
right: -30px;
width: 150px;
height: 150px;
animation: float 6s ease-in-out infinite reverse;
}
/* 动画定义 */
@keyframes headerGlow {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(15px, -15px) rotate(5deg); }
}
/* 筛选按钮样式 */
.filter-btn {
background: var(--bg-100);
color: var(--text-100);
border: 2px solid transparent;
padding: 8px 20px;
margin: 0 8px;
border-radius: 25px;
transition: all 0.3s ease;
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: none;
box-shadow:
0 5px 15px rgba(0, 119, 194, 0.05),
0 3px 5px rgba(0, 119, 194, 0.1);
}
.filter-btn:hover {
background: linear-gradient(to bottom, var(--bg-100), var(--primary-300));
color: var(--primary-100);
}
.filter-btn.active {
background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
color: var(--bg-100);
box-shadow:
0 10px 25px rgba(0, 119, 194, 0.3),
0 5px 10px rgba(0, 119, 194, 0.2);
}
/* 容器布局样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 筛选按钮容器 */
.category-filter {
position: sticky;
top: 20px;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px 25px;
margin: 30px auto;
box-shadow: 0 15px 35px rgba(0, 119, 194, 0.1);
border: 1px solid rgba(89, 165, 245, 0.2);
}
/* 按钮容器 */
.filter-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
perspective: 1000px; /* 添加3D视角 */
}
/* 按钮立体效果 */
.filter-btn {
position: relative;
padding: 12px 25px;
background: var(--bg-100);
color: var(--text-100);
border: none;
border-radius: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
box-shadow:
0 5px 15px rgba(0, 119, 194, 0.05),
0 3px 5px rgba(0, 119, 194, 0.1),
0 -1px 1px rgba(255, 255, 255, 0.9) inset,
0 2px 0 rgba(255, 255, 255, 0.5) inset;
}
/* 按钮底部立体效果 */
.filter-btn::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: var(--bg-100);
border-radius: 12px;
transform: translateZ(-4px);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
z-index: -1;
}
/* 按钮顶部光泽效果 */
.filter-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.6),
transparent
);
border-radius: 12px 12px 0 0;
pointer-events: none;
}
/* 按钮悬浮效果 */
.filter-btn:hover {
transform: translateY(-4px) translateZ(10px);
box-shadow:
0 8px 20px rgba(0, 119, 194, 0.15),
0 4px 8px rgba(0, 119, 194, 0.1),
0 -1px 1px rgba(255, 255, 255, 0.9) inset,
0 2px 0 rgba(255, 255, 255, 0.5) inset;
background: linear-gradient(to bottom, var(--bg-100), var(--primary-300));
color: var(--primary-100);
}
/* 按钮点击效果 */
.filter-btn:active {
transform: translateY(0) translateZ(5px);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.1),
0 -1px 1px rgba(255, 255, 255, 0.9) inset;
}
/* 活跃按钮样式 */
.filter-btn.active {
background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
color: white;
font-weight: 600;
transform: translateY(-2px) translateZ(15px);
box-shadow:
0 10px 25px rgba(0, 119, 194, 0.3),
0 5px 10px rgba(0, 119, 194, 0.2),
0 -1px 1px rgba(255, 255, 255, 0.3) inset;
}
/* 计数器样式 */
.filter-btn .count {
position: absolute;
top: -8px;
right: -8px;
background: var(--accent-100);
color: var(--bg-100);
font-size: 0.75em;
padding: 3px 8px;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(0, 191, 255, 0.3);
transform: translateZ(20px);
opacity: 0;
transition: all 0.3s ease;
}
.filter-btn:hover .count {
opacity: 1;
transform: translateZ(25px);
}
/* 响应式调整 */
@media screen and (max-width: 768px) {
.category-filter {
margin: 20px 10px;
padding: 15px;
}
.filter-buttons {
gap: 12px;
}
.filter-btn {
padding: 10px 20px;
font-size: 0.9em;
}
}
/* 图片网格布局 */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
padding: 20px 0;
}
/* 添加外层容器来处理溢出 */
.gallery-item-wrapper {
position: relative;
height: 400px;
padding: 20px; /* 添加内边距防止阴影被裁切 */
perspective: 1500px;
}
/* 卡片主体样式 */
.gallery-item {
position: relative;
height: 100%;
width: 100%;
border-radius: 15px;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-100), var(--bg-200));
box-shadow: 0 8px 25px rgba(0, 119, 194, 0.1);
transition: all 0.5s ease;
cursor: pointer;
transform-style: preserve-3d;
transform: translateZ(0); /* 启用GPU加速 */
will-change: transform; /* 提示浏览器即将进行变换 */
}
/* 内部容器样式 */
.gallery-item-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.2s ease-out;
}
/* 图片容器样式 */
.gallery-item-content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/* 添加缩放以防止边缘露出 */
transform: scale(1.1);
}
/* 图片样式 */
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
backface-visibility: hidden;
transform: translateZ(0); /* 启用GPU加速 */
}
/* 光效样式 */
.gallery-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
125deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0) 60%
);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.gallery-item:hover::after {
opacity: 0.5;
}
/* 悬浮时的阴影效果增强 */
.gallery-item:hover {
box-shadow:
0 15px 35px rgba(0, 119, 194, 0.2),
0 10px 25px rgba(0, 119, 194, 0.15);
}
/* 添加边缘光效 */
.gallery-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.2)
);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.gallery-item:hover::before {
opacity: 1;
}
/* 图片加载效果 */
.gallery-item.loading::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
animation: loading-shine 1.5s infinite;
}
/* 模态框样式优化 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.modal.active {
opacity: 1;
}
.modal-content {
position: relative;
max-width: 90%;
max-height: 90vh;
border-radius: 8px;
transform: scale(0.8);
transition: all 0.3s ease;
opacity: 0;
object-fit: contain;
}
.modal.active .modal-content {
transform: scale(1);
opacity: 1;
}
/* 关闭按钮样式优化 */
.modal-close {
position: fixed;
top: 20px;
right: 20px;
color: white;
font-size: 30px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 1001;
}
/* 缩放控制按钮容器 */
.modal-controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 20px;
display: flex;
gap: 15px;
z-index: 1001;
}
.zoom-button {
color: white;
background: none;
border: 2px solid white;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.zoom-button:hover {
background: rgba(255, 255, 255, 0.2);
}
/* 图片信息悬浮效果 */
.honor-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
/* 修改为蓝色系渐变 */
background: linear-gradient(
to top,
rgba(0, 77, 153, 0.95), /* 深蓝色底部 */
rgba(51, 153, 255, 0.85) 70%, /* 亮蓝色过渡 */
transparent
);
color: white;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.gallery-item:hover .honor-info {
transform: translateY(0);
}
/* 标题颜色调整以配合新的背景 */
.honor-info h3 {
font-size: 1.4em;
margin-bottom: 12px;
transform: translateY(20px);
opacity: 0;
transition: all 0.3s ease 0.1s;
color: #b3d9ff; /* 浅蓝色标题 */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* 描述文字保持清晰可读 */
.honor-info p {
transform: translateY(20px);
opacity: 0;
transition: all 0.3s ease;
margin: 8px 0;
font-size: 0.95em;
color: rgba(255, 255, 255, 0.95);
}
/* 为每个p标签设置不同的延迟 */
.honor-info p:nth-child(2) { transition-delay: 0.15s; }
.honor-info p:nth-child(3) { transition-delay: 0.2s; }
.honor-info p:nth-child(4) { transition-delay: 0.25s; }
/* 悬浮时显示文字 */
.gallery-item:hover .honor-info h3,
.gallery-item:hover .honor-info p {
transform: translateY(0);
opacity: 1;
}
/* 添加装饰性图标 */
.honor-info::before {
content: '🏆';
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%) scale(0);
font-size: 24px;
transition: transform 0.3s ease;
}
.gallery-item:hover .honor-info::before {
transform: translateX(-50%) scale(1);
}
/* 添加边框发光效果 */
.gallery-item::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid transparent;
border-radius: 15px;
transition: all 0.3s ease;
}
.gallery-item:hover::after {
border-color: var(--primary-200);
box-shadow: 0 0 15px var(--primary-200);
}
/* 添加卡片内光效果 */
.gallery-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.gallery-item:hover::before {
opacity: 1;
}
/* 加载动画 */
@keyframes loading-shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* 烟花容器 */
.fireworks-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* 烟花粒子样式 */
.firework {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
animation: explode 1s forwards;
transform-origin: center center;
}
/* 烟花动画 */
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: translate(var(--x), var(--y)) scale(0);
opacity: 0;
}
}
/* 标题装饰动画 */
.title-decoration {
display: inline-block;
animation: float 2s ease-in-out infinite;
margin: 0 5px;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* 标题容器样式 */
.title-container {
text-align: center;
padding: 60px 20px 40px;
position: relative;
overflow: hidden;
}
/* 动画标题样式 */
.animated-title {
margin: 40px 0 20px;
font-size: 2.8em;
color: white;
position: relative;
display: inline-block;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
font-weight: 700;
letter-spacing: 0.05em;
}
/* 让每个字符分开动画 */
.animated-title span {
display: inline-block;
animation: wave 2s ease-in-out infinite;
animation-delay: calc(var(--char-index) * 0.1s);
}
/* 波浪抖动动画 */
@keyframes wave {
0%, 100% {
transform: translateY(0);
}
25% {
transform: translateY(-8px) rotate(3deg);
}
50% {
transform: translateY(0) rotate(-2deg);
}
75% {
transform: translateY(4px) rotate(1deg);
}
}
/* 副标题动画 */
.animated-subtitle {
color: white;
font-size: 1.3em;
margin-top: 15px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease forwards 0.5s;
font-weight: 500;
letter-spacing: 0.03em;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 装饰容器 */
.decorations {
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: center;
gap: 30px;
pointer-events: none;
}
/* 装饰动画 */
.title-decoration {
display: inline-block;
font-size: 1.5em;
opacity: 0.8;
animation: float 3s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.title-decoration:nth-child(1) { --delay: 0s; }
.title-decoration:nth-child(2) { --delay: 0.6s; }
.title-decoration:nth-child(3) { --delay: 1.2s; }
.title-decoration:nth-child(4) { --delay: 1.8s; }
.title-decoration:nth-child(5) { --delay: 2.4s; }
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
50% {
transform: translateY(-8px) rotate(5deg);
opacity: 1;
}
}
/* 装饰线条 */
.decoration-line {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg,
transparent,
var(--primary-100),
var(--primary-200),
var(--primary-100),
transparent
);
opacity: 0;
animation: lineAppear 1s ease forwards 1s;
}
@keyframes lineAppear {
to {
opacity: 1;
}
}
/* 响应式调整 */
@media screen and (max-width: 768px) {
.animated-title {
font-size: 2em;
}
.animated-subtitle {
font-size: 1.1em;
}
.decorations {
gap: 20px;
}
.title-decoration {
font-size: 1.2em;
}
}
/* 优化轮播图容器 */
.carousel-container {
position: relative;
width: 100%;
height: 600px;
margin: 40px auto;
perspective: 2000px;
overflow: hidden;
background: linear-gradient(135deg, #1a237e05, #4a148c05);
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
.button-container {
position: absolute;
width: 1300px; /* 稍微增加宽度 */
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.carousel {
position: absolute;
width: 1100px;
height: 100%;
transform-style: preserve-3d;
left: 50%;
transform-origin: center center;
}
.carousel-item {
position: absolute;
width: 450px; /* 调整图片尺寸 */
height: 280px;
left: -225px;
top: calc(50% - 140px);
transform-origin: center center;
backface-visibility: hidden;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
overflow: hidden;
cursor: pointer;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
transition: transform 0.5s ease;
}
.carousel-item:hover img {
transform: scale(1.05);
}
/* 优化按钮样式 */
.carousel-btn {
position: relative;
width: 65px;
height: 65px;
border: none;
border-radius: 50%;
background: rgba(0, 77, 153, 0.85);
color: white;
font-size: 28px;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease;
box-shadow: 0 5px 25px rgba(0,0,0,0.25);
backdrop-filter: blur(5px);
}
.carousel-btn:hover {
background: rgba(51, 153, 255, 0.95);
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(51, 153, 255, 0.4);
}
/* 添加卡片内容样式 */
.carousel-item-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.carousel-item:hover .carousel-item-content {
transform: translateY(0);
}
</style>
</head>
<body>
<header>
<div class="title-container">
<div class="decorations">
<span class="title-decoration">🏆</span>
<span class="title-decoration">🎇</span>
<span class="title-decoration">✨</span>
<span class="title-decoration">😊</span>
<span class="title-decoration">🌟</span>
</div>
<h1 class="animated-title">
309区块链与大数据基地荣誉展示
<span class="decoration-line"></span>
</h1>
<p class="animated-subtitle">展示我们基地在区块链与大数据领域取得的成就与荣誉</p>
</div>
</header>
<div class="container">
<div class="category-filter">
<div class="filter-buttons">
<button class="filter-btn active" data-category="all">
全部
<span class="count">12</span>
</button>
<button class="filter-btn" data-category="competition">
竞赛获奖
<span class="count">5</span>
</button>
<button class="filter-btn" data-category="project">
项目成果
<span class="count">4</span>
</button>
<button class="filter-btn" data-category="certificate">
技能认证
<span class="count">3</span>
</button>
</div>
</div>
<div class="gallery">
<!-- 竞赛获奖展示 -->
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_20250109111754.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>全国大学生区块链大赛一等奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：XXX团队</p>
<p>项目亮点：创新性解决方案，技术实现突出</p>
</div>
</div>
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_20250110163247.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>中国大学生计算机设计大赛特等奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：YYY团队</p>
<p>项目亮点：创新设计理念，用户体验优秀</p>
</div>
</div>
<!-- 继续添加更多卡片，直到15个 -->
<!-- 每个卡片都移除了 award-badge 和 category-tag -->
<!-- 添加更多竞赛获奖卡片 -->
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_20250110163248.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>全国区块链创新应用大赛一等奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：创新团队A</p>
<p>项目亮点：区块链技术创新应用</p>
</div>
</div>
<!-- 添加项目成果卡片 -->
<div class="gallery-item" data-category="project">
<img src="image/微信图片_20250110163249.jpg" alt="项目展示" loading="lazy">
<div class="honor-info">
<h3>区块链医疗数据管理平台</h3>
<p>完成时间：2023年</p>
<p>项目简介：医疗数据安全共享平台</p>
<p>技术特点：隐私保护，数据共享</p>
</div>
</div>
<!-- 添加技能认证卡片 -->
<div class="gallery-item" data-category="certificate">
<img src="image/微信图片_20250110163250.jpg" alt="技能认证" loading="lazy">
<div class="honor-info">
<h3>大数据分析师高级认证</h3>
<p>获得时间：2023年</p>
<p>认证机构：数据科学协会</p>
<p>等级：高级分析师</p>
</div>
</div>
<!-- 继续添加更多卡片... -->
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_20250110163251.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>全国大数据创新应用大赛特等奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：创新团队B</p>
<p>项目亮点：数据分析创新应用</p>
</div>
</div>
<!-- 添加更多卡片 -->
<div class="gallery-item" data-category="project">
<img src="image/微信图片_202501101632481.jpg" alt="项目展示" loading="lazy">
<div class="honor-info">
<h3>区块链溯源系统</h3>
<p>完成时间：2023年</p>
<p>项目简介：农产品全程溯源平台</p>
<p>技术特点：区块链存证，智能追溯</p>
</div>
</div>
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_202501101632491.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>互联网+创新创业大赛银奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：创新团队C</p>
<p>项目亮点：商业模式创新，技术应用成熟</p>
</div>
</div>
<div class="gallery-item" data-category="certificate">
<img src="image/微信图片_20250110163248.jpg" alt="技能认证" loading="lazy">
<div class="honor-info">
<h3>大数据系统架构师认证</h3>
<p>获得时间：2023年</p>
<p>认证机构：大数据产业联盟</p>
<p>等级：高级架构师</p>
</div>
</div>
<div class="gallery-item" data-category="project">
<img src="image/微信图片_202501101632511.jpg" alt="项目展示" loading="lazy">
<div class="honor-info">
<h3>智慧校园大数据平台</h3>
<p>完成时间：2023年</p>
<p>项目简介：校园数据智能分析系统</p>
<p>技术特点：实时监控，智能预警</p>
</div>
</div>
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_202501101632511.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>全国数据挖掘竞赛金奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：数据挖掘团队</p>
<p>项目亮点：算法创新，精准预测</p>
</div>
</div>
<div class="gallery-item" data-category="project">
<img src="image/微信图片_202501101632511.jpg" alt="项目展示" loading="lazy">
<div class="honor-info">
<h3>区块链投票系统</h3>
<p>完成时间：2023年</p>
<p>项目简介：去中心化电子投票平台</p>
<p>技术特点：匿名投票，不可篡改</p>
</div>
</div>
<div class="gallery-item" data-category="competition">
<img src="image/微信图片_202501101632511.jpg" alt="竞赛奖项" loading="lazy">
<div class="honor-info">
<h3>区块链应用创新大赛金奖</h3>
<p>获奖时间：2023年</p>
<p>获奖团队：区块链创新团队</p>
<p>项目亮点：应用场景创新，实用价值高</p>
</div>
</div>
<div class="gallery-item" data-category="project">
<img src="image/微信图片_202501101632511.jpg" alt="项目展示" loading="lazy">
<div class="honor-info">
<h3>大数据可视化平台</h3>
<p>完成时间：2023年</p>
<p>项目简介：数据可视化分析系统</p>
<p>技术特点：直观展示，交互分析</p>
</div>
</div>
<div class="gallery-item" data-category="certificate">
<img src="image/微信图片_202501101632511.jpg" alt="技能认证" loading="lazy">
<div class="honor-info">
<h3>区块链安全工程师认证</h3>
<p>获得时间：2023年</p>
<p>认证机构：区块链安全联盟</p>
<p>等级：高级安全工程师</p>
</div>
</div>
</div>
</div>
<!-- 添加图片模态框 -->
<div id="imageModal" class="modal">
<span class="modal-close">×</span>
<img class="modal-content" id="modalImage">
</div>
<div class="carousel-container">
<div class="carousel">
<div class="carousel-item">
<img src="image/微信图片_20250109111754.jpg" alt="荣誉展示1">
<div class="carousel-caption">区块链创新大赛</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163247.jpg" alt="荣誉展示2">
<div class="carousel-caption">大数据竞赛</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163248.jpg" alt="荣誉展示3">
<div class="carousel-caption">项目成果展示</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163249.jpg" alt="荣誉展示4">
<div class="carousel-caption">技能认证</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163250.jpg" alt="荣誉展示5">
<div class="carousel-caption">创新成果</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163251.jpg" alt="荣誉展示6">
<div class="carousel-caption">团队荣誉</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_202501101632481.jpg" alt="荣誉展示7">
<div class="carousel-caption">技术创新</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_202501101632491.jpg" alt="荣誉展示8">
<div class="carousel-caption">竞赛成果</div>
</div>
<!-- 添加更多图片 -->
<div class="carousel-item">
<img src="image/微信图片_202501101632511.jpg" alt="荣誉展示9">
<div class="carousel-caption">创新项目</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163247.jpg" alt="荣誉展示10">
<div class="carousel-caption">技术成果</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163248.jpg" alt="荣誉展示11">
<div class="carousel-caption">区块链应用</div>
</div>
<div class="carousel-item">
<img src="image/微信图片_20250110163249.jpg" alt="荣誉展示12">
<div class="carousel-caption">大数据分析</div>
</div>
</div>
<div class="button-container">
<button class="carousel-btn prev">❮</button>
<button class="carousel-btn next">❯</button>
</div>
</div>
<script>
// 添加滚动效果
window.addEventListener('scroll', () => {
const filter = document.querySelector('.category-filter');
if (window.scrollY > 100) {
filter.classList.add('scrolled');
} else {
filter.classList.remove('scrolled');
}
});
// 按钮点击效果
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
// 移除所有按钮的active类
document.querySelectorAll('.filter-btn').forEach(b =>
b.classList.remove('active'));
// 添加当前按钮的active类
this.classList.add('active');
// 添加点击涟漪效果
const ripple = document.createElement('span');
ripple.classList.add('ripple');
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
});
});
// 添加筛选功能
document.querySelectorAll('.filter-btn').forEach(button => {
button.addEventListener('click', () => {
// 更新按钮状态
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
const category = button.getAttribute('data-category');
// 筛选图片
document.querySelectorAll('.gallery-item').forEach(item => {
if (category === 'all' || item.getAttribute('data-category') === category) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// 添加图片点击放大功能
document.addEventListener('DOMContentLoaded', function() {
const modal = document.querySelector('.modal');
const modalImg = document.querySelector('.modal-content');
const closeBtn = document.querySelector('.modal-close');
const zoomInBtn = document.querySelector('.zoom-in');
const zoomOutBtn = document.querySelector('.zoom-out');
let currentScale = 1;
// 点击图片打开模态框
document.querySelectorAll('.gallery-item img').forEach(img => {
img.addEventListener('click', function() {
modal.style.display = 'flex';
modalImg.src = this.src;
setTimeout(() => {
modal.classList.add('active');
}, 10);
currentScale = 1;
modalImg.style.transform = `scale(${currentScale})`;
});
});
// 关闭模态框
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function(e) {
if (e.target === modal) closeModal();
});
function closeModal() {
modal.classList.remove('active');
setTimeout(() => {
modal.style.display = 'none';
}, 300);
}
// 缩放功能
zoomInBtn.addEventListener('click', () => {
currentScale = Math.min(currentScale + 0.2, 3);
modalImg.style.transform = `scale(${currentScale})`;
});
zoomOutBtn.addEventListener('click', () => {
currentScale = Math.max(currentScale - 0.2, 0.5);
modalImg.style.transform = `scale(${currentScale})`;
});
});
// 添加鼠标跟随3D效果
document.querySelectorAll('.gallery-item').forEach(item => {
item.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 20;
const rotateY = (centerX - x) / 20;
this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
});
// 添加点击翻转效果
item.addEventListener('click', function() {
this.classList.toggle('flipped');
});
});
// 添加滚动动画
const observerOptions = {
threshold: 0.2,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
entry.target.style.transform = 'translateY(0) scale(1)';
entry.target.style.opacity = '1';
}
});
}, observerOptions);
// 初始化卡片状态
document.querySelectorAll('.gallery-item').forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(50px) scale(0.95)';
observer.observe(item);
});
// 优化图片加载
document.querySelectorAll('.gallery-item img').forEach(img => {
img.parentElement.classList.add('loading');
img.onload = function() {
this.parentElement.classList.remove('loading');
this.parentElement.classList.add('loaded');
}
});
// 添加图片懒加载
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});
}
document.addEventListener('DOMContentLoaded', function() {
const title = document.querySelector('.animated-title');
const text = title.textContent;
title.textContent = '';
[...text].forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.style.setProperty('--char-index', index);
title.appendChild(span);
});
});
document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
const closeBtn = document.querySelector('.modal-close');
let currentZoom = 1;
let isDragging = false;
let startX, startY, translateX = 0, translateY = 0;
// 图片点击事件
document.querySelectorAll('.gallery-item').forEach(item => {
const img = item.querySelector('img');
item.addEventListener('click', function(e) {
e.preventDefault();
currentZoom = 1;
translateX = 0;
translateY = 0;
modal.style.display = 'flex';
modalImg.src = img.src;
modalImg.style.transform = `scale(${currentZoom}) translate(${translateX}px, ${translateY}px)`;
setTimeout(() => {
modal.classList.add('active');
}, 10);
});
});
// 拖动功能
modalImg.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX - translateX;
startY = e.clientY - translateY;
modalImg.style.cursor = 'grabbing';
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
translateX = e.clientX - startX;
translateY = e.clientY - startY;
modalImg.style.transform = `scale(${currentZoom}) translate(${translateX}px, ${translateY}px)`;
});
window.addEventListener('mouseup', () => {
isDragging = false;
modalImg.style.cursor = 'grab';
});
// 缩放功能
modalImg.addEventListener('wheel', function(e) {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
currentZoom = Math.max(0.5, Math.min(3, currentZoom + delta));
modalImg.style.transform = `scale(${currentZoom}) translate(${translateX}px, ${translateY}px)`;
});
// 关闭模态框
function closeModal() {
modal.classList.remove('active');
setTimeout(() => {
modal.style.display = 'none';
currentZoom = 1;
translateX = 0;
translateY = 0;
modalImg.style.transform = `scale(1) translate(0, 0)`;
}, 300);
}
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
// ESC键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
});
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.gallery-item').forEach(card => {
const inner = document.createElement('div');
inner.className = 'gallery-item-inner';
while(card.firstChild) {
inner.appendChild(card.firstChild);
}
card.appendChild(inner);
let rect = card.getBoundingClientRect();
let mouseX = 0;
let mouseY = 0;
let centerX = 0;
let centerY = 0;
let targetRotateX = 0;
let targetRotateY = 0;
let currentRotateX = 0;
let currentRotateY = 0;
let rafId = null; // 添加 requestAnimationFrame 的 ID
function updateRotation() {
// 增加动画的平滑度
currentRotateX += (targetRotateX - currentRotateX) * 0.08;
currentRotateY += (targetRotateY - currentRotateY) * 0.08;
inner.style.transform = `
rotateX(${currentRotateX}deg)
rotateY(${currentRotateY}deg)
`;
// 优化动画循环
if (Math.abs(targetRotateX - currentRotateX) > 0.01 ||
Math.abs(targetRotateY - currentRotateY) > 0.01) {
rafId = requestAnimationFrame(updateRotation);
} else {
cancelAnimationFrame(rafId);
}
}
card.addEventListener('mousemove', (e) => {
rect = card.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
centerX = rect.width / 2;
centerY = rect.height / 2;
// 减小旋转角度到10度
targetRotateY = ((mouseX - centerX) / centerX) * 10;
targetRotateX = ((centerY - mouseY) / centerY) * 10;
// 取消之前的动画帧
cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(updateRotation);
});
card.addEventListener('mouseleave', () => {
targetRotateX = 0;
targetRotateY = 0;
// 取消之前的动画帧
cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(updateRotation);
});
// 优化resize事件处理
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
rect = card.getBoundingClientRect();
}, 100);
});
});
});
// 为标题文字添加span包裹
document.addEventListener('DOMContentLoaded', function() {
const title = document.querySelector('.animated-title');
const text = title.textContent;
title.textContent = '';
// 为每个字符创建span并添加延迟
[...text].forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.style.setProperty('--char-index', index);
title.appendChild(span);
});
});
document.addEventListener('DOMContentLoaded', function() {
const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.carousel-item');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;
const totalItems = items.length;
let isAnimating = false;
let autoRotateInterval;
let animationFrame;
// 更新轮播图位置函数优化
function updateCarousel(progress = 1) {
items.forEach((item, index) => {
let zIndex = totalItems - Math.abs(index - currentIndex);
let translateX = 0;
let translateZ = 0;
let opacity = 1;
let scale = 1;
let rotateY = 0;
if (index < currentIndex) {
// 左侧卡片
translateX = -900 + (index - currentIndex + 1) * 120;
translateZ = -200;
opacity = 0.7;
scale = 0.85;
rotateY = 15; // 添加轻微的Y轴旋转
} else if (index > currentIndex) {
// 右侧卡片
translateX = 900 + (index - currentIndex - 1) * 120;
translateZ = -200;
opacity = 0.7;
scale = 0.85;
rotateY = -15; // 添加轻微的Y轴旋转
}
// 应用平滑过渡
item.style.transform = `
translateX(${translateX * progress}px)
translateZ(${translateZ}px)
rotateY(${rotateY}deg)
scale(${scale})
`;
item.style.opacity = opacity;
item.style.zIndex = zIndex;
// 添加模糊效果
const blur = index !== currentIndex ?
`blur(${Math.abs(index - currentIndex) * 1}px)` : 'none';
item.style.filter = blur;
});
}
// 优化平滑切换函数
function smoothTransition(direction) {
if (isAnimating) return;
isAnimating = true;
const targetIndex = currentIndex + direction;
if (targetIndex < 0 || targetIndex >= totalItems) {
isAnimating = false;
return;
}
let progress = 0;
const animate = () => {
progress += 0.04; // 减小步进值使动画更平滑
if (progress >= 1) {
currentIndex = targetIndex;
updateCarousel(1);
isAnimating = false;
return;
}
// 使用缓动函数
const easedProgress = 1 - Math.pow(1 - progress, 3);
updateCarousel(easedProgress);
requestAnimationFrame(animate);
};
animate();
}
// 自动轮播
function startAutoRotate() {
stopAutoRotate();
autoRotateInterval = setInterval(() => {
if (!isAnimating && currentIndex < totalItems - 1) {
smoothTransition(1);
} else if (!isAnimating) {
currentIndex = 0;
updateCarousel();
}
}, 3000);
}
function stopAutoRotate() {
if (autoRotateInterval) {
clearInterval(autoRotateInterval);
}
}
// 按钮事件
prevBtn.addEventListener('click', () => {
if (!isAnimating && currentIndex > 0) {
smoothTransition(-1);
}
stopAutoRotate();
startAutoRotate();
});
nextBtn.addEventListener('click', () => {
if (!isAnimating && currentIndex < totalItems - 1) {
smoothTransition(1);
}
stopAutoRotate();
startAutoRotate();
});
// 触摸事件
let touchStartX = 0;
let initialX = 0;
let isDragging = false;
carousel.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
initialX = currentIndex;
isDragging = true;
stopAutoRotate();
});
carousel.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const touchCurrentX = e.touches[0].clientX;
const diffX = touchCurrentX - touchStartX;
// 添加实时拖动效果
const dragProgress = Math.min(Math.max(diffX / window.innerWidth, -1), 1);
updateCarousel(1 - dragProgress);
});
// ... 其余代码保持不变 ...
});
</script>
</body>
</html>
标题上方的浮动装饰图标
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
