# adapter

**Repository Path**: xsmac/adapter

## Basic Information

- **Project Name**: adapter
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 阿里巴巴风格 B2B 电商网站

> 基于 Vue 3 + Element Plus 构建的 B2B 电商供应商展示网站

## 项目简介

本项目参考阿里巴巴供应商网站设计风格，为制造型企业打造的专业 B2B 电商展示平台。网站包含产品展示、公司介绍、优势展示、联系方式等核心功能模块，适用于电子产品、机械设备等制造业企业使用。

### 设计特点

- **专业 B2B 电商风格** - 蓝白配色方案，简洁大气
- **响应式布局** - 支持桌面端、平板、手机等多端访问
- **模块化设计** - 组件化开发，易于维护和扩展
- **国际化支持** - 多语言切换功能

### 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.4.0 | 渐进式 JavaScript 框架 |
| Element Plus | 2.5.0 | 基于 Vue 3 的组件库 |
| Vite | 5.0.0 | 新一代前端构建工具 |
| ES6+ | - | 现代 JavaScript 语法 |

## 功能模块

### 1. 顶部导航栏 (Header)

**文件位置**: `src/components/Header.vue`

**功能特性**:
- 公司 Logo 和名称展示
- 主导航菜单（首页、产品中心、公司简介、联系我们）
- 语言切换下拉菜单
- 联系电话显示
- 产品分类快捷导航

**组件结构**:
```
Header
├── TopBar (顶部状态栏)
│   ├── 验证状态标识
│   ├── 语言选择器
│   └── 联系电话
├── MainHeader (主头部)
│   ├── Logo区域
│   ├── 导航菜单
│   └── 联系按钮
└── CategoriesBar (分类导航)
```

### 2. 横幅/Banner区 (Hero)

**文件位置**: `src/components/Hero.vue`

**功能特性**:
- 大尺寸背景图片
- 渐变遮罩效果
- 公司主标语展示
- 认证徽章展示
- CTA 行动按钮
- 信任卡片展示

**数据来源**: `src/assets/data.js` 中的 `heroBadges`

### 3. 公司信息卡片 (CompanyInfo)

**文件位置**: `src/components/CompanyInfo.vue`

**功能特性**:
- 公司基本信息展示
- 主营产品分类
- 联系方式信息
- 公司优势列表
- 获取报价按钮

### 4. 产品展示区 (ProductShowcase)

**文件位置**: `src/components/ProductShowcase.vue`

**功能特性**:
- 网格布局产品展示
- 产品图片悬停效果
- 产品规格描述
- FOB 价格展示
- 最小起订量 (MOQ) 显示

**产品数据结构**:
```javascript
{
  id: Number,           // 产品ID
  name: String,         // 产品名称
  specs: String,        // 产品规格
  minOrder: Number,     // 最小起订量
  price: String,        // 价格区间
  image: String         // 产品图片URL
}
```

### 5. 优势展示区 (Advantages)

**文件位置**: `src/components/Advantages.vue`

**功能特性**:
- 五大核心优势展示
- 数字化数据呈现
- 图标配合说明
- 悬停交互效果

**优势项目**:
- 3-7 天样品生产周期
- 3 周批量生产周期
- 80 万件月产能
- 100% 出货前测试
- 24 小时客户服务

### 6. 关于我们 (About)

**文件位置**: `src/components/About.vue`

**功能特性**:
- 公司认证标签展示
- 详细公司介绍
- 公司特点列表
- 图片画廊展示
- 联系/下载按钮

### 7. 页脚 (Footer)

**文件位置**: `src/components/Footer.vue`

**功能特性**:
- 公司信息和 Logo
- 快速链接导航
- 联系方式详情
- 社交媒体链接
- 版权信息展示

## 项目结构

```
alibaba-style-vue/
├── public/                    # 静态资源目录
│   ├── logo.svg              # SVG 格式 Logo
│   └── logo.png              # PNG 格式 Logo
├── src/                      # 源代码目录
│   ├── assets/               # 资源文件
│   │   ├── data.js           # 模拟数据
│   │   └── style.css         # 全局样式
│   ├── components/           # 组件目录
│   │   ├── Header.vue        # 顶部导航
│   │   ├── Hero.vue          # 横幅区
│   │   ├── CompanyInfo.vue   # 公司信息
│   │   ├── ProductShowcase.vue # 产品展示
│   │   ├── Advantages.vue    # 优势展示
│   │   ├── About.vue         # 关于我们
│   │   └── Footer.vue        # 页脚
│   ├── App.vue               # 根组件
│   └── main.js               # 应用入口
├── index.html                # HTML 模板
├── vite.config.js            # Vite 配置
├── package.json              # 项目配置
└── README.md                 # 项目说明
```

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000 查看网站

### 构建生产版本

```bash
npm run build
```

构建产物将输出到 `dist/` 目录

### 预览生产构建

```bash
npm run preview
```

## 数据配置

所有可配置数据位于 `src/assets/data.js` 文件中：

### 公司信息配置

```javascript
export const companyInfo = {
  name: '深圳电子科技有限公司',        // 公司名称
  englishName: 'Shenzhen Electronics Co., Ltd.',
  logo: '/logo.png',                // Logo 路径
  badge: ' Verified',               // 认证标识
  type: 'Custom manufacturer',      // 公司类型
  years: '10yrs',                   // 经营年限
  location: 'Guangdong, China',     // 所在地区
  mainCategories: '电源适配器/开关电源...', // 主营产品
  phone: '13143087606',             // 联系电话
  email: 'sales@company.com',       // 邮箱
  highlights: [...]                 // 公司亮点
}
```

### 产品数据配置

```javascript
export const products = [
  {
    id: 1,
    name: '产品名称',
    specs: '产品规格描述',
    minOrder: 100,
    price: '2.88-13.68',
    image: '产品图片URL'
  },
  // 更多产品...
]
```

### 导航菜单配置

```javascript
export const navItems = [
  { label: '首页', value: 'home' },
  { label: '产品中心', value: 'products' },
  { label: '公司简介', value: 'profile' },
  { label: '联系我们', value: 'contact' }
]
```

## 样式定制

### CSS 变量

全局 CSS 变量定义在 `src/assets/style.css` 中：

```css
:root {
  --primary-color: #ff6a00;      /* 主色调 - 橙色 */
  --secondary-color: #ee0979;    /* 辅助色 - 粉红 */
  --text-primary: #333333;       /* 主要文字 */
  --text-secondary: #666666;     /* 次要文字 */
  --text-light: #999999;         /* 浅色文字 */
  --bg-light: #f8f9fa;           /* 浅色背景 */
  --success-color: #28a745;      /* 成功色 */
  --warning-color: #ffc107;      /* 警告色 */
}
```

### 修改品牌颜色

如需更换品牌颜色，修改上述 CSS 变量即可：

```css
:root {
  --primary-color: #your-color;  /* 修改主色 */
  --secondary-color: #your-color; /* 修改辅助色 */
}
```

### Element Plus 主题定制

在 `src/main.js` 中可以配置 Element Plus 主题：

```javascript
import ElementPlus from 'element-plus'

// 自定义主题变量
import './styles/element-variables.scss'

app.use(ElementPlus)
```

## 组件说明

### 组件通信

本项目使用 Vue 3 Composition API，组件间通信方式：

1. **父子组件通信**: props / emit
2. **跨组件通信**: provide / inject
3. **全局状态**: 可集成 Pinia (需要额外安装)

### 组件生命周期

```vue
<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // 组件挂载后执行
})

onUnmounted(() => {
  // 组件卸载前执行
})
</script>
```

## 路由配置 (扩展)

本项目当前为单页面应用。如需添加多页面路由，可安装 Vue Router：

### 安装 Vue Router

```bash
npm install vue-router@4
```

### 路由配置示例

创建 `src/router/index.js`:

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Products from '../views/Products.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/products', component: Products },
  { path: '/about', component: () => import('../views/About.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

在 `main.js` 中使用：

```javascript
import router from './router'

app.use(router)
```

## API 集成 (扩展)

### 后端接口对接

创建 `src/api/index.js`:

```javascript
import axios from 'axios'

const request = axios.create({
  baseURL: 'https://your-api.com/api',
  timeout: 10000
})

// 获取产品列表
export function getProducts() {
  return request.get('/products')
}

// 获取公司信息
export function getCompanyInfo() {
  return request.get('/company/info')
}

// 提交询价
export function submitQuote(data) {
  return request.post('/quote', data)
}
```

### 安装 Axios

```bash
npm install axios
```

## 部署指南

### Nginx 配置示例

```nginx
server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

### Docker 部署

创建 `Dockerfile`:

```dockerfile
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

### 静态托管

可直接将 `dist/` 目录部署到以下平台：
- Vercel
- Netlify
- GitHub Pages
- 阿里云 OSS
- 腾讯云 COS

## 浏览器兼容性

| 浏览器 | 版本 |
|--------|------|
| Chrome | 最新版 |
| Firefox | 最新版 |
| Safari | 最新版 |
| Edge | 最新版 |
| IE | 不支持 |

## 常见问题

### Q: 如何修改公司信息？

A: 编辑 `src/assets/data.js` 文件中的 `companyInfo` 对象。

### Q: 如何添加新产品？

A: 在 `src/assets/data.js` 中的 `products` 数组添加新对象。

### Q: 如何更换 Logo？

A: 替换 `public/logo.svg` 或 `public/logo.png` 文件。

### Q: 如何修改颜色主题？

A: 编辑 `src/assets/style.css` 中的 CSS 变量。

### Q: 端口被占用怎么办？

A: 修改 `vite.config.js` 中的 `server.port` 配置。

## 开发建议

1. **组件命名**: 使用 PascalCase 命名组件文件
2. **代码风格**: 遵循 ESLint 配置规范
3. **提交规范**: 使用约定式提交格式
4. **分支管理**: main/master 为生产分支，dev 为开发分支

## 许可证

MIT License

## 联系方式

- 项目地址: https://github.com/your-repo
- 问题反馈: https://github.com/your-repo/issues
- 邮箱: your-email@example.com

---

**开发时间**: 2026年
**技术支持**: Vue 3 + Element Plus + Vite
**演示地址**: https://adapter.lxl-express.com