<!-- 全市政府网站群互动类栏目更新情况 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全市政府网站群互动类栏目更新情况</title>
    <link rel="stylesheet" type="text/css" href="/style/html.css" />
    <link rel="stylesheet" type="text/css" href="/style/base.css" />
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jquery.SuperSlide.2.1.1.js"></script>
  </head>
  <body class="black-bg">
    <!-- 头部 Start -->
    <div class="header flex-row flex-y-center">
      <h1>全市政府网站群互动类栏目更新情况</h1>
    </div>
    <!-- 头部 End -->
    <!-- 内容 Start -->
    <div class="container">
      <!-- 正文 Start -->
      <div class="content m-t-20">
        <div class="content-list flex-col" style="top: 0; padding: 0 20px">
          <div class="content-list-left flex-row w100">
            <div class="tab-title flex-flex">
              <h4 class="current h4-y">县(市)</h4>
              <h4 class="h4-y">区、开发区</h4>
              <h4 class="h4-y">工作部门</h4>
            </div>
            <div class="tab_con w100">
              <div
                class="content-list-body m-t-10 height-79 dis-none"
                style="width: auto; display: block"
              >
                <div class="bd">
                  <ul>
                    <li class="content-list-body-tit">
                      <div class="w20"><h5>诉求单位</h5></div>
                      <div class="w30"><span></span></div>
                      <div class="w15"><h5>答复率</h5></div>
                      <div class="w15"><h5>留言条数</h5></div>
                      <div class="w15"><h5>回复条数</h5></div>
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30">
                        <span
                          ><div class="horizontal-percen">
                            <span id="horizontal"></span></div
                        ></span>
                      </div>
                      <div class="w15"><span>100%</span></div>
                      <div class="w15"><span>5</span></div>
                      <div class="w15"><span>5</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <div
                class="content-list-body m-t-10 height-79 dis-none"
                style="width: auto"
              >
                <div class="bd">
                  <ul>
                    <li class="content-list-body-tit">
                      <div class="w20"></h5><h5>诉求单位</h5></div>
                      <div class="w30"><span></span></div>
                      <div class="w15"><h5>答复率</h5></div>
                      <div class="w15"><h5>留言条数</h5></div>
                      <div class="w15"><h5>回复条数</h5></div>
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>100%</span></div>
                      <div class="w15"><span>5</span></div>
                      <div class="w15"><span>5</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <div
                class="content-list-body m-t-10 height-79 dis-none"
                style="width: auto"
              >
                <div class="bd">
                  <ul>
                    <li class="content-list-body-tit">
                      <div class="w20"><h5>诉求单位</h5></div>
                      <div class="w30"><span></span></div>
                      <div class="w15"><h5>答复率</h5></div>
                      <div class="w15"><h5>留言条数</h5></div>
                      <div class="w15"><h5>回复条数</h5></div>
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>100%</span></div>
                      <div class="w15"><span>5</span></div>
                      <div class="w15"><span>5</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                    <li>
                      <div class="w20 flex-row ph-title-gx" style="padding-left: 0;"><div class="ph-img-bg"><h3>1</h3></div><div class="title">市住建局</div></div>
                      <div class="w30"><span>进度条</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <div class="w15"><span>0</span></div>
                      <img
                        class="table-triangle-top"
                        src="img/triangle.png"
                      />
                      <img
                        class="table-triangle-btm"
                        src="img/triangle.png"
                      />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 正文 End -->
    </div>
    <!-- 内容End -->
    <script>
      $(".tab-title h4").click(function () {
        // 获得点击li的索引号
        var index = $(this).index();
        // 给当前选中的tab加上current类名，其他兄弟的类名去掉
        $(this).addClass("current").siblings().removeClass("current");
        // 第index位的div显示，其他div隐藏
        $(".tab_con .dis-none").eq(index).show().siblings().hide();
      });
    </script>
    <script>
          let stripMeet = roundMeet = 100,
      stripValue = roundValue = 20,
      stripInterval = null,
      roundInterval = null;

      //进度条效果
      let UpDataSpeed = (val, isStrip, isClear) =>{
        if (isStrip) {
          if (isClear) {
            window.clearInterval(stripInterval);
          }
          $('#horizontal').css('width', val + '%').find('b').text(val + '%');
        } else {
          if (isClear) {
            window.clearInterval(roundInterval);
          }
        }
      };

      //自动改变进度条
      // window.clearInterval(stripInterval);
      // stripInterval = window.setInterval(function() {
      //   stripValue = parseInt(Math.random() * stripMeet);
      //   UpDataSpeed(parseInt((stripValue / stripMeet) * stripMeet), true);
      // },
      // 2000);
    </script>
  </body>
</html>
