Browse Source

缩放改好-修改样式

qdy 1 month ago
parent
commit
973355f538

+ 1
- 1
src/app/app.component.html View File

39
     <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
39
     <div class="flex-1 h-full overflow-hidden bg-white flex flex-col">
40
 
40
 
41
       <div class="flex-1 overflow-auto content-area">
41
       <div class="flex-1 overflow-auto content-area">
42
-        <div class="p-4 h-full">
42
+        <div class="pt-0 px-4 pb-4 h-full">
43
           <router-outlet></router-outlet>
43
           <router-outlet></router-outlet>
44
         </div>
44
         </div>
45
       </div>
45
       </div>

+ 1
- 1
src/app/components/sticky-header/sticky-header.component.html View File

1
-<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [class.locked]="isLocked" [class.compact]="isCompact" [ngStyle]="isLocked ? {
1
+<div class="sticky-header sticky top-0 z-10 transition-all duration-300 ease-in-out" [style.min-height]="headerHeight" [class.locked]="isLocked" [class.compact]="isCompact" [ngStyle]="isLocked ? {
2
   width: headerWidth ? (typeof headerWidth === 'number' ? headerWidth + 'px' : headerWidth) : null,
2
   width: headerWidth ? (typeof headerWidth === 'number' ? headerWidth + 'px' : headerWidth) : null,
3
   left: headerLeft ? (typeof headerLeft === 'number' ? headerLeft + 'px' : headerLeft) : null
3
   left: headerLeft ? (typeof headerLeft === 'number' ? headerLeft + 'px' : headerLeft) : null
4
 } : null">
4
 } : null">

+ 6
- 0
src/app/components/sticky-header/sticky-header.component.scss View File

21
       inset 0 0 0 1px rgba(255, 255, 255, 0.9), /* 内边缘高光,增强立体感 */
21
       inset 0 0 0 1px rgba(255, 255, 255, 0.9), /* 内边缘高光,增强立体感 */
22
       0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 轻微外阴影,保持与页面融合 */
22
       0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 轻微外阴影,保持与页面融合 */
23
     transition: all 0.3s ease-in-out;
23
     transition: all 0.3s ease-in-out;
24
+    height: 100%; /* 填充父容器高度 */
25
+    min-height: 100%; /* 确保填充最小高度 */
24
     /* 移除 overflow: hidden,防止内容裁剪 */
26
     /* 移除 overflow: hidden,防止内容裁剪 */
25
   }
27
   }
26
 
28
 
70
       background: #f1f5f9;
72
       background: #f1f5f9;
71
       border: 1px solid #cbd5e1;
73
       border: 1px solid #cbd5e1;
72
       margin: 0; /* 移除外边距,确保精确对齐 */
74
       margin: 0; /* 移除外边距,确保精确对齐 */
75
+      height: 100%; /* 填充父容器高度 */
76
+      min-height: 100%; /* 确保填充最小高度 */
73
       /* 保持原padding大小 */
77
       /* 保持原padding大小 */
74
     }
78
     }
75
 
79
 
116
         inset 0 0 0 1px rgba(255, 255, 255, 0.8); /* 内边缘高光,增强一体感 */
120
         inset 0 0 0 1px rgba(255, 255, 255, 0.8); /* 内边缘高光,增强一体感 */
117
       background: #f1f5f9; /* 稍微深一点的背景,强调状态变化 */
121
       background: #f1f5f9; /* 稍微深一点的背景,强调状态变化 */
118
       border: 1px solid #cbd5e1; /* 保持一致的边框 */
122
       border: 1px solid #cbd5e1; /* 保持一致的边框 */
123
+      height: 100%; /* 填充父容器高度 */
124
+      min-height: 100%; /* 确保填充最小高度 */
119
       
125
       
120
       > div:first-child {
126
       > div:first-child {
121
         padding-top: 0.375rem;
127
         padding-top: 0.375rem;

+ 3
- 0
src/app/components/sticky-header/sticky-header.component.ts View File

95
   /** 宽度参考目标选择器(用于锁定状态宽度匹配),如未设置则使用滚动容器 */
95
   /** 宽度参考目标选择器(用于锁定状态宽度匹配),如未设置则使用滚动容器 */
96
   @Input() widthTarget: string | null = null;
96
   @Input() widthTarget: string | null = null;
97
 
97
 
98
+  /** 标题区域最小高度(用于测试或固定高度布局),如 '200px', '10rem',未设置则由内容决定 */
99
+  @Input() headerHeight: string | null = null;
100
+
98
   /** 按钮点击事件 */
101
   /** 按钮点击事件 */
99
   @Output() buttonClick = new EventEmitter<void>();
102
   @Output() buttonClick = new EventEmitter<void>();
100
 
103
 

+ 1
- 1
src/app/pages/service-register-config/service-register-config.component.html View File

1
-<div class="h-full flex flex-col p-2 min-w-0">
1
+<div class="h-full flex flex-col pt-0 px-2 pb-2 min-w-0">
2
   <!-- 顶部标题区域 -->
2
   <!-- 顶部标题区域 -->
3
   <app-sticky-header
3
   <app-sticky-header
4
     [title]="title"
4
     [title]="title"

+ 2
- 1
src/app/pages/tenant-list/tenant-list.component.html View File

1
-<div class="h-full flex flex-col p-4 min-w-0">
1
+<div class="h-full flex flex-col pt-0 px-4 pb-4 min-w-0">
2
    <app-sticky-header
2
    <app-sticky-header
3
     [title]="'租户管理'"
3
     [title]="'租户管理'"
4
     [buttonText]="'新增租户'"
4
     [buttonText]="'新增租户'"
9
      [scrollThreshold]="20"
9
      [scrollThreshold]="20"
10
     [compactThreshold]="80"
10
     [compactThreshold]="80"
11
     [widthTarget]="'#tenantMatCard'"
11
     [widthTarget]="'#tenantMatCard'"
12
+    [headerHeight]="'200px'"
12
     (buttonClick)="openAddDialog()">
13
     (buttonClick)="openAddDialog()">
13
   </app-sticky-header>
14
   </app-sticky-header>
14
 
15
 

Loading…
Cancel
Save