App.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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-submenu>
  20. <el-menu-item index="">Help</el-menu-item>
  21. </el-menu>
  22. </el-col>
  23. <el-col :xs="24" :md="20">
  24. <div id="content">
  25. <router-view></router-view>
  26. </div>
  27. </el-col>
  28. </el-row>
  29. </section>
  30. <footer></footer>
  31. </div>
  32. </template>
  33. <script>
  34. export default {
  35. methods: {
  36. handleSelect(key, path) {
  37. if (key == '') {
  38. window.open("http://github.com/fatedier/frp")
  39. }
  40. }
  41. }
  42. }
  43. </script>
  44. <style>
  45. body {
  46. background-color: #fafafa;
  47. margin: 0px;
  48. font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;
  49. }
  50. header {
  51. width: 100%;
  52. height: 60px;
  53. }
  54. .header-color {
  55. background: #58B7FF;
  56. }
  57. #content {
  58. margin-top: 20px;
  59. padding-right: 40px;
  60. }
  61. .brand {
  62. color: #fff;
  63. background-color: transparent;
  64. margin-left: 20px;
  65. float: left;
  66. line-height: 25px;
  67. font-size: 25px;
  68. padding: 15px 15px;
  69. height: 30px;
  70. text-decoration: none;
  71. }
  72. </style>