App.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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. }
  49. header {
  50. width: 100%;
  51. height: 60px;
  52. }
  53. .header-color {
  54. background: #58B7FF;
  55. }
  56. #content {
  57. margin-top: 20px;
  58. padding-right: 40px;
  59. }
  60. .brand {
  61. color: #fff;
  62. background-color: transparent;
  63. margin-left: 20px;
  64. float: left;
  65. line-height: 25px;
  66. font-size: 25px;
  67. padding: 15px 15px;
  68. height: 30px;
  69. text-decoration: none;
  70. }
  71. </style>