qdy 1 месяц назад
Родитель
Сommit
c3ffa85c4a
1 измененных файлов: 11 добавлений и 18 удалений
  1. 11
    18
      projects/base-core/src/lib/components/sticky-header/sticky-header.component.scss

+ 11
- 18
projects/base-core/src/lib/components/sticky-header/sticky-header.component.scss Просмотреть файл

18
     background: #f8fafc; /* 简洁的灰白色背景 */
18
     background: #f8fafc; /* 简洁的灰白色背景 */
19
     border-radius: 0; /* 移除圆角,消除白色边缘 */
19
     border-radius: 0; /* 移除圆角,消除白色边缘 */
20
     border: 1px solid #e2e8f0; /* 柔和的边框 */
20
     border: 1px solid #e2e8f0; /* 柔和的边框 */
21
-    box-shadow: 
22
-      inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), /* 轻微内阴影,创造凹陷感 */
23
-      inset 0 0 0 1px rgba(255, 255, 255, 0.9), /* 内边缘高光,增强立体感 */
24
-      0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 轻微外阴影,保持与页面融合 */
21
+    box-shadow: none; /* 移除所有阴影,与页面完全融合 */
25
     transition: all 0.3s ease-in-out;
22
     transition: all 0.3s ease-in-out;
26
     /* 移除 overflow: hidden,防止内容裁剪 */
23
     /* 移除 overflow: hidden,防止内容裁剪 */
27
     height: 100%; /* 填充父容器高度 */
24
     height: 100%; /* 填充父容器高度 */
64
     margin-bottom: 0; /* 移除margin,因为现在是fixed定位 */
61
     margin-bottom: 0; /* 移除margin,因为现在是fixed定位 */
65
     transform: none; /* 移除transform层叠上下文 */
62
     transform: none; /* 移除transform层叠上下文 */
66
     will-change: auto;
63
     will-change: auto;
67
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* 外阴影,表示浮动状态 */
64
+    box-shadow: none; /* 移除外阴影,与页面融合 */
68
     background-color: transparent; /* 移除白色背景,消除白色边缘 */
65
     background-color: transparent; /* 移除白色背景,消除白色边缘 */
69
     
66
     
70
     .header-content {
67
     .header-content {
71
       border-radius: 0; /* 移除圆角,消除白色边缘 */
68
       border-radius: 0; /* 移除圆角,消除白色边缘 */
72
-      box-shadow: 
73
-        inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
74
-        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
75
-        0 2px 4px 0 rgba(0, 0, 0, 0.1); /* 更强外阴影,强调固定状态 */
76
-      background: #f1f5f9;
77
-      border: 1px solid #cbd5e1;
78
-      margin: 5px; /* 减少外边距,从1rem(16px)改为5px */
69
+      box-shadow: none; /* 移除所有内外阴影 */
70
+      background: #f8fafc; /* 恢复默认背景色,与普通状态一致 */
71
+      border: 1px solid #e2e8f0;
72
+      border-top: none; /* 移除顶部边框,实现无缝衔接 */
73
+      margin: 0; /* 移除外边距,贴紧顶部 */
79
       /* 保持原padding大小 */
74
       /* 保持原padding大小 */
80
       height: 100%; /* 填充父容器高度 */
75
       height: 100%; /* 填充父容器高度 */
81
       min-height: 100%; /* 确保填充最小高度 */
76
       min-height: 100%; /* 确保填充最小高度 */
120
   &.compact {
115
   &.compact {
121
     .header-content {
116
     .header-content {
122
       border-radius: 0; /* 移除圆角,消除白色边缘 */
117
       border-radius: 0; /* 移除圆角,消除白色边缘 */
123
-      box-shadow: 
124
-        inset 0 3px 6px 0 rgba(0, 0, 0, 0.08), /* 更强的内阴影,增强凹陷感 */
125
-        inset 0 0 0 1px rgba(255, 255, 255, 0.8), /* 内边缘高光 */
126
-        0 1px 3px 0 rgba(0, 0, 0, 0.1); /* 轻微外阴影 */
127
-      background: #f1f5f9; /* 稍微深一点的背景,强调状态变化 */
128
-      border: 1px solid #cbd5e1; /* 保持一致的边框 */
118
+      box-shadow: none; /* 移除所有内外阴影 */
119
+      background: #f8fafc; /* 恢复默认背景色,与普通状态一致 */
120
+      border: 1px solid #e2e8f0;
121
+      border-top: none; /* 移除顶部边框,实现无缝衔接 */
129
       height: 100%; /* 填充父容器高度 */
122
       height: 100%; /* 填充父容器高度 */
130
       min-height: 100%; /* 确保填充最小高度 */
123
       min-height: 100%; /* 确保填充最小高度 */
131
       flex: 1; /* 填充可用空间 */
124
       flex: 1; /* 填充可用空间 */

Загрузка…
Отмена
Сохранить