原琨教育官网（Vue3+TS 响应式开发）产品系统

1、立项原因：为原琨教育打造品牌展示与招生转化的官方平台，解决原有网站视觉陈旧、交互单一、移动端适配差的问题，提升用户体验和咨询转化率。
2、行业场景：面向高中生、退伍军人、大学生等潜在学员群体，通过展示专业设置、培养模式、就业保障等核心信息，吸引用户咨询报名，助力教育机构实现获客增长。

1、全站导航系统：实现了 PC 端下拉菜单和移动端侧边栏，包含首页、关于我们、专业设置、培养模式等 8 个一级导航及多个子页面，通过 Vue Router 实现路由懒加载，提升性能。
2、响应式轮播组件：集成 Swiper 实现首页轮播图，支持自动播放、循环滚动和分页指示器，并适配 PC / 平板 / 手机等多端显示。
3、内容展示模块：包含校园动态、专业介绍、实训计划等多个内容板块，采用卡片式布局和图片瀑布流，结合滚动监听实现导航栏样式动态切换。
4、分页功能：在 “校园动态” 页面实现了新闻列表分页，支持快速跳转和页码切换，提升大量数据的浏览体验。
5、全局组件复用：封装了CommonHead、Footer等通用组件，统一页面头部和底部样式，提高开发效率和代码可维护性。

1、个人职责
负责项目核心主页面的开发落地，包括主页面的布局实现、交互逻辑开发、响应式适配及性能优化；基于现有项目框架完成需求分析与功能落地，并对现有组件进行样式美化与交互体验优化，保障页面视觉效果和使用体验。
2、技术栈与实现亮点
基于 Vue3 + TypeScript 技术栈，使用语法糖完成主页面开发，通过 reactive、ref、computed 等 API 实现主页面状态管理，提升开发效率。
使用 SCSS 预处理器对主页面样式及现有组件进行美化优化，借助嵌套语法和响应式断点，实现主页面从 375px 到 1920px 的全尺寸适配，确保不同设备显示效果一致。
针对主页面进行性能优化：路由层面采用 createWebHistory 模式结合懒加载减少首屏加载时间；通过 v-if 和 v-show 合理控制主页面元素渲染，提升页面加载与交互性能。
实现主页面滚动监听、下拉菜单、移动端侧边栏等交互功能，通过事件委托和节流处理，保证高频操作下的稳定性与流畅性。
3、代码说明
项目源码已完整上传，核心路由配置位于src/router/index.ts，主页面代码在src/views/HomeView.vue，校园动态分页功能代码在src/views/CampusNewsView.vue。
已删除node_modules文件夹，可通过npm install安装依赖，npm run dev启动项目。