pbootcms后臺文章列表增加縮圖顯示
時間：2020-12-12 訪問量：0
歡迎隨便轉(zhuǎn)載，不需要注明來源和出處，我們的目的是讓知識和內(nèi)容得到分享和傳播。
pbootcms默認的文章列表是不顯示縮圖的，只顯示文字。
但是有時候我們上傳的產(chǎn)品多了，想知道這個產(chǎn)品的名字與圖片是否相符，總是需要點進去編輯才能查看圖片，所以比較浪費時間。
所以為了用戶體驗更好。我們只需要作一點小小的改動就可以實現(xiàn)在列表顯示圖片了。
這是沒有修改之前的效果。
這是修改之后的效果。原始的列表顯示很小的圖片，這樣是為了讓列表不至于因為圖片過大而顯示得太長。
然后用鼠標經(jīng)過縮圖的時候，顯示大圖，方便清楚的看看圖片。
修改后臺的模板文件：content.html
原來的代碼是：
{if($value->ico)}
<span class="layui-badge layui-bg-orange">縮</span>
{/if}我們作以下修改：
{if($value->ico)}
<span class="layui-badge layui-bg-orange" id="st">縮圖
<img src="[value->ico]" class="sst" > <img src="[value->ico]" class="stimg" >
</span>
{/if}然后再加入CSS樣式：
<style>
#st{position: relative;padding-right: 0}
.stimg{position: absolute; top:0; left:35px; width: 200px; display: none; z-index: 9999; max-width: 150px!important;}
.sst{width:20px; height: 20px; }
#st:hover .stimg{display: block;}
.layui-badge{height: 20px; line-height: 18px; }
</style>至此，修改完成結(jié)束。
