OPENTECH / yoho-node-ci · Commits

Go to a project

Authored by 毕凯
Commit 023a797168de8132a2119e653f66d020895c819c 1 parent c7d867cc

vue 框架整理

Inline Side-by-side
Showing 2 changed files with 64 additions and 60 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>
</template>
... ...
... ... @@ -2,57 +2,19 @@
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<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="ios-navigate"></Icon>
Item 1
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad"></Icon>
Item 2
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics"></Icon>
Item 3
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
Item 4
<Icon type="log-out"></Icon>
<span @click="logout">退出</span>
</MenuItem>
</div>
</Menu>
</Header>
<Layout class="main">
<Sider hide-trigger :style="{background: '#fff'}">
<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>
<Sidebar></Sidebar>
</Sider>
<Layout :style="{padding: '24px'}">
<Content :style="{padding: '24px', background: '#fff'}">
... ... @@ -64,11 +26,20 @@
</div>
</template>
<script>
export default {
import Sidebar from 'common/Sidebar.vue'
export default {
components: {
Sidebar
},
methods: {
logout() {
location.href = '/logout'
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
.layout{
display: flex;
flex-direction: column;
... ... @@ -83,19 +54,23 @@
flex: 1;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
.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;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
.header-nav {
li:last-child {
padding-right: 0;
}
}
</style>
... ...