<template>
  <div class="title-bg" :style="'width:' + props.width + '%'">
    <span class="title_icon"></span>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "TitleD",
});
</script>

<script lang='ts' setup>
const emits = defineEmits(["switch:change"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },

  swshow: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "100",
  },
});

const status = ref(true);
const changeStatus = (e: Boolean) => {
  emits("switch:change", e);
};
</script>

<style lang="scss" scoped>
.title-bg {
  position: relative;
  overflow: hidden;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: rgba(72, 77, 86, 0.66);
  margin: 5px 0;
}
.title_icon {
  width: 4px;
  height: 2px;
  background: #ff6200;
  opacity: 1;
  margin-right: 10px;
}
</style>
