商品推荐自定义模版

原问题: http://www.jdcss.com/?/question/13

更改了部分样式和调用,适应新版页面:
注意页面中 foreach 和 end 前面有# 符号
由于编辑器原因未能显示,在使用模版的时候注意添加
Css ID:user_bli
模版内容
<div class="j-module" module-function="autoLayout" module-param="{spacingType:'margin', size:0.5}" style="background:#fff9f1;">
<ul class="user_bli" >

foreach($!goods in $!goodsRecList)

        <li>
    <div class="jItem">
        <div class="jHot"><img src="//img14.360buyimg.com/cms/g9/M03/11/13/rBEHalDcBSMIAAAAAAAJm1gGr7gAADcKwJmSKwAAAmz409.png"/></div>
        <div class="jPic">
            <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
                <img src="$!jshopCommon.getImage($!goods.imageurl,6)" alt="$!goods.wname" height="200" width="200" />
            </a>
        </div>

        <div class="jGoodsInfo">
            <div class="jDesc" title="$!goods.wname $!goods.advertWord">
                <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>

            </div>
            <div class="jPrice">
                <div class="jdPrice">
                    <span class="jRmb">¥</span>
                    $!jshopPrice.getJdPrice($!goods.goodsId)
                </div>
                <div class="jSalePrice">
                    <span class="jRmb">¥</span>$!jshopPrice.getSalePrice($!goods.goodsId)
                </div>

            </div>

        </div>
       <div class="jBtn">
                <a target="_blank" href="$!jshopCommon.addCart($!goods.goodsId)">
                    <img src="//img11.360buyimg.com/cms/g9/M03/11/13/rBEHalDcBSIIAAAAAAAVPwJRvgEAADcKwJfOgYAABVX750.png" />
                </a>
            </div>


    </div>
</li>

end

    </ul>
</div>


css 内容:
.user_bli ,.user_bli li{padding:0px;margin:0px;}
.user_bli {list-style:none;padding-top:10px;}
.user_bli li{list-style-type:none;}
.user_bli li{background:url(//img10.360buyimg.com/cms/g8/M03/11/13/rBEHZ1DcBR8IAAAAAAAHseCf2DAAADcKwNuYNEAAAfJ920.png) no-repeat; width:238px;height:370px;display:block;overflow:hidden;float:left;margin-right:9px;margin-bottom:10px;}
.user_bli li .jItem {width:238px;height:360px;overflow:hidden;display:block;}
.user_bli li .jItem .jHot{position: relative;z-index: 1;height: 60px;width: 61px;top: 0px;right: 0px;float:right;}
.user_bli li .jItem .jPic{z-index:0;position:relative;top:-35px;left:18px;float:left;width:202px;height:202px;}
.user_bli li .jItem .jPic:hover img{border:1px solid #ff0000;}
.user_bli li .jItem .jPic img{border:1px solid #eeeee;display:block;width:200px;height:200px;}
.user_bli li .jGoodsInfo{width:222px;height:85px;display:block;overflow:hidden;margin-top:75px;padding:5px;font-size:14px;clear:both;}
.user_bli li .jGoodsInfo .jDesc{width:222px;height:34px; color:#272727;padding:1px;margin-top:5px;overflow:hidden}
.user_bli li .jGoodsInfo .jDesc a{color: #272727;text-decoration:none;font-weight:bold;}
.user_bli li .jGoodsInfo .jDesc a:hover{color: red;}.user_bli li .jGoodsInfo .jPrice {margin-top:10px;}
.user_bli li .jGoodsInfo .jPrice .jText{width:45px;height:30px;display:block;float:left;}
.user_bli li .jGoodsInfo .jPrice .jRmb{width:12px;height:10px;display:block;float:left;}
.user_bli li .jGoodsInfo .jPrice .jSalePrice{text-decoration: line-through;}
.user_bli li .jGoodsInfo .jdPrice{font-size:24px;color:red;font-weight:bold;}
.user_bli li .jGoodsInfo .jdPrice .jRmb{font-size:14px;width:15px;height:10px;display:block;float:left;line-height:32px;}

.user_bli li .jBtn{position:relative;width:133px;height:32px;float:right;bottom:30px;right:10px;}
.user_bli li .jBtn img{border:0;display:block;}
2017-08-20 15:36 添加评论
0

青猫 - 爱代码的设计师

赞同来自:

我的老是提示这个 上代码用不了面的
2018-07-20 14:06 添加评论
0

青猫 - 爱代码的设计师

赞同来自:

2018-07-20 14:08 1 条评论
0

群群 - 二把刀

赞同来自:

模版针对店铺装修 ,对于活动页面装修, img标签有个bug,这个需要联系jshop产品经理处理了
2018-07-21 20:42 添加评论

要回复问题请先登录注册