From 36b1e19120dc317749b337bb57c7f7cf03a72599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Wed, 17 Sep 2025 14:52:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=9B=91=E6=8E=A7=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/common.scss            |  60 +++++++++-
 src/views/ems/dzjk/sbjk/bmsdcc/index.vue |   8 +-
 src/views/ems/dzjk/sbjk/bmszl/index.vue  |  59 +++++-----
 src/views/ems/dzjk/sbjk/db/index.vue     |  46 ++------
 src/views/ems/dzjk/sbjk/dtdc/index.vue   |   2 +-
 src/views/ems/dzjk/sbjk/pcs/index.vue    | 143 +++++++++--------------
 6 files changed, 158 insertions(+), 160 deletions(-)

diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index 7a7d78a..435ec15 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -26,18 +26,15 @@
       border-bottom: none;
       font-size: 12px;
       background: #F1F5FB ;
+      position: relative;
       .card-title{
         font-weight: 500;
         color:#333333;
       }
-      .large-title{
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 40px;
-      }
       .el-button--text{
         color: #666666;
       }
+
     }
 }
 .common-card-container-body-no-padding{
@@ -50,6 +47,59 @@
       background-color: transparent;
     }
 }
+//单站监控 设备监控card公共样式
+.sbjk-card-container{
+  .el-card__header {
+    background-color: transparent;
+    padding: 10px 14px;
+    color: #ffffff;
+    position: relative;
+    border-radius: 5px 5px 0 0;
+    .large-title{
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 40px;
+      padding: 0 50px 0 11px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .info {
+      display: inline-block;
+      vertical-align: middle;
+      color: #ffffff;
+      font-size: 12px;
+      line-height: 20px;
+    }
+    .el-button--text{
+      color: #666666;
+    }
+    .alarm{
+      position: absolute;
+      right: 25px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  //红色背景颜色标题
+  &.warning-card-container{
+    .el-card__header {
+      background-color: #fc6b69;
+    }
+  }
+  //绿色背景颜色标题
+  &.running-card-container {
+    .el-card__header {
+      background-color: #05aea3;
+    }
+  }
+  //灰色背景颜色标题
+  &.timing-card-container {
+    .el-card__header {
+      background-color: #666666;
+    }
+  }
+}
+
 /* card标题里的时间选择器 */
 .time-range-card {
   &.common-card-container .el-card__header {
diff --git a/src/views/ems/dzjk/sbjk/bmsdcc/index.vue b/src/views/ems/dzjk/sbjk/bmsdcc/index.vue
index c0e1ebf..cd19393 100644
--- a/src/views/ems/dzjk/sbjk/bmsdcc/index.vue
+++ b/src/views/ems/dzjk/sbjk/bmsdcc/index.vue
@@ -2,9 +2,13 @@
 <template>
   <div v-loading="loading">
     <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
+      <el-card shadow="always" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
+       :class="{
+        'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
+        'running-card-container':baseInfo.workStatus === '0'
+      }">
         <div slot="header">
-          <span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} -> ` : ''}}{{baseInfo.deviceName}}</span>
+          <span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{baseInfo.deviceName}}</span>
         </div>
           <div class="descriptions-main">
             <el-descriptions direction="vertical" :column="3" :colon="false">
diff --git a/src/views/ems/dzjk/sbjk/bmszl/index.vue b/src/views/ems/dzjk/sbjk/bmszl/index.vue
index c3466b2..391ea2e 100644
--- a/src/views/ems/dzjk/sbjk/bmszl/index.vue
+++ b/src/views/ems/dzjk/sbjk/bmszl/index.vue
@@ -2,20 +2,24 @@
 <template>
   <div v-loading="loading">
     <div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
+      <el-card :class="{
+        'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
+        'running-card-container':baseInfo.workStatus === '0'
+      }" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
+               shadow="always">
         <div slot="header">
           <span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
         </div>
         <div class="descriptions-main">
-          <el-descriptions direction="vertical" :column="3" :colon="false">
-            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
+          <el-descriptions :colon="false" :column="3" direction="vertical">
+            <el-descriptions-item :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
+            <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="与PCS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
+            <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="与EMS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
           </el-descriptions>
         </div>
         <div class="descriptions-main descriptions-main-bg-color">
-          <el-descriptions direction="vertical" :column="3" :colon="false">
-            <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
+          <el-descriptions :colon="false" :column="3" direction="vertical">
+            <el-descriptions-item  v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
               <span  class="pointer" @click="showChart(item.pointName || '','电池堆',baseInfo.deviceId)">
                 {{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
               </span>
@@ -24,20 +28,20 @@
           <!--        进度-->
           <div class="process-container">
             <div class="process-line-bg">
-              <div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
+              <div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
             </div>
             <div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
           </div>
         </div>
         <el-table
-          class="common-table"
           :data="baseInfo.batteryDataList"
-          stripe
+          class="common-table"
           max-height="500"
+          stripe
           style="width: 100%;margin-top:25px;">
           <el-table-column
-            prop="clusterId"
-            label="簇号">
+            label="簇号"
+            prop="clusterId">
           </el-table-column>
           <el-table-column
             label="簇电压"
@@ -59,26 +63,26 @@
             </template>
           </el-table-column>
           <el-table-column
-            prop="maxVoltage"
-            label="单体最高电压">
+            label="单体最高电压"
+            prop="maxVoltage">
             <template slot-scope="scope">
               <span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="maxCellVoltageId"
-            label="电池号码">
+            label="电池号码"
+            prop="maxCellVoltageId">
           </el-table-column>
           <el-table-column
-            prop="minVoltage"
-            label="单体最低电压">
+            label="单体最低电压"
+            prop="minVoltage">
             <template slot-scope="scope">
               <span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="minCellVoltageId"
-            label="电池号码">
+            label="电池号码"
+            prop="minCellVoltageId">
           </el-table-column>
           <el-table-column
             label="单体最高温度">
@@ -87,19 +91,19 @@
             </template>
           </el-table-column>
           <el-table-column
-            prop="maxCellTempId"
-            label="电池号码">
+            label="电池号码"
+            prop="maxCellTempId">
           </el-table-column>
           <el-table-column
-            prop="minTemperature"
-            label="单体最低温度">
+            label="单体最低温度"
+            prop="minTemperature">
             <template slot-scope="scope">
               <span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="minCellTempId"
-            label="电池号码">
+            label="电池号码"
+            prop="minCellTempId">
           </el-table-column>
 
         </el-table>
@@ -137,7 +141,6 @@ export default {
     }
   },
   methods:{
-    //todo 后续需要新增设备id
     showChart(pointName,categoryName,deviceId){
       console.log('点击查询图表',pointName,categoryName,deviceId)
       pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
@@ -157,7 +160,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 ::v-deep {
   //描述列表样式
   .descriptions-main {
diff --git a/src/views/ems/dzjk/sbjk/db/index.vue b/src/views/ems/dzjk/sbjk/db/index.vue
index 95f4271..6ce1f31 100644
--- a/src/views/ems/dzjk/sbjk/db/index.vue
+++ b/src/views/ems/dzjk/sbjk/db/index.vue
@@ -2,15 +2,15 @@
   <div v-loading="loading">
     <el-card
       shadow="always"
-      class="common-card-container"
+      class="sbjk-card-container"
       :class="{
-        'zb-common-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
-        'cnb-common-card-container':zbInfo.emsCommunicationStatus === '0'
+        'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
+        'running-card-container':zbInfo.emsCommunicationStatus === '0'
       }"
     >
       <div slot="header">
         <span class="large-title">1#{{ zbInfo.deviceName }}</span>
-        <div class="status">
+        <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
@@ -38,16 +38,16 @@
     </el-card>
     <el-card
       shadow="always"
-      class="common-card-container"
+      class="sbjk-card-container"
       style="margin-top: 20px"
       :class="{
-        'zb-common-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
-        'cnb-common-card-container':zbInfo.emsCommunicationStatus === '0'
+        'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
+        'running-card-container':zbInfo.emsCommunicationStatus === '0'
       }"
     >
       <div slot="header">
         <span class="large-title">2#{{ cnbInfo.deviceName }}</span>
-        <div class="status">
+        <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
@@ -137,12 +137,6 @@ export default {
 <style scoped lang="scss">
 .common-card-container {
   ::v-deep {
-    .el-card__header {
-      background-color: transparent;
-      padding: 10px 14px;
-      color: #ffffff;
-      position: relative;
-    }
     .el-table__row td{
       &:not(:first-child){
         .cell{
@@ -152,27 +146,5 @@ export default {
     }
   }
 }
-.zb-common-card-container{
-  ::v-deep {
-    .el-card__header {
-      background-color: #fc6b69;
-    }
-  }
-}
-.cnb-common-card-container {
-  ::v-deep {
-    .el-card__header {
-      background-color: #05aea3;
-    }
-  }
-}
-.status {
-  position: absolute;
-  right: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #ffffff;
-  font-size: 12px;
-  line-height: 20px;
-}
+
 </style>
diff --git a/src/views/ems/dzjk/sbjk/dtdc/index.vue b/src/views/ems/dzjk/sbjk/dtdc/index.vue
index d085e62..46c9ac2 100644
--- a/src/views/ems/dzjk/sbjk/dtdc/index.vue
+++ b/src/views/ems/dzjk/sbjk/dtdc/index.vue
@@ -2,7 +2,7 @@
   <el-card
     v-loading="loading"
     shadow="always"
-    class="common-card-container common-card-container-no-title-bg"
+    class="sbjk-card-container common-card-container-no-title-bg running-card-container"
   >
     <div slot="header">
       <span class="large-title">单体电池实时数据</span>
diff --git a/src/views/ems/dzjk/sbjk/pcs/index.vue b/src/views/ems/dzjk/sbjk/pcs/index.vue
index 11b2a7d..5e85d36 100644
--- a/src/views/ems/dzjk/sbjk/pcs/index.vue
+++ b/src/views/ems/dzjk/sbjk/pcs/index.vue
@@ -1,57 +1,66 @@
 
 <template>
-  <div class="pcs-ems-dashboard-editor-container" v-loading="loading">
+  <div v-loading="loading" class="pcs-ems-dashboard-editor-container">
 <!--    顶部六个方块-->
     <real-time-base-info :data="runningHeadData"/>
-<!--    内容-->
-    <el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
-<!--      背景颜色根据工作状态来展示-->
-      <el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
-        <div class="pcs-title">{{pcsItem.deviceName}}</div>
-        <div class="pcs-status">
-          <div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
-          <div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
+    <div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
+    <el-card :class="{
+        'warning-card-container':pcsItem.workStatus === '1',
+        'timing-card-container':pcsItem.workStatus === '2',
+        'running-card-container':!['1','2'].includes(pcsItem.workStatus)
+      }" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
+             shadow="always">
+        <div slot="header">
+          <span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
+          <div class="info">
+            <div>
+              {{
+                $store.state.ems.communicationStatusOptions[
+                    pcsItem.communicationStatus
+                    ]
+              }}
+            </div>
+            <div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
+          </div>
+          <div class="alarm">
+            <el-badge :value="pcsItem.alarmNum || 0" class="item">
+              <i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
+            </el-badge>
+          </div>
         </div>
-       <div class="pcs-btns">
-        <el-badge :value="pcsItem.alarmNum || 0" class="item">
-          <i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
-        </el-badge>
-       </div>
-      </el-header>
-      <el-main style="padding: 0">
-        <div class="descriptions-main">
-          <el-descriptions direction="vertical" :column="4" :colon="false">
-            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
-          </el-descriptions>
-        </div>
-        <div class="descriptions-main descriptions-main-bg-color">
-          <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
-            <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
+      <div class="descriptions-main">
+        <el-descriptions :colon="false" :column="4" direction="vertical">
+          <el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
+          <el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="descriptions-main descriptions-main-bg-color">
+        <el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
+          <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
               <span  class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
                 {{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
               </span>
-            </el-descriptions-item>
-          </el-descriptions>
-        </div>
-        <div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
-          <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep"  :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流功率">
-              <span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
-            </el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电压">
-              <span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
-            </el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电流">
-              <span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
-            </el-descriptions-item>
-          </el-descriptions>
-        </div>
-      </el-main>
-    </el-container>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
+        <el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
+          <el-descriptions-item :label="'支路'+(index+1)" :span="4"  contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="直流功率" labelClassName="descriptions-label">
+            <span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
+          </el-descriptions-item>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="直流电压" labelClassName="descriptions-label">
+            <span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
+          </el-descriptions-item>
+          <el-descriptions-item :span="1" contentClassName="descriptions-direction"  label="直流电流" labelClassName="descriptions-label">
+            <span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      </el-card>
+    </div>
     <el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
 <!--    电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
     <point-chart ref="pointChart" :site-id="siteId"/>
@@ -125,45 +134,5 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.pcs-container{
-  margin-top: 25px;
-  border:1px solid #eeeeee;
-  border-radius: 6px 6px 0 0;
-  //红色标题
-  .pcs-header{
-    background: #05AEA3;
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0;
-    height: 60px;
-    border-radius: 6px 6px 0 0;
-    .pcs-title{
-      color: #ffffff;
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 20px;
-      padding: 0 50px 0 25px;
-    }
-    .pcs-status{
-      color: #ffffff;
-      font-size: 12px;
-      line-height: 20px;
-    }
-    .pcs-btns{
-      position: absolute;
-      right: 25px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-  .pcs-header.warn{
-    background-color:#FC6B69 ;
-  }
-  .pcs-header.close{
-    background-color:#666666 ;
-  }
-}
+<style lang="scss" scoped>
 </style>