ruoyi实用性改造--（二）ruoyi实用性美化记录

一、将tab页中操作区的底色变为亮灰色

ruoyi-ui/src/layout/index.vue 中

<app-main/>改为<app-main style="background: #EEE"/>

二、对应的将form加上底色加边角弧度

ruoyi-ui/src/assets/styles/ruoyi.scss

.el-form{
  border-radius: 3px;
  padding:10px;
  background:#FFF;
  margin-bottom: 10px;
}
.el-table {}中添加以下：
  border-radius: 3px;
  padding:0px;
  background:#FFF;

三、对应的将表格加上底色加边角弧度

先将src/main/resources/vm/vue/index.vue.vm中表格对应的操作区、表格、分页操作区合入一个div，再对 div 美化。

<div style="padding: 0px;background: #FFF;border-radius: 3px;">．．．<div/>

四、将表格附属按纽添加左空间和顶空间

<el-row :gutter="10" class="mb8" style="padding-left: 10px">

顶空间由上面的form中实现：margin-bottom: 10px;

五、分页底色修正

.pagination-container {
  position: relative;
  height: 46px;
  margin-bottom: 10px;
  margin-top: 2px;
  padding: 10px 20px !important;
}

六、弹出窗标题行加底色

ruoyi-ui/src/assets/styles/ruoyi.scss

.el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
  background: cornflowerblue;
}