diff --git a/src/pages/ChatMain/ChatMainList/index.vue b/src/pages/ChatMain/ChatMainList/index.vue index 31d4a2c..06f06c8 100644 --- a/src/pages/ChatMain/ChatMainList/index.vue +++ b/src/pages/ChatMain/ChatMainList/index.vue @@ -103,20 +103,26 @@ item.toolCall.componentName === CompName.mapCard " /> - + /> --> + + + + + + + + + {{ item.badge }} + + + + {{ item.title }} + + + {{ item.summary }} + + + {{ item.footer }} + + + + + + + + + + + diff --git a/src/pages/ChatModule/LongTextGuideCardPreview/styles/index.scss b/src/pages/ChatModule/LongTextGuideCardPreview/styles/index.scss new file mode 100644 index 0000000..42596a0 --- /dev/null +++ b/src/pages/ChatModule/LongTextGuideCardPreview/styles/index.scss @@ -0,0 +1,186 @@ +.long-text-guide-card__summary-card { + min-height: 178px; + margin-bottom: 16px; + padding: 28px 26px 22px; + border: 1px solid rgba(15, 23, 42, 0.04); + box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04); + transition: transform 0.15s ease, opacity 0.15s ease; +} + +.long-text-guide-card__summary-card:active { + transform: scale(0.985); +} + +.long-text-guide-card__summary-card.is-disabled { + opacity: 0.55; +} + +.long-text-guide-card__badge { + display: inline-flex; + width: fit-content; + align-items: center; + justify-content: center; + min-height: 26px; + padding: 0 10px; + border: 1px solid transparent; + border-radius: 999px; + line-height: 18px; +} + +.long-text-guide-card__badge.is-amber { + color: #d97706; + background: #fffbeb; + border-color: #fde68a; +} + +.long-text-guide-card__badge.is-green { + color: #059669; + background: #ecfdf5; + border-color: #a7f3d0; +} + +.long-text-guide-card__badge.is-blue { + color: #2563eb; + background: #eff6ff; + border-color: #bfdbfe; +} + +.long-text-guide-card__summary-title { + margin-top: 18px; + line-height: 24px; +} + +.long-text-guide-card__summary-text { + margin-top: 10px; + line-height: 22px; +} + +.long-text-guide-card__summary-footer { + margin-top: 24px; +} + +.long-text-guide-card__arrow { + font-size: 26px; + line-height: 1; +} + +.long-text-guide-card__detail-card { + border: 1px solid rgba(15, 23, 42, 0.04); +} + +.long-text-guide-card__detail-header { + min-height: 70px; + padding: 0 18px 0 20px; +} + +.long-text-guide-card__back { + width: 34px; + height: 34px; + margin-right: 12px; + color: #64748b; + background: #f2f4f6; + font-size: 24px; + line-height: 1; +} + +.long-text-guide-card__detail-title { + flex: 1; + min-width: 0; +} + +.long-text-guide-card__detail-badge { + margin-left: 12px; +} + +.long-text-guide-card__rich-body { + padding: 24px 22px 26px; +} + +.long-text-guide-card__paragraph { + margin-bottom: 20px; + line-height: 30px; +} + +.long-text-guide-card__highlight { + color: #065f46; + background: #ecfdf5; + padding: 1px 6px; + border-radius: 4px; +} + +.long-text-guide-card__main-image { + height: 198px; + margin-bottom: 24px; +} + +.long-text-guide-card__section-title { + margin-bottom: 12px; + line-height: 22px; +} + +.long-text-guide-card__tip-block { + margin-bottom: 22px; + padding: 12px 18px; + border-left: 3px solid #34d399; + border-radius: 12px; +} + +.long-text-guide-card__tip { + line-height: 24px; +} + +.long-text-guide-card__action-zone { + border-top: 1px solid #f1f5f9; + padding: 16px 20px 20px; +} + +.long-text-guide-card__action-label { + margin-bottom: 10px; + letter-spacing: 0.6px; +} + +.long-text-guide-card__map-card { + border: 1px solid #f1f5f9; +} + +.long-text-guide-card__map-image { + height: 138px; +} + +.long-text-guide-card__map-tag { + position: absolute; + left: 14px; + bottom: 12px; + padding: 4px 8px; + border-radius: 999px; + background: rgba(15, 23, 42, 0.72); +} + +.long-text-guide-card__map-bar { + padding: 14px 16px; +} + +.long-text-guide-card__nav-btn { + padding: 12px 18px; + border-radius: 14px; +} + +.long-text-guide-card__photo-card { + min-height: 178px; + overflow: hidden; + border-radius: 16px; + background: #f8fafc; +} + +.long-text-guide-card__photo-image { + height: 178px; +} + +.long-text-guide-card__expand { + position: absolute; + right: 14px; + bottom: 14px; + width: 38px; + height: 38px; + background: rgba(15, 23, 42, 0.36); +}