```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 <div class=\"md:w-1/2\">\n <div class=\"relative h-full rounded-xl overflow-hidden\">\n <img src=\"/assets/images/16-9/business-01.jpg\" alt=\"校园活动\" class=\"w-full h-full object-cover\">\n <div class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-gray-900 via-gray-900/70 to-transparent p-6 pt-20\">\n <h3 class=\"text-2xl font-bold text-white mb-2\">校园主题活动</h3>\n <p class=\"text-gray-300 mb-4 line-clamp-2\">参与我们每月举办的校园主题活动，体验丰富多彩的大学生活...</p>\n <a href=\"#\" class=\"inline-flex items-center text-blue-400 hover:text-blue-300 font-medium\">\n 了解更多\n <svg class=\"w-4 h-4 ml-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n </svg>\n </a>\n </div>\n </div>\n </div>\n \n <div class=\"md:w-1/2\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"bg-white rounded-xl overflow-hidden shadow-md\">\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-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">社团招新</h3>\n <p class=\"text-gray-600 mb-4 line-clamp-3\">新学期社团招新活动火热进行中，加入你感兴趣的社团，结识志同道合的朋友...</p>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 font-medium\">查看详情</a>\n </div>\n </div>\n \n <div class=\"bg-white rounded-xl overflow-hidden shadow-md\">\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-6\">\n <h3 class=\"text-lg font-bold text-gray-900 mb-2\">学术讲座</h3>\n <p class=\"text-gray-600 mb-4 line-clamp-3\">本周将举办多场学术讲座，邀请知名学者分享前沿研究成果，欢迎同学们踊跃参加...</p>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 font-medium\">查看详情</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加悬停动画",
"优化移动布局",
"添加加载效果",
"增加阴影效果",
"调整间距比例"
]
}
```