{extend name="default/base/base_home" /}

{block name="mall_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/semantic.min.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/common.css" />

  <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/course.css">
<script>
  $(document).ready(function(){
    $(".ui.dropdown").dropdown();
  })
</script>
<div class="course-banner list-banner">
  <div class="main-center container">
    <div class="position">当前位置：首页 > 所有课程 </div>
    <div class="content con1">
      <div class="left">
        <h2>All Courses</h2>
        <h3>所有课程</h3>
      </div>
      <div class="search-con">
        <h5>输入课程关键词</h5>
        <div class="inp">
          <i class="iconfont icon-search"></i>
          <input type="text" placeholder="查找你想要的课程或ID（如END/100）">
          <span>Advanced Search</span>
        </div>
        <div class="hot-s">
          <span>热门搜索：</span>
          <a href="">Art</a>
          <a href="">Design</a>
          <a href="">Digital</a>
          <a href="">Human</a>
          <a href="">Media</a>
          <a href="">Philosophy</a>
        </div>
      </div>
    </div>
    <div class="content con2">
      <div class="filter-container ui form">

        <div class="field">
          <label>开始时间</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">开始时间</div>
            <div class="menu">
              <div class="item" data-value="1">春季</div>
              <div class="item" data-value="0">夏季</div>
            </div>
          </div>
        </div>


        <div class="field">
          <label>学科</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">选择学科</div>
            <div class="menu">
              <div class="item" data-value="1">课程名称1</div>
              <div class="item" data-value="0">课程名称2</div>
              <div class="item" data-value="0">课程名称3</div>
              <div class="item" data-value="0">课程名称4</div>
            </div>
          </div>
        </div>

        <div class="field">
          <label>授课方式</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">授课方式</div>
            <div class="menu">
              <div class="item" data-value="1">线上</div>
              <div class="item" data-value="0">线下</div>
            </div>
          </div>
        </div>

        <div class="field">
          <label>主办机构</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">选择机构</div>
            <div class="menu">
              <div class="item" data-value="1">机构名称1</div>
              <div class="item" data-value="0">机构名称2</div>
              <div class="item" data-value="0">机构名称3</div>
              <div class="item" data-value="0">机构名称4</div>
            </div>
          </div>
        </div>

        <div class="field">
          <label>排序</label>
          <div class="ui selection dropdown">
            <input type="hidden" name="gender">
            <i class="dropdown icon"></i>
            <div class="default text">默认</div>
            <div class="menu">
              <div class="item" data-value="1">热门</div>
              <div class="item" data-value="0">最新</div>
              <div class="item" data-value="0">综合</div>
            </div>
          </div>
        </div>
      </div>
      <div class="sort-container">
        <div class="selected">
          <div>
            <b>热门课程<i class="iconfont icon-jiahao1-copy"></i></b>
            <b>热门课程<i class="iconfont icon-jiahao1-copy"></i></b>
          </div>
          <div class="clear">全部清除</div>
        </div>
        <div class="sort">
          <span>show</span>
          <div class="field">
            <div class="ui selection dropdown">
              <input type="hidden" name="gender">
              <i class="dropdown icon"></i>
              <div class="text">10条</div>
              <div class="menu">
                <div class="item" data-value="1">10条</div>
                <div class="item" data-value="0">20条</div>
                <div class="item" data-value="0">30条</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<main class="course">
  <section class="main-1">
    <div class="main-center container">
      <a href="./course-details.html" class="link">
        <h6>Web Design and Development I</h6>
        <p>网页设计与开发I</p>
        <div class="label">
          <span>Arizona State University</span>
          <span class="b">online</span>
          <span>科目</span>
          <span>ASL-101</span>
          <span>3</span>
          <span>6周</span>
          <span class="b">课程详情</span>
        </div>
      </a>
      <a href="./course-details.html" class="link">
        <h6>Web Design and Development I</h6>
        <p>网页设计与开发I</p>
        <div class="label">
          <span>Arizona State University</span>
          <span class="b">online</span>
          <span>科目</span>
          <span>ASL-101</span>
          <span>3</span>
          <span>6周</span>
          <span class="b">课程详情</span>
        </div>
      </a>
      <a href="./course-details.html" class="link">
        <h6>Web Design and Development I</h6>
        <p>网页设计与开发I</p>
        <div class="label">
          <span>Arizona State University</span>
          <span class="b">online</span>
          <span>科目</span>
          <span>ASL-101</span>
          <span>3</span>
          <span>6周</span>
          <span class="b">课程详情</span>
        </div>
      </a>
      <a href="./course-details.html" class="link">
        <h6>Web Design and Development I</h6>
        <p>网页设计与开发I</p>
        <div class="label">
          <span>Arizona State University</span>
          <span class="b">online</span>
          <span>科目</span>
          <span>ASL-101</span>
          <span>3</span>
          <span>6周</span>
          <span class="b">课程详情</span>
        </div>
      </a>
      <a href="./course-details.html" class="link">
        <h6>Web Design and Development I</h6>
        <p>网页设计与开发I</p>
        <div class="label">
          <span>Arizona State University</span>
          <span class="b">online</span>
          <span>科目</span>
          <span>ASL-101</span>
          <span>3</span>
          <span>6周</span>
          <span class="b">课程详情</span>
        </div>
      </a>
    </div>
  </section>
  <section class="main-QA">
    <div class="main-center container">
      <div class="t">
        <h2>常见问题</h2>
        <div class="more-btn">
          <a href="">查看全部问题&gt;</a>
        </div>
      </div>
      <div class="content">
        <ul id="accordion1" class="accordion">
          <li class="open">
            <div class="link">
              <h5><span>01. 报名流程</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1、线上课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-签署协议-学生手册-开始上课-取得成绩-寄送成绩单-转学分</p>
              <h6>2、线下课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-线下报到（签署协议、领取资料等）-开始上课-取得成绩-寄送成绩单-转学分</p>
            </div>
          </li>
          <li>
            <div class="link">
              <h5><span>02.缴纳学费/费用说明</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1、线上课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-签署协议-学生手册-开始上课-取得成绩-寄送成绩单-转学分</p>
              <h6>2、线下课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-线下报到（签署协议、领取资料等）-开始上课-取得成绩-寄送成绩单-转学分</p>
            </div>
          </li>

          <li>
            <div class="link">
              <h5><span>03.选择合适课程</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1、线上课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-签署协议-学生手册-开始上课-取得成绩-寄送成绩单-转学分</p>
              <h6>2、线下课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-线下报到（签署协议、领取资料等）-开始上课-取得成绩-寄送成绩单-转学分</p>
            </div>
          </li>

          <li>
            <div class="link">
              <h5><span>04.完成课程认证</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1、线上课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-签署协议-学生手册-开始上课-取得成绩-寄送成绩单-转学分</p>
              <h6>2、线下课程报名流程</h6>
              <p>缴纳学费-选择课程-课程认证-注册课程-线下报到（签署协议、领取资料等）-开始上课-取得成绩-寄送成绩单-转学分</p>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </section>
</main>

{/block}