展示额外消耗品总价与明细悬浮卡片

租金改为「包含额外物品」；按 resources 收费项汇总额外消耗品金额，悬浮展示物品明细。
2026-07-13 23:54:09 +08:00
parent 35b0278524
commit 51991071e7
4 changed files with 300 additions and 21 deletions
@@ -702,6 +702,166 @@ input {
  color: #ff5b66;
 }

+.price-hint {
+  cursor: help;
+  border-bottom: 1px dotted #d0d5dd;
+  padding-bottom: 1px;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.price-hint:hover {
+  border-bottom-color: var(--brand);
+}
+
+.price-hint:hover strong {
+  color: var(--brand-dark);
+}
+
+/* 额外物品悬浮卡片 */
+.resource-tooltip-root .ant-tooltip-container,
+.resource-tooltip-root .ant-tooltip-inner {
+  width: 340px !important;
+  max-width: min(340px, calc(100vw - 24px)) !important;
+  padding: 0 !important;
+  overflow: hidden;
+  border-radius: 12px !important;
+  border: 1px solid #e8edf3 !important;
+  background: #fff !important;
+  color: var(--text-main) !important;
+  box-shadow: 0 12px 32px rgba(21, 32, 43, 0.14) !important;
+}
+
+.resource-popover {
+  min-width: 0;
+  text-align: left;
+}
+
+.resource-popover.empty {
+  padding: 14px 16px;
+  color: #98a2b3;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.resource-popover-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  background: linear-gradient(180deg, #fff8f1, #fff);
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.resource-popover-head > div {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.resource-popover-head strong {
+  color: var(--text-main);
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.resource-popover-head span {
+  color: #98a2b3;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.resource-popover-head em {
+  flex: none;
+  color: var(--brand);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.resource-popover-list {
+  max-height: 280px;
+  overflow: auto;
+  padding: 6px 0;
+}
+
+.resource-popover-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 14px;
+}
+
+.resource-popover-row:hover {
+  background: #fafbfc;
+}
+
+.resource-popover-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.resource-name {
+  color: #1f2a37;
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.resource-qty {
+  color: #667085;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.resource-mode {
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.resource-mode.paid {
+  color: var(--brand-dark);
+  background: var(--brand-soft);
+}
+
+.resource-mode.gift {
+  color: #027a48;
+  background: #ecfdf3;
+}
+
+.resource-popover-side {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.resource-unit {
+  color: #98a2b3;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.resource-amount {
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
 .price-line .ant-btn {
  margin-left: auto;
  padding-right: 0;