educoder/app/views/welcome/index.html.erb

<div class="edu-index-banner">
  <div class="edu-index-banner-con">
    <h2 class="edu-index-h2  ">让高校教学与实训更简单</h2>
    <p class="edu-index-banner-p ">创新实践人才的自主化和规模化培养</p>
    <div class="clearfix " style="margin-left:127px;">
      <div class=" fl edu-index-banner-box mr20">
        <h3 class="fl edu-index-h3 mr30 mt12"><i class="fa fa-gamepad font-45 ml5" ></i><br/>实 训</h3>
        <ul class="fl ">
          <li>开源大学</li>
          <li>编程实训</li>
          <li>数据库实训</li>
          <li>实战排行榜</li>
        </ul>
      </div>
      <div class="fl edu-index-banner-box mr20">
        <h3 class="fl edu-index-h3 mr30 mt12"><i class="fa fa-mortar-board font-40" ></i><br/>课 堂</h3>
        <ul class="fl ">
          <li>课程模板</li>
          <li>在线课堂</li>
          <li>名师榜</li>
          <li>学霸排行榜</li>
        </ul>
      </div>
      <div class=" fl edu-index-banner-box">
        <h3 class="fl edu-index-h3 mr30 mt12"><i class="fa fa-trophy font-45 ml5" ></i><br/>竞 赛</h3>
        <ul class="fl ">
          <li>实时竞赛</li>
          <li>发布竞赛</li>
          <li>数据建模大赛</li>
          <li>冠军榜</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="edu-index-show">
  <div class="edu-index-show-con">
    <h3>教学与实训一体化的创新人才培养模式</h3>
    <p class="font-16 color-grey">打破教学壁垒，引入技能实训，让高校教学与企业实训无缝衔接</p>
    <div class="clearfix edu-index-show-apple">
      <ul class="fl edu-index-show-ul mt40">
        <li><a href="#">课堂社区<i class="fa fa-circle color-light-red ml10 font-12" ></i></a></li>
        <li><a href="#">协同教学<i class="fa fa-circle color-light-red ml10 font-12" ></i></a></li>
        <li><a href="#">开源学院<i class="fa fa-circle color-light-red ml10 font-12" ></i></a></li>
        <li><a href="#">课程模板<i class="fa fa-circle color-light-red ml10 font-12" ></i></a></li>
      </ul>
      <div class="fl ml20">
        <img src="images/bigdata/edu-index/edu-index-img01.jpg" class="mt30"  width="473" height="294">
      </div>
      <ul class="fl edu-index-show-ul ml25">
        <li><a href="#"><i class="fa fa-circle color-light-red mr10 font-12" ></i>在线编程</a></li>
        <li><a href="#"><i class="fa fa-circle color-light-red mr10 font-12" ></i>边学边练</a></li>
        <li><a href="#"><i class="fa fa-circle color-light-red mr10 font-12" ></i>案例解析</a></li>
        <li><a href="#"><i class="fa fa-circle color-light-red mr10 font-12 " ></i>积分排行</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="edu-index-show edu-index-bg-grey">
  <div class="edu-index-show-con">
    <h3>智能化实训项目</h3>
    <p class="font-16 color-grey">提升实践技能，测评动手能力，让同学们在游戏中实现快速提升</p>
    <div class="edu-index-list clearfix">
      <% @shixuns.each_with_index do |shixun, index| %>
          <div class="edu-index-list-box fl <%= color_change index %>">
            <div class="task-index-list-box-top">
              <h3 class="edu-index-list-title task-hide mb15 ml10"><%= link_to shixun.name, shixun_path(shixun), :target => "_blank" %></h3>
              <div class=" clearfix edu-index-list-user">
                <%= link_to image_tag(url_to_avatar(shixun.owner), :width =>"60", :height => "60", :class => "mr10  fl", :alt=>"头像"), user_path(shixun.owner), :target => "_blank" %>
                <%= link_to shixun.owner, user_path(shixun.owner), :class => "edu-index-name task-hide fl mr5", :target => "_blank"  %>
              </div>
            </div>
            <ul class="edu-index-list-bottom clearfix">
              <li><i class="fa fa-gamepad mr5" title="实训任务"></i><span><%= shixun.challenges.count %></span></li>
              <!--<li><i class="fa fa-comments-o mr5 "></i><span>1255</span></li>-->
              <li><i class="fa fa-users mr5" title="已开启实训"></i><span><%= shixun.myshixuns.count %></span></li>
            </ul>
          </div>
      <% end %>
    </div>
  </div>
</div>
<div class="edu-index-show">
  <div class="edu-index-show-con">
    <h3>实践性在线课堂</h3>
    <p class="font-16 color-grey">选择课程模板，秒建在线班级，让老师们在谈笑间实现课堂测评与管理</p>
    <div class="edu-index-list clearfix">
      <% @courses.each_with_index do |course, index| %>
          <div class="edu-index-list-box fl <%= color_change index %>">
            <div class="task-index-list-box-top">
              <h3 class="edu-index-list-title task-hide mb15 ml10"><%= link_to course.name, course_path(course), :target => "_blank" %></h3>
              <div class="clearfix edu-index-list-user">
                <%= link_to image_tag(url_to_avatar(course.teacher), :width =>"60", :height => "60", :class => "mr10 fl", :alt=>"头像"), user_path(course.teacher), :target => "_blank" %>
                <%= link_to course.teacher.show_name, user_path(course.teacher), :class => "edu-index-name task-hide fl mr5", :target => "_blank" %>
              </div>
            </div>
            <ul class="edu-index-list-bottom clearfix">
              <li><i class="fa fa-cubes mr5" title="资源"></i><span><%= welcome_course_file_count course %></span></li>
              <li><i class="fa fa-map mr5" title="题库"></i><span><%= welcome_course_message_count course.id %></span></li>
              <li><i class="fa fa-users mr5" title="成员"></i><span><%= course.members.count %></span></li>
            </ul>
          </div>
      <% end %>
    </div>
  </div>
</div>
<div class="edu-index-show edu-index-bg-grey">
  <div class="edu-index-show-con">
    <h3>合作伙伴</h3>
    <p class="font-16 color-grey">IT产业联盟，优势高校学科，技术专家群体，联手为创新人才培养筑巢
    </p>
    <div class="edu-index-parter clearfix">
      <ul>
        <li><a href="http://www.xtu.edu.cn/" target="_blank"><img src="images/footer_logo/p-xtdx.png"  width="210" alt="湘潭大学"></a></li>
        <li><a href="http://www.sei.pku.edu.cn/" target="_blank"><img src="images/footer_logo/p-PekingUniversity.png"  width="210" alt="北京大学"></a></li>
        <li><a href="http://scse.buaa.edu.cn/" target="_blank"><img src="images/footer_logo/p-BeiHang_university.png"  width="210"  alt="北京航空航天大学"></a></li>
        <li><a href="http://www.iscas.ac.cn/" target="_blank"><img src="images/footer_logo/p-iscas.png"  width="210" alt="ISCAS"></a></li>
        <li><a href="http://www.nju.edu.cn/" target="_blank"><img src="images/footer_logo/p-nju.png"  width="210"  alt="南京大学"></a></li>
        <li><a href="http://www.nudt.edu.cn/" target="_blank"><img src="images/footer_logo/p-nudt.png" width="210" alt="国防科技大学"></a></li>
        <li><a href="javascript:void(0)"><img src="images/footer_logo/p-zgkyrj.png"  width="210"  alt="中国开源软件推进联盟"></a></li>
        <li><a href="https://www.ucloud.cn/" target="_blank"><img src="images/footer_logo/p-ucloud.png"  width="210"  alt="ucloud"></a></li>
      </ul>
    </div>

  </div>
</div>