<template>
  <div class="screen-header">
    <Back class="header-back" color="#fff" @click="back" />
    <dv-decoration-8 style="width: 300px; height: 30px" />
    <div class="screen-header-item">
      <div
        class="header-title"
        :style="{ fontSize: bigScreenData.fontSize * 4 + 'px' }"
      >
        {{ title }}
      </div>
      <dv-decoration-5 style="width: 500px; height: 30px" />
    </div>
    <dv-decoration-8 :reverse="true" style="width: 300px; height: 30px" />
  </div>
</template>

<script lang="ts" setup>
import { Back } from "@element-plus/icons-vue";
import { useFullscreen } from "@vueuse/core";
const bigScreenData: any = inject("bigScreenData");
const el = ref<HTMLElement>();
const { isFullscreen, toggle, enter, exit } = useFullscreen(el);

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});

const router = useRouter();
const back = () => {
  router.back();
  exit();
};
</script>

<style lang="scss" scoped></style>
