<template>
  <div>
    <div class="box" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
      <n-layout>
        <n-layout has-sider>
          <n-layout-content class="sm:w-[90vh] w-[70%]" :content-style="{ height: `calc(100vh - ${size.menuH}px)`,backgroundColor:'#f1f2f3' }">
            <n-scrollbar class="" trigger="hover" :style="{ height: `calc(100vh - ${size.menuH}px)` }">
              <search></search>
              <NavMenu />
            </n-scrollbar>
          </n-layout-content>
          <n-layout-sider class="sm:hidden" :content-style="{width: '30vw',height: `calc(100vh - ${size.menuH}px)`,overflow:'hidden',backgroundColor:'#f1f2f3' }">
            <Suspense>
              <side />
            </Suspense>
          </n-layout-sider>
        </n-layout>
      </n-layout>
    </div>
    <aplayerView></aplayerView>
    <foot />
  </div>
</template>

<script setup>
import aplayerView from "@/components/aplayerView.vue";
import foot from "@/components/foot.vue";
import { usesizeStore } from "@/stores/size.js";
import NavMenu from "./navMenu.vue";
import search from './search.vue';
import side from './side.vue';

const size = usesizeStore();
const artList = ref([])


//mark 周期、内置函数等
onMounted(async () => {
  const res = await $http.art.queryArt()
  artList.value = res.data
})
</script>

<style scoped>

:deep(.n-layout-sider) {
  width: unset !important;
  max-width: unset !important;
}

:deep(.n-scrollbar-rail) {
  display: none !important;
}
</style>
