商品详情页布局

肖凌2019-06-02 20:15:29

详情页的主要代码

<p>12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p>

</div>

<p><i class="fa fa-map-marker"></i> <span>北京&nbsp 北京市&nbsp 东城区&nbsp 永定门外街道 <a href="" style="color:#ff6100;">修改</a></span> </p>

</div>

</div>

</div>

<p>选择小米提供的保障服务</p>

<a href="">了解保障服务 ></a>

</div>

<p>意外保障服务</p>

<p style="font-size:14px;color:#ccc">手机意外摔落/进水/碾压等损坏</p>

</div>

<p>碎屏保障服务</p>

<p style="font-size:14px;color:#ccc">碎屏等损坏</p>

</div>

</div>

<div>

</div>

</div>

<div class="shopcar">加入购物车</div>

<p class="notes"> <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>

详情页CSS

*{margin:0;padding:0;}

li{list-style:none;}

a{text-decoration:none;color:#ccc;cursor:pointer;}

h1,h2,h3,h4{font-weight: 300;}

.fl{float:left;}

.fr{float:right;}

.clear{clear:both;}

/*头部样式*/

.detial{width:100%;height:65px;border-top:1px solid #ccc;line-height: 65px;box-shadow:-3px 5px 10px #ccc;}

.detcon{width: 1226px;height:65px;margin:0 auto;}

.detcon_l{border:0px solid #ccc;display: inline-block;text-align: center;}

.detcon_l span{border-left:2px solid #ccc;font-size: 10px; margin:0 10px;}

.detcon_r{border:0px solid #ccc;display: inline-block;}

.detcon_r ul li{float:left;font-size: 12px;color: #757575;}

.detcon_r span{border-left:2px solid #ccc;font-size: 10px; margin:0 10px;}

.shopcon{width:1226px;margin:30px auto 0px;}

.shoppic{width:560;height:600px;}

.shopitem{width:600px;}

.shopname{border-bottom: 1px solid #ccc;padding:10px 0px;}

.shopname p{font-size: 14px;color:#757575;}

.shopadd{width:540px;margin:10px 0px;border:1px solid #ccc;background: #fafafa;padding:30px;}

.shopadd p{font-size: 14px;line-height: 20px}

.shopver p{font-size:18px;color:#333;margin:10px 0px;}

.ver{width:295px;height:50px;border:1px solid #ccc;line-height: 50px;text-align: center;}

.ver span{color:#ccc;margin-left: 100px;}

.verchecked{border-color: #ff6100;}

.shopcolor p{font-size: 18px;color:#333;margin:10px 0px;}

.colors{width:295px;height:50px;border:1px solid #ccc;line-height: 50px;text-align: center;float:left;}

.colors span{border-radius: 50%;width:14px;height:14px;display:inline-block;}

.colorchecked{border-color: #ff6100;}

.shopbz p{font-size: 18px;color:#333;margin:10px 0px;float:left;}

.shopbz a{font-size: 12px;color:#ff6100;margin:10px 0px;float:right;}

.shopbzcon{border:1px solid #ccc;height:150px;}

.shopbzcon span{float:left;display:inline-block;width:10px;height:10px;line-height:10px;border-radius:6px;margin:60px 0px 60px 40px;}

.shopbzcon img{float:left;margin:50px 20px;}

.shopbzcon div{border:10x solid #ccc;margin: 35px 0px;width:450px;}

.shopbzcon div p{margin-bottom: 10px;}

.shopbzcon div b{width:10px;height:10px;line-height: 10px;}

.shopbzcon div span{float:right;width:50px;margin:0px 0px;display:inline-block;margin-right: 10px;}

.shopbut{color:rgba(0,0,0,0);border:1px solid #ccc;}

.shopover{background: #fafafa;margin:15px 0px;height:150px;}

.shopover p{float:left;margin:20px 30px 30px;}

.shopover span{display: inline-block;float:right;margin-top:20px;margin-right:20px;}

.shopcar{background: #ff6100;color:#fff;width:300px;height:50px;font-size: 20px;line-height:50px;text-align:center;}

.notes{color: #757575;margin-top:20px;}

.bnote{width:100%;background: #fafafa;}

.bnote div{width:1226px;margin:0px auto;padding-top:30px;}

详情页js

$(function(){

//默认选定

$('.ver').eq(0).addClass('verchecked');

$('.colors').eq(0).attr('class','colors colorchecked')

$('.ver').click(function(){

$(this).addClass('verchecked').siblings().removeClass('verchecked');

updatePrice();

})

$(document).on('click','.colors',function(){

$('.colors').attr('class','colors');

$(this).attr('class','colors colorchecked');

})

//选定商品

$('.shopbzcon').click(function(){

var bzclass=$(this).find('.fa-check-circle').attr('class');

var bzfclass=$(this).find('.fa-check-square').attr('class');

if(bzclass.indexOf('whyan')>0){

console.log(bzclass);

console.log(bzclass.indexOf('whyan'));

bzclass=bzclass.replace('whyan','');

bzfclass=bzfclass.replace('whyan','');

$(this).find('.fa-check-circle').attr('class',bzclass);

$(this).find('.fa-check-circle').css({'color':'rgba(0,0,0,0)','border':'1px solid #ccc'});

$(this).find('.fa-check-square').attr('class',bzfclass);

$(this).find('.fa-check-square').css({'color':'rgba(0,0,0,0)','border':'1px solid #ccc'});

// $(this).find('.fa-check-square').css('color','#ff6100');

}else{

$(this).find('.fa-check-circle').attr('class',bzclass+'whyan');

$(this).find('.fa-check-circle').css('color','#ff6100');

// $(this).find('.fa-check-circle').css({'color':'rgba(0,0,0,0)','border':'1px solid #ccc'});

$(this).find('.fa-check-square').attr('class',bzfclass+'whyan');

$(this).find('.fa-check-square').css('color','#ff6100');

// $(this).find('.fa-check-square').css({'color':'rgba(0,0,0,0)','border':'1px solid #ccc'});

console.log(bzclass);

console.log(bzclass.indexOf('whyan'));

}

updatePrice()

})

//更新shopover div文本内容

function updatePrice(){

// var verPrice=$(".ver[class$='verchecked']").find('span').attr('val')*1;

var verPrice=$(".ver[class$='verchecked']").children().attr('val')*1;

console.log(verPrice);

var verText=$(".ver[class$='verchecked']").attr('val');

console.log(verPrice);

console.log(verText);

var bzPrice=0;

// var bz=$(".fa-check-circle[class$='shopbutwhyan']").parent('.shopbzcon').find('span[val]');

// console.log(bz);

var bz=$(".fa-check-circle[class$='shopbutwhyan']").siblings('div').children('span[val]');

console.log(bz.length);

for(var i=0;i<bz.length;i++){

bzPrice+=bz[i].getAttribute('val')*1;

}

var Total=verPrice+bzPrice;

$('#sum').html('总计&nbsp:&nbsp'+Total+'元')

$('#selText').html('小米8 '+verText);

$('#phonePiric').html(verPrice+'元');

}

QQ截图20190602201417.png })

商品详情页布局

最新手记推荐

全部回复(0)我要回复