소스 검색

缩放改好-修改样式2

qdy 1 개월 전
부모
커밋
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,10 +18,7 @@
18 18
     background: #f8fafc; /* 简洁的灰白色背景 */
19 19
     border-radius: 0; /* 移除圆角,消除白色边缘 */
20 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 22
     transition: all 0.3s ease-in-out;
26 23
     /* 移除 overflow: hidden,防止内容裁剪 */
27 24
     height: 100%; /* 填充父容器高度 */
@@ -64,18 +61,16 @@
64 61
     margin-bottom: 0; /* 移除margin,因为现在是fixed定位 */
65 62
     transform: none; /* 移除transform层叠上下文 */
66 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 65
     background-color: transparent; /* 移除白色背景,消除白色边缘 */
69 66
     
70 67
     .header-content {
71 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 74
       /* 保持原padding大小 */
80 75
       height: 100%; /* 填充父容器高度 */
81 76
       min-height: 100%; /* 确保填充最小高度 */
@@ -120,12 +115,10 @@
120 115
   &.compact {
121 116
     .header-content {
122 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 122
       height: 100%; /* 填充父容器高度 */
130 123
       min-height: 100%; /* 确保填充最小高度 */
131 124
       flex: 1; /* 填充可用空间 */

Loading…
취소
저장