# SGClientUI

**Repository Path**: bob629/sgclient-ui

## Basic Information

- **Project Name**: SGClientUI
- **Description**: 新加坡新版本客户端UI
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-23
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SG Client Web - 电竞馆桌面管理系统

根据蓝湖设计图实现的Vue3 + Vite电竞馆桌面管理系统前端页面。

## 🎮 项目简介

这是一个电竞馆桌面客户端的Web管理界面，采用深色电竞风格设计，包含：
- 顶部导航栏（Logo、搜索、用户信息、功能按钮）
- 左侧游戏分类边栏
- 中间活动Banner和弹窗
- 右侧功能面板（优惠券、硬件信息、商城）

## 🛠 技术栈

- **Vue 3** - 渐进式JavaScript框架
- **Vite** - 现代前端构建工具
- **CSS3** - 高级样式和动画效果
- **ES6+** - 现代JavaScript语法

## 📁 项目结构

```
SG-Client-Web/
├── index.html              # 入口HTML文件
├── package.json            # 项目配置
├── vite.config.js          # Vite配置
├── src/
│   ├── main.js             # 应用入口
│   ├── App.vue             # 根组件
│   ├── assets/
│   │   ├── css/
│   │   │   └── main.css    # 全局样式
│   │   └── images/         # 图片资源
│   │       ├── pic_bg.png         # 背景图
│   │       ├── pic_logo.png       # Logo图
│   │       ├── pic_huodong.png    # 活动图
│   │       ├── pic_shili.png      # 示例图
│   │       ├── pic_youhuiquan.png # 优惠券图
│   │       └── icon_*.png         # 图标资源
│   └── components/
│       ├── HeaderNav.vue   # 顶部导航栏组件
│       ├── Sidebar.vue     # 左侧边栏组件
│       ├── MainContent.vue # 中间内容区组件
│       └── RightPanel.vue  # 右侧功能面板组件
```

## 🎨 设计特点

### 颜色方案
- **主色调**：深蓝紫色 (`#0a1628` - `#1a2744`)
- **强调色**：橙黄色 (`#ff8c00` - `#ffae00`)
- **高亮色**：亮蓝色 (`#00a0ff`)
- **文字色**：白色 (`#ffffff`) 和 辅助灰 (`rgba(255,255,255,0.6)`)

### 视觉效果
- 毛玻璃效果 (`backdrop-filter: blur()`)
- 渐变背景和按钮
- 悬浮动画和交互反馈
- 圆角卡片设计

## 🚀 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 启动开发服务器
```bash
npm run dev
```

### 3. 构建生产版本
```bash
npm run build
```

### 4. 预览生产版本
```bash
npm run preview
```

## 📱 页面功能

### 顶部导航栏
- Logo显示
- 搜索框（搜索资源或本地游戏）
- 用户信息展示（姓名、等级、余额、奖励金、积分）
- 充值按钮
- 功能按钮（下载、挂机、服务、账务）

### 左侧边栏
- 游戏分类（我常用的、升级游戏、中国游戏）
- 游戏图标网格展示
- 底部工具栏（本机设置、音量、语言切换）

### 中间内容区
- 活动Banner轮播图
- 主题更换引导弹窗
- 二维码下载区域

### 右侧功能面板
- 优惠券列表
- 本机硬件配置信息
- 饮品美食商城
- 底部广告图

## 🔧 自定义配置

### 修改主题色
在 `src/assets/css/main.css` 中可以调整全局颜色变量：
```css
:root {
  --primary-color: #00a0ff;
  --accent-color: #ff8c00;
  --bg-dark: #0a1628;
  --text-light: #ffffff;
}
```

### 添加新的游戏分类
在 `src/components/Sidebar.vue` 中修改游戏数据：
```javascript
const frequentlyUsed = ref([
  { id: 1, name: '游戏名', icon: '图标路径' },
  // 添加更多游戏...
])
```

## 📄 许可证

MIT License

---

**开发时间**：2026年1月
**设计来源**：蓝湖设计图