diff --git a/src/components/LeftModule.vue b/src/components/LeftModule.vue index 4d06354..de974ee 100644 --- a/src/components/LeftModule.vue +++ b/src/components/LeftModule.vue @@ -34,12 +34,12 @@
- + - +
清疯不颠
重度精神失常患者
@@ -128,7 +128,7 @@ const activeIndex = ref('/:type') const router = useRouter() const activeName = ref('first') const state = reactive({ - circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', + circleUrl: '/blogicon.jpg', squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png', sizeList: ['small', '', 'large'] as const, }) diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 1c550ae..7d84c48 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -3,7 +3,7 @@
-
清疯不颠
+
清疯不颠
 @@ -48,12 +48,13 @@
-
+

{{ heroText }}

- -
+ +

{{ Cardtitle }}

@@ -100,12 +101,23 @@ const Login = computed(() => globalStore.Login); const Cardtitle = ref(''); const classmoduleorrouter = ref(false); const classnonsenset = ref(false); -const classhero = ref(false); +const classsmallhero = ref(false); const elrowtop = ref('transparent'); +// hero区域的margin值，用于实现滚动时动态变化 +const heroMarginTop = ref('45%'); +const heroMarginBottom = ref('45%'); +// hero区域的初始margin值，从CSS变量获取 +const initialHeroMargin = 45; +// hero是否开始向上移动 +const heroIsMoving = ref(false); +// hero的transform值，用于实现向上移动和吸附效果 +const heroTransform = ref('translateY(0)'); +// hero的位置状态：static(静态)、moving(移动中)、sticky(吸附顶部) +const heroPosition = ref('static'); // 布局相关状态 const isleftmodluecontainer = ref(true); -const isconts = ref(false); +const iscontentvisible = ref(false); const isScrollingleftmodlue = ref(false); const windowwidth = ref(true); @@ -131,20 +143,20 @@ let heroTimer: number | undefined; * 初始化并启动打字机效果 * @param {string} text - 要显示的完整文本 */ -const startTypewriter = () => { +const startTypewriter = (text: string) => { // 重置状态 heroText.value = ''; heroIndex = 0; - + // 清除可能存在的定时器 if (heroTimer) { clearInterval(heroTimer); } - + // 设置新的定时器，逐字显示文本 heroTimer = window.setInterval(() => { - if (heroIndex < fullHeroText.length) { - heroText.value += fullHeroText[heroIndex]; + if (heroIndex < text.length) { + heroText.value += text[heroIndex]; heroIndex++; } else { // 文本显示完毕，清除定时器 @@ -161,8 +173,13 @@ const stopTypewriter = () => { if (heroTimer) { clearInterval(heroTimer); } - // 直接显示完整文本 - heroText.value = fullHeroText; + // 非首页时清空hero内容 + if (rpsliturl[1] !== localhome) { + heroText.value = ''; + } else { + // 首页直接显示完整文本 + heroText.value = fullHeroText; + } }; // ========== 导航和路由处理模块 ========== @@ -184,12 +201,12 @@ const setActiveIndex = (path: string) => { globalStore.setValue('localpath', { name: path }); - + // 特殊处理消息页面，清除文章信息 if (path === 'message') { globalStore.removeValue('articleInfo'); } - + // 更新激活菜单项 activeIndex.value = path; }; @@ -199,8 +216,7 @@ const setActiveIndex = (path: string) => { */ const updatePageState = () => { // 根据是否为主页根路径设置hero区域状态 - classhero.value = !(rpsliturl[1] == localhome && rpsliturl[2] == undefined); - + classsmallhero.value = !(rpsliturl[1] == localhome && rpsliturl[2] == undefined); // 控制左侧模块容器的显示/隐藏 isleftmodluecontainer.value = rpsliturl[1] !== "articlesave"; }; @@ -216,7 +232,7 @@ const updateArticleTitle = () => { // 按属性类型获取 articledata = globalStore.getValue('attribute')?.name; console.log('attributeId参数:', articledata); - } + } else if (rpsliturl[2] === 'aericletitle') { // 按标题搜索获取 articledata = globalStore.getValue('title')?.name; @@ -227,18 +243,18 @@ const updateArticleTitle = () => { } // 确定标题区域的显示状态 - const shouldHideTitle = + const shouldHideTitle = // 特殊页面不需要显示标题 - (rpsliturl[1] === 'article-list' || - rpsliturl[1] === 'message' || - rpsliturl[1] === 'about') || + (rpsliturl[1] === 'article-list' || + rpsliturl[1] === 'message' || + rpsliturl[1] === 'about') || // 在主页且无标题数据时，不显示标题 (rpsliturl[1] === localhome && !articledata); // 更新标题显示状态 classnonsenset.value = !shouldHideTitle && !!articledata; classmoduleorrouter.value = !shouldHideTitle && !!articledata; - + // 设置标题内容 if (articledata) { Cardtitle.value = articledata; @@ -293,7 +309,7 @@ const performSearch = () => { globalStore.setValue('articleserarch', { name: searchKeyword.value }); - + // 跳转到搜索结果页面 router.push({ path: `/home/aericletitle` }); } @@ -316,7 +332,7 @@ const handleResize = () => { // 首页特殊处理：小屏幕下默认显示内容区 if (rpsliturl[1] === localhome) { - isconts.value = window.innerWidth <= 768; + iscontentvisible.value = window.innerWidth <= 768; } }; @@ -333,13 +349,53 @@ const handleScroll = () => { // 大屏幕设备完整处理 updateNavbarStyle(window.scrollY); - + // 仅在首页根路径应用滚动动画 if (rpsliturl[1] === localhome && rpsliturl[2] == undefined) { - // 控制内容区和左侧模块的滚动状态 - isconts.value = window.scrollY > 200; - isScrollingleftmodlue.value = window.scrollY > 600; + const scrollY = window.scrollY; + const windowHeight = window.innerHeight; + + // 计算滚动距离与窗口高度的比例，用于内容渐显 + const contentScrollRatio = Math.min(scrollY / windowHeight, 1); + // 计算新的底部margin值，从初始值45%逐渐减少到25% + const newMarginBottom = Math.max(initialHeroMargin - (initialHeroMargin * contentScrollRatio), 0); + // 更新hero的底部margin值 + heroMarginBottom.value = `${newMarginBottom}%`; + // 顶部margin保持不变 + heroMarginTop.value = `${initialHeroMargin}%`; + + // 内容区域随滚动逐渐显现 + // 当滚动超过50px时开始显示，滚动到一屏高度时完全显示 + iscontentvisible.value = scrollY > 50; + + // 计算hero的移动阶段 + if (scrollY >= 555) { + // 滚动超过555px，标题开始向上移动 + heroIsMoving.value = true; + heroPosition.value = 'moving'; + + // 计算移动距离：从0到初始marginTop值(45%) + // 使用滚动距离减去起始位置(555px)，除以移动范围(500px)，得到移动比例 + const moveScrollRatio = Math.min((scrollY - 555) / 500, 1); + const moveDistance = initialHeroMargin * moveScrollRatio; + heroTransform.value = `translateY(-${moveDistance*10}%)`; + + // 当移动距离达到初始marginTop值时，吸附到顶部 + if (moveScrollRatio >= 1) { + heroPosition.value = 'sticky'; + heroTransform.value = `translateY(-${initialHeroMargin*10}%)`; + } + } else { + // 滚动未超过555px，标题保持静态 + heroIsMoving.value = false; + heroPosition.value = 'static'; + heroTransform.value = 'translateY(0)'; + } + + // 控制左侧模块的滚动状态 + isScrollingleftmodlue.value = scrollY > 600; } + }; /** @@ -376,12 +432,26 @@ const handleRouteChange = () => { // 根据是否为首页决定是否启动打字机效果 if (rpsliturl[1] === localhome && rpsliturl[2] == undefined) { // 首页启动打字机效果 - startTypewriter(); + startTypewriter(fullHeroText); + // 重置hero的margin值为初始值 + heroMarginBottom.value = `${initialHeroMargin}%`; + heroMarginTop.value = `${initialHeroMargin}%`; + // 重置hero的移动状态 + heroIsMoving.value = false; + heroPosition.value = 'static'; + heroTransform.value = 'translateY(0)'; + // 移动端首页默认显示内容区，桌面端初始隐藏 + iscontentvisible.value = window.innerWidth <= 768; } else { // 非首页直接显示完整文本 - isconts.value = true; + iscontentvisible.value = true; stopTypewriter(); } + // 不在首页时，hero的margin为0 + if (rpsliturl[1] !== localhome) { + heroMarginBottom.value = '0%'; + heroMarginTop.value = '0%'; + } }; /** @@ -392,7 +462,20 @@ const initializePage = () => { handleResize(); // 启动打字机效果（如果是首页） if (rpsliturl[1] === localhome && rpsliturl[2] == undefined) { - startTypewriter(); + // 首页启动打字机效果 + startTypewriter(fullHeroText); + // 重置hero的margin值为初始值 + heroMarginBottom.value = `${initialHeroMargin}%`; + heroMarginTop.value = `${initialHeroMargin}%`; + // 重置hero的移动状态 + heroIsMoving.value = false; + heroPosition.value = 'static'; + heroTransform.value = 'translateY(0)'; + // 移动端首页默认显示内容区，桌面端初始隐藏 + iscontentvisible.value = window.innerWidth <= 768; + } else { + // 非首页清空hero内容 + heroText.value = ''; } }; @@ -404,7 +487,7 @@ const initializePage = () => { onMounted(() => { // 初始化页面 initializePage(); - + // 添加事件监听器 window.addEventListener('resize', handleResize); window.addEventListener('scroll', handleScroll); @@ -514,9 +597,11 @@ watch( .close-btn:hover { color: #409eff; } + .footer-container { margin-top: 20px; } + /* 防止搜索框在小屏幕上重叠 */ @media screen and (max-width: 1200px) { .search-box-container.open { diff --git a/src/layouts/establish.vue b/src/layouts/establish.vue index f33e3c3..4171591 100644 --- a/src/layouts/establish.vue +++ b/src/layouts/establish.vue @@ -1,41 +1,43 @@