chenzhiguang
/
smartCity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style/reset.css" />
    <link rel="stylesheet" href="style/public.css" />
    <link rel="stylesheet" href="style/tagging.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>Document</title>
  </head>

  <body>
    <section class="s1">
      <div class="s-title">
        <h2>重点标注</h2>
      </div>
      <div class="tag">
        <div class="drow-bar b1">
          <div class="d-mask"></div>
          <div class="d-title">公共场所</div>
          <div class="d-arrow">
            <img src="./images/down.png" alt="" />
          </div>
        </div>
        <div class="drow-bar b2">
          <div class="d-mask"></div>
          <div class="d-title">主要道路</div>
          <div class="d-arrow">
            <img src="./images/down.png" alt="" />
          </div>
        </div>
        <div class="drow-bar b3">
          <div class="d-mask"></div>
          <div class="d-title">旅游景点</div>
          <div class="d-arrow">
            <img src="./images/down.png" alt="" />
          </div>
        </div>
        <div class="drow-bar b4">
          <div class="d-mask"></div>
          <div class="d-title">购物商圈</div>
          <div class="d-arrow">
            <img src="./images/down.png" alt="" />
          </div>
        </div>
        <div class="drow-bar b5">
          <div class="d-mask"></div>
          <div class="d-title">公司企业</div>
          <div class="d-arrow">
            <img src="./images/down.png" alt="" />
          </div>
        </div>
        <div class="drow-bar b6">
          <div class="d-mask" id="c-show" style="display:none"></div>
          <div class="d-title">高校学院</div>
          <div class="d-arrow">
            <img id="arr-img" src="./images/down.png" alt="" />
          </div>
        </div>
        <div class="drow-show">
            <div class="d-show">
                <div class="d-img">
                  <img src="./images/b6-img1.jpg" alt="" />
                  <div class="d-show-title">
                    <div class="d-show-l">
                      <div>五邑大学AI视觉科技体验中心</div>
                      <div>广东省江门市蓬江区东成村22号</div>
                    </div>
                    <!-- <div class="d-show-r"><span>点击前往</span></div> -->
                  </div>
                </div>
              </div>
              <div class="d-show">
                  <div class="d-img">
                    <img src="./images/b6-img2.jpg" alt="" />
                    <div class="d-show-title">
                      <div class="d-show-l">
                        <div>五邑大学轨道交通学院实验室</div>
                        <div>广东省江门市蓬江区东成村22号</div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="d-show">
                  <div class="d-img">
                    <img src="./images/b6-img3.jpg" alt="" />
                    <div class="d-show-title">
                      <div class="d-show-l">
                        <div>五邑大学侨乡文化研究中心</div>
                        <div>广东省江门市蓬江区东成村22号</div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="d-show">
                  <div class="d-img">
                    <img src="./images/b6-img4.jpg" alt="" />
                    <div class="d-show-title">
                      <div class="d-show-l">
                        <div>五邑大学图书馆</div>
                        <div>广东省江门市蓬江区东成村22号</div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="d-show">
                  <div class="d-img">
                    <img src="./images/b6-img5.jpg" alt="" />
                    <div class="d-show-title">
                      <div class="d-show-l">
                        <div>五邑大学学生综合服务中心</div>
                        <div>广东省江门市蓬江区东成村22号</div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="d-show">
                  <div class="d-img">
                    <img src="./images/b6-img6.jpg" alt="" />
                    <div class="d-show-title">
                      <div class="d-show-l">
                        <div>江门市五邑大学艺术设计馆</div>
                        <div>广东省江门市蓬江区东成村22号</div>
                      </div>
                    </div>
                  </div>
              </div>
        </div>
      </div>
    </section>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
      // $('.drow-show').scroll(function (e) {
      //   e.preventDefault()
      // })
      $('.b6').click(function () {
        let img = $('#arr-img')[0].currentSrc;
        if (img.indexOf('up.png')>0) {
          $('#arr-img').attr('src','./images/down.png')
          $('#c-show').hide()
        }else{
          $('#arr-img').attr('src','./images/up.png')
          $('#c-show').show()
        }
        let ds = $('.drow-show')
        ds.toggle()
      })
      let arr = Array.from(document.querySelectorAll(".drow-show .d-show"))
      arr.forEach((dom, index) => {
        dom.addEventListener("click", e => {
          console.log("taggingClickHandle", index);
          window.taggingClickHandle && window.taggingClickHandle(index);
        });
      });
    </script>
  </body>
</html>