# reno14pro

**Repository Path**: ly3566/reno14pro

## Basic Information

- **Project Name**: reno14pro
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://oppo-demo-neon.vercel.app/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-28
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OPPO RENO14 PRO

这是一个使用**vue**复刻 [oppo reno14pro](https://www.oppo.com/cn/smartphones/series-reno/reno14-pro/) 详情页的项目。

## 特性

- 响应式，移动端和pc端共用一套代码
- 全静态，不需要配置后端服务器
- 最新vue版本

## 预览

![详情1](./docs/images/PixPin_2025-10-28_00-13-09.png)

## 快速开始

项目包含大量图片和视频，图片没加载完可能导致部分样式异常，等图片加载完毕或刷新页面一般可以解决。

### 前提条件

- **Node.js** (版本 >= 22)
- **pnpm**

### 安装

克隆项目到本地

```shell
git clone https://gitcode.com/Lu-Yanpeng/reno14pro.git
```

进入src目录下运行

```shell
pnpm install
pnpm dev
```

项目启动后可以访问localhost:5173打开项目首页，点击任意一个`oppo reno14pro`海报跳转详情页。
点击详情页顶部左上角的oppo logo回到首页。

### 路由

项目有两个页面

- 主页：http://localhost:5173/
- 详情页：http://localhost:5173/product/reno14-pro

## 已知问题

1. 手机访问时，`src/views/product/reno14-pro/block/2/item1/index.vue`组件的动画会有抖动。
2. 开启平滑滚动后，滚动时部分pin元素会有抖动，比如`src/views/product/reno14-pro/block/4/pc/item1/index.vue`组件。

## 其他说明

可以在`App.vue`中开启页面平滑滚动，但是会导致pin元素抖动。