<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title />
        <div class="detail"></div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { watchEffect, ref } from "vue";
import { useFullscreen } from "@vueuse/core";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import { useInfoStore } from "../store/info";
const title = ref("detail");

watchEffect(() => {
  document.title = title.value;
});
</script>

<style lang="scss" scoped>
.left {
  background-color: rgba(0, 0, 0, 0.05) !important;
}
.detail {
  margin: 1.875rem;
  flex: 1;
  height: 100%;
  border-radius: 0.8125rem;
  background: #fff;
}
</style>
