ziqim/Yangcai365_web/manage/zview/keyword/keywordTop.zml

${zhiqim_manager_breadcrumb("关键词排行榜")}
${zhiqim_manager_content()}

<#-- 导航栏 -->
<div class="z-tabnav-main z-blue z-mg-b20">
<nav>
<ul>
    <li class="z-active">关键词排行榜</li>
    <#for item : Global.get(DesignIndustryCache.class).getIndustryList()>
        <li onclick="Z.Location.href('keywordIndustryTop.htm?industryId=${item.getIndustryId()}');">${item.getIndustryName()}</li>
    </#for>
</ul>
</nav>
</div>


<style>
.z-w35p{width:35%;}
/***************************
********  图形列表  ********
***************************/
.scoreChar>.scoreChar-title{font-weight:normal;}
.scoreChar>.scoreChar-list{height:330px;}
.scoreChar>.scoreChar-list>.list-char{position:absolute;width:600px;height:100%;padding:30px;z-index:1;}
.scoreChar>.scoreChar-list>.list-char>.char-item{position:absolute;bottom:30px;width:160px;}
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-status,.scoreChar>.scoreChar-list>.list-char>.char-item>.item-name,
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-score{font-size:16px;}
.scoreChar>.scoreChar-list>.list-char>.char-item>div{position:absolute;width:100%;text-align:center;}
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-status{top:-70px;}
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-arrow{width:0;height:0;line-height:0;font-size:0;border-style:dashed;
border-color:transparent;border-width:40px 80px;border-bottom-style:solid;position:absolute;top:-80px;}
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-name{bottom:60px;}
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-score{bottom:20px;}
.scoreChar>.scoreChar-list>.list-char>.char-item>.item-name a,.scoreChar>.scoreChar-list>.list-char>.char-item>.item-score{color:#ffffff;}
/*排列*/
.scoreChar>.scoreChar-list>.list-char>.char-item:nth-child(1){left:30px;}
.scoreChar>.scoreChar-list>.list-char>.char-item:nth-child(2){left:220px;}
.scoreChar>.scoreChar-list>.list-char>.char-item:nth-child(3){left:410px;}
.scoreChar>.scoreChar-list>.list-char>.char-item.first{height:200px;background:#fe7811;}
.scoreChar>.scoreChar-list>.list-char>.char-item.first>.item-arrow{border-bottom-color:#fe7811}
.scoreChar>.scoreChar-list>.list-char>.char-item.first>.item-status{color:#fe7811;}
.scoreChar>.scoreChar-list>.list-char>.char-item.second{height:160px;background:#2cb8c6;}
.scoreChar>.scoreChar-list>.list-char>.char-item.second>.item-arrow{border-bottom-color:#2cb8c6}
.scoreChar>.scoreChar-list>.list-char>.char-item.second>.item-status{color:#2cb8c6;}
.scoreChar>.scoreChar-list>.list-char>.char-item.third{height:120px;background:#478cea;}
.scoreChar>.scoreChar-list>.list-char>.char-item.third>.item-arrow{border-bottom-color:#478cea}
.scoreChar>.scoreChar-list>.list-char>.char-item.third>.item-status{color:#478cea;}
/*char2*/
.scoreChar>.scoreChar-list>.list-char2>.char-item>.item-arrow,
.scoreChar>.scoreChar-list>.list-char2>.char-item>.item-score,
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li:first-child .z-text-cyan,
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li:first-child .z-text-red{display:none;}
.scoreChar>.scoreChar-list>.list-char2>.char-item>.item-status{top:-30px;}
.scoreChar>.scoreChar-list>.list-char2>.char-item::after{content:"";position:absolute;width:30px;height:30px;text-align:center;border-radius:50%;
line-height:30px;bottom:20px;left:50%;margin-left:-15px;background:#ffffff;}
.scoreChar>.scoreChar-list>.list-char2>.char-item.first::after{content:"1";color:#fe7811;}
.scoreChar>.scoreChar-list>.list-char2>.char-item.second::after{content:"2";color:#2cb8c6;}
.scoreChar>.scoreChar-list>.list-char2>.char-item.third::after{content:"3";color:#478cea;}
/*右侧列表*/
.scoreChar>.scoreChar-list>.list-list{padding:30px 30px 30px 600px;}
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li,
.scoreList>.scoreList-list>.list-ul>.ul-li{width:100%;float:left;height:30px;}
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li:nth-child(even),
.scoreList>.scoreList-list>.list-ul>.ul-li:nth-child(even){background:#f4f4f4;}
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li:first-child,
.scoreList>.scoreList-list>.list-ul>.ul-li:first-child{background:#999999;color:#ffffff;}
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li>div,
.scoreList>.scoreList-list>.list-ul>.ul-li>div{float:left;height:100%;line-height:30px;}
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li>div:first-child,
.scoreList>.scoreList-list>.list-ul>.ul-li>div:first-child{text-align:center;}
.scoreChar>.scoreChar-list>.list-list>.list-ul>.ul-li:last-child{text-align:right;}

/***************************
*********  分类列表  ********
***************************/
.scoreList>.scoreList-list{}
.scoreList>.scoreList-list>.list-nav{margin-bottom:20px;border-bottom:2px solid #f1f1f1;}
.scoreList>.scoreList-list>.list-nav>span{display:inline-block;padding:15px 25px;margin-bottom:-2px;border:0 solid transparent;cursor:pointer;}
.scoreList>.scoreList-list>.list-nav>span:hover,.scoreList>.scoreList-list>.list-nav>span.active{color:#009899;border-bottom:2px solid #009899;}
.scoreList>.scoreList-list>.list-ul>.ul-li{height:40px;}
.scoreList>.scoreList-list>.list-ul>.ul-li>div{line-height:40px;}

</style>

<script>
function switchList(elem)
{
    Z(elem).addClass("z-active").siblings("li").removeClass("z-active");
    var ind = [].indexOf.call(elem.parentNode.children,elem) + 1;
    Z("#list" + ind).show().siblings("div").hide();
}
</script>

<div id="scoreList">
    <div id="list1">
        <div class="scoreChar">
            <h3 class="scoreChar-title">今日搜索榜</h3>
            <div class="scoreChar-list z-relative z-bd">
                <div class="list-char z-clearfix">
                    <#for item : threeList>
                    <div class="char-item <#if item_index == 0>first</#if><#if item_index == 1>second</#if><#if item_index == 2>third</#if>">
                        <div class="item-status"><!--上升154位--></div>
                        <div class="item-arrow"></div>
                        <div class="item-name">${item.getKeywordName()}</div>
                        <div class="item-score">${item.getKeywordNum()}</div>
                    </div>
                    </#for>
                </div>
                <div class="list-list z-absolute z-l0 z-t0 z-w100p z-h100p">
                    <ul class="list-ul">
                        <li class="ul-li">
                            <div class="z-w15p"></div><div class="z-w35p">关键词</div>
                            <div class="z-w25p">指数</div> <div class="z-w25p">升降 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                        </li>
                        <#for item : restList>
                        <li class="ul-li">
                            <div class="z-w15p"></div><div class="z-w35p">${item.getKeywordName()}</div>
                            <div class="z-w25p">${item.getKeywordNum()}</div><div class="z-w25p"></div>
                        </li>
                        </#for>
                         <li class="ul-li">
                            <div class="z-w15p"></div><div class="z-w35p"></div><div class="z-w25p"></div><div class="z-w25p"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
${zhiqim_manager_content_end()}