```json
{
"summary

```json
{
"summary": "创建左右布局的杂志卡片组件，左侧为封面图片，右侧为内容信息，优化视觉流和阅读体验",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"container mx-auto px-4 py-16\">\n <div class=\"grid grid-cols-1 gap-8\">\n <!-- 时尚杂志卡片 -->\n <div class=\"relative group flex flex-col md:flex-row rounded-3xl bg-gradient-to-br from-purple-50/80 to-pink-50/80 shadow-xl transition-all duration-500 hover:shadow-2xl overflow-hidden\">\n <!-- 封面图片 -->\n <div class=\"relative w-full md:w-2/5 h-[400px] md:h-auto overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-purple-900/30 to-transparent z-10\"></div>\n <img src=\"/assets/images/showcase/1.jpg\" alt=\"时尚杂志\" \n class=\"w-full h-full object-cover transition-all duration-700 group-hover:scale-105\">\n \n <!-- 角标 -->\n <div class=\"absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-purple-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg\">\n <span class=\"text-white font-bold text-sm\">NEW</span>\n </div>\n </div>\n \n <!-- 内容区域 -->\n <div class=\"w-full md:w-3/5 p-8 relative z-20\">\n <div class=\"flex justify-between items-start mb-3\">\n <div>\n <h3 class=\"text-2xl font-bold text-gray-900 tracking-tight\">时尚风尚</h3>\n <p class=\"text-gray-600 text-sm mt-1\">2023年12月刊</p>\n </div>\n <span class=\"px-3 py-1 text-xs font-semibold bg-purple-100 text-purple-800 rounded-full shadow-sm\">\n 时尚\n </span>\n </div>\n \n <p class=\"text-gray-800 mb-6 line-clamp-3 leading-relaxed\">\n 探索全球时尚潮流趋势，提供最新时装周报道和设计师专访，重新定义您的个人风格。本期刊物特别收录米兰时装周独家报道和2024春夏流行趋势预测。\n </p>\n \n <div class=\"flex flex-wrap gap-2 mb-6\">\n <span class=\"text-xs font-medium px-3 py-1.5 rounded-full bg-purple-100/80 text-purple-800\">时装周</span>\n <span class=\"text-xs font-medium px-3 py-1.5 rounded-full bg-purple-100/80 text-purple-800\">设计师</span>\n <span class=\"text-xs font-medium px-3 py-1.5 rounded-full bg-purple-100/80 text-purple-800\">趋势预测</span>\n </div>\n \n <div class=\"flex justify-between items-center\">\n <div>\n <span class=\"text-lg font-bold text-gray-900\">¥98</span>\n <span class=\"text-gray-500 text-sm line-through ml-2\">¥128</span>\n </div>\n \n <button class=\"flex items-center px-4 py-2.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl font-medium \n hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-md hover:shadow-lg group-hover:gap-2 gap-1\">\n 立即购买\n <span class=\"inline-block transition-all duration-300 group-hover:translate-x-1\">→</span>\n </button>\n </div>\n </div>\n \n <!-- 悬浮标签 -->\n <div class=\"absolute -left-1 top-8 bg-gradient-to-r from-purple-600 to-pink-500 text-white text-xs font-bold py-1 px-4 rounded-r-full shadow-md\">\n 畅销推荐\n </div>\n </div>\n \n <!-- 科技杂志卡片 -->\n <div class=\"relative group flex flex-col md:flex-row rounded-3xl bg-gradient-to-br from-blue-50/80 to-cyan-50/80 shadow-xl transition-all duration-500 hover:shadow-2xl overflow-hidden\">\n <!-- 封面图片 -->\n <div class=\"relative w-full md:w-2/5 h-[400px] md:h-auto overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-blue-900/30 to-transparent z-10\"></div>\n <img src=\"/assets/images/showcase/2.jpg\" alt=\"科技杂志\" \n class=\"w-full h-full object-cover transition-all duration-700 group-hover:scale-105\">\n \n <!-- 角标 -->\n <div class=\"absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-blue-600 to-cyan-500 rounded-full flex items-center justify-center shadow-lg\">\n <span class=\"text-white font-bold text-sm\">AI</span>\n </div>\n </div>\n \n <!-- 内容区域 -->\n <div class=\"w-full md:w-3/5 p-8 relative z-20\">\n <div class=\"flex justify-between items-start mb-3\">\n <div>\n <h3 class=\"text-2xl font-bold text-gray-900 tracking-tight\">科技前沿</h3>\n <p class=\"text-gray-600 text-sm mt-1\">2024年1月刊</p>\n </div>\n <span class=\"px-3 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full shadow-sm\">\n 科技\n </span>\n </div>\n \n <p class=\"text-gray-800 mb-6 line-clamp-3 leading-relaxed\">\n 深入解析人工智能、量子计算等尖端技术，专访行业领袖，预测未来十年科技发展趋势。本期特别关注ChatGPT技术革命和量子计算机商用化进程。\n </p>\n \n <div class=\"flex items-center mb-6\">\n <div class=\"flex text-yellow-400\">\n <svg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\n <svg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\n <svg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\n <svg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\n <svg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/></svg>\n </div>\n <span class=\"text-gray-600 text-sm ml-2\">4.9 (128评价)</span>\n </div>\n \n <div class=\"flex justify-between items-center\">\n <div>\n <span class=\"text-lg font-bold text-gray-900\">¥108</span>\n </div>\n \n <button class=\"flex items-center px-4 py-2.5 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-xl font-medium \n hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 shadow-md hover:shadow-lg group-hover:gap-2 gap-1\">\n 订阅期刊\n <span class=\"inline-block transition-all duration-300 group-hover:translate-x-1\">→</span>\n </button>\n </div>\n </div>\n \n <!-- 悬浮标签 -->\n <div class=\"absolute -left-1 top-8 bg-gradient-to-r from-blue-600 to-cyan-500 text-white text-xs font-bold py-1 px-4 rounded-r-full shadow-md\">\n 年度特刊\n </div>\n </div>\n \n <!-- 生活杂志卡片 -->\n <div class=\"relative group flex flex-col md:flex-row rounded-3xl bg-gradient-to-br from-green-50/80 to-teal-50/80 shadow-xl transition-all duration-500 hover:shadow-2xl overflow-hidden\">\n <!-- 封面图片 -->\n <div class=\"relative w-full md:w-2/5 h-[400px] md:h-auto overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-green-900/30 to-transparent z-10\"></div>\n <img src=\"/assets/images/showcase/3.jpg\" alt=\"生活杂志\" \n class=\"w-full h-full object-cover transition-all duration-700 group-hover:scale-105\">\n \n <!-- 角标 -->\n <div class=\"absolute top-4 right-4 w-16 h-16 bg-gradient-to-r from-green-600 to-teal-500 rounded-full flex items-center justify-center shadow-lg\">\n <span class=\"text-white font-bold text-sm\">TOP</span>\n </div>\n </div>\n \n <!-- 内容区域 -->\n <div class=\"w-full md:w-3/5 p-8 relative z-20\">\n <div class=\"flex justify-between items-start mb-3\">\n <div>\n <h3 class=\"text-2xl font-bold text-gray-900 tracking-tight\">品质生活</h3>\n <p class=\"text-gray-600 text-sm mt-1\">2023年11月刊</p>\n </div>\n <span class=\"px-3 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full shadow-sm\">\n 生活\n </span>\n </div>\n \n <p class=\"text-gray-800 mb-6 line-clamp-3 leading-relaxed\">\n 探索健康饮食、家居美学和慢生活理念，提供实用指南帮助您提升日常生活品质和幸福感。本期特别推荐北欧风格家居改造方案和地中海饮食食谱。\n </p>\n \n <div class=\"flex flex-wrap gap-2 mb-6\">\n <span class=\"text-xs font-medium px-3 py-1.5 rounded-full bg-green-100/80 text-green-800\">健康饮食</span>\n <span class=\"text-xs font-medium px-3 py-1.5 rounded-full bg-green-100/80 text-green-800\">家居设计</span>\n <span class=\"text-xs font-medium px-3 py-1.5 rounded-full bg-green-100/80 text-green-800\">旅行指南</span>\n </div>\n \n <div class=\"flex justify-between items-center\">\n <div>\n <span class=\"text-lg font-bold text-gray-900\">¥88</span>\n </div>\n \n <button class=\"flex items-center px-4 py-2.5 bg-gradient-to-r from-green-600 to-teal-600 text-white rounded-xl font-medium \n hover:from-green-700 hover:to-teal-700 transition-all duration-300 shadow-md hover:shadow-lg group-hover:gap-2 gap-1\">\n 加入购物车\n <span class=\"inline-block transition-all duration-300 group-hover:translate-x-1\">→</span>\n </button>\n </div>\n </div>\n \n <!-- 悬浮标签 -->\n <div class=\"absolute -left-1 top-8 bg-gradient-to-r from-green-600 to-teal-500 text-white text-xs font-bold py-1 px-4 rounded-r-full shadow-md\">\n 限时优惠\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加分页加载",
"实现卡片折叠",
"增加搜索功能",
"优化触摸反馈",
"添加收藏动画"
]
}
```