From d08244cedede6fc7f74821363dec5a88873e6060 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 27 九月 2021 16:03:29 +0800
Subject: [PATCH] 系统设置账户ui
---
src/pages/settings/views/generalSettings.vue | 233 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 133 insertions(+), 100 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index b80b46c..5ea45ae 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -123,7 +123,9 @@
<div class="save-btn" @click="submitAlarm">淇濆瓨</div>
</div>
<div class="lang" v-if="activePage == 1">
- <div class="bar title voice-title" style="border: 2px solid #fff;">浜嬩欢澹伴煶</div>
+ <div class="bar title voice-title" style="border: 2px solid #fff">
+ 浜嬩欢澹伴煶
+ </div>
<div class="bar-group">
<div
class="bar"
@@ -137,10 +139,16 @@
</div>
<div class="btns">
<span @click="togglePlay(item, i)">
-
- <span class="iconfont" v-if="!item.isPlay" style="cursor: pointer;">{{playSpan}}</span>
- <span class="iconfont" v-else style="cursor: pointer;">{{playSpan2}}</span>
-<!--
+ <span
+ class="iconfont"
+ v-if="!item.isPlay"
+ style="cursor: pointer"
+ >{{ playSpan }}</span
+ >
+ <span class="iconfont" v-else style="cursor: pointer">{{
+ playSpan2
+ }}</span>
+ <!--
<i
v-if="!item.isPlay"
class="el-icon-video-play"
@@ -150,14 +158,14 @@
</span>
<span
class="icon iconfont del"
- style="cursor: pointer;"
+ style="cursor: pointer"
@click="removeSound(item)"
- >{{delspan}}</span
+ >{{ delspan }}</span
>
</div>
</div>
</div>
- <div v-if="showUpload" @click.stop >
+ <div v-if="showUpload" @click.stop>
<el-upload
class="upload-demo"
drag
@@ -165,11 +173,16 @@
:http-request="uploadSound"
:show-file-list="false"
>
- <div class="info">璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click" >鐐瑰嚮涓婁紶</span></div>
- <div class="des" v-if="showUpload" @click.stop>浠呮敮鎸乵p3銆亀av绛夋牸寮�</div>
- </el-upload>
+ <div class="info">
+ 璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click"
+ >鐐瑰嚮涓婁紶</span
+ >
+ </div>
+ <div class="des" v-if="showUpload" @click.stop>
+ 浠呮敮鎸乵p3銆亀av绛夋牸寮�
+ </div>
+ </el-upload>
</div>
-
<div class="add-group">
<div class="add-btn">
@@ -251,10 +264,10 @@
export default {
data() {
return {
- playSpan:"\ue6e8",
- playSpan2:"\ue6e8",
- delspan:"\ue6e8",
- warnSpn:"\ue6e8",
+ playSpan: "\ue6e8",
+ playSpan2: "\ue6e8",
+ delspan: "\ue6e8",
+ warnSpn: "\ue71c",
curPlayingIndex: null,
showUpload: false,
activeIcons: 0,
@@ -288,9 +301,9 @@
},
isPlay: false,
realIconList: [
- { url: "/images/settings/鏃ュ織绠＄悊.png",color:"green" },
- { url: "/images/settings/瀹炴椂鐩戞帶.png",color:"yellow" },
- { url: "/images/settings/鏁版嵁鍙鍖�.png",color:"pink" },
+ { url: "/images/settings/鏃ュ織绠＄悊.png", color: "green" },
+ { url: "/images/settings/瀹炴椂鐩戞帶.png", color: "yellow" },
+ { url: "/images/settings/鏁版嵁鍙鍖�.png", color: "pink" },
],
flatIconList: [
{ url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
@@ -431,17 +444,24 @@
},
removeSound(item) {
const h = this.$createElement;
- const icon =
- this.$msgbox({
- message: h('div', {style: 'display: flex; flex-direction: column; justify-content: center; align-items: center;'}, [
- h('span',{class:'iconfont warn-icon'},`${this.warnSpn}`),
- h('span', {class:'warn-title'}, '鍒犻櫎浜嬩欢澹伴煶 '),
- h('span', {class:'warn-dec'}, '鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�?')
- ]),
- showCancelButton: true,
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- }).then(() => {
+ const icon = this.$msgbox({
+ title: "",
+ message: h(
+ "div",
+ {
+ style:
+ "display: flex; flex-direction: column; justify-content: center; align-items: center;",
+ },
+ [
+ h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),
+ h("span", { class: "warn-title" }, "鍒犻櫎浜嬩欢澹伴煶 "),
+ h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�?"),
+ ]
+ ),
+ showCancelButton: true,
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ }).then(() => {
deleteSound({
id: item.id,
}).then(
@@ -465,8 +485,7 @@
this.$refs["soundBar"].forEach((x) => {
x.style = "border: 2px solid #FFF;";
});
- this.$refs["soundBar"][i].style =
- "border: 2px solid #4E94FF;";
+ this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;";
},
submitAlarm() {
saveAlarmConfig({
@@ -483,15 +502,14 @@
});
},
colorCard(color) {
- document.documentElement.style.setProperty('--colorCard',`${color}`)
- localStorage.setItem('--colorCard',`${color}`)
- }
+ document.documentElement.style.setProperty("--colorCard", `${color}`);
+ localStorage.setItem("--colorCard", `${color}`);
+ },
},
};
</script>
<style scoped lang="scss">
-
.all {
width: 100%;
}
@@ -510,13 +528,10 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 24px 10px;
- border-right: 4px solid #F2F2F7;
- background-color: #FBFAFF;
-
-
+ border-right: 4px solid #f2f2f7;
+ background-color: #fbfaff;
.menu-item {
-
height: 56px;
margin-bottom: 4px;
border-radius: 8px;
@@ -539,7 +554,7 @@
background-color: var(--colorCard) !important;
color: white !important;
}
- /* .menu-item:hover {
+ /* .menu-item:hover {
background-color: #F2F2F7;
} */
}
@@ -591,9 +606,9 @@
text-align: left;
margin-bottom: 5px;
}
- .voice-title {
+ .voice-title {
justify-content: center !important;
- font-weight: 700 ;
+ font-weight: 700;
}
.bar-group {
overflow: auto;
@@ -613,13 +628,13 @@
border: 2px solid #fff;
.name {
font-size: 14px;
- }
+ }
.btns {
width: 52px;
display: flex;
justify-content: space-between;
color: rgba(191, 191, 191, 1);
- /* .el-icon-video-pause {
+ /* .el-icon-video-pause {
cursor: pointer;
font-size: 23px;
vertical-align: middle;
@@ -632,10 +647,10 @@
color: #409eff;
} */
span {
- color: #333
+ color: #333;
}
.del:hover {
- color:#FC4958;
+ color: #fc4958;
}
}
.desc {
@@ -824,88 +839,105 @@
}
}
.v-modal {
- opacity:0.35 !important;
+ opacity: 0.35 !important;
border-radius: 8px !important;
}
.el-message-box {
-position: absolute;
-width: 420px;
-height: 210px;
-left: 302px;
-top: 279px;
+ position: absolute;
+ width: 420px;
+ height: 210px;
+ left: 302px;
+ top: 279px;
-background: #FFFFFF;
-border-radius: 8px;
+ background: #ffffff;
+ border-radius: 8px;
}
.upload-demo {
-top: 452px;
-left: 2px !important;
-width: 452px;
-height: 150px;
-background: #FFFFFF;
-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
-border-radius: 8px;
+ top: 452px;
+ left: 2px !important;
+ width: 452px;
+ height: 150px;
+ background: #ffffff;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
-::v-deep .el-upload-dragger {
-display: flex;
-justify-content: center;
-align-items: center;
-overflow: visible;
-width: 340px;
-height: 72px;
-margin-top:30px ;
-}
+ ::v-deep .el-upload-dragger {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: visible;
+ width: 340px;
+ height: 72px;
+ margin-top: 30px;
+ }
+ .info {
+ font-weight: bold;
+ font-size: 14px;
+ color: #828282;
+ }
-.info {
-
-font-weight: bold;
-font-size: 14px;
-color: #828282;
-}
-
-.info-click {
- color: #4E94FF;
- text-decoration: underline;
-}
-
+ .info-click {
+ color: #4e94ff;
+ text-decoration: underline;
+ }
}
.des {
position: absolute;
- top: 78px;
- left: 109px;
+ top: 78px;
+ left: 109px;
z-index: 999;
- color: #4F4F4F;
+ color: #4f4f4f;
font-weight: bold;
font-size: 12px;
}
-
</style>
<style lang="scss">
.el-message-box {
+ padding-bottom: 20px !important;
+ border-radius: 8px !important;
+ .el-message-box__content {
+ color: #333333;
+ padding: 0;
+ font-size: 14px;
+ }
.warn-icon {
- color:rgba(254, 109, 104, 1) ;
- font-size: 50px;
- margin-top:26px ;
+ color: #fe6d68;
+ font-size: 40px;
+ margin-top: 11px;
}
.warn-title {
font-weight: bold;
font-size: 16px;
- margin: 5px;
+ margin: 6px;
+ line-height: 22px;
}
.warn-dec {
font-weight: bold;
font-size: 14px;
- color: #828282;
+ color: #828282;
+ line-height: 20px;
}
- .el-message-box__btns {
+ .el-message-box__headerbtn {
+ top: 12px;
+ }
+ .el-message-box__headerbtn .el-message-box__close {
+ color: #333333;
+ font-weight: bold;
+ }
+ .el-message-box__btns {
display: flex;
justify-content: center;
- margin-top: 10px;
+ margin-top: 20px;
+ .el-button:focus,
+ .el-button:hover {
+ background-color: none;
+ border: none;
+ }
button {
width: 175px;
height: 40px;
@@ -916,15 +948,16 @@
}
}
button:first-child {
- background-color: #E0E0E0;
+ background-color: #e0e0e0;
span {
- color: #333333;
+ color: #333333;
}
}
button:last-child {
- background-color: #4E94FF !important;
- span {
- color: #fff;
+ background-color: #4e94ff !important;
+ border-color: #4e94ff !important;
+ span {
+ color: #fff;
}
}
}
--
Gitblit v1.8.0