From 878ce80ef3ca88a2c108fbc713cd6ea461c44de1 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 13 十月 2021 13:51:03 +0800
Subject: [PATCH] 拓扑图
---
src/pages/settings/views/generalSettings.vue | 113 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 68 insertions(+), 45 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 6fec488..51d202a 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,16 +212,17 @@
<div
v-for="(item,index) in colorList"
:key="index"
+ style="border:none;"
>
<div class="color-option"
v-if="universalColor != index"
- :style="{cursor: pointer,backgroundColor:item.color}"
+ :style="{cursor: 'pointer',backgroundColor:item.color}"
@click="colorCard(item.color,index)"
/>
<div class="color-option color-option-active"
v-else
- :style="{cursor: pointer,border:`2px solid ${item.color}`}"
+ :style="{cursor: 'pointer',border:`2px solid ${item.color}`}"
@click="colorCard(item.color,index)">
<div
:style="{backgroundColor:item.color}"
@@ -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,
@@ -553,6 +556,7 @@
this.universalColor = index
document.documentElement.style.setProperty('--colorCard',`${color}`)
localStorage.setItem('--colorCard',`${color}`)
+ window.parent.postMessage({msg:'changeColor',color},'*')
}
},
};
@@ -576,7 +580,7 @@
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 24px 10px;
+ padding: 10px 10px;
border-right: 4px solid #f2f2f7;
background-color: #fbfaff;
@@ -656,35 +660,36 @@
text-align: left;
margin-bottom: 5px;
}
- .voice-title {
+ .bar.title.voice-title {
justify-content: center !important;
+ text-align: center;
font-weight: 700;
+ border: none;
}
.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% - 100px);
+ .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 #f8f8f8;
+ .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;
} */
@@ -853,7 +860,7 @@
height: 30px;
border-radius:50% ;
background-color: #fff;
- padding: 3px;
+ padding: 4px;
.color-option-content {
width: 100%;
height: 100%;
@@ -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 {
--
Gitblit v1.8.0