OPENTECH / yoho-node-ci · Commits

Go to a project

Authored by 毕凯
Commit 51dd5c632a86af199469d2daa60fede9d9a77bce 1 parent 3c6ae77f

布局调整

Inline Side-by-side
Showing 3 changed files with 176 additions and 63 deletions
<template>
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
<div class="sidebar">
<div class="sidebar-user">
<Avatar icon="person" size="large" src="../../../images/photos/user1.png" />
<span class="username">Username</span>
</div>
<Menu class="sidebar-menu" active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</div>
</template>
<style scoped lang="scss">
.sidebar {
display: flex;
flex-direction: column;
height: 100%;
}
.sidebar-user {
padding: 10px 20px;
border: 1px solid #dddee1;
height: 65px;
.username {
display: inline-block;
padding: 0 10px;
height: 40px;
font-size: 18px;
line-height: 40px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
}
.sidebar-menu {
flex: 1;
overflow: auto;
}
</style>
... ...
<template>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1" class="header-menu">
<div class="header-logo"></div>
<div class="header-nav">
<MenuItem name="1">
<Icon type="log-out"></Icon>
<span @click="logout">退出</span>
</MenuItem>
</div>
</Menu>
</Header>
</template>
<script>
export default {
methods: {
logout() {
location.href = '/logout'
}
}
}
</script>
<style scoped lang="scss">
.header-menu {
display: flex;
justify-content: space-between;
margin-top: 2px;
}
.header-logo {
width: 150px;
height: 60px;
background: url("../../../images/logo.png");
filter: invert(100%);
margin-left: -15px;
}
.header-nav {
li:last-child {
padding-right: 0;
}
}
</style>
\ No newline at end of file
... ...
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1" class="header-menu">
<div class="header-logo"></div>
<div class="header-nav">
<MenuItem name="1">
<Icon type="log-out"></Icon>
<span @click="logout">退出</span>
</MenuItem>
</div>
</Menu>
</Header>
<Topbar></Topbar>
<Layout class="main">
<Sider hide-trigger :style="{background: '#fff'}">
<Sidebar></Sidebar>
... ... @@ -26,16 +16,13 @@
</div>
</template>
<script>
import Topbar from 'common/Topbar.vue'
import Sidebar from 'common/Sidebar.vue'
export default {
components: {
Topbar,
Sidebar
},
methods: {
logout() {
location.href = '/logout'
}
}
}
</script>
... ... @@ -53,24 +40,4 @@ export default {
.main {
flex: 1;
}
.header-menu {
display: flex;
justify-content: space-between;
margin-top: 2px;
}
.header-logo {
width: 150px;
height: 60px;
background: url("../../images/logo.png");
filter: invert(100%);
margin-left: -15px;
}
.header-nav {
li:last-child {
padding-right: 0;
}
}
</style>
... ...