From bd2f187c3f6e24576919e71c794cf8cb9f8c8bac Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期四, 29 十二月 2022 11:21:41 +0800
Subject: [PATCH] 1.初级实现项目换肤功能
---
src/layout/components/Navbar.vue | 71 +++++++++++++++++++++++------------
1 files changed, 47 insertions(+), 24 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 9189fda..86e1c95 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,16 +1,28 @@
<template>
<div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <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>
+ <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"/>
+ <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
+ <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
+ <!-- </el-tooltip>-->
+ </template>
+
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
<div style="display: flex;align-items: center;margin-top: -5px">
- <div class="headerImg"><i class="el-icon-user" /></div>
- <div class="headerName">{{ username }}</div>
+
+ <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>
<!-- <i class="el-icon-caret-bottom" />-->
@@ -51,11 +63,11 @@
<!-- <el-form-item label="鐢ㄦ埛鍚嶇О锛�">-->
<!-- <div> {{ username }}</div>-->
<!-- </el-form-item>-->
- <el-form-item label="瀵嗙爜锛�" prop="password">
- <el-input v-model="form.password" style="width: 220px;" />
+ <el-form-item label="鍘熷瘑鐮侊細" prop="password">
+ <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">
@@ -69,22 +81,27 @@
</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'
const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
components: {
Breadcrumb,
- Hamburger
+ Hamburger,
+ Search,
+ Screenfull
},
computed: {
...mapGetters([
'sidebar',
- 'avatar'
+ 'avatar',
+ 'device'
])
},
created() {
@@ -92,9 +109,20 @@
this.username = getCookie('username')
},
data() {
- const validatePassword = (rule, value, callback) => {
+ const validatePassword1 = (rule, value, callback) => {
if (!value) {
- return callback(new Error('璇疯緭鍏ュ瘑鐮侊紒'))
+ return callback(new Error('璇疯緭鍏ュ師瀵嗙爜锛�'))
+ } else {
+ if (SER_HZ.test(value)) {
+ return callback(new Error('瀵嗙爜涓嶈兘涓轰腑鏂囷紒'))
+ } else {
+ callback()
+ }
+ }
+ }
+ const validatePassword2 = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('璇疯緭鍏ユ柊瀵嗙爜锛�'))
} else {
if (SER_HZ.test(value)) {
return callback(new Error('瀵嗙爜涓嶈兘涓轰腑鏂囷紒'))
@@ -113,10 +141,10 @@
dialogVisible: false,
formRules: {
password: [
- { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
+ {required: true, validator: validatePassword1, trigger: ['blur', 'change']}
],
newpassword: [
- { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
+ {required: true, validator: validatePassword2, trigger: ['blur', 'change']}
]
}
}
@@ -172,6 +200,8 @@
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+ //background-color: #f8f8fa;
+
.hamburger-container {
line-height: 46px;
height: 100%;
@@ -193,6 +223,7 @@
float: right;
height: 100%;
line-height: 50px;
+ display: flex;
&:focus {
outline: none;
@@ -223,14 +254,6 @@
margin-top: 5px;
position: relative;
cursor: pointer;
-
- .headerImg {
- margin: 5px;
- }
-
- .headerName {
- font-weight: bolder;
- }
.user-avatar {
cursor: pointer;
--
Gitblit v1.9.3