From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/settings/views/generalSettings.vue | 107 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 64 insertions(+), 43 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 6fec488..b2cd669 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -139,7 +139,7 @@
</div>
<div class="bar-group">
<div
- class="bar"
+ class="general-bar"
v-for="(item, i) in soundList"
:key="i"
@click="clickSound(item, i)"
@@ -148,7 +148,7 @@
<div class="left-part">
<span class="name">{{ item.name }}</span>
</div>
- <div class="btns">
+ <div class="sound-btns">
<span @click="togglePlay(item, i)">
<span
class="iconfont"
@@ -156,9 +156,11 @@
style="cursor: pointer"
>{{ playSpan }}</span
>
- <span class="iconfont" v-else style="cursor: pointer">{{
+ <!-- <span class="iconfont" v-else style="cursor: pointer">{{
playSpan2
- }}</span>
+ }}</span> -->
+
+ <img v-else src="/images/settings/鏆傚仠.png" alt="" style="width:16px;hight:16px;cursor: pointer;margin-top:15px;">
<!--
<i
v-if="!item.isPlay"
@@ -210,6 +212,7 @@
<div
v-for="(item,index) in colorList"
:key="index"
+ style="border:none;"
>
<div class="color-option"
v-if="universalColor != index"
@@ -299,9 +302,9 @@
export default {
data() {
return {
- playSpan: "\ue6e8",
- playSpan2: "\ue6e8",
- delspan: "\ue6e8",
+ playSpan: "\ue75e",
+ playSpan2: "\ue75f",
+ delspan: "\ue715",
warnSpn: "\ue71c",
curPlayingIndex: null,
showUpload: false,
@@ -314,9 +317,9 @@
},
menuArr: [
// { name: "璁惧淇℃伅", icon: "\ue933" ,size:18},
- { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue6f3", size: 20 },
- { name: "浜嬩欢澹伴煶", icon: "\ue6e1", size: 16 },
- { name: "涓�у寲璁剧疆", icon: "\ue756", size: 18 },
+ { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 },
+ { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 },
+ { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 },
],
soundList: [],
activePage: 0,
@@ -570,6 +573,9 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ .el-input__inner {
+ height: 24px !important;
+}
.general-center {
height: 100%;
width: 300px;
@@ -662,29 +668,28 @@
}
.bar-group {
overflow: auto;
- height: 400px;
- }
- .bar {
- height: 48px;
- background-color: #f8f8f8;
- border-radius: 10px;
- line-height: 48px;
- box-sizing: border-box;
- padding: 0 20px 0 20px;
- font-weight: 700;
- display: flex;
- justify-content: space-between;
- margin-bottom: 2px;
- border: 2px solid #fff;
- .name {
- font-size: 14px;
- }
- .btns {
- width: 52px;
+ height: calc(100% - 132px);
+ .general-bar {
+ height: 48px;
+ background-color: #f8f8f8;
+ border-radius: 10px;
+ line-height: 48px;
+ box-sizing: border-box;
+ padding: 0 20px 0 20px;
+ font-weight: 700;
display: flex;
justify-content: space-between;
- color: rgba(191, 191, 191, 1);
- /* .el-icon-video-pause {
+ margin-bottom: 2px;
+ border: 2px solid #fff;
+ .name {
+ font-size: 14px;
+ }
+ .sound-btns {
+ width: 52px;
+ display: flex;
+ justify-content: space-between;
+ color: rgba(191, 191, 191, 1);
+ /* .el-icon-video-pause {
cursor: pointer;
font-size: 23px;
vertical-align: middle;
@@ -696,18 +701,20 @@
vertical-align: middle;
color: #409eff;
} */
- span {
- color: #333;
+ span {
+ color: #333;
+ }
+ .del:hover {
+ color: #fc4958;
+ }
}
- .del:hover {
- color: #fc4958;
+ .desc {
+ font-size: 14px;
+ color: rgba(134, 134, 134, 1);
}
- }
- .desc {
- font-size: 14px;
- color: rgba(134, 134, 134, 1);
}
}
+
/* .bar:hover {
border: 2px solid #4E94FF !important;
} */
@@ -1040,6 +1047,9 @@
font-size: 16px;
font-weight: 700;
}
+ &:hover {
+ border: 1px solid var(--colorCard) !important;
+ }
}
button:first-child {
background-color: #e0e0e0;
@@ -1049,6 +1059,7 @@
}
button:last-child {
background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
span {
color: #fff;
}
@@ -1062,7 +1073,19 @@
.videoTime .el-slider__button {
margin-top: -25px !important;
border: none !important;
- background-image: url(/images/gengeralSettings/鍒诲害鏍�.png);
+
+}
+
+.videoTime .el-slider__button::after {
+ display: block;
+ position: relative;
+content: "\e75d";
+ color: var(--colorCard);
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
.videoTime .el-tooltip {
@@ -1125,9 +1148,7 @@
color: #4E94FF;
}
-.el-input__inner {
- height: 24px !important;
-}
+
/* .el-tooltip__popper {
--
Gitblit v1.8.0