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> <template>
<div id="app" class="blueStyle"> <div id="app" class="greenStyle">
<router-view> </router-view> <router-view> </router-view>
</div> </div>
</template> </template>

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

@ -63,3 +63,9 @@
.el-dropdown [disabled] { .el-dropdown [disabled] {
color: #fff; 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 //Brand @color
@color-primary: #409eff; @color-primary: #169e8c;
@color-primary-light: mix(@color-white, @color-primary, 80%); @color-primary-light: mix(@color-white, @color-primary, 80%);
@color-primary-lighter: mix(@color-white, @color-primary, 90%); @color-primary-lighter: mix(@color-white, @color-primary, 90%);
//Functional @color //Functional @color

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

@ -1,4 +1,4 @@
//蓝色主题 // //蓝色主题
.blueStyle { .blueStyle {
.header { .header {
background: #20a0ff; background: #20a0ff;
@ -68,234 +68,237 @@
} }
} }
//红色主题 // //红色主题
.redStyle { // .redStyle {
.header { // .header {
background: #ee320c; // background: #ee320c;
} // }
.el-menu { // .el-menu {
background: #ee320c; // background: #ee320c;
i { // i {
color: @color-white !important; // color: @color-white !important;
} // }
.el-menu-item { // .el-menu-item {
color: @color-white; // color: @color-white;
} // }
.el-menu-item.is-active { // .el-menu-item.is-active {
color: @color-white; // color: @color-white;
} // }
.el-submenu .el-submenu__title { // .el-submenu .el-submenu__title {
color: @color-white; // color: @color-white;
} // }
.el-menu-item:not(.is-disabled):focus, // .el-menu-item:not(.is-disabled):focus,
.el-menu-item:not(.is-disabled):hover { // .el-menu-item:not(.is-disabled):hover {
color: #ee320c; // color: #ee320c;
background-color: @color-white; // background-color: @color-white;
border-bottom: 2px solid @color-white; // border-bottom: 2px solid @color-white;
i { // i {
color: #ee320c !important; // color: #ee320c !important;
} // }
} // }
.el-submenu:focus .el-submenu__title, // .el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title { // .el-submenu:hover .el-submenu__title {
color: #ee320c !important; // color: #ee320c !important;
background-color: @color-white; // background-color: @color-white;
border-bottom: 2px solid @color-white; // border-bottom: 2px solid @color-white;
i { // i {
color: #ee320c !important; // color: #ee320c !important;
} // }
} // }
.el-submenu.is-active .el-submenu__title { // .el-submenu.is-active .el-submenu__title {
color: @color-white; // color: @color-white;
} // }
} // }
.sidebar .el-menu--horizontal .el-menu-item.is-active i { // .sidebar .el-menu--horizontal .el-menu-item.is-active i {
color: #ee320c; // color: #ee320c;
} // }
.sidebar // .sidebar
.el-menu--horizontal // .el-menu--horizontal
.el-submenu.is-active // .el-submenu.is-active
.el-submenu__title // .el-submenu__title
> i:first-child { // > i:first-child {
color: #ee320c; // color: #ee320c;
} // }
.tags-li.active { // .tags-li.active {
border: 1px solid #ee320c; // border: 1px solid #ee320c;
background-color: #ee320c; // background-color: #ee320c;
} // }
} // }
//绿色主题 //绿色主题
.greenStyle { .greenStyle {
.header { .header {
background: @green-color; background: #169e8c;
} }
.el-menu { .el-menu {
background: @green-color; background: #169e8c;
i { i {
color: @color-white !important; color: @color-white !important;
} }
.el-menu-item { .el-menu-item {
color: @color-white; color: @color-white;
} }
.el-menu-item.is-active {
color: @color-white;
}
.el-submenu .el-submenu__title { .el-submenu .el-submenu__title {
color: @color-white; color: @color-white;
} }
.el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):focus,
.el-menu-item:not(.is-disabled):hover { .el-menu-item:not(.is-disabled):hover {
color: @green-color; color: #fff;
background-color: @color-white; background-color: #128071;
border-bottom: 2px solid @color-white; border-bottom: 2px solid #128071;
i { i {
color: @green-color !important; color: #fff !important;
} }
} }
.el-submenu:focus .el-submenu__title, .el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title { .el-submenu:hover .el-submenu__title {
color: @green-color !important; color: #fff !important;
background-color: @color-white; background-color: #128071;
border-bottom: 2px solid @color-white; border-bottom: 2px solid #128071;
i { 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--horizontal > .el-menu-item.is-active {
.el-menu-item:not(.is-disabled):focus, border-bottom: 2px solid #128071 !important;
.el-menu-item:not(.is-disabled):hover { color: #fff !important;
color: @color-white; background-color: #128071 !important;
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
i { i {
color: @color-white !important; color: #fff !important;
} }
} }
.el-submenu:focus .el-submenu__title, .el-submenu.is-active {
.el-submenu:hover .el-submenu__title { .el-submenu__title {
color: @color-white !important; border-bottom: 2px solid #128071 !important;
background-color: #f39b33; color: #fff !important;
border-bottom: 2px solid #f39b33; background-color: #128071;
i { 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 { .gallery-thumbs .swiper-slide-active {
color: @orange-color; border: 3px solid #169e8c !important;
} }
.tags-li.active {
border: 1px solid #169e8c;
background-color: #169e8c;
} }
.monitor-container //渐变
.sideBar .thumb-example .picBottom .smallPicBox .borderActive .timeInfo {
.el-tree--highlight-current background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
.el-tree-node.is-current
> .el-tree-node__content {
color: #fff;
background: #f39b33 !important;
} }
.picRotation .imageCenter .imgList .infoTop {
.gallery-thumbs .swiper-slide-active { background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
border: 3px solid @orange-color !important;
} }
.tags-li.active { .picRotation .imageCenter .imgList .infoBottom {
border: 1px solid @orange-color; background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
background-color: @orange-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;
// 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", icon: "el-icon-search",
index: "/realTimeSearch", index: "/realTimeSearch",
title: "实时查询", title: "历史图片",
}, },
{ {
icon: "el-icon-files", icon: "el-icon-files",

3
src/main.js
Unescape Escape View File

@ -4,8 +4,9 @@ import router from "./router";
import store from "./store"; import store from "./store";
//引入element-ui //引入element-ui
import "../src/assets/css/theme/index.css";
import ElementUI from "element-ui"; 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"; import { message } from "./components/message.js";

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save