18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

导航栏的下拉菜单样式跟随主题

Browse Source 
部分样式变量名称修改

代码优化
master
toesbieya 6 years ago
parent 0d4745220b
commit fc13279ba4
13 changed files with 120 additions and 86 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 34
      vue/src/asset/style/variables.scss
  2. 10
      vue/src/component/RegionSelector/Tab/index.vue
  3. 2
      vue/src/component/menu/ContextMenu/index.vue
  4. 18
      vue/src/component/menu/NavMenu/theme-dark.scss
  5. 10
      vue/src/component/menu/NavMenu/theme-light.scss
  6. 2
      vue/src/layout/component/Aside/component/MenuSearch.vue
  7. 6
      vue/src/layout/component/Aside/theme-dark.scss
  8. 2
      vue/src/layout/component/Aside/theme-light.scss
  9. 17
      vue/src/layout/component/Navbar/index.vue
  10. 1
      vue/src/layout/component/Navbar/style.scss
  11. 22
      vue/src/layout/component/Navbar/theme-dark.scss
  12. 4
      vue/src/layout/component/Navbar/theme-light.scss
  13. 54
      vue/src/view/userCenter/component/Avatar.vue

34
vue/src/asset/style/variables.scss
Unescape View File

@ -47,11 +47,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
}
}
//亮色边框的颜色，使用的element-ui原定义
$border-color-light: #dcdfe6;
//暗色边框的颜色
$border-color-dark: #101117;
//菜单中icon的大小
$menu-icon-size: 14px;
//菜单中icon和文字的距离
@ -59,19 +54,19 @@ $menu-icon-text-gap: 10px;
//菜单的padding
$menu-padding: $menu-icon-size + $menu-icon-text-gap;
//暗色菜单的背景色
$menu-dark-background: #304156;
$menu-background-dark: #304156;
//暗色子级菜单的背景色
$sub-menu-dark-background: darken($menu-dark-background, 5%);
$sub-menu-background-dark: darken($menu-background-dark, 5%);
//暗色主菜单的背景色（用于双层侧边栏的主菜单和顶部导航栏）
$root-menu-dark-background: #001529;
$root-menu-background-dark: #1F293D;
//亮色菜单的文字颜色
$menu-text-light-color: #303133;
//亮色菜单的文字hover颜色
$menu-text-hover-light-color: $--color-primary;
$menu-text-color-light: #303133;
//暗色菜单的文字颜色
$menu-text-dark-color: rgba(255, 255, 255, .65);
$menu-text-color-dark: rgba(255, 255, 255, .65);
//亮色菜单的文字hover颜色
$menu-text-hover-color-light: $--color-primary;
//暗色菜单的文字hover颜色
$menu-text-dark-hover-color: rgba(255, 255, 255, 1);
$menu-text-hover-color-dark: rgba(255, 255, 255, 1);
//侧边栏宽度
$aside-width: 208px;
@ -83,13 +78,13 @@ $nav-height: 48px;
//导航栏的padding-left
$navbar-padding-left: 12px;
//亮色导航栏的功能项颜色
$navbar-item-light-color: $menu-text-light-color;
$navbar-item-color-light: $menu-text-color-light;
//暗色导航栏的功能项颜色
$navbar-item-dark-color: rgba(255, 255, 255, .85);
$navbar-item-color-dark: rgba(255, 255, 255, .85);
//亮色导航栏的功能项hover背景颜色
$navbar-item-hover-light-color: rgba(255, 255, 255, .85);
$navbar-item-hover-color-light: rgba(255, 255, 255, .85);
//暗色导航栏的功能项hover背景颜色
$navbar-item-hover-dark-color: lighten($root-menu-dark-background, 5%);
$navbar-item-hover-color-dark: lighten($root-menu-background-dark, 5%);
//多页签栏高度
$tags-view-height: 32px;
@ -101,6 +96,11 @@ $page-header-padding: 12px;
//路由页面的margin
$page-view-margin: 24px;
//亮色边框的颜色，使用的element-ui原定义
$border-color-light: #dcdfe6;
//暗色边框的颜色
$border-color-dark: darken($root-menu-background-dark, 5%);
//dialog距离顶部的距离，用于<el-dialog>的top属性、<el-dialog>中滚动区域的最大高度
$dialog-top: 100px;

10
vue/src/component/RegionSelector/Tab/index.vue
Unescape View File

@ -154,7 +154,14 @@ export default {
if (!this.searchText) return this.items = parent.children
const predicate = item => item.id.startsWith(this.searchText) || item.name.startsWith(this.searchText)
//以0-9开头的的搜索词都根据id去查
const firstCharCode = this.searchText.charCodeAt(0)
const useId = 48 <= firstCharCode && firstCharCode <= 57
const predicate = (
() => useId
? item => item.id.startsWith(this.searchText)
: item => item.name.startsWith(this.searchText)
)()
this.items = parent.children.filter(predicate)
},
@ -176,6 +183,7 @@ export default {
prev.push(item)
const next = deepClone(DEFAULT_TABS)
//选择省份时
if (level === 1) {
//选择直辖市的时候，最大深度-1，移除'市'tab
if (PROVINCE_CITIES.some(i => i.id === item.id)) {

2
vue/src/component/menu/ContextMenu/index.vue
Unescape View File

@ -90,7 +90,7 @@ export default {
.context-menu {
margin: 0;
background: $menu-dark-background;
background: $menu-background-dark;
z-index: 10;
position: fixed;
list-style-type: none;

18
vue/src/component/menu/NavMenu/theme-dark.scss
Unescape View File

@ -3,31 +3,31 @@
&.el-menu--vertical {
&.el-menu,
.el-menu {
background-color: $menu-dark-background;
background-color: $menu-background-dark;
//菜单的文字以及hover颜色
.el-menu-item,
.el-submenu__title {
color: $menu-text-dark-color;
color: $menu-text-color-dark;
&:hover {
color: $menu-text-dark-hover-color;
color: $menu-text-hover-color-dark;
}
}
//子级菜单的背景颜色
&.el-menu--inline {
background-color: $sub-menu-dark-background;
background-color: $sub-menu-background-dark;
}
//子级菜单内阴影
&.el-menu--inline {
box-shadow: inset 0 2px 8px darken($sub-menu-dark-background, 10%)
box-shadow: inset 0 2px 8px darken($sub-menu-background-dark, 10%)
}
//设置了显示弹出菜单的父级
&.el-menu--popup .popover-menu__title {
color: $menu-text-dark-hover-color;
color: $menu-text-hover-color-dark;
border-bottom-color: $border-color-dark;
}
}
@ -37,15 +37,15 @@
&.el-menu--horizontal {
&.el-menu,
.el-menu {
background-color: $root-menu-dark-background;
background-color: $root-menu-background-dark;
//菜单的文字以及hover颜色
.el-menu-item,
.el-submenu__title {
color: $menu-text-dark-color;
color: $menu-text-color-dark;
&:hover {
color: $menu-text-dark-hover-color;
color: $menu-text-hover-color-dark;
}
}
}

10
vue/src/component/menu/NavMenu/theme-light.scss
Unescape View File

@ -6,16 +6,16 @@
//菜单的文字以及hover颜色
.el-menu-item,
.el-submenu__title {
color: $menu-text-light-color;
color: $menu-text-color-light;
&:hover {
color: $menu-text-hover-light-color;
color: $menu-text-hover-color-light;
}
}
//弹出菜单的父级
&.el-menu--popup .popover-menu__title {
color: $menu-text-hover-light-color;
color: $menu-text-hover-color-light;
border-bottom-color: $border-color-light;
}
}
@ -28,10 +28,10 @@
//菜单的文字以及hover颜色
.el-menu-item,
.el-submenu__title {
color: $menu-text-light-color;
color: $menu-text-color-light;
&:hover {
color: $menu-text-hover-light-color;
color: $menu-text-hover-color-light;
}
}
}

2
vue/src/layout/component/Aside/component/MenuSearch.vue
Unescape View File

@ -51,6 +51,6 @@ export default {
.dark .aside-search .el-input__inner {
border: none;
color: #ffffff;
background-color: lighten($menu-dark-background, 5%);
background-color: lighten($menu-background-dark, 5%);
}
</style>

6
vue/src/layout/component/Aside/theme-dark.scss
Unescape View File

@ -1,12 +1,12 @@
.aside.dark {
&,
> .el-drawer__wrapper .el-drawer__body {
background-color: $menu-dark-background;
background-color: $menu-background-dark;
}
.root-sidebar,
.root-sidebar > .el-menu--vertical.el-menu {
background-color: $root-menu-dark-background;
background-color: $root-menu-background-dark;
}
.root-sidebar {
@ -21,7 +21,7 @@
border-top-color: $border-color-dark;
i {
color: $menu-text-dark-color;
color: $menu-text-color-dark;
}
}
}

2
vue/src/layout/component/Aside/theme-light.scss
Unescape View File

@ -8,7 +8,7 @@
border-top-color: $border-color-light;
i {
color: $menu-text-light-color;
color: $menu-text-color-light;
}
}
}

17
vue/src/layout/component/Navbar/index.vue
Unescape View File

@ -47,14 +47,17 @@ export default {
command(command) {
switch (command) {
case 'user':
this.$router.push('/user')
const path = '/user'
this.$route.path !== path && this.$router.push(path)
break
case 'guide':
this.$guide(0, this.guideSteps)
break
case 'logout':
if (this.prepareLogout) return
elConfirm('确认退出?').then(() => this.$store.dispatch('user/logout'))
if (!this.prepareLogout) {
elConfirm('确认退出?')
.then(() => this.$store.dispatch('user/logout'))
}
break
}
},
@ -103,14 +106,18 @@ export default {
<el-avatar size={30} src={this.avatar} icon="el-icon-user-solid"/>
<span class="hidden-xs">{this.name}</span>
</div>
<el-dropdown-menu class="user-dropdown" slot="dropdown">
<el-dropdown-menu
slot="dropdown"
class={navbarGetters.theme}
visible-arrow={false}
>
<el-dropdown-item icon="el-icon-user" command="user">
个人中心
</el-dropdown-item>
<el-dropdown-item class="hidden-xs" icon="el-icon-guide" command="guide">
新手指引
</el-dropdown-item>
<el-dropdown-item divided icon="el-icon-switch-button" command="logout">
<el-dropdown-item icon="el-icon-switch-button" command="logout">
退出登录
</el-dropdown-item>
</el-dropdown-menu>

1
vue/src/layout/component/Navbar/style.scss
Unescape View File

@ -37,6 +37,7 @@
.avatar-wrapper {
display: flex;
align-items: center;
height: 100%;
span {
margin-right: 5px;

22
vue/src/layout/component/Navbar/theme-dark.scss
Unescape View File

@ -1,11 +1,27 @@
.navbar.dark {
background-color: $root-menu-dark-background;
background-color: $root-menu-background-dark;
.navbar-item {
color: $navbar-item-dark-color;
color: $navbar-item-color-dark;
&:hover {
background: $navbar-item-hover-dark-color;
background: $navbar-item-hover-color-dark;
}
}
}
//暗色主题的下拉菜单
.dark.el-dropdown-menu {
background-color: $root-menu-background-dark;
border: none;
.el-dropdown-menu__item {
color: $menu-text-color-dark;
&:hover,
&:focus {
background-color: unset;
color: $menu-text-hover-color-dark;
}
}
}

4
vue/src/layout/component/Navbar/theme-light.scss
Unescape View File

@ -2,10 +2,10 @@
background-color: #ffffff;
.navbar-item {
color: $navbar-item-light-color;
color: $navbar-item-color-light;
&:hover {
background: $navbar-item-hover-light-color;
background: $navbar-item-hover-color-light;
}
}
}

54
vue/src/view/userCenter/component/Avatar.vue
Unescape View File

@ -1,7 +1,6 @@
<template>
<abstract-dialog :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
<el-row class="avatar-cropper">
<div class="img-wrapper">
<div class="avatar-cropper">
<vue-cropper
ref="cropper"
:img="img"
@ -14,16 +13,14 @@
outputType="png"
@wheel.native.prevent="scale"
/>
</div>
<input
ref="input"
accept="image/png, image/jpeg, image/gif, image/jpg"
style="display: none"
type="file"
@change="chooseImage"
>
</el-row>
</div>
<template v-slot:footer>
<el-button plain size="small" @click="$refs.input.click()">选择图片</el-button>
@ -61,18 +58,36 @@ export default {
},
methods: {
clear() {
this.loading = false
this.$refs.cropper.clearCrop()
this.img && window.URL.revokeObjectURL(this.img)
this.img = ''
this.name = ''
},
scale(e) {
const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
this.$refs.cropper.changeScale(eventDelta / 120)
},
chooseImage(e) {
if (this.loading) return
this.clear()
let file = e.target.files[0]
const file = e.target.files[0]
if (!file.type.includes('image')) {
return elError('请上传图片')
}
if (file.size > 1048576) {
return elError('上传的图片不能大于1M')
}
this.name = file.name
let reader = new FileReader()
const reader = new FileReader()
reader.onload = e => {
this.img = window.URL.createObjectURL(new Blob([e.target.result]))
}
@ -95,19 +110,6 @@ export default {
})
},
clear() {
this.loading = false
this.$refs.cropper.clearCrop()
if (this.img) window.URL.revokeObjectURL(this.img)
this.img = ''
this.name = ''
},
scale(e) {
const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
this.$refs.cropper.changeScale(eventDelta / 120)
},
cancel() {
this.closeDialog()
this.clear()
@ -118,17 +120,17 @@ export default {
<style lang="scss">
.avatar-cropper {
height: 500px;
width: 100%;
border: 1px solid #ebebeb;
.cropper-crop-box {
border: 1px solid #39f;
border-radius: 50%;
overflow: hidden;
}
.img-wrapper {
height: 500px;
width: 100%;
display: inline-block;
border: 1px solid #ebebeb;
> input[type=file] {
display: none;
}
}
</style>

Write Preview
Loading…
Cancel
Save