临摹米家有品首页
产品页
番茄鸡蛋冻干面 12杯/箱-有品
（1）html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>番茄鸡蛋冻干面 12杯/箱-有品</title>
<link href="../css/top-footer-standard.css" type="text/css" rel="stylesheet" />
<link href="../css/product-sec3-4.css" type="text/css" rel="stylesheet" />
<!--<link href="../css/bootstrap.css" type="text/css" rel="stylesheet" />-->
</head>
<body>
<div id="root">
<div class="home-wrap">
<div class="m-site-top">
<div class="container">
<div class="fr">
<div class="fl-m-user-con site-item">
<div class="m-no-login">
<a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">登录</a>
<a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">注册</a>
</div>
<span class="fl-m-line"></span>
<div class="clearfix"></div>
</div>
<div class="fr-m-download site-item">
<a href="#" class="m-safe-anchor">
<span class="icon fr-m-download-small-icon"></span> 下载APP
</a>
<div class="site-item-nav">
<div class="site-nav-inner">
<img class="qr-code" src="../img/c1.png" />
<p>
下载有品APP<br /> 得新人1000元礼包
</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="m-header">
<div class="container">
<div class="m-header-top">
<div class="m-logo">
<img src="../img/c2.png" />
</div>
<div class="m-card-wrap">
<div class="icon m-card-wrap-small-icon"></div>
</div>
<div class="m-search">
<div class="search-form ">
<div class="search-card-wrap">
<div class="icon search-card-wrap-small-icon"></div>
</div>
<div class="search-input-con">
<input type="text" placeholder="冬日里不能错过的美食" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="m-nav">
<ul class="nav-list">
<li data-index="0"><span class="item">有品推荐</span></li>
<li data-index="1"><span class="item">家电</span></li>
<li data-index="2"><span class="item">影音</span></li>
<li data-index="3"><span class="item">餐厨</span></li>
<li data-index="4"><span class="item">服饰</span></li>
<li data-index="5"><span class="item">智能</span></li>
<li data-index="6"><span class="item">健康</span></li>
<li data-index="7"><span class="item">洗护</span></li>
<li data-index="8"><span class="item">日杂</span></li>
<li data-index="9"><span class="item">饮食</span></li>
<li data-index="10"><span class="item">居家</span></li>
<li data-index="11"><span class="item">手机</span></li>
<li data-index="12"><span class="item">箱包</span></li>
<li data-index="13"><span class="item">配件</span></li>
<li data-index="14"><span class="item">婴童</span></li>
<li data-index="15"><span class="item">出行</span></li>
<li data-index="16"><span class="item">品牌</span></li>
<div class="clearfix"></div>
</ul>
<div class="nav-menu" style="display: none;">
<ul class="nav-menu-list" data-index="0" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-0-1.jpg" alt="" />
</div>
<p class="nav-menu-info">1212特惠</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-0-2.jpg" alt="" />
</div>
<p class="nav-menu-info">新品</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-0-3.jpg" alt="" />
</div>
<p class="nav-menu-info">应季</p>
</li>
<li>
<div class="nav-menu-img">
<img src=" ../img/header-0-4.jpg" alt="" />
</div>
<p class="nav-menu-info">男士</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-0-5.jpg" alt="" />
</div>
<p class="nav-menu-info">女士</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="1" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-1-1.jpg" alt="" />
</div>
<p class="nav-menu-info">空气净化器</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-1-2.jpg" alt="" />
</div>
<p class="nav-menu-info">净水器</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-1-3.jpg" alt="" />
</div>
<p class="nav-menu-info">洗衣机</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-1-4.jpg" alt="" />
</div>
<p class="nav-menu-info">冰箱</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-1-5.jpg" alt="" />
</div>
<p class="nav-menu-info">生活电器</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-1-6.jpg" alt="" />
</div>
<p class="nav-menu-info">空调/电扇</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-1-7.jpg" alt="" />
</div>
<p class="nav-menu-info">厨房家电</p>
</li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="2" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-2-1.jpg" alt="" />
</div>
<p class="nav-menu-info">电视</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-2-2.jpg" alt="" />
</div>
<p class="nav-menu-info">盒子</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-2-3.jpg" alt="" />
</div>
<p class="nav-menu-info">投影</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-2-4.jpg" alt="" />
</div>
<p class="nav-menu-info">音箱</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="3" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-3-1.jpg" alt="" />
</div>
<p class="nav-menu-info">厨房电器</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-3-2.jpg" alt="" />
</div>
<p class="nav-menu-info">锅具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-3-3.jpg" alt="" />
</div>
<p class="nav-menu-info">餐具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-3-4.jpg" alt="" />
</div>
<p class="nav-menu-info">杯壶</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-3-5.jpg" alt="" />
</div>
<p class="nav-menu-info">功能厨具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-3-6.jpg" alt="" />
</div>
<p class="nav-menu-info">刀剪砧板</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-3-7.jpg" alt="" />
</div>
<p class="nav-menu-info">保鲜收纳</p>
</li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="4" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-4-1.jpg" alt="" />
</div>
<p class="nav-menu-info">服装</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-4-2.jpg" alt="" />
</div>
<p class="nav-menu-info">鞋袜</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-4-3.jpg" alt="" />
</div>
<p class="nav-menu-info">眼镜</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-4-4.jpg" alt="" />
</div>
<p class="nav-menu-info">配饰</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-4-5.jpg" alt="" />
</div>
<p class="nav-menu-info">内衣</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="5" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-5-1.jpg" alt="" />
</div>
<p class="nav-menu-info">小米笔记本Pro</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-2.jpg" alt="" />
</div>
<p class="nav-menu-info">小米笔记本Air</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-3.jpg" alt="" />
</div>
<p class="nav-menu-info">智能家庭套装</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-4.jpg" alt="" />
</div>
<p class="nav-menu-info">安防</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-5.jpg" alt="" />
</div>
<p class="nav-menu-info">网关/传感器</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-6.jpg" alt="" />
</div>
<p class="nav-menu-info">路由器</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-7.jpg" alt="" />
</div>
<p class="nav-menu-info">开关/插座</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-8.jpg" alt="" />
</div>
<p class="nav-menu-info">相机</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-5-9.jpg" alt="" />
</div>
<p class="nav-menu-info">穿戴</p>
</li>
<li>
<p class="nav-menu-info nav-menu-info-more">更多></p>
</li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="6" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-6-1.jpg" alt="" />
</div>
<p class="nav-menu-info">康体监护</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-6-2.jpg" alt="" />
</div>
<p class="nav-menu-info">运动健身</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-6-3.jpg" alt="" />
</div>
<p class="nav-menu-info">护理护具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-6-4.jpg" alt="" />
</div>
<p class="nav-menu-info">保健器械</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="7" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-7-1.jpg" alt="" />
</div>
<p class="nav-menu-info">空腔清洁</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-7-2.jpg" alt="" />
</div>
<p class="nav-menu-info">面部护理</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-7-3.jpg" alt="" />
</div>
<p class="nav-menu-info">毛巾浴巾</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-7-4.jpg" alt="" />
</div>
<p class="nav-menu-info">美发护发</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-7-5.jpg" alt="" />
</div>
<p class="nav-menu-info">身体呵护</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-7-6.jpg" alt="" />
</div>
<p class="nav-menu-info">洗涤清理</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="8" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-8-1.jpg" alt="" />
</div>
<p class="nav-menu-info">日用</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-8-2.jpg" alt="" />
</div>
<p class="nav-menu-info">工具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-8-3.jpg" alt="" />
</div>
<p class="nav-menu-info">清洁</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-8-4.jpg" alt="" />
</div>
<p class="nav-menu-info">文具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-8-5.jpg" alt="" />
</div>
<p class="nav-menu-info">收纳</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="9" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-9-1.jpg" alt="" />
</div>
<p class="nav-menu-info">酒水</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-9-2.jpg" alt="" />
</div>
<p class="nav-menu-info">休闲小食</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-9-3.jpg" alt="" />
</div>
<p class="nav-menu-info">冲饮/茗茶</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-9-4.jpg" alt="" />
</div>
<p class="nav-menu-info">杂粮/食材</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-9-5.jpg" alt="" />
</div>
<p class="nav-menu-info">生鲜</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="10" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-10-1.jpg" alt="" />
</div>
<p class="nav-menu-info">床垫</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-2.jpg" alt="" />
</div>
<p class="nav-menu-info">被枕</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-3.jpg" alt="" />
</div>
<p class="nav-menu-info">床品件套</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-4.jpg" alt="" />
</div>
<p class="nav-menu-info">灯具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-5.jpg" alt="" />
</div>
<p class="nav-menu-info">家具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-6.jpg" alt="" />
</div>
<p class="nav-menu-info">花卉盆栽</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-7.jpg" alt="" />
</div>
<p class="nav-menu-info">家饰</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-10-8.jpg" alt="" />
</div>
<p class="nav-menu-info">布艺软装</p>
</li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="11" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-11-1.jpg" alt="" />
</div>
<p class="nav-menu-info">小米系列</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-11-2.jpg" alt="" />
</div>
<p class="nav-menu-info">红米系列</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="12" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-12-1.jpg" alt="" />
</div>
<p class="nav-menu-info">背包</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-12-2.jpg" alt="" />
</div>
<p class="nav-menu-info">旅行箱</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-12-3.jpg" alt="" />
</div>
<p class="nav-menu-info">钱包/卡包</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-12-4.jpg" alt="" />
</div>
<p class="nav-menu-info">功能箱包</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="13" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-13-1.jpg" alt="" />
</div>
<p class="nav-menu-info">电竞</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-13-2.png" alt="" />
</div>
<p class="nav-menu-info">电源/电池</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-13-3.jpg" alt="" />
</div>
<p class="nav-menu-info">手机周边</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-13-4.jpg" alt="" />
</div>
<p class="nav-menu-info">办公周边</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-13-5.jpg" alt="" />
</div>
<p class="nav-menu-info">耳机</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-13-6.png" alt="" />
</div>
<p class="nav-menu-info">插线板</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-13-7.png" alt="" />
</div>
<p class="nav-menu-info">适配器/线材</p>
</li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="14" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-14-1.jpg" alt="" />
</div>
<p class="nav-menu-info">玩具</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-14-2.jpg" alt="" />
</div>
<p class="nav-menu-info">儿童穿戴</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-14-3.jpg" alt="" />
</div>
<p class="nav-menu-info">洗护</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-14-4.jpg" alt="" />
</div>
<p class="nav-menu-info">寝居</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-14-5.jpg" alt="" />
</div>
<p class="nav-menu-info">服饰箱包</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-14-6.jpg" alt="" />
</div>
<p class="nav-menu-info">出行</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="15" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-15-1.jpg" alt="" />
</div>
<p class="nav-menu-info">骑行</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-15-2.jpg" alt="" />
</div>
<p class="nav-menu-info">汽车用品</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-15-3.jpg" alt="" />
</div>
<p class="nav-menu-info">户外</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clearfix"></div>
</ul>
<ul class="nav-menu-list" data-index="16" style="display: none;">
<li>
<div class="nav-menu-img">
<img src="../img/header-16-1.jpg" alt="" />
</div>
<p class="nav-menu-info">8H</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-2.jpg" alt="" />
</div>
<p class="nav-menu-info">90分</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-3.jpg" alt="" />
</div>
<p class="nav-menu-info">Yeelight</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-4.jpg" alt="" />
</div>
<p class="nav-menu-info">一悟一什</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-5.jpg" alt="" />
</div>
<p class="nav-menu-info">云米</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-6.jpg" alt="" />
</div>
<p class="nav-menu-info">小吉</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-7.jpg" alt="" />
</div>
<p class="nav-menu-info">素士</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-8.jpg" alt="" />
</div>
<p class="nav-menu-info">最生活</p>
</li>
<li>
<div class="nav-menu-img">
<img src="../img/header-16-9.jpg" alt="" />
</div>
<p class="nav-menu-info">cottonsmith</p>
</li>
<li>
<p class="nav-menu-info nav-menu-info-more">更多></p>
</li>
<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<hr class="header-detail-line" />
<div class="detail">
<div class="container">
<div class="swipper-container">
<div class="product-detail-top">
<div class="product-detail-left">
<div class="product-detail-left-fl">
<img src="../img/product-sec3-4-1.webp" />
</div>
<div class="product-detail-left-fr">
<div class="product-detail-left-fr-img product-detail-left-fr-img-border">
<img src="../img/product-sec3-4-1.webp" />
</div>
<div class="product-detail-left-fr-img">
<img src="../img/product-sec3-4-2.webp" />
</div>
<div class="product-detail-left-fr-img">
<img src="../img/product-sec3-4-3.webp" />
</div>
<div class="product-detail-left-fr-img">
<img src="../img/product-sec3-4-4.webp" />
</div>
<div class="product-detail-left-fr-img" style="display: none;">
<img src="../img/product-sec3-4-5.webp" />
</div>
<div class="product-detail-left-fr-img" style="display: none;">
<img src="../img/product-sec3-4-6.webp" />
</div>
<div class="icon left-fr-prev-small-icon" style="display: none;"></div>
<div class="icon left-fr-next-small-icon" style="display: none;"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="product-detail-right">
<div class="product-detail-right-name">番茄鸡蛋冻干面 12杯</div>
<div class="product-detail-right-desc">非油炸冻干技术，新鲜口感，汤汁浓郁</div>
<div class="product-detail-right-info">
<div class="product-info-price">
<p class="product-info-price-inner">
<p class="info-price-text">售价</p>
<div class="price">
<span class="info-price-unit">￥</span>
<span class="info-price-num">59.9</span>
</div>
<div class="clearfix"></div>
</p>
</div>
<div class="product-info-service">
<p class="info-price-text">服务</p>
<div class="service">
<p>
<span class="icon service-small-icon"></span>
<span style="margin-right: 10px;">有品甄选精品</span>
<span class="icon service-small-icon"></span>
<span>限时免邮（活动期间）</span>
</p>
<p>
<span class="icon service-small-icon"></span>
<span>新三和（烟台）食品有限责任公司发货并提供售后</span>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="product-detail-right-order">
<div class="product-detail-right-order-fl">
<p class="info-price-text info-price-text-num">数量</p>
<div class="clearfix"></div>
</div>
<div class="choose-orter-num">
<div class="choose-orter-num-button">
<a class="icon order-num-small-icon-remove"></a>
</div>
<div class="choose-orter-num-input">
<input class="order-num" type="text" value="1" />
</div>
<div class="choose-orter-num-button">
<a class="icon order-num-small-icon-add"></a>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="product-detail-right-button">
<div class="buy-btn-container">
<div>
<a class="m-btns m-btn-brown-stroke">立即购买</a>
<a class="m-btns m-btn-brown">加入购物车</a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="favor-btn ">
<div>
<a class="icon favor-btn-small-icon"></a>
<p>收藏</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="product-detail-main">
<div class="product-detail-nav">
<ul class="info-nav">
<li class="info-nav-item" data-index="0">产品介绍</li>
<li class="info-nav-item" data-index="1">评论</li>
<li class="info-nav-item" data-index="2">常见问题</li>
</ul>
<div class="nav-arr-container">
<div class="nav-arr-container-item" style="background: #845F3F"></div>
<div class="nav-arr-container-item" style="background: #eee;"></div>
<div class="nav-arr-container-item" style="background: #eee;"></div>
<div class="nav-arr-container-item nav-arr-container-item-other"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="product-detail-img">
<div class="product-desc">
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-7.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-8.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-9.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-10.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-11.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-12.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-13.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-14.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-15.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-16.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-17.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-18.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-19.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-20.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-21.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-22.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-23.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-24.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-25.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-26.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-27.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-28.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-29.jpg" alt="" />
</div>
<div class="product-detail-item-img">
<img src="../img/product-sec3-4-30.jpg" alt="" />
</div>
</div>
<div class="product-argument" style="display: none;">
<div class="person-argument">
<div class="t-div">
<div class="my-img">
<img src="../img/product-sec3-4-32.jpg" />
</div>
<div class="my-name">王*峰</div>
<div class="my-time">2017-12-07 20:28</div>
<div class="clearfix"></div>
</div>
<div class="m-div">东西不错，就是快递太慢</div>
<hr class="argument-line" />
<div class="clearfix"></div>
</div>
<div class="person-argument">
<div class="t-div">
<div class="my-img">
<img src="../img/product-sec3-4-32.jpg" />
</div>
<div class="my-name">淡*色</div>
<div class="my-time">2017-12-07 20:05</div>
<div class="clearfix"></div>
</div>
<div class="m-div">味道还不错，虽说小贵，也值了！</div>
<hr class="argument-line" />
<div class="clearfix"></div>
</div>
</div>
<div class="common-problem" style="display: none;">
<img src="../img/product-sec3-4-31.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-section h-sec-over"></div>
<hr class="main-footer-line" />
<div class="footer">
<div class="container">
<div class="swiper-footer-container">
<div class="footer-logo-fl">
<img class="footer-logo-fl-img" src="../img/c2.png" />
</div>
<div class="footer-fl-text">
<span>版权归米家商城所有</span>
</div>
<div class="footer-fr-text">
<p>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
<p class="millder-empty"></p>
<p>公司名称：小米通讯技术有限公司 联系电话：010-60606666</p>
</div>
<div class="footer-logo-fr">
<a href="https://home.mi.com/app/shop/content?id=na056d0394b93a391">
<img class="footer-logo-fr-img" src="../img/footer-logo.png" />
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="silder-bar">
<div class="silder-download">
<div class="aaa">
<div class="icon download-small-icon"></div>
<p class="icon-text">下载</p>
<p>APP</p>
</div>
<div class="hide-pop hide-pop-1" style="display: none;">
<div class="pop-inner">
<img class="download-pop-img" src="../img/c1.png" />
<p>下载有品APP</p>
<p>得新人礼包</p>
</div>
</div>
</div>
<hr />
<div class="new-person-gift">
<div class="bbb">
<div class="icon new-person-small-icon"></div>
<p class="icon-text">新人有礼</p>
</div>
<div class="hide-pop hide-pop-2" style="display: none;">
<div class="pop-inner">
<img class="new-person-pop-img-top" src="../img/gift-gd.png" />
<div class="new-person-pop-img-bottom-area">
<img class="download-pop-img" src="../img/c1.png" />
</div>
<p class="hide-pop-text">立即扫码下载·有品 APP</p>
</div>
</div>
</div>
<hr />
<div class="back-top">
<div class="ccc">
<div class="icon go-back-small-icon"></div>
<p class="icon-text">回到顶部</p>
</div>
<div class="hide-new-person"></div>
</div>
</div>
</div>
<script src="../js/jquery-2.1.0.js" type="text/javascript"></script>
<script src="../js/icon-animate.js" type="text/javascript"></script>
<script src="../js/product-sec3-4.js" type="text/javascript"></script>
<!--<script src="../js/bootstrap.js" type="text/javascript"></script>-->
<script type="text/javascript">
$('.m-logo').click(function() {
//window.location.href="index.html";
window.open("../index.html");
});
</script>
</body>
</html>（2）css
/**/
/*分割线样式*/
.header-detail-line {
border: none;
width: 100%;
border-bottom: 1px solid #eee;
}
/*detail样式*/
.detail {
padding-top: 60px;
}
.product-detail-top {
margin-bottom: 50px;
}
.product-detail-left {
width: 465px;
height: 433px;
float: left;
}
.product-detail-right {
float: right;
width: 565px;
}
.product-detail-left-fl {
float: left;
}
.product-detail-left-fr {
float: right;
position: relative;
}
.product-detail-left-fl img {
width: 366px;
height: 431px;
}
.product-detail-left-fr-img {
margin-bottom: 10px;
width: 83px;
height: 100px;
}
.product-detail-left-fr-img img {
display: block;
width: 83px;
height: 100px;
}
/*小图片边框样式*/
.product-detail-left-fr-img-border{
border: 1px solid #845f3f;
}
/*小图标*/
.left-fr-prev-small-icon,
.left-fr-next-small-icon {
width: 85px;
height: 19px;
position: absolute;
}
.left-fr-prev-small-icon{
background-position: 0 -154px;
top: 0;
}
.left-fr-next-small-icon{
background-position: 0 -213px;
bottom: 10px;
}
/**/
/*右侧介绍样式*/
.product-detail-right-name {
font-size: 19px;
color: #333;
margin-bottom: 5px;
}
.product-detail-right-desc {
font-size: 14px;
color: #aaa;
}
.product-detail-right-info {
margin-bottom: 26px;
margin-top: 18px;
padding: 10px;
background: #f9f9f9;
}
.product-info-price {
margin-bottom: 12px;
margin-top: 12px;
}
.product-info-service {
margin-bottom: 12px;
}
.info-price-text {
font-size: 14px;
color: #333;
margin-right: 30px;
line-height: 32px;
float: left;
}
.price,
.service {
float: right;
width: 483px;
}
.info-price-unit {
color: #c00000;
font-size: 14px;
}
.info-price-num {
font-size: 30px;
color: #c00000;
}
.info-price-service-text {
display: inline-block;
}
.service {
color: #333;
}
.service-small-icon {
display: inline-block;
width: 18px;
height: 18px;
background-position: 0 -193px;
}
.info-price-text-num {
margin-left: 10px;
}
.product-detail-right-order-fl {
float: left;
}
.choose-orter-num {
float: right;
width: 490px;
}
.choose-orter-num>div {
float: left;
}
.choose-orter-num-button {
width: 30px;
height: 30px;
border: 1px solid #ccc;
}
.order-num {
display: inline-block;
width: 50px;
height: 28px;
font-size: 18px;
text-align: center;
}
.order-num-small-icon-add,
.order-num-small-icon-remove {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
}
.order-num-small-icon-add {
background-position: 0 -980px;
}
.order-num-small-icon-remove {
background-position: 0 -1285px;
}
/*产品购买样式*/
.product-detail-right-button {
margin-top: 50px;
}
.product-detail-right-button>div {
float: left;
}
.m-btns {
font-size: 21px;
padding: 13px 39px;
border-radius: 3px;
cursor: pointer;
margin-right: 15px;
}
.m-btn-brown-stroke {
border: 1px solid #845f3f;
color: #845f3f;
}
.m-btn-brown-stroke:hover {
background: #845f3f;
color: #fff;
}
.m-btn-brown {
background: #845F3F;
color: #fff;
padding: 14px 30px;
}
.m-btn-brown:hover {
background: #eee;
color: #845F3F;
}
.favor-btn {
height: 53px;
width: 53px;
border: 1px solid #ddd;
position: relative;
top: -14px;
border-radius: 3px;
font-size: 14px;
color: #aaa;
text-align: center;
cursor: pointer;
}
.favor-btn:hover {
background: #845F3F;
color: #fff;
}
.favor-btn-small-icon {
display: inline-block;
width: 30px;
height: 30px;
background-position: 0 -675px;
}
.favor-btn p {
position: relative;
top: -5px;
}
/*导航栏补充样式*/
.product-detail-nav-fixed{
position: fixed;
top: 0;
left:50%;
margin-left: -540px;
}
/*产品主要内容*/
.product-detail-main {}
.info-nav {
background: #eee;
width: 774px;
padding: 16px 0 13px;
}
/*内容列表*/
.info-nav-item {
display: inline-block;
list-style-type: none;
width: 128px;
font-size: 16px;
text-align: center;
border-right: 1px solid #aaa;
cursor: pointer;
}
.info-nav-item:hover {
color: #845F3F;
}
/*列表下方滑块*/
.nav-arr-container-item {
float: left;
height: 3px;
width: 132px;
}
.nav-arr-container-item-other {
background: #eee;
width: 378px;
}
.product-detail-item-img img {
width: 774px;
display: block;
}
/*评论样式*/
.person-argument {
width: 774px;
}
.t-div {
width: 774px;
margin-top: 35px;
}
.my-img img {
border-radius: 50px;
margin-right: 30px;
display: block;
}
.my-img,
.my-name {
float: left;
}
.my-name {
width: 50px;
height: 50px;
font-size: 18px;
color: #333;
line-height: 50px;
}
.my-time {
height: 50px;
float: right;
margin: auto 0;
line-height: 50px;
font-size: 14px;
color: #aaa;
}
.common-problem img {
width: 774px;
display: block;
}
.m-div {
margin-top: 20px;
margin-left: 80px;
font-size: 14px;
color: #111;
}
.argument-line {
margin-top: 20px;
float: right;
border: none;
border-bottom: 1px solid #ccc;
width: 694px;
}（3）js
$(function(){
var $left_img=$('.product-detail-left-fl img');
var $right_img=$('.product-detail-left-fr-img img');
var $product_detail_left_fr_img=$('.product-detail-left-fr-img');
var $product_detail_left_fr=$('.product-detail-left-fr');
var $left_fr_prev_small_icon=$('.left-fr-prev-small-icon');
var $left_fr_next_small_icon=$('.left-fr-next-small-icon');
/*小图片触发事件*/
$product_detail_left_fr.on({
mouseover:function(){
$left_fr_next_small_icon.show();
$left_fr_prev_small_icon.show();
},
mouseleave:function(){
$left_fr_next_small_icon.hide();
$left_fr_prev_small_icon.hide();
}
});
/*小图片按钮触发事件*/
$left_fr_prev_small_icon.on('click',function(){
var tmp=judge_prev_border();
var next_img_src=$($right_img[tmp-1]).attr('src');
$left_img.attr('src',next_img_src);
if(tmp<=0) return;
$($product_detail_left_fr_img[tmp]).removeClass('product-detail-left-fr-img-border');
$($product_detail_left_fr_img[tmp-1]).addClass('product-detail-left-fr-img-border');
});
$left_fr_next_small_icon.on('click',function(){
var tmp=judge_border();
var next_img_src=$($right_img[tmp+1]).attr('src');
$left_img.attr('src',next_img_src);
if(tmp>=5) return;
$($product_detail_left_fr_img[tmp]).removeClass('product-detail-left-fr-img-border');
$($product_detail_left_fr_img[tmp+1]).addClass('product-detail-left-fr-img-border');
});
/*判断当前边框的索引值*/
function judge_border(){
var uniq;
for (var i=0;i<$product_detail_left_fr_img.length;i++) {
uniq=$($product_detail_left_fr_img[i]).hasClass('product-detail-left-fr-img-border');
if(uniq){
if(i>=2){
right_img_show_hide(i);
}
return i;
}
}
}
function judge_prev_border(){
var uniq;
for (var i=0;i<$product_detail_left_fr_img.length;i++) {
uniq=$($product_detail_left_fr_img[i]).hasClass('product-detail-left-fr-img-border');
if(uniq){
if(i<=3){
right_img_prev_show_hide(i);
}
return i;
}
}
}
/*右侧小图展示或隐藏*/
function right_img_show_hide(num){
if(num>=4) return;
$($product_detail_left_fr_img[num-2]).hide();
$($product_detail_left_fr_img[num+2]).show();
}
function right_img_prev_show_hide(num){
if(num<=1) return;
$($product_detail_left_fr_img[num-2]).show();
$($product_detail_left_fr_img[num+2]).hide();
}
/*购买数量加减*/
var $order_num_small_icon_remove=$('.order-num-small-icon-remove');
var $order_num_small_icon_add=$('.order-num-small-icon-add');
var $order_num=$('.order-num');
var check_order_num=setInterval(function(){
var str=$order_num.val();
var num=parseInt(str);
if(!num){
num=1;
}
if(num>10) num=10;
$order_num.val(num);
},300);
$order_num_small_icon_add.on('click',function(e){
var str=$order_num.val();
var num=parseInt(str);
num+=1;
if(num>10) {
return;
}
$order_num.val(num);
});
$order_num_small_icon_remove.on('click',function(){
var str=$order_num.val();
var num=parseInt(str);
num-=1;
if(num>0) {
$order_num.val(num);
}
});
/*收藏触发事件*/
var $favor_btn=$('.favor-btn');
var $favor_btn_small_icon=$('.favor-btn-small-icon');
$favor_btn.on({
mouseover:function(){
$favor_btn_small_icon.css('background-position-y','-1185px');
},
mouseleave:function(){
$favor_btn_small_icon.css('background-position-y','-675px');
}
});
/*产品内容、评论、常见问题切换*/
var $info_nav_item= $('.info-nav-item');
var $product_desc=$('.product-desc');
var $product_argument=$('.product-argument');
var $common_problem=$('.common-problem');
var $nav_arr_container_item=$('.nav-arr-container-item');
$info_nav_item.on('click',function(){
$this=$(this);
var index=$this.data(index).index;
set_main_attr();
if(index==0) {
$nav_arr_container_item[index].style.background='#845F3F';
$product_desc.css('display','block');
}
if(index==1) {
$nav_arr_container_item[index].style.background='#845F3F';
$product_argument.css('display','block');
}
if(index==2) {
$nav_arr_container_item[index].style.background='#845F3F';
$common_problem.css('display','block');
}
});
function set_main_attr(){
$product_desc.css('display','none');
$product_argument.css('display','none');
$common_problem.css('display','none');
for(var i=0;i<$nav_arr_container_item.length;i++){
$nav_arr_container_item[i].style.background='#eee';
}
}
/*产品内容、评论、常见问题的导航栏停留*/
var mTop=$('.product-detail-nav').offset().top;
$(window).scroll(function(){
var sTop = $(document).scrollTop();
var result=mTop-sTop;
if (result<=0) {
$('.product-detail-nav').addClass('product-detail-nav-fixed');
} else{
$('.product-detail-nav').removeClass('product-detail-nav-fixed');
}
});
});（4）效果图
扫一扫
57
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
