浅念
3.7 KiB
3.7 KiB
嵌入组件 · PC与手机统一紧凑尺寸
日期：2026-09-22。内置image_gen生成的概念稿，非实际网页截图。
本版替代上一版大卡片尺寸方向：PC与手机均按195×280 CSS px作为实现参考，不使用桌面50vw/33vh，也不随桌面屏幕放大。手机390×844视口时约为宽度一半、高度三分之一。设计图的两个视口展示缩放略有差异；工程验收以CSS实测195×280为准，不能按画板截图像素反推。
卡片结构：紧凑Photos标题与收起、图片轮播、相册名、页码/暂停/观众页入口。统一右下悬浮，PC右16/下24px，手机右12/下24px并避让安全区。极端小视口允许缩小以免越界，不能放大。示例网站、图片和数字不写入产品；点击图片打开单图深链，View打开相册。交互目标仍应保证可点击，暂停/关闭有效区域需在实现时核验。
完整提示词
Use case: ui-mockup. Create a precise clean high-fidelity responsive web design comparison board showing ONE SMALL FIXED-SIZE embeddable photo carousel on BOTH DESKTOP AND MOBILE. Critical requirement: widget CSS size is identical on both platforms, WIDTH 195px HEIGHT 280px. It does NOT scale to 50% of desktop width. Both website viewports shown at approximately SAME SCALE on the design board so the two widgets visibly have the same physical pixel dimensions. Large landscape canvas approx 2000x1100. Desktop website mockup left: logical 1100x760. Mobile website mockup right: logical390x844. Both displayed at same scale, with ample margins on solid opaque #F3F6FA background. NO third enlarged component detail; only desktop and mobile comparison. Heading "ONE WIDGET. SAME SIZE." Subheading "Desktop & mobile · 195 × 280 px". Labels "DESKTOP" and "MOBILE" above the corresponding viewports.
Desktop host website subtle neutral corporate NORTHLINE page with header About Solutions Events Contact, hero architectural trade show photograph, headline "Meet us at the fair", blue Explore exhibits CTA, lower three feature cards. Actual carousel is SMALL, anchored bottom-right of desktop browser content, 16px right and24px bottom, width195px andheight280px relative1100x760 host. Most desktop site remains unobstructed. Mobile host website SAME NORTHLINE theme, stacked content, menu, hero and CTA, lower content; carousel floats bottom right, right12 bottom24, SAME195x280 logical size, taking HALF mobile width andONE THIRD mobile height. Left half of mobile content remains visible. Both widgets show same photo and EXACT same layout and dimensions, do not enlarge desktop widget. The mobile viewport is much narrower than desktop because same scale.
Widget: clean white radius12 small shadow, header36px blue photo icon and 'Photos' in12px, minus collapse control at top-right. Image stage195x174px showing natural trade fair networking photograph of adult business visitors fully contained on charcoal backing. Title row26px 'Canton Fair' bold12px. Bottom44px action row: tiny '3 / 12', pause icon with generous clickable spacing, blue 'View ↗'. Total280. Thin small previous/next arrows on photo sides. No likes, downloads, comments, login, upload or large toolbar. No mock data outside widget except host. Photos realistic, text crisp. Add discreet dimension annotations '195 px' below each widget or each same-size outline, and '280 px' alongside if room; no arrows over actual content. Blue #1A73E8 accent navy #172033 text. Flat front-facing browser website frames, no device hardware, no perspective, no busy graphic decorations. Entire canvas opaque pristine light background. PRIORITIZE visibly identical widget size on desktop and mobile. This is an implementable UI design mockup, not code or an infographic.