```json
{
"summary

```json
{
"summary": "我将为您创建一个校园生活页面的section，采用左右布局设计。左侧是一个带有图片背景的渐变卡片，右侧是两个水平排列的卡片。所有卡片都包含标题、内容摘要和阅读更多链接。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"container mx-auto px-4 py-12\">\n <div class=\"flex flex-col md:flex-row gap-8\">\n <!-- 左侧卡片 -->\n <div class=\"md:w-1/2\">\n <div class=\"relative h-full rounded-xl overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent z-10\"></div>\n <img src=\"/assets/images/16-9/business-01.jpg\" alt=\"校园活动\" class=\"w-full h-full object-cover\">\n <div class=\"absolute bottom-0 left-0 z-20 p-6 w-full\">\n <h3 class=\"text-2xl font-bold text-white mb-2\">校园最新活动</h3>\n <p class=\"text-gray-200 mb-4\">探索校园内丰富多彩的活动和社团，发现你的兴趣所在...</p>\n <a href=\"#\" class=\"inline-block px-4 py-2 bg-white text-gray-800 rounded-md font-medium hover:bg-gray-100 transition\">阅读更多</a>\n </div>\n </div>\n </div>\n \n <!-- 右侧两个卡片 -->\n <div class=\"md:w-1/2 flex flex-col gap-6\">\n <div class=\"flex flex-col md:flex-row gap-6\">\n <!-- 右侧卡片1 -->\n <div class=\"md:w-1/2 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition\">\n <div class=\"aspect-w-4 aspect-h-3\">\n <img src=\"/assets/images/showcase/1.jpg\" alt=\"学术讲座\" class=\"w-full h-full object-cover\">\n </div>\n <div class=\"p-4\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">学术讲座系列</h3>\n <p class=\"text-gray-600 line-clamp-3 mb-4\">每周邀请知名学者进行专题讲座，拓展你的学术视野...</p>\n <a href=\"#\" class=\"text-blue-600 font-medium hover:text-blue-800 transition\">阅读更多 →</a>\n </div>\n </div>\n \n <!-- 右侧卡片2 -->\n <div class=\"md:w-1/2 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition\">\n <div class=\"aspect-w-4 aspect-h-3\">\n <img src=\"/assets/images/showcase/2.jpg\" alt=\"体育赛事\" class=\"w-full h-full object-cover\">\n </div>\n <div class=\"p-4\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-2\">校园体育赛事</h3>\n <p class=\"text-gray-600 line-clamp-3 mb-4\">参与各种体育比赛和活动，保持健康的生活方式...</p>\n <a href=\"#\" class=\"text-blue-600 font-medium hover:text-blue-800 transition\">阅读更多 →</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加悬停动画",
"调整卡片间距",
"优化渐变透明度",
"添加响应式断点",
"调整字体大小"
]
}
```