Parcourir la source

fix: 对暗黑主题 header hover 做优化

lanceJiang il y a 1 an
Parent
commit
e8f7bb8af1

+ 21 - 2
src/layout/components/Header/ToolBarRight.vue

@@ -58,12 +58,31 @@ import Avatar from './components/Avatar.vue'
 			color: var(--el-color-info);
 
 			&.hover-effect {
+				position: relative;
 				cursor: pointer;
 				transition: background 0.3s;
-
+				&::before {
+					z-index: auto;
+					content: '';
+					background-color: #0000;
+					opacity: 0.08;
+					position: absolute;
+					//left: 8px;
+					//right: 8px;
+					left: 0;
+					right: 0;
+					top: 0;
+					bottom: 0;
+					pointer-events: none;
+					border-radius: 3px;
+					transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+				}
 				&:hover {
 					//background: rgba(0, 0, 0, 0.025);
-					background: var(--el-fill-color);
+					//background: var(--el-fill-color);
+					&::before {
+						background-color: var(--el-color-primary);
+					}
 				}
 			}
 		}

+ 20 - 1
src/layout/components/Header/components/Avatar.vue

@@ -140,10 +140,29 @@ const openDialog = (ref: string) => {
 	&.hover-effect {
 		cursor: pointer;
 		transition: background 0.3s;
+		&::before {
+			z-index: auto;
+			content: '';
+			background-color: #0000;
+			opacity: 0.08;
+			position: absolute;
+			//left: 8px;
+			//right: 8px;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			pointer-events: none;
+			border-radius: 3px;
+			transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		}
 
 		&:hover {
 			//background: rgba(0, 0, 0, 0.025);
-			background: var(--el-fill-color);
+			//background: var(--el-fill-color);
+			&::before {
+				background-color: var(--el-color-primary);
+			}
 		}
 	}
 }

+ 20 - 2
src/layout/components/Header/components/CollapseIcon.vue

@@ -24,10 +24,28 @@ const changeCollapse = () => setting.changeSetting('isCollapse', !setting.isColl
 	&.hover-effect {
 		cursor: pointer;
 		transition: background 0.3s;
-
+		&::before {
+			z-index: auto;
+			content: '';
+			background-color: #0000;
+			opacity: 0.08;
+			position: absolute;
+			//left: 8px;
+			//right: 8px;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			pointer-events: none;
+			border-radius: 3px;
+			transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		}
 		&:hover {
 			//background: rgba(0, 0, 0, 0.025);
-			background: var(--el-fill-color);
+			//background: var(--el-fill-color);
+			&::before {
+				background-color: var(--el-color-primary);
+			}
 		}
 	}
 }