根据要求,我将创建一个现代化、响应式的卡片组件。这个卡片将包含标题、描述、图片和操作按钮,并适配不同屏幕尺寸。
```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"relative bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg max-w-md mx-auto\">\n <div class=\"relative aspect-video overflow-hidden\">\n <img src=\"/assets/images/showcase/1.jpg\" alt=\"卡片图片\" class=\"w-full h-full object-cover transition-transform duration-500 hover:scale-105\">\n <div class=\"absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium\">\n 热门\n </div>\n </div>\n \n <div class=\"p-6\">\n <div class=\"flex items-center justify-between mb-3\">\n <h3 class=\"text-xl font-bold text-gray-900\">产品标题</h3>\n <span class=\"text-lg font-semibold text-blue-600\">¥99.99</span>\n </div>\n \n <p class=\"text-gray-600 mb-4 line-clamp-3\">\n 这是一个产品描述的示例文本,展示卡片组件的内容区域。这段文字会被限制在三行以内显示。\n </p>\n \n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-8 h-8 rounded-full overflow-hidden border-2 border-white shadow\">\n <img src=\"/assets/images/avatar/01.jpeg\" alt=\"用户头像\" class=\"w-full h-full object-cover\">\n </div>\n <span class=\"text-sm text-gray-500\">张经理</span>\n </div>\n \n <button class=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 focus:outline-none transition-colors duration-300\">\n 立即购买\n </button>\n </div>\n </div>\n \n <div class=\"px-6 py-3 bg-gray-50 border-t border-gray-100 text-sm text-gray-500 flex items-center justify-between\">\n <span>3小时前更新</span>\n <div class=\"flex items-center space-x-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-red-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"/>\n </svg>\n <span>256</span>\n </div>\n </div>\n</div>"
},
"next": [
"添加评分组件",
"添加标签分类",
"添加倒计时",
"添加分享功能",
"添加收藏按钮"
],
"summary": "已创建响应式卡片组件,包含标题、图片、价格、描述和操作按钮。卡片在不同屏幕尺寸下自动适配,并添加了悬停效果增强交互体验。接下来可以根据需求添加更多功能模块。"
}
```