Vue3+SCSS实现全屏五栏门户联动交互，模块展开与边缘灯光动态延伸效果解析

在企业级中后台系统设计中，全屏门户作为统一入口正逐渐取代传统菜单导航。近期一个采用 Vue 3 + SCSS + Vite 技术栈实现的数字综合门户案例引发关注：其核心交互为五个业务模块横向铺满整个视口，鼠标移入任一模块后，该模块自动放大、背景高亮、子功能列表上滑浮现，同时模块边缘的灯光效果会向左右相邻模块动态延伸，形成视觉连贯性。该方案不涉及登录鉴权或接口调用，纯粹聚焦于前端视觉动效的工程化落地。

该门户整体结构分为顶部导航区与下方五栏主体区，五个模块依次为：数据资源中心、生产运营中心、综合管理中心、服务门户、平台支撑中心。每个模块容器（.sys-item）内部包含四层关键元素：遮罩层（mask-layer）用于承载背景图；线条层（line）内嵌左右两段灯光图像；内容包裹层（child-wrap）整合标题、子模块列表与简介按钮；以及默认状态下竖排显示的模块名称（.name）。这种双标题设计实现了状态切换时的平滑过渡——未激活时仅显示竖排名称，激活后则由 child-wrap 层接管展示完整信息。

其中 type 字段用于标识当前激活模块，class 字段则绑定预定义的 SCSS 样式规则（如斜切角度、定位偏移等），bg 与 lightBg 分别对应常态与高亮背景图路径，children 数组提供子模块文本列表。这种配置化方式使新增或调整模块变得极为高效，无需修改模板结构或样式逻辑。

这里存在两个关键状态类：sys-active 负责通用展开行为；而 center-active 是针对“综合管理中心”的特例处理——因其处于中间位置，激活后需额外调整左右相邻模块的 flex 比例与位移，以避免视觉挤压失衡。这种差异化策略体现了对布局语义的精细把控。

布局层面，五栏主体采用 Flex 弹性盒子实现均分铺满：

值得注意的是，两端模块（数据资源中心与平台支撑中心）因视觉权重更高，在 SCSS 中被单独赋予更大伸展系数与微调偏移量，确保整体构图稳定而不失层次感。灯光延伸效果则通过绝对定位的 light-left/light-right 图像元素配合 transform 实现：当某模块激活时，其左右灯条宽度按比例扩展，并利用 CSS 动画同步推移相邻模块的灯条起点，形成“光流”过渡。

该方案虽未使用 Canvas 或 Web Animations API，但通过纯 CSS + Vue 响应式机制已达成流畅交互动效。其优势在于轻量、易调试、兼容性好；局限在于复杂路径动画（如曲线光流）难以精确控制。对比同类实现，例如 Vue 2 + Canvas 的天气趋势组件（依赖 canvas 绘制跨列折线），本方案更侧重 DOM 层级的结构化动画，适合模块化程度高、状态明确的门户场景。

在现代前端工程实践中，此类视觉联动设计已逐步成为中后台产品体验升级的关键环节。它不仅提升用户对系统架构的认知效率，也强化了品牌科技感。随着 Vue 3 Composition API 与