(仿)小米商城详情页面
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>红米6A立即购买--小米商城</title> <link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png"> <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/detail.css"> <link rel="stylesheet" href="static/layui/css/layui.css"> <script src="static/layui/layui.js"></script> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="static/js/detail.js"></script> </head> <body> <!-- 头部 --> <!-- 主体内容 --> <!-- ____________________________________页面顶部结束______________________________________ --> <div> <div> <div> <b>小米</b><span></span><a href="">小米8 SE</a> </div> <div> <a href="">概述</a><span></span> <a href="">图集</a><span></span> <a href="">参数</a><span></span> <a href="">F码通道</a><span></span> <a href="">用户评价</a> </div> </div> </div> <div> <div> </div> <div> <h1>红米A6</h1> <p>12nm高性能处理器 / 5.45 小巧全面屏 / 1300万高清相机 / 小杨柳腰机身</p> <h2>599</h2> <div> <i class="fa fa-map-marker"></i> <span>北京 北京市 东城区 永定门外街道 <a href="" style="color: #ff6700;"> 修改</a></span><br> <span style="color: #ff6700;margin-left: 12px;">有现货</span> </div> <div> <p>选择版本</p> <div style="margin-right: 5px;">4GB+64GB 全网通 <span data-val="599">599元</span></div> <div>6GB+64GB 全网通 <span data-val="699">699元</span></div> </div> <div></div> <div> <p>选择颜色</p> <div style="margin-right: 5px;"><span style="background: #f6e6d8;"></span> 金色</div> <div><span style="background: #3c3f43;"></span> 深灰</div> <div style="margin-right: 5px;"><span style="background: #d93239;"></span> 亮红</div> <div><span style="background: #3871b7;"></span> 亮蓝</div> </div> <div></div> <div> <div> <p>选择小米提供的保障服务</p> <a href="">了解保障服务</a> <div></div> </div> <div style="border-bottom: none"> <span class="fa fa-check-circle shop-detail-button"></span> <img src="static/images/bz.jpg"> <div> <p style="font-size: 18px;color: #333;">意外保障服务</p> <p>手机意外摔落/进水/压坏等损坏</p> <b class="fa fa-check-square shop-detail-button"></b> 我已阅读 <a href=""> 服务条款 </a>|<a href=""> 服务条款 </a> <span data-val="99">99元</span> </div> </div> <div> <span class="fa fa-check-circle shop-detail-button"></span> <img src="static/images/bz.jpg"> <div> <p style="font-size: 18px;color: #333;">碎屏保障服务</p> <p>手机意外碎屏</p> <b class="fa fa-check-square shop-detail-button"></b> 我已阅读 <a href=""> 服务条款 </a>|<a href=""> 服务条款 </a> <span data-val="179">179元</span> </div> </div> <div> <div> <p>小米8 6GB+64GB 黑色</p><span id="phonePrice">599元</span> <div></div> </div> <p id="totalPrice" style="color: #ff6a00;font-size: 25px;margin-left: 30px;">总计 : 599元</p> </div> <div>加入购物车</div> <p> <i class="fa fa-check-circle-o"></i> 7天无理由退货 <i class="fa fa-check-circle-o"></i> 15天质量问题换货 <i class="fa fa-check-circle-o"></i> 365天保修 </p> </div> </div> </div> <div></div> <!-- ____________________________________底部______________________________________ --> </body> </html>
CSS
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.clear{clear: both;}
h1, h2, h3 h4, h5, h6{font-weight: 300;}
.detail{width: 100%;height: 65px;border-top: 1px solid #ccc;line-height: 65px;
box-shadow: -3px 5px 10px #eee;}
.detail-left{float: left;}
.detail-right{float: right;}
.detail a{font-size: 12px;color: #444;display: inline-block;}
.detail span{border-left: 2px solid #ccc;height: 12px;margin: 0px 7px;display: inline-block;}
.shop-detail{width: 1226px;margin: 30px auto 0px;}
/*JQuery中替换版本的class样式*/
.shop-detail-much .checked{border: 1px solid #ff6700;}
.shop-detail-pic{width: 560px;height: 600px;float: left;margin-right: 30px;background: #ccc;}
.shop-detail-menu{width: 600px;float: right;}
.shop-detail-menu h1{font-size: 27px;}
.shop-detail-menu p{font-size: 13px;color: #ccc;}
.shop-detail-menu h2{color: #ff6700;font-size: 20px;border-bottom: 1px solid #ccc;height: 50px;line-height: 50px;}
.shop-detail-menu .detail-map{width: 558px;border: 1px solid #ccc;background: #fafafa;
padding: 30px 10px 30px 30px;line-height: 20px;margin: 30px 0px;font-size: 14px;}
.shop-detail-much, .shop-detail-color{width: 600px;}
.shop-detail-much p{font-size: 18px;color: #333;margin-bottom: 15px;}
.shop-detail-much div{font-size: 15px;padding: 0px 20px;float: left;width: 255px;height: 50px;
line-height: 50px;border: 1px solid #ccc;}
.shop-detail-much span{float: right;color: #ccc;}
/*JQuery中替换版本的class样式*/
.shop-detail-color .checked{border: 1px solid #ff6700;}
.shop-detail-color p{font-size: 18px;color: #333;margin: 15px 0px; }
.shop-detail-color div{font-size: 15px;padding: 0px 20px;float: left;width: 255px;height: 50px;
line-height: 50px;border: 1px solid #ccc;text-align: center;margin-bottom: 5px;}
.shop-detail-color span{display: inline-block;width: 16px;height: 16px;border-radius: 8px;
margin-right: 10px;margin-bottom: -2px;}
.shop-detail-bz0 p{font-size: 18px;color: #333;margin: 20px 0px; float: left;}
.shop-detail-bz0 a{float: right;color: #ff6700;margin: 27px 0px;font-size: 13px;}
.shop-detail-bz1{border: 1px solid #ccc;width: 598px;height: 150px;}
/*JQuery中替换版本的class样式*/
.shop-detail-bz1 .checked{color: #ff6700;}
.shop-detail-bz1 span{float: left;width: 10px;height: 10px;line-height: 10px;
display: inline-block;border-radius: 6px;margin: 60px 0px;margin-left: 40px;}
.shop-detail-bz1 img{float: left;margin: 50px 20px;}
.shop-detail-1{margin: 40px 0px;}
.shop-detail-1 p{margin-bottom: 10px;}
.shop-detail-1 b{width: 10px;height: 10px;line-height: 10px;display: inline-block;}
.shop-detail-1 a:hover{color: #ff6700;}
.shop-detail-1 span{float: right;margin: 0px;margin-right: 20px; color: #aaa;width: 50px;}
.shop-detail-button{color: rgba(0,0,0,0);border: 1px solid #ccc;}
.shop-detail-zj{width: 600px;height: 130px;background: #f9f9fa;margin-top: 30px;}
.shop-detail-zj div{margin: 0px 30px 20px; width: 540px;height: 50px;line-height: 50px;}
.shop-detail-zj p{color: #333;float: left;font-size: 15px;}
.shop-detail-zj span{color: #333;float: right;font-size: 15px;}
.shop-detail-cart{width: 300px;height: 50px;line-height: 50px;font-size: 18px;text-align: center;
background: #ff6700;margin-top: 30px;color: #fff;}
.shop-detail-cart + p{font-size: 15px;margin: 20px 0px; }
.detail-content{background: #f9f9fa;}
.detail-content-1{margin: 0px auto;width: 1226px;padding: 20px 0px;}
.detail-content-1 p{font-size: 25px;color: #333;margin: 10px 0px;}jQuery
$(document).ready(function(){
// 默认选中 和 点击选中其他版本
$('.detail-much-left').eq(0).attr('class','detail-much-left checked');
$('.detail-much-left').click(function(){
$('.detail-much-left').attr('class','detail-much-left');
$(this).attr('class','detail-much-left checked');
totalPrice();
});
// 默认选中的颜色 和 点击选中其他颜色
$('.detail-color-left').eq(0).attr('class','detail-color-left checked');
$('.detail-color-left').click(function(){
$('.detail-color-left').attr('class','detail-color-left');
$(this).attr('class','detail-color-left checked');
});
// 选中小米提供保障服务
$('.shop-detail-bz1').click(function(){
var radiobox = $(this).find('.fa-check-circle').attr('class');
var checkbox = $(this).find('.fa-check-square').attr('class');
if(radiobox.indexOf('checked') > 0){
// console.log(radiobox.indexOf('checked'));
radiobox = radiobox.replace('checked','');
checkbox = checkbox.replace('checked','');
$(this).find('.fa-check-circle').attr('class',radiobox);
$(this).find('.fa-check-square').attr('class',checkbox);
}else{
$(this).find('.fa-check-circle').attr('class',radiobox+' checked');
$(this).find('.fa-check-square').attr('class',checkbox+' checked');
}
totalPrice();
});
// 计算总价
function totalPrice(){
// 版本价格:获取选择的版本价格
var verPrice = $('.detail-much-left[class$="checked"]').find('span').attr('data-val') * 1;
// console.log(verPrice)
// 服务价格:通过选中的checkbox获取span元素
var serPrice = 0;
var serSpan = $('.fa-check-circle[class$="checked"]').parent('.shop-detail-bz1').find('span[data-val]');
// console.log(serSpan[0].getAttribute('data-val'));
// 获取服务的价格
for(var i=0;i<serSpan.length;i++){
serPrice += serSpan[i].getAttribute('data-val') * 1;
// console.log(serPrice);
}
// 版本价格加上服务价格
var total = verPrice + serPrice;
$('#phonePrice').html('总计 : '+total+'元');
$('#totalPrice').html(verPrice+'元');
}
});