<template>
  <div class="view_home">
    <div class="main_top">
      <headerTop></headerTop>
    </div>
    <div class="main_">
      <div class="main_nav">
        <comNav></comNav>
      </div>
      <div class="main_content">
        <headerNav></headerNav>
        <div class="view_out_c">

          <RouterView />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import comNav from 'components/comNav/index.vue';
import headerTop from 'components/headerCom/headerTop.vue';
import headerNav from "components/headerCom/headerNav.vue"
</script>
  
<style scoped lang="scss">
.view_home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
      background-color:#f0f2f5;
  .main_top {
    height: $headerTopHeight;
  }

  .main_ {
    flex: 1;
    display: flex;
    justify-content: space-between;
    overflow: auto;

    .main_nav {
      width: 240px;
      background-color:#fff;
    }

    .main_content {
      width: 100%;
      overflow-y: auto;
      height: calc(100% - 4px);
      margin-left: 8px;
      display: flex;
      flex-direction: column;

      w &::-webkit-scrollbar {
        width: 2px;
      }

      &::-webkit-scrollbar-thumb {
        height: 6px;
        width: 2px;
        background-color: $main-color;
      }

      .view_out_c {
       
        width:calc(100% - 24px) ;
        flex: 1;
        margin: 12px;
        display:flex;
        flex-direction: column;
      }

    }
  }
}
</style>
  