50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Split Landing Page（拆分展示页）
📅 我们继续 50 个小项目挑战！—— SplitLandingPage 组件
-
仓库地址：https://github.com/SunACong/50-vue-projects
-
项目预览地址：https://50-vue-projects.vercel.app/
在这篇文章中，我们将实现一个交互式的左右面板对比组件，当用户将鼠标悬停在某一侧时，该侧会自动扩展以获得更多展示空间，提供强烈的视觉聚焦效果 ✨
适用于：商品对比、双选项引导页面、动态首页背景等场景
🎯 组件目标
- 左右两个全屏高度的面板
- 鼠标悬停在任一面板上时，该面板自动扩展至 75% 宽度，另一面板缩小至 25%
- 鼠标移出后恢复 50% 对半布局
- 背景支持图片和透明遮罩，内容居中展示标题与按钮
🛠️ 技术实现点
- 使用 Vue 的
ref+reactive实现响应式状态追踪 - 使用 TailwindCSS 原子类管理布局、动画、背景和文本样式
- 利用
@mousemove和@mouseleave事件监听鼠标位置 - 根据鼠标区域动态绑定 class 控制宽度动画
🧱 SplitLandingPage.vue组件实现
<template><divclass="head-text flex h-screen items-center justify-center text-black"ref="container"@mousemove="handleMouseMove"@mouseleave="resetPanels"><!-- 左侧面板 --><divref="leftSide":class="[ 'relative h-full transition-all duration-700 ease-in-out', activePanel === 'left' ? 'w-3/4' : activePanel === 'none' ? 'w-1/2' : 'w-1/4' ]"><div class="absolute inset-0 bg-[url(@/assets/ps.jpg)] bg-cover"></div><div class="absolute inset-0 bg-pink-300/50"></div><div class="absolute inset-0 flex flex-col items-center justify-center gap-10 text-white"><p class="text-6xl font-bold">Playstation 5</p><button class="rounded-lg bg-pink-500 px-6 py-2 text-white transition-all hover:bg-pink-600">BUY NOW</button></div></div><!-- 右侧面板 --><divref="rightSide":class="[ 'relative h-full transition-all duration-700 ease-in-out', activePanel === 'right' ? 'w-3/4' : activePanel === 'none' ? 'w-1/2' : 'w-1/4' ]"><div class="absolute inset-0 bg-[url(@/assets/xbox.jpg)] bg-cover"></div><div class="absolute inset-0 bg-gray-200/50"></div><div class="absolute inset-0 flex flex-col items-center justify-center gap-10 text-white"><p class="text-6xl font-bold">Xbox Series X</p><button class="rounded-lg bg-gray-700 px-6 py-2 text-white transition-all hover:bg-gray-800">BUY NOW</button></div></div></div>
</template>
🧩 重点效果实现
const handleMouseMove = (e) => {if (!container.value) returnconst containerWidth = container.value.offsetWidthconst mouseX = e.clientXactivePanel.value = mouseX < containerWidth / 2 ? 'left' : 'right'
}const resetPanels = () => {activePanel.value = 'none'
}
handleMouseMove：根据鼠标位置设置当前激活面板resetPanels：鼠标移出容器，恢复为中间对称状态
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用说明 |
|---|---|
w-3/4、w-1/2、w-1/4 | 控制宽度动态响应 |
transition-all | 添加平滑过渡效果 |
duration-700 | 设置动画时长 700ms |
ease-in-out | 提升动画曲线体验 |
absolute inset-0 | 实现背景图和遮罩的层叠与填充 |
bg-[url(...)] bg-cover | 加载背景图并保持填充 |
bg-pink-300/50 | 半透明粉色遮罩层 |
text-6xl font-bold | 设置标题文字样式 |
hover:bg-pink-600 | 按钮 hover 态变色 |
🧾 常量定义 + 组件路由建议
constants/index.js 添加组件预览常量：
export const projectList = [
{id: 7,title: 'Split Landing Page',image: 'https://50projects50days.com/img/projects-img/7-split-landing-page.png',link: 'SplitLandingPage',},
]
router/index.js 中添加路由选项：
{path: '/SplitLandingPage',name: 'SplitLandingPage',component: () => import('@/projects/SplitLandingPage.vue'),},
🧠 小结
通过 Vue 的响应式状态 + Tailwind 的原子类动画能力，我们成功实现了一个交互性十足的左右悬停扩展对比组件。它不仅视觉吸引力强，而且极其易于维护和扩展。如果你在构建商城首页、交互引导页或产品对比模块，这个模式可以完美复用！🚀
👉 下一篇，我们将完成一个简单灵动的 FromWave组件，适合任何表单搜集页面！🚀