App.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <script setup lang="ts">
  2. import { RouterView } from 'vue-router';
  3. import { NConfigProvider } from 'naive-ui';
  4. import type { GlobalThemeOverrides } from 'naive-ui';
  5. const primaryColor = '#1A2029';
  6. const themeOverrides: GlobalThemeOverrides = {
  7. common: {
  8. // primaryColor: '#2A68FF',
  9. },
  10. Menu: {
  11. itemTextColor: primaryColor,
  12. itemTextColorActive: primaryColor,
  13. itemTextColorActiveHover: primaryColor,
  14. itemTextColorChildActiveHover: primaryColor,
  15. itemTextColorChildActive: primaryColor,
  16. itemColorActive: '#FCFDFE',
  17. itemColorActiveHover: '#FCFDFE',
  18. arrowColorChildActive: primaryColor
  19. }
  20. // Menu: {
  21. // itemTextColorHorizontal: '#161616',
  22. // itemTextColorHoverHorizontal: '#2A68FF',
  23. // itemTextColor: '#161616',
  24. // itemColorHover: 'rgba(42, 104, 255, 0.1)',
  25. // itemTextColorHover: '#2A68FF',
  26. // },
  27. // Pagination: {
  28. // itemColorActiveHover: '#0092FF',
  29. // itemColorActive: '0092FF',
  30. // itemColor: "#f7f7f7",
  31. // itemTextColorActive: '#fff',
  32. // itemTextColorHover: '#fff',
  33. // itemColorHover: '#0092FF',
  34. // }
  35. }
  36. </script>
  37. <template>
  38. <NConfigProvider :theme-overrides="themeOverrides">
  39. <RouterView />
  40. </NConfigProvider>
  41. </template>
  42. <style scoped lang="scss">
  43. header {
  44. @include flex(x, center, cetner);
  45. background: $el-bg-color;
  46. line-height: 1.5;
  47. max-height: 100vh;
  48. img {
  49. width: 200px;
  50. }
  51. }
  52. .logo {
  53. display: block;
  54. margin: 0 auto 2rem;
  55. }
  56. nav {
  57. width: 100%;
  58. font-size: 12px;
  59. text-align: center;
  60. margin-top: 2rem;
  61. }
  62. nav a.router-link-exact-active {
  63. color: var(--color-text);
  64. }
  65. nav a.router-link-exact-active:hover {
  66. background-color: transparent;
  67. }
  68. nav a {
  69. display: inline-block;
  70. padding: 0 1rem;
  71. border-left: 1px solid var(--color-border);
  72. }
  73. nav a:first-of-type {
  74. border: 0;
  75. }
  76. @media (min-width: 1024px) {
  77. header {
  78. display: flex;
  79. place-items: center;
  80. padding-right: calc(var(--section-gap) / 2);
  81. }
  82. .logo {
  83. margin: 0 2rem 0 0;
  84. }
  85. header .wrapper {
  86. display: flex;
  87. place-items: flex-start;
  88. flex-wrap: wrap;
  89. }
  90. nav {
  91. text-align: left;
  92. margin-left: -1rem;
  93. font-size: 1rem;
  94. padding: 1rem 0;
  95. margin-top: 1rem;
  96. }
  97. }
  98. </style>