自定义主题颜色
fanluyan
2 years ago
parent
9daf7dd7ab
commit
f7c5550bb1
@ -0,0 +1,27 @@
|
|||||||
|
//Brand @color
|
||||||
|
@color-primary: #409eff;
|
||||||
|
@color-primary-light: mix(@color-white, @color-primary, 80%);
|
||||||
|
@color-primary-lighter: mix(@color-white, @color-primary, 90%);
|
||||||
|
//Functional @color
|
||||||
|
@color-success: #67c23a;
|
||||||
|
@color-warning: #e6a23c;
|
||||||
|
@color-danger: #f56c6c;
|
||||||
|
@color-info: #909399;
|
||||||
|
@color-red: #f00;
|
||||||
|
//Font color
|
||||||
|
@color-text-primary: #303133;
|
||||||
|
@color-text-regular: #606266;
|
||||||
|
@color-text-secondary: #909399;
|
||||||
|
@color-text-placeholder: #c0c4cc;
|
||||||
|
//Border color
|
||||||
|
@border-color-base: #dcdfe6;
|
||||||
|
@border-color-light: #e4e7ed;
|
||||||
|
@border-color-lighter: #ebeef5;
|
||||||
|
@border-color-extra-light: #f2f6fc;
|
||||||
|
//Background color
|
||||||
|
@color-white: #ffffff;
|
||||||
|
@color-black: #000000;
|
||||||
|
@background-color-base: #f5f7fa;
|
||||||
|
|
||||||
|
//阴影
|
||||||
|
@box-shadow-basic: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
@ -1,221 +1,259 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<!-- 折叠按钮 -->
|
<!-- 折叠按钮 -->
|
||||||
<!-- <div class="collapse-btn" @click="collapseChage">
|
<!-- <div class="collapse-btn" @click="collapseChage">
|
||||||
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
||||||
<i v-else class="el-icon-s-unfold"></i>
|
<i v-else class="el-icon-s-unfold"></i>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="logo">可视化智能管控系统</div>
|
<div class="logo">可视化智能管控系统</div>
|
||||||
<v-sidebar></v-sidebar>
|
<v-sidebar></v-sidebar>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<div class="header-user-con">
|
<div class="header-user-con">
|
||||||
<el-select v-model="theme" @change="changeTheme">
|
<el-select v-model="theme" value-key="value" @change="changeTheme">
|
||||||
<el-option label="蓝色" value="蓝色"></el-option>
|
<el-option
|
||||||
<el-option label="红色" value="红色"></el-option>
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
<!-- <el-option label="红色" value="红色"></el-option>
|
||||||
<el-option label="绿色" value="绿色"></el-option>
|
<el-option label="绿色" value="绿色"></el-option>
|
||||||
<el-option label="橙色" value="橙色"></el-option>
|
<el-option label="橙色" value="橙色"></el-option> -->
|
||||||
</el-select>
|
</el-select>
|
||||||
<!-- 全屏显示 -->
|
<!-- 全屏显示 -->
|
||||||
|
|
||||||
<div class="btn-fullscreen" @click="handleFullScreen">
|
<div class="btn-fullscreen" @click="handleFullScreen">
|
||||||
<el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
|
<el-tooltip
|
||||||
<i class="el-icon-rank"></i>
|
effect="dark"
|
||||||
</el-tooltip>
|
:content="fullscreen ? `取消全屏` : `全屏`"
|
||||||
</div>
|
placement="bottom"
|
||||||
|
>
|
||||||
|
<i class="el-icon-rank"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 用户头像 -->
|
<!-- 用户头像 -->
|
||||||
<div class="user-avator">
|
<div class="user-avator">
|
||||||
<img src="../../assets/img/user.jpeg" />
|
<img src="../../assets/img/user.jpeg" />
|
||||||
</div>
|
|
||||||
<!-- 用户名下拉菜单 -->
|
|
||||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
{{ username }}
|
|
||||||
<i class="el-icon-caret-bottom"></i>
|
|
||||||
</span>
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 用户名下拉菜单 -->
|
||||||
|
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{ username }}
|
||||||
|
<i class="el-icon-caret-bottom"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item divided command="loginout"
|
||||||
|
>退出登录</el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// import bus from '../common/bus';
|
// import bus from '../common/bus';
|
||||||
import updateElementUiTheme from 'update-element-ui-theme';
|
import updateElementUiTheme from "update-element-ui-theme";
|
||||||
import vSidebar from './Sidebar.vue';
|
import vSidebar from "./Sidebar.vue";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
vSidebar
|
vSidebar,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "#20a0ff",
|
||||||
|
label: "蓝色",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "#EE320C",
|
||||||
|
label: "红色",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "#25EE28",
|
||||||
|
label: "绿色",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "#f08200",
|
||||||
|
label: "橙色",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
theme: {},
|
||||||
|
|
||||||
|
//collapse: false,
|
||||||
|
fullscreen: false,
|
||||||
|
name: "xinyin",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
username() {
|
||||||
|
let username = localStorage.getItem("ms_username");
|
||||||
|
return username ? username : this.name;
|
||||||
},
|
},
|
||||||
data() {
|
},
|
||||||
return {
|
methods: {
|
||||||
color: '#20a0ff',
|
//修改主题色
|
||||||
theme: '蓝色',
|
changeTheme(e) {
|
||||||
//collapse: false,
|
console.log(e);
|
||||||
fullscreen: false,
|
// const app = document.getElementById("app");
|
||||||
name: 'xinyin'
|
// if (this.theme === "蓝色") {
|
||||||
//message: 2
|
// this.color = "#20a0ff";
|
||||||
};
|
// app.classList.remove("redStyle", "greenStyle", "orangeStyle");
|
||||||
|
// app.classList.add("blueStyle");
|
||||||
|
// } else if (this.theme === "红色") {
|
||||||
|
// this.color = "#EE320C";
|
||||||
|
// app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
|
||||||
|
// app.classList.add("redStyle");
|
||||||
|
// } else if (this.theme === "绿色") {
|
||||||
|
// this.color = "#25EE28";
|
||||||
|
// app.classList.add("greenStyle");
|
||||||
|
// } else if (this.theme === "橙色") {
|
||||||
|
// this.color = "#f08200";
|
||||||
|
// app.classList.remove("blueStyle", "greenStyle", "redStyle");
|
||||||
|
// app.classList.add("orangeStyle");
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
computed: {
|
// 用户名下拉菜单选择事件
|
||||||
username() {
|
handleCommand(command) {
|
||||||
let username = localStorage.getItem('ms_username');
|
if (command == "loginout") {
|
||||||
return username ? username : this.name;
|
localStorage.removeItem("ms_username");
|
||||||
}
|
this.$router.push("/login");
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
// 侧边栏折叠
|
||||||
//修改主题色
|
// collapseChage() {
|
||||||
changeTheme() {
|
// this.collapse = !this.collapse;
|
||||||
const app = document.getElementById('app');
|
// bus.$emit('collapse', this.collapse);
|
||||||
if (this.theme === '蓝色') {
|
// this.$store.commit('changeOpen', this.collapse);
|
||||||
this.color = '#20a0ff';
|
// },
|
||||||
app.classList.remove('redStyle', 'greenStyle', 'orangeStyle');
|
// 全屏事件
|
||||||
app.classList.add('blueStyle');
|
handleFullScreen() {
|
||||||
} else if (this.theme === '红色') {
|
let element = document.documentElement;
|
||||||
this.color = '#EE320C';
|
if (this.fullscreen) {
|
||||||
app.classList.remove('blueStyle', 'greenStyle', 'orangeStyle');
|
if (document.exitFullscreen) {
|
||||||
app.classList.add('redStyle');
|
document.exitFullscreen();
|
||||||
} else if (this.theme === '绿色') {
|
} else if (document.webkitCancelFullScreen) {
|
||||||
this.color = '#25EE28';
|
document.webkitCancelFullScreen();
|
||||||
app.classList.add('greenStyle');
|
} else if (document.mozCancelFullScreen) {
|
||||||
} else if (this.theme === '橙色') {
|
document.mozCancelFullScreen();
|
||||||
this.color = '#f08200';
|
} else if (document.msExitFullscreen) {
|
||||||
app.classList.remove('blueStyle', 'greenStyle', 'redStyle');
|
document.msExitFullscreen();
|
||||||
app.classList.add('orangeStyle');
|
}
|
||||||
}
|
} else {
|
||||||
},
|
if (element.requestFullscreen) {
|
||||||
// 用户名下拉菜单选择事件
|
element.requestFullscreen();
|
||||||
handleCommand(command) {
|
} else if (element.webkitRequestFullScreen) {
|
||||||
if (command == 'loginout') {
|
element.webkitRequestFullScreen();
|
||||||
localStorage.removeItem('ms_username');
|
} else if (element.mozRequestFullScreen) {
|
||||||
this.$router.push('/login');
|
element.mozRequestFullScreen();
|
||||||
}
|
} else if (element.msRequestFullscreen) {
|
||||||
},
|
// IE11
|
||||||
// 侧边栏折叠
|
element.msRequestFullscreen();
|
||||||
// collapseChage() {
|
|
||||||
// this.collapse = !this.collapse;
|
|
||||||
// bus.$emit('collapse', this.collapse);
|
|
||||||
// this.$store.commit('changeOpen', this.collapse);
|
|
||||||
// },
|
|
||||||
// 全屏事件
|
|
||||||
handleFullScreen() {
|
|
||||||
let element = document.documentElement;
|
|
||||||
if (this.fullscreen) {
|
|
||||||
if (document.exitFullscreen) {
|
|
||||||
document.exitFullscreen();
|
|
||||||
} else if (document.webkitCancelFullScreen) {
|
|
||||||
document.webkitCancelFullScreen();
|
|
||||||
} else if (document.mozCancelFullScreen) {
|
|
||||||
document.mozCancelFullScreen();
|
|
||||||
} else if (document.msExitFullscreen) {
|
|
||||||
document.msExitFullscreen();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (element.requestFullscreen) {
|
|
||||||
element.requestFullscreen();
|
|
||||||
} else if (element.webkitRequestFullScreen) {
|
|
||||||
element.webkitRequestFullScreen();
|
|
||||||
} else if (element.mozRequestFullScreen) {
|
|
||||||
element.mozRequestFullScreen();
|
|
||||||
} else if (element.msRequestFullscreen) {
|
|
||||||
// IE11
|
|
||||||
element.msRequestFullscreen();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.fullscreen = !this.fullscreen;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
this.fullscreen = !this.fullscreen;
|
||||||
},
|
},
|
||||||
mounted() {
|
},
|
||||||
this.$watch(
|
created() {
|
||||||
'color',
|
this.theme = {
|
||||||
(value) => {
|
value: "#20a0ff",
|
||||||
updateElementUiTheme({
|
label: "蓝色",
|
||||||
theme: value,
|
};
|
||||||
themeName: '--my-theme-name'
|
},
|
||||||
});
|
mounted() {
|
||||||
},
|
this.$watch(
|
||||||
{ immediate: true }
|
"color",
|
||||||
);
|
(value) => {
|
||||||
}
|
updateElementUiTheme({
|
||||||
|
theme: value,
|
||||||
|
themeName: "--my-theme-name",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: @color-white;
|
||||||
|
background-color: @color-primary;
|
||||||
|
.collapse-btn {
|
||||||
|
float: left;
|
||||||
|
padding: 0 21px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
float: left;
|
||||||
|
width: 250px;
|
||||||
|
line-height: 70px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
float: right;
|
||||||
|
padding-right: 32px;
|
||||||
|
}
|
||||||
|
.header-user-con {
|
||||||
|
display: flex;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
font-size: 22px;
|
align-items: center;
|
||||||
color: #fff;
|
.el-select {
|
||||||
background-color: #242f42;
|
width: 90px;
|
||||||
.collapse-btn {
|
|
||||||
float: left;
|
|
||||||
padding: 0 21px;
|
|
||||||
cursor: pointer;
|
|
||||||
line-height: 70px;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
float: left;
|
|
||||||
width: 250px;
|
|
||||||
line-height: 70px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.header-right {
|
|
||||||
float: right;
|
|
||||||
padding-right: 32px;
|
|
||||||
}
|
|
||||||
.header-user-con {
|
|
||||||
display: flex;
|
|
||||||
height: 70px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.btn-fullscreen {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
margin-right: 5px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.btn-bell,
|
|
||||||
.btn-fullscreen {
|
|
||||||
position: relative;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.btn-bell-badge {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: -2px;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #f56c6c;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.btn-bell .el-icon-bell {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.user-name {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.user-avator {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.user-avator img {
|
|
||||||
display: block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.el-dropdown-link {
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.el-dropdown-menu__item {
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.btn-fullscreen {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.btn-bell,
|
||||||
|
.btn-fullscreen {
|
||||||
|
position: relative;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-bell-badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -2px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f56c6c;
|
||||||
|
color: @color-white;
|
||||||
|
}
|
||||||
|
.btn-bell .el-icon-bell {
|
||||||
|
color: @color-white;
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.user-avator {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.user-avator img {
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.el-dropdown-link {
|
||||||
|
color: @color-white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue