App.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div id="app">
  3. <header class="grid-content header-color">
  4. <el-row>
  5. <a class="brand" href="#">frp</a>
  6. </el-row>
  7. </header>
  8. <section>
  9. <el-row :gutter="20">
  10. <el-col id="side-nav" :xs="24" :md="4">
  11. <el-menu default-active="1" mode="vertical" theme="light" router="false" @select="handleSelect">
  12. <el-menu-item index="/">Overview</el-menu-item>
  13. <el-submenu index="/proxies">
  14. <template slot="title">Proxies</template>
  15. <el-menu-item index="/proxies/tcp">TCP</el-menu-item>
  16. <el-menu-item index="/proxies/udp">UDP</el-menu-item>
  17. <el-menu-item index="/proxies/http">HTTP</el-menu-item>
  18. <el-menu-item index="/proxies/https">HTTPS</el-menu-item>
  19. <el-menu-item index="/proxies/stcp">STCP</el-menu-item>
  20. </el-submenu>
  21. <el-menu-item index="">Help</el-menu-item>
  22. </el-menu>
  23. </el-col>
  24. <el-col :xs="24" :md="20">
  25. <div id="content">
  26. <router-view></router-view>
  27. </div>
  28. </el-col>
  29. </el-row>
  30. </section>
  31. <footer></footer>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. methods: {
  37. handleSelect(key, path) {
  38. if (key == '') {
  39. window.open("https://github.com/fatedier/frp")
  40. }
  41. }
  42. }
  43. }
  44. </script>
  45. <style>
  46. body {
  47. background-color: #fafafa;
  48. margin: 0px;
  49. font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;
  50. }
  51. header {
  52. width: 100%;
  53. height: 60px;
  54. }
  55. .header-color {
  56. background: #58B7FF;
  57. }
  58. #content {
  59. margin-top: 20px;
  60. padding-right: 40px;
  61. }
  62. .brand {
  63. color: #fff;
  64. background-color: transparent;
  65. margin-left: 20px;
  66. float: left;
  67. line-height: 25px;
  68. font-size: 25px;
  69. padding: 15px 15px;
  70. height: 30px;
  71. text-decoration: none;
  72. }
  73. </style>