自定义主题颜色
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>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<!-- <div class="collapse-btn" @click="collapseChage">
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<!-- <div class="collapse-btn" @click="collapseChage">
|
||||
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
||||
<i v-else class="el-icon-s-unfold"></i>
|
||||
</div> -->
|
||||
<div class="logo">可视化智能管控系统</div>
|
||||
<v-sidebar></v-sidebar>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<el-select v-model="theme" @change="changeTheme">
|
||||
<el-option label="蓝色" value="蓝色"></el-option>
|
||||
<el-option label="红色" value="红色"></el-option>
|
||||
<div class="logo">可视化智能管控系统</div>
|
||||
<v-sidebar></v-sidebar>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<el-select v-model="theme" value-key="value" @change="changeTheme">
|
||||
<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-select>
|
||||
<!-- 全屏显示 -->
|
||||
<el-option label="橙色" value="橙色"></el-option> -->
|
||||
</el-select>
|
||||
<!-- 全屏显示 -->
|
||||
|
||||
<div class="btn-fullscreen" @click="handleFullScreen">
|
||||
<el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
|
||||
<i class="el-icon-rank"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="btn-fullscreen" @click="handleFullScreen">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="fullscreen ? `取消全屏` : `全屏`"
|
||||
placement="bottom"
|
||||
>
|
||||
<i class="el-icon-rank"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="user-avator">
|
||||
<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 class="user-avator">
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
// import bus from '../common/bus';
|
||||
import updateElementUiTheme from 'update-element-ui-theme';
|
||||
import vSidebar from './Sidebar.vue';
|
||||
import updateElementUiTheme from "update-element-ui-theme";
|
||||
import vSidebar from "./Sidebar.vue";
|
||||
export default {
|
||||
components: {
|
||||
vSidebar
|
||||
components: {
|
||||
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 {
|
||||
color: '#20a0ff',
|
||||
theme: '蓝色',
|
||||
//collapse: false,
|
||||
fullscreen: false,
|
||||
name: 'xinyin'
|
||||
//message: 2
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//修改主题色
|
||||
changeTheme(e) {
|
||||
console.log(e);
|
||||
// const app = document.getElementById("app");
|
||||
// if (this.theme === "蓝色") {
|
||||
// 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() {
|
||||
let username = localStorage.getItem('ms_username');
|
||||
return username ? username : this.name;
|
||||
}
|
||||
// 用户名下拉菜单选择事件
|
||||
handleCommand(command) {
|
||||
if (command == "loginout") {
|
||||
localStorage.removeItem("ms_username");
|
||||
this.$router.push("/login");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//修改主题色
|
||||
changeTheme() {
|
||||
const app = document.getElementById('app');
|
||||
if (this.theme === '蓝色') {
|
||||
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');
|
||||
}
|
||||
},
|
||||
// 用户名下拉菜单选择事件
|
||||
handleCommand(command) {
|
||||
if (command == 'loginout') {
|
||||
localStorage.removeItem('ms_username');
|
||||
this.$router.push('/login');
|
||||
}
|
||||
},
|
||||
// 侧边栏折叠
|
||||
// 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;
|
||||
// 侧边栏折叠
|
||||
// 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;
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(
|
||||
'color',
|
||||
(value) => {
|
||||
updateElementUiTheme({
|
||||
theme: value,
|
||||
themeName: '--my-theme-name'
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.theme = {
|
||||
value: "#20a0ff",
|
||||
label: "蓝色",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$watch(
|
||||
"color",
|
||||
(value) => {
|
||||
updateElementUiTheme({
|
||||
theme: value,
|
||||
themeName: "--my-theme-name",
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background-color: #242f42;
|
||||
.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;
|
||||
align-items: center;
|
||||
.el-select {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
Loading…
Reference in New Issue