```json
{
"summary": "已将TailwindCSS类提取到SCSS中，使用@

```json
{
"summary": "已将TailwindCSS类提取到SCSS中，使用@apply语法按组件层级组织，并替换了图片资源链接",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"parking-calculator\">\n <h1 class=\"title\">停车场费用模拟</h1>\n <div class=\"calculator-container\">\n <div class=\"input-section\">\n <div class=\"form-group\">\n <h2 class=\"section-title\">\n <span class=\"step-indicator\"></span>\n 使用期间和时间\n </h2>\n <div class=\"form-content\">\n <div class=\"input-group\">\n <label>入库</label>\n <div class=\"input-grid\">\n <input type=\"date\" id=\"entry-date\">\n <input type=\"time\" id=\"entry-time\">\n </div>\n </div>\n <div class=\"input-group\">\n <label>出库</label>\n <div class=\"input-grid\">\n <input type=\"date\" id=\"exit-date\">\n <input type=\"time\" id=\"exit-time\">\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"form-group\">\n <h2 class=\"section-title\">\n <span class=\"step-indicator\"></span>\n ご利用駐車場\n </h2>\n <div class=\"checkbox-group\">\n <label><input type=\"checkbox\" name=\"parking-lot\" value=\"p1p2\"><span>P1・P2</span></label>\n <label><input type=\"checkbox\" name=\"parking-lot\" value=\"p3p4\"><span>P3・P4</span></label>\n <label><input type=\"checkbox\" name=\"parking-lot\" value=\"p5\"><span>P5</span></label>\n </div>\n </div>\n\n <div class=\"form-group\">\n <h2 class=\"section-title\">\n <span class=\"step-indicator\"></span>\n 车型\n </h2>\n <div class=\"radio-group\">\n <label><input type=\"radio\" name=\"vehicle\" value=\"car\" checked><span>普通车</span></label>\n <label><input type=\"radio\" name=\"vehicle\" value=\"motorcycle\"><span>二轮车</span></label>\n </div>\n </div>\n\n <div class=\"form-group\">\n <h2 class=\"section-title\">\n <span class=\"step-indicator\"></span>\n 各种折扣\n </h2>\n <div class=\"checkbox-list\">\n <label><input type=\"checkbox\" id=\"disability-discount\"><span>残障人士折扣</span></label>\n <label><input type=\"checkbox\" id=\"park-and-fly\"><span>停车及飞行</span></label>\n <label><input type=\"checkbox\" id=\"kix-itm-card\"><span>KIX-ITM卡折扣</span></label>\n </div>\n </div>\n\n <div class=\"form-group\">\n <h2 class=\"section-title\">\n <span class=\"step-indicator\"></span>\n 计费选项\n </h2>\n <div class=\"checkbox-single\">\n <label><input type=\"checkbox\" id=\"reservation\"><span>停车场预约 (预约费: 520日元)</span></label>\n </div>\n </div>\n </div>\n\n <div class=\"result-section\">\n <div class=\"result-content\">\n <div class=\"result-item\">\n <p class=\"result-label\">合计停车时间</p>\n <p id=\"total-time\" class=\"result-value\">- 小时 - 分钟</p>\n </div>\n <div class=\"result-item\">\n <p class=\"result-label\">合计停车费用</p>\n <p id=\"total-fee\" class=\"result-value\">-- 円</p>\n </div>\n <div id=\"error-message\" class=\"error-message\"></div>\n </div>\n <button id=\"calculate-btn\" class=\"calculate-button\">计算 ⟩</button>\n </div>\n </div>\n</div>\n\n<style lang=\"scss\">\n.parking-calculator {\n @apply w-full max-w-4xl;\n\n .title {\n @apply text-3xl font-bold text-center mb-8 text-gray-800;\n }\n\n .calculator-container {\n @apply bg-white rounded-2xl shadow-lg p-6 md:p-8 grid md:grid-cols-2 gap-8;\n }\n\n .input-section {\n @apply space-y-6;\n\n .form-group {\n .section-title {\n @apply text-lg font-semibold text-gray-700 mb-3 flex items-center;\n\n .step-indicator {\n @apply mr-2 inline-flex items-center justify-center w-5 h-5 border-2 border-blue-600 rounded-full;\n }\n }\n\n .form-content {\n @apply pl-7 space-y-3;\n\n .input-group {\n label {\n @apply text-sm font-medium text-gray-600;\n }\n\n .input-grid {\n @apply grid grid-cols-2 gap-2 mt-1;\n\n input {\n @apply bg-gray-100 rounded-md border-gray-200 p-2 w-full focus:ring-blue-500 focus:border-blue-500;\n }\n }\n }\n }\n\n .checkbox-group {\n @apply pl-7 flex space-x-4 items-center;\n\n label {\n @apply flex items-center space-x-2;\n\n input {\n @apply rounded text-blue-600 focus:ring-blue-500;\n }\n }\n }\n\n .radio-group {\n @apply pl-7 flex space-x-4 items-center;\n\n label {\n @apply flex items-center space-x-2;\n\n input {\n @apply text-blue-600 focus:ring-blue-500;\n }\n }\n }\n\n .checkbox-list {\n @apply pl-7 flex flex-col space-y-2;\n\n label {\n @apply flex items-center space-x-2;\n\n input {\n @apply rounded text-blue-600 focus:ring-blue-500;\n }\n }\n }\n\n .checkbox-single {\n @apply pl-7 flex items-center;\n\n label {\n @apply flex items-center space-x-2;\n\n input {\n @apply rounded text-blue-600 focus:ring-blue-500;\n }\n }\n }\n }\n }\n\n .result-section {\n @apply bg-slate-800 text-white rounded-2xl p-8 flex flex-col;\n\n .result-content {\n @apply flex-grow space-y-6;\n\n .result-item {\n .result-label {\n @apply text-sm text-slate-300;\n }\n\n .result-value {\n @apply text-2xl md:text-3xl font-bold;\n }\n }\n\n .error-message {\n @apply text-red-400 text-sm mt-2;\n }\n }\n\n .calculate-button {\n @apply w-full bg-cyan-400 hover:bg-cyan-500 text-slate-900 font-bold py-3 px-4 rounded-lg transition-colors duration-300 text-lg;\n }\n }\n}\n</style>"
},
"next": ["添加表单验证逻辑", "实现费用计算功能", "添加响应式断点优化", "增加动画过渡效果", "优化无障碍访问"]
}
```