按钮和灰色背景问题

src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue

@@ -2,11 +2,12 @@
   <div id="container_max" class="logicalClass">
     <div class="logicalHead">
       <div class="logicalBtns">
-        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
-        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
+        <el-button type="primary" @click="refresh">刷新</el-button>
+        <el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
       </div>
     </div>
+    <el-divider />
     <div class="logicalBody">
       <el-table
         :data="dataList"
@@ -394,6 +395,12 @@ export default {
 
 <style lang="scss">
 .logicalClass{
+  .el-divider--horizontal{
+    padding-top: 10px;
+    margin: 0!important;
+    height: 14px!important;
+    background-color: #F1F1F1!important;
+  }
   .el-input__inner{
     padding: 0 0 0 9px;
   }
@@ -401,6 +408,7 @@ export default {
     padding: 5px 0;
   }
   .logicalBody{
+    padding: 10px;
     .name-icon{
       width: 20px;
       height: 20px;
@@ -418,8 +426,8 @@ export default {
   .logicalHead{
     height: 58px;
     padding: 15px 20px 10px 20px;
-    background-color: #edeef3 !important;
-    border-bottom: 1px solid #DBDDE3;
+    //background-color: #edeef3 !important;
+    //border-bottom: 1px solid #DBDDE3;
     .logicalBtns{
       float: right;
       .headBtn{

src/views/IntegratedMonitor/viewExhibition/monitorView.vue

 <template>
   <div  id="container_max" class="monitorView">
     <div class="warnHead">
+      <el-form ref="searchForm" :inline="true" label-width="auto" :model="searchForm">
+        <el-form-item label="设备标题:">
+          <el-select
+            v-model="searchForm.title"
+          >
+            <el-option value="名称" label="名称" />
+            <el-option value="ip地址" label="ip地址" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态:">
+          <el-select
+            v-model="searchForm.type"
+          >
+            <el-option value="故障" label="故障" />
+            <el-option value="危险" label="危险" />
+            <el-option value="正常" label="正常" />
+          </el-select>
+        </el-form-item>
+        <el-button type="primary">查询</el-button>
+      </el-form>
       <div class="warnBtns">
-        <el-button class="headBtn" @click="handleAdd">添加</el-button>
-        <el-button class="headBtn" @click="handleAdd">修改</el-button>
-        <el-button class="headBtn">删除</el-button>
-        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button  v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
-        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
+        <el-button type="primary" @click="handleAdd">添加</el-button>
+        <el-button type="primary" @click="handleAdd">修改</el-button>
+        <el-button type="primary">删除</el-button>
+        <el-button type="primary" @click="refresh">刷新</el-button>
+        <el-button  v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
       </div>
     </div>
+    <el-divider />
     <div class="monitorViewBody">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="设备视图" name="first">
@@ -55,27 +76,8 @@
           </el-table>
         </el-tab-pane>
         <el-tab-pane name="searchBtn">
-          <span slot="label">
-            <el-form ref="searchForm" :inline="true" label-width="auto" :model="searchForm">
-              <el-form-item label="设备标题:">
-                <el-select
-                  v-model="searchForm.title"
-                >
-                  <el-option value="名称" label="名称" />
-                  <el-option value="ip地址" label="ip地址" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="状态:">
-                <el-select
-                  v-model="searchForm.type"
-                >
-                  <el-option value="故障" label="故障" />
-                  <el-option value="危险" label="危险" />
-                  <el-option value="正常" label="正常" />
-                </el-select>
-              </el-form-item>
-            </el-form>
-          </span>
+<!--          <span slot="label">-->
+<!--          </span>-->
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -238,6 +240,12 @@ export default {
 
 <style lang="scss">
 .monitorView{
+  .el-divider--horizontal{
+    padding-top: 10px;
+    margin: 0!important;
+    height: 14px!important;
+    background-color: #F1F1F1!important;
+  }
   .name-icon{
     width: 20px;
     height: 20px;
@@ -272,10 +280,12 @@ export default {
     }
   }
   .warnHead{
+    display: flex;
+    justify-content: space-between;
     height: 58px;
     padding: 15px 20px 10px 20px;
-    background-color: #edeef3 !important;
-    border-bottom: 1px solid #DBDDE3;
+    //background-color: #edeef3 !important;
+    //border-bottom: 1px solid #DBDDE3;
     .warnBtns{
       float: right;
       .headBtn{

src/views/IntegratedMonitor/viewExhibition/stateStatistics.vue

@@ -2,14 +2,15 @@
   <div id="container_max" class="stateModule">
     <div class="warnHead">
       <div class="warnBtns">
-        <el-button class="headBtn" @click="handleAdd">添加</el-button>
-        <el-button class="headBtn" @click="handleAdd">修改</el-button>
-        <el-button class="headBtn">删除</el-button>
-        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
-        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
+        <el-button type="primary"  @click="handleAdd">添加</el-button>
+        <el-button type="primary"  @click="handleAdd">修改</el-button>
+        <el-button type="primary">删除</el-button>
+        <el-button type="primary" @click="refresh">刷新</el-button>
+        <el-button type="primary" v-if="!fullscreen" id="fullscreen_btn" >全屏</el-button>
+        <el-button type="primary" v-if="fullscreen" id="fullscreen_btn2" >取消全屏</el-button>
       </div>
     </div>
+    <el-divider />
     <div style="padding: 15px 40px 15px;">
       <div class="bar-header">
         <span class="header-pre" />
@@ -439,6 +440,12 @@ export default {
 
 <style lang="scss">
 .stateModule{
+  .el-divider--horizontal{
+    padding-top: 10px;
+    margin: 0!important;
+    height: 14px!important;
+    background-color: #F1F1F1!important;
+  }
   .columLabel{
     padding: 8px;
   }
@@ -456,8 +463,8 @@ export default {
   .warnHead{
     height: 58px;
     padding: 15px 20px 10px 20px;
-    background-color: #edeef3 !important;
-    border-bottom: 1px solid #DBDDE3;
+    //background-color: #edeef3 !important;
+    //border-bottom: 1px solid #DBDDE3;
     .warnBtns{
       float: right;
       .headBtn{

src/views/IntegratedMonitor/warning/warningSetup.vue

@@ -2,15 +2,16 @@
   <div id="container_max" class="warnModule">
     <div class="warnHead">
       <div class="warnBtns">
-        <el-button class="headBtn" @click="handleAdd">添加</el-button>
-        <el-button class="headBtn" @click="handleUpdate">编辑</el-button>
-        <el-button class="headBtn">删除</el-button>
-        <el-button class="headBtn">禁止</el-button>
-        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button  v-if="!fullscreen" id="fullscreen_btn" class="headBtnW">全屏</el-button>
-        <el-button v-if="fullscreen" id="fullscreen_btn2" class="headBtnW">取消全屏</el-button>
+        <el-button type="primary" @click="handleAdd">添加</el-button>
+        <el-button type="primary" @click="handleUpdate">编辑</el-button>
+        <el-button type="primary">删除</el-button>
+        <el-button type="primary">禁止</el-button>
+        <el-button type="primary" @click="refresh">刷新</el-button>
+        <el-button  v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
+        <el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
       </div>
     </div>
+    <el-divider />
     <div class="warnBody">
       <span style="font-size:24px;margin-right: 10px ">告警设置</span>
       <el-link type="primary" @click="addWarn">新增告警</el-link>
@@ -331,6 +332,12 @@ export default {
 
 <style lang="scss">
 .warnModule{
+  .el-divider--horizontal{
+    padding-top: 10px;
+    margin: 0!important;
+    height: 14px!important;
+    background-color: #F1F1F1!important;
+  }
   .strategyRow{
     padding: 5px 0;
   }
@@ -361,8 +368,8 @@ export default {
 .warnHead{
   height: 58px;
   padding: 15px 20px 10px 20px;
-  background-color: #edeef3 !important;
-  border-bottom: 1px solid #DBDDE3;
+  //background-color: #edeef3 !important;
+  //border-bottom: 1px solid #DBDDE3;
   .warnBtns{
     float: right;
     .headBtn{

src/views/assetManagement/assetList.vue

@@ -3,13 +3,14 @@
     <div class="assetListHead">
       <div class="assetListTitle">资产清单</div>
       <div class="warnBtns">
-        <el-button class="headBtn" @click="addAsset">新增</el-button>
-        <el-button class="headBtn" @click="deleteRow">删除</el-button>
-        <el-button class="headBtn">更多</el-button>
-        <el-button class="headBtnW" @click="refresh">刷新</el-button>
-        <el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
+        <el-button type="primary" @click="addAsset">新增</el-button>
+        <el-button type="primary" @click="deleteRow">删除</el-button>
+        <el-button type="primary">更多</el-button>
+        <el-button type="primary" @click="refresh">刷新</el-button>
+        <el-button id="fullscreen_btn" type="primary">全屏</el-button>
       </div>
     </div>
+    <el-divider />
     <div class="assetListBody">
       <el-row :gutter="12">
         <el-col :span="6">
@@ -287,11 +288,17 @@ export default {
 
 <style lang="scss">
 .assetListMoudle{
+  .el-divider--horizontal{
+    padding-top: 10px;
+    margin: 0!important;
+    height: 14px!important;
+    background-color: #F1F1F1!important;
+  }
 .assetListHead{
     height: 58px;
     padding: 15px 20px 10px 20px;
-    background-color: #edeef3 !important;
-    border-bottom: 1px solid #DBDDE3;
+    //background-color: #edeef3 !important;
+    //border-bottom: 1px solid #DBDDE3;
   .assetListTitle{
     float: left;
     font-size: 24px;