<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品详情 - 小松鼠二手商城</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="../styles/common.css">
<link rel="stylesheet" href="../styles/product-detail.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<a href="../index.html">
<img src="../images/logo.png" alt="小松鼠二手商城">
</a>
<h1 class="site-name">小松鼠二手商城</h1>
</div>
<nav class="nav">
<ul>
<li><a href="../index.html">首页</a></li>
<li><a href="login.html">登录</a></li>
<li><a href="register.html">注册</a></li>
<li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<div class="product-detail">
<div class="product-gallery">
<div class="main-image">
<img src="" alt="商品主图" id="mainImage">
</div>
<div class="thumbnail-list">
<!-- 缩略图将通过 JavaScript 动态生成 -->
</div>
</div>
<div class="product-info">
<h1 class="product-title">二手 MacBook Pro 2019</h1>
<div class="product-meta">
<span class="product-id">商品编号：P123456</span>
<span class="publish-time">发布时间：2024-01-01</span>
</div>
<div class="product-price">
<span class="current-price">￥6999</span>
<span class="original-price">原价：￥12999</span>
</div>
<div class="product-condition">
<span class="condition-label">商品成色：</span>
<span class="condition-value">9成新</span>
</div>
<div class="product-location">
<span class="location-label">所在地区：</span>
<span class="location-value">北京市海淀区</span>
</div>
<div class="seller-info">
<img src="../images/avatar.jpg" alt="卖家头像" class="seller-avatar">
<span class="seller-name">张三</span>
<span class="seller-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
4.5分
</span>
</div>
<div class="product-actions">
<button class="add-to-cart-btn">
<i class="fas fa-shopping-cart"></i> 加入购物车
</button>
<button class="buy-now-btn">
<i class="fas fa-bolt"></i> 立即购买
</button>
<button class="contact-seller-btn">
<i class="fas fa-comment"></i> 联系卖家
</button>
</div>
</div>
</div>
<div class="product-details-tabs">
<div class="tabs-header">
<button class="tab-btn active" data-tab="description">商品详情</button>
<button class="tab-btn" data-tab="parameters">规格参数</button>
<button class="tab-btn" data-tab="comments">买家评价</button>
</div>
<div class="tabs-content">
<div class="tab-panel active" id="description">
<div class="product-description">
<h2>商品介绍</h2>
<p>这是一台性能强劲的二手 MacBook Pro，配置如下：</p>
<div class="highlight-box">
<ul>
<li>处理器：Intel Core i7</li>
<li>内存：16GB</li>
<li>硬盘：512GB SSD</li>
<li>显卡：AMD Radeon Pro 5500M</li>
</ul>
</div>
<h2>使用情况</h2>
<p>设备保养得当，无磕碰划痕，电池健康度90%以上。</p>
<div class="warning-text">
<i class="fas fa-exclamation-circle"></i>
商品为二手商品，售出后不支持无理由退换。
</div>
</div>
</div>
<div class="tab-panel" id="parameters">
<div class="parameters-table">
<!-- 规格参数将通过 JavaScript 动态加载 -->
</div>
</div>
<div class="tab-panel" id="comments">
<div class="comments-list">
<!-- 评价列表将通过 JavaScript 动态加载 -->
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<p>© 2024 小松鼠二手商城 版权所有</p>
</div>
</footer>
<script src="../js/common.js"></script>
<script src="../js/product-detail.js"></script>
</body>
</html>
html+css+js的小松鼠二手商城(响应式) （106个子文件） 
profile.css 41KB product-detail.css 9KB checkout.css 6KB cart.css 4KB payment.css 4KB index.css 4KB order-success.css 3KB register.css 3KB common.css 2KB login.css 2KB
product-detail.html 6KB checkout.html 6KB cart.html 4KB order-success.html 4KB register.html 4KB payment.html 4KB index.html 3KB profile.html 3KB login.html 3KB
jordan-thumb2.jpg 96KB macbook-thumb2.jpg 88KB jordan-thumb1.jpg 87KB jordan-thumb3.jpg 86KB jordan.jpg 81KB book2-thumb2.jpg 79KB book3-thumb2.jpg 79KB macbook.jpg 73KB matepad-thumb3.jpg 72KB book1-thumb2.jpg 71KB book3-thumb3.jpg 70KB matepad-thumb2.jpg 65KB book2-thumb1.jpg 65KB book2.jpg 64KB book1-thumb3.jpg 64KB book1-thumb1.jpg 63KB macbook-thumb3.jpg 63KB shoes-thumb1.jpg 62KB shoes-thumb3.jpg 61KB book1.jpg 61KB coat-thumb1.jpg 60KB coat-thumb2.jpg 59KB shoes.jpg 59KB shoes-thumb2.jpg 55KB book3.jpg 55KB ebike-thumb1.jpg 53KB coat-thumb3.jpg 53KB macbook-thumb1.jpg 52KB book2-thumb3.jpg 52KB book3-thumb1.jpg 51KB coat.jpg 50KB bike-thumb1.jpg 50KB ebike.jpg 49KB product1.jpg 48KB ebike-thumb2.jpg 48KB ebike-thumb3.jpg 48KB bike-thumb2.jpg 48KB bike.jpg 47KB matepad.jpg 42KB matepad-thumb1.jpg 41KB product2.jpg 40KB bike-thumb3.jpg 40KB scooter-thumb3.jpg 39KB iphone-thumb2.jpg 38KB iphone.jpg 37KB scooter-thumb2.jpg 35KB scooter-thumb1.jpg 35KB iphone-thumb1.jpg 34KB scooter.jpg 33KB iphone-thumb3.jpg 32KB product3.jpg 31KB avatar14.jpg 30KB avatar18.jpg 27KB avatar17.jpg 25KB avatar15.jpg 25KB avatar20.jpg 22KB avatar11.jpg 21KB avatar19.jpg 20KB avatar16.jpg 20KB avatar6.jpg 19KB avatar1.jpg 18KB avatar.jpg 18KB avatar5.jpg 18KB avatar3.jpg 18KB avatar4.jpg 16KB avatar2.jpg 16KB avatar9.jpg 15KB avatar7.jpg 14KB avatar8.jpg 14KB avatar10.jpg 13KB avatar12.jpg 12KB avatar13.jpg 11KB profile.js 42KB product-detail.js 36KB cart.js 9KB index.js 6KB checkout.js 6KB register.js 4KB login.js 3KB payment.js 3KB order-success.js 2KB共 106 条
- 1
- 2
资源评论
前端程序员小胡
- 粉丝: 0
- 资源: 3
