企业网站系统（从 Vite 搭建 Vue3 与 TypeScript 企业网站系统开发实战）
https://github.com/zuoyangs/vue3-enterprise-website
在企业数字化浪潮中，官方网站不仅是品牌形象的 “数字名片”，更是业务拓展与用户沟通的核心渠道。对于追求开发效率与代码质量的团队而言，Vue3 的组合式 API、TypeScript 的类型安全，搭配 Vite 的极速构建能力，构成了企业网站开发的最优技术栈之一。本文将以 “从零搭建企业网站” 为目标，从环境准备、项目初始化，到核心模块实现与优化部署，完整拆解基于 Vite 的 Vue3+TS 开发全流程，即使是前端新手也能按步骤落地一套功能完善的企业网站系统。
一、开发前准备：搭建网站系统运行环境
工欲善其事，必先利其器。在启动项目前，需先搭建适配 Vue3+TS+Vite 的开发环境，确保后续开发过程中工具链稳定运行
1.1、基础环境安装
1.1.1、Node.js 环境
Node.js（LTS v18+）：作为前端项目的运行时环境，Node.js 内置的 npm 可用于基础依赖管理。
-
- 下载 Node.js：前往 Node.js（https://nodejs.org/en）官方网站，选择 LTS 版本（如 v24.1.0）安装，安装完成后自动配置环境变量。
验证安装：执行以下命令，若正常输出版本号则说明安装成功：
# 检查Node.js版本（需≥v18，确保兼容Vite最新版） node -v # 示例输出：v20.15.0 # 检查npm版本（随Node.js自动安装，无需单独下载） npm -v # 示例输出：v10.7.0
1.1.2、代码编辑器与必备插件
推荐使用 VS Code，并安装以下插件提升开发效率：
-
-
- Volar：Vue3 官方推荐插件，完美支持单文件组件（SFC）与 TypeScript 语法提示，替代旧版的 Vetur；
- TypeScript Vue Plugin (Volar)：增强 Vue 与 TS 的类型联动，解决组件 props、emit 的类型校验问题；
- ESLint：自动检查代码语法错误与风格问题（如缩进、变量命名），确保代码规范；
- Prettier：自动格式化代码，统一团队开发风格（可与 ESLint 配合，避免格式冲突）；
- Vite：VS Code 内置 Vite 插件，支持项目热更新与构建命令快捷执行。
-
二、项目初始化：用 Vite 快速搭建 Vue3+TS 骨架
npm init vite@latest 是 Vite 官方提供的项目初始化命令，无需全局安装 Vite，直接通过 npm 临时调用，一步生成 Vue3+TS 项目结构，比传统脚手架更轻量高效。
2.1、执行创建命令
1、打开终端，进入希望存放项目的文件夹（如D:/workspace），执行以下命令启动项目创建：
2、执行以下命令，启动 Vite 项目创建流程：
npm init vite@latest
2.2、交互式配置项目（适配企业网站需求）
执行命令后，终端会弹出三步交互式配置，按以下要求选择（关键选项已标注，确保贴合企业网站开发）：
2.3、安装依赖并启动开发服务
按终端提示，执行以下命令完成依赖安装与服务启动：
# 1. 进入项目目录（与第一步输入的Project name一致） cd enterprise-website# 2. 用npm安装项目依赖（读取package.json中的基础依赖，自动下载） npm install# 3. 启动开发服务（Vite默认端口5173，端口被占用时会自动切换） npm run dev
-
-
- 启动成功标志：终端输出 “ VITE v7.1.3 ready in 516 ms”，并显示访问地址（如http://localhost:5173）；
- 验证效果：打开浏览器访问该地址，若看到 “Vite + Vue + TypeScript” 的默认页面（含计数器示例），则项目初始化成功。
-
2.4、目录结构
Vite 默认生成的目录较简洁，需删除冗余文件（如src/components/HelloWorld.vue、src/assets/vue.svg、public/vite.svg），新增业务目录，最终结构如下（覆盖 “首页、关于我们、核心业务、新闻动态、联系我们、在线咨询”）：
## 📁 项目结构vue3-enterprise-website/ ├── src/ # 源代码目录 │ ├── assets/ # 静态资源（图片、全局样式、字体） │ │ ├── images/ # 图片资源（分类存储） │ │ │ ├── about/ # 关于我们页面图片 │ │ │ ├── business/ # 业务页面图片（图标、案例图） │ │ │ ├── hero/ # 首页轮播图/英雄区图片 │ │ │ ├── news/ # 新闻页面图片 │ │ │ └── index.ts # 图片资源导出管理 │ │ ├── styles/ # 全局样式文件 │ │ │ ├── fonts.css # 字体样式（中文字体优化） │ │ │ ├── reset.css # CSS 重置样式 │ │ │ └── tailwind.css # Tailwind CSS 扩展配置 │ │ └── vue.svg # Vue 默认图标 │ ├── components/ # 公共组件（所有页面复用，减少重复开发） │ │ ├── FaqItem.vue # FAQ 折叠面板（在线咨询页复用） │ │ ├── Footer.vue # 页脚（全局底部，含企业信息、版权、备案号） │ │ ├── Navbar.vue # 导航栏（全局头部，支持PC/移动端适配） │ │ └── Swiper.vue # 轮播图组件（首页、业务页复用） │ ├── router/ # 路由配置（页面跳转、动态路由、路由守卫） │ │ └── index.ts # Vue Router 配置文件 │ ├── stores/ # Pinia 状态管理（全局共享数据） │ │ └── consultStore.ts # 咨询表单数据存储示例 │ ├── types/ # TypeScript 类型定义（统一接口，确保类型安全） │ │ ├── business.ts # 业务数据类型 │ │ ├── common.ts # 通用数据类型 │ │ ├── consult.ts # 咨询表单类型 │ │ ├── contact.ts # 联系方式类型 │ │ ├── nav.ts # 导航菜单类型 │ │ └── news.ts # 新闻数据类型 │ ├── utils/ # 工具函数（封装通用逻辑，避免重复代码） │ │ ├── formatDate.ts # 日期格式化（新闻发布时间、表单提交时间） │ │ ├── formAutoFill.ts # 表单自动填充工具 │ │ ├── request.ts # 接口请求封装（基于Axios，解决跨域） │ │ └── validate.ts # 表单验证（手机号、邮箱格式校验） │ ├── views/ # 页面组件（对应六大功能模块，每个页面一个目录） │ │ ├── About/ # 关于我们（企业概况、发展历程、团队介绍） │ │ │ └── About.vue │ │ ├── Business/ # 核心业务（业务分类、业务详情、客户案例） │ │ │ └── Business.vue │ │ ├── Consult/ # 在线咨询（咨询表单、FAQ列表、客服入口） │ │ │ ├── Consult.vue # 咨询表单页面 │ │ │ └── Contact.vue # 联系表单组件 │ │ ├── Contact/ # 联系我们（联系信息、地图嵌入、留言表单） │ │ │ └── Contact.vue │ │ ├── Home/ # 首页（轮播图、企业简介、核心优势、案例预览） │ │ │ └── Home.vue │ │ └── News/ # 新闻动态（列表页、分类筛选、详情页） │ │ ├── News.vue # 新闻列表页 │ │ └── NewsDetail.vue # 新闻详情页（动态路由传id） │ ├── App.vue # 根组件（包裹所有页面，引入Navbar和Footer） │ ├── main.ts # 入口文件（初始化Vue、路由、Pinia、全局样式） │ ├── style.css # 全局样式文件 │ └── vite-env.d.ts # Vite 环境类型声明 ├── public/ # 公共静态资源（无需打包，直接访问） │ └── vite.svg # Vite 默认图标 ├── .git/ # Git 版本控制目录 ├── .vscode/ # VS Code 编辑器配置 ├── .gitignore # Git 忽略文件配置 ├── .stylelintrc.json # 样式代码规范配置 ├── README.md # 项目说明文档 ├── index.html # HTML 入口文件 ├── package.json # 项目依赖与脚本配置（npm管理） ├── package-lock.json # 依赖版本锁定文件 ├── postcss.config.js # PostCSS 配置文件 ├── tailwind.config.js # Tailwind CSS 配置文件 ├── tsconfig.json # TypeScript 配置文件 ├── tsconfig.app.json # 应用程序 TypeScript 配置 ├── tsconfig.node.json # Node.js TypeScript 配置 ├── vite.config.ts # Vite 配置文件（端口、代理、路径别名、构建优化） ├── 首页.png # 项目截图 - 首页 ├── 关于我们.png # 项目截图 - 关于我们 ├── 核心业务.png # 项目截图 - 核心业务 ├── 新闻动态.png # 项目截图 - 新闻动态 ├── 在线咨询.png # 项目截图 - 在线咨询 └── 联系我们.png # 项目截图 - 联系我们
三、核心依赖安装与配置：适配企业网站功能
通过 npm init vite@latest 创建的项目仅包含基础依赖，需额外安装路由、状态管理等核心工具，并配置 Vite 适配企业开发需求。
3.1、安装关键依赖（用 npm 命令）
执行以下 npm 命令，安装企业网站必需的依赖包：
# 1. 安装Vue Router（实现页面跳转，适配单页应用） npm install vue-router@4 # Vue3需对应Vue Router 4.x版本# 2. 安装Pinia（Vue3官方状态管理库，替代Vuex，原生支持TS） npm install pinia# 3. 安装Axios（处理接口请求，如咨询表单提交、新闻数据获取） npm install axios# 4. 安装Tailwind CSS（可选，快速实现响应式样式，减少手写CSS） # 执行Tailwind初始化命令，自动生成配置文件 npx tailwindcss init -p
3.2、配置 Vite（vite.config.ts）
修改项目根目录的 vite.config.ts，优化路径别名、跨域代理与构建配置，确保开发效率与生产性能：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()], // 启用Vue插件，支持单文件组件解析// 路径别名：@指向src目录，简化文件引入（如@/components/Navbar.vue）resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 开发服务器配置：解决跨域、自定义端口server: {port: 8080, // 自定义端口（避免与其他项目冲突，默认5173）open: true, // 启动服务后自动打开浏览器proxy: {// 配置代理：解决企业网站对接后端接口的跨域问题'/api': {target: 'http://localhost:3000', // 后端接口地址（需替换为实际项目地址）changeOrigin: true, // 模拟浏览器同源请求，避免跨域拦截rewrite: (path) => path.replace(/^\/api/, '') // 移除请求路径中的/api前缀}}},// 生产构建配置：优化包体积，提升线上加载速度build: {outDir: 'dist', // 构建输出目录（默认dist，可自定义）assetsDir: 'static', // 静态资源（css、js、图片）存放目录sourcemap: false, // 生产环境不生成sourcemap（减少包体积，保护源码）rollupOptions: {// 代码分割：将第三方依赖（如vue、vue-router）单独打包，实现缓存复用output: {chunkFileNames: 'static/js/[name]-[hash].js', // 分包文件命名entryFileNames: 'static/js/[name]-[hash].js', // 入口文件命名assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源命名}}}
});
3.3、配置 Vue Router（路由管理）
在 Vite + TypeScript + Vue3 项目中执行 npm install vue-router@4 后，根目录下没有 router 文件夹，因为 npm install 只会只是安装依赖包，并不会自动创建路由配置文件或文件夹。
Vue Router 只是一个依赖包，安装后会存放在 node_modules 目录中，而路由相关的配置文件（如 router/index.ts）需要你手动创建。
在 src/router/index.ts 中编写路由规则，实现六大页面的跳转与动态路由（新闻详情页）：
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
// 引入页面组件（使用懒加载，优化首屏加载速度）
const Home = () => import('@/views/Home/Home.vue');
const About = () => import('@/views/About/About.vue');
const Business = () => import('@/views/Business/Business.vue');
const News = () => import('@/views/News/News.vue');
const NewsDetail = () => import('@/views/News/NewsDetail.vue');
const Contact = () => import('@/views/Contact/Contact.vue');
const Consult = () => import('@/views/Consult/Consult.vue');// 路由规则数组（TypeScript类型：RouteRecordRaw，确保配置规范）
const routes: RouteRecordRaw[] = [{ path: '/', name: 'Home', component: Home }, // 首页{ path: '/about', name: 'About', component: About }, // 关于我们{ path: '/business', name: 'Business', component: Business }, // 核心业务{ path: '/news', name: 'News', component: News }, // 新闻列表{ path: '/news/:id', // 新闻详情页：动态路由（通过id获取单条新闻数据）name: 'NewsDetail', component: NewsDetail,props: true // 允许路由参数（如id）作为props传入组件，简化数据获取},{ path: '/contact', name: 'Contact', component: Contact }, // 联系我们{ path: '/consult', name: 'Consult', component: Consult }, // 在线咨询{ path: '/:pathMatch(.*)*', redirect: '/' } // 404页面：重定向到首页
];// 创建路由实例（HTML5历史模式，URL无#号，符合企业网站URL规范）
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,// 滚动行为：跳转页面时自动回到顶部，提升用户体验scrollBehavior() {return { top: 0 };}
});export default router;
这里有报错：
1、因为 src/views 目录不存在，但是路由文件中引用了这些视图组件。我需要创建缺失的视图组件。让我先创建 views 目录和所需的组件：
mkdir -p "d:\workspace\enterprise-website\src\views\About" mkdir -p "d:\workspace\enterprise-website\src\views\Home" mkdir -p "d:\workspace\enterprise-website\src\views\Business" mkdir -p "d:\workspace\enterprise-website\src\views\News" mkdir -p "d:\workspace\enterprise-website\src\views\Contact" mkdir -p "d:\workspace\enterprise-website\src\views\Consult"
2、修复了 TypeScript 类型导入：将 RouteRecordRaw 改为 type RouteRecordRaw 以符合 TypeScript 的类型导入要求。
3、添加了 Vue 组件的类型声明：在 vite-env.d.ts 文件中添加了 *.vue 模块的类型声明
/// <reference types="vite/client" />declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}
3.4、配置 Pinia（状态管理）
以“在线咨询表单”为例，在 src/stores/consultStore.ts 中编写状态管理逻辑，实现表单数据全局共享与提交：
1、先创建 src/types 目录，避免找不到 @/types/consult 模块：
mkdir -p src/types
2、增加路径别名 @ 指向 ./src，现在我们需要在 TypeScript 配置文件 tsconfig.app.json 中也添加相应的路径映射：
{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","baseUrl": ".","paths": {"@/*": ["src/*"]},/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
3、创建 src/stores/consultStore.ts 文件：
import { defineStore } from 'pinia';
import axios from 'axios';
// 引入表单类型定义（在src/types/consult.ts中提前定义，确保类型安全）
import type { ConsultForm } from '@/types/consult';// 表单默认值（符合ConsultForm类型结构）
const defaultForm: ConsultForm = {name: '', // 用户姓名phone: '', // 手机号（需验证格式）type: 'product', // 咨询类型：product（产品）、service（服务）、other（其他）content: '' // 咨询内容
};// 创建Pinia存储实例（命名为consult，全局唯一）
export const useConsultStore = defineStore('consult', {state: () => ({form: { ...defaultForm }, // 咨询表单数据（响应式）submitLoading: false // 提交按钮加载状态（避免重复提交）}),actions: {// 更新表单字段（key限定为ConsultForm的属性，确保类型正确）updateFormField<K extends keyof ConsultForm>(key: K, value: ConsultForm[K]) {this.form[key] = value;},// 重置表单（提交成功或取消时调用）resetForm() {this.form = { ...defaultForm };},// 提交表单（对接后端接口，返回提交结果）async submitForm() {this.submitLoading = true;try {// 调用后端接口（通过Vite proxy配置，自动转换为后端地址）await axios.post('/api/consult', this.form);// 提交成功：重置表单+关闭加载this.resetForm();this.submitLoading = false;return { success: true, message: '咨询提交成功，工作人员将尽快联系您' };} catch (error) {// 提交失败：关闭加载+返回错误信息this.submitLoading = false;return { success: false, message: '提交失败，请检查网络后重试' };}}}
});
4、遇到报错，发现需要创建 ConsultForm 类型定义文件（src\types\consult.ts）。根据 consultStore.ts 中的使用情况，我可以看到 ConsultForm 应该包含 name、phone、type 和 content 字段。
- 创建了 src/types 目录
- 创建了 src/types/consult.ts 文件，定义了：
- ConsultForm 接口
- ConsultType 类型
- ConsultSubmitResult 接口
3.5、初始化入口文件（main.ts）
修改 src/main.ts，引入路由、Pinia 与全局样式，完成 Vue 实例初始化：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由
import { createPinia } from 'pinia'; // 引入Pinia
import './assets/styles/fonts.css'; // 首先引入字体样式
import './assets/styles/reset.css'; // 引入全局重置样式
// 若使用Tailwind，需引入Tailwind样式文件（在src/assets/styles下创建）
import './assets/styles/tailwind.css';const app = createApp(App);
// 挂载路由与Pinia
app.use(router);
app.use(createPinia());
// 挂载Vue实例到页面#app节点
app.mount('#app');
四、核心功能实现：公共组件与页面开发
4.1、公共组件：导航栏（Navbar.vue）
导航栏是企业网站的“全局入口”，需实现 PC 端多菜单展示、移动端折叠菜单、当前页面高亮 三大核心功能，同时通过 TypeScript 定义菜单类型确保数据规范。以下是完整实现代码（vue3-enterprise-website/src/components/Navbar.vue）：
<template><!-- 导航栏容器：固定顶部，适配移动端 --><header class="navbar fixed top-0 left-0 w-full bg-white shadow-sm z-50"><div class="container mx-auto px-4 py-3 flex justify-between items-center"><!-- 1. Logo区域：点击跳转首页 --><div class="navbar-logo cursor-pointer flex items-center"@click="$router.push('/')"><div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold text-xl">E</span></div><span class="ml-2 text-xl font-bold text-blue-700">企业网站</span></div><!-- 2. PC端导航菜单（屏幕≥768px显示） --><nav class="hidden md:flex items-center space-x-8"><router-linkv-for="item in navItems":key="item.path":to="item.path"class="nav-link":class="{ 'nav-link-active': $route.path === item.path }">{{ item.label }}</router-link><!-- 咨询按钮：突出显示，跳转咨询页 --><buttonclass="btn btn-primary"@click="$router.push('/consult')">在线咨询</button></nav><!-- 3. 移动端菜单按钮（屏幕<768px显示） --><button class="md:hidden text-gray-700 text-2xl p-2"@click="mobileMenuState.isOpen = !mobileMenuState.isOpen"><span v-if="!mobileMenuState.isOpen">☰</span><span v-else>×</span></button></div><!-- 4. 移动端折叠菜单（默认隐藏，点击按钮展开） --><div class="md:hidden bg-white border-t border-gray-100 transition-all duration-300":class="{ 'block': mobileMenuState.isOpen, 'hidden': !mobileMenuState.isOpen }"><div class="container mx-auto px-4 py-2 flex flex-col space-y-3"><router-linkv-for="item in navItems":key="item.path":to="item.path"class="py-2 text-gray-700 hover:text-blue-700 font-medium":class="{ 'text-blue-700': $route.path === item.path }"@click="mobileMenuState.isOpen = false">{{ item.label }}</router-link><buttonclass="btn btn-primary mt-2"@click="() => { $router.push('/consult'); mobileMenuState.isOpen = false }">在线咨询</button></div></div></header>
</template><script setup lang="ts">
import { reactive } from 'vue';
// import { useRoute } from 'vue-router'; // 暂时注释掉未使用的import
import type { NavItem, MobileMenuState } from '@/types/nav';// 1. 响应式状态：控制移动端菜单展开/隐藏
const mobileMenuState = reactive<MobileMenuState>({isOpen: false,activeSubmenu: null
});// 2. 获取当前路由信息（用于菜单高亮）
// const route = useRoute(); // 暂时注释掉未使用的变量// 3. 导航菜单数据（符合NavItem类型，可后续从接口获取）
const navItems: NavItem[] = [{ path: '/', label: '首页' },{ path: '/about', label: '关于我们' },{ path: '/business', label: '核心业务' },{ path: '/news', label: '新闻动态' },{ path: '/contact', label: '联系我们' },
];
</script><style scoped>
/* 导航栏滚动效果（可选） */
.navbar-scroll {background-color: rgba(255, 255, 255, 0.95);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}/* 导航链接过渡效果 - 确保中文字体 */
.nav-link {position: relative;transition: all 0.3s ease;font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', 'Helvetica Neue', Arial, sans-serif !important;
}.nav-link::after {content: '';position: absolute;bottom: -4px;left: 0;width: 0;height: 2px;background-color: #2563eb;transition: width 0.3s ease;
}.nav-link:hover::after,
.nav-link-active::after {width: 100%;
}/* 确保 Logo 和按钮也使用中文字体 */
.navbar-logo,
.btn {font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', 'Helvetica Neue', Arial, sans-serif !important;
}
</style>
4.2、公共组件：页脚（Footer.vue）
页脚作为企业网站的“全局收尾”组件，是传递企业基础信息、强化品牌信任度与提升用户体验的关键载体，需与导航栏形成功能互补，承担“信息补充 + 用户引导”的双重角色。从企业网站的实用性与合规性出发，该组件需实现三大核心功能：
-
-
- 基础信息展示：统一呈现企业工商信息（如公司全称、注册资本、经营范围）、联系方式（固定电话、邮箱、总部地址）及备案信息（ICP 备案号、公安备案号），确保信息透明且符合互联网网站运营规范；
- 导航补充引导：针对用户在页面底部的操作需求，设置 “快速链接” 模块，包含 “隐私政策”“服务条款”“常见问题”“招聘信息” 等低频但必要的入口，同时可添加 “回到顶部” 按钮，优化长页面的浏览体验；
- 品牌形象延伸：集成企业社交媒体入口（微信公众号二维码、微博、LinkedIn 等图标链接），搭配企业 Slogan 与版权声明，强化品牌记忆点。
-
<template><footer class="bg-gray-900 text-white"><!-- 主要内容区域 --><div class="container mx-auto px-4 py-12"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"><!-- 公司信息 --><div class="space-y-4"><div class="flex items-center"><div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold">E</span></div><span class="ml-2 text-lg font-bold">企业网站</span></div><p class="text-gray-300 text-sm leading-relaxed">专业的企业服务提供商，致力于为客户提供高质量的解决方案，助力企业数字化转型升级。</p><div class="flex space-x-4"><a v-for="social in socialLinks":key="social.platform":href="social.url":title="social.label"class="text-gray-400 hover:text-white transition-colors duration-200"target="_blank"rel="noopener noreferrer"><span class="text-xl">{{ social.icon }}</span></a></div></div><!-- 快速链接 --><div class="space-y-4"><h3 class="text-lg font-semibold">快速链接</h3><ul class="space-y-2"><li v-for="link in quickLinks" :key="link.path"><router-link :to="link.path"class="text-gray-300 hover:text-white transition-colors duration-200 text-sm">{{ link.label }}</router-link></li></ul></div><!-- 服务项目 --><div class="space-y-4"><h3 class="text-lg font-semibold">服务项目</h3><ul class="space-y-2"><li v-for="service in services" :key="service"><span class="text-gray-300 text-sm">{{ service }}</span></li></ul></div><!-- 联系信息 --><div class="space-y-4"><h3 class="text-lg font-semibold">联系我们</h3><div class="space-y-3"><div class="flex items-start space-x-3"><span class="text-blue-400 mt-1">📍</span><div><p class="text-gray-300 text-sm">{{ contactInfo.address }}</p></div></div><div class="flex items-center space-x-3"><span class="text-blue-400">📞</span><a :href="`tel:${contactInfo.phone}`"class="text-gray-300 hover:text-white transition-colors duration-200 text-sm">{{ contactInfo.phone }}</a></div><div class="flex items-center space-x-3"><span class="text-blue-400">📧</span><a :href="`mailto:${contactInfo.email}`"class="text-gray-300 hover:text-white transition-colors duration-200 text-sm">{{ contactInfo.email }}</a></div><div class="flex items-center space-x-3"><span class="text-blue-400">⏰</span><span class="text-gray-300 text-sm">{{ contactInfo.workingHours }}</span></div></div></div></div></div><!-- 版权信息 --><div class="border-t border-gray-800"><div class="container mx-auto px-4 py-6"><div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"><div class="text-gray-400 text-sm"><p>© {{ currentYear }} 企业网站. 保留所有权利.</p></div><div class="flex items-center space-x-6 text-sm"><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">隐私政策</a><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">服务条款</a><a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">网站地图</a><span class="text-gray-400">ICP备案号：沪ICP备2023037106号-1</span></div></div></div></div></footer>
</template><script setup lang="ts">
import { computed } from 'vue';
import type { NavItem } from '@/types/nav';
import type { ContactInfo, SocialMediaLink } from '@/types/contact';// 当前年份
const currentYear = computed(() => new Date().getFullYear());// 快速链接数据
const quickLinks: NavItem[] = [{ path: '/', label: '首页' },{ path: '/about', label: '关于我们' },{ path: '/business', label: '核心业务' },{ path: '/news', label: '新闻动态' },{ path: '/contact', label: '联系我们' },{ path: '/consult', label: '在线咨询' },
];// 服务项目
const services: string[] = ['企业官网建设','电商平台开发','移动应用开发','系统集成服务','技术咨询服务','运维支持服务',
];// 社交媒体链接
const socialLinks: SocialMediaLink[] = [{platform: 'wechat',url: '#',icon: '💬',label: '微信'},{platform: 'weibo',url: '#',icon: '🐦',label: '微博'},{platform: 'linkedin',url: '#',icon: '💼',label: 'LinkedIn'},{platform: 'github',url: '#',icon: '🐙',label: 'GitHub'},
];// 联系信息
const contactInfo: ContactInfo = {address: '北京市朝阳区建国门外大街1号',phone: '400-123-4567',email: 'support@zuoyangs.com',workingHours: '周一至周五 9:00-18:00',website: 'https://www.company.com',socialMedia: socialLinks
};
</script><style scoped>
/* 页脚链接悬停效果 */
footer a {position: relative;
}footer a::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 1px;background-color: currentColor;transition: width 0.3s ease;
}footer a:hover::after {width: 100%;
}
</style>
4.3、页面开发：关于我们页面（About.vue）
“关于我们”是企业传递品牌理念、建立用户信任的核心页面，需围绕 “用户想了解什么” 构建内容逻辑，避免单纯的 “企业自夸”。页面开发需聚焦三大核心模块，同时兼顾视觉设计与交互体验：
4.3.1、页面结构设计（核心模块）
-
-
- 品牌故事模块：以“场景化叙事”替代“文字堆砌”，例如通过 “企业创立初衷→发展里程碑→核心价值观” 的逻辑，搭配时间轴组件（展示关键节点，如成立时间、重大合作、资质认证），让用户直观感知企业历程；可嵌入短视频或高清图片（如办公环境、团队风貌），增强内容感染力。
- 核心团队模块：针对 B 端客户或合作伙伴关注的“团队专业性”，展示核心管理层 / 技术团队的信息（姓名、职位、从业经验、擅长领域），搭配职业形象照，传递“专业可靠”的团队形象；若企业注重“人性化”，可添加团队成员的个人标签（如“技术控”“客户体验守护者”），拉近与用户的距离。
- 企业资质模块：以“可视化卡片”形式展示企业资质（如 ISO 认证、行业资质证书、专利证书），支持点击查看高清证书图片；同时列出企业获得的荣誉奖项（如“行业百强企业”“最佳服务奖”），增强品牌权威性。
-
4.3.2、技术实现要点
-
-
- 数据管理：通过 Vue3 的reactive/ref管理页面动态数据（如团队成员列表、资质证书列表），若数据需从后端获取，可结合 Axios 发起请求，并添加加载状态（如骨架屏），避免页面空白导致的用户等待焦虑；
- 交互优化：为时间轴节点添加 “hover 高亮 + 详情弹窗” 效果，点击资质卡片时通过 “过渡动画” 展示高清证书；针对移动端，优化触摸交互（如增大点击区域、添加滑动切换效果）；
- SEO 适配：在页面头部设置明确的title（如 “XX 企业 - 关于我们：专注 XX 领域的 XX 服务商”）与meta标签（description描述企业核心优势与定位），同时对核心内容（如企业价值观、关键资质）使用语义化标签（<h2>``<p>），提升搜索引擎收录效果。
-
<template><div class="about-page"><!-- 页面头部 --><section class="bg-gradient-primary text-white py-20"><div class="container text-center"><h1 class="page-title text-white mb-4">关于我们</h1><p class="text-xl opacity-90 max-w-2xl mx-auto">专业的企业服务提供商，致力于为客户提供高质量的解决方案</p></div></section><!-- 公司概况 --><section class="py-16"><div class="container"><div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"><div class="space-y-6"><h2 class="section-title">公司概况</h2><p class="text-gray-600 text-lg leading-relaxed">我们成立于{{ companyInfo.foundedYear }}年，是一家专注于企业数字化服务的高新技术企业。多年来，我们始终坚持"技术创新、客户至上"的服务理念，为数百家企业提供了专业的技术解决方案。</p><p class="text-gray-600 leading-relaxed">公司拥有一支经验丰富的技术团队，涵盖软件开发、系统集成、项目管理等多个专业领域。我们深入理解各行业的业务特点，能够为客户量身定制最适合的解决方案。</p><div class="grid grid-cols-2 gap-6"><div class="text-center p-6 bg-blue-50 rounded-lg"><div class="text-3xl font-bold text-blue-600 mb-2">{{ companyInfo.teamSize }}+</div><div class="text-gray-600">团队成员</div></div><div class="text-center p-6 bg-green-50 rounded-lg"><div class="text-3xl font-bold text-green-600 mb-2">{{ companyInfo.projectCount }}+</div><div class="text-gray-600">成功项目</div></div></div></div><div class="relative"><img:src="companyInfo.officeImage"alt="公司办公环境"class="rounded-lg shadow-lg w-full h-auto"/><div class="absolute inset-0 bg-blue-600 bg-opacity-10 rounded-lg"></div></div></div></div></section><!-- 企业文化 --><section class="py-16 bg-gray-50"><div class="container"><div class="text-center mb-12"><h2 class="section-title">企业文化</h2><p class="text-gray-600 text-lg">我们的价值观与使命</p></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"><divv-for="value in companyValues":key="value.id"class="text-center group"><div class="w-20 h-20 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 transition-colors duration-300"><span class="text-3xl">{{ value.icon }}</span></div><h3 class="text-xl font-semibold mb-3">{{ value.title }}</h3><p class="text-gray-600">{{ value.description }}</p></div></div><!-- 使命愿景 --><div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12"><div class="text-center lg:text-left"><h3 class="text-2xl font-semibold mb-4 text-blue-600">我们的使命</h3><p class="text-gray-600 text-lg leading-relaxed">通过技术创新和专业服务，帮助企业实现数字化转型，提升运营效率，创造更大的商业价值。</p></div><div class="text-center lg:text-right"><h3 class="text-2xl font-semibold mb-4 text-blue-600">我们的愿景</h3><p class="text-gray-600 text-lg leading-relaxed">成为行业领先的企业服务提供商，以卓越的技术和服务，成为客户最信赖的合作伙伴。</p></div></div></div></section></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import { Images } from '@/assets/images';// 公司信息
const companyInfo = ref({foundedYear: 2014,teamSize: 50,projectCount: 500,officeImage: Images.about.officeEnvironment
});// 企业价值观
const companyValues = ref([{id: '1',title: '客户至上',description: '始终以客户需求为导向，提供最优质的服务',icon: '🎯'},{id: '2',title: '技术创新',description: '持续技术创新，为客户提供前沿的解决方案',icon: '💡'},{id: '3',title: '团队协作',description: '相互信任，协同合作，共同创造价值',icon: '🤝'},{id: '4',title: '追求卓越',description: '不断追求卓越，在每个细节上精益求精',icon: '⭐'}
]);
</script><style scoped>
/* 响应式适配 */
@media (max-width: 768px) {.values-grid {grid-template-columns: repeat(2, 1fr);}
}
</style>
4.4、页面开发：核心业务页面（Business.vue）
“核心业务”页面是企业向用户传递“能提供什么价值” 的关键载体，需以“用户需求为导向”，清晰展示业务范围、服务优势与应用场景，避免技术术语堆砌导致的理解门槛。页面开发需实现“信息清晰化 + 转化引导化”，核心设计思路如下：
4.4.1、页面结构设计（核心模块）
-
-
- 业务分类导航：在页面顶部设置 “业务分类标签栏”（如 “智能制造解决方案”“企业数字化转型服务”“云平台技术支持”），支持点击切换对应业务内容；标签栏需实现 “当前业务高亮” 效果，且在移动端适配为 “横向滑动导航”，避免换行挤压。
- 业务详情模块：针对每个业务分类，采用 “‘价值主张 + 服务内容 + 应用案例’三位一体” 的结构设计：
- 价值主张：用 1-2 句话明确该业务能为用户解决的核心问题（如 “帮助制造企业降低 30% 生产能耗”“为中小企业提供零代码数字化转型工具”），直击用户痛点；
- 服务内容：以 “图标 + 文字” 的列表形式，拆解业务包含的具体服务（如 “需求调研→方案设计→部署实施→售后维护”），让用户清晰了解服务流程；
- 应用案例：嵌入 1-2 个典型客户案例（脱敏处理客户名称，如 “某头部汽车零部件企业”），搭配案例成果数据（如 “项目周期 2 个月，实现生产效率提升 25%”），增强业务说服力。
- 转化引导模块：在每个业务详情底部添加 “立即咨询”“获取方案” 按钮，点击跳转至 “联系我们” 页面或弹出咨询表单；同时可设置 “业务对比表”（若企业业务存在差异化定位），清晰展示不同业务的适用场景、核心优势与价格区间（或 “面议” 引导），帮助用户快速决策。
-
4.4.2、 技术实现要点
-
-
- 组件复用：将 “业务详情卡片”“案例展示卡片” 封装为可复用子组件（如BusinessCard.vue、CaseCard.vue），通过 Props 传递不同业务数据，减少代码冗余；
- 动态交互：标签栏切换时添加 “内容过渡动画”（如淡入淡出、滑动切换），提升页面流畅度；案例卡片支持 “hover 放大 + 阴影效果”，增强视觉焦点；
- 响应式适配：PC 端采用 “2 列 / 3 列卡片布局” 展示业务，移动端自动切换为 “单列布局”，确保内容不挤压；同时优化表单交互（如移动端适配输入键盘、添加表单验证提示），降低用户转化门槛。
-
<template><div class="business-page"><!-- 页面头部 --><section class="bg-gradient-primary text-white py-20"><div class="container text-center"><h1 class="page-title text-white mb-4">核心业务</h1><p class="text-xl opacity-90 max-w-2xl mx-auto">提供全方位的企业服务解决方案，助力企业数字化转型升级</p></div></section><!-- 业务分类筛选 --><section class="py-8 bg-white sticky top-16 z-40 shadow-sm"><div class="container"><div class="flex flex-wrap justify-center gap-4"><buttonv-for="category in businessCategories":key="category.key"class="px-6 py-2 rounded-full transition-all duration-300":class="[selectedCategory === category.key? 'bg-blue-600 text-white': 'bg-gray-100 text-gray-700 hover:bg-gray-200']"@click="filterByCategory(category.key)">{{ category.label }}</button><buttonclass="px-6 py-2 rounded-full transition-all duration-300":class="[selectedCategory === null? 'bg-blue-600 text-white': 'bg-gray-100 text-gray-700 hover:bg-gray-200']"@click="showAllServices">全部服务</button></div></div></section><!-- 业务服务列表 --><section class="py-16"><div class="container"><div class="grid grid-cols-1 lg:grid-cols-2 gap-12"><divv-for="service in filteredServices":key="service.id"class="service-card bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300"><div class="relative h-64"><img:src="service.imageUrl || getDefaultServiceImage(service.category)":alt="service.title"class="w-full h-full object-cover"/><div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div><div class="absolute bottom-4 left-4"><span class="px-3 py-1 rounded-full text-sm font-medium text-white":style="{ backgroundColor: getCategoryColor(service.category) }">{{ getCategoryLabel(service.category) }}</span></div></div><div class="p-8"><div class="flex items-start justify-between mb-4"><div class="flex items-center"><div class="w-12 h-12 rounded-lg flex items-center justify-center text-white text-xl mr-4":style="{ backgroundColor: getCategoryColor(service.category) }">{{ service.iconUrl || getDefaultIcon(service.category) }}</div><h3 class="text-2xl font-semibold text-gray-900">{{ service.title }}</h3></div></div><p class="text-gray-600 mb-6 leading-relaxed">{{ service.description }}</p><!-- 特色功能 --><div v-if="service.features.length > 0" class="mb-6"><h4 class="font-semibold text-gray-900 mb-3">特色功能</h4><ul class="space-y-2"><li v-for="feature in service.features.slice(0, 3)":key="feature"class="flex items-center text-sm text-gray-600"><span class="w-1.5 h-1.5 bg-blue-600 rounded-full mr-3"></span>{{ feature }}</li></ul><buttonv-if="service.features.length > 3"class="text-blue-600 text-sm hover:text-blue-800 transition-colors duration-200 mt-2"@click="toggleServiceDetails(service.id)">{{ expandedServices.includes(service.id) ? '收起' : `查看全部 ${service.features.length} 项功能` }}</button></div><!-- 展开的详细功能 --><div v-if="expandedServices.includes(service.id) && service.features.length > 3"class="mb-6 animate-fade-in"><ul class="space-y-2"><li v-for="feature in service.features.slice(3)":key="feature"class="flex items-center text-sm text-gray-600"><span class="w-1.5 h-1.5 bg-blue-600 rounded-full mr-3"></span>{{ feature }}</li></ul></div><!-- 核心优势 --><div v-if="service.advantages.length > 0" class="mb-6"><h4 class="font-semibold text-gray-900 mb-3">核心优势</h4><div class="grid grid-cols-2 gap-3"><divv-for="advantage in service.advantages.slice(0, 4)":key="advantage"class="bg-gray-50 rounded-lg p-3 text-center"><span class="text-sm font-medium text-gray-700">{{ advantage }}</span></div></div></div><!-- 操作按钮 --><div class="flex space-x-4 pt-4 border-t border-gray-100"><button class="btn btn-primary flex-1"@click="contactForService(service)">立即咨询</button><button class="btn btn-outline flex-1"@click="learnMore(service)">了解详情</button></div></div></div></div><!-- 无结果提示 --><div v-if="filteredServices.length === 0" class="text-center py-12"><div class="text-gray-400 text-6xl mb-4">🔍</div><h3 class="text-xl font-medium text-gray-600 mb-2">暂无相关服务</h3><p class="text-gray-500">请尝试选择其他分类或查看全部服务</p></div></div></section><!-- 客户案例 --><section class="py-16 bg-gray-50"><div class="container"><div class="text-center mb-12"><h2 class="section-title">成功案例</h2><p class="text-gray-600 text-lg">看看我们为客户创造的价值</p></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><divv-for="case_item in businessCases":key="case_item.id"class="card hover:shadow-lg transition-shadow duration-300"><div class="aspect-w-16 aspect-h-9"><img:src="case_item.imageUrl":alt="case_item.title"class="w-full h-48 object-cover rounded-t-lg"/></div><div class="card-body"><div class="flex items-center justify-between mb-3"><span class="tag":style="{ backgroundColor: getCategoryColor(case_item.serviceType) + '20',color: getCategoryColor(case_item.serviceType)}">{{ getCategoryLabel(case_item.serviceType) }}</span><span class="text-sm text-gray-500">{{ case_item.projectDuration }}</span></div><h3 class="text-lg font-semibold mb-2">{{ case_item.title }}</h3><p class="text-gray-600 text-sm mb-3">客户：{{ case_item.client }}</p><p class="text-gray-600 text-sm mb-4 text-ellipsis-2">{{ case_item.description }}</p><div class="space-y-2"><div class="text-sm"><span class="font-medium text-gray-700">项目成果：</span><span class="text-gray-600">{{ case_item.result }}</span></div><div class="flex flex-wrap gap-1"><spanv-for="tech in case_item.technologies.slice(0, 3)":key="tech"class="tag tag-secondary text-xs">{{ tech }}</span><spanv-if="case_item.technologies.length > 3"class="text-xs text-gray-500">+{{ case_item.technologies.length - 3 }}</span></div></div></div></div></div></div></section><!-- CTA区域 --><section class="py-16 bg-gradient-primary text-white"><div class="container text-center"><h2 class="text-3xl font-bold mb-4">准备开始您的项目了吗？</h2><p class="text-xl mb-8 opacity-90 max-w-2xl mx-auto">我们的专业团队将为您提供量身定制的解决方案，助力您的业务发展</p><div class="space-x-4"><router-link to="/consult" class="btn bg-white text-blue-600 hover:bg-gray-100">免费咨询</router-link><router-link to="/contact" class="btn bg-white text-blue-600 hover:bg-gray-100">联系我们</router-link></div></div></section></div>
</template><script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import type { BusinessService, BusinessCategory, BusinessCategoryConfig, BusinessCase } from '@/types/business';
import { getDefaultServiceImage, Images } from '@/assets/images';const router = useRouter();// 响应式数据
const selectedCategory = ref<BusinessCategory | null>(null);
const expandedServices = ref<string[]>([]);// 业务分类配置
const businessCategories: BusinessCategoryConfig[] = [{ key: 'consulting', label: '技术咨询', description: '专业的技术咨询服务', color: '#3b82f6' },{ key: 'development', label: '软件开发', description: '定制化软件开发服务', color: '#10b981' },{ key: 'maintenance', label: '运维支持', description: '系统运维和技术支持', color: '#f59e0b' },{ key: 'training', label: '培训服务', description: '专业技术培训服务', color: '#8b5cf6' }
];// 业务服务数据
const businessServices = ref<BusinessService[]>([{id: '1',title: '企业官网建设',description: '专业的企业官网设计与开发，提升企业形象和品牌价值。采用最新的前端技术，确保网站的性能和用户体验。',detailContent: '详细的企业官网建设服务介绍...',features: ['响应式设计，适配各种设备','SEO优化，提升搜索排名','内容管理系统，方便维护','多语言支持','高性能优化','安全防护机制'],advantages: ['专业设计团队','技术领先','服务完善','性价比高'],imageUrl: Images.business.websiteDevelopment,category: 'development',order: 1,isActive: true},{id: '2',title: '系统集成服务',description: '为企业提供完整的系统集成解决方案，优化业务流程，提升运营效率。整合各种业务系统，实现数据互通。',detailContent: '详细的系统集成服务介绍...',features: ['多系统整合','数据同步','流程优化','接口开发','性能监控','故障诊断'],advantages: ['经验丰富','技术全面','响应及时','质量保证'],imageUrl: Images.business.systemIntegration,category: 'consulting',order: 2,isActive: true},{id: '3',title: '移动应用开发',description: '专业的移动应用开发团队，打造优质的移动端体验。支持iOS和Android双平台，提供原生和混合开发方案。',detailContent: '详细的移动应用开发服务介绍...',features: ['iOS/Android双平台','原生应用开发','混合应用开发','UI/UX设计','性能优化','应用商店上架'],advantages: ['技术专业','设计精美','性能优异','用户体验佳'],imageUrl: Images.business.mobileDevelopment,category: 'development',order: 3,isActive: true},{id: '4',title: '云平台服务',description: '基于云计算的企业服务平台，提供弹性、可扩展的云解决方案。支持公有云、私有云和混合云部署。',detailContent: '详细的云平台服务介绍...',features: ['多云支持','弹性扩容','数据备份','监控告警','自动运维','安全防护'],advantages: ['成本降低','高可用性','快速部署','专业运维'],imageUrl: Images.hero.carousel1,category: 'maintenance',order: 4,isActive: true},{id: '5',title: '技术培训服务',description: '提供专业的技术培训服务，提升团队技术能力。涵盖前端、后端、DevOps等多个技术领域。',detailContent: '详细的技术培训服务介绍...',features: ['定制化课程','实战项目','专家授课','在线学习','考核认证','后续支持'],advantages: ['课程丰富','师资优秀','实用性强','效果显著'],imageUrl: Images.business.trainingService,category: 'training',order: 5,isActive: true},{id: '6',title: '数据分析服务',description: '专业的数据分析和商业智能服务，帮助企业从数据中发现商业价值，做出更明智的决策。',detailContent: '详细的数据分析服务介绍...',features: ['数据采集','数据清洗','分析建模','可视化展示','报表生成','决策支持'],advantages: ['专业团队','先进工具','深度洞察','决策支持'],imageUrl: Images.news.industryNews,category: 'consulting',order: 6,isActive: true}
]);// 客户案例数据
const businessCases = ref<BusinessCase[]>([{id: '1',title: '某大型制造企业ERP系统',client: '某制造集团',description: '为大型制造企业定制开发ERP系统，整合生产、销售、财务等各个业务模块',serviceType: 'development',imageUrl: Images.business.caseManufacturing,projectDuration: '8个月',result: '提升运营效率35%，降低成本20%',technologies: ['Vue.js', 'Spring Boot', 'MySQL', 'Redis', 'Docker']},{id: '2',title: '金融机构数字化转型',client: '某城市银行',description: '协助金融机构进行数字化转型，升级核心业务系统，提升客户服务质量',serviceType: 'consulting',imageUrl: Images.news.awardNews,projectDuration: '12个月',result: '客户满意度提升40%，处理效率提升50%',technologies: ['微服务架构', '区块链', '大数据', 'AI算法']},{id: '3',title: '电商平台运维服务',client: '某电商公司',description: '为电商平台提供7x24小时运维服务，确保系统稳定运行',serviceType: 'maintenance',imageUrl: Images.news.eventNews,projectDuration: '持续服务',result: '系统可用性达到99.9%，故障响应时间缩短70%',technologies: ['Kubernetes', 'Prometheus', 'ELK Stack', 'Jenkins']}
]);// 计算属性
const filteredServices = computed(() => {if (selectedCategory.value === null) {return businessServices.value.filter(service => service.isActive);}return businessServices.value.filter(service => service.isActive && service.category === selectedCategory.value);
});// 方法
const filterByCategory = (category: BusinessCategory) => {selectedCategory.value = category;
};const showAllServices = () => {selectedCategory.value = null;
};const toggleServiceDetails = (serviceId: string) => {const index = expandedServices.value.indexOf(serviceId);if (index > -1) {expandedServices.value.splice(index, 1);} else {expandedServices.value.push(serviceId);}
};const getCategoryLabel = (category: BusinessCategory): string => {const config = businessCategories.find(c => c.key === category);return config?.label || '其他';
};const getCategoryColor = (category: BusinessCategory): string => {const config = businessCategories.find(c => c.key === category);return config?.color || '#6b7280';
};const getDefaultIcon = (category: BusinessCategory): string => {const icons = {consulting: '💡',development: '💻',maintenance: '🛠️',training: '📚'};return icons[category] || '⚙️';
};const contactForService = (service: BusinessService) => {router.push({path: '/consult',query: {service: service.id,type: 'service'}});
};const learnMore = (service: BusinessService) => {// 这里可以导航到服务详情页，或者显示详情模态框console.log('了解更多:', service.title);
};
</script><style scoped>
/* 特别针对 Business 页面的字体设置 - 解决 CTA 区域字体问题 */
.business-page router-link,
.business-page a[href],
.business-page .btn,
.business-page .btn-outline,
.business-page .border-white,
.business-page .text-white {font-family: 'Microsoft YaHei' !important;font-display: block !important;
}/* 最高优先级：针对多层 class 组合选择器 */
.btn-outline.border-white.text-white,
.btn.btn-outline.border-white.text-white,
a.btn.btn-outline.border-white.text-white,
router-link.btn.btn-outline.border-white.text-white {font-family: 'Microsoft YaHei' !important;font-display: block !important;
}/* Vue 组件数据属性选择器 */
[data-v-e345e995].btn,
[data-v-e345e995].btn-outline,
[data-v-e345e995] .btn,
[data-v-e345e995] .btn-outline {font-family: 'Microsoft YaHei' !important;font-display: block !important;
}/* 强制中文字体设置 - 确保所有元素都显示中文字体 */
.business-page,
.business-page *,
.business-page h1,
.business-page h2,
.business-page h3,
.business-page h4,
.business-page h5,
.business-page h6,
.business-page p,
.business-page span,
.business-page a,
.business-page button,
.business-page .btn {font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', 'Helvetica Neue', Arial, sans-serif !important;font-display: swap !important;
}/* 服务卡片样式 */
.service-card {transition: all 0.3s ease;
}.service-card:hover {transform: translateY(-5px);
}/* 动画效果 */
@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }
}.animate-fade-in {animation: fadeIn 0.3s ease-out;
}/* 粘性导航样式 */
.sticky {backdrop-filter: blur(10px);
}/* 分类按钮样式 */
.category-btn {transition: all 0.3s ease;
}.category-btn:hover {transform: translateY(-1px);
}/* 响应式适配 */
@media (max-width: 1024px) {.business-grid {grid-template-columns: 1fr;}
}@media (max-width: 768px) {.service-card {margin-bottom: 1.5rem;}.category-filters {flex-direction: column;gap: 0.5rem;}.category-btn {width: 100%;justify-content: center;}
}
</style>