Home.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="body">
  3. <header>
  4. <div class= 'title'>
  5. <img src="../assets/logo.jpg" alt="" />
  6. Max
  7. <span>Key</span>
  8. 单点登录认证系统
  9. </div>
  10. <router-link to="/passport/logout">
  11. <Icon iconClass="quit"></Icon>
  12. </router-link>
  13. </header>
  14. <div class="nav">
  15. <ul>
  16. <li>
  17. <router-link to="/dashboard/home">应用</router-link>
  18. </li>
  19. <li>
  20. <router-link to="/dashboard/user">个人</router-link>
  21. </li>
  22. </ul>
  23. </div>
  24. <div class="container">
  25. <router-view></router-view>
  26. </div>
  27. <Footer/>
  28. </div>
  29. </template>
  30. <script lang="ts" setup>
  31. import Footer from "./Footer.vue"
  32. import Icon from "./Icon.vue"
  33. </script>
  34. <style lang="less" scoped>
  35. * {
  36. margin: 0;
  37. padding: 0;
  38. }
  39. html,.body {
  40. width: 100%;
  41. height: auto;
  42. min-height: 100%;
  43. overflow-x: hidden;
  44. background-color: #f5f7fa;
  45. }
  46. li {
  47. list-style: none;
  48. }
  49. header {
  50. height: 64px;
  51. border-bottom: 1px solid #e5e5e5;
  52. padding-left: 16px;
  53. position: relative;
  54. display: flex;
  55. align-items: center;
  56. .title {
  57. display: flex;
  58. height: 100%;
  59. align-items: center;
  60. font-size: 20px;
  61. font-weight: 650;
  62. img {
  63. width: 50px;
  64. height: 50px;
  65. }
  66. span {
  67. color: #ffd700
  68. }
  69. }
  70. a {
  71. position: absolute;
  72. right: 16px;
  73. }
  74. }
  75. .nav {
  76. ul {
  77. display: flex;
  78. flex-flow: row wrap;
  79. align-items: center;
  80. background-color: #001529;
  81. height: 46px;
  82. padding-left: 198px;
  83. li {
  84. width: 80px;
  85. height: 100%;
  86. display: flex;
  87. align-items: center;
  88. justify-content: center;
  89. background-color: #001529;
  90. a {
  91. text-decoration: none;
  92. color: #a6adb4;
  93. }
  94. &:hover {
  95. background-color: #1890ff;
  96. a {
  97. color: #fff;
  98. }
  99. }
  100. }
  101. }
  102. }
  103. .container {
  104. padding: 24px 198px;
  105. }
  106. </style>