From d1034fc30e99091220ec867785e29e80be5c66b4 Mon Sep 17 00:00:00 2001
From: chengmw <chengmingwei_1984122@126.com>
Date: Fri, 03 Apr 2026 10:40:00 +0800
Subject: [PATCH] style: 优化当事人信息卡片样式，改进布局与间距
---
web-app/src/components/dashboard/PartyInfoCard.jsx | 30 ++++++++++++++++++------------
1 files changed, 18 insertions(+), 12 deletions(-)
diff --git a/web-app/src/components/dashboard/PartyInfoCard.jsx b/web-app/src/components/dashboard/PartyInfoCard.jsx
index 495a5a7..af4b002 100644
--- a/web-app/src/components/dashboard/PartyInfoCard.jsx
+++ b/web-app/src/components/dashboard/PartyInfoCard.jsx
@@ -4,14 +4,17 @@
*/
import React, { useState, useEffect, useCallback } from 'react';
-import { Avatar, Tag } from 'antd';
-import { UserOutlined, TeamOutlined } from '@ant-design/icons';
+import { Tag } from 'antd';
import { useCaseData } from '../../contexts/CaseDataContext';
import MediationTimelineAPIService from '../../services/MediationTimelineAPIService';
import './PartyInfoCard.css';
-// 默认头像
-const DEFAULT_AVATAR_PERSON = 'http://gz.hugeinfo.com.cn/dyh/wx414ae04ac3f10b4e/images/pngAI_logo.png';
+// 申请人头像图片
+const APPLICANT_AVATAR = '/in_person.png';
+// 被申请人头像图片
+const RESPONDENT_AVATAR = '/to_person.png';
+
+
/**
* 根据per_type判断是申请方还是被申请方
@@ -42,8 +45,7 @@
* 当事人信息卡片
*/
const PartyCard = ({ person, isApplicantSide }) => {
- const avatarIcon = isApplicantSide ? <UserOutlined /> : <TeamOutlined />;
- const avatarBg = isApplicantSide ? '#1a6fb8' : '#faad14';
+ const avatarSrc = isApplicantSide ? APPLICANT_AVATAR : RESPONDENT_AVATAR;
return (
<div className={`party-card ${isApplicantSide ? 'applicant' : 'respondent'}`}>
@@ -55,11 +57,10 @@
)}
{/* 头像 */}
- <Avatar
- size={48}
- icon={avatarIcon}
- style={{ backgroundColor: avatarBg }}
- className="party-avatar"
+ <img
+ src={avatarSrc}
+ alt={isApplicantSide ? '申请人' : '被申请人'}
+ className="party-avatar-img"
/>
{/* 角色标签 */}
@@ -73,12 +74,17 @@
);
};
+// VS分隔符图片
+const VS_ICON = '/join.png';
+
/**
* VS分隔符
*/
const VSSeparator = () => (
<div className="vs-separator">
- <span className="vs-icon">⚖</span>
+ <div className="vs-line vs-line-left"></div>
+ <img src={VS_ICON} alt="VS" className="vs-icon-img" />
+ <div className="vs-line vs-line-right"></div>
</div>
);
--
Gitblit v1.8.0