<!--
 * @Author: your name
 * @Date: 2021-10-26 09:03:16
 * @LastEditTime: 2021-11-30 08:41:27
 * @LastEditors: Please set LastEditors
 * @Description: 生产经营 - 面板
 * @FilePath: \hyyfScreen\src\views\Production\board\ProBoard.vue
-->
<template>
  <div class="pro-board">
    <div class="title" @click="ifClick">
      <div class="title-left"></div>
      <div class="title-center">{{ title }}</div>
      <div class="title-right"></div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    click: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    ifClick() {
      if (this.click) {
        this.$emit("getClick");
      }
    },
  },
};
</script>
<style scoped>
.pro-board {
  width: 100%;
  height: 100%;
  position: relative;
  /* background-color: rgb(8, 204, 8); */
}

/* 标题 */
.title {
  width: 100%;
  height: 26px;
  display: flex;
}
.title-left {
  width: 325px;
  height: 26px;
  background: url("../../../assets/BioSafety/u1717.svg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.title-left::before {
  content: "";
  height: 85%;
  border: 2px solid #66ffff;
  position: absolute;
  top: 0;
  left: 0;
}
.title-center {
  padding: 0 15px;
  width: 130px;
  height: 26px;
  background: url("../../../assets/BioSafety/u1719.svg") no-repeat;
  background-size: 100% 100%;
  line-height: 26px;
  color: white;
  font-size: 12px;
}
.title-right {
  width: 325px;
  height: 26px;
  background: url("../../../assets/BioSafety/u1718.svg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.title-right::after {
  content: "";
  height: 85%;
  border: 2px solid #66ffff;
  position: absolute;
  top: 0;
  right: 0;
}
.content {
  width: 100%;
  height: 90%;
  text-align: left;
}
</style>
