/* 门店详情 */ .store-detail-page { background: var(--color-background); } .store-detail-hero { background: var(--color-card); } .store-detail-carousel-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; /* background: var(--color-surface-container); */ background-color: #000; } /* 门店门头:固定 4:3 区域,图片 aspectFit 缩放完整显示(不裁剪) */ .store-detail-carousel-wrap--contain .store-detail-carousel-item { display: flex; align-items: center; justify-content: center; } .store-detail-carousel-wrap--contain .store-detail-carousel-image { width: 100%; height: 100%; object-fit: contain; object-position: center center; } .store-detail-carousel { width: 100%; height: 100%; } .store-detail-carousel-item, .store-detail-carousel-image, .store-detail-carousel-placeholder { width: 100%; height: 100%; } .store-detail-carousel-image { object-fit: cover; object-position: center center; display: block; } .store-detail-carousel-placeholder { background: var(--color-surface-container); } .store-detail-carousel-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; } .store-detail-carousel-dot { height: 4px; width: 6px; margin: 0 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.45); } .store-detail-carousel-dot--active { width: 20px; background: #fff; } /* 套餐详情图右下角 1/N 计数(detail 变体复用 .detail-carousel-counter) */ .detail-carousel-counter { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 2px 10px; font-size: 12px; line-height: 1.5; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 999px; pointer-events: none; } .store-detail-info-card { margin: 0 var(--space-page) 16px; position: relative; z-index: 2; background: var(--color-card); border-radius: var(--radius-lg); padding: 20px 16px; box-shadow: var(--shadow-card); } .store-detail-name { display: block; font-family: var(--font-headline); font-size: 20px; font-weight: 700; color: var(--color-ink-black); margin-bottom: 8px; } .store-detail-meta { display: block; font-size: 13px; color: var(--color-on-surface-variant); margin-bottom: 6px; line-height: 1.5; } .store-detail-meta--flex { flex: 1; min-width: 0; margin-bottom: 0; } .store-detail-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .store-detail-action { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; background: rgba(166, 29, 36, 0.08); color: var(--color-heritage-red); font-size: 12px; font-weight: 600; line-height: 1.6; } .store-detail-intro { display: block; font-size: 14px; color: var(--color-on-surface); line-height: 1.7; white-space: pre-wrap; } .store-detail-tags { display: flex; flex-wrap: wrap; margin-top: 12px; } .store-detail-tag { padding: 4px 10px; margin-right: 8px; margin-bottom: 8px; border-radius: 999px; background: rgba(166, 29, 36, 0.08); color: var(--color-heritage-red); font-size: 11px; } .store-detail-marquee-wrap { margin: 0 var(--space-page) 12px; } .store-detail-marquee { margin: 0; padding: 0; border-radius: 8px; background: #fff7f6; border: 1px solid rgba(166, 29, 36, 0.12); overflow: hidden; height: 40px; box-sizing: border-box; position: relative; } .store-detail-marquee-inner { position: absolute; top: 50%; margin-top: -10px; white-space: nowrap; } .store-detail-marquee-text { white-space: nowrap; font-size: 12px; line-height: 20px; color: #a61d24; } .store-detail-section { background: var(--color-card); margin: 0 var(--space-page) 16px; border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-card); } .store-detail-section-title { display: block; font-family: var(--font-headline); font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--color-on-surface); } .store-detail-env-grid { display: flex; flex-direction: column; gap: 12px; } .store-detail-env-item { position: relative; width: 100%; border-radius: var(--radius-md, 8px); overflow: hidden; background: var(--color-surface-container); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .store-detail-env-img { width: 100%; height: auto; display: block; vertical-align: top; } .store-detail-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; background: rgba(255, 255, 255, 0.95); border-top: 1px solid rgba(226, 190, 188, 0.1); box-sizing: border-box; } .store-detail-bar-btn { flex: 1; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; } .store-detail-bar-btn--ghost { background: rgba(166, 29, 36, 0.08); color: var(--color-heritage-red); margin-right: 12px; } .store-detail-bar-btn--primary { background: var(--color-heritage-red); color: #fff; } .store-detail-bar-btn--full { flex: 1; margin-right: 0; } .store-detail-section--packages { overflow: hidden; } .store-detail-package-list { display: flex; flex-direction: column; } .store-detail-package-list-item { padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .store-detail-package-list-item:first-child { padding-top: 4px; } .store-detail-package-list-item:last-child { border-bottom: none; padding-bottom: 0; } /* 名称在左可换行;价格始终贴该行最右侧 */ .store-detail-package-list-row { /* display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; row-gap: 4px; */ display: block; width: 100%; } .store-detail-package-list-title { min-width: 0; font-family: var(--font-headline); font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--color-on-surface); word-break: break-word; display: inline; } .store-detail-package-list-price { display: inline; margin-left: auto; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--color-heritage-red, #a61d24); text-align: right; } .store-detail-package-list-item:active { opacity: 0.72; } /* ── 套餐详情页(独立于门店详情) ── */ .store-package-detail-page { background: var(--color-background); } .store-package-detail-body { /* 避开状态栏+胶囊导航,并额外 12px 顶白 */ padding: calc(var(--nav-bar-height, 56px) + 12px) 0 24px; box-sizing: border-box; } .store-package-detail-inner { /* 左右留白,内容不贴边 */ padding: 8px 16px 0; box-sizing: border-box; } .store-package-detail-header { padding: 8px 16px 4px 16px; } /* 与门店详情套餐列表一致:名称在左可换行;价格始终贴该行最右侧 */ .store-package-detail-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 16px; row-gap: 4px; width: 100%; } .store-package-detail-title { /* flex: 1 1 10em; */ min-width: 0; font-family: var(--font-headline); font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--color-ink-black); word-break: break-word; } .store-package-detail-price { /* flex: 0 0 auto; */ margin-left: auto; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--color-heritage-red, #a61d24); text-align: right; white-space: nowrap; } .store-package-detail-store { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--color-on-surface-variant); padding-left: 4px; } .store-package-detail-gallery { margin: 14px 0 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-card); box-shadow: var(--shadow-card); } .store-package-detail-gallery .detail-carousel-wrap { border-radius: 0; } .store-package-detail-content { margin-top: 16px; background: var(--color-card); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-card); box-sizing: border-box; } .store-detail-package-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-on-surface-variant); margin-bottom: 6px; } .store-detail-package-field-value { display: block; font-size: 14px; color: var(--color-on-surface); line-height: 1.7; white-space: pre-wrap; word-break: break-word; } .store-detail-package-field { margin-bottom: 16px; } .store-detail-package-field:last-child { margin-bottom: 0; } .store-detail-package-dispute { display: block; margin-top: 12px; font-size: 13px; color: var(--color-heritage-red); } .store-detail-dispute-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; } .store-detail-dispute-panel { width: 100%; max-width: 480px; background: #fff; border-radius: 16px 16px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; } .store-detail-dispute-input { width: 100%; min-height: 96px; margin: 12px 0 16px; padding: 12px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; box-sizing: border-box; font-size: 14px; } .store-detail-dispute-actions { display: flex; gap: 12px; } .store-detail-dispute-actions .u-btn { flex: 1; } .store-detail-dispute-actions .u-btn--ghost { background: rgba(166, 29, 36, 0.08); color: var(--color-heritage-red); }