CodingSouls团队-个人博客（六）

今天是团队开发的第六天：

     昨天完成了代码的测试，召开了会议，整理代码。

     今天的任务是首页的开发，完成首页的基本布局和一些简单的功能，为队友的开发留出一些位置，以便和队友的代码相结合。

     有效编程时间3h，代码行数：140

     

<% this.title = '首页'; %>
<% include header %>
<div class="padding">
  <div class="ui three column grid">
    <div class="eleven wide column">
      <h4 class="ui top attached block header"><i class="ui info icon"></i>公告</h4>
      <div class="ui bottom attached segment">
        <table class="ui very basic table">
          <thead>
            <tr>
              <th>标题</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <% for (let item of notices) { %>
                <tr>
                    <td><a href="<%= item.url %>"><%= item.title %></a></td>
                    <td><%= item.date %></td>
                </tr>
            <% } %>
          </tbody>
        </table>
      </div>
      <h4 class="ui top attached block header"><i class="ui signal icon"></i>排名</h4>
      <div class="ui bottom attached segment">
        <table class="ui very basic center aligned table" style="table-layout: fixed; ">
          <thead>
            <tr>
                <th style=" 50px; ">#</th>
                <th style=" 170px; ">用户名</th>
                <th>个性签名</th>
            </tr>
          </thead>
          <script data-cfasync="false">
          var lineHeight = 0;
          (function () {
            var div = document.createElement('div');
            div.style.position = 'fixed';
            div.style.left = -10000;
            div.style.visibility = 'hidden';
            div.innerText = '测试，Test.';
            document.body.appendChild(div);
            lineHeight = div.clientHeight;
          })();
          </script>
          <tbody>
            <%
            let i = 0;
            for (let user of ranklist) {
              ++i;
            %>
                <tr>
                    <td><b><%= i %></b></td>
                    <td><a href="#"><%= user.username %></a>#</td>
                    <td style="font-content">
                      <script id="user-infomation-script-<%= i %>" data-cfasync="false">
                      (function () {
                        var html = <%- serializejs(user.information) %>;
                        var elem = document.createElement('div');
                        elem.style = 'overflow: hidden;  100%; position: relative; ';
                        elem.style.maxHeight = lineHeight + 'px';
                        elem.innerHTML = html;
                        var imgs = Array.prototype.slice.call(elem.getElementsByTagName('img'));
                        for (var i in imgs) imgs[i].parentNode.removeChild(imgs[i]);
                        var script = document.getElementById('user-infomation-script-<%= i %>');
                        script.parentNode.replaceChild(elem, script);
                      })();
                      </script>
                    </td>
                </tr>
             <%
            } %>
          </tbody>
        </table>
      </div>
    </div>
    <div class="right floated five wide column">
        <h4 class="ui top attached block header"><i class="ui quote left icon"></i>最近更新</h4>
        <div class="ui bottom attached center aligned segment">
          <table class="ui very basic center aligned table">
          <thead>
            <tr>
              <th width="70%">题目</th>
              <th width="30%">更新时间</th>
            </tr>
       </thead>
       <tbody>
         <%
        for (let problem of problems) {
        %>
         <tr>
           <td><a href="#"><%= problem.title %></a></td>
           <td><%= problem.time %></td>
         </tr>
         <% } %>
         </tbody>
        </table>
       </div>
      <h4 class="ui top attached block header"><i class="ui rss icon"></i>搜素题目</h4>
      <div class="ui bottom attached segment">
             <form action="#" method="get">
          <div class="ui search" style=" 100%; ">
            <div class="ui left icon input" style=" 100%; ">
              <input class="prompt" style=" 100%; " type="text" placeholder="ID / 题目名 …" name="keyword">
              <i class="search icon"></i>
            </div>
            <div class="results" style=" 100%; "></div>
            </div>
          </form>
      </div>

      <% if (typeof links !== 'undefined' && links && links.length) { %>
      <h4 class="ui top attached block header font-content"><i class="ui linkify icon"></i>友情链接</h4>
      <div class="ui bottom attached segment">
        <ul style="margin: 0; padding-left: 20px; ">
          <% for (let link of links) { %>
            <li><a href="<%= link.url %>"><%= link.title %></a></li>
          <% } %>
        </ul>
      </div>
      <% } %>
    </div>
  </div>
</div>
<script>
$(function () {
  $('.ui.search').search({
    debug: true,
    apiSettings: {
      url: '/api/v2/search/problems/{query}',
      cache: false
    },
    fields: {
      title: 'name'
    }
  });
});
</script>
<% include footer %>