HomeView.vue 807 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <div class="main-container">
  3. <div class="index-nav">
  4. <AppSidebar></AppSidebar>
  5. </div>
  6. <router-view />
  7. </div>
  8. </template>
  9. <script>
  10. import AppSidebar from '@/components/AppSidebar.vue'
  11. export default {
  12. name: 'HomeView',
  13. components: {
  14. AppSidebar
  15. }
  16. }
  17. </script>
  18. <style scoped>
  19. .main-container{
  20. position: relative;
  21. margin: 0 auto;
  22. width: 100%;
  23. max-width: 1200px;
  24. margin-top: 1.66rem;
  25. display: flex;
  26. }
  27. .index-nav{
  28. width: 180px;
  29. position: -webkit-sticky;
  30. position: sticky;
  31. top: 80px;
  32. margin-right: 20px;
  33. height: -webkit-fit-content;
  34. height: -moz-fit-content;
  35. height: fit-content;
  36. border-radius: 4px;
  37. background-color: var(--juejin-font-white);
  38. max-height: calc(100vh - 101px);
  39. overflow-x: hidden;
  40. }
  41. </style>