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 150 additions and 37 deletions
1 <template> 1 <template>
2 - <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']"> 2 + <div class="sidebar">
  3 + <div class="sidebar-user">
  4 + <Avatar icon="person" size="large" src="../../../images/photos/user1.png" />
  5 + <span class="username">Username</span>
  6 + </div>
  7 + <Menu class="sidebar-menu" active-name="1-2" theme="light" width="auto" :open-names="['1']">
3 <Submenu name="1"> 8 <Submenu name="1">
4 <template slot="title"> 9 <template slot="title">
5 <Icon type="ios-navigate"></Icon> 10 <Icon type="ios-navigate"></Icon>
@@ -17,6 +22,70 @@ @@ -17,6 +22,70 @@
17 <MenuItem name="2-1">Option 1</MenuItem> 22 <MenuItem name="2-1">Option 1</MenuItem>
18 <MenuItem name="2-2">Option 2</MenuItem> 23 <MenuItem name="2-2">Option 2</MenuItem>
19 </Submenu> 24 </Submenu>
  25 + <Submenu name="2">
  26 + <template slot="title">
  27 + <Icon type="ios-keypad"></Icon>
  28 + Item 2
  29 + </template>
  30 + <MenuItem name="2-1">Option 1</MenuItem>
  31 + <MenuItem name="2-2">Option 2</MenuItem>
  32 + </Submenu>
  33 + <Submenu name="2">
  34 + <template slot="title">
  35 + <Icon type="ios-keypad"></Icon>
  36 + Item 2
  37 + </template>
  38 + <MenuItem name="2-1">Option 1</MenuItem>
  39 + <MenuItem name="2-2">Option 2</MenuItem>
  40 + </Submenu>
  41 + <Submenu name="2">
  42 + <template slot="title">
  43 + <Icon type="ios-keypad"></Icon>
  44 + Item 2
  45 + </template>
  46 + <MenuItem name="2-1">Option 1</MenuItem>
  47 + <MenuItem name="2-2">Option 2</MenuItem>
  48 + </Submenu>
  49 + <Submenu name="2">
  50 + <template slot="title">
  51 + <Icon type="ios-keypad"></Icon>
  52 + Item 2
  53 + </template>
  54 + <MenuItem name="2-1">Option 1</MenuItem>
  55 + <MenuItem name="2-2">Option 2</MenuItem>
  56 + </Submenu>
  57 + <Submenu name="2">
  58 + <template slot="title">
  59 + <Icon type="ios-keypad"></Icon>
  60 + Item 2
  61 + </template>
  62 + <MenuItem name="2-1">Option 1</MenuItem>
  63 + <MenuItem name="2-2">Option 2</MenuItem>
  64 + </Submenu>
  65 + <Submenu name="2">
  66 + <template slot="title">
  67 + <Icon type="ios-keypad"></Icon>
  68 + Item 2
  69 + </template>
  70 + <MenuItem name="2-1">Option 1</MenuItem>
  71 + <MenuItem name="2-2">Option 2</MenuItem>
  72 + </Submenu>
  73 + <Submenu name="2">
  74 + <template slot="title">
  75 + <Icon type="ios-keypad"></Icon>
  76 + Item 2
  77 + </template>
  78 + <MenuItem name="2-1">Option 1</MenuItem>
  79 + <MenuItem name="2-2">Option 2</MenuItem>
  80 + </Submenu>
  81 + <Submenu name="2">
  82 + <template slot="title">
  83 + <Icon type="ios-keypad"></Icon>
  84 + Item 2
  85 + </template>
  86 + <MenuItem name="2-1">Option 1</MenuItem>
  87 + <MenuItem name="2-2">Option 2</MenuItem>
  88 + </Submenu>
20 <Submenu name="3"> 89 <Submenu name="3">
21 <template slot="title"> 90 <template slot="title">
22 <Icon type="ios-analytics"></Icon> 91 <Icon type="ios-analytics"></Icon>
@@ -26,4 +95,36 @@ @@ -26,4 +95,36 @@
26 <MenuItem name="3-2">Option 2</MenuItem> 95 <MenuItem name="3-2">Option 2</MenuItem>
27 </Submenu> 96 </Submenu>
28 </Menu> 97 </Menu>
  98 + </div>
29 </template> 99 </template>
  100 +
  101 +<style scoped lang="scss">
  102 +.sidebar {
  103 + display: flex;
  104 + flex-direction: column;
  105 + height: 100%;
  106 +}
  107 +
  108 +.sidebar-user {
  109 + padding: 10px 20px;
  110 + border: 1px solid #dddee1;
  111 + height: 65px;
  112 +
  113 + .username {
  114 + display: inline-block;
  115 + padding: 0 10px;
  116 + height: 40px;
  117 + font-size: 18px;
  118 + line-height: 40px;
  119 + max-width: 120px;
  120 + overflow: hidden;
  121 + text-overflow: ellipsis;
  122 + vertical-align: middle;
  123 + }
  124 +}
  125 +
  126 +.sidebar-menu {
  127 + flex: 1;
  128 + overflow: auto;
  129 +}
  130 +</style>
  1 +<template>
  2 + <Header>
  3 + <Menu mode="horizontal" theme="dark" active-name="1" class="header-menu">
  4 + <div class="header-logo"></div>
  5 + <div class="header-nav">
  6 + <MenuItem name="1">
  7 + <Icon type="log-out"></Icon>
  8 + <span @click="logout">退出</span>
  9 + </MenuItem>
  10 + </div>
  11 + </Menu>
  12 + </Header>
  13 +</template>
  14 +
  15 +<script>
  16 +export default {
  17 + methods: {
  18 + logout() {
  19 + location.href = '/logout'
  20 + }
  21 + }
  22 +}
  23 +</script>
  24 +
  25 +<style scoped lang="scss">
  26 +.header-menu {
  27 + display: flex;
  28 + justify-content: space-between;
  29 + margin-top: 2px;
  30 +}
  31 +
  32 +.header-logo {
  33 + width: 150px;
  34 + height: 60px;
  35 + background: url("../../../images/logo.png");
  36 + filter: invert(100%);
  37 + margin-left: -15px;
  38 +}
  39 +
  40 +.header-nav {
  41 + li:last-child {
  42 + padding-right: 0;
  43 + }
  44 +}
  45 +</style>
1 <template> 1 <template>
2 <div class="layout"> 2 <div class="layout">
3 <Layout> 3 <Layout>
4 - <Header>  
5 - <Menu mode="horizontal" theme="dark" active-name="1" class="header-menu">  
6 - <div class="header-logo"></div>  
7 - <div class="header-nav">  
8 - <MenuItem name="1">  
9 - <Icon type="log-out"></Icon>  
10 - <span @click="logout">退出</span>  
11 - </MenuItem>  
12 - </div>  
13 - </Menu>  
14 - </Header> 4 + <Topbar></Topbar>
15 <Layout class="main"> 5 <Layout class="main">
16 <Sider hide-trigger :style="{background: '#fff'}"> 6 <Sider hide-trigger :style="{background: '#fff'}">
17 <Sidebar></Sidebar> 7 <Sidebar></Sidebar>
@@ -26,16 +16,13 @@ @@ -26,16 +16,13 @@
26 </div> 16 </div>
27 </template> 17 </template>
28 <script> 18 <script>
  19 +import Topbar from 'common/Topbar.vue'
29 import Sidebar from 'common/Sidebar.vue' 20 import Sidebar from 'common/Sidebar.vue'
30 21
31 export default { 22 export default {
32 components: { 23 components: {
  24 + Topbar,
33 Sidebar 25 Sidebar
34 - },  
35 - methods: {  
36 - logout() {  
37 - location.href = '/logout'  
38 - }  
39 } 26 }
40 } 27 }
41 </script> 28 </script>
@@ -53,24 +40,4 @@ export default { @@ -53,24 +40,4 @@ export default {
53 .main { 40 .main {
54 flex: 1; 41 flex: 1;
55 } 42 }
56 -  
57 -.header-menu {  
58 - display: flex;  
59 - justify-content: space-between;  
60 - margin-top: 2px;  
61 -}  
62 -  
63 -.header-logo {  
64 - width: 150px;  
65 - height: 60px;  
66 - background: url("../../images/logo.png");  
67 - filter: invert(100%);  
68 - margin-left: -15px;  
69 -}  
70 -  
71 -.header-nav {  
72 - li:last-child {  
73 - padding-right: 0;  
74 - }  
75 -}  
76 </style> 43 </style>