Commit c0478e27cf3c33082cf969b1c3cbd026f6041202
1 parent
e61c092e
update Menu style
Showing
3 changed files
with
38 additions
and
46 deletions
Show diff stats
examples/routers/menu.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Menu :theme="theme2" accordion @on-open-change="handleChange"> | ||
| 4 | - <Submenu name="1"> | ||
| 5 | - <template slot="title"> | ||
| 6 | - <Icon type="ios-paper"></Icon> | ||
| 7 | - 内容管理 | ||
| 8 | - </template> | ||
| 9 | - <Menu-item name="1-1">文章管理</Menu-item> | ||
| 10 | - <Menu-item name="1-2">评论管理</Menu-item> | ||
| 11 | - <Menu-item name="1-3">举报管理</Menu-item> | ||
| 12 | - </Submenu> | ||
| 13 | - <Submenu name="2"> | ||
| 14 | - <template slot="title"> | ||
| 15 | - <Icon type="ios-people"></Icon> | ||
| 16 | - 用户管理 | ||
| 17 | - </template> | ||
| 18 | - <Menu-item name="2-1">新增用户</Menu-item> | ||
| 19 | - <Menu-item name="2-2">活跃用户</Menu-item> | ||
| 20 | - </Submenu> | ||
| 21 | - <Submenu name="3"> | ||
| 22 | - <template slot="title"> | ||
| 23 | - <Icon type="stats-bars"></Icon> | ||
| 24 | - 统计分析 | ||
| 25 | - </template> | ||
| 26 | - <Menu-group title="使用"> | ||
| 27 | - <Menu-item name="3-1">新增和启动</Menu-item> | ||
| 28 | - <Menu-item name="3-2">活跃分析</Menu-item> | ||
| 29 | - <Menu-item name="3-3">时段分析</Menu-item> | ||
| 30 | - </Menu-group> | ||
| 31 | - <Menu-group title="留存"> | ||
| 32 | - <Menu-item name="3-4">用户留存</Menu-item> | ||
| 33 | - <Menu-item name="3-5">流失用户</Menu-item> | ||
| 34 | - </Menu-group> | ||
| 35 | - </Submenu> | 3 | + <Menu :theme="theme3" active-name="1"> |
| 4 | + <Menu-group title="内容管理"> | ||
| 5 | + <Menu-item name="1"> | ||
| 6 | + <Icon type="document-text"></Icon> | ||
| 7 | + 文章管理 | ||
| 8 | + </Menu-item> | ||
| 9 | + <Menu-item name="2"> | ||
| 10 | + <Icon type="chatbubbles"></Icon> | ||
| 11 | + 评论管理 | ||
| 12 | + </Menu-item> | ||
| 13 | + </Menu-group> | ||
| 14 | + <Menu-group title="统计分析"> | ||
| 15 | + <Menu-item name="3"> | ||
| 16 | + <Icon type="heart"></Icon> | ||
| 17 | + 用户留存 | ||
| 18 | + </Menu-item> | ||
| 19 | + <Menu-item name="4"> | ||
| 20 | + <Icon type="heart-broken"></Icon> | ||
| 21 | + 流失用户 | ||
| 22 | + </Menu-item> | ||
| 23 | + </Menu-group> | ||
| 36 | </Menu> | 24 | </Menu> |
| 25 | + <br> | ||
| 26 | + <p>切换主题</p> | ||
| 27 | + <Radio-group v-model="theme3"> | ||
| 28 | + <Radio label="light"></Radio> | ||
| 29 | + <Radio label="dark"></Radio> | ||
| 30 | + </Radio-group> | ||
| 37 | </div> | 31 | </div> |
| 38 | </template> | 32 | </template> |
| 39 | <script> | 33 | <script> |
| 40 | export default { | 34 | export default { |
| 41 | data () { | 35 | data () { |
| 42 | return { | 36 | return { |
| 43 | - theme2: 'light' | ||
| 44 | - } | ||
| 45 | - }, | ||
| 46 | - methods: { | ||
| 47 | - handleChange (val) { | ||
| 48 | - console.log(val); | 37 | + theme3: 'light' |
| 49 | } | 38 | } |
| 50 | } | 39 | } |
| 51 | } | 40 | } |
src/styles/components/menu.less
| @@ -49,7 +49,7 @@ | @@ -49,7 +49,7 @@ | ||
| 49 | background: #fff; | 49 | background: #fff; |
| 50 | } | 50 | } |
| 51 | &-dark{ | 51 | &-dark{ |
| 52 | - background: @title-color; | 52 | + background: @menu-dark-title; |
| 53 | } | 53 | } |
| 54 | &-primary{ | 54 | &-primary{ |
| 55 | background: @primary-color; | 55 | background: @primary-color; |
| @@ -95,7 +95,7 @@ | @@ -95,7 +95,7 @@ | ||
| 95 | } | 95 | } |
| 96 | 96 | ||
| 97 | &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{ | 97 | &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{ |
| 98 | - color: @subsidiary-color; | 98 | + color: @menu-dark-subsidiary-color; |
| 99 | &-active, &:hover{ | 99 | &-active, &:hover{ |
| 100 | color: #fff; | 100 | color: #fff; |
| 101 | } | 101 | } |
| @@ -176,7 +176,7 @@ | @@ -176,7 +176,7 @@ | ||
| 176 | } | 176 | } |
| 177 | &-dark&-vertical &-item-group{ | 177 | &-dark&-vertical &-item-group{ |
| 178 | &-title{ | 178 | &-title{ |
| 179 | - color: @text-color; | 179 | + color: @menu-dark-group-title-color; |
| 180 | } | 180 | } |
| 181 | } | 181 | } |
| 182 | 182 | ||
| @@ -190,7 +190,7 @@ | @@ -190,7 +190,7 @@ | ||
| 190 | } | 190 | } |
| 191 | 191 | ||
| 192 | &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{ | 192 | &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{ |
| 193 | - color: @subsidiary-color; | 193 | + color: @menu-dark-subsidiary-color; |
| 194 | &-active:not(.@{menu-prefix-cls}-submenu), | 194 | &-active:not(.@{menu-prefix-cls}-submenu), |
| 195 | &-active:not(.@{menu-prefix-cls}-submenu):hover | 195 | &-active:not(.@{menu-prefix-cls}-submenu):hover |
| 196 | { | 196 | { |
| @@ -198,7 +198,7 @@ | @@ -198,7 +198,7 @@ | ||
| 198 | } | 198 | } |
| 199 | &:hover{ | 199 | &:hover{ |
| 200 | color: #fff; | 200 | color: #fff; |
| 201 | - background: @title-color; | 201 | + background: @menu-dark-title; |
| 202 | } | 202 | } |
| 203 | &-active:not(.@{menu-prefix-cls}-submenu){ | 203 | &-active:not(.@{menu-prefix-cls}-submenu){ |
| 204 | color: @primary-color; | 204 | color: @primary-color; |
| @@ -223,7 +223,7 @@ | @@ -223,7 +223,7 @@ | ||
| 223 | &-dark&-vertical &-opened{ | 223 | &-dark&-vertical &-opened{ |
| 224 | background: @menu-dark-active-bg; | 224 | background: @menu-dark-active-bg; |
| 225 | .@{menu-prefix-cls}-submenu-title{ | 225 | .@{menu-prefix-cls}-submenu-title{ |
| 226 | - background: @title-color; | 226 | + background: @menu-dark-title; |
| 227 | } | 227 | } |
| 228 | } | 228 | } |
| 229 | } | 229 | } |
src/styles/custom.less
| @@ -43,7 +43,10 @@ | @@ -43,7 +43,10 @@ | ||
| 43 | @table-td-stripe-bg : #f8f8f9; | 43 | @table-td-stripe-bg : #f8f8f9; |
| 44 | @table-td-hover-bg : #ebf7ff; | 44 | @table-td-hover-bg : #ebf7ff; |
| 45 | @table-td-highlight-bg : #ebf7ff; | 45 | @table-td-highlight-bg : #ebf7ff; |
| 46 | -@menu-dark-active-bg : #313540; | 46 | +@menu-dark-title : #495060; |
| 47 | +@menu-dark-active-bg : #363e4f; | ||
| 48 | +@menu-dark-subsidiary-color : rgba(255,255,255,.7); | ||
| 49 | +@menu-dark-group-title-color : rgba(255,255,255,.36); | ||
| 47 | @date-picker-cell-hover-bg : #e1f0fe; | 50 | @date-picker-cell-hover-bg : #e1f0fe; |
| 48 | 51 | ||
| 49 | // Shadow | 52 | // Shadow |