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组件实现

1. <template>
2.   <div
3.     class="head-text flex h-screen items-center justify-center text-black"
4.     ref="container"
5.     @mousemove="handleMouseMove"
6.     @mouseleave="resetPanels">
8.     <!-- 左侧面板 -->
9.     <div
10.       ref="leftSide"
11.       :class="[ 'relative h-full transition-all duration-700 ease-in-out', activePanel === 'left' ? 'w-3/4' : activePanel === 'none' ? 'w-1/2' : 'w-1/4' ]">
13.       <div class="absolute inset-0 bg-[url(@/assets/ps.jpg)] bg-cover"></div>
14.       <div class="absolute inset-0 bg-pink-300/50"></div>
15.       <div class="absolute inset-0 flex flex-col items-center justify-center gap-10 text-white">
16.         <p class="text-6xl font-bold">Playstation 5</p>
17.         <button class="rounded-lg bg-pink-500 px-6 py-2 text-white transition-all hover:bg-pink-600">
18.           BUY NOW
19.         </button>
20.       </div>
21.     </div>
23.     <!-- 右侧面板 -->
24.     <div
25.       ref="rightSide"
26.       :class="[ 'relative h-full transition-all duration-700 ease-in-out', activePanel === 'right' ? 'w-3/4' : activePanel === 'none' ? 'w-1/2' : 'w-1/4' ]">
28.       <div class="absolute inset-0 bg-[url(@/assets/xbox.jpg)] bg-cover"></div>
29.       <div class="absolute inset-0 bg-gray-200/50"></div>
30.       <div class="absolute inset-0 flex flex-col items-center justify-center gap-10 text-white">
31.         <p class="text-6xl font-bold">Xbox Series X</p>
32.         <button class="rounded-lg bg-gray-700 px-6 py-2 text-white transition-all hover:bg-gray-800">
33.           BUY NOW
34.         </button>
35.       </div>
36.     </div>
37.   </div>
38. </template>

复制代码

---

🧩 重点效果实现

1. const handleMouseMove = (e) => {
2.   if (!container.value) return
3.   const containerWidth = container.value.offsetWidth
4.   const mouseX = e.clientX
5.   activePanel.value = mouseX < containerWidth / 2 ? 'left' : 'right'
6. }
8. const resetPanels = () => {
9.   activePanel.value = 'none'
10. }

复制代码

• handleMouseMove：根据鼠标位置设置当前激活面板
  
• resetPanels：鼠标移出容器，规复为中心对称状态
  

---

🎨 TailwindCSS 样式重点讲授

类名作用说明w-3/4、w-1/2、w-1/4控制宽度动态相应transition-all添加平滑过渡效果duration-700设置动画时长 700msease-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 添加组件预览常量：

1. export const projectList = [
2. {
3.         id: 7,
4.         title: 'Split Landing Page',
5.         image: 'https://50projects50days.com/img/projects-img/7-split-landing-page.png',
6.         link: 'SplitLandingPage',
7.     },
8. ]

复制代码

router/index.js 中添加路由选项：

1. {
2.         path: '/SplitLandingPage',
3.         name: 'SplitLandingPage',
4.         component: () => import('@/projects/SplitLandingPage.vue'),
5.     },

复制代码

---

🧠 小结

通过 Vue 的相应式状态 + Tailwind 的原子类动画能力，我们成功实现了一个交互性十足的左右悬停扩展对比组件。它不仅视觉吸引力强，而且极其易于维护和扩展。如果你在构建商城首页、交互引导页或产品对比模块，这个模式可以完美复用！🚀

---

👉 下一篇，我们将完成一个简单灵动的 FromWave组件，恰当任何表单搜集页面！🚀