xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

主题色

Browse Source
master
fanluyan 2 years ago
parent 0388fb0f48
commit a6a985faf1
13 changed files with 278 additions and 224 deletions
Show Stats Download Patch File Download Diff File

2
src/App.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template>
<div id="app" class="blueStyle">
<div id="app" class="greenStyle">
<router-view> </router-view>
</div>
</template>

6
src/assets/css/element.less
Unescape Escape View File

@ -63,3 +63,9 @@
.el-dropdown [disabled] {
color: #fff;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.el-dropdown-menu--small .el-dropdown-menu__item {
font-size: 14px;
}

2
src/assets/css/global.less
Unescape Escape View File

@ -1,5 +1,5 @@
//Brand @color
@color-primary: #409eff;
@color-primary: #169e8c;
@color-primary-light: mix(@color-white, @color-primary, 80%);
@color-primary-lighter: mix(@color-white, @color-primary, 90%);
//Functional @color

387
src/assets/css/theme.less
Unescape Escape View File

@ -1,4 +1,4 @@
//蓝色主题
// //蓝色主题
.blueStyle {
.header {
background: #20a0ff;
@ -68,234 +68,237 @@
}
}
//红色主题
.redStyle {
.header {
background: #ee320c;
}
.el-menu {
background: #ee320c;
i {
color: @color-white !important;
}
.el-menu-item {
color: @color-white;
}
.el-menu-item.is-active {
color: @color-white;
}
.el-submenu .el-submenu__title {
color: @color-white;
}
.el-menu-item:not(.is-disabled):focus,
.el-menu-item:not(.is-disabled):hover {
color: #ee320c;
background-color: @color-white;
border-bottom: 2px solid @color-white;
i {
color: #ee320c !important;
}
}
.el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title {
color: #ee320c !important;
background-color: @color-white;
border-bottom: 2px solid @color-white;
i {
color: #ee320c !important;
}
}
.el-submenu.is-active .el-submenu__title {
color: @color-white;
}
}
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
color: #ee320c;
}
.sidebar
.el-menu--horizontal
.el-submenu.is-active
.el-submenu__title
> i:first-child {
color: #ee320c;
}
.tags-li.active {
border: 1px solid #ee320c;
background-color: #ee320c;
}
}
// //红色主题
// .redStyle {
// .header {
// background: #ee320c;
// }
// .el-menu {
// background: #ee320c;
// i {
// color: @color-white !important;
// }
// .el-menu-item {
// color: @color-white;
// }
// .el-menu-item.is-active {
// color: @color-white;
// }
// .el-submenu .el-submenu__title {
// color: @color-white;
// }
// .el-menu-item:not(.is-disabled):focus,
// .el-menu-item:not(.is-disabled):hover {
// color: #ee320c;
// background-color: @color-white;
// border-bottom: 2px solid @color-white;
// i {
// color: #ee320c !important;
// }
// }
// .el-submenu:focus .el-submenu__title,
// .el-submenu:hover .el-submenu__title {
// color: #ee320c !important;
// background-color: @color-white;
// border-bottom: 2px solid @color-white;
// i {
// color: #ee320c !important;
// }
// }
// .el-submenu.is-active .el-submenu__title {
// color: @color-white;
// }
// }
// .sidebar .el-menu--horizontal .el-menu-item.is-active i {
// color: #ee320c;
// }
// .sidebar
// .el-menu--horizontal
// .el-submenu.is-active
// .el-submenu__title
// > i:first-child {
// color: #ee320c;
// }
// .tags-li.active {
// border: 1px solid #ee320c;
// background-color: #ee320c;
// }
// }
//绿色主题
.greenStyle {
.header {
background: @green-color;
background: #169e8c;
}
.el-menu {
background: @green-color;
background: #169e8c;
i {
color: @color-white !important;
}
.el-menu-item {
color: @color-white;
}
.el-menu-item.is-active {
color: @color-white;
}
.el-submenu .el-submenu__title {
color: @color-white;
}
.el-menu-item:not(.is-disabled):focus,
.el-menu-item:not(.is-disabled):hover {
color: @green-color;
background-color: @color-white;
border-bottom: 2px solid @color-white;
color: #fff;
background-color: #128071;
border-bottom: 2px solid #128071;
i {
color: @green-color !important;
color: #fff !important;
}
}
.el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title {
color: @green-color !important;
background-color: @color-white;
border-bottom: 2px solid @color-white;
color: #fff !important;
background-color: #128071;
border-bottom: 2px solid #128071;
i {
color: @green-color !important;
color: #fff !important;
}
}
.el-submenu.is-active .el-submenu__title {
color: @color-white;
}
}
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
color: @green-color;
}
.sidebar
.el-menu--horizontal
.el-submenu.is-active
.el-submenu__title
> i:first-child {
color: @green-color;
}
.tags-li.active {
border: 1px solid @green-color;
background-color: @green-color;
}
}
//橙色主题
.orangeStyle {
.header {
background: @orange-color;
}
.sidebar {
.el-menu {
background: @orange-color;
i {
color: @color-white !important;
}
.el-menu-item {
color: @color-white;
}
.el-menu-item.is-active {
color: @color-white;
}
.el-submenu .el-submenu__title {
color: @color-white;
}
.el-menu-item:not(.is-disabled):focus,
.el-menu-item:not(.is-disabled):hover {
color: @color-white;
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #128071 !important;
color: #fff !important;
background-color: #128071 !important;
i {
color: @color-white !important;
color: #fff !important;
}
}
.el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title {
color: @color-white !important;
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
.el-submenu.is-active {
.el-submenu__title {
border-bottom: 2px solid #128071 !important;
color: #fff !important;
background-color: #128071;
i {
color: @color-white !important;
color: #fff !important;
}
}
.el-submenu.is-active .el-submenu__title {
color: @color-white;
}
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
}
.el-menu--horizontal > .el-menu-item.is-active {
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
}
.el-menu--horizontal
.el-submenu.is-active
.el-submenu__title
> i:first-child {
color: @orange-color;
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
color: #fff;
background: #f39b33 !important;
}
.el-menu--horizontal .el-menu-item.is-active i {
color: @orange-color;
.gallery-thumbs .swiper-slide-active {
border: 3px solid #169e8c !important;
}
.tags-li.active {
border: 1px solid #169e8c;
background-color: #169e8c;
}
.monitor-container
.sideBar
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
color: #fff;
background: #f39b33 !important;
//渐变
.thumb-example .picBottom .smallPicBox .borderActive .timeInfo {
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
}
.gallery-thumbs .swiper-slide-active {
border: 3px solid @orange-color !important;
.picRotation .imageCenter .imgList .infoTop {
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
}
.tags-li.active {
border: 1px solid @orange-color;
background-color: @orange-color;
.picRotation .imageCenter .imgList .infoBottom {
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
}
}
// //橙色主题
// .orangeStyle {
// .header {
// background: @orange-color;
// }
// .sidebar {
// .el-menu {
// background: @orange-color;
// i {
// color: @color-white !important;
// }
// .el-menu-item {
// color: @color-white;
// }
// .el-menu-item.is-active {
// color: @color-white;
// }
// .el-submenu .el-submenu__title {
// color: @color-white;
// }
// .el-menu-item:not(.is-disabled):focus,
// .el-menu-item:not(.is-disabled):hover {
// color: @color-white;
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// i {
// color: @color-white !important;
// }
// }
// .el-submenu:focus .el-submenu__title,
// .el-submenu:hover .el-submenu__title {
// color: @color-white !important;
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// i {
// color: @color-white !important;
// }
// }
// .el-submenu.is-active .el-submenu__title {
// color: @color-white;
// }
// }
// .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// }
// .el-menu--horizontal > .el-menu-item.is-active {
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// }
// .el-menu--horizontal
// .el-submenu.is-active
// .el-submenu__title
// > i:first-child {
// color: @orange-color;
// }
// .el-tree--highlight-current
// .el-tree-node.is-current
// > .el-tree-node__content {
// // 设置颜色
// color: #fff;
// background: #f39b33 !important;
// }
// .el-menu--horizontal .el-menu-item.is-active i {
// color: @orange-color;
// }
// }
// .monitor-container
// .sideBar
// .el-tree--highlight-current
// .el-tree-node.is-current
// > .el-tree-node__content {
// color: #fff;
// background: #f39b33 !important;
// }
// .gallery-thumbs .swiper-slide-active {
// border: 3px solid @orange-color !important;
// }
// .tags-li.active {
// border: 1px solid @orange-color;
// background-color: @orange-color;
// }
// }

BIN
src/assets/css/theme/fonts/element-icons.ttf
View File

Binary file not shown.

BIN
src/assets/css/theme/fonts/element-icons.woff
View File

Binary file not shown.

1
src/assets/css/theme/index.css
View File

File diff suppressed because one or more lines are too long

2
src/components/common/Sidebar.vue
Unescape Escape View File

@ -78,7 +78,7 @@ export default {
{
icon: "el-icon-search",
index: "/realTimeSearch",
title: "实时查询",
title: "历史图片",
},
{
icon: "el-icon-files",

3
src/main.js
Unescape Escape View File

@ -4,8 +4,9 @@ import router from "./router";
import store from "./store";
//引入element-ui
import "../src/assets/css/theme/index.css";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// import "element-ui/lib/theme-chalk/index.css";
import { message } from "./components/message.js";

11
src/views/devicePhotoSchedule/components/setdevice.vue
Unescape Escape View File

@ -11,8 +11,15 @@
<h3>时间表规则</h3>
<div class="flexTimeGz">
<p class="timeGz" v-for="(val, index) in ruleSchedule" :key="index">
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
<span>
{{
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
}}</span
>
~
<span>{{
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
}}</span>
间隔：<b>{{ val.span }}分钟</b>
</p>
</div>

17
src/views/devicePhotoSchedule/index.vue
Unescape Escape View File

@ -27,18 +27,25 @@
<el-table-column label="名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="时间表类型" show-overflow-tooltip>
<!-- <el-table-column label="时间表类型" show-overflow-tooltip>
<template>时间表类型</template>
</el-table-column>
<el-table-column label="时间表规则" width="300">
</el-table-column> -->
<el-table-column label="时间表规则">
<template slot-scope="scope">
<p
class="timeGz"
v-for="(val, index) in scope.row.list"
:key="index"
>
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
<span>
{{
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
}}</span
>
~
<span>{{
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
}}</span>
间隔：<b>{{ val.span }}分钟</b>
</p>
<!-- <ul

11
src/views/realTimeMonitor/components/setschedule.vue
Unescape Escape View File

@ -94,8 +94,15 @@
v-for="(val, index) in scope.row.list"
:key="index"
>
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
<span>
{{
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
}}</span
>
~
<span>{{
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
}}</span>
间隔：<b>{{ val.span }}分钟</b>
</p>
</template>

50
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -14,21 +14,38 @@
:current-node-key="currentNodekey"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="node.level === 1" class="iconfont icon-dianli"></span>
<span
v-else-if="data.list && node.level !== 1"
class="iconfont icon-dianlihangye"
>
<div v-if="node.level === 1">
<span class="iconfont icon-dianli"></span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}
</span>
</div>
<div v-else-if="data.list && node.level !== 1">
<span class="iconfont icon-dianlihangye"> </span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}
</span>
</div>
<div v-else>
<span
class="iconfont icon-video-camera"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''">{{
node.label
}}</span>
</div>
</span>
<!-- <span
v-else
class="iconfont icon-video-camera"
style="margin-right: 6px"
></span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}--{{ data.cmdid }}</span
>{{ node.label }} -- {{ data.cmdid }}</span
>
</span>
</span> -->
</el-tree>
</div>
<!-- 带参数的中心内容右侧参数区 -->
@ -247,19 +264,19 @@ export default {
nopicPath: require("@/assets/img/nopic.jpg"),
loadingBg: true,
loading: true,
newPicData: "",
timer: null,
treetimer: null,
treenum: 0,
i: 0,
newTermId: "",
};
},
watch: {
// channelValue() {
// setTimeout(() => {
// this.$refs.multiSelect.blur();
// }, 50);
// },
lineTreeData: function (newVal, oldVal) {
console.log("11111111111111111");
console.log(newVal, oldVal);
},
},
computed: {
...mapState(["channelid", "termid"]),
@ -276,6 +293,9 @@ export default {
mounted() {},
created() {
this.getLineTreeList();
// this.treetimer = window.setInterval(() => {
// setTimeout(this.getLineTreeList(), 0);
// }, 3000);
this.getDateTime();
console.log(this.dateValue);
},
@ -660,6 +680,8 @@ export default {
// },
},
destroyed() {
clearInterval(this.treetimer);
this.treetimer = null;
//离开页面是销毁
if (this.timer) {
console.log(this.timer);
@ -702,7 +724,7 @@ export default {
> .el-tree-node__content {
// 设置颜色
color: #fff;
background: #2d8cf0;
background: #169e8c;
.custom-tree-node {
color: #fff;
}

Write Preview
Loading…
Cancel
Save