fair-web/views/practice.ejs

<% this.title = '练习' %>
<style>
    .practice{
        display: flex;
        width: 100%;
    }
    .practice .practice-main{
        width: 80%;
        margin-right: 30px;
    }
    .practice .practice-main .practice-main-navigation{
        margin-bottom: 10px;
        background-color: #efefef;
        padding: 10px;
    }
    .practice .practice-main .practice-main-navigation .classify-card{
        width: 90px;
        height: 90px;
        display: inline-block;
        margin: 5px;
        vertical-align: top;
        cursor: pointer;
        background-color: red;
    }
    .practice .practice-main .practice-main-navigation .classify-card small{
        font-size: 12px;
        color: #fff;
        display: block;
    }
    .practice .practice-main .practice-main-navigation .classify-card .classify-name{
        text-align: center;
        line-height: 50px;
        color: white;
    }
    .practice .practice-main .practice-main-body{
        background-color: #efefef;
        padding: 10px;
    }
    .practice .practice-main .practice-main-body .classify-card{
        margin-bottom: 20px;
    }
    .practice .practice-main .practice-main-body .classify-card .classify-card-title{
        margin-bottom: 10px;
    }
    .practice .practice-main .practice-main-body .classify-card .classify-card-description{
        border-bottom:1px solid #e4e4e4;
        margin-bottom: 10px;
        padding-bottom: 5px;
    }
    .practice .practice-main .practice-main-body .classify-card .classify-card-problem{
        border-top:1px solid #e4e4e4;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .practice .practice-main .practice-main-body .classify-card .classify-card-problem .problem{
        border-radius: 5px;
        width: 30%;
        background-color: white;
        margin: 10px;
        height: 100px;
        overflow: hidden;
        cursor: pointer;
    }
    .practice .practice-main .practice-main-body .classify-card .classify-card-problem .problem .problem-title{
        text-align: center;
        padding: 5px 0;
        color: #14a6ef;
        background-color: rgba(59,180,242,.15);
        border-color: #caebfb;
    }
    .practice .practice-main .practice-main-body .classify-card .classify-card-problem .problem .problem-info{
        font-size: 13px;
        padding: 5px;
    }
    .practice .practice-right{
        width: 300px;
        padding: 30px 10px;
        height:200px;
        background-color: #efefef;
    }
    .practice .practice-right .username{
        color:#3590D2;
    }
</style>
<% include header %>
<div class="practice">
  <div class="practice-main">
      <div class="practice-main-navigation">
          <div class="classify-card">
              <small>#1</small>
              <div class="classify-name">分类名字</div>
          </div>
          <div class="classify-card">
              <small>#1</small>
              <div class="classify-name">分类名字</div>
          </div>
      </div>
      <div class="practice-main-body">
          <div class="classify-card">
              <div class="classify-card-title">
                  <h2>测试分类</h2>
              </div>
              <div class="classify-card-description">
                  测试分类的介绍
              </div>
              <div class="ui indicating progress" data-value="124" data-total="200">
                  <div class="bar">
                      <div class="progress"></div>
                  </div>
                  <div class="label">当前分类完成进度</div>
              </div>
              <div class="classify-card-problem">
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介发送到发送到范德萨发士大夫撒打发斯蒂芬
                      </div>
                  </div>
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介
                      </div>
                  </div>
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介
                      </div>
                  </div>
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介
                      </div>
                  </div>
              </div>
          </div>
          <div class="classify-card">
              <div class="classify-card-title">
                  <h2>测试分类</h2>
              </div>
              <div class="classify-card-description">
                  测试分类的介绍
              </div>
              <div class="ui indicating progress" data-value="1" data-total="200">
                  <div class="bar">
                      <div class="progress"></div>
                  </div>
                  <div class="label">当前分类完成进度</div>
              </div>
              <div class="classify-card-problem">
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介发送到发送到范德萨发士大夫撒打发斯蒂芬
                      </div>
                  </div>
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介
                      </div>
                  </div>
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介
                      </div>
                  </div>
                  <div class="problem">
                      <div class="problem-title">
                          第一个问题
                      </div>
                      <div class="problem-info">
                          题目简介简介题目简介简介题目简介简介题目简介简介题目简介简介
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="practice-right">
      <h1 class="username">用户名</h1>
      <p>已通过数/分类总题数：5/20</p>
  </div>
</div>

<script>
  function getColor() {
    let colorArray =["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
    let color="#";
    for(let i=0;i<6;i++) {
      color+=colorArray[Math.floor(Math.random()*16)];
    }
    return color;
  }
</script>
<% include footer %>