pbootcms后臺(tái)文章列表增加縮圖顯示
時(shí)間：2020-12-12 訪問量：0
歡迎隨便轉(zhuǎn)載，不需要注明來源和出處，我們的目的是讓知識(shí)和內(nèi)容得到分享和傳播。
pbootcms默認(rèn)的文章列表是不顯示縮圖的，只顯示文字。
但是有時(shí)候我們上傳的產(chǎn)品多了，想知道這個(gè)產(chǎn)品的名字與圖片是否相符，總是需要點(diǎn)進(jìn)去編輯才能查看圖片，所以比較浪費(fèi)時(shí)間。
所以為了用戶體驗(yàn)更好。我們只需要作一點(diǎn)小小的改動(dòng)就可以實(shí)現(xiàn)在列表顯示圖片了。
這是沒有修改之前的效果。
這是修改之后的效果。原始的列表顯示很小的圖片，這樣是為了讓列表不至于因?yàn)閳D片過大而顯示得太長(zhǎng)。
然后用鼠標(biāo)經(jīng)過縮圖的時(shí)候，顯示大圖，方便清楚的看看圖片。
修改后臺(tái)的模板文件：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é)束。
