【23】淘宝sdk——入门实战之系统模块宝贝分类、宝贝排行榜、交流区

时间:2023-02-10 20:00:18

这里我们是用的都是系统模块,所以就不用在控制台上创建了,我们直接在index.php中写模块吧

<!-- 190&750分栏 -->
<div class="layout grid-s5m0">
     <div class="col-main">
	    <div class="jiaoliu01_modules main-wrap J_TRegion">
            <?php $jiaoliu01_modules = array(
                array('shortname' => 'shop.forumShow', 'version' => '1.0-common', domId => "index-06"),//750系统模块 交流区 
            );
            echo include_modules('jiaoliu01_modules', $jiaoliu01_modules);
            ?>
        </div>
	 </div>
	 
	 
	 <div class="col-sub baobei_fenlei190_modules J_TRegion">
		<?php $baobei_fenlei190_modules = array(
			array('shortname' => 'shop.itemCategory', 'version' => '1.0-common', domId => "xt3_sub1"),//190系统模块 宝贝分类
			array('shortname' => 'shop.topList', 'version' => '1.0-common', domId => "xt12_sub1"),//190系统模块 宝贝排行榜
			);
		echo include_modules('baobei_fenlei190_modules', $baobei_fenlei190_modules);
		?>
	 </div>
	 
</div>

 写好这个,我们就不用在写什么功能了,这个是系统默认的模块,我们不能添加功能,所以我们就把那个系统默认的样式给改了,模式的样式不是很合适我们的现在的模板的风格,系统模块的样式在global.css中,我们直接找到这个2个模块的样式修改就好了

这里我就直接上我自己写好的样式,如下(注意,这里是代码在最下面,上面的不是,这里我们只要注意css用注释的宝贝分类的名字和index.php中模块的shortname的值)

/*    宝贝分类            shop.itemCategory      1.0-common  
=====================================================================================*/
.tshop-pbsm-sic10c .shop-category .hd{height:35px;border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.tshop-pbsm-sic10c .shop-category .hd h3{font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;line-height:35px;}
.tshop-pbsm-sic10c .shop-category .bd{border: 1px solid #e6e6e6;margin-bottom:10px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats{width:168px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats h4{background:#EFEFEF url(../images/gonggao/cats.png) no-repeat -17px 9px;height:22px;line-height:22px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats h4.collapse { background-position: -7px -22px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats .expand h4 { background-position: 3px -52px;border-bottom:#ff8808 solid 2px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats .expand ul.cat-bd {margin:0;padding:0;text-align:center;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats .expand ul.cat-bd li{ margin-top:3px;height:22px;background-color:#EFEFEF;}



/* ----------------------------- 宝贝排行榜 from rank.css -------------------------- */
/* tshop-pbsm-stl10c: 模块中心31号模块 (shop.topList) 宝贝排行榜 */
.tshop-pbsm-stl10c .shop-rank .hd{height:35px;border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.tshop-pbsm-stl10c .shop-rank .hd h3{font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;line-height:35px;}
.tshop-pbsm-stl10c .shop-rank .bd{border: 1px solid #e6e6e6;margin-bottom:10px;}
.tshop-pbsm-stl10c .shop-rank .tab-nav{height:27px;_margin-bottom:-1px;position:relative;z-index:1;}
.tshop-pbsm-stl10c .shop-rank .tab-nav li{float:left;height:26px;margin-left:5px;border:1px solid #e6e6e6;-moz-border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;background-color:#f0f7ff;}
.tshop-pbsm-stl10c .shop-rank .tab-nav span{display:block;line-height:28px;padding:0px 5px;cursor:pointer;}
.tshop-pbsm-stl10c .shop-rank .tab-nav .selected{background-color:#FFFFFF;border-bottom:1px solid #FFF;}
.tshop-pbsm-stl10c .shop-rank .tab-nav .selected span{color:#000;}
.tshop-pbsm-stl10c .shop-rank .rank-panels{border-top:1px solid #e6e6e6;text-align:center;}
.tshop-pbsm-stl10c .shop-rank .rank-panel ul{padding:4px 8px;margin-bottom:15px;}
.tshop-pbsm-stl10c .shop-rank .rank-panel ul li{padding:9px 0px;border-bottom:dashed 1px #eee;height:42px;overflow:hidden;}
.tshop-pbsm-stl10c .shop-rank .no-collect, 
.tshop-pbsm-stl10c .shop-rank .no-traded{
	padding:5px 15px;
	border:1px solid #ffd863;
	zoom:1;
	display:inline-block;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-image: -moz-linear-gradient(top, #fef7ca, #fff3a9); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fef7ca),color-stop(1, #fff3a9)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#fef7ca', EndColorStr='#fff3a9'); /* IE6+*/
}
.tshop-pbsm-stl10c .shop-rank .no-collect a,
.tshop-pbsm-stl10c .shop-rank .no-traded a{line-height:26px;text-decoration:none;color:#000000;}
.tshop-pbsm-stl10c .shop-rank .no-collect a:hover, .tshop-pbsm-stl10c .shop-rank .no-traded a:hover{color:#ff7700;}
.tshop-pbsm-stl10c .shop-rank .pic{float:left;margin-right:10px;border:1px solid #CCCCCC;height:40px;text-align:center;width:40px;}
.tshop-pbsm-stl10c .shop-rank .pic a{display:table-cell;height:40px;width:40px;*display:block;*font-size:30px;*line-height:1;text-align:center;
	vertical-align:middle;}
.tshop-pbsm-stl10c .shop-rank .pic img{vertical-align:middle;}
.tshop-pbsm-stl10c .shop-rank .desc,
.tshop-pbsm-stl10c .shop-rank .price {float:left;width:120px;height:14px;line-height:1.2;text-align:left;overflow:hidden;}
.tshop-pbsm-stl10c .shop-rank .price{font-size:13px;color:#FF5500;}
.tshop-pbsm-stl10c .shop-rank .price i{background-position:-96px -40px;}
.tshop-pbsm-stl10c .shop-rank .collecter,.tshop-pbsm-stl10c .shop-rank .sale {float:left;width: 120px;overflow: hidden;line-height:1.4;}
.tshop-pbsm-stl10c .shop-rank .collecter i,.tshop-pbsm-stl10c .shop-rank .sale i{float:left;margin-right:3px;}
.tshop-pbsm-stl10c .shop-rank .collecter i{background-position:-80px -56px;}
.tshop-pbsm-stl10c .shop-rank .sale i{background-position:-96px -56px;}

/* == 定制样式(不同场景下的CSS) ==*/

.col-sub .tshop-pbsm-stl10c .shop-rank .bd,
.col-extra .tshop-pbsm-stl10c .shop-rank .bd{
	padding: 3px 0px 15px;
}

/* == END OF 定制样式(不同场景下的CSS) ==*/

/* ----------------------------- End of 宝贝排行榜 from rank.css -------------------- */

 交流区的css:

/* ---------------------------- 交流区 bbs.css ---------------------------- */
/* tshop-pbsm-sfs10c: 模块中心8号模块(shop.forumShow)交流区 */

.tshop-pbsm-sfs10c .shop-bbs .hd {position: relative;z-index: 1;height:35px;border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.tshop-pbsm-sfs10c .shop-bbs .hd h3{font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;line-height:35px;}
.tshop-pbsm-sfs10c .shop-bbs .bd{border-right: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;margin-bottom:10px;}
.tshop-pbsm-sfs10c .shop-bbs .handle {position: absolute;z-index: 1;right: 5px;top: 3px;}
.tshop-pbsm-sfs10c .shop-bbs tbody tr .discuss-content{width:590px;}
.tshop-pbsm-sfs10c .shop-bbs table .date{margin-left: 1em;color: #808080;}
.tshop-pbsm-sfs10c .shop-bbs table dl {overflow: hidden;*zoom: 1;margin: 0 10px 5px 0;padding:3px 3px 2px 5.5em;border: 1px solid #ffe5a8;
	background-color: #ffffcf;}
.tshop-pbsm-sfs10c .shop-bbs dl dt{float: left;margin-left:-5em;color: #848484;_display: inline;}
.tshop-pbsm-sfs10c .shop-bbs dl dd{float: left;width:585px;}
.tshop-pbsm-sfs10c .shop-bbs .reply td{padding-top:0;}
.tshop-pbsm-sfs10c .shop-bbs .line td{border-bottom:1px solid #ddd;word-break:break-all;}
.tshop-pbsm-sfs10c .shop-bbs table {width:100%;}
.tshop-pbsm-sfs10c .shop-bbs table th, .tshop-pbsm-sfs10c .shop-bbs table td {padding:4px 10px 3px 4px;}
.tshop-pbsm-sfs10c .shop-bbs thead th {border-bottom:1px solid #cbcbcb;text-align:center;color:#808080;}
.tshop-pbsm-sfs10c .shop-bbs tbody .message{padding-right:5px;}
.tshop-pbsm-sfs10c .shop-bbs tbody .user{width:80px;}
.tshop-pbsm-sfs10c .shop-bbs tbody .detail{width:80px;text-align:right}
.tshop-pbsm-sfs10c .shop-bbs tbody td {color:#000;padding:8px 0px 7px;word-break:break-all;word-wrap:break-word;}
.tshop-pbsm-sfs10c .shop-bbs tbody .message a {padding-left:16px;line-height:16px;}
.tshop-pbsm-sfs10c .shop-bbs tbody .user,.tshop-pbsm-sfs10c .shop-bbs .shop-discuss-table .detail {vertical-align:middle;text-align:center;}
.tshop-pbsm-sfs10c .shop-bbs .shop-discuss-table .detail{vertical-align:middle;}
.tshop-pbsm-sfs10c .shop-bbs tbody .even {background:#f5f5f5;}
.tshop-pbsm-sfs10c .shop-bbs table a {color:#3366cc;}
/* ---------------------------- End of 交流区 from bbs.css ---------------------------- */

 这样,我们就可以看效果图了,但是这里有一个小问题,就是宝贝分类它又一个背景图,但是这个图片有不存在,就不照成,图片缺失,但是文字还是在的,这里我在网上也找了答案,只要修改下,系统的数据文件就好了,文件是db文件下的sdk_dc_modules.csv,这里我偷懒,是直接下载人家修改好的数据文件,好了,我们看下效果图吧。

【23】淘宝sdk——入门实战之系统模块宝贝分类、宝贝排行榜、交流区

注意看这个的宝贝分类是修改了数据文件的,就不存在背景图缺失的问题了。