From 03e89ae339ff9da3c620fae212b89c302fea5997 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 30 十二月 2022 16:52:59 +0800
Subject: [PATCH] 1.新增头部深色浅色颜色切换功能
---
src/layout/components/Navbar.vue | 87 ++++++++++++++++++++++---------------------
1 files changed, 45 insertions(+), 42 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 86e1c95..687336b 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,16 +1,17 @@
<template>
- <div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>
+ <!-- <div class="navbar">-->
+ <div class="navbar" :style="{background: $store.state.settings.headBackgroundColorValue? '#304156':'#fff'}">
+ <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <breadcrumb class="breadcrumb-container"/>
+ <breadcrumb class="breadcrumb-container" />
<div class="right-menu">
-<!-- <template v-if="device!=='mobile'">-->
+ <!-- <template v-if="device!=='mobile'">-->
<template>
- <search id="header-search" class="right-menu-item"/>
+ <search id="header-search" class="right-menu-item" />
<!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
- <screenfull id="screenfull" class="right-menu-item hover-effect"/>
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!-- </el-tooltip>-->
@@ -21,7 +22,7 @@
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
<div style="display: flex;align-items: center;margin-top: -5px">
- <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7"/>
+ <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
<div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
</div>
@@ -64,10 +65,10 @@
<!-- <div> {{ username }}</div>-->
<!-- </el-form-item>-->
<el-form-item label="鍘熷瘑鐮侊細" prop="password">
- <el-input v-model="form.password" style="width: 220px;"/>
+ <el-input v-model="form.password" style="width: 220px;" />
</el-form-item>
<el-form-item label="鏂板瘑鐮侊細" prop="newpassword">
- <el-input v-model="form.newpassword" style="width: 220px;"/>
+ <el-input v-model="form.newpassword" style="width: 220px;" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
@@ -81,11 +82,11 @@
</template>
<script>
-import {mapGetters} from 'vuex'
+import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
-import {getCookie} from '@/utils/auth'
-import {UpdateUserPassword} from '@/api/user'
+import { getCookie } from '@/utils/auth'
+import { UpdateUserPassword } from '@/api/user'
import Search from '@/components/HeaderSearch'
import Screenfull from '@/components/Screenfull'
@@ -141,10 +142,10 @@
dialogVisible: false,
formRules: {
password: [
- {required: true, validator: validatePassword1, trigger: ['blur', 'change']}
+ { required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
],
newpassword: [
- {required: true, validator: validatePassword2, trigger: ['blur', 'change']}
+ { required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
]
}
}
@@ -193,11 +194,13 @@
</script>
<style lang="scss" scoped>
+$main_color: #42b983;
+
.navbar {
height: 50px;
overflow: hidden;
position: relative;
- background: #fff;
+ //background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
//background-color: #f8f8fa;
@@ -273,32 +276,32 @@
}
}
- .footerButton {
- display: flex;
- justify-content: end;
- }
-
- ::v-deep .el-button--primary {
- background-color: #42b983 !important;
- height: 30px;
- display: flex;
- align-items: center;
- //border: 1px solid $main_color;
- border: none;
- padding: 0 20px;
- }
-
- ::v-deep .el-button--default {
- background-color: #ffffff !important;
- height: 30px;
- display: flex;
- align-items: center;
- padding: 0 20px;
- }
-
- ::v-deep .el-input__inner {
- height: 30px;
- line-height: 30px;
- }
+ //.footerButton {
+ // display: flex;
+ // justify-content: end;
+ //}
+ //
+ //::v-deep .el-button--primary {
+ // background-color: $main_color !important;
+ // height: 30px;
+ // display: flex;
+ // align-items: center;
+ // //border: 1px solid $main_color;
+ // border: none;
+ // padding: 0 20px;
+ //}
+ //
+ //::v-deep .el-button--default {
+ // background-color: #ffffff !important;
+ // height: 30px;
+ // display: flex;
+ // align-items: center;
+ // padding: 0 20px;
+ //}
+ //
+ //::v-deep .el-input__inner {
+ // height: 30px;
+ // line-height: 30px;
+ //}
}
</style>
--
Gitblit v1.9.3