master

分支 (8)

管理

管理

master

new-2

new-1

pc

prod

dev

test

develop

git-learn
/
activity.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>活动预约</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css"
    rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->

  <link rel="stylesheet" href="css/main.min.css">

  <!-- /style -->

  <style>
    .media__type_01 .caption .headline {
      background: none;
      border-bottom: 1px solid #e4e4e4;
    }

    .media__activity .abstract {
      border: none;
    }
  </style>

</head>

<body>

  <div class="page page-activity">


    <section class="common_header_item">

      <header class="page__header">

      </header>

      <article class="section page__main_nav">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <nav class="page__nav bar__inner j_follow_bar_nav">
              <li class="nav__item" data-nav="index"><span class="nav__title"><a href="index.html">首页</a></span>
              </li>
              <li class="nav__item" data-nav="news"><span class="nav__title"><a href="news.html">文化资讯</a></span>
              </li>
              <li class="nav__item" data-nav="live"><span class="nav__title"><a href="live.html">互动直播</a></span>
              </li>
              <li class="nav__item" data-nav="ancient"><span class="nav__title"><a
                    href="ancient-culture.html ">古都文化</a></span>
              </li>
              <li class="nav__item" data-nav="activity"><span class="nav__title"><a href="activity.html">活动预约</a></span>
              </li>
              <li class="nav__item" data-nav="venue"><span class="nav__title"><a href="venue.html">场馆预定</a></span>
              </li>
              <li class="nav__item" data-nav="network"><span class="nav__title"><a
                    href="network-train.html">网络培训</a></span>
              </li>
              <li class="nav__item" data-nav="travel"><span class="nav__title"><a
                    href="culture-travel.html">文化旅游</a></span>
              </li>
              <li class="nav__item" data-nav="heritage"><span class="nav__title"><a
                    href="culture-heritage.html ">文化非遗</a></span>
              </li>
              <!-- <li class="nav__item" data-nav="volunteer"><span class="nav__title"><a href="volunteer-event-archive.html">志愿服务</a></span></li> -->
              <!-- <li class="nav__item" data-nav="app"><span class="nav__title"><a href="#">社团管理</a></span></li> -->
              <li class="nav__item" data-nav="county"><span class="nav__title"><a
                    href="county-view.html">区县风采</a></span>
              </li>
              <span class="follow__bar"></span>
            </nav>
          </div>
        </div>
      </article>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">活动预约</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- / breadcrumb -->
      <!-- banner -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module module__container_column module__type_banner">
              <!-- left -->
              <div class="pure-u-1-2">
                <div class="column-inner">
                  <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper" id="navImage-l">
                    </div>
                  </div>
                </div>
              </div>
              <!-- right -->
              <div class="pure-u-1-2">
                <div class="column-inner">
                  <div class="module__banner_side" id="navImage-r">

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 分类 -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module-filter-wrapper">
              <div class="module module-filter">
                <h3 class="title"><i class="iconfont icon-activity-fill"></i>日

                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 期 :</h3>
                <div class="item data-choose">
                  <input type="date" value="2016-02-03">至
                  <input type="date" value="2019-02-03">
                </div>
              </div>

              <div class="module module-filter">
                <h3 class="title"><i class="iconfont icon-activity-fill"></i>活动栏目 :</h3>
                <div class="module-filter-list" id="category">
                  <a class="item active" data-filter="activity-channel-1" href="#">全部</a>
                  <a class="item" data-filter="activity-channel-2" href="#">艺术培训</a>
                  <a class="item" data-filter="activity-channel-3" href="#">艺术展览</a>
                  <a class="item" data-filter="activity-channel-4" href="#">文艺汇演</a>
                </div>
              </div>

              <div class="module module-filter">
                <h3 class="title"><i class="iconfont icon-activity-fill"></i>活动状态 :</h3>
                <div class="module-filter-list">
                  <a class="item active" data-filter="activity-channel-1" href="#">全部</a>
                  <a class="item" data-filter="activity-channel-2" href="#">正在报名</a>
                  <a class="item" data-filter="activity-channel-3" href="#">精彩回顾</a>
                  <a class="item" data-filter="activity-channel-4" href="#">即将开始</a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>
      <!-- 列表内容 -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module media-list" id="activity">
              <!-- 数据渲染 -->
            </div>
          </div>
        </div>
      </section>
      <nav class="page-pagination" aria-label="page-pagination" id="pages">

      </nav>
      <!-- / pagination -->
    </main>
    <!-- / container -->

    <footer class="page__footer">
    </footer>
    <!-- / footer -->
    <!-- 通用组件 -->
    <script src="js/page-header.js"></script>
    <script src="js/page-footer.js"></script>

    <!-- / pendant -->
  </div>
  <!-- /page -->


  <script
    src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css"
    rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>


  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="js/common.min.js"></script>
  <script src="js/common.js"></script>


  <script src="js/common/gb2260.js"></script>
  <script src="js/common/hs-area.js"></script>
  <script src="js/util/page-helper.js"></script>
  <script src="js/hy.util.js"></script>
  <!-- /script -->
  <script>
    $(document).ready(function () {
      var parms = {
        //你的参数
        'catId': 100004,
        // 'resType': 'activity',
        'order': 1,
        'activityState': null,
        'outputTime': null,
        'collectionId': null,
        'keywords': null,
        'pageSize': 8,//每页条数
        'pageNumber': 1,//页码
      }
      var pageParms = {//根据这个来显示
        'currPage': 1,//当前页码
        'total': 30,//总条数
        'totalPage': 6,//总页码
        'pageSize': 5//每页条数
      }

      initRecommendList("#navImage-l", {
        'recommendColumn': "RES_RECOMMEND_COL_9"
      }, (data) => {
        var list = data.data;
        var navImageL = '';
        var navImageR = '';
        $(list).each((index, item) => {
          navImageL += '<div class="swiper-slide">' +
            '<img src="' + item.poster + '" alt="" width="590" height="329">' +
            '<span class="tag">' + item.recommendTitle + '</span>' +
            ' </div>';
          navImageR += '<a href="activity-detail.html?pubId=' + item.pubId + '" target="_blank" class="item">' +
            '<div class="media media-aside">' +
            '<div class="pure-u-1-4">' +
            '<div class="">' +
            '<img src="' + item.poster + '" alt="" width="155" height="93" >' +
            '</div></div>' +
            '<div class="pure-u-3-4">' +
            '<div class="column-inner">' +
            '<div class="caption">' +
            '<div class="headline singleline">' +
            item.title +
            '</div>' +
            '<div class="attach attach-inline">' +
            '<div class="attach-main">' +
            '<div class="attach-item"><span>活动时间：' + item.pubTime + '</span>' +
            '</div></div></div></div></div></div></div></a>';
        })
        $("#navImage-r").html(navImageR);
        return navImageL;
      })


      // 监听category
      $('.module-filter-list').on('click', '.item', function (e) {
        var $this = $(this);
        typeid = $this.attr("data-typeid");
        parms.catId = typeid;
        loadHtml();
        if ($this.attr('href') === "#") {
          e.preventDefault();
        }
      });

      initCategoryList("#category", {
        'pid': parms.catId
      }, function (data) {
        var list = data.data;
        var cateHtml = '';
        var count = 1;
        cateHtml += '<a class="item ' + (100004 == parms.catId ? "active" : "") + '" data-typeid="100004" data-filter="activity-channel-' + count + '" href="#">全部</a>'

        $(list).each(function (index, item) {
          cateHtml += '<a class="item ' + (item.orderNo == parms.catId ? "active" : "") + '" data-typeid="' + item.id + '" data-filter="activity-channel-' + count + '" href="#">' + item.name + '</a>';
        })
        return cateHtml;
      })

      loadHtml()
      function loadHtml() {
        $.post(urlPath + "api/res/list", parms, function (data) {
          pageParms.currPage = data.currPage;
          pageParms.pageSize = data.pageSize;
          pageParms.totalPage = data.totalPage;
          pageParms.total = data.total;
          page(pageParms, "pages")
          //你要渲染的页面
          var html = '';
          var list = data.data;
          $(list).each(function (i, item) {
            var time = item.pubTime.split(' ');
            html += '<div class="pure-u-1-4">' +
              '<div class="column-inner">' +
              '<div class="media media__type_01 media-bg-white media-normal media-card media__activity">' +
              '<a class="object" href="activity-detail.html?pubId=' + item.pubId + '">' +
              '<img class="" src="' + item.poster + '" width="280" height="170" alt="">' +
              '</a>' +
              '<div class="caption">' +
              '<div class="headline">' +
              '<a href="#" target="_blank" class="singleline">' + item.title + '</a>' +
              '</div>' +
              '<div class="abstract">' +
              '<span class="flt"><i class="iconfont">&#xe8a9;</i>  ' + time[0] + '</span>' +
              '</div></div></div></div></div>';
          })
          $("#activity").html(html);

          /*列表切换*/
          $('.module__banner_side .item').on('click', function (e) {
            e.preventDefault();
            //得到当前索引
            var i = $(this).index();
            $('.module__banner_side .item').removeClass('active').eq(i).addClass('active');
            galleryTop.slideTo(i, 1000, false);
          });

          // 过滤标签交互效果
          var myUtil = hs.util;
          myUtil.itemActive({
            parent: ".module-filter-list",
            item: '.item',
            active: 'active'
          });


          // 地址联动操作
          var myArea = new hs.area({
            activeProvinceCode: "450000",
            //activePrefectureCode: "450100"
            //or: activeCountyCode: "130303"
          });
          myArea.init();

          $('.j_select_area_submit').on('click', function () {
            $('[data-area-filter="all"]').removeClass('active');
          });

          $('[data-area-filter="all"]').on('click', function () {
            // do something
            alert()
          });

          /* 文化资讯 */
          var galleryTop = new Swiper('.gallery-top', {
            paginationClickable: true,
            autoplay: 5000,
            onInit: function (swiper) {
              $('.module__banner_side .item').eq(0).addClass('active');
            },
            onSlideChangeEnd: function (swiper) {
              var j = galleryTop.activeIndex;
              $('.module__banner_side .item').removeClass('active').eq(j).addClass('active');
            }
          });

        })
      }

      onPage('pages', pageParms, parms, loadHtml)

    });
  </script>
</body>

</html>