```json
{
"summary

```json
{
"summary": "创建PC端三栏布局的杂志卡片组件，优化大屏幕显示效果，保持响应式设计",
"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 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n <!-- 时尚杂志卡片 -->\n <div class=\"relative group flex flex-col rounded-3xl bg-gradient-to-br from-purple-50/80 to-pink-50/80 shadow-xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 overflow-hidden\">\n <!-- 封面图片 -->\n <div class=\"relative w-full h-[300px] 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-12 h-12 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-xs\">NEW</span>\n </div>\n </div>\n \n <!-- 内容区域 -->\n <div class=\"p-6 relative z-20 flex-grow\">\n <div class=\"flex justify-between items-start mb-3\">\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 tracking-tight\">时尚风尚</h3>\n <p class=\"text-gray-600 text-xs mt-1\">2023年12月刊</p>\n </div>\n <span class=\"px-2 py-0.5 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 text-sm mb-4 line-clamp-2 leading-relaxed\">\n 探索全球时尚潮流趋势，提供最新时装周报道和设计师专访，重新定义您的个人风格。\n </p>\n \n <div class=\"flex flex-wrap gap-1 mb-4\">\n <span class=\"text-xs font-medium px-2 py-1 rounded-full bg-purple-100/80 text-purple-800\">时装周</span>\n <span class=\"text-xs font-medium px-2 py-1 rounded-full bg-purple-100/80 text-purple-800\">设计师</span>\n </div>\n \n <div class=\"flex justify-between items-center mt-auto\">\n <div>\n <span class=\"text-base font-bold text-gray-900\">¥98</span>\n <span class=\"text-gray-500 text-xs line-through ml-1\">¥128</span>\n </div>\n \n <button class=\"flex items-center px-3 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-medium text-sm\n hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-md hover:shadow-lg group-hover:gap-1 gap-0.5\">\n 购买\n <span class=\"inline-block transition-all duration-300 group-hover:translate-x-0.5 text-xs\">→</span>\n </button>\n </div>\n </div>\n \n <!-- 悬浮标签 -->\n <div class=\"absolute -left-1 top-6 bg-gradient-to-r from-purple-600 to-pink-500 text-white text-xs font-bold py-1 px-3 rounded-r-full shadow-md\">\n 畅销\n </div>\n </div>\n \n <!-- 科技杂志卡片 -->\n <div class=\"relative group flex flex-col rounded-3xl bg-gradient-to-br from-blue-50/80 to-cyan-50/80 shadow-xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 overflow-hidden\">\n <!-- 封面图片 -->\n <div class=\"relative w-full h-[300px] 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-12 h-12 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-xs\">AI</span>\n </div>\n </div>\n \n <!-- 内容区域 -->\n <div class=\"p-6 relative z-20 flex-grow\">\n <div class=\"flex justify-between items-start mb-3\">\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 tracking-tight\">科技前沿</h3>\n <p class=\"text-gray-600 text-xs mt-1\">2024年1月刊</p>\n </div>\n <span class=\"px-2 py-0.5 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 text-sm mb-4 line-clamp-2 leading-relaxed\">\n 深入解析人工智能、量子计算等尖端技术，专访行业领袖，预测未来十年科技发展趋势。\n </p>\n \n <div class=\"flex items-center mb-4\">\n <div class=\"flex text-yellow-400\">\n <svg class=\"w-3 h-3 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-3 h-3 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-3 h-3 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-3 h-3 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-3 h-3 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-xs ml-1\">4.9 (128)</span>\n </div>\n \n <div class=\"flex justify-between items-center mt-auto\">\n <div>\n <span class=\"text-base font-bold text-gray-900\">¥108</span>\n </div>\n \n <button class=\"flex items-center px-3 py-2 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg font-medium text-sm\n hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 shadow-md hover:shadow-lg group-hover:gap-1 gap-0.5\">\n 订阅\n <span class=\"inline-block transition-all duration-300 group-hover:translate-x-0.5 text-xs\">→</span>\n </button>\n </div>\n </div>\n \n <!-- 悬浮标签 -->\n <div class=\"absolute -left-1 top-6 bg-gradient-to-r from-blue-600 to-cyan-500 text-white text-xs font-bold py-1 px-3 rounded-r-full shadow-md\">\n 特刊\n </div>\n </div>\n \n <!-- 生活杂志卡片 -->\n <div class=\"relative group flex flex-col rounded-3xl bg-gradient-to-br from-green-50/80 to-teal-50/80 shadow-xl transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 overflow-hidden\">\n <!-- 封面图片 -->\n <div class=\"relative w-full h-[300px] 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-12 h-12 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-xs\">TOP</span>\n </div>\n </div>\n \n <!-- 内容区域 -->\n <div class=\"p-6 relative z-20 flex-grow\">\n <div class=\"flex justify-between items-start mb-3\">\n <div>\n <h3 class=\"text-xl font-bold text-gray-900 tracking-tight\">品质生活</h3>\n <p class=\"text-gray-600 text-xs mt-1\">2023年11月刊</p>\n </div>\n <span class=\"px-2 py-0.5 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 text-sm mb-4 line-clamp-2 leading-relaxed\">\n 探索健康饮食、家居美学和慢生活理念，提供实用指南帮助您提升日常生活品质和幸福感。\n </p>\n \n <div class=\"flex flex-wrap gap-1 mb-4\">\n <span class=\"text-xs font-medium px-2 py-1 rounded-full bg-green-100/80 text-green-800\">健康</span>\n <span class=\"text-xs font-medium px-2 py-1 rounded-full bg-green-100/80 text-green-800\">家居</span>\n <span class=\"text-xs font-medium px-2 py-1 rounded-full bg-green-100/80 text-green-800\">旅行</span>\n </div>\n \n <div class=\"flex justify-between items-center mt-auto\">\n <div>\n <span class=\"text-base font-bold text-gray-900\">¥88</span>\n </div>\n \n <button class=\"flex items-center px-3 py-2 bg-gradient-to-r from-green-600 to-teal-600 text-white rounded-lg font-medium text-sm\n hover:from-green-700 hover:to-teal-700 transition-all duration-300 shadow-md hover:shadow-lg group-hover:gap-1 gap-0.5\">\n 购物车\n <span class=\"inline-block transition-all duration-300 group-hover:translate-x-0.5 text-xs\">→</span>\n </button>\n </div>\n </div>\n \n <!-- 悬浮标签 -->\n <div class=\"absolute -left-1 top-6 bg-gradient-to-r from-green-600 to-teal-500 text-white text-xs font-bold py-1 px-3 rounded-r-full shadow-md\">\n 优惠\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加加载更多",
"实现分类筛选",
"增加排序功能",
"优化卡片间距",
"添加收藏按钮"
]
}
```