CodingSouls团队-个人博客(七 )

今天是团队开发冲刺的第七天:

  昨天完成了首页的设计。

  今日任务:讨论的主界面设计

 有效时间:3h   代码行数:93

 1 <% this.title = '讨论' %>
 2 <% include header %>
 3 <div class="padding">
 4   <div class="ui grid">
 5     <div class="row">
 6       <div class="ten wide column">
 7         <div class="ui breadcrumb">
 8           <div class="section">讨论</div>
 9           <i class="right angle icon divider"></i>
10           <% if (problem) { %>
11             <div class="section"><a href="#">题目</a></div>
12             <i class="right angle icon divider"></i>
13             <div class="active section"><%= problem.title %></div>
14           <% } else if (in_problems) { %>
15             <div class="section">题目</div>
16           <% } else { %>
17             <div class="section">全局板块</div>
18           <% } %>
19         </div>
20       </div>
21       <div class="six wide right aligned column" style="margin-bottom: 10px; ">
22         <% if (in_problems) { %>
23           <a style="margin-left: 10px; " href="#" class="ui labeled icon mini blue button">
24             <i class="world icon"></i>
25             全局板块
26           </a>
27         <% } else { %>
28           <% if (problem) { %>
29             <a style="margin-left: 10px; " href="#" class="ui labeled icon mini blue button">
30               <i class="arrow left icon"></i>
31               返回题目
32             </a>
33           <% } else { %>
34             <a style="margin-left: 10px; " href="#" class="ui labeled icon mini blue button">
35               <i class="file outline icon"></i>
36               题目板块
37             </a>
38           <% } %>
39           <% if (articles.length && user) { %>
40           <a style="margin-left: 10px; " href="#" class="ui labeled icon mini button">
41               <i class="write icon"></i>
42               发帖
43           </a>
44           <% } %>
45         <% } %>
46       </div>
47     </div>
48   </div>
49   <% if (articles.length) { %>
50   <table class="ui very basic center aligned table">
51     <thead>
52       <tr>
53         <th class="left aligned" style=" 45%; ">标题</th>
54         <% if (in_problems) { %>
55           <th style=" 20%; ">所属题目</th>
56         <% } %>
57         <th style=" 10%; ">作者</th>
58         <th style=" 10%; ">回复数</th>
59         <th style=" 15%; ">最新回复</th>
60       </tr>
61     </thead>
62     <tbody>
63     <% for (let article of articles) { %>
64         <tr>
65             <td class="left aligned"><a href="#"><%= article.title %></a></td>
66             <% if (in_problems) { %>
67               <td><a href="#"><%= article.problem.title %></a></td>
68             <% } %>
69             <td><a href="#"><%= article.user.username %></a><% if (article.user.nameplate) { %><%- article.user.nameplate %><% } %></td>
70             <td><%= article.comments_num %></td>
71             <td><%= syzoj.utils.formatDate(article.sort_time) %></td>
72         </tr>
73     <% } %>
74     </tbody>
75   </table>
76   <br>
77   <% include page %>
78   <% } else { %>
79   <div class="ui placeholder segment">
80     <div class="ui icon header">
81       <i class="chat icon" style="margin-bottom: 20px; "></i>
82       暂无讨论
83     </div>
84     <% if (!in_problems && user) { %>
85     <a href="#" class="ui primary labeled icon button">
86       <i class="write icon"></i>
87       发帖
88     </a>
89     <% } %>
90   </div>
91   <% } %>
92 </div>
93 <% include footer %>
讨论主界面
原文地址:https://www.cnblogs.com/zwx655/p/12782517.html