developer.vue 1014 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div class="developer">
  3. <div class="developer-left developer-content">
  4. <DocumentMuen @onMuenContent="e => contentKey = e"/>
  5. </div>
  6. <div class="developer-right developer-content">
  7. <DocumentContent v-if="contentKey"/>
  8. <DefaultDocument v-else/>
  9. </div>
  10. </div>
  11. </template>
  12. <script lang="ts" setup>
  13. import DocumentMuen from "@/components/DocumentMuen/index.vue";
  14. const contentKey = ref(0)
  15. </script>
  16. <style scoped lang="scss">
  17. .developer {
  18. width: 100%;
  19. height: 100vh;
  20. padding-top: var(--nav-height);
  21. display: flex;
  22. align-items: stretch;
  23. overflow-x: hidden;
  24. .developer-content {
  25. height: 100%;
  26. overflow: hidden;
  27. overflow-y: auto;
  28. }
  29. .developer-left {
  30. width: 323px;
  31. height: 100%;
  32. // margin-right: -40px;
  33. flex-shrink: 0;
  34. overflow: hidden;
  35. box-shadow: 0 0 9px 3px rgb(245, 245, 245);
  36. }
  37. .developer-right {
  38. flex: 1;
  39. margin-right: -37px;
  40. padding: var(--size-45) var(--size-100) var(--size-85);
  41. }
  42. }
  43. </style>