@pisell/private-materials 6.9.1 → 6.9.3

package/lib/components/checkout/components/PaymentDetailModal/index.less

@@ -59,435 +59,432 @@
     font-size: 14px;
     font-weight: 500;
   }
-}
+  /* PaymentDetailModal组件样式 - 基于Figma设计 */
+  .payment-detail-modal {
+    width: 100%;
+    height: 100%;
+    background: white;
+    overflow: hidden;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+  }
 
+  .main-content {
+    align-self: stretch;
+    padding: 16px 0;
+    background: white;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 16px;
+  }
 
+  /* Section 通用样式 */
+  .section-container {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 6px;
+  }
 
-/* PaymentDetailModal组件样式 - 基于Figma设计 */
-.payment-detail-modal {
-  width: 100%;
-  height: 100%;
-  background: white;
-  overflow: hidden;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.main-content {
-  align-self: stretch;
-  padding: 16px 0;
-  background: white;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-/* Section 通用样式 */
-.section-container {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 6px;
-}
-
-.section-header {
-  align-self: stretch;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-.section-title-container {
-  width: 232.5px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.section-title {
-  color: #1B1B1B;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  word-wrap: break-word;
-}
-
-.section-right {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 16px;
-}
-
-.section-amount {
-  color: black;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  word-wrap: break-word;
-}
-
-/* 折叠图标样式 */
-.collapse-icon {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease;
-}
-
-.collapse-icon.expanded {
-  transform: rotate(180deg);
-}
-
-/* 信息图标样式 */
-.info-icon {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Section 内容样式 */
-.section-content {
-  align-self: stretch;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-/* Order Details 网格布局 */
-.order-details-grid {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.order-details-column {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.divider-vertical {
-  width: 1px;
-  align-self: stretch;
-  background: #D0D5DD;
-}
-
-.order-row {
-  align-self: stretch;
-  height: 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.order-row-left {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-}
-
-.order-row-label {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-.order-row-label-with-icon {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
-}
-
-.order-row-text {
-  color: black;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-.order-row-subtext {
-  color: #667085;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-.order-row-amount {
-  color: black;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-/* 水平分隔线 */
-.divider-horizontal {
-  align-self: stretch;
-  height: 1px;
-  border-top: 1px solid black;
-}
-
-/* Payment Records 样式 */
-.payment-record-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.payment-record-header {
-  align-self: stretch;
-  height: 24px;
-  border-top: 1px solid black;
-  border-bottom: 1px solid black;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.payment-record-info {
-  flex: 1;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-}
-
-.payment-record-text {
-  color: black;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-.payment-record-amount {
-  color: black;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-.payment-item-header {
-  width: 100%;
-  color: black;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-  display: flex;
-  justify-content: space-between;
-}
-
-.payment-item {
-  align-self: stretch;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-  margin-left: 10px;
-  margin-right: 64px;
-}
-
-.payment-item-bullet {
-  width: 6px;
-  height: 6px;
-  background-color: #475467;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.payment-item-content {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.payment-item-text {
-  color: #475467;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-.payment-item-actions {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 16px;
-}
-
-.payment-item-amount {
-  color: #475467;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-.void-button {
-  padding: 2px 16px;
-  background: #079455;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border: none;
-  border-radius: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  height: 32px;
-  color: white;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 22px;
-}
-
-.void-button:hover {
-  background: #065f41;
-}
-
-/* Balance to Pay 特殊样式 */
-.balance-to-pay-section {
-  align-self: stretch;
-  padding-top: 4px;
-  overflow: hidden;
-  border-radius: 8px;
-  border: 1px solid #7F56DA;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-}
-
-.balance-to-pay-header {
-  align-self: stretch;
-  padding: 0 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-.balance-to-pay-title {
-  color: #7F56DA;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  word-wrap: break-word;
-}
-
-.balance-to-pay-right {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-
-.balance-to-pay-amount {
-  color: #7F56DA;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  word-wrap: break-word;
-}
-
-.balance-to-pay-content {
-  align-self: stretch;
-  padding: 0 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.balance-item-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 24px;
-}
-
-.balance-item-text {
-  color: #475467;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-.balance-item-amount {
-  color: #475467;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-
-/* Balance Due 最终结果样式 */
-.balance-due-section {
-  align-self: stretch;
-  padding: 4px 16px;
-  background: #5D3F9F;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.balance-due-header {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.balance-due-title {
-  color: white;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  word-wrap: break-word;
-}
-
-.balance-due-amount {
-  color: white;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-  word-wrap: break-word;
-}
+  .section-header {
+    align-self: stretch;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .section-title-container {
+    width: 232.5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .section-title {
+    color: #1B1B1B;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .section-right {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .section-amount {
+    color: black;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  /* 折叠图标样式 */
+  .collapse-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+  }
+
+  .collapse-icon.expanded {
+    transform: rotate(180deg);
+  }
+
+  /* 信息图标样式 */
+  .info-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Section 内容样式 */
+  .section-content {
+    align-self: stretch;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  /* Order Details 网格布局 */
+  .order-details-grid {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .order-details-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .divider-vertical {
+    width: 1px;
+    align-self: stretch;
+    background: #D0D5DD;
+  }
+
+  .order-row {
+    align-self: stretch;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .order-row-left {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .order-row-label {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .order-row-label-with-icon {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .order-row-text {
+    color: black;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .order-row-subtext {
+    color: #667085;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .order-row-amount {
+    color: black;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  /* 水平分隔线 */
+  .divider-horizontal {
+    align-self: stretch;
+    height: 1px;
+    border-top: 1px solid black;
+  }
+
+  /* Payment Records 样式 */
+  .payment-record-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .payment-record-header {
+    align-self: stretch;
+    height: 24px;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .payment-record-info {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .payment-record-text {
+    color: black;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .payment-record-amount {
+    color: black;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+  .payment-item-header {
+    width: 100%;
+    color: black;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .payment-item {
+    align-self: stretch;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    margin-left: 10px;
+    margin-right: 64px;
+  }
+
+  .payment-item-bullet {
+    width: 6px;
+    height: 6px;
+    background-color: #475467;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .payment-item-content {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .payment-item-text {
+    color: #475467;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .payment-item-actions {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .payment-item-amount {
+    color: #475467;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .void-button {
+    padding: 2px 16px;
+    background: #079455;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+    border: none;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    height: 32px;
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  .void-button:hover {
+    background: #065f41;
+  }
+
+  /* Balance to Pay 特殊样式 */
+  .balance-to-pay-section {
+    align-self: stretch;
+    padding-top: 4px;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid #7F56DA;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .balance-to-pay-header {
+    align-self: stretch;
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .balance-to-pay-title {
+    color: #7F56DA;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .balance-to-pay-right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .balance-to-pay-amount {
+    color: #7F56DA;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .balance-to-pay-content {
+    align-self: stretch;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .balance-item-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 24px;
+  }
+
+  .balance-item-text {
+    color: #475467;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  .balance-item-amount {
+    color: #475467;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+  }
+
+  /* Balance Due 最终结果样式 */
+  .balance-due-section {
+    align-self: stretch;
+    padding: 4px 16px;
+    background: #5D3F9F;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .balance-due-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .balance-due-title {
+    color: white;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .balance-due-amount {
+    color: white;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+}