feature:调整侧边栏暗夜模式的hover错误

flipped-aurora · May 10, 2024 · 0f9e519 · 0f9e519
1 parent 0d17a23
commit 0f9e519
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/web/src/utils/format.js b/web/src/utils/format.js
@@ -77,6 +77,13 @@ const  generateAllColors = (u,e)=> {
 }
 
 
+
+function addOpacityToColor(u, opacity) {
+  let t = colorToHex(u);
+  return `rgba(${t[0]}, ${t[1]}, ${ t[2]}, ${opacity})`;
+}
+
+
 export const setBodyPrimaryColor = (  primaryColor ) =>{
   document.documentElement.style.setProperty('--el-color-primary', primaryColor)
   for (let times = 1; times <= 2; times++) {
@@ -85,5 +92,5 @@ export const setBodyPrimaryColor = (  primaryColor ) =>{
   for (let times = 1; times <= 10; times++) {
     document.documentElement.style.setProperty(`--el-color-primary-light-${times}`,  generateAllColors(primaryColor, times / 10))
   }
-
+  document.documentElement.style.setProperty(`--el-menu-hover-bg-color`,  addOpacityToColor(primaryColor, 0.1))
 }
diff --git a/web/src/view/layout/aside/index.vue b/web/src/view/layout/aside/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class=" relative h-full  bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r  shadow dark:shadow-gray-700"
+    class="relative h-full  bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
     :class="isCollapse ? '' : '  px-2'"
     :style="{
       width : layoutSideWidth + 'px',