From e815b477b8619f8ad23fe08b9039c8d5f3f57cfc Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 27 九月 2021 14:07:11 +0800
Subject: [PATCH] 个性化设置
---
src/pages/settings/views/keyboardLanguage.vue | 13 ++--
src/pages/settings/views/generalSettings.vue | 138 ++++++++++++++++++++++++++++++++++++---------
2 files changed, 116 insertions(+), 35 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index b80b46c..cea9bb3 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -181,15 +181,40 @@
</div>
<div class="self-setting" v-if="activePage == 2">
- <div class="top-title">鍥炬爣涓婚</div>
+ <div class="top-title">棰滆壊涓婚</div>
+ <div class="color-bar">
+ <div
+ v-for="(item,index) in colorList"
+ :key="index"
+ >
+ <div class="color-option"
+ v-if="universalColor != index"
+ :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}`}"
+ @click="colorCard(item.color,index)">
+ <div
+ :style="{backgroundColor:item.color}"
+ class="color-option-content">
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+
+
+ <div class="top-title">鍥炬爣涓婚</div>
<div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)">
<div class="bar-title">
<span class="title">鎵佸钩鍐欏疄鍥炬爣</span>
<span
class="icon iconfont"
- style="color: #3d68e1; font-size: 18px"
- v-show="activeIcons == 0"
+ :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"
></span
>
</div>
@@ -198,7 +223,6 @@
class="entity-img"
v-for="(item, i) in realIconList"
:key="i"
- @click="colorCard(item.color)"
>
<img :src="item.url" alt="" />
</div>
@@ -209,8 +233,7 @@
<span class="title">鎵佸钩鍖栧浘鏍�</span>
<span
class="icon iconfont"
- style="color: #3d68e1; font-size: 18px"
- v-show="activeIcons == 1"
+ :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"
></span
>
</div>
@@ -224,13 +247,14 @@
</div>
</div>
</div>
+
<div class="top-title">妗岄潰鑳屾櫙涓婚</div>
<div class="bg-bar">
<div class="bg-list">
<div
- class="bg-img"
- :class="activeBg == i ? 'bg-list-active' : ''"
v-for="(item, i) in tableBGList"
+ class="bg-img"
+ :class="activeBg == i ? 'bg-list-active' : ''"
:key="i"
@click="pickBg(item, i)"
>
@@ -302,6 +326,18 @@
{ name: "message", url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
{ name: "weather", url: "/images/settings/绯荤粺璁剧疆.png" },
],
+ universalColor:'',
+ colorList: [
+ {name:1 ,color:"#FC6B9E"},
+ {name:2 ,color:"#F38F56"},
+ {name:3 ,color:"#FDD33A"},
+ {name:4 ,color:"#53D999"},
+ {name:5 ,color:"#21CDB2"},
+ {name:6 ,color:"#61E2EB"},
+ {name:7 ,color:"#4E94FF"},
+ {name:8 ,color:"#8E8CD8"},
+ {name:9 ,color:"#4C4A48"},
+ ]
};
},
mounted() {
@@ -354,6 +390,7 @@
},
"*"
);
+ this.$forceUpdate()
},
togglePlay(item, i) {
if (this.curPlayingIndex !== null) {
@@ -482,7 +519,8 @@
}
});
},
- colorCard(color) {
+ colorCard(color,index) {
+ this.universalColor = index
document.documentElement.style.setProperty('--colorCard',`${color}`)
localStorage.setItem('--colorCard',`${color}`)
}
@@ -539,15 +577,16 @@
background-color: var(--colorCard) !important;
color: white !important;
}
- /* .menu-item:hover {
+ .menu-item:hover {
background-color: #F2F2F7;
- } */
+ }
}
.general-right {
flex: 1;
flex-basis: auto;
overflow: auto;
box-sizing: border-box;
+ background-color: rgb(251, 250, 255);
padding: 10px 18px 10px 10px;
.el-form-item.is-required:not(.is-no-asterisk)
@@ -597,7 +636,7 @@
}
.bar-group {
overflow: auto;
- height: 520px;
+ height: 400px;
}
.bar {
height: 48px;
@@ -668,7 +707,7 @@
width: fit-content;
.icon {
font-size: 40px;
- color: rgba(61, 104, 225, 1);
+ color: var(--colorCard);
}
}
.min-dur {
@@ -741,7 +780,7 @@
}
}
.save-btn {
- background-color: #3d68e1;
+ background-color: var(--colorCard);
width: 240px;
height: 40px;
margin: 0 auto;
@@ -754,21 +793,53 @@
}
.self-setting {
.top-title {
+ text-align: left;
font-size: 16px;
- height: 30px;
- line-height: 30px;
margin-bottom: 10px;
+ font-weight: 700;
+ margin-top: 20px;
}
- .icon-bar:hover {
+ /* .icon-bar:hover {
background-color: rgba(233, 233, 233, 1);
+ } */
+ .color-bar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 412px;
+ height: 96px;
+ background-color: #fff;
+ border-radius: 8px;
+ padding-left:7px ;
+ .color-option {
+ margin-right:12px ;
+ width: 30px;
+ height: 30px;
+ border-radius:50% ;
+ }
+
+ .color-option-active {
+ box-sizing: border-box;
+ margin-right:12px ;
+ width: 30px;
+ height: 30px;
+ border-radius:50% ;
+ background-color: #fff;
+ padding: 3px;
+ .color-option-content {
+ width: 100%;
+ height: 100%;
+ border-radius:50% ;
+ }
+ }
}
.icon-bar {
cursor: pointer;
- background-color: rgba(248, 248, 248, 1);
box-sizing: border-box;
- padding: 15px 25px;
- border-radius: 12px;
- margin-bottom: 12px;
+ padding: 15px 13px 14px 20px;
+ background: #F2F2F7;
+ border-radius: 8px;
+ margin-bottom: 10px;
.bar-title {
line-height: 20px;
height: 20px;
@@ -777,10 +848,20 @@
justify-content: space-between;
.title {
font-size: 14px;
+ font-weight: 700;
+ }
+ .icon-active {
+ font-size: 16px;
+ color: var(--colorCard);
+ }
+ .icon-normal {
+ font-size: 16px;
+ color: #E0E0E0;
}
}
.entity {
display: flex;
+ margin-left:5px ;
.entity-img {
background-color: rgba(248, 248, 248, 1);
width: 50px;
@@ -794,7 +875,7 @@
}
}
.bg-bar {
- background-color: rgba(248, 248, 248, 1);
+ background-color: #F2F2F7;
box-sizing: border-box;
padding: 15px 25px;
border-radius: 12px;
@@ -805,18 +886,19 @@
margin-right: 12px;
cursor: pointer;
// width: 120px;
- height: 80px;
+ height: 66px;
border: 2px solid transparent;
img {
border-radius: 5px;
height: 100%;
}
}
- .bg-img:hover {
+ /* .bg-img:hover {
border: 2px solid yellow;
- }
+ } */
.bg-list-active {
- border: 2px solid yellow;
+ border: 2px solid var(--colorCard);
+ border-radius: 8px;
}
}
}
@@ -867,7 +949,7 @@
}
.info-click {
- color: #4E94FF;
+ color: var(--colorCard);
text-decoration: underline;
}
@@ -922,7 +1004,7 @@
}
}
button:last-child {
- background-color: #4E94FF !important;
+ background-color: var(--colorCard) !important;
span {
color: #fff;
}
diff --git a/src/pages/settings/views/keyboardLanguage.vue b/src/pages/settings/views/keyboardLanguage.vue
index 2e30cae..c61c9b0 100644
--- a/src/pages/settings/views/keyboardLanguage.vue
+++ b/src/pages/settings/views/keyboardLanguage.vue
@@ -26,7 +26,7 @@
<span class="name">{{ item.Name }}</span>
<span
class="icon iconfont"
- style="color: #4E94FF;font-size:16px;"
+ style="color: var(--colorCard);font-size:16px;"
v-show="activeLang == item.Lang"
></span
>
@@ -192,12 +192,11 @@
}
}
.menu-item-active {
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
color: white;
}
.menu-item:hover {
- background-color: var(--colorCard);
- color: white;
+ background-color: #F2F2F7;
}
}
.language-right {
@@ -256,7 +255,7 @@
}
}
.bar:hover{
- border: 2px solid #4E94FF;
+ border: 2px solid var(--colorCard);
}
.title {
cursor:default ;
@@ -265,7 +264,7 @@
border: 2px solid #f8f8f8 !important;
}
}
- .save-btn {
+ /* .save-btn {
background-color: #3d68e1;
width: 240px;
height: 40px;
@@ -275,7 +274,7 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
- }
+ } */
}
}
</style>
--
Gitblit v1.8.0