本项目服务于国际船舶管理行业，面向大连东荣船舶管理有限公司的企业形象展示与业务拓展需求。公司由大连东荣海事服务公司升级而来，拥有 7 名船长、12 名轮机长及国内外一流大学员工共 45 人，为多家船东的三十余条 Kamsarmax、Capemax 散货船与中型集装箱船提供定制式管理服务，下设海务、机务、船员、质保四个部门，船舶航行于南北美洲、澳洲、欧洲与亚洲主要港口，管理体系满足 Rightship 对散货船的 DBMS 标准。
此类企业的客户与合作伙伴分布于多个国家和地区，船员招聘面向多语种人群。原有宣传依赖纸质画册与 PDF 文件，存在更新不及时、跨境访问慢、移动端阅读体验差、公司资质与船员风貌难以直观呈现等问题。为此，公司立项建设企业官网，用统一的在线门户集中展示公司概况、管理体系与检查记录、船员风采和联系方式，支持中文、英文、日文三种语言即时切换，并适配桌面、笔记本、平板与手机等终端，使国内外船东、租家与求职船员都能便捷了解企业实力，提升品牌形象与合作转化。
网站由首页、公司概况、船员风采、联系我们四个栏目组成，采用单页多 Tab 结构，切换时无需整页刷新。
首页提供横幅轮播，按设定间隔自动播放并支持手动拖动切换，配合遮罩与装饰动效展示企业形象；栏目内容分为桌面版与移动版两套排版，同一数据源分别渲染，保证不同屏幕下的阅读效果。
公司概况以图文混排展示企业简介，用五个段落依次说明公司沿革与船队规模、四个业务部门与历年 PSC 及船旗国检查记录、DBMS 管理体系与船舶星级、24 小时在线远程监控与风险预防机制、安全营运与成本控制的平衡原则，图片与文字并排，段落自动首行缩进。
船员风采以十二宫格图片墙展示船员工作与生活照片，点击可放大查看原图，移动端改为纵向瀑布流布局。
联系我们内嵌地图页面，展示办公地址、联系电话与传真，页面底部固定显示版权信息与备案号。
全站支持中文、英文、日文三种语言切换，导航名称与栏目文案随语言联动更新，语言选择与当前栏目均写入浏览器会话存储，刷新后保持原状态。
页面采用响应式布局，按桌面、笔记本、平板、手机四档断点加载不同样式表，移动端收起顶部导航改为图标菜单与底部标签栏，语言切换放入折叠菜单内；页脚与导航在窄屏下重新排布，避免横向滚动。
本人负责该企业官网的整体设计与前端开发。
具体任务：一是页面结构与视觉还原，按设计稿完成导航、横幅轮播、栏目容器与页脚，处理装饰元素与遮罩动效；二是四个栏目开发，实现公司概况图文混排与段落排版、船员风采十二宫格图片墙与大图预览、联系我们内嵌地图与联系信息、首页多图轮播；三是中英日三语切换，建立三种语言的导航与文案字典，实现语言与栏目的状态保持；四是响应式适配，按四档断点编写样式并区分桌面版与移动版布局；五是移动端交互，实现图标菜单、折叠面板与底部标签栏。
技术栈：使用 Vue 3 组合式 API 构建单页应用，通过 CDN 引入框架与 Naive UI 组件库，轮播、图片预览与栅格直接复用组件能力；页面按模块拆分结构与独立 CSS，不使用构建工具，可直接静态部署。
亮点与难点：一是免构建的轻量方案，以原生模块脚本加独立样式实现完整交互，部署只需静态托管；二是双套布局的响应式，桌面与移动端结构差异较大，采用两套容器分别渲染并配合媒体查询控制显示，避免同一套 DOM 在小屏被挤压变形；三是三语切换的状态管理，文案与导航按字典统一映射，当前语言与栏目写入会话存储，切换栏目或刷新后仍能还原；四是轮播与图片预览，自定义切换动画并兼容触摸拖动，图片墙在移动端改为瀑布流并支持放大。
评论