```json
{
"widget"

```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<style lang=\"scss\">\n.events-container {\n @apply px-4 md:px-8 py-8 flex flex-col gap-8;\n \n .event-card {\n @apply flex flex-col md:flex-row gap-8 pb-12 border-b border-solid border-gray-200;\n \n .event-content {\n @apply flex flex-col md:flex-row gap-6 flex-1;\n \n .date-box {\n @apply flex flex-col items-center justify-center w-36 h-36 bg-blue-800 text-white rounded;\n \n .month {\n @apply text-base font-normal;\n }\n \n .day {\n @apply text-4xl font-bold leading-none mt-1 mb-1;\n }\n \n .year {\n @apply text-base font-normal;\n }\n }\n \n .info-area {\n @apply flex-1 flex flex-col gap-2;\n \n .title-row {\n @apply flex justify-between items-start;\n \n h3 {\n @apply text-lg font-bold text-gray-900 max-w-3xl;\n }\n \n .status-btn {\n @apply md:ml-4;\n \n button {\n @apply px-4 py-2 bg-blue-800 text-white rounded font-medium text-sm whitespace-nowrap;\n \n &.ended {\n @apply bg-gray-200 text-gray-500;\n }\n }\n }\n }\n \n .divider {\n @apply w-12 h-1 bg-amber-400 mt-2 mb-2;\n }\n \n .description {\n @apply text-sm text-gray-600 leading-relaxed;\n }\n \n .meta-info {\n @apply flex flex-col md:flex-row items-start md:items-center gap-4 mt-2;\n \n .info-item {\n @apply flex items-center gap-2 text-sm text-gray-500;\n \n svg {\n @apply h-4 w-4;\n }\n }\n }\n }\n }\n \n .event-image {\n @apply flex justify-center md:justify-end;\n \n img {\n @apply w-full max-w-400 aspect-[4/3] rounded object-cover;\n }\n }\n }\n}\n</style>\n\n<div class=\"events-container\">\n <!-- 事件卡片1 -->\n <div class=\"event-card\">\n <div class=\"event-content\">\n <div class=\"date-box\">\n <div class=\"month\">四月</div>\n <div class=\"day\">22</div>\n <div class=\"year\">2025</div>\n </div>\n \n <div class=\"info-area\">\n <div class=\"title-row\">\n <h3>活动预告｜“回顾特区45年·展望深圳2035”暨《深圳2035：中国式现代化的深圳展望》新书首发式</h3>\n <div class=\"status-btn\">\n <button>未开始</button>\n </div>\n </div>\n <div class=\"divider\"></div>\n <p class=\"description\">“百川论坛”与“海纳讲座”品牌活动累计邀约嘉宾近百人，其中不乏重量级专家学者和业界先锋力量。曾有幸邀请到杨洁勉博士、刘晓明大使、潘家华教授、李扬教授、于洪君大使等专家发表主旨演讲，分享真知灼见，为中国和世界...</p>\n \n <div class=\"meta-info\">\n <div class=\"info-item\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <span>2025-04-22 12:00:00</span>\n </div>\n <div class=\"info-item\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n </svg>\n <span>中国·深圳</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"event-image\">\n <img src=\"https://placehold.co/400x300\" alt=\"活动海报\">\n </div>\n </div>\n \n <!-- 事件卡片2 -->\n <div class=\"event-card\">\n <div class=\"event-content\">\n <div class=\"date-box\">\n <div class=\"month\">三月</div>\n <div class=\"day\">15</div>\n <div class=\"year\">2025</div>\n </div>\n \n <div class=\"info-area\">\n <div class=\"title-row\">\n <h3>国际金融论坛春季会议：全球经济复苏与可持续发展</h3>\n <div class=\"status-btn\">\n <button class=\"ended\">已结束</button>\n </div>\n </div>\n <div class=\"divider\"></div>\n <p class=\"description\">汇聚全球金融领袖、政策制定者和专家学者，共同探讨后疫情时代全球经济复苏路径、绿色金融创新及可持续发展战略...</p>\n \n <div class=\"meta-info\">\n <div class=\"info-item\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <span>2025-03-15 09:30:00</span>\n </div>\n <div class=\"info-item\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n </svg>\n <span>上海国际会议中心</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"event-image\">\n <img src=\"https://placehold.co/400x300\" alt=\"活动海报\">\n </div>\n </div>\n</div>"
},
"next": [
"添加动画效果",
"优化响应式布局",
"增加卡片悬停效果",
"添加加载状态",
"优化图片加载"
],
"summary": "已将Tailwind CSS类提取到SCSS样式块中，使用@apply语法进行了层级嵌套，并优化了图片资源链接。下一步可以考虑添加交互效果和进一步优化布局。"
}
```