feixinyun/pages/developer.vue

<template>
  <div class="developer">
    <div class="developer-left developer-content">
      <DocumentMuen @onMuenContent="e => contentKey = e"/>
    </div>
    <div class="developer-right developer-content">
      <DocumentContent v-if="contentKey"/>
      <DefaultDocument v-else/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import DocumentMuen from "@/components/DocumentMuen/index.vue";
const contentKey = ref(0)
</script>

<style scoped lang="scss">
.developer {
  width: 100%;
  height: 100vh;
  padding-top: var(--nav-height);
  display: flex;
  align-items: stretch;
  overflow-x: hidden;
  .developer-content {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
  .developer-left {
    width: 323px;
    height: 100%;
    // margin-right: -40px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 9px 3px rgb(245, 245, 245);
  }
  .developer-right {
    flex: 1;
    margin-right: -37px;
    padding: var(--size-45) var(--size-100) var(--size-85);
  }
}
</style>