/**        
  * 桌面主样式
  */
 .app-header{}
 .app-body{}
 .app-footer{}
 /**
  * tab面板基础结构
  */
/**
================================================
<div class="tab-frame">
  <ul class="tab-menus flexbox middle justify">
    <li class="on" data-tab-menu="menu1" data-action-click="go://tab#menu1" data-tab-request="">menu1</li>
    <li data-tab-menu="menu2" data-action-click="go://tab#menu2" data-tab-request="">menu2</li> 
  </ul>
  <div class="tab-bodies">
    <div class="tab-body" data-tab-body="menu1">
    </div>
    <div class="tab-body" data-tab-body="menu2">
    </div>
  </div>
</div>
================================================
 */
.tab-frame{
  
}
.tab-menus{
  list-style: none;
}
.tab-menus li{
  position: relative;
  height: 100%;
}
.tab-menus li.on{
  
}
.tab-menus li.on:after{
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  border-bottom: 1px solid #ff5400;
  bottom: 0;
  left: 0;
}
.tab-menus.m1 li{
  width: 30%;
}
.tab-menus.m2 li{
  width: 50%;
}
.tab-menus.m3 li{
  width: 33.3333%;
}
.tab-menus.m4 li{
  width: 25%;
}
.tab-menus.m5 li{
  width: 20%;
}
.tab-bodies{
  
}
.tab-body{

}

/**
 * 数据列表面板基础结构
 */
/**
================================================
<div class="dataset">
  <div class="dataset-items">
    <div class="dataset-item"></div>
    <div class="dataset-item"></div>
  </div>
  <div class="dataset-nodata">
    <span class="icofont info">暂无数据</span>
  </div>
  <div class="dataset-moredata">
    <span class="icofont">点击加载更多</span>
  </div>
  <div class="dataset-pagebar flexbox middle center">
    <cite>总<em>120</em>条记录</cite>
    <ul class="pagebar flexbox">
      <li class="pre-page" data-action-click="go://url#?page=1">上一页</li>
      <li class="page" data-action-click="go://url#?page=1">1</li>
      <li class="ellipsis">...</li>
      <li class="page" data-action-click="go://url#?page=1">9</li>
      <li class="page" data-action-click="go://url#?page=1">10</li>
      <li class="page" data-action-click="go://url#?page=1">11</li>
      <li class="page on" data-action-click="go://url#?page=1">12</li>
      <li class="page" data-action-click="go://url#?page=1">13</li>
      <li class="page" data-action-click="go://url#?page=1">14</li>
      <li class="ellipsis">...</li>
      <li class="page" data-action-click="go://url#?page=1">9999</li>
      <li class="next-page" data-action-click="go://url#?page=1">下一页</li>
      <li class="jump">
        <form method="get" name="jump" action="/?q=" class="flexbox middle right">
          <cite>共&ensp;100&ensp;页</cite>
          <span>到</span>
          <input type="text" name="page">
          <span>页</span>
          <button type="submit" class="button">GO</button>
        </form>
      </li>
    </ul>
  </div>
</div>
================================================
 */
.dataset{

}
.dataset-items{

}
.dataset-item{

}
.dataset-nodata{

}
.dataset-moredata{

}
.dataset-moredata.loading .icofont:before{
  content: "\e667";
  display: inline-block;
  margin-right: .06rem;
  -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation: icofont-spin 2s infinite linear;
            animation: icofont-spin 2s infinite linear;
}

.dataset-moredata:active{
  background-color: rgba(0, 0, 0, .15);
}
.dataset-pagebar{
  height: .86rem;
}

.dataset-pagebar cite{
  font-style: normal;
  color: #333;
  font-size: .15rem;
}

.dataset-pagebar cite em{
  font-style: normal;
  color: #ff6e1f;
  font-size: .16rem;
  margin-right: .03rem;
}

.dataset-pagebar cite a{
  font-size: .15rem;
  color: #0691F4;
  text-decoration: none;
  margin-left: .16rem;
}
.dataset-pagebar cite a:hover {
  text-decoration:underline;
}

.pagebar{
  list-style: none;
  color: #666666;
  height: .36rem;
  line-height: .36rem;
  text-align: center;
}
.pagebar li{
  border: 1px solid #d5d5d5;
  margin-left: .05rem;
  width: .44rem;
  height: 100%;
  border-radius: .03rem;
}
.pagebar li.pre-page,
.pagebar li.next-page{
  width: .84rem;
}
.pagebar li.ellipsis{
  border: 0;
  border: none;
  width: auto;
}
.pagebar li.on,
.pagebar li:not(.ellipsis):not(.jump):hover{
  background-color: #ff6e1f;
  border-color: #ff6e1f;
  color: #fff;
}
.pagebar li.jump{
  width: auto;
  border: 0;
  border: none;

}
.pagebar li.jump cite{
  color: #666;
  font-style: normal;
  font-size: .14rem;
  margin-left: .16rem;
  margin-right: .08rem;
}
.pagebar li.jump input{
  width: .36rem;
  height: .36rem;
  border: 1px solid #d5d5d5;
  outline: 0;
  outline: none;
  text-align: center;
  margin: 0 .03rem;
  border-radius: .03rem;
}
.pagebar li.jump button{
  width: .38rem;
  height: .38rem;
  background-color: transparent;
  color: #666;
  border: 1px solid #d5d5d5;
  margin-left: .05rem;
  border-radius: .03rem;
}
.pagebar li.jump button:hover{
  background-color: #ff6e1f;
  border-color: #ff6e1f;
  color: #fff;
}