源码获取魏：RACXDX 支持要求定制文档编写
目录
[1. 主题总结](#1. 主题总结)
[2. 页面技术与内容分析](#2. 页面技术与内容分析)
[2.1 首页 (index.html)](#2.1 首页 (index.html))
[2.2 商品详情页 (product-detail.html)](#2.2 商品详情页 (product-detail.html))
[2.3 登录页面 (login.html)](#2.3 登录页面 (login.html))
[2.4 注册页面 (register.html)](#2.4 注册页面 (register.html))
1. 主题总结
本项目是一个现代化的OPPO手机官方商城前端网站，旨在为用户提供完整的手机及智能生态产品购物体验。网站以用户为中心，通过精美的UI设计和流畅的交互体验，展示OPPO全线产品（包括Find系列、Reno系列、K系列等手机产品，以及平板电脑、智能电视、智能穿戴等生态产品），同时提供一加品牌专区。核心价值在于为用户创造便捷、直观的产品浏览和购买环境，突出OPPO产品的科技创新和品质。
2. 页面技术与内容分析
2.1 首页 (index.html)
**技术实现：**
HTML5 语义化结构，合理划分页面区域
CSS3 实现现代化布局和响应式设计
JavaScript 实现交互功能，如轮播图、二级菜单等
**内容涵盖：**
**导航栏**：包含OPPO Logo、主导航菜单（首页、OPPO专区、一加专区、智能硬件、服务）、搜索框和用户操作入口
**左侧分类导航**：详细的产品分类体系，支持二级菜单展开
**轮播图区域**：自动播放的产品展示轮播，支持手动控制和切换
**功能快捷区**：优惠券中心、以旧换新、价保政策等服务入口
**热卖专区**：展示热门产品，包含产品图片、名称、描述和价格
**OPPO专区**：展示OPPO各系列产品，提供细分导航
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPPO 商城 - 首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/0.png" alt="OPPO Logo"></a>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">OPPO 专区</a></li>
<li><a href="#">一加 专区</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
<div class="search-bar">
<input type="text" placeholder="OPPO Reno14">
<button type="button">Q</button>
</div>
<div class="user-actions">
<a href="login.html">登录</a>
<span class="separator">|</span>
<a href="register.html">注册</a>
<a href="#"><img src="images/1.png" alt="User" class="user-icon"></a>
</div>
</div>
</header>
<main class="main-content">
<div class="container main-layout">
<!-- Left sidebar navigation -->
<aside class="sidebar-nav">
<ul>
<li><a href="#">热门推荐</a></li>
<li><a href="#">OPPO 手机</a>
<ul class="submenu">
<li><a href="#">Find 系列</a></li>
<li><a href="#">Reno 系列</a></li>
<li><a href="#">K 系列</a></li>
<li><a href="#">A 系列</a></li>
</ul>
</li>
<li><a href="#">一加手机</a></li>
<li><a href="#">平板电脑</a></li>
<li><a href="#">智能电视</a></li>
<li><a href="#">智能穿戴</a></li>
<li><a href="#">原装配件</a></li>
<li><a href="#">保障服务</a></li>
</ul>
</aside>
<!-- Main banner/hero section -->
<section class="hero-section">
<div class="hero-carousel">
<div class="carousel-slides">
<div class="carousel-slide active">
<img src="images/2.png" alt="OPPO Reno14" class="hero-image">
</div>
<div class="carousel-slide">
<img src="images/3.png" alt="1加Ace5 至尊版" class="hero-image">
</div>
<div class="carousel-slide">
<img src="images/4.png" alt="OPPO K12s" class="hero-image">
</div>
<div class="carousel-slide">
<img src="images/5.png" alt="OPPO Find X8 Ultra" class="hero-image">
</div>
</div>
<div class="carousel-dots">
<span class="dot active" data-slide="0"></span>
<span class="dot" data-slide="1"></span>
<span class="dot" data-slide="2"></span>
<span class="dot" data-slide="3"></span>
</div>
<button class="carousel-arrow prev">❮</button>
<button class="carousel-arrow next">❯</button>
</div>
</section>
</div>
<!-- Horizontal display section below hero -->
<section class="horizontal-display-section container">
<div class="display-item">
<div class="item-info">
<img src="images/6.png" alt="骁龙870旗舰">
<p>OPPO Find X8 Pro</p>
<p class="sub-info">骁龙870旗舰</p>
</div>
</div>
<div class="display-item">
<div class="item-info">
<p>优惠券中心</p>
</div>
</div>
<div class="display-item">
<div class="item-info">
<p>以旧换新</p>
</div>
</div>
<div class="display-item">
<div class="item-info">
<p>价保政策</p>
</div>
</div>
<div class="display-item">
<div class="item-info">
<p>企业购</p>
</div>
</div>
<div class="display-item user-login-promo">
<div class="user-promo-text">
<p>登录 | 注册</p>
<p class="sub-info">立即关注领取新人福利</p>
</div>
<img src="images/1.png" alt="User Avatar" class="user-avatar">
</div>
</section>
<!-- Four images section -->
<section class="four-image-promo container">
<img src="images/7.png" alt="Promotion Image 1">
<img src="images/8.png" alt="Promotion Image 2">
<img src="images/9.png" alt="Promotion Image 3">
<img src="images/10.png" alt="Promotion Image 4">
</section>
<!-- Hot selling section -->
<section class="hot-selling-section container">
<h2>热卖专区</h2>
<div class="product-grid hot-selling-product-grid">
<div class="product-card">
<a href="product-detail.html">
<img src="images/11.png" alt="OPPO Reno13 Ai">
<h3>OPPO Reno13 Ai...</h3>
<p>绝美小直屏</p>
<p class="price">售价 ¥2199</p>
</a>
</div>
<div class="product-card">
<img src="images/12.png" alt="一加 Ace 5 Pro">
<h3>一加 Ace 5 Pro...</h3>
<p>单一代视觉王</p>
<p class="price">售价 ¥2199</p>
</div>
<div class="product-card">
<img src="images/13.png" alt="OPPO Find X8 A">
<h3>OPPO Find X8 A...</h3>
<p>轻薄巨幕</p>
<p class="price">售价 ¥3999</p>
</div>
<div class="product-card">
<img src="images/14.png" alt="OPPO K12 Plus">
<h3>OPPO K12 Plus...</h3>
<p>游戏性能手机</p>
<p class="price">售价 ¥1499</p>
</div>
<div class="product-card">
<img src="images/15.png" alt="OPPO K12x">
<h3>OPPO K12x 蜕变...</h3>
<p>百年来为你所用</p>
<p class="price">售价 ¥899</p>
</div>
<div class="product-card">
<img src="images/16.png" alt="一加 Ace 5 Pro">
<h3>一加 Ace 5 Pro...</h3>
<p>骁龙8+旗舰版</p>
<p class="price">售价 ¥2999</p>
</div>
</div>
</section>
<!-- OPPO Special Zone -->
<section class="oppo-special-zone">
<h2>OPPO专区</h2>
<nav class="oppo-series-nav">
<ul>
<li><a href="#">Find N 系列</a></li>
<li><a href="#">Find X 系列</a></li>
<li><a href="#">Reno系列</a></li>
<li><a href="#">K系列</a></li>
<li><a href="#">A系列</a></li>
<li><a href="#">平板电脑</a></li>
<li><a href="#">智能穿戴</a></li>
<li><a href="#">智能耳机</a></li>
<li><a href="#">原装配件</a></li>
</ul>
</nav>
<div class="product-grid oppo-special-product-grid">
<div class="product-card">
<img src="images/17.png" alt="Find N5 折叠旗舰">
<h3>Find N5 折叠旗舰</h3>
<p>快充没了</p>
<p class="price">¥9999</p>
</div>
<div class="product-card">
<img src="images/18.png" alt="OPPO Find N5">
<h3>OPPO Find N5</h3>
<p class="price">¥9999</p>
</div>
<div class="product-card">
<img src="images/19.png" alt="OPPO Find N3 Flip">
<h3>OPPO Find N3 Flip</h3>
<p class="price">¥4999</p>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html> 2.2 商品详情页 (product-detail.html)
**技术实现：**
HTML5 结构化商品信息展示
CSS3 实现产品图片轮播和详情布局
JavaScript 实现图片切换功能，支持缩略图预览
**内容涵盖：**
**产品图片展示**：主图展示和缩略图切换功能
**商品信息**：产品名称、价格、规格参数等详细信息
**购买选项**：颜色选择、内存选择、数量选择等
**购买按钮**：加入购物车、立即购买等操作入口
**产品特性**：详细介绍产品的核心卖点和技术参数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPPO 商城 - 商品详情</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<img src="images/0.png" alt="OPPO Logo">
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">OPPO 专区</a></li>
<li><a href="#">一加 专区</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
<div class="search-bar">
<input type="text" placeholder="OPPO Reno14">
<button type="button">Q</button>
</div>
<div class="user-actions">
<a href="login.html">登录</a> | <a href="register.html">注册</a>
</div>
</div>
</header>
<main class="main-content">
<div class="container product-detail-container">
<div class="product-images">
<img src="images/11.png" alt="OPPO Reno13 Ai" class="main-image">
<div class="thumbnail-images">
<img src="images/20.png" alt="Thumbnail 1">
<img src="images/21.png" alt="Thumbnail 2">
<img src="images/22.png" alt="Thumbnail 3">
</div>
</div>
<div class="product-info">
<h1>OPPO Reno13 Ai</h1>
<p class="product-description">绝美小直屏，超感影像，轻薄设计，性能强劲。</p>
<p class="product-price">售价: ¥<span class="price-value">2199</span></p>
<div class="product-specs">
<h3>产品参数</h3>
<ul>
<li>屏幕：6.7英寸 AMOLED</li>
<li>处理器：骁龙870</li>
<li>内存：8GB/12GB</li>
<li>存储：128GB/256GB</li>
<li>摄像头：64MP主摄 + 8MP超广角 + 2MP微距</li>
<li>电池：4500mAh</li>
</ul>
</div>
<div class="product-actions">
<div class="quantity-selector">
<label for="quantity">数量:</label>
<input type="number" id="quantity" value="1" min="1">
</div>
<button class="add-to-cart-btn">加入购物车</button>
<button class="buy-now-btn">立即购买</button>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html> 2.3 登录页面 (login.html)
**技术实现：**
HTML5 表单设计，支持不同登录方式
CSS3 实现表单样式和交互效果
JavaScript 实现选项卡切换功能
**内容涵盖：**
**登录选项卡**：支持短信登录和密码登录两种方式
**短信登录表单**：手机号输入、验证码获取和输入
**密码登录表单**：用户名/手机号输入、密码输入
**辅助功能**：忘记密码、用户协议和隐私政策链接
**注册入口**：引导新用户注册
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPPO 商城 - 登录</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="auth-page-container">
<div class="auth-header">
<a href="index.html" class="logo">
<img src="images/0.png" alt="OPPO Logo">
</a>
<p class="tagline">登录欢太账号可享受更多的服务</p>
</div>
<div class="auth-form-card">
<div class="scan-login-toggle">
<a href="#">扫码登录</a>
<span class="qr-icon"></span>
</div>
<h2>账号登录</h2>
<div class="login-tabs">
<span class="tab-item active" data-target="sms-login">短信验证码登录</span>
<span class="tab-item" data-target="password-login">密码登录</span>
</div>
<form class="auth-form" id="sms-login">
<div class="form-group">
<input type="text" id="sms-phone" name="sms-phone" placeholder="请输入手机号码" required>
</div>
<div class="form-group verification-group">
<input type="text" id="sms-code" name="sms-code" placeholder="请输入验证码" required>
<button type="button" class="get-code-btn">获取验证码</button>
</div>
<button type="submit" class="submit-btn green-btn">登录</button>
</form>
<form class="auth-form hidden" id="password-login">
<div class="form-group">
<input type="text" id="username" name="username" placeholder="用户名/邮箱" required>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="密码" required>
</div>
<button type="submit" class="submit-btn green-btn">登录</button>
</form>
<div class="auth-links">
<a href="#" class="privacy-link">隐私政策</a>
<a href="register.html" class="register-link">注册账号</a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html> 2.4 注册页面 (register.html)
**技术实现：**
HTML5 表单设计，支持用户注册流程
CSS3 实现表单样式和响应式布局
JavaScript 实现表单验证和交互功能
**内容涵盖：**
**注册表单**：手机号输入、验证码、设置密码等字段
**验证码功能**：手机验证码获取和校验
**密码设置**：安全密码设置和确认
**用户协议**：同意用户协议和隐私政策选项
**注册按钮**：完成注册操作
**登录入口**：引导已有用户登录
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPPO 商城 - 注册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="auth-page-container">
<div class="auth-header">
<a href="index.html" class="logo">
<img src="images/0.png" alt="OPPO Logo">
</a>
<p class="tagline">登录欢太账号可享受更多的服务</p>
</div>
<div class="auth-form-card">
<h2>注册账号</h2>
<form class="auth-form">
<div class="form-group">
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="请输入邮箱" required>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</div>
<div class="form-group">
<input type="password" id="confirm-password" name="confirm-password" placeholder="请确认密码" required>
</div>
<button type="submit" class="submit-btn green-btn">注册</button>
</form>
<div class="auth-links">
<a href="#" class="privacy-link">隐私政策</a>
<a href="login.html" class="register-link">已有账号？立即登录</a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html> 通用技术特点
所有页面共享以下技术特点：
**CSS样式**：统一的视觉风格，使用CSS3特性如弹性布局、过渡动画等
**JavaScript交互**：基于DOM操作实现页面交互，使用事件监听处理用户操作
**响应式设计**：适配不同屏幕尺寸，提供良好的移动端体验
**模块化代码**：样式和脚本分离，便于维护和扩展
**图片资源管理**：使用本地图片资源，优化加载性能