<!-- 
    filename: rect.vue
    author: liubin
    date: 2023-09-08 10:02:48
    description: 
-->

<template>
  <div class="rect-container">
    <section class="title" v-if="title">
      <span class="icon" v-if="icon" :class="icon"></span>
      <span class="title__value">{{ title }}</span>
    </section>
    <section class="content">
      <slot />
    </section>
  </div>
</template>

<script>
export default {
  name: "RectContainer",
  components: {},
  props: ["icon", "title"],
  data() {
    return {};
  },
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
span {
  display: inline-block;
}

.rect-container {
  // background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
  padding: 24px;
  // width: 624px;
  // height: 304px;
  display: flex;
  flex-direction: column;
}

section.title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.title__value {
  font-size: 24px;
  letter-spacing: 1px;
  line-height: 1;
  color: #7ffff5;
}

section.content {
  height: 1px;
  flex: 1;
  overflow: visible;
}

.icon {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}

.icon-left-middle {
  background: url(../../../assets/icon-left-middle.png) no-repeat 100% / contain;
}

.icon-left-bottom {
  background: url(../../../assets/icon-left-bottom.png) no-repeat 100% / contain;
}

.icon-gas {
  background: url(../../../assets/icon-gas.png) no-repeat 100% / contain;
}

.icon-kiln-top {
  background: url(../../../assets/icon-kiln-top.png) no-repeat 100% / contain;
}

.icon-kiln-bottom {
  background: url(../../../assets/icon-kiln-bottom.png) no-repeat 100% / contain;
}

.icon-right-bottom {
  background: url(../../../assets/icon-right-bottom.png) no-repeat 100% /
    contain;
}

.icon-right-top {
  background: url(../../../assets/icon-right-top.png) no-repeat 100% / contain;
}
</style>
