提取公共的card样式

src/assets/styles/common.scss

@@ -18,3 +18,25 @@
 .ems-content-container-padding{
   padding: 24px;
 }
+
+//card通用样式 标题、body
+.common-card-container{
+    .el-card__header{
+      padding:14px;
+      border-bottom: none;
+      font-size: 12px;
+      background: #F1F5FB ;
+      .card-title{
+        font-weight: 500;
+        color:#333333;
+      }
+      .el-button--text{
+        color: #666666;
+      }
+    }
+}
+.common-card-container-body-no-padding{
+   .el-card__body{
+      padding:0;
+    }
+}

src/components/Ems/ZdBaseInfo/index.vue

@@ -2,7 +2,7 @@
 <!--首页、地图站点页面顶部信息方块-->
 <template>
   <el-row type="flex" >
-    <el-card shadow="hover" class="card" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
+    <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
       <div class="info">{{ item.title }}</div>
       <div class="num">{{item.num}}</div>
     </el-card>
@@ -46,9 +46,6 @@ export default {
   margin-right: 27px;
   border-bottom: 4px solid transparent;
   text-align: center;
-  ::v-deep .el-card__body{
-    padding:0;
-  }
   .info{
     color: #666666;
     line-height: 14px;

src/views/ems/home/DlzbChart.vue

@@ -1,36 +1,15 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">电量指标</span>
+      <span class="card-title">电量指标</span>
       <el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>
     </div>
     <div style="height: 360px" id="dlzbChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme

src/views/ems/home/GjdjfbChart.vue

@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">告警等级分布</span>
+      <span class="card-title">告警等级分布</span>
     </div>
     <div style="height: 360px" id="gjdjfbChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme

src/views/ems/home/GjqsChart.vue

@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">告警趋势</span>
+      <span class="card-title">告警趋势</span>
     </div>
     <div style="height: 360px" id="gjqsChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme

src/views/ems/home/SbgjzbChart.vue

@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">设备告警占比</span>
+      <span class="card-title">设备告警占比</span>
     </div>
     <div style="height: 360px" id="sbgjzbChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme

src/views/ems/home/XtxlChart.vue

@@ -1,35 +1,14 @@
 
 <template>
-  <el-card shadow="always" class="chart-card-container">
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
-      <span class="chart-title">系统效率</span>
+      <span class="card-title">系统效率</span>
     </div>
     <div style="height: 360px" id="xtxlChart"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.chart-card-container{
-  ::v-deep {
-    .el-card__header{
-      padding:14px;
-      border-bottom: none;
-      font-size: 12px;
-      background: #F1F5FB ;
-      .chart-title{
-        font-weight: 500;
-        color:#333333;
-      }
-      .el-button--text{
-        color: #666666;
-      }
-    }
-    .el-card__body{
-      padding:0;
-    }
-  }
-}
-</style>
 <script>
 import * as echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme

src/views/ems/zddt/index.vue

@@ -6,9 +6,9 @@
       <div class="zd-msg-container">
         <div class="zd-msg-top">
           <zd-select></zd-select>
-          <el-card class="single-zd-detail-container">
+          <el-card class="common-card-container">
             <div slot="header">
-              <span class="header-title">基本信息</span>
+              <span class="card-title">基本信息</span>
               <el-button style="float: right; padding: 3px 0" type="text" size="small">查看详情</el-button>
             </div>
             <div class="single-zd-name">上海电动工具所站</div>
@@ -92,13 +92,6 @@ export default {
   .zd-msg-container{
     width: 500px;
     padding: 24px;
-    ::v-deep .el-card__header{
-      background: #F1F5FB;
-      border-bottom: none;
-      .header-title{
-        font-weight: 500;
-      }
-    }
     .single-zd-name{
       font-weight: 500;
       line-height: 23px;