黑马前端p296练习品优购列表页产品页

关注

原创最新推荐文章于 2026-06-14 09:33:16 发布 261 阅读 AI 写同款· GEO 优化 ›

【微信小程序】黑马优购--04商品列表 6.商品列表页面接口文档 6.1效果 6.2获取分类id 在分类页面wxml中加个超链接把id传过去 <view class="goods_list"> <navigator wx:for="{{item1.children}}" wx:for-index="index2" wx:for-item="item2" wx:key="cat_id" url="/pages/goods_list/goods_list?cid={{item2.cat_id}}"&gt.. 阅读详情

黑马前端p296练习品优购列表页产品页

效果图
代码（代码有待优化欢迎指出）

<div class="sk_bd">
            <ul>
                <li>  
                    <img src="upload/list.png" alt="">
                    <h4 class="style_margin">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
                    </h4>
                    <div class="price style_margin">
                        <h3>6088</h3><h4><del>¥6988</del></h4>
                    </div>
                    <div class="progress style_margin">
                        <h4>已售出87%</h4>
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        <div class="progress_text">
                            <h4>剩余</h4>
                            <h4 class="style_red" style="font-size:16px;line-height: 18px;">29</h4>
                            <h4>件</h4>
                        </div>
                    </div>
                    <button>立即抢购</button>
                </li>
               <!-- 代码缩减 仅放一个li 如有需要复制粘贴-->
            </ul>
        </div>

.sk_bd{
    height: 1000px;
}
.sk_bd ul li{
    float: left;
    margin-top: 25px;
    margin-right: 13px;
    height: 460px;
    width: 290px;
    border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n){
    margin-right: 0px;
}
.sk_bd ul li:hover{
    border: 1px solid #e12228;
}
.sk_bd ul li img{
    text-align: center;
}
.style_margin{
    margin: 8px 12px 0;
    overflow: hidden;
}
.sk_bd ul li>h4{
    font-size: 14px;
    color: 666666;
    font-weight: 400;
    line-height: 21px;
}
.price{
    height: 22px;
}
.price h3{
    float: left;
    color: #e60012;
    font-size: 22px;
    line-height: 22px;
}
.price h3::before{
    content: '¥';
    color: #e60012;
    font-size: 14px;
}
.price>h4{
    float: left;
    font-size: 14px;
    color: #a4a4a4;
    line-height: 28px;
    padding-left: 8px;
}
.progress{
    height: 20px;
    width: 264px;

}
.progress h4{
    font-size: 14px;
    color: 666666;
    font-weight: 400;
    float: left;
    line-height: 19px;
}
.progress > h4{
    float: left;
}
.progress .bar{
    float: left;
    width: 128px;
    height: 12px;
    border: 1px solid #e12228;
    border-radius: 4px;
    margin: 4px 2px 0px;
    border-radius: 7px;
    
}
.bar .bar_in{
    width: 80%;
    height: 100%;
    background-color:#ed282e;
    transition: all .7s;
    border-radius: 7px;
}
.bar:hover .bar_in{
    width: 90%;
}
.sk_bd ul li button{
    width: 288px;
    height: 50px;
    background-color: #b1191a;
    margin-top: 10px;
    color: #fff;
    font-size: 20px;
}