frp/web/frps/src/App.vue

81 lines
2.2 KiB
Vue
Raw Normal View History

2017-03-27 02:15:31 +08:00
<template>
<div id="app">
<header class="grid-content header-color">
<el-row>
<a class="brand" href="#">frp</a>
</el-row>
</header>
<section>
<el-row :gutter="20">
<el-col id="side-nav" :xs="24" :md="4">
<el-menu default-active="1" mode="vertical" theme="light" router="false" @select="handleSelect">
<el-menu-item index="/">Overview</el-menu-item>
<el-submenu index="/proxies">
<template slot="title">Proxies</template>
<el-menu-item index="/proxies/tcp">TCP</el-menu-item>
<el-menu-item index="/proxies/udp">UDP</el-menu-item>
<el-menu-item index="/proxies/http">HTTP</el-menu-item>
<el-menu-item index="/proxies/https">HTTPS</el-menu-item>
2018-05-20 19:06:05 +08:00
<el-menu-item index="/proxies/stcp">STCP</el-menu-item>
2017-03-27 02:15:31 +08:00
</el-submenu>
<el-menu-item index="">Help</el-menu-item>
</el-menu>
</el-col>
<el-col :xs="24" :md="20">
<div id="content">
<router-view></router-view>
</div>
</el-col>
</el-row>
</section>
<footer></footer>
</div>
</template>
<script>
export default {
methods: {
handleSelect(key, path) {
if (key == '') {
2018-05-20 19:06:05 +08:00
window.open("https://github.com/fatedier/frp")
2017-03-27 02:15:31 +08:00
}
}
}
}
</script>
<style>
body {
background-color: #fafafa;
margin: 0px;
2018-01-08 13:56:51 +08:00
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;
2017-03-27 02:15:31 +08:00
}
header {
width: 100%;
height: 60px;
}
.header-color {
background: #58B7FF;
}
#content {
margin-top: 20px;
padding-right: 40px;
}
.brand {
color: #fff;
background-color: transparent;
margin-left: 20px;
float: left;
line-height: 25px;
font-size: 25px;
padding: 15px 15px;
height: 30px;
text-decoration: none;
}
</style>