mirror of https://gitee.com/pnoker/dc3-web.git
pull/1/head
pnoker
6 years ago
parent
e842c5b055
commit
d43368aa8a
@ -1,162 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div id="app">
|
||||||
<div class="header">
|
|
||||||
<el-col :span="4" class="header_item">
|
|
||||||
<img class="logo" src="./assets/logo.png">
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="16" class="header_item">
|
|
||||||
<el-menu class="menu"
|
|
||||||
:default-active="this.$route.path"
|
|
||||||
mode="horizontal"
|
|
||||||
:router=true>
|
|
||||||
<el-menu-item index="/"><span class="el-icon-menu"/>首页</el-menu-item>
|
|
||||||
<el-menu-item index="/things">物联</el-menu-item>
|
|
||||||
<el-menu-item index="/template">模板</el-menu-item>
|
|
||||||
<el-menu-item index="/now">实时</el-menu-item>
|
|
||||||
<el-menu-item index="/history">历史</el-menu-item>
|
|
||||||
<el-menu-item index="/alarm">报警</el-menu-item>
|
|
||||||
<el-menu-item index="/label">标签</el-menu-item>
|
|
||||||
<el-menu-item index="/picture">图片</el-menu-item>
|
|
||||||
<el-menu-item index="/video">视频</el-menu-item>
|
|
||||||
<el-menu-item index="/setting">设置</el-menu-item>
|
|
||||||
<el-menu-item index="/help">帮助</el-menu-item>
|
|
||||||
<el-menu-item index="/about">关于</el-menu-item>
|
|
||||||
</el-menu>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2" class="header_item">
|
|
||||||
<el-badge :value="12" :max="99" class="badge_item" type="primary">
|
|
||||||
<span class="span_small" @click="handleMessage">消息</span>
|
|
||||||
</el-badge>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="2" class="header_item">
|
|
||||||
<el-dropdown class="avatar_item" trigger="click" @command="handleCommand">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
<el-avatar>
|
|
||||||
<img src="./assets/avatar.png">
|
|
||||||
</el-avatar>
|
|
||||||
</span>
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item command="setting">设置</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="help">帮助</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="logout" divided>退出</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
<span class="span_small avatar">管理员</span>
|
|
||||||
</el-col>
|
|
||||||
</div>
|
|
||||||
<div class="body">
|
|
||||||
<el-scrollbar style="height: 100%;">
|
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
min-width: 1366px;
|
|
||||||
min-height: 768px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
color: #2c3e50;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
top: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
border-bottom: 1px solid #dcdfe6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header_item {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 60px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border-bottom: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu .el-menu-item {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge_item {
|
|
||||||
top: 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.span_small {
|
|
||||||
color: #909399;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.span_small.avatar {
|
|
||||||
margin: 20px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar_item {
|
|
||||||
top: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
top: 65px;
|
|
||||||
bottom: 5px;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
.el-scrollbar__wrap {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view {
|
|
||||||
top: 1px;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
text-align: center;
|
|
||||||
margin: 5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
right: 1px;
|
|
||||||
bottom: 1px;
|
|
||||||
position: absolute !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: "app",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
|
watch: {},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {},
|
||||||
handleMessage() {
|
computed: {}
|
||||||
this.$message('click on message');
|
};
|
||||||
},
|
|
||||||
handleCommand(command) {
|
|
||||||
this.$message('click on item ' + command);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue