zyy
/
ziqim


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
							<!DOCTYPE html>
<html>
<head>
<title>设计组件</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="http://192.168.1.27:8088/service/res/zhiqim_v1.4.0.r2018010101.css">
<script src="http://192.168.1.27:8088/service/res/zhiqim_v1.4.0.r2018010101.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://192.168.1.27:8088/ztmpl/zhiqim_manager/00_default/default_2018010101.css">
<script src="http://192.168.1.27:8088/ztmpl/zhiqim_manager/00_default/default_2018010101.js"></script>
</head>
<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>

<body>
<div class="z-clearfix">
    <div class="z-tabnav-main z-cyan">
        <nav>
        <ul>
            <li class="z-active" onclick="switchList(this);">全部</li>
            <li onclick="switchList(this);">名片</li>
            <li onclick="switchList(this);">名片</li>
            <li onclick="switchList(this);">名片</li>
            <li onclick="switchList(this);">名片</li>
        </ul>
        </nav>
    </div>
</div>
<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">
                <div class="char-item first">
                    <div class="item-status">上升154位</div>
                    <div class="item-arrow"></div>
                    <div class="item-name"><a href="">服装</a></div>
                    <div class="item-score">39110</div>
                </div>
                <div class="char-item second">
                    <div class="item-status">上升154位</div>
                    <div class="item-arrow"></div>
                    <div class="item-name"><a href="">服装</a></div>
                    <div class="item-score">39110</div>
                </div>
                <div class="char-item third">
                    <div class="item-status">上升154位</div>
                    <div class="item-arrow"></div>
                    <div class="item-name"><a href="">服装</a></div>
                    <div class="item-score">39110</div>
                </div>
            </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>
                    <li class="ul-li">
                        <div class="z-w15p">4</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">5</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">6</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">7</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">8</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">10</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p"></div><div class="z-w35p"></div><div class="z-w25p"></div><div class="z-w25p"><a href="">完整榜单>></a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="scoreChar">
        <h3 class="scoreChar-title">一周关注热门榜</h3>
        <div class="scoreChar-list z-relative z-bd">
            <div class="list-char list-char2 z-clearfix">
                <div class="char-item second">
                    <div class="item-status">16582</div>
                    <div class="item-arrow"></div>
                    <div class="item-name"><a href="">服装</a></div>
                    <div class="item-score">39110</div>
                </div>
                <div class="char-item first">
                    <div class="item-status">16582</div>
                    <div class="item-arrow"></div>
                    <div class="item-name"><a href="">服装</a></div>
                    <div class="item-score">39110</div>
                </div>
                <div class="char-item third">
                    <div class="item-status">16582</div>
                    <div class="item-arrow"></div>
                    <div class="item-name"><a href="">服装</a></div>
                    <div class="item-score">39110</div>
                </div>
            </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-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">4</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">5</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">6</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">7</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-red">↑</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">8</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p">10</div><div class="z-w35p">关键词</div>
                        <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                    </li>
                    <li class="ul-li">
                        <div class="z-w15p"></div><div class="z-w35p"></div><div class="z-w25p"></div><div class="z-w25p"><a href="">完整榜单>></a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    
    <div id="list2" class="z-hide">
    <div class="scoreList">
        <div class="scoreList-filter z-pd5 z-pd-b15 z-mg-t10 z-mg-b10 z-bd">
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">全部</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">餐饮食品</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">家装建材</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">美容妆饰</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">物流运输</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">IT网络科技</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">教育科研</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">休闲娱乐</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">金融保险</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">电子电器</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">家政便民</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">医药保养</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">日用百货</button>
            <button type="button" data-options="group:scoreListType" class="z-button z-bordered z-mg-t10 z-mg-r5 z-mg-b10 z-mg-l5 z-blue-bd z-hover">农林绿化</button>
        </div>
        <div class="scoreList-list">
            <div class="list-nav">
                <span class="active" >标签一</span><!--
                --><span>标签二</span><!--
                --><span>标签三</span>
            </div>
            <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">升降位数<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
                <li class="ul-li">
                    <div class="z-w15p">9</div><div class="z-w35p">关键词</div>
                    <div class="z-w25p">16582</div><div class="z-w25p">55 &nbsp &nbsp<span class="z-text-cyan">↓</span></div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>