challenges.html

---
title: 痛点议题
layout: default
permalink: /challenges/
slug: challenges
---
{% include breadcrumbs.html %}

  
<div class="btn-icon-pg" style="padding-left: 8%; padding-right: 7%;">
  <div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #EEE;">
    <form>
    <div class="form-group">
    <div style="display: inline-block; min-width: 350px;">
      <label style="font-size: 16px; padding-top: 5px;">议题分类: </label>
      <select id="challenge-select" onchange="select_change()" class="form-control" style="width: 20%; min-width: 180px; display: inline-block; margin-left: 2%;">
        <option value="all">不限</option>
        <option value="future-business">未来商业</option>
        <option value="smart-mobility">智慧交通</option>
        <option value="green-development">绿色发展</option>
        <option value="medical-health">医疗健康</option>
      </select>
    </div>


  </form>
  </div>

  <div id="challenges-list">
    <ul>
    {% for challenge in site.challenges %}
    <li style="margin: 15px 5px;">
      <div class="challenge-box" style="overflow: visible;">
        <a href="{{ site.baseurl }}{{ challenge.url }}" style="text-decoration: none;">
          <div class="challenge-box-top-half {{ challenge.challenge_class | append:'-top-half' }} ">
            <h5 class="challenge-card-title">{{ challenge.title }} </h5>
            <div class="btn-icon-pg" style="width: 205px; display: inline-block; margin-top: 0px;">
              <ul>
                {% if challenge.challenge_org_feature %}
                <li style="min-width: 100px; margin: 10px;"><img src="{{ site.baseurl}}{{ challenge.challenge_org_feature }}" width="100"></li>
                {% endif %}
              </ul>
            </div>
          </div>
          <div class="challenge-box-bot-half {{ challenge.challenge_class | append:'-bot-half' }}">
            <p class="challenge-card-description">{{ challenge.description | truncate: 50 }}</p>
          </div>
        </a>
      </div>
    </li>
    {% endfor %}
    </ul>
  </div>
</div>

 <script type="text/javascript">
    function filter_match(sel_filter, para){
      if (sel_filter == "all" || para == sel_filter) {
        return true;
      }
      return false;
    }

    function select_change(){
      let sel_challenge = document.getElementById("challenge-select");
      let opt_challenge_value = sel_challenge.options[sel_challenge.selectedIndex].value;

      let sel_year = document.getElementById("year-select");
      let opt_year_value = sel_year.options[sel_year.selectedIndex].value;      

      $("#challenges-list").html("");

      $.getJSON(`${settings.BASE_URL}/api/challenges.json`, function(data){
        let content = "<ul>";
        $.each(data, function(i, item){
          let overall_box = "<li style=\"margin: 15px 5px;\"><div class=\"challenge-box\" style=\"overflow: visible;\"><a href=\"" + item.url + "\" style=\"text-decoration: none;\">";
          let up_box = "<div class=\"challenge-box-top-half " + item.challenge_class + "-top-half\"><h5 class=\"challenge-card-title\">" + item.title + " </h5><div class=\"btn-icon-pg\" style=\"width: 205px; display: inline-block; margin-top: 0px;\">";

          let challenge_org_feature = "<ul><li style=\"min-width: 100px; margin: 10px;\"><img src=\"" + item.challenge_org_feature + "\" width=\"100\"></li></ul></div></div>";

          let down_box = "<div class=\"challenge-box-bot-half " + item.challenge_class + "-bot-half\"><p class=\"challenge-card-description\">" + item.description.substring(0,50) + "</p></div></a></div></li>";
          if (filter_match(opt_challenge_value, item.challenge_class) && filter_match(opt_year_value, item.year)) {
            content = content + overall_box + up_box + challenge_org_feature + down_box;
          }
        });
        content += "</ul>";
        $("#challenges-list").append(content);
      });
    }

  </script>