Vue 3 + SCSS 实现五栏全屏门户联动交互效果

近期一个基于 Vue 3 + SCSS + Vite 的全屏数字门户实现引发关注：五个业务模块（数据资源中心、生产运营中心、综合管理中心、服务门户、平台支撑中心）横向均分铺满视口，鼠标移入任一模块后，该模块自动放大、背景高亮、子功能列表上滑浮现，同时模块边缘灯光向左右相邻模块动态延伸，形成视觉连贯的‘光流’过渡。整体结构采用 Flex 布局，每个模块容器内含遮罩层、线条层（含左右灯条图像）、内容包裹层与竖排模块名，通过双标题设计实现状态切换平滑过渡。模块数据以配置对象驱动，包含 type（激活标识）、class（样式规则）、bg/lightBg（背景图路径）及 children（子模块列表），新增或调整模块无需改动模板或样式逻辑。关键状态类 sys-active 控制通用展开行为，center-active 则专为中间模块‘综合管理中心’设计，额外调节相邻模块 flex 比例与位移以避免视觉失衡；两端模块因视觉权重更高，在 SCSS 中赋予更大伸展系数与偏移量。灯光延伸效果依赖绝对定位元素配合 transform 与 CSS 动画实现，未使用 Canvas 或 Web Animations API，保持轻量、易调试、兼容性好。该方案聚焦前端视觉动效工程化落地，不涉及登录鉴权或接口调用，适合模块化程度高、状态明确的中后台门户场景；后续可结合 Composition API 封装为 usePortalInteraction 等组合函数复用，若引入深色模式需通过生命周期钩子监听主题变更并更新 CSS 变量。