# pc-project

**Repository Path**: tongguan123/pc-project

## Basic Information

- **Project Name**: pc-project
- **Description**: 本项目是一个综合性电商网站首页（艾编程商城），包含完整的页面布局、交互功能和视觉效果，模拟真实电商平台的核心展示与用户交互场景。页面采用模块化设计，涵盖商品展示、分类导航、轮播图、歌单推荐、视频播放等功能，注重用户体验与界面美观性。 核心技术：HTML5 + CSS3 + JavaScript（原生JS）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/tongguan123/pc-project.git
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-02
- **Last Updated**: 2025-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, HTML, CSS, 前端开发

## README

# 艾编程商城 - 电商首页展示项目 
## 项目概述 

本项目是一个综合性电商网站首页（艾编程商城），包含完整的页面布局、交互功能和视觉效果，模拟真实电商平台的核心展示与用户交互场景。页面采用模块化设计，涵盖商品展示、分类导航、轮播图、歌单推荐、视频播放等功能，注重用户体验与界面美观性。  

## 技术栈 

- **核心技术**：HTML5 + CSS3 + JavaScript（原生JS）

- **UI/交互库**：  
  - Swiper：实现轮播图与横向滑动画廊  
  - 阿里iconfont：提供图标支持 
- **样式处理**：  
- Flex/Grid布局实现响应式页面  
- 自定义动画与过渡效果  
- 伪类与伪元素优化交互体验  

## 功能模块 

### 1. **顶部导航系统**  

- 二级下拉菜单（云服务、APP下载等）   

- 购物车悬浮窗   

- 搜索框自动提示功能 

### **2.首页轮播区**   

- 自动轮播banner图（支持左右切换、指示器）   

- 左侧分类导航（hover展开子分类） 

### 3. **内容展示区**   

- 歌单推荐（选项卡切换不同分类）   

- 商品展示（网格布局，含悬浮交互效果）   

- 视频推荐（点击播放弹窗）   

- 图文信息卡片（hover显示详情动画）  

- 手风琴式图片展示（鼠标悬停展开）   

- 横向拖拽画廊（基于Swiper实现） 

### 4. **辅助功能**   

- 楼梯式导航（快速跳转至对应区块）   

- 返回顶部按钮   

- 图片懒加载（优化加载性能）  

## 实现亮点 

- **交互体验优化**：  

  - 元素hover动效（缩放、颜色变化、详情展开） 

  - 平滑滚动与过渡动画  

  - 视频弹窗播放与关闭逻辑 

- **布局设计**：  

  - 语义化HTML结构，提升可维护性  

  - Flex/Grid混合布局适配不同内容  

  - 响应式适配（楼梯导航动态显示/隐藏） 

- **性能优化**：  

  - 图片懒加载减少初始加载时间 

  - 事件委托与节流处理提升交互流畅度  

## 项目结构 

```plaintext
├── css/ 
│   ├── index.css   # 首页样式   
│   ├── reset.css       # 样式重置 
│   ├── global.css      # 全局样式 
│   └── swiper-bundle.min.css  # Swiper样式 
├── fonts/ 
│   ├── iconfont.css    # 图标库样式 
│   └── iconfont.js     # 图标库脚本 
├── images/             # 图片资源 
├── js/ 
│   ├── index.js    # 首页脚本 
│   └── lazyload.js     # 懒加载脚本 
│   └── swiper-bundle.min.js  # Swiper脚本 
├── video/             # 视频资源 
├── index.html          # 首页HTML 
```

##  使用说明 

### 1. 克隆仓库到本地：   

```bash
git clone https://gitee.com/your-username/aibiancheng-mall.git
```

### 2. 直接打开`index.html`即可运行项目（无需依赖环境）  

## 效果预览

- 首页轮播与分类导航

  ![输入图片说明](%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C/p1.gif)

 - 歌单推荐选项卡切换

![输入图片说明](%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C/p2.gif)

 - 商品卡片悬浮交互

![输入图片说明](%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C/p3.gif)

 - 视频弹窗播放功能

![输入图片说明](%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C/p4.gif)

 - 楼梯导航快速跳转 

![输入图片说明](%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C/p5.gif)

### 演示视频
<video src=".\演示效果\petal_20250725_124723.mp4"></video>
[PC端项目开发](https://www.bilibili.com/video/BV1jobSzbE9P/?share_source=copy_web&vd_source=a093fde339b03df8b334886765e3be7b)