```json{
"summary": "为您创建一个现代化的校园新闻列表组件,采用响应式设计,支持移动端浏览。列表包含新闻图片、标题、摘要、发布时间和标签等元素。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"relative bg-gray-50 py-12\">\n <div class=\"container relative z-10\">\n <div class=\"mb-10 text-center\">\n <h2 class=\"text-3xl font-bold text-gray-900 md:text-4xl\">校园新闻</h2>\n <div class=\"mx-auto mt-4 h-1 w-20 bg-blue-600\"></div>\n </div>\n \n <div class=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3\">\n <!-- 新闻卡片 1 -->\n <div class=\"overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl\">\n <div class=\"h-48 overflow-hidden\">\n <img src=\"https://placehold.co/600x400\" alt=\"新闻图片\" class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\" />\n </div>\n <div class=\"p-6\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700\">学术</span>\n <span class=\"rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700\">活动</span>\n </div>\n <h3 class=\"mt-3 text-xl font-bold text-gray-900\">2024年春季学期开学典礼隆重举行</h3>\n <p class=\"mt-3 text-gray-600\">3月1日上午,我校2024年春季学期开学典礼在大礼堂隆重举行,全体师生共同迎接新学期的到来。</p>\n <div class=\"mt-4 flex items-center justify-between\">\n <span class=\"text-sm text-gray-500\">2024年3月1日</span>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 hover:underline\">阅读更多</a>\n </div>\n </div>\n </div>\n \n <!-- 新闻卡片 2 -->\n <div class=\"overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl\">\n <div class=\"h-48 overflow-hidden\">\n <img src=\"https://placehold.co/600x400\" alt=\"新闻图片\" class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\" />\n </div>\n <div class=\"p-6\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"rounded-full bg-purple-100 px-3 py-1 text-xs font-semibold text-purple-700\">科研</span>\n </div>\n <h3 class=\"mt-3 text-xl font-bold text-gray-900\">我校科研团队在人工智能领域取得重大突破</h3>\n <p class=\"mt-3 text-gray-600\">近日,我校计算机学院科研团队在自然语言处理领域取得重要进展,相关成果发表于国际顶级期刊。</p>\n <div class=\"mt-4 flex items-center justify-between\">\n <span class=\"text-sm text-gray-500\">2024年2月28日</span>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 hover:underline\">阅读更多</a>\n </div>\n </div>\n </div>\n \n <!-- 新闻卡片 3 -->\n <div class=\"overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl\">\n <div class=\"h-48 overflow-hidden\">\n <img src=\"https://placehold.co/600x400\" alt=\"新闻图片\" class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\" />\n </div>\n <div class=\"p-6\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700\">体育</span>\n <span class=\"rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-700\">赛事</span>\n </div>\n <h3 class=\"mt-3 text-xl font-bold text-gray-900\">校篮球队荣获全省大学生联赛冠军</h3>\n <p class=\"mt-3 text-gray-600\">在刚刚结束的全省大学生篮球联赛中,我校篮球队经过激烈角逐,最终夺得冠军,为学校争得荣誉。</p>\n <div class=\"mt-4 flex items-center justify-between\">\n <span class=\"text-sm text-gray-500\">2024年2月25日</span>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 hover:underline\">阅读更多</a>\n </div>\n </div>\n </div>\n \n <!-- 新闻卡片 4 -->\n <div class=\"overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl\">\n <div class=\"h-48 overflow-hidden\">\n <img src=\"https://placehold.co/600x400\" alt=\"新闻图片\" class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\" />\n </div>\n <div class=\"p-6\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700\">文化</span>\n <span class=\"rounded-full bg-pink-100 px-3 py-1 text-xs font-semibold text-pink-700\">艺术</span>\n </div>\n <h3 class=\"mt-3 text-xl font-bold text-gray-900\">校园文化艺术节即将开幕</h3>\n <p class=\"mt-3 text-gray-600\">一年一度的校园文化艺术节将于4月初拉开帷幕,届时将有丰富多彩的文艺演出和展览活动。</p>\n <div class=\"mt-4 flex items-center justify-between\">\n <span class=\"text-sm text-gray-500\">2024年2月20日</span>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 hover:underline\">阅读更多</a>\n </div>\n </div>\n </div>\n \n <!-- 新闻卡片 5 -->\n <div class=\"overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl\">\n <div class=\"h-48 overflow-hidden\">\n <img src=\"https://placehold.co/600x400\" alt=\"新闻图片\" class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\" />\n </div>\n <div class=\"p-6\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"rounded-full bg-teal-100 px-3 py-1 text-xs font-semibold text-teal-700\">国际交流</span>\n </div>\n <h3 class=\"mt-3 text-xl font-bold text-gray-900\">我校与英国知名大学签署合作协议</h3>\n <p class=\"mt-3 text-gray-600\">近日,我校与英国剑桥大学正式签署学生交换项目合作协议,进一步拓展国际化办学格局。</p>\n <div class=\"mt-4 flex items-center justify-between\">\n <span class=\"text-sm text-gray-500\">2024年2月18日</span>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 hover:underline\">阅读更多</a>\n </div>\n </div>\n </div>\n \n <!-- 新闻卡片 6 -->\n <div class=\"overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl\">\n <div class=\"h-48 overflow-hidden\">\n <img src=\"https://placehold.co/600x400\" alt=\"新闻图片\" class=\"h-full w-full object-cover transition-transform duration-500 hover:scale-105\" />\n </div>\n <div class=\"p-6\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"rounded-full bg-orange-100 px-3 py-1 text-xs font-semibold text-orange-700\">校友</span>\n </div>\n <h3 class=\"mt-3 text-xl font-bold text-gray-900\">杰出校友回校分享创业经验</h3>\n <p class=\"mt-3 text-gray-600\">知名企业家、我校2010届校友张明先生回校举办创业分享会,与在校学生交流创业心得。</p>\n <div class=\"mt-4 flex items-center justify-between\">\n <span class=\"text-sm text-gray-500\">2024年2月15日</span>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 hover:underline\">阅读更多</a>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"mt-12 text-center\">\n <button class=\"rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white transition-colors duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\">\n 查看更多新闻\n </button>\n </div>\n </div>\n</div>"
},
"next": ["添加新闻分类筛选", "增加分页功能", "添加搜索框", "优化移动端显示", "增加新闻详情页"]
}
```
角色
assistant
content
total_tokens
3930