小米有品的商品详情页需要展示商品的图片、名称、价格等信息，同时还需要支持图片的放大缩小和切换。请设计一个前端组件来实现该功能。

答题要点

推荐使用 STAR 法则，即 Situation（情景）、Task（任务）、Action（行动）、Result（结果）来阐述。关键要点如下：1. 情景：明确商品详情页的需求，包括展示信息和图片操作功能。2. 任务：设计一个可复用的前端组件来实现这些功能。3. 行动：使用 HTML、CSS 和 JavaScript 来实现组件。可以使用 CSS 实现图片的样式和布局，使用 JavaScript 实现图片的放大缩小和切换功能。4. 结果：确保组件在不同浏览器和设备上都能正常显示和使用。示例话术：在小米有品的商品详情页中，为了满足展示商品信息和图片操作的需求，我设计了一个前端组件。使用 HTML 构建组件的结构，CSS 美化样式，JavaScript 实现交互功能，最终实现了一个可复用的组件，提升了页面的用户体验。