gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat

Browse Source 
新增路由模块,分辨率适配初始化,页面初步搭建
This commit is contained in:
wanghaoyu
2019-11-29 15:00:26 +08:00
parent 230a6ea2a5
commit c25ef65a36
10 changed files with 306 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
nezha-fronted/src/assets/css/main.css Normal file
View File

@@ -0,0 +1,24 @@
* {
margin: 0;
padding: 0;
}
body {
font-family: NotoSansSC-Light;
min-width: 1350px;
background: #F2F7F8;
overflow-x: hidden !important;
height: 100%;
box-sizing: border-box;
}
html {
overflow: auto;
overflow-y: hidden;
overflow-x: hidden !important;
height: 100%;
box-sizing: border-box;
}

61
nezha-fronted/src/components/common/Header.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="header">
<div class="submenu">
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#ffffff"
unique-opened
>
<el-menu-item index="1" @rou><div @click="jumpadd">dashboard</div></el-menu-item>
<el-submenu index="2">
<template slot="title" router="../dashboard">project</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">asset</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
</template>
<script>
export default {
name: "Header",
methods:{
jumpadd(){
this.$router.push({
path: "/dashboard",
});
},
jump() {
this.$router.push({
path: "/project",
});
},
}
}
</script>
<style scoped>
.submenu{
padding-left: 50%;
}
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
font-size: 22px;
background-color: #ffffff;
position: relative;
z-index: 999;
box-shadow: 0px 20px 13px -19px #5E5E5E;
}
</style>

44
nezha-fronted/src/components/common/Home.vue
View File

@@ -1,13 +1,49 @@
<template>
<div>
<Header></Header>
<sideBar></sideBar>
<div class="content-box">
<router-view/>
</div>
</div>
</template>
<script>
export default {
name: "Home.vue"
}
import Header from "./Header";
import sideBar from "./SideBar";
export default {
name: "Home.vue",
components: {Header,sideBar}
}
</script>
<style scoped>
.content-box {
position: absolute;
left: 300px;
right: 30px;
top: 60px;
bottom: 0;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
background: #ffffff;
height: calc(100% - 50px);
box-sizing: border-box;
transform: translateY(0);
}
@media screen and (max-width: 1600px) {
.content-box {
background: #a0eea6;
}
}
@media screen and (max-width: 700px) {
.content-box {
background: #b94b7e;
}
}
</style>

17
nezha-fronted/src/components/common/Login.vue
View File

@@ -1,10 +1,23 @@
<template>
<div>
<div>登录</div>
<el-button @click="jump">默认按钮</el-button>
</div>
</template>
<script>
export default {
name: "login"
name: "login",
methods:{
jump(){
this.$router.push({
path: "/dashboard",
query: {
t: +new Date()
}
});
}
}
}
</script>

61
nezha-fronted/src/components/common/SideBar.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="sidebar">
<div class="cartTitle">
<div>Project</div>
</div>
<div v-for="{item} in arr" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
<div class="projectCard" :id="gett(item)"></div>
</div>
</div>
</template>
<script>
export default {
name: "SiderBar",
data(){
return{
arr:[12,3,4,5,6,7,8,98,54]
}
},
methods: {
gett: function (index) {
return "sdf" + index
},
loadMore() {
this.busy = true
setTimeout(() => {
this.page++
}, 1000)
this.arr.push('1')
}
}
}
</script>
<style scoped>
.cartTitle{
padding-left: 30px;
padding-top: 20px;
}
.projectCard{
margin-left: 30px;
margin-top: 20px;
width: 80%;
height: 100px;
background-color: #ffffff;
border-radius: 8px;
border-top:10px solid #777777
}
.sidebar {
display: block;
position: absolute;
width: 300px;
left: 0;
top: 60px;
bottom: 0;
box-shadow: 0 10px 16px #ccc;
overflow-y: scroll;
background: rgba(242, 242, 242, 0.94);
}
</style>

15
nezha-fronted/src/components/page/asset/asset.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
asset
</div>
</template>
<script>
export default {
name: "asset"
}
</script>
<style scoped>
</style>

15
nezha-fronted/src/components/page/dashboard.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div>
<iframe src="http://192.168.40.247:3000/" height="630" width="1200"></iframe>
</div>
</template>
<script>
export default {
name: "dashboard"
}
</script>
<style scoped>
</style>

54
nezha-fronted/src/components/page/project/project.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "project",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style scoped>
</style>

9
nezha-fronted/src/main.js
View File

@@ -1,10 +1,19 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import "./assets/css/main.css";
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
import vueiInfinite from 'vue-infinite-scroll'
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(vueiInfinite)
/* eslint-disable no-new */
new Vue({

13
nezha-fronted/src/router/index.js
View File

@@ -15,9 +15,20 @@ export default new Router({
},
{
path: '/',
name: 'main',
component: resolve => require(['../components/common/Home.vue'], resolve),
children: [
{
path: '/dashboard',
component: resolve => require(['../components/page/dashboard.vue'], resolve),
},
{
path: '/project',
component: resolve => require(['../components/page/project/project.vue'], resolve),
},
{
path: '/asset',
component: resolve => require(['../components/page/project/project.vue'], resolve),
}
]
},
]