ソースを参照

feat: 卡片样式按设计稿实现

border-radius: 20px, box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.35),
font-family: AlibabaPuHui-regular, color: rgba(16,16,16,1), line-height: 28px;
顶部工具栏及所有卡片统一应用,侧栏标题栏顶部圆角同步更新。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
simonlll 1 ヶ月 前
コミット
be194775d4
共有1 個のファイルを変更した10 個の追加7 個の削除を含む
  1. 10 7
      src/views/portraitManagement/employeeProfile/index.vue

+ 10 - 7
src/views/portraitManagement/employeeProfile/index.vue

@@ -365,6 +365,9 @@ onBeforeUnmount(() => {
365 365
   padding: 12px;
366 366
   box-sizing: border-box;
367 367
   gap: 12px;
368
+  font-family: 'AlibabaPuHui-regular', 'Alibaba PuHuiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
369
+  color: rgba(16, 16, 16, 1);
370
+  line-height: 28px;
368 371
 }
369 372
 
370 373
 /* ── 顶部工具栏 ── */
@@ -372,10 +375,10 @@ onBeforeUnmount(() => {
372 375
   display: flex;
373 376
   align-items: center;
374 377
   justify-content: space-between;
375
-  background: #fff;
376
-  border-radius: 8px;
378
+  background: rgba(255, 255, 255, 1);
379
+  border-radius: 20px;
377 380
   padding: 10px 16px;
378
-  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
381
+  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.35);
379 382
   flex-shrink: 0;
380 383
   gap: 12px;
381 384
   flex-wrap: wrap;
@@ -422,10 +425,10 @@ onBeforeUnmount(() => {
422 425
 
423 426
 /* ── 通用卡片 ── */
424 427
 .card {
425
-  background: #fff;
426
-  border-radius: 8px;
428
+  background: rgba(255, 255, 255, 1);
429
+  border-radius: 20px;
427 430
   padding: 14px 16px;
428
-  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
431
+  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.35);
429 432
 }
430 433
 
431 434
 .row-flex {
@@ -630,7 +633,7 @@ onBeforeUnmount(() => {
630 633
     background: #409eff;
631 634
     margin: -14px -16px 12px;
632 635
     padding: 7px 16px;
633
-    border-radius: 8px 8px 0 0;
636
+    border-radius: 20px 20px 0 0;
634 637
   }
635 638
 }
636 639