game-box/application/system/view/passport/appshop/index.html

{layout name="passport:layout" /}
<div class="wrap-full row apps">
    {foreach $list as $rs}
        <div class="col-s33 col-m100">
            <a class="app row" href="{:url('system/passport.appshop/review',['id' => $rs.id])}">
                <div class="col-20"><img src="__STATIC__/{$rs.miniapp_dir}/logo.png" class="applogo"/></div>
                <div class="col-80">
                    <div class="title"><h4>{$rs.title}</h4>
                        <span class="hide-m">{switch $rs.types}
                            {case mp}公众号{/case}
                            {case program}小程序{/case}
                            {case app}APP{/case}
                            {case mp_program}小程序/公众号{/case}
                            {case mp_program_app}小程序/公众号/APP{/case}
                            {default /}开放应用{/switch} 
                            <div class="qrcode fn-hide"><img src="{$rs.qrcode}" />微信扫码体验</div>
                        </span><span class="hide-s go">进入</span>
                    </div>
                    <div class="miniapp-footer"><p class="describe">{$rs.describe|dehtml}</p></div>
                </div>
            </a>
        </div>
    {/foreach}
</div>
{$list|raw}
<style  type="text/css">
.app{margin: 0px 5px 10px 5px;padding:10px;background-color: #fff;border-radius: 5px;border: 1px solid #eaeef1;border-radius: 3px;transition: all .2s;}
.app:hover{box-shadow: 0 8px 24px rgba(0,0,0,.12);}
.app .applogo{width:100%;border-radius:15px;padding:5px;}
.app .title{display: flex;display: -webkit-box; display: -moz-box;  display: -ms-flexbox;display: -webkit-flex; display: flex;line-height: 30px;}
.app .title h4{flex: 1;padding:5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;font-size: 15px;font-weight: 600;color: #777;line-height: 18px;}
.app .title h4:hover{color: #ee591f;}
.app .title span {margin: 0px 5px;padding:0px 5px;line-height: 25px;font-size: 12px;color: #404040;border: 1px solid #f4f4f4;text-align: center;border-radius: 5px;display: inline-block;position: relative;}
.app .title span:hover .qrcode{display: block;width: 160px;overflow: hidden;background: #FFFFFF;box-shadow: 0 0 1px #d6d6d6;text-align: center;font-size: 14px;color: #303030;position: absolute;right:0px;top:30px;z-index: 99;padding: 10px;line-height: 25px;}
.app .title span:hover .qrcode img{width: 100%;}
.app .miniapp-footer{width: 100%;height:70px;padding: 5px;left: 0;bottom: 0;color: #808080;overflow: hidden;}
.app .describe{font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;}
.app span.go{font-size:14px;background: #fff;border: 1px solid #0db252;color: #0db252;text-align: center;}
</style>