1 Star 0 Fork 0

jieruis/Smartisan-Shop

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
shop.html 26.60 KB
一键复制 编辑 原始数据 按行查看 历史
jieruis 提交于 2022-06-24 19:56 . 锤子商城
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<link rel="icon" href="./images/favicon.ico">
<title>锤子商城 - 坚果手机、坚果 R2 手机、Smartisan TNT go 扩展本</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/shop.css">
<link rel="stylesheet" href="./css/iconfont.css">
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/shop.js"></script>
</head>
<body>
<div class="ctn">
<!-- 导航条 -->
<nav class="navbar-inverse">
<!-- 锤子logo -->
<div class="logo"><img src="./images/logo.png" alt=""></div>
<!-- 导航选项 -->
<div class="navbar-container">
<ul class="navbar-words">
<li><a href="shop.html">在线商城</a></li>
<li><a href="./r2.html">坚果R2</a></li>
<li><a href="./smartisan.html">Smartisan TNT go</a></li>
<li><a href="./gongzuozhan.html">坚果TNT工作站</a></li>
<li><a href="javascript:void(0);">Smartisan OS</a></li>
<li><a href="javascript:void(0);">欢喜云</a></li>
<li><a href="javascript:void(0);">论坛</a> </li>
<li><a href="javascript:void(0);">开发者支持</a></li>
<li><a href="javascript:void(0);">荣誉与奖项</a></li>
</ul>
</div>
<!-- 登录,购物车 -->
<div class="login"><a href="./login.html"></a></div>
<div class="shopcart">
<a href="./fuqian.html">
<div class="shopcart-empty">
<div>
<img src="./images/shopcart.png" alt="">
<p>购物车为空</p>
<p>您还没有选购任何商品,现在前往商城选购吧!</p>
</div>
</div>
</a>
</div>
</nav>
<!-- title,搜索框 -->
<div class="main-title">
<div class="title-container">
<ul class="title-item">
<li class="pull-down">
<a href="./shop.html">首页</a>
<!-- 下拉选项框 -->
<div>
<div id="pull-downcontainer">
<ul>
<li>手机</li>
<li><img src="./images/shouji01.webp" alt=""><span>手机</span></li>
</ul>
<ul>
<li>官方配件</li>
<li><img src="./images/shouji02.webp" alt=""><span>蓝牙耳机</span></li>
<li><img src="./images/shouji03.webp" alt=""><span>数据线</span></li>
<li><img src="./images/shouji04.webp" alt=""><span>充电器</span></li>
<li><img src="./images/shouji05.webp" alt=""><span>移动电源</span></li>
<li><img src="./images/shouji06.webp" alt=""><span>拍照配件</span></li>
</ul>
</div>
</div>
</li>
<li class="pull-down">
<a href="./categoryr2.html">坚果手机</a>
<!-- 下拉选项框 -->
<div></div>
</li>
<li class="pull-down">
<a href="./categoryr3.html">TNT</a>
<!-- 下拉选项框 -->
<div></div>
</li>
<li class="pull-down">
<a href="./categoryr4.html">官方自营</a>
<!-- 下拉选项框 -->
<div></div>
</li>
<li class="pull-down" id="last-one">
<a href="javascript:void(0);">服务</a>
<!-- 下拉选项框 -->
<div>
<ul class="pull-service">
<li><img src="./images/fuwu01.png" alt=""><span>保修服务</span></li>
<li><img src="./images/fuwu02.png" alt=""><span>在线客服</span></li>
<li><img src="./images/fuwu03.png" alt=""><span>服务政策</span></li>
<li><a href="./tijiaoshouhou.html"><img src="./images/fuwu04.png" alt=""></a><span>发起售后</span></li>
<li><img src="./images/fuwu05.png" alt=""><span>维修门店</span></li>
<li><img src="./images/fuwu06.png" alt=""><span>自助服务</span></li>
</ul>
</div>
</li>
</ul>
<!-- 搜索框 -->
<div class="search-input">
<div><img src="./images/magnifier.png" alt=""></div>
<input type="text">
<a href="./gouwuche.html" class="R2">坚果 R2</a>
<a href="./gouwuche2.html" class="TNT">TNT</a>
</div>
<div class='searchactive'>
<a href="./login.html"><img src="./images/login01.png"></a>
<a href="" class="a-active">
<img src="./images/shopcart01.png">
<div class="active-empty">
<div>
<img src="./images/shopcart.png" alt="">
<p>购物车为空</p>
<p>您还没有选购任何商品,现在前往商城选购吧!</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="display">
<ul>
<li><a href="">坚果 R2</a></li>
<li><a href="">蓝牙耳机</a></li>
<li><a href="">TNT</a></li>
<li><a href="">移动电源</a></li>
<li><a href="">坚果快充</a></li>
<li><a href="">坚果 R2保护套</a></li>
</ul>
</div>
<!-- banner图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./images/fa808c10081b9fd3040bb7bfd12b891c.webp" alt="..." class="center-block">
</div>
<div class="item">
<img src="./images/fa808c10081b9fd3040bb7bfd12b891c.webp" alt="..." class="center-block">
</div>
<div class="item">
<img src="./images/fa808c10081b9fd3040bb7bfd12b891c.webp" alt="..." class="center-block">
</div>
</div>
<!-- Controls -->
<!-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
<!-- 小窗口广告展示 -->
<div class="advertisement">
<div>
<a href="./shop.html"><img src="./images/a01.webp" alt=""></a>
<a href="./shop.html"><img src="./images/a02.webp" alt=""></a>
<a href="./shop.html"><img src="./images/a03.webp" alt=""></a>
<a href="./shop.html"><img src="./images/a04.webp" alt=""></a>
</div>
</div>
<!-- 热门商品 -->
<div class="hot-product">
<div class="hot-title">
<h5>热门商品</h5>
<div><img src="./images/下载.png" alt=""></div>
<div><img src="./images/下载.png" alt="" class="right-arrow"></div>
</div>
<div class="pro-pic">
<div>
<div><a href="./r2shouji.html" target="_blank"><img src="./images/hot01.webp" alt=""></a></div>
<h3>坚果R2</h3>
<h5>是下一代手机,更是下一代电脑</h5>
<span>¥2,699.00</span>
</div>
<div>
<div><a href="./gouwuche.html" target="_blank"><img src="./images/hot02.webp" alt=""></a></div>
<h3>Smartisan TNT 大满足套装</h3>
<h5>是下一代手机,更是下一代电脑</h5>
<span>¥4,999.00</span>
</div>
<div>
<div><a href="./gouwuche.html" target="_blank"><img src="./images/hot03.webp" alt=""></a></div>
<h3>Smartisan 真无线蓝牙耳机(抖音文创限量款)</h3>
<h5>抖音文创限量版</h5>
<span>¥299.00</span>
</div>
<div>
<div><a href="./gouwuche.html" target="_blank"><img src="./images/hot04.webp" alt=""></a></div>
<h3>Smartisan 真无线TWS蓝牙耳机</h3>
<h5>智能配对 开盖即连</h5>
<span>¥99.00</span>
</div>
</div>
</div>
<!-- 坚果R2及配件 -->
<div class="hot-product">
<div class="hot-title">
<h5>坚果R2及配件</h5>
</div>
<div class="accessory">
<a href="./r2peijian.html"><img src="./images/peijian.webp" alt="" class="accessory-pic"></a>
<div>
<div><a href="./r2shouji.html" target="_blank"><img src="./images/peijian01.webp" alt=""></a></div>
<h3>坚果R2</h3>
<h5>是下一代手机,更是下一代电脑</h5>
<span>¥2,699.00</span>
</div>
<div>
<div><a href="./r2shouji.html" target="_blank"><img src="./images/hot01.webp" alt=""></a></div>
<h3>坚果R2</h3>
<h5>是下一代手机,更是下一代电脑</h5>
<span>¥2,699.00</span>
</div>
<div>
<div><a href="./r2shouji.html" target="_blank"><img src="./images/peijian02.webp" alt=""></a></div>
<h3>坚果R2</h3>
<h5>是下一代手机,更是下一代电脑</h5>
<span>¥4,699.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/peijian03.webp" alt=""></a></div>
<h3>坚果 R2 足迹系列保护套</h3>
<h5>7种主题随机发货</h5>
<span>¥59.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/peijian04.webp" alt=""></a></div>
<h3>坚果 R2 足迹系列保护套 3M 开始销售透明胶带</h3>
<h5>为了那些改变人类足迹的进程</h5>
<span>¥59.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/peijian05.webp" alt=""></a></div>
<h3>坚果 R2 足迹系列保护套 圆珠笔的改进者出生</h3>
<h5>为了那些改变人类足迹的进程</h5>
<span>¥59.00</span>
</div>
</div>
</div>
<!-- Smartisan TNT -->
<div class="hot-product">
<div class="hot-title">
<h5>Smartisan TNT</h5>
</div>
<div class="accessory">
<a href="./categoryr4.html"><img src="./images/Smartisan01.webp" alt="" class="accessory-pic"></a>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan02.webp" alt=""></a></div>
<h3>Smartisan TNT 大满足套装</h3>
<h5>下一代手机,下一代电脑</h5>
<span>¥4,999.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan03.webp" alt=""></a></div>
<h3>Smartisan TNT 大满足套装</h3>
<h5>下一代手机,下一代电脑</h5>
<span>¥5,699.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan04.webp" alt=""></a></div>
<h3>Smartisan TNT go</h3>
<h5> 欢迎使用下一代电脑</h5>
<span>¥1,499.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan05.webp" alt=""></a></div>
<h3>Smartisan TNT go</h3>
<h5> 欢迎使用下一代电脑</h5>
<span>¥1,999.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan06.webp" alt=""></a></div>
<h3>Smartisan 智能手写笔</h3>
<h5>尽情挥洒创造力</h5>
<span>¥499.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/Smartisan07.webp" alt=""></a></div>
<h3>Smartisan 手机立式扩展坞</h3>
<h5>连屏幕,连外设,手机拓展一步到位</h5>
<span>¥299.00</span>
</div>
</div>
</div>
<!-- 官方精选配件 -->
<div class="hot-product">
<div class="hot-title">
<h5>官方精选配件</h5>
<div>
<a href="#">官方精选配件</a>
<a href="#">更多推荐</a>
</div>
</div>
<div class="accessory">
<a href="./categoryr4.html"><img src="./images/guanfang01.webp" alt="" class="accessory-pic"></a>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang02.webp" alt=""></a></div>
<h3>Smartisan 真无线蓝牙耳机(抖音文创限量款)</h3>
<h5> 抖音文创限量版</h5>
<span>¥299.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang03.webp" alt=""></a></div>
<h3>Smartisan 手机支架</h3>
<h5>立得住,放的稳</h5>
<span>¥39.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang04.webp" alt=""></a></div>
<h3>坚果彩虹数据线</h3>
<h5>七彩配色随机发货,为生活增添一份小小惊喜</h5>
<span>¥19.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang05.webp" alt=""></a></div>
<h3>Smartisan 颈挂蓝牙耳机</h3>
<h5>“圈铁一体代表作”</h5>
<span>¥199.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang06.webp" alt=""></a></div>
<h3>Smartisan 多功能数据线(USB 3.2 Gen 2)</h3>
<h5>高清投屏,高速传输</h5>
<span>¥79.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/guanfang07.webp" alt=""></a></div>
<h3>Smartisan 真无线蓝牙耳机 Pro</h3>
<h5>通话降噪 全新升级</h5>
<span>¥129.00</span>
</div>
</div>
</div>
<!-- 足迹系列保护套 -->
<div class="hot-product">
<div class="hot-title">
<h5>足迹系列保护套</h5>
</div>
<div class="accessory">
<a href="./categoryr4.html"><img src="./images/zuji01.webp" alt="" class="accessory-pic"></a>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji02.webp" alt=""></a></div>
<h3>Smartisan 真无线蓝牙耳机(抖音文创限量款)</h3>
<h5> 抖音文创限量版</h5>
<span>¥299.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji03.webp" alt=""></a></div>
<h3>Smartisan 手机支架</h3>
<h5>立得住,放的稳</h5>
<span>¥39.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji04.webp" alt=""></a></div>
<h3>坚果彩虹数据线</h3>
<h5>七彩配色随机发货,为生活增添一份小小惊喜</h5>
<span>¥19.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji05.webp" alt=""></a></div>
<h3>Smartisan 颈挂蓝牙耳机</h3>
<h5>“圈铁一体代表作”</h5>
<span>¥199.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji06.webp" alt=""></a></div>
<h3>Smartisan 多功能数据线(USB 3.2 Gen 2)</h3>
<h5>高清投屏,高速传输</h5>
<span>¥79.00</span>
</div>
<div>
<div><a href="./gouwuche2.html" target="_blank"><img src="./images/zuji07.webp" alt=""></a></div>
<h3>Smartisan 真无线蓝牙耳机 Pro</h3>
<h5>通话降噪 全新升级</h5>
<span>¥129.00</span>
</div>
</div>
</div>
<!-- 论坛精选 -->
<div class="forum">
<div class="forum-title">
<h5>论坛精选</h5>
<div><button>前往论坛</button></div>
</div>
<div class="forum-pro">
<div>
<a href="./categoryr4.html"><img src="./images/luntan01.webp" alt=""></a>
<h3>Smartisan OS v8.0.1 更新日志(坚果 R2)</h3>
<p>Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
<p class="read">阅读全文></p>
</div>
<div>
<img src="./images/luntan02.webp" alt="">
<h3>坚果 R2 购买及使用常见问题</h3>
<p>你关心的各种问题~</p>
<p class="read">阅读全文></p>
</div>
<div>
<img src="./images/luntan03.webp" alt="">
<h3>R2体验新鲜出炉,上手两小时体验(持续更新)</h3>
<p>新鲜出炉上手体验</p>
<p class="read">阅读全文></p>
</div>
<div>
<img src="./images/luntan04.webp" alt="">
<h3>Smartisan OS v8.0.1 更新日志(坚果 R2)</h3>
<p>Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
<p class="read">阅读全文></p>
</div>
</div>
</div>
<div class="footer">
<div>
<div class="footer-menu">
<ul>
<li>
<h3>订单服务<h3>
<div>
<a href="">购买指南</a>
<a href="">送货政策</a>
</div>
</li>
<li>
<h3>服务支持<h3>
<div>
<a href="">自主服务</a>
<a href="">维修门店</a>
</div>
</li>
<li>
<h3>媒体中心<h3>
<div>
<a href="">新闻动态</a>
<a href="">官方视频</a>
<a href="">图片资源</a>
</div>
</li>
<li>
<h3>关注我们<h3>
<div>
<a href="">新浪微博</a>
<a href="">官方微信</a>
<a href="">荣誉奖项</a>
</div>
</li>
</ul>
<div class="footer-service">
<a href="#" class="iconfont icon-wenhaofill"></a>
<span>在线帮助</span>
</div>
</div>
<div class="footer-info">
<ul>
<li>Copyright © 2020 smartisan.com 版权所有</li>
<li><a href="">锤子商城隐私政策</a></li>
<li><a href="">锤子商城用户协议</a></li>
<li><a href="">资质证照</a></li>
</ul>
<ul>
<li><a href="">京 ICP 备 19048576 号 - 1</a></li>
<li><a href="">京公网安备 11010802033469号</a></li>
<li><a href="">京食药网食备 202010031</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
//获取导航条
var guid = document.querySelectorAll(".pull-down");
for (let i = 0; i < guid.length; i++) {
guid[i].onmouseenter = function () {
this.querySelector("div").style.display = "block";
}
guid[i].onmouseleave = function () {
this.querySelector("div").style.display = "none";
}
}
//获取导航条搜索框
var navbar = document.querySelector(".search-input");
var searchactive = document.querySelector(".searchactive")
//获取滚动条位置
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (document.body) {
scrollPos = document.body.scrollTop;
}
return scrollPos;
}
//滚动条滑下 导航条样式改变
window.onscroll = function () {
let scrollPos = getScrollTop();
if (scrollPos > 45) {
navbar.style.display="none"
// navbar.innerHTML="";
// navbar.style.border="none"
// navbar.innerHTML="<div class='searchactive'><img src='./images/login01.png'></div>"+"<div class='searchactive'><img src='./images/shopcart01.png'></div>"
searchactive.style.display="flex"
}else{
navbar.style.display="flex"
searchactive.style.display="none"
}
}
//获取购物车
var shopcart = document.querySelector(".shopcart>a");
var shopcartone = document.querySelector(".shopcart-empty>div")
shopcart.onmouseenter=function(){
shopcartone.style.display="block"
}
shopcart.onmouseleave=function(){
shopcartone.style.display="none"
}
var active = document.querySelector(".a-active");
var activediv = document.querySelector(".active-empty>div")
active.onmouseenter=function(){
activediv.style.display="block"
}
active.onmouseleave=function(){
activediv.style.display="none"
}
// 获取搜索框
var search = document.querySelectorAll(".search-input>a");
var searchdiv = document.querySelector(".search-input");
var searchinput=document.querySelector(".search-input>input");
var searchul = document.querySelector("#display")
searchinput.onfocus=function(){
search[0].style.visibility="hidden"
search[1].style.visibility="hidden"
searchinput.placeholder="请输入搜索的商品"
searchul.style.display="block"
}
searchinput.onblur=function(){
search[0].style.visibility="visible"
search[1].style.visibility="visible"
searchinput.placeholder=""
searchul.style.display="none"
}
$('.carousel').carousel({
interval: 1500
})
</script>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/jieruis/Smartisan-Shop.git
git@gitee.com:jieruis/Smartisan-Shop.git
jieruis
Smartisan-Shop
Smartisan-Shop
master

搜索帮助