DefaultDocument.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <div class="">
  3. <p class="headline">飞信云开发文档</p>
  4. <p class="subhead">请点击左侧目录查看文档详情</p>
  5. <div class="document-img">
  6. <img src="../assets/images/bg_06.png" alt="" />
  7. </div>
  8. <div class="fast-menu">
  9. <p class="menu-headline">快捷跳转</p>
  10. <div class="menu-list">
  11. <div class="menu-item one-row active-menu-item">目录名称1</div>
  12. <div class="menu-item one-row">目录名称1</div>
  13. <div class="menu-item one-row">目录名称1</div>
  14. </div>
  15. </div>
  16. </div>
  17. </template>
  18. <script setup>
  19. import {} from "vue";
  20. </script>
  21. <style scoped lang="scss">
  22. .headline {
  23. font-size: var(--size-32);
  24. font-weight: var(--weight-700);
  25. padding-bottom: var(--size-10);
  26. }
  27. .subhead {
  28. font-size: var(--size-16);
  29. padding-bottom: var(--size-24);
  30. }
  31. .document-img {
  32. width: 897px;
  33. height: 449px;
  34. }
  35. .fast-menu {
  36. padding-top: var(--size-30);
  37. .menu-headline {
  38. font-size: var(--size-24);
  39. font-weight: var(--weight-700);
  40. }
  41. .menu-list {
  42. display: flex;
  43. flex-direction: row;
  44. align-items: stretch;
  45. .menu-item {
  46. cursor: pointer;
  47. margin: var(--size-10) var(--size-10) 0 0;
  48. min-width: 128px;
  49. height: 45px;
  50. background: var(--color-06);
  51. border-radius: var(--size-6);
  52. text-align: center;
  53. line-height: 45px;
  54. padding: 0 var(--size-10);
  55. }
  56. .active-menu-item {
  57. background-color: var(--color-08);
  58. color: var(--color-04);
  59. }
  60. }
  61. }
  62. </style>