解决江湖家居至尊版手机版装修效果图不能自适应屏幕bug
江湖家居V6.0至尊版官方演示站，手机版首页中部装修效果图，使用了 TouchSlide 触屏滑动特效插件，TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。但是官方演示站手机版首页装修效果图的长宽像素不能自适应屏幕，在手机屏幕像素偏低的手机中浏览，图片样式宽度不能100%满屏，非常不美观，需要找到CSS样式中的不兼容代码，解决这个显示样式的BUG，解决前后对比图如下：
以下是江湖家居手机版模板首页中的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul，在 /themes/default/mobile/index.html 模板中相关代码如下：
<!--装修效果图开始-->
<div id="effectImg" class="mb10">
<div class="tabBox">
<div class="indexTitle">
<h1 class="fl">装修效果图</h1>
<div class="hd fr">
<ul>
<li class="on"><a href="###">风格</a></li>
<li class=""><a href="###">空间</a></li>
<li class=""><a href="###">别墅</a></li>
<li class=""><a href="###">小户型</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="bd">
<div class="list_box">
<div class="imgList"> <{KT id="4" name="网站首页4F热门案例-风格" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
<a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多风格</a> </div>
<div class="list_box">
<div class="imgList"> <{KT id="5" name="网站首页4F热门案例-空间" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
<a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多空间</a> </div>
<div class="list_box">
<div class="imgList"> <{KT id="6" name="网站首页4F热门案例-别墅" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail'arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
<a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多别墅</a> </div>
<div class="list_box">
<div class="imgList"> <{KT id="7" name="网站首页4F热门案例-小户型" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail'arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
<a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多小户型</a> </div>
</div>
</div>
</div>
<!--装修效果图结束-->
下面对CSS样式中的不兼容的代码进行修改，装修效果图能自适应屏幕的宽度，只需要打开 \themes\default\mobile\static\css\style.css 样式表文件，查找如下代码：
.indexTitle{ border-top:0.02rem solid #ff5d4e; border-bottom:0.01rem solid #dedede; background:#fff; height:0.34rem; padding:0 0.1rem;}
把其中 “height:0.34rem” 代码删除即可解决，修改后的代码为：
/*手机版首页触屏滑动装修效果图开始*/
.indexTitle{ border-top:0.02rem solid #ff5d4e; border-bottom:0.01rem solid #dedede; background:#fff; padding:0 0.1rem;}
页:
[1]