基于SpringBoot打造在线教育系统（6）-- 二级分类模块UI篇

剽悍一小兔

发布于 2021-01-14 15:06:02

4450

发布于 2021-01-14 15:06:02

文章被收录于专栏：web编程技术分享

这一节来做二级分类，为了快速开发，一级分类只做新增，暂时不考虑修改和删除，如果一定要删，就去数据库删吧。

我们接下来，需要通过一级分类，获取所有的二级分类。

开始之前，需要给Type加一个orderNum字段，我们需要用它来做排序。别忘了生成setter和getter。

ok，现在来重新设计一下main区域吧。

main区域应该是这样的，由上面一个面包屑导航，下面是一块一块的二级分类组成。

css:

.el-main {
    background-color: #fff;
    color: #333;
}
.heading {
    height: 42px;
    margin: 0 !important;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    border-color: #ddd;
    font-size: 15px;
}

改造后的el-main:

<!-- 主区域 -->
   <el-main style="overflow: hidden;">
     <div style="height:100%;border:1px solid #ccc;">
        <el-row :gutter="20" class="heading">
      <el-col :span="4" style="line-height:42px;">
          <div class="grid-content bg-purple">
            <i class="el-icon-s-grid"></i>Java基础
          </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
            
        </div>
      </el-col>
    </el-row>
     </div>

使用el-row来做栅格布局。

接下来就是下面的部分，我们用面板。

elementUI提供了对应的组件，我们改造一下。

<el-row :gutter="20" style="margin:30px 16px;">
    <el-col :span="6">
        <el-card class="box-card" shadow="hover" style="height:150px;" body-style="">
          <div slot="header" class="clearfix card-header">
            <span><i class="el-icon-document"></i></span>
            <div class="cardname" type="text">[HelloWorld]</div>
          </div>
          <div class="text item">
            开始我们的第一个Java程序吧~先下载JDK，然后安装。
          </div>
        </el-card>
    </el-col>
</el-row>

开整css：

/** 卡片相关 * */
.box-card {
    cursor:pointer;
}

.el-card__header {
     padding: 8px 6px;
     color: #333;
     background:#f5f5f5;
}

.el-card__header i {
    font-size:18px;
    font-weight:bold;
}

.cardname {
    float: right; 
    padding: 3px 0; 
    font-weight: bold;
    color:#333;
}

效果：

我们用了栅格布局，一行摆四个，它会根据屏幕宽度自适应的，和bootstrap是一样的路子，很简单。

要不再给它加一个页签，也就是排序号。本来想用el-tag标签的，但是看起来花里胡哨的，反而不够清爽，我就改成span了。

.ordernum {
    position: absolute;
    right: 10px;
    bottom:8px;
    color:#666;
    font-size:14px;
}

这个span直接放到el-card里面。

<span class="ordernum">1</span>

效果：

我们还可以做一些有趣的操作，比如，逼死强迫症系列，哈哈。

<el-row :gutter="20" style="margin:30px 16px;">
    <el-col :span="6">
        <el-badge :value="12" class="item">
            <el-card class="box-card" shadow="hover" style="height:150px;" body-style="">
              <div slot="header" class="clearfix card-header">
                <span><i class="el-icon-document"></i></span>
                <div class="cardname" type="text">[HelloWorld]</div>
              </div>
              <div class="text item">
                开始我们的第一个Java程序吧~先下载JDK，然后安装。
              </div>
              <span class="ordernum">1</span>
            </el-card>
        </el-badge>
    </el-col>
</el-row>

稍微美化一下那个序号。

.ordernum {
    position: absolute;
    right: 10px;
    bottom:8px;
    font-size:14px;
    color: #b58989;
    background-color: #f1f1f1;
    border-radius: 10px;
    padding: 2px 6px;
}