Update:重构页面

static/css/loading.css

@@ -0,0 +1,99 @@
+/* loading start */
+#loading {
+	position: fixed;
+	top: 0px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 10000;
+	background-color: #084db5;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+    flex-direction: column;
+}
+#boxlogo{
+	max-width: 360px;
+	max-height: 143.5px;
+}
+img[data-v-loadimg1]{
+  width: 140px;
+  height: 140px;
+  overflow:hidden;
+}
+img[data-v-loadimg2]{
+  width: 1.5rem;
+  height: 1.5rem;
+  overflow:hidden;
+}
+img[data-v-loadimg3]{
+  position: absolute;
+  left: 50%;
+  bottom: 4%;
+  transform: translate(-50%);
+  width: 140px;
+}
+.fl{
+	float: left;
+}
+.ml2e{
+	margin-left: 2em;
+}
+.margin_top_3em{
+	margin-top: 3em;
+    margin-bottom: 2em;
+}
+.clf{
+	color: #fff;
+}
+.opcy0{
+	opacity: 0;
+}
+.opcy1{
+	opacity: 1;
+	animation: fadeIn 1s forwards;
+}
+.disable{
+	animation: fadeOut 1s forwards;
+}
+.logomove{
+	margin-left: 0;
+	animation: moveleft 1s forwards;
+}
+/* 渐出动画 */
+@keyframes fadeOut {
+  0% {
+	opacity: 1;
+  }
+  100% {
+	opacity: 0;
+  }
+}
+/* 渐入动画 */
+@keyframes fadeIn {
+  0% {
+	opacity: 0;
+  }
+  100% {
+	opacity: 1;
+  }
+}
+/* 移动动画 */
+@keyframes moveleft {
+  0% {
+	margin-left: 110px;
+  }
+  100% {
+	margin-left: 0;  }
+}
+#RTXT p {
+	font-family: "微软雅黑";
+	font-weight: 700;
+    width: 10em;
+    font-size: 12px;
+}
+/* loading end */

static/css/main.css

@@ -0,0 +1,533 @@
+:root {
+    --color-light: #6ed9ff;    
+    --color-soft: #aadfff;     
+    --color-main: #1cb5f9;     
+    --color-dark: #0d2f54;     
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: "微软雅黑", Arial, sans-serif;
+    color: var(--color-dark);
+    overflow: hidden; /* PC端隐藏滚动条 */
+}
+
+#section-bg{
+    background: #f9f9f9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAFVJREFUSEtjfPn+238GJMDBxozMJZn949dfuB5GkOHiglyMJJtChIYhbPjHrz//83Oz0yZYRg3HlngYR4NlNFiIKFUgSkZTC9agGg0W7MEyWs1hCxcAF5pe5Ya82ZoAAAAASUVORK5CYII=) repeat center center/1rem 1rem;
+    height: 100vh;
+    width: 100vw;
+    backdrop-filter: blur(8px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+/* PC端全屏滚动布局 */
+.pc-container {
+    display: block;
+    height: 100vh;
+    transition: transform 0.6s ease; /* 页面切换过渡 */
+}
+
+.section {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+/* 首页（第一页） */
+.section-1 {
+    background: linear-gradient(rgba(13, 47, 84, 0.3), rgba(13, 47, 84, 0.3)), url('https://img-bohe.lolicon.team/i/img/img-cdn/Background-pc.webp');
+    background-size: cover;
+}
+/* 首页logo渐入/渐出动画 */
+.section-1 .logo {
+    opacity: 0; /* 初始透明状态 */
+    transform: translateY(20px); /* 初始向下偏移20px */
+    transition: opacity 0.6s ease, transform 0.6s ease; /* 调整过渡时间与页面滚动一致 */
+}
+.section-1 .logo.active {
+    opacity: 1; /* 直接设置最终状态（替代原animation） */
+    transform: translateY(0);
+}
+.Slogans{
+    width: 50vh;
+}
+
+
+/* 第二页（角色页） */
+/* 第二页（角色页）优化 */
+
+.section-2 {
+    justify-content: flex-start; /* 内容整体左对齐 */
+}
+.role-container {
+    width: 100%; 
+    text-align: left;
+    opacity: 0;
+    transform: translateX(-50px);
+    transition: all 0.8s ease;
+    display: flex; 
+    justify-content: space-between; /* 关键修改：左右贴边对齐 */
+    gap: 0; /* 移除原有间距 */
+}
+
+.role-images-container {
+    flex-shrink: 0; 
+    width: 48%; /* 左侧固定宽度 */
+    margin-left: 2%;
+}
+
+.role-info-container {
+    flex-shrink: 0; /* 关键修改：右侧不收缩 */
+    width: 580px; /* 右侧固定宽度（可根据实际需求调整） */
+    margin-right: 2%; /* 右侧留出间距 */
+    opacity: 0;  /* 初始透明度 */
+    transform: translateX(50px);  /* 初始右侧偏移50px */
+    transition: all 0.8s ease;  /* 过渡动画 */
+}
+
+.role-container.active .role-info-container {
+    opacity: 1;  /* 激活后完全显示 */
+    transform: translateX(0);  /* 回到原位置 */
+}
+.info-roleDesc{
+    margin-right: 1em;
+}
+
+.role-right-info{
+    /* 容器在屏幕水平居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80vh; /* 确保容器占据整个视口高度 */
+}
+.role-container.active {
+    opacity: 1;
+    transform: translateX(0); /* 最终位置 */
+}
+
+/* 横向图左侧固定布局 */
+.role-images {
+    display: flex;
+    gap: 30px;
+    margin: 30px 0;
+    align-items: center;
+}
+.role-images img:first-child { /* 横向透明图 */
+    max-width: 500px; /* 固定宽度 */
+    flex-shrink: 0; /* 防止被压缩 */
+}
+.role-images img:last-child { /* 竖向图 */
+    max-width: 100%; /* 调整适配左侧布局 */
+}
+.role-images img {
+    max-width: 450px;
+    height: auto;
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(13,47,84,0.15);
+    transition: transform 0.3s ease;
+}
+
+.role-btn-margin-bottom{
+    margin-bottom: 10px;
+}
+
+.role-btn {
+    padding: 12px 30px;
+    margin: 0 10px;
+    background: var(--color-main);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    /* 间隔1em 不使用margin */
+    display: inline-block;
+    font-size: 1.2rem;
+    font-weight: bold;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    box-shadow: 0 5px 15px rgba(13,47,84,0.2);
+    outline: none;
+    /* 按钮居中 */
+    margin: 0 auto;
+    /* 按钮宽度 */
+    width: 200px;
+    /* 按钮高度 */
+    height: 50px;
+    /* 按钮圆角 */
+    border-radius: 25px;
+    /* 按钮背景颜色 */
+    background: var(--color-main);
+    /* 按钮文字颜色 */
+    color: white;
+    /* 按钮文字大小 */
+    font-size: 1.2rem;
+    /* 按钮文字加粗 */
+    font-weight: bold;
+}
+.role-btn:hover {
+    background: var(--color-dark);
+}
+
+/* 导航点（右侧） */
+.scroll-dots {
+    position: fixed;
+    right: 30px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 100;
+}
+.scroll-dots .dot {
+    width: 12px;
+    height: 12px;
+    background: rgba(255,255,255,0.5);
+    border-radius: 50%;
+    margin: 15px 0;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+.scroll-dots .dot.active {
+    background: white;
+    transform: scale(1.2);
+}
+
+/* 手机端单页布局 */
+.mobile-container {
+    display: none;
+    padding: 20px;
+    overflow-y: auto; /* 允许滚动 */
+    height: 100vh;
+}
+@media (max-width: 780px) {
+    body {
+        overflow: auto; /* 手机端允许内容滚动 */
+    }
+    .pc-container {
+        display: none;
+    }
+    .mobile-container {
+        display: block;
+        background: linear-gradient(rgba(13, 47, 84, 0.2), rgba(13, 47, 84, 0.2)), url('https://static-cos.ovofish.com/static/miraipip/img/Background-pe.webp');
+        background-size: cover;
+    }
+    .role-images {
+        flex-direction: column;
+    }
+    .role-images img {
+        max-width: 100%;
+    }
+}
+
+.container {
+    max-width: 1200px;
+    margin: 30px auto;
+    padding: 40px 30px;
+    text-align: center;
+    border: none;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 5px 30px rgba(13, 47, 84, 0.1); /* 添加卡片阴影 */
+    animation: fadeIn 0.8s ease-out; /* 内容渐入动画 */
+}
+
+.vtuber-images {
+    margin: 40px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px; /* 图片间距 */
+}
+
+.vtuber-images img {
+    max-width: 48%; /* 横向图和竖向图并排显示 */
+    height: auto;
+    margin: 0;
+    border-radius: 10px;
+    animation: float 3s ease-in-out infinite;
+    transition: transform 0.3s ease; /* 悬停过渡 */
+}
+
+.vtuber-images img:hover {
+    transform: translateY(-10px) scale(1.02); /* 悬停放大+上移 */
+}
+
+.vtuber-images img:nth-child(2) {
+    animation-delay: 0.5s;
+}
+
+h1 {
+    color: var(--color-main);
+    border-bottom: 4px solid var(--color-soft);
+    padding-bottom: 8px;
+    font-size: 2.2rem;
+}
+
+p {
+    line-height: 1.8;
+    font-size: 1.1rem;
+    color: var(--color-dark);
+    width: 800px;
+    margin: 0 auto;
+}
+
+/* 新增渐入动画 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 保留原有悬浮动画 */
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-15px); }
+}
+
+/* 新增：角色信息元素的透明度过渡 */
+#roleName, 
+#roleHorizontal, 
+.info-roleDesc {
+    transition: opacity 0.3s ease;  /* 0.3秒透明度过渡 */
+}
+
+
+/* 新增顶部导航栏样式 */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 2px 15px rgba(13, 47, 84, 0.1);
+    z-index: 1001; /* 高于导航点的z-index:100 */
+    opacity: 1;  /* 默认显示状态 */
+    visibility: visible;  /* 默认可见 */
+    transition: opacity 0.3s ease, visibility 0.3s ease;  /* 透明度和可见性过渡 */
+}
+.navbar.hidden {
+    opacity: 0;  /* 隐藏时透明度0 */
+    visibility: hidden;  /* 隐藏时不可见 */
+    /* 移除display: none，避免打断过渡动画 */
+}
+.navbar-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.navbar-logo {
+    font-size: 1.5rem;
+    color: var(--color-dark);
+    font-weight: bold;
+}
+.login-btn {
+    color: var(--color-main);
+    text-decoration: none;
+    padding: 8px 20px;
+    border: 2px solid var(--color-main);
+    border-radius: 25px;
+    transition: all 0.3s ease;
+}
+.login-btn:hover {
+    background: var(--color-main);
+    color: white;
+}
+
+/* 手机端导航栏适配 */
+@media (max-width: 780px) {
+    .navbar {
+        display: none; /* 手机端不显示PC导航栏 */
+    }
+}
+
+.news-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 30px;
+}
+
+.news-loading {
+    text-align: center;
+    color: #666;
+    font-size: 1.1rem;
+    margin: 20px 0;
+}
+
+/* 新闻项初始状态（未激活时） */
+.news-item {
+    margin: 20px 0;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(13, 47, 84, 0.05);
+    opacity: 0;           /* 初始透明 */
+    transform: translateX(50px); /* 初始右侧偏移50px */
+    transition: opacity 0.5s ease, transform 0.5s ease; /* 过渡动画 */
+}
+
+/* 新闻项激活状态（进入时） */
+.news-item.active {
+    opacity: 1;           /* 完全显示 */
+    transform: translateX(0); /* 回到原位置 */
+}
+
+.news-item h3 {
+    color: var(--color-main);
+    margin-bottom: 10px;
+    font-size: 1.2rem;
+}
+
+.news-item p {
+    color: var(--color-dark);
+    line-height: 1.6;
+    width: 100%; /* 覆盖全局p标签的宽度限制 */
+    margin: 0;
+    font-size: 1rem;
+}
+
+.news-item a {
+    text-decoration: none;
+    color: inherit;
+    transition: color 0.3s ease;
+}
+
+.news-item a:hover {
+    color: var(--color-dark);
+    text-decoration: underline;
+}
+
+/* 第二页STAFF装饰图样式 */
+.section-2 {
+    position: relative; /* 作为绝对定位的参考容器 */
+}
+
+.staff-decoration {
+    position: absolute;
+    top: 8vh;
+    right: 0;
+    z-index: 0;  /* 确保在容器最下层（需根据实际内容调整z-index） */
+    max-width: 250px; /* 控制图片最大宽度 */
+    opacity: 0;        /* 初始隐藏 */
+    transform: translateX(50%); /* 初始向右偏移50% */
+    transition: opacity 0.5s ease, transform 0.5s ease; /* 过渡动画 */
+}
+
+.staff-decoration.active {
+    opacity: 1;         /* 完全显示 */
+    transform: translateX(0); /* 回到原始位置 */
+}
+
+/* 第三页新闻装饰图样式 */
+.section-3 {
+    position: relative; /* 作为绝对定位的参考容器 */
+}
+
+.news-decoration {
+    position: absolute;
+    top: 8vh;
+    right: 0;
+    z-index: 0;
+    max-width: 250px;
+    opacity: 0;
+    transform: translateX(50%);
+    transition: opacity 1s ease, transform 1s ease; /* 从0.5s延长至1s */
+}
+
+.news-decoration.active {
+    opacity: 1;         /* 完全显示 */
+    transform: translateX(0); /* 回到原始位置 */
+}
+
+/* 角色名称链接样式 */
+#roleName a {
+    color: var(--color-main); /* 使用主题色 */
+    text-decoration: none; /* 移除默认下划线 */
+    border-bottom: 2px solid transparent; /* 初始透明下划线 */
+    transition: border-bottom 0.3s ease; /* 下划线过渡动画 */
+}
+#roleName a:hover {
+    border-bottom: 2px solid var(--color-main); /* 悬停下划线 */
+}
+
+/* GitHub链接样式 */
+.role-url a {
+    color: var(--color-dark); /* 深色调 */
+    font-size: 1.1rem; /* 字体大小 */
+    font-weight: 500; /* 中等字重 */
+    text-decoration: none; /* 移除下划线 */
+    transition: color 0.3s ease; /* 颜色过渡 */
+}
+.role-url a:hover {
+    color: var(--color-main); /* 悬停时主题色 */
+    text-decoration: underline; /* 悬停下划线 */
+}
+
+/* 新增页脚样式 */
+.footer {
+    /* 原页脚样式 */
+    background: #f5f5f5; /* 浅灰色背景 */
+    padding: 15px 0;
+    text-align: center;
+    font-size: 14px;
+    color: #666; /* 柔和文字颜色 */
+    margin-top: 30px; /* 与上方内容保持间距 */
+    /* 新增固定定位样式 */
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.98); /* 与顶部菜单背景一致 */
+    box-shadow: 0 -2px 15px rgba(13, 47, 84, 0.1); /* 顶部阴影（与导航栏相反方向） */
+    z-index: 1000; /* 与导航栏z-index保持同级 */
+    margin-top: 0; /* 移除原有margin-top */
+    opacity: 0;          /* 默认隐藏 */
+    visibility: hidden; /* 隐藏时不可见 */
+    transition: opacity 0.3s ease, visibility 0.3s ease; /* 过渡动画 */
+    display: flex;          /* 启用弹性布局 */
+    justify-content: flex-start; /* 关键修改：内容左对齐 */
+    align-items: center; /* 保持垂直居中 */
+    padding-left: 20px; /* 新增：左侧内边距，避免内容紧贴屏幕边缘 */
+    align-items: center;    /* 内容垂直居中 */
+    gap: 10px;              /* 图片与文字间的间距 */
+}
+/* 如果页脚包含图片，添加图片样式控制 */
+.footer img {
+    height: 1.2em;          /* 图片高度与文字行高匹配 */
+    vertical-align: middle; /* 垂直居中（备用方案） */
+}
+.footer.active {
+    opacity: 1;          /* 显示时完全不透明 */
+    visibility: visible; /* 显示时可见 */
+}
+
+/* 调整主内容容器底部边距（避免被页脚遮挡） */
+.pc-container,
+.mobile-container {
+    padding-bottom: 60px; /* 根据页脚高度调整（当前页脚高度约60px） */
+    box-sizing: border-box;
+}
+
+/* 手机端适配 */
+@media (max-width: 768px) {
+    .footer {
+        padding: 10px 0;
+        font-size: 12px;
+    }
+    .pc-container,
+    .mobile-container {
+        padding-bottom: 40px; /* 手机端页脚高度调整 */
+    }
+}
+

static/img/粤ICP备_2021087775号-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="171" height="20" role="img" aria-label="粤ICP备: 2021087775号-2"><title>粤ICP备: 2021087775号-2</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="171" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="68" height="20" fill="#555"/><rect x="68" width="103" height="20" fill="#e1d492"/><rect width="171" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/png;base64,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"/><text aria-hidden="true" x="435" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">粤ICP备</text><text x="435" y="140" transform="scale(.1)" fill="#fff" textLength="410">粤ICP备</text><text aria-hidden="true" x="1185" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="930">2021087775号-2</text><text x="1185" y="140" transform="scale(.1)" fill="#333" textLength="930">2021087775号-2</text></g></svg>

static/img/粤公网安备_44122402240079号.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="201" height="20" role="img" aria-label="粤公网安备: 44122402240079号"><title>粤公网安备: 44122402240079号</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="201" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="82" height="20" fill="#555"/><rect x="82" width="119" height="20" fill="#e1d492"/><rect width="201" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/png;base64,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"/><text aria-hidden="true" x="505" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="550">粤公网安备</text><text x="505" y="140" transform="scale(.1)" fill="#fff" textLength="550">粤公网安备</text><text aria-hidden="true" x="1405" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="1090">44122402240079号</text><text x="1405" y="140" transform="scale(.1)" fill="#333" textLength="1090">44122402240079号</text></g></svg>

static/js/main.js

@@ -0,0 +1,266 @@
+// PC端全屏滚动逻辑
+const pcContainer = document.getElementById('pcContainer');
+const sections = document.querySelectorAll('.section');
+const dots = document.querySelectorAll('.scroll-dots .dot');
+const navbar = document.querySelector('.navbar');
+const logo = document.querySelector('.section-1 .logo'); // 获取logo元素
+let currentSection = 0;
+let isScrolling = false;
+// 全局变量：标记是否处于加载中状态
+let isLoading = true;
+// 新增新闻加载状态标记
+let isNewsLoaded = false;
+
+// 页面加载完成后初始化
+window.addEventListener('DOMContentLoaded', async () => {
+    // 初始化logo动画
+    const logo = document.querySelector('.section-1 .logo');
+    logo.classList.remove('active');
+    void logo.offsetHeight;
+    logo.classList.add('active');
+
+    // 预加载角色切换图片
+    const roleImages = Object.values(roles).map(role => role.horizontal);
+    roleImages.forEach(url => {
+        const preloadImg = new Image();
+        preloadImg.src = url;
+    });
+
+    // 预加载新闻
+    loadNews();
+
+    // 手动触发初始滚动逻辑，确保页脚显示
+    scrollToSection(currentSection);
+});
+
+// 新闻加载函数（已调整部分）
+async function loadNews() {
+    if (isNewsLoaded) return; // 避免重复加载
+    
+    const newsContent = document.querySelector('.news-content');
+    const loadingEl = document.querySelector('.news-loading');
+    
+    try {
+        // 新增：清空现有新闻内容（防止重复加载）
+        newsContent.innerHTML = '';
+        
+        const response = await fetch('https://archive.ovofish.com/api/ui/user/admin/article/article_view.jsp?type=simple&tag=notice&quantity=4');
+        const data = await response.json();
+        
+        loadingEl.style.display = 'none'; // 隐藏加载提示
+        data.slice(0, 5).forEach(item => {
+            const newsItem = document.createElement('div');
+            newsItem.className = 'news-item';
+            const cleanLink = item.link.replace(/`/g, '').trim();
+            newsItem.innerHTML = `
+                <h3><a href="${cleanLink}" target="_blank">${item.title}</a></h3>
+                <p>${item.pubDate}：${item.description}</p>
+            `;
+            newsContent.appendChild(newsItem);
+        });
+        
+        isNewsLoaded = true; // 标记已加载
+    } catch (error) {
+        loadingEl.textContent = '加载失败，请刷新重试';
+        console.error('新闻数据加载失败:', error);
+    }
+}
+
+// 触发新闻项动画（逐个右渐入）
+function triggerNewsAnimation() {
+    const newsItems = document.querySelectorAll('.news-item');
+    newsItems.forEach((item, index) => {
+        setTimeout(() => {
+            item.classList.add('active'); // 逐个添加激活类（间隔100ms）
+        }, index * 250); 
+    });
+}
+
+// 重置新闻项动画（离开时）
+function resetNewsAnimation() {
+    const newsItems = document.querySelectorAll('.news-item');
+    newsItems.forEach(item => {
+        item.classList.remove('active'); // 移除激活类，回到初始状态
+    });
+}
+
+
+// 修改滚动逻辑，控制动画触发和重置
+function scrollToSection(index) {
+    if (isScrolling) return;
+    isScrolling = true;
+    currentSection = index;
+    pcContainer.style.transform = `translateY(-${currentSection * 100}vh)`;
+    
+    // 更新导航点状态
+    dots.forEach((dot, i) => dot.classList.toggle('active', i === currentSection));
+
+    // 控制导航栏显示/隐藏（仅第一页隐藏）
+    navbar.classList.toggle('hidden', currentSection === 0);
+
+    // 控制页脚显示（仅第一页和最后一页）
+    const footer = document.querySelector('.footer');
+    const isFirstOrLastPage = currentSection === 0 || currentSection === sections.length - 1;
+    footer.classList.toggle('active', isFirstOrLastPage);
+
+    // 新增：首页logo动画控制（关键修改）
+    // 修改滚动逻辑中的logo动画控制部分
+    if (currentSection === 0) {
+        // 进入首页时添加active类触发渐入
+        logo.classList.add('active');
+    } else {
+        // 离开首页时移除active类触发渐出
+        logo.classList.remove('active');
+    }
+
+    // 第二页动画控制（新增装饰图逻辑）
+    const roleContainer = document.getElementById('roleContainer');
+    const staffDecoration = document.getElementById('staffDecoration'); // 获取装饰图元素
+    if (currentSection === 1) {
+        setTimeout(() => {
+            roleContainer.classList.add('active');
+            staffDecoration.classList.add('active'); // 进入第二页时激活动画
+        }, 300);
+    } else {
+        roleContainer.classList.remove('active');
+        staffDecoration.classList.remove('active'); // 离开时触发退出动画
+    }
+
+    // 第三页（新闻页）逻辑（保留原有动画触发，但数据已预加载）
+    if (currentSection === 2) {
+        triggerNewsAnimation(); // 进入新闻页时触发动画（数据已预加载）
+    } else {
+        resetNewsAnimation(); // 离开新闻页时重置动画
+    }
+    
+    // 第三页新闻装饰图逻辑（新增）
+    const newsDecoration = document.getElementById('newsDecoration');
+    if (currentSection === 2) {
+        setTimeout(() => {
+            newsDecoration.classList.add('active'); // 延迟300ms激活动画
+        }, 300); 
+    } else {
+        newsDecoration.classList.remove('active');
+    }
+
+    setTimeout(() => isScrolling = false, 600);
+}
+
+// 鼠标滚轮事件（修改）
+window.addEventListener('wheel', (e) => {
+    if (window.innerWidth <= 768) return; // 手机端不触发
+    if (isLoading || isScrolling) return; // 关键修改：加载中或滚动中时禁止滚动
+    const delta = e.deltaY > 0 ? 1 : -1;
+    currentSection = Math.max(0, Math.min(sections.length - 1, currentSection + delta));
+    scrollToSection(currentSection);
+});
+
+// 导航点点击事件（修改）
+dots.forEach((dot, index) => {
+    dot.addEventListener('click', () => {
+        if (isLoading || isScrolling) return; // 关键修改：加载中或滚动中时禁止滚动
+        scrollToSection(index);
+    });
+});
+
+// 角色切换逻辑
+const roles = {
+    default: {
+        name: "Akatsuki Misaki",
+        horizontal: "https://static-cos.ovofish.com/static/miraipip/img/XCDK1893.jpg",
+        desc: "本站主要运营者，负责网站的运营管理，负责绝大部分功能组件开发，隶属于某个神秘组织，提供图片托管服务，助力萌新站长。",
+        githubUrl: "https://github.com/akatsuki-misaki",
+        githubText: "GITHUB.COM/Akatsuki-Misaki"
+    },
+    costume: {
+        name: "Yanam1Anna",
+        horizontal: "https://static-cos.ovofish.com/static/miraipip/img/2BF88138E5D3FB086F90A0CEB84BC475.jpg",
+        desc: "NekoPara在线补丁下载一键包作者，为本站加密鉴权方案提供帮助，本站鉴权组件维护者，作为回礼本站提供校验下载服务，列为本站的合作伙伴。",
+        githubUrl: "https://github.com/yanam1anna",
+        githubText: "GITHUB.COM/YANAM1ANNA"
+    },
+    holiday: {
+        name: "LiSHang999",
+        horizontal: "https://img-bohe.lolicon.team/i/img/img-cdn/tu1.jpg",
+        desc: "UI设计者，提供主题色彩以及界面设计建议，为本站提供视觉设计参考，列为本站的合作伙伴。",
+        githubUrl: "https://github.com/lishang999",
+        githubText: "GITHUB.COM/LiSHang999"
+    }
+};
+
+document.querySelectorAll('.role-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        const role = roles[btn.dataset.role];
+        const roleName = document.getElementById('roleName');
+        const roleHorizontal = document.getElementById('roleHorizontal');
+        const roleDesc = document.getElementById('roleDesc');
+        const roleUrlLink = document.querySelector('.role-url a'); // 获取超链接元素
+
+        // 1. 执行渐出动画（包含超链接文字）
+        roleName.style.opacity = '0';
+        roleHorizontal.style.opacity = '0';
+        roleDesc.style.opacity = '0';
+        roleUrlLink.style.opacity = '0'; // 新增：超链接文字渐出
+
+        // 2. 等待渐出完成
+        setTimeout(() => {
+            // 3. 更新内容（包含超链接文字）
+            roleName.innerHTML = `<a href="${role.githubUrl}" target="_blank">${role.name}</a>`;
+            roleHorizontal.src = role.horizontal;
+            roleDesc.innerHTML = role.desc;
+            roleUrlLink.href = role.githubUrl;
+            roleUrlLink.textContent = role.githubText; // 关键修改：更新文字内容
+
+            // 4. 执行渐入动画（包含超链接文字）
+            roleName.style.opacity = '1';
+            roleHorizontal.style.opacity = '1';
+            roleDesc.style.opacity = '1';
+            roleUrlLink.style.opacity = '1'; // 新增：超链接文字渐入
+        }, 300);
+    });
+});
+
+// 页面加载完成后执行加载动画 （已调整部分）
+window.onload = function () {
+    setTimeout(function () {
+        setTimeout(loadingAnime1, 1000);
+        setTimeout(loadingAnime2, 2000);
+        setTimeout(loadingDisableAnime, 4000);
+        setTimeout(loadingDisable, 6000);
+    }, 100);
+};
+function loadingDisableAnime() {
+    document.querySelector('#loading').classList.add('disable');
+    setTimeout(function () {
+        // 新增：加载动画结束后显示页脚
+        const footer = document.querySelector('.footer');
+        if (footer) {
+            // 手动添加active类触发页脚显示（与滚动逻辑兼容）
+            footer.classList.add('active');
+        }
+    }, 500);
+}
+function loadingDisable() {
+    document.querySelector('#loading').style.display = 'none';
+    isLoading = false; // 加载完成，允许滚动
+}
+function loadingAnime1() {
+    document.querySelector('#logo').classList.add('logomove');
+}
+function loadingAnime2() {
+    document.querySelector('#RTXT').classList.add('opcy1');
+    document.querySelector('#RTXT').classList.remove('opcy0');
+    //隐藏页脚
+    const footer = document.querySelector('.footer');
+    if (footer) {
+        footer.classList.remove('active'); // 移除active类
+    }
+}
+function jumppage() {
+    window.location.href = '/';
+}
+
+// 延迟3s执行
+setTimeout(function() { 
+    console.log("%c Heartfelt %c", "background-image: linear-gradient(195deg, #169af8 0%, #16e6f8 100%); color:#ffffff", "", "或许这里未来会成为中文互联网为数不多的净土吧");
+}, 3000);