<template>
  <div class="box">
	  <img src="@/assets/images/line.png" class="line"/>
	  <div class="flexc tits">
	  	<img src="@/assets/images/tip.png" class="tip"/>
	  	<span class="tit">{{title}}</span>
	  	<div v-if="count" class="cont">本月告警<span>{{count}}</span>件</div>
	  </div>
    <div class="box-content">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
	count:{
		type: String,
		default: ''
	},
	
  },
  
};
</script>

<style lang="scss" scoped>
.flexc{display: flex;align-items: center;}
.box {
  .line{width: 100%;height: 2px;display: block;}
  .tits{padding: 0 14px;color: #FFFFFF;
	  .tip{width:14px;height: 11px;margin-right: 9px;flex: 0 0 auto;}
	  .tit{font-weight: 500;font-size: 16px;color: #FFFFFF;flex: 1;}
	  .cont{font-size: 14px;flex: 0 0 auto;
		span{ont-weight: bold;font-size: 14px;color: #00FFFF;}
	  }
  }
}
</style>
