/** * PartyInfoCard 组件样式 * 申请双方信息展示 */ .party-info-card { background: #f8f9fa; border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; } .party-info-title { font-size: 0.9rem; color: #6c757d; margin-bottom: 12px; font-weight: 500; } .party-info-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* 当事人卡片 */ .party-card { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; padding: 8px; } /* 情绪标签 - 实心红背景白字 */ .party-tag { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; padding: 2px 8px; line-height: 16px; border-radius: 10px; background-color: #ff4d4f !important; color: white !important; border: none !important; } .party-avatar-img { width: 48px; height: 48px; border-radius: 50%; margin-top: 12px; margin-bottom: 8px; object-fit: cover; } .party-role { font-size: 0.75rem; color: #999; margin-bottom: 4px; } .party-name { font-size: 0.9rem; font-weight: 600; color: #333; text-align: center; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* VS分隔符 */ .vs-separator { display: flex; align-items: center; justify-content: center; padding: 0 8px; gap: 8px; } .vs-line { width: 30px; height: 1px; } .vs-line-left { background: linear-gradient(to right, #E5E6EB, #C9CDD4); } .vs-line-right { background: linear-gradient(to right, #C9CDD4, #E5E6EB); } .vs-icon-img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }