6.谷粒商城-商品详情页前端代码

最新推荐文章于 2022-06-23 09:41:38 发布
最新推荐文章于 2022-06-23 09:41:38 发布
阅读量5.6k 收藏 8
点赞数 2
分类专栏： 谷粒商城高级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40788998/article/details/106366849
版权 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/item/css/shop.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/css/jd.css"/>
		<link rel="stylesheet" href="/static/item/css/header.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		<div id="max">
		<header>
			<!--品牌官方网站-->
					<div class="min">
						<ul class="header_ul_left">
							<li class="glyphicon glyphicon-home"> <a href="/static/item/shouye.html" class="aa">京东首页</a></li>
							<li class="glyphicon glyphicon-map-marker"> <a href="/static/item/javascript:;">北京</a>
								<ol id="beijing">
									<li style="background: red;"><a href="/static/item/javascript:;" style="color: white;">北京</a></li>
									<li><a href="/static/item/javascript:;">上海</a></li>
									<li><a href="/static/item/javascript:;">天津</a></li>
									<li><a href="/static/item/javascript:;">重庆</a></li>
									<li><a href="/static/item/javascript:;">河北</a></li>
									<li><a href="/static/item/javascript:;">山西</a></li>
									<li><a href="/static/item/javascript:;">河南</a></li>
									<li><a href="/static/item/javascript:;">辽宁</a></li>
									<li><a href="/static/item/javascript:;">吉林</a></li>
									<li><a href="/static/item/javascript:;">黑龙江</a></li>
									<li><a href="/static/item/javascript:;">内蒙古</a></li>
									<li><a href="/static/item/javascript:;">江苏</a></li>
									<li><a href="/static/item/javascript:;">山东</a></li>
									<li><a href="/static/item/javascript:;">安徽</a></li>
									<li><a href="/static/item/javascript:;">浙江</a></li>
									<li><a href="/static/item/javascript:;">福建</a></li>
									<li><a href="/static/item/javascript:;">湖北</a></li>
									<li><a href="/static/item/javascript:;">湖南</a></li>
									<li><a href="/static/item/javascript:;">广东</a></li>
									<li><a href="/static/item/javascript:;">广西</a></li>
									<li><a href="/static/item/javascript:;">江西</a></li>
									<li><a href="/static/item/javascript:;">四川</a></li>
									<li><a href="/static/item/javascript:;">海南</a></li>
									<li><a href="/static/item/javascript:;">贵州</a></li>
									<li><a href="/static/item/javascript:;">云南</a></li>
									<li><a href="/static/item/javascript:;">西藏</a></li>
									<li><a href="/static/item/javascript:;">陕西</a></li>
									<li><a href="/static/item/javascript:;">甘肃</a></li>
									<li><a href="/static/item/javascript:;">青海</a></li>
									<li><a href="/static/item/javascript:;">宁夏</a></li>
									<li><a href="/static/item/javascript:;">新疆</a></li>
									<li><a href="/static/item/javascript:;">港澳</a></li>
									<li><a href="/static/item/javascript:;">台湾</a></li>
									<li><a href="/static/item/javascript:;">钓鱼岛</a></li>
									<li><a href="/static/item/javascript:;">海外</a></li>
								</ol>
							</li>
						</ul>
						<ul class="header_ul_right">
							<li style="border: 0;"><a href="/static/item/../登录页面\index.html" class="aa">你好，请登录</a></li>
							<li><a href="/static/item/../注册页面\index.html" style="color: red;">免费注册</a> |</li>
							<li><a href="/static/item/javascript:;" class="aa">我的订单</a> |</li>
							<li class="jingdong"><a href="/static/item/javascript:;">我的京东</a><span class="glyphicon glyphicon-menu-down">|</span>
								<ol class="jingdong_ol">
									<li><a href="/static/item/javascript:;">待处理订单</a></li>
									<li><a href="/static/item/javascript:;">消息</a></li>
									<li><a href="/static/item/javascript:;">返修退换货</a></li>
									<li><a href="/static/item/javascript:;">我的回答</a></li>
									<li><a href="/static/item/javascript:;">降价商品</a></li>
									<li><a href="/static/item/javascript:;">我的关注</a></li>
									<li style="width: 100%;height: 1px;background: lavender;margin-top: 15px;"></li>
									<li style="margin-top: 0;"><a href="/static/item/javascript:;">我的京豆</a></li>
									<li style="margin-top: 0;"><a href="/static/item/javascript:;">我的优惠券</a></li>
									<li style="margin-bottom: 10px;"><a href="/static/item/javascript:;">我的白条</a></li>

								</ol>
							</li>

							<li><a href="/static/item/javascript:;" class="aa">京东会员</a> |</li>
							<li><a href="/static/item/javascript:;" class="aa">企业采购</a> |</li>
							<li class="fuwu"><a href="/static/item/javascript:;">客户服务</a><span class="glyphicon glyphicon-menu-down"></span> |
								<ol class="fuwu_ol">
									<h6>客户</h6>
									<li><a href="/static/item/javascript:;">帮助中心</a></li>
									<li><a href="/static/item/javascript:;">售后服务</a></li>
									<li><a href="/static/item/javascript:;">在线客服</a></li>
									<li><a href="/static/item/javascript:;">意见建议</a></li>
									<li><a href="/static/item/javascript:;">电话客服</a></li>
									<li><a href="/static/item/javascript:;">客服邮箱</a></li>
									<li style="margin-bottom: -5px;"><a href="/static/item/javascript:;">金融咨询</a></li>
									<li style="margin-bottom: -5px;"><a href="/static/item/javascript:;">售全球客服</a></li>
									<h6 style="border-top: 1px dashed darkgray;height: 30px;line-height: 30px;">商户</h6>
									<li style="margin-top: -5px;"><a href="/static/item/javascript:;">合作招商</a></li>
									<li style="margin-top: -5px;"><a href="/static/item/javascript:;">学习中心</a></li>
									<li><a href="/static/item/javascript:;">商家后台</a></li>
									<li><a href="/static/item/javascript:;">京麦工作台</a></li>
									<li><a href="/static/item/javascript:;">商家帮助</a></li>
									<li><a href="/static/item/javascript:;">规则平台</a></li>
								</ol>
							</li>
							<li class="daohang"><a href="/static/item/javascript:;">网站导航</a><span class="glyphicon glyphicon-menu-down"></span> |
								<ol class="daohang_ol">
									<li style="width: 34%;">
										<h5>特色主题</h5>
										<p>
											<a href="/static/item/javascript:;">京东试用</a>
											<a href="/static/item/javascript:;">京东金融</a>
											<a href="/static/item/javascript:;">全球售</a>
											<a href="/static/item/javascript:;">国际站</a>
										</p>
										<p>
											<a href="/static/item/javascript:;">京东会员</a>
											<a href="/static/item/javascript:;">京东预售</a>
											<a href="/static/item/javascript:;">买什么</a>
											<a href="/static/item/javascript:;">俄语站</a>
										</p>
										<p>
											<a href="/static/item/javascript:;">装机大师</a>
											<a href="/static/item/javascript:;">0元评测</a>
											<a href="/static/item/javascript:;">定期送</a>
											<a href="/static/item/javascript:;">港澳售</a>
										</p>
										<p>
											<a href="/static/item/javascript:;">优惠券</a>
											<a href="/static/item/javascript:;">秒杀</a>
											<a href="/static/item/javascript:;">闪购</a>
											<a href="/static/item/javascript:;">印尼站</a>
										</p>
										<p>
											<a href="/static/item/javascript:;">京东金融科技</a>
											<a href="/static/item/javascript:;">In货推荐</a>
											<a href="/static/item/javascript:;">陪伴计划</a>
											<a href="/static/item/javascript:;">出海招商</a>
										</p>
									</li>
									<li>
										<h5>行业频道</h5>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">手机</a>
											<a href="/static/item/javascript:;" class="aa_2">智能数码</a>
											<a href="/static/item/javascript:;" class="aa_2">玩3C</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">电脑办公</a>
											<a href="/static/item/javascript:;" class="aa_2">家用电器</a>
											<a href="/static/item/javascript:;" class="aa_2">京东智能</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">服装城</a>
											<a href="/static/item/javascript:;" class="aa_2">美妆馆</a>
											<a href="/static/item/javascript:;" class="aa_2">家装城</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">母婴</a>
											<a href="/static/item/javascript:;" class="aa_2">食品</a>
											<a href="/static/item/javascript:;" class="aa_2">运动户外</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">农资频道</a>
											<a href="/static/item/javascript:;" class="aa_2">整车</a>
											<a href="/static/item/javascript:;" class="aa_2">图书</a>
										</p>
									</li>
									<li>
										<h5>生活服务</h5>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">京东众筹</a>
											<a href="/static/item/javascript:;" class="aa_2">白条</a>
											<a href="/static/item/javascript:;" class="aa_2">京东金融APP</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">京东小金库</a>
											<a href="/static/item/javascript:;" class="aa_2">理财</a>
											<a href="/static/item/javascript:;" class="aa_2">智能家电</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">话费</a>
											<a href="/static/item/javascript:;" class="aa_2">水电煤</a>
											<a href="/static/item/javascript:;" class="aa_2">彩票</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">旅行</a>
											<a href="/static/item/javascript:;" class="aa_2">机票酒店</a>
											<a href="/static/item/javascript:;" class="aa_2">电影票</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">京东到家</a>
											<a href="/static/item/javascript:;" class="aa_2">京东众测</a>
											<a href="/static/item/javascript:;" class="aa_2">游戏</a>
										</p>
									</li>
									<li style="border: 0;">
										<h5>更多精选</h5>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">合作招商</a>
											<a href="/static/item/javascript:;" class="aa_2">京东通信</a>
											<a href="/static/item/javascript:;" class="aa_2">京东E卡</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">企业采购</a>
											<a href="/static/item/javascript:;" class="aa_2">服务市场</a>
											<a href="/static/item/javascript:;" class="aa_2">办公生活馆</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">乡村招募</a>
											<a href="/static/item/javascript:;" class="aa_2">校园加盟</a>
											<a href="/static/item/javascript:;" class="aa_2">京友邦</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">京东社区</a>
											<a href="/static/item/javascript:;" class="aa_2">智能社区</a>
											<a href="/static/item/javascript:;" class="aa_2">游戏社区</a>
										</p>
										<p>
											<a href="/static/item/javascript:;" class="aa_2">知识产权维权</a>
											<a href="/static/item/javascript:;" class="aa_2"></a>
											<a href="/static/item/javascript:;" class="aa_2"></a>
										</p>
									</li>
								</ol>
							</li>
							<li class="sjjd" style="border: 0;"><a href="/static/item/javascript:;" class="aa">手机京东</a>
								<div class="er">
									<div class="er_1">
										<div class="er_1_1">
											<h6><a href="/static/item/#">手机京东</a></h6>
											<p>新人专享大礼包</p>

										</div>
									</div>
									<div class="er_1">
										<div class="er_1_1">
											<h6><a href="/static/item/#">关注京东微信</a></h6>
											<p>微信扫一扫关注新粉最高180元惊喜礼包</p>
										</div>
									</div>
									<!--我的理财-->
									<div class="er_1" style="border: 0;">
										<img src="/static/item/img/5874a555Ne8192324.jpg"/>
										<div class="er_1_1">
											<h6><a href="/static/item/#">京东金融客户端</a></h6>
											<p>新人专享大礼包</p>
											<div><a href="/static/item/#"><img src="/static/item/img/11.png"/></a><a href="/static/item/#"><img src="/static/item/img/22.png"/></a></div>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</header>
				<nav>
				<div class="nav_min">
					<div class="nav_top">
						<div class="nav_top_one"><a href="/static/item/#"><img src="/static/item/img/111.png"/></a></div>
						<div class="nav_top_two"><input type="text"/><button>搜索</button></div>
						<div class="nav_top_three"><a href="/static/item/../JD_Shop/One_JDshop.html">我的购物车</a><span class="glyphicon glyphicon-shopping-cart"></span>
							<div class="nav_top_three_1">
								<img src="/static/item/img/44.png"/>购物车还没有商品，赶紧选购吧！
							</div>
						</div>
					</div>
					<div class="nav_down">
						<ul class="nav_down_ul">
							<li class="nav_down_ul_1" style="width: 24%;float: left;"><a href="/static/item/javascript:;">全部商品分类</a>

							</li>
							<li class="ul_li"><a href="/static/item/javascript:;">服装城</a></li>
							<li class="ul_li"><a href="/static/item/javascript:;">美妆馆</a></li>
							<li class="ul_li"><a href="/static/item/javascript:;">超市</a></li>
							<li class="ul_li" style="border-right: 1px solid lavender;"><a href="/static/item/javascript:;">生鲜</a></li>
							<li class="ul_li"><a href="/static/item/javascript:;">全球购</a></li>
							<li class="ul_li"><a href="/static/item/javascript:;">闪购</a></li>
							<li class="ul_li" style="border-right: 1px solid lavender;"><a href="/static/item/javascript:;">拍卖</a></li>
							<li class="ul_li"><a href="/static/item/javascript:;">金融</a></li>
						</ul>
					</div>
				</div>
			</nav>

				</div>


			<div class="crumb-wrap">
			<div class="w">
				<div class="crumb">
					<div class="crumb-item">
						<a href="">手机</a>
					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
						<a href="">手机通讯</a>
					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
						<a href="">手机</a>
					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
						<div class="crumb-item-one">
							华为 (HUAWEI)
							<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
							<div class="crumb-item-two ">
								<div class="crumb-item-con clear">
									<ul class="con-ul">
										<li>
											<img src="/static/item/img/5825a5a6Nde8ecb75.jpg" alt="" />
										</li>
										<li>
											<p>
												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
											</p>
											<p>
												￥1099.00
											</p>
										</li>
									</ul>
									<ul class="con-ul">
										<li>
											<img src="/static/item/img/5919637aN271a1301.jpg" alt="" />
										</li>
										<li>
											<p>
												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
											</p>
											<p>
												￥1099.00
											</p>
										</li>
									</ul>
									<ul class="con-ul">
										<li>
											<img src="/static/item/img/599a806bN9d829c1c.jpg" alt="" />
										</li>
										<li>
											<p>
												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
											</p>
											<p>
												￥1099.00
											</p>
										</li>
									</ul>
								</div>
								<div class="crumb-item-cons clear">
									<ul>
										<li>华为(huawei)</li>
										<li>小米(xiaomi)</li>
										<li>APPle</li>
										<li>魅族(meizu)</li>
										<li>锤子</li>

									</ul>
									<ul>
										<li>三星</li>
										<li>vivo</li>
										<li>飞利浦</li>
										<li>360</li>
										<li>更多>></li>

									</ul>
								</div>
							</div>

						</div>

					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
						华为Mate 10
					</div>
				</div>

				<div class="contact">
					<ul class="contact-ul">
						<li>
							<a href="/static/item/#">
								华为京东自营官方旗舰店
							</a>

							<span class="contact-sp">
								<span class="contact-sp1">
								JD
							</span>
							<span class="contact-sp2">
								自营
							    </span>
							</span>
						</li>
						<li>
							<a href="/static/item/#">
								<img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" /> 联系供应商
							</a>
						</li>
						<li>
							<a href="/static/item/#">
								<img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" /> JIMI
							</a>
						</li>
						<li>
							<a href="/static/item/#">
								<img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" /> 关注店铺
							</a>
						</li>
					</ul>
					<div class="contact-one">
						<ul>
							<li>客服</li>
							<li><img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" />留言</li>
							<li><img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" />JIMI智能</li>
							<li>
								<img src="/static/item/img/1466134037230.jpg" class="contact-img" />
								<p>手机下单</p>
							</li>

						</ul>
						<div class="contact-two">
							<span><img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" />进店逛逛</span>
							<span><img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" />关注店铺</span>
						</div>
					</div>
				</div>

			</div>
		</div>
<div class="Shop">
		<div class="box">
			<div class="box-one ">
				<div class="boxx">

					<div class="imgbox">
						<div class="probox">
							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
							<div class="hoverbox"></div>
						</div>
						<div class="showbox">
							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
						</div>
					</div>

					<div class="box-lh">

						<div class="box-lh-one">
							<ul>
								<li th:each="image:${item.images}" th:if="${!#strings.isEmpty(image.imgUrl)}"><img th:src="${image.imgUrl}" /></li>
							</ul>
						</div>
						<div id="left">
							< </div>
								<div id="right">
									>
								</div>

						</div>

						<div class="boxx-one">
							<ul>
								<li>
									<span>
										<img src="/static/item/img/b769782fe4ecca40913ad375a71cb92d.png" alt="" />关注
									</span>
									<span>
										<img src="/static/item/img/9224fcea62bfff479a6712ba3a6b47cc.png" alt="" />
										对比
									</span>
								</li>
								<li>

								</li>
							</ul>
						</div>

					</div>
					<div class="box-two">
						<div class="box-name" th:text="${item.info.skuTitle}">
							华为 HUAWEI Mate 10 6GB+128GB 亮黑色 移动联通电信4G手机 双卡双待
						</div>
						<div class="box-hide" th:text="${item.info.skuSubtitle}">预订用户预计11月30日左右陆续发货！麒麟970芯片！AI智能拍照！
							<a href=""><u>华为 HUAWEI Mate 10 Pro 10:08 限时限量抢！</u></a>
						</div>
						<div class="box-yuyue">
							<div class="yuyue-one">
								<img src="/static/item/img/7270ffc3baecdd448958f9f5e69cf60f.png" alt="" /> 预约抢购
							</div>
							<div class="yuyue-two">
								<ul>
									<li>
										<img src="/static/item/img/f64963b63d6e5849977ddd6afddc1db5.png" />
										<span>190103</span> 人预约
									</li>
									<li>
										<img src="/static/item/img/36860afb69afa241beeb33ae86678093.png" /> 预约剩余
										<span id="timer">

									</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="box-summary clear">
							<ul>
								<li>京东价</li>
								<li>
									<span>￥</span>
									<span th:text="${#numbers.formatDecimal(item.info.price,3,2)}">4499.00</span>
								</li>
								<li>
									预约享资格
								</li>
								<li>
									<a href="">
										预约说明
									</a>
								</li>
							</ul>
						</div>
						<div class="box-wrap clear">
							<div class="box-wrap-one clear">
								<ul>
									<li>增值业务</li>
									<li><img src="/static/item/img/90a6fa41d0d46b4fb0ff6907ca17c478.png" /></li>
									<li><img src="/static/item/img/2e19336b961586468ef36dc9f7199d4f.png" /></li>
									<li><img src="/static/item/img/1f80c3d6fabfd3418e54b005312c00b5.png" /></li>
								</ul>
							</div>
						</div>

						<div class="box-stock">
							<ul class="box-ul">
								<li>配送至</li>
								<li class="box-stock-li">
									<div class="box-stock-one">
										北京朝阳区管庄
										<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
									</div>
									<div class="box-stock-two">
										<dl>
											<dt>
												<a>选择新地址</a>
												<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="box-stock-two-img"/>
											</dt>
											<dd>
												<div class="box-stock-dd">
													<div class="box-stock-top">
														<div class="box-stock-div">北京</div>
														<div class="box-stock-div">朝阳区</div>
														<div class="box-stock-div">管庄</div>
													</div>
													<div class="box-stock-fot">
														<div class="box-stock-con" style="display: block;">
															<ul>
																<li>北京</li>
																<li>上海</li>
																<li>天津</li>
																<li>重庆</li>
															</ul>
														</div>
														<div class="box-stock-con">
															<ul>
																<li>朝阳区</li>
																<li>海淀区</li>
																<li>东城区</li>
																<li>西城区</li>
															</ul>
														</div>
														<div class="box-stock-con">
															<ul>
																<li>4环到5环之内</li>
																<li>管庄</li>
																<li>北苑</li>
															</ul>
														</div>

													</div>
												</div>
											</dd>
										</dl>

									</div>

								</li>
								<li>
									<span th:text="${item.hasStock?'有货':'无货'}">无货</span>， 此商品暂时售完
								</li>
							</ul>
						</div>
						<div class="box-supply">
							<ul class="box-ul">
								<li></li>
								<li>
									由<span>京东</span> 发货，并提供售后服务
								</li>
							</ul>
						</div>
						<div class="box-attr-3">
							<div class="box-attr clear" th:each="attr:${item.saleAttr}">
								<dl>
									<dt>选择[[${attr.attrName}]]</dt>
									<dd th:each="vals:${attr.attrValues}">
										<a class="sku_attr_value"
										   th:attr="skus = ${vals.skuIds},class=${#strings.contains(#strings.listSplit(vals.skuIds,','),item.info.skuId)?'sku_attr_value checked':'sku_attr_value'}"
											<img th:src="${item.info.skuDefaultImg}" /> [[${vals.attrValue}]]
										</a>
									</dd>
								</dl>
							</div>
						</div>

						<div class="box-btns clear">
							<div class="box-btns-one">
								<input type="text" name="" id="" value="1" />
								<div class="box-btns-one1">

									<div>
										<button id="jia">
									+
									</button>
									</div>
									<div>
										<button id="jian">
										-
									</button>
									</div>

								</div>
							</div>
							<div class="box-btns-two">
								<a href="/static/item/../商品分类\index.html">
									立即预约
								</a>
							</div>
							<div class="box-btns-three">
								<img src="/static/item/img/e4ed3606843f664591ff1f68f7fda12d.png" alt="" /> 分享
							</div>
						</div>

						<div class="box-footer-zo">
							<div class="box-footer clear">
								<dl>
									<dt>本地活动</dt>
									<dd>
										<a href="">
											·1元500MB激活到账30元 >>
										</a>
									</dd>
								</dl>
							</div>

							<div class="box-footer">
								<dl>
									<dt>温馨提示</dt>
									<dd>·本商品不能使用 东券 京券</dd>
									<dd>·请完成预约后及时抢购！</dd>
								</dl>
							</div>
						</div>
					</div>

				</div>
			</div>
			<!--欲约抢购流程-->
			<div class="qianggoulioucheng">
				<div class="lioucheng">
					<h3>欲约抢购流程</h3>
				</div>
				<!--抢购步骤-->
				<ul class="qianggoubuzhao">
					<li>
						<img src="/static/item/img/shop_03.png" />
						<dl class="buzhou">
							<dt>1.等待预约</dt>
							<dl>预约即将开始</dl>
						</dl>
					</li>
					<li>
						<img src="/static/item/img/shop_04.png" />
						<dl class="buzhou">
							<dt>2.预约中</dt>
							<dl>2017-11-15 10:35 2017-11-15 23:59</dl>
						</dl>
					</li>
					<li>
						<img src="/static/item/img/shop_05.png" />
						<dl class="buzhou">
							<dt>3.等待抢购</dt>
							<dl>抢购即将开始</dl>
						</dl>
					</li>
					<li>
						<img src="/static/item/img/shop_06.png" />
						<dl class="buzhou">
							<dt>4.抢购中</dt>
							<dl></dl>
						</dl>
					</li>
				</ul>
			</div>

			<div class="ShopXiangqing">
				<div class="allLeft">
					<!--火热预约-->
					<div class="huoreyuyue">
						<h3>火热预约</h3>
					</div>
					<div class="dangeshopxingqing">
						<ul class="shopdange">
							<li>
								<a href="/static/item/##"><img src="/static/item/img/5a0afeddNb34732af.jpg" /></a>
								<p>
									<a href="/static/item/##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
								</p>
								<p><strong class="J-p-20015341974">￥3699.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/5a12873eN41754123.jpg" /></a>
								<p>
									<a target="_blank" title="詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）" href="/static/item///item.jd.com/20348283521.html">詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）</a>
								</p>
								<p><strong class="J-p-20348283521">￥13999.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/59ec0131Nf239df75.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60" href="/static/item///item.jd.com/16683419775.html">斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60</a>
								</p>
								<p><strong class="J-p-16683419775">￥1599.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/59015444N27317512.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/static/item///item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
								</p>
								<p><strong class="J-p-12187770381">￥2599.00</strong></p>
							</li>
						</ul>
					</div>
					<!--看了又看-->
					<div class="huoreyuyue">
						<h3>看了又看</h3>
					</div>
					<div class="dangeshopxingqing">
						<ul class="shopdange">
							<li>
								<a href="/static/item/##"><img src="/static/item/img/59e55e01N369f98f2.jpg" /></a>
								<p>
									<a target="_blank" title="华为（HUAWEI） 华为 Mate10 4G手机  双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)" href="/static/item///item.jd.com/17931625443.html">华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)</a>
									<p><strong class="J-p-17931625443">￥4766.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/584fcc3eNdb0ab94c.jpg" /></a>
								<p>
									<a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待" href="/static/item///item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待</a>
								</p>
								<p><strong class="J-p-3749093">￥4899.00</strong></p>
							</li>
							<li>
								<!--shopjieshao-->
								<a href="/static/item/##"><img src="/static/item/img/59eb0df9Nd66d7585.jpg" /></a>
								<p>
									<a target="_blank" title="华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版" href="/static/item///item.jd.com/12306211773.html">华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版</a>
								</p>
								<p><strong class="J-p-12306211773">￥4088.00</strong></p>
							</li>
							<li>
								<a href="/static/item/##"><img src="/static/item/img/5a002ba3N126c2f73.jpg" /></a>
								<p>
									<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金" href="/static/item///item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
								</p>
								<p><strong class="J-p-12187770381">￥2599.00</strong></p>
							</li>
						</ul>
						<img src="/static/item/img/5a084a1aNa1aa0a71.jpg" />
					</div>
				</div>
				<!--商品介绍-->
				<div class="allquanbushop">
					<ul class="shopjieshao">
						<li class="jieshoa" style="background: #e4393c;">
							<a  style="color: white;">商品介绍</a>
						</li>
						<li class="baozhuang">
							<a >规格与包装</a>
						</li>
						<li class="baozhang">
							<a >售后保障</a>
						</li>
						<li class="pingjia">
							<a >商品评价(4万+)</a>
						</li>
						<li class="shuoming">
							<a >预约说明</a>
						</li>

					</ul>
					<button class="Lijiyuyuessss">
							立即预约
						</button>
					<ul class="shopjieshaos posi" style="display: none;">
						<li class="jieshoa" style="background: #e4393c;">
							<a  style="color: white;">商品介绍</a>
						</li>
						<li class="baozhuang">
							<a >规格与包装</a>
						</li>
						<li class="baozhang">
							<a>售后保障</a>
						</li>
						<li class="pingjia">
							<a >商品评价(4万+)</a>
						</li>
						<li class="shuoming">
							<a >预约说明</a>
						</li>
					</ul>

					<!--商品详情-->
					<div class="huawei">
						<ul class="xuanxiangka">
							<li class="jieshoa actives" id="li1">
								<div class="shanpinsssss">
									<!--<p>-->
										<!--<a href="/static/item/#">品牌:华为（HUAWEI）</a>-->
									<!--</p>-->
									<!--<table>-->
										<!--<tr>-->
											<!--<td>-->
												<!--<a href="/static/item/##">商品名称：华为Mate 10</a>-->
											<!--</td>-->
											<!--<td>-->
												<!--<a href="/static/item/##">商品毛重：0.58kg</a>-->
											<!--</td>-->
											<!--<td>-->
												<!--<a href="/static/item/##">商品编号：5544038</a>-->
											<!--</td>-->
											<!--<td>-->
												<!--<a href="/static/item/##">商品产地：中国大陆</a>-->
											<!--</td>-->
										<!--</tr>-->
										<!--<tr>-->
											<!--<td>-->
												<!--<a href="/static/item/##">系统：安卓（Android）</a>-->
											<!--</td>-->
											<!--<td>-->
												<!--<a href="/static/item/##">前置摄像头像素：800万-1599万</a>-->
											<!--</td>-->
											<!--<td>-->
												<!--<a href="/static/item/##">后置摄像头像素：2000万及以上，1200万-1999万</a>-->
											<!--</td>-->
											<!--<td>-->
												<!--<a href="/static/item/##">机身内存：128GB</a>-->
											<!--</td>-->
										<!--</tr>-->
										<!--<tr>-->
											<!--<td colspan="4">-->
												<!--<a href="/static/item/##">全面屏，双卡双待，指纹识别，Type-C，VoLTE，2K屏，拍照神器，支持NFC，商务手机，安全手机，分辨率10</a>-->
											<!--</td>-->
										<!--</tr>-->
									<!--</table>-->
									<img class="xiaoguo" th:src="${desc}" th:each="desc:${#strings.listSplit(item.desc.decript,',')}"/>
								</div>
							</li>
							<li class="baozhuang actives" id="li2">
								<div class="guiGebox" >
									<div class="guiGe" th:each="group:${item.groupAttrs}">
										<h3 th:text="${group.groupName}">主体</h3>
										<dl>
											<div th:each="attr:${group.attrs}">
												<dt th:text="${attr.attrName}">品牌</dt>
												<dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
											</div>
										</dl>
									</div>
									<div class="package-list">
										<h3>包装清单</h3>
										<p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X 1</p>
									</div>
								</div>
							</li>
							<!--包装-->
							<li class="baozhang actives" id="li3">
								<div class="oBox">
		<div class="shuoHou">
			<div class="baoZhang">
				<h2>售后保障</h2>
			</div>
		</div>
		<!--厂家服务-->
		<div class="changJia">
			<div class="lianBao">
				<span class="oImg">
					<img src="/static/item/img/2017.jpg" alt="" />
					<h3>厂家服务</h3>
				</span>
				<div class="wenZi">
					本产品全国联保，享受三包服务，质保期为：一年保<br />
					如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在保质期内享受免费保修等安保服务！<br />
					(注：如厂家在商品介绍中有售后保障的说明，则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a href="/static/item/#">请点击这儿查询...</a><br /><br />
				</div>
			</div>
			<div class="lianBao oCn">
				<span class="oImg">
					<img src="/static/item/img/2017.jpg" alt="" />
					<h3>京东承诺</h3>
				</span>
				<div class="wenZi">
					本产品全国联保，享受三包服务，质保期为：一年保<br />
					如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在保质期内享受免费保修等安保服务！<br />
					(注：如厂家在商品介绍中有售后保障的说明，则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a href="/static/item/#">请点击这儿查询...</a><br /><br /><br />
				</div>
			</div>

			<div class="lianBao ">
				<span class="oImg">
					<img src="/static/item/img/2017.jpg" alt="" />
					<h3>正品行货</h3>
				</span>
				<div class="wenZi hangHuo">
					京东商城向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。
				</div>
			</div>
			<div class="lianBao quanGuo">
				<span class="oImg">
					<img src="/static/item/img/2017-1.jpg" alt="" />
					<h3>全国联保</h3>
				</span>
				<div class="wenZi">
					凭质保证书及京东商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由京东联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。京东商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！ <br />

注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
				</div>
			</div>
				<!--权利声明-->
			<div class="quanLi">
				<h4>权利声明:</h4>
				<div class="jingDong">
					京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。<br />
	<span class="oZhu">注</span>：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。
				</div>
			</div>
			<div class="quanLi jiaGe">
				<h4>价格说明:</h4>
				<div class="jingDong">
					<span class="oZhu">京东价</span>：京东价为商品的销售价，是您最终决定是否购买商品的依据。<br />
					<span class="oZhu">划线价</span>：商品展示的划横线价格为参考价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。<br />
					<span class="oZhu">折扣</span>：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。<br />
					<span class="oZhu">异常问题</span>：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
				</div>
			</div>
		</div>


	</div>
							</li>
							<!--评价-->
							<li class="PINgjia actives" id="li4">
								<div class="h3">
									<h3>商品评价</h3>
								</div>
								<div class="nav">
									<div class="left">
										<p class="haoping">好评度</p>
										<p><span>100%</span></p>
									</div>
									<div class="right">
										<ul>
											<li>
												<a href="/static/item/##">就是快（424）</a>
											</li>
											<li>
												<a href="/static/item/##">物流很快（254） </a>
											</li>
											<li>
												<a href="/static/item/##">货真价实（168）</a>
											</li>
											<li>
												<a href="/static/item/##">有档次（158）</a>
											</li>
											<li>
												<a href="/static/item/##">国产品牌（133）</a>
											</li>
											<li>
												<a href="/static/item/##">外形美观（103）</a>
											</li>
											<li>
												<a href="/static/item/##">很给力（75）</a>
											</li>
											<li>
												<a href="/static/item/##">反应灵敏（68）</a>
											</li>
											<li>
												<a href="/static/item/##">性价比高（60）</a>
											</li>
											<li>
												<a href="/static/item/##">价格优惠（50）</a>
											</li>
											<li>
												<a href="/static/item/##">功能齐全（49）</a>
											</li>
											<li style="background: gainsboro;">
												<a href="/static/item/##">速度太慢（5）</a>
										</ul>
									</div>
								</div>
								<!--全部评价-->
								<div class="allpingjia">
									<ul>
										<li><a href="/static/item/##">全部评价（4.2万）</a></li>
										<li><a href="/static/item/##">晒图（500）</a></li>
										<li><a href="/static/item/##">追拼（200+）</a></li>
										<li><a href="/static/item/##">好评（4.1万）</a></li>
										<li><a href="/static/item/##">中评（100+）</a></li>
										<li><a href="/static/item/##">差评（100+）</a></li>
										<li><a href="/static/item/##"><input type="checkbox"/>只看当前商品价格</a></li>
										<li class="imga" style="float: right;"><a href="/static/item/##">推荐排序 <img src="/static/item/img/animaite.png"/> </a>
										</li>
									</ul>
								</div>
								</li>
								<li class="shuoming actives" id="li5"></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="headera">
			<div class="Logo-tu">
				<span><img src="/static/item/img/service_items_1.png"/></span>
				<span><img src="/static/item/img/service_items_2.png"/></span>
				<span><img src="/static/item/img/service_items_3.png"/></span>
				<span><img src="/static/item/img/service_items_4.png"/></span>
			</div>
			<div class="table">
				<dl>
					<dt><a href="/static/item/##">购物指南</a></dt>
					<dd>
						<a href="/static/item/##">购物流程</a>
					</dd>
					<dd>
						<a href="/static/item/##">会员介绍</a>
					</dd>
					<dd>
						<a href="/static/item/##">生活旅行/团购</a>
					</dd>
					<dd>
						<a href="/static/item/##">常见问题</a>
					</dd>
					<dd>
						<a href="/static/item/##">大家电</a>
					</dd>
					<dd>
						<a href="/static/item/##">练习客服</a>
					</dd>
				</dl>
				<dl>
					<dt><a href="/static/item/##">配送方式</a></dt>
					<dd>
						<a href="/static/item/##">上门自提</a>
					</dd>
					<dd>
						<a href="/static/item/##">211限时达</a>
					</dd>
					<dd>
						<a href="/static/item/##">配送服务查询</a>
					</dd>
					<dd>
						<a href="/static/item/##"></a>
					</dd>
					<dd>
						<a href="/static/item/##">海外配送</a>
					</dd>
					<dd></dd>
				</dl>
				<dl>
					<dt><a href="/static/item/##">支付方式</a></dt>
					<dd>
						<a href="/static/item/##">货到付款</a>
					</dd>
					<dd>
						<a href="/static/item/##">在线支付</a>
					</dd>
					<dd>
						<a href="/static/item/##">分期付款</a>
					</dd>
					<dd>
						<a href="/static/item/##">邮局汇款</a>
					</dd>
					<dd>
						<a href="/static/item/##">公司转账</a>
					</dd>
					<dd></dd>
				</dl>
				<dl>
					<dt><a href="/static/item/##">售后服务</a></dt>
					<dd>
						<a href="/static/item/##">售后政策</a>
					</dd>
					<dd>
						<a href="/static/item/##">价格保护</a>
					</dd>
					<dd>
						<a href="/static/item/##">退款说明</a>
					</dd>
					<dd>
						<a href="/static/item/##">返修/退换货</a>
					</dd>
					<dd>
						<a href="/static/item/##">取消订单</a>
					</dd>
					<dd></dd>
				</dl>
				<dl class="dls">
					<dt><a href="/static/item/##">特色服务</a></dt>
					<dd>
						<a href="/static/item/##">夺宝岛</a>
					</dd>
					<dd>
						<a href="/static/item/##">DIY装机</a>
					</dd>
					<dd>
						<a href="/static/item/##">延保服务</a>
					</dd>
					<dd>
						<a href="/static/item/##">京东E卡</a>
					</dd>
					<dd>
						<a href="/static/item/##">京东通信</a>
					</dd>
					<dd>
						<a href="/static/item/##">京东JD+</a>
					</dd>
				</dl>
			</div>
			<!--关于我们-->
			<div class="guanyuwomen">
				<ul>
					<li>
						<a href="/static/item/##">关于我们</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">联系我们</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">联系客服</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">合作招商</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">商家帮助</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">营销中心</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">手机京东</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">友情链接</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">销售联盟</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">京东社区</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">风险检测</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">隐私政策</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">京东公益</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">English Site</a>
					</li>
					<li>|</li>
					<li>
						<a href="/static/item/##">Mdeila $ IR</a>
					</li>
				</ul>
			</div>
			<!--jieshoa-->
			<p class="p1"><img src="/static/item/img/56a0a994Nf1b662dc.png" />
				<a href="/static/item/##"> 京公网安备 11000002000088号</a>|
				<a href="/static/item/##"> 京ICP证070359号</a>|
				<a href="/static/item/##"> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 </a>|
				<a href="/static/item/##">新出发京零 字第大120007号</a>
			</p>
			<p class="p1">
				<a href="/static/item/##"> 互联网出版许可证编号新出网证(京)字150号</a>|
				<a href="/static/item/##"> 出版物经营许可证</a>|
				<a href="/static/item/##"> 网络文化经营许可证京网文 </a>|
				<a href="/static/item/##">[2014]2148-348号 </a>|
				<a href="/static/item/##"> 违法和不良信息举报电话 </a>|
				<a href="/static/item/##">：4006561155 </a>
			</p>
			<p class="p1">
				<a href="/static/item/##"> Copyright © 2004-2017 京东JD.com 版权所有</a>|
				<a href="/static/item/##"> 消费者维权热线：4006067733 经营证照</a>|
			</p>
			<p class="p1">
				<a href="/static/item/##"> 京东旗下网站：京东支付</a>|
				<a href="/static/item/##"> 京东云</a>
			</p>
			<p class="p3">
				<img src="/static/item/img/54b8871eNa9a7067e.png" />
				<img src="/static/item/img/54b8872dNe37a9860.png" />
				<img src="/static/item/img/54b8875fNad1e0c4c.png" />
				<img src="/static/item/img/5698dc03N23f2e3b8.jpg" />
				<img src="/static/item/img/5698dc16Nb2ab99df.jpg" />
				<img src="/static/item/img/56a89b8fNfbaade9a.jpg" />
			</p>
		</div>
		<div class="Fixedbian">
			<ul>
				<li class="li1"><a class="aaa" href="/static/item/##">顶部</a></li>
			</ul>
		</div>
		<div class="gouwuchexiaguo">
			<img src="/static/item/img/44.png" />
			<span>购物车还没有商品，赶紧选购吧！</span>
		</div>
	</body>

	<script src="/static/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	</script>

<script>
	$(".sku_attr_value").click(function () {
		//1、点击的元素添加上自定义属性，为了识别我们是刚才被点击的
		var skus = new Array();
		$(this).addClass("clicked");
		var curr = $(this).attr("skus").split(",");
		//将被点击的所有sku组合放进skus中
		skus.push(curr);
		//2、去掉同一行所有的checked
		$(this).parent().parent().find(".sku_attr_value").removeClass("checked");

		$("a[class='sku_attr_value checked']").each(function () {
			skus.push($(this).attr("skus").split(","));
        });
		console.log(skus);
		//3、取出交集得到skuId
		var skuId = skus[0];
		for (var i = 1;i < skus.length; i ++){
		    skuId = $(skuId).filter(skus[i]);
		}
        console.log("skuId",skuId)
		//4、跳转
		location.href="http://item.gulimall.com/"+skuId[0]+".html";

    })

	$(function () {
		$(".sku_attr_value").parent().css({"border":"solid 1px #CCC"});
		$("a[class='sku_attr_value checked']").parent().css({"border":"solid 1px red"});
    })
</script>

</html>
皮皮小澜孩
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯HTML编写仿淘宝粉丝福利购页面-优惠券、商品列表、图片悬浮等布局
zhenghhgz的博客
05-13 3446
简介 最近温习一下HTML5+CSS3的一些特性，准备找个高仿的目标，最后选择了淘宝粉丝福利页面，因为这个页面包含的元素比较多。例如：头部品牌信息悬浮、商品属性、优惠券、商品类别等。 实现效果： 设计 如上图所示，页面共分为4个区域，分别为： 1、商品图片区 2、商品属性、优惠券区（包括：商品名称、价格、优惠情况等） 3、推荐商品列表区 4、浮动框 备注：最后优化代码将商品图片区和商品属性、优惠券区合并为一个。 代码实现 第一步：整体css样式编写 index.css * { padding:
app.ssav567.com/html,ffserver.c
weixin_39627052的博客
06-19 8665
/** Copyright (c) 2000, 2001, 2002 Fabrice Bellard** This file is part of FFmpeg.** FFmpeg is free software; you can redistribute it and/or* modify it under the terms of the GNU Lesser General Public*...
谷粒商城的前端vue界面（含管理）.zip
05-09
谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前端vue界面（含管理） 谷粒商城的前
gulimallweb:谷粒商城前端
04-10
gulimallweb 谷粒商城前端 p29、ES6-let&const p30、ES6-结构&字符串 p31、ES6-结构&字符串 ... p35、ES6-模块化
H5高仿淘宝(html模板)
iidhdfji123的博客
11-14 1498
【实例截图】 【核心代码】 H5仿淘宝移动端大型综合购物商城app模板 ├── car.html ├── class.html ├── find.html ├── index.html ├── my-coupon.html ├── my-invitation.html ├── my-membership.html ├── my-order.html ├── my-orders.html ├── my-products-class.html ├── my-purchase.html ├── my-set.ht
【H5 音乐播放实例】第一节 音乐详情页制作（1）
java小白翻身
11-20 683
本教程是一个H5音乐播放的详情页制作，实现了H5音乐播放，音轨的跳动，已经较为酷炫的UI界面。 通过本教程，您会学到： ###1、H5音乐播放 （带音轨） ###2、iconfont字体图标库 ###3、div+css网页布局 前端技术：js，jQuery，css ，bootstrap，iconfont 后台技术：php 数据库：mysql 首先，看一下页面的布局： 基本上用div+css的技术就可以实现。 ##1.1 标题区域 先新建一个detail.php (如果没有php的环境，就把后缀名修改为.
Error querying database. Cause: java.lang.NullPointerException
qq_51682737的博客
06-23 5375
mybatis异常
（莱昂氏unix源代码分析导读-34）You are not expected to understand this
cszhao1980的专栏
10-31 7605
By cszhao1980 本章将探讨unix v6代码中最微妙的部分，即著名的注释：“ You are not expected to understand this”。   2178: swtch() 2179: { 2180:     static struct proc *p; 2181:     register i, n; 2182:     register struc
Shifting More Attention to Video Salient Object Detection 学习笔记
weixin_30709061的博客
09-20 1162
突出/显眼目标的识别广泛用于机器视觉，自动驾驶等领域，研究表明，人的眼睛对于显眼和不显眼的目标的识别的方式有着显著的不同 但是由于各类原因，vsod的领域面临着很多挑战，所以，针对这些，这篇文章主要探讨了两个方面，一是提出了基于人眼动态识别这种机制的数据集，尤其要注意的是，以前的vsod很多都是从静态帧出发，从而分割对象的，但是这样明显不能区分谁是“最显眼的”，所以，这篇文章先提出了数...
app.ssav567.com/html,sdp.c · wangguodong/janus-gateway - Gitee.com
热门推荐
weixin_39985842的博客
06-19 2万+
/*! \file sdp.c* \author Lorenzo Miniero * \copyright GNU General Public License v3* \brief SDP processing* \details Implementation of an SDP* parser/merger/generator in the server. Each SDP ...
最新谷粒商城2020高级-文档和部分前端代码
10-13
谷粒商城-2020-Spring Cloud 高级篇完结 1、使用Spring Cloud (Alibaba) H版技术栈支持的微服务架构商城项目、 2、所有三方组件都使用 linux/docker 容器技术提供环境支持 3、只发布后端代码、使用swagger2提供接口文档支持 4、使用Redis/Redisson 提供缓存和分布式锁支持、Session数据统一存储 5、使用ELK技术栈做全文检索、日志分析及可视化等功能 6、使用RabbitMQ 提供柔性事务保证数据最终一致性、秒杀流量削峰等功能
谷粒商城-电商项目--gulimall.zip
最新发布
11-01
谷粒商城-电商项目--gulimall
谷粒商城 -2020 最新文件代码
05-13
谷粒商城--微服务分布式电商项目-高级篇
《谷粒商城》2020基础篇前端vue模板代码及图片
11-23
此资源为与视频匹配的基础篇前端vue模板代码及后台系统所需图片资源。 项目采用SpringCloudAlibaba技术栈。由业务集群系统+后台管理系统构成，打通了微服务分布式开发及全栈开发技能，包含前后分离全栈开发、Restful...
5.谷粒商城搜索前端页完整代码
qq_40788998的博客
05-24 3758
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim
补充.谷粒商城 - 安装运行mysql笔记
qq_40788998的博客
05-26 3282
1.安装mysql:5.7 docker pull mysql:5.7 2.运行mysql docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/mysql/data:/var/lib/mysql -v /mydata/mysql/conf:/ect/mysql -e MYSQL_ROOT_PASSWORD=root -d mysql:5.7
2谷粒商城：安装nginx
qq_40788998的博客
05-10 2103
1.直接执行以下命令会自动下载nginx 目的只是为了得到nginx中的配置文件 docker run -p 80:80 --name nginx -d nginx:1.10 `2.将容器内的配置文件拷贝到当前目录 docker container cp nginx:/etc/nginx . 注意 nginx后面有一个空格和点 3.停止并删除nginx容器 docker stop nginx docker rm nginx 4.更改目录 cd /mydata mv nginx conf mkdir
1.谷粒商城 - elasticsearch笔记
qq_40788998的博客
05-08 1525
1.docker安装elasticsearch docker pull elasticsearch:7.4.2 2.安装kibana docker pull kibana:7.4.2 3.创建目录 mkdir -p /mydata/elasticsearch/config mkdir -p /mydata/elasticsearch/data echo “http.host:0.0.0.0” ...
谷粒商城前端common和product的代码
10-31
谷粒商城前端是一种电商平台的前端代码，其中包括了common和product两个模块的代码。 common模块是指一些通用的代码和组件，用于整个项目的公共部分。它包括了一些常用的工具函数、样式文件、公共组件等。这些代码和组件可以在整个项目中多次复用，提高了代码的复用性和维护性。common模块的代码主要是一些通用的功能实现，比如登录校验、权限管理、表单验证等。它们可以被其他模块引用，并在不同的页面中使用。 product模块是指商品相关的代码。在电商平台上，商品是核心之一，因此在前端代码中也需要相应的模块来实现和展示商品相关的功能。product模块的代码包括了商品的列表展示、商品详情页面、商品搜索、商品分类等功能的实现。它们通过与后端的接口进行数据交互，获取商品的相关信息，并展示给用户。在商品详情页面中，用户可以查看商品的详细信息，并进行加入购物车、立即购买等操作。 在谷粒商城前端的代码中，common和product两个模块的代码是相互独立的，但也可能会有一些交互和依赖关系。比如在product模块中使用了common模块提供的一些公共组件或工具函数。这样可以有效地实现代码的模块化和复用，同时也提高了项目的开发效率和代码的可维护性。 总之，谷粒商城前端的common和product模块的代码分别负责处理整个项目的公共部分和商品相关的功能。通过模块化和复用的设计，可以更好地实现电商平台的功能需求，并提供良好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

皮皮小澜孩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值