```json

```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<style lang=\"scss\">\n.about-iia {\n @apply flex flex-col gap-6 bg-white px-4 md:px-8;\n \n &__header {\n @apply flex flex-col;\n \n h1 {\n @apply text-3xl font-bold leading-10 text-gray-900;\n }\n }\n \n &__nav-container {\n @apply relative pt-2;\n \n .desktop-nav {\n @apply hidden sm:flex flex-row items-center gap-8 overflow-x-auto;\n \n a {\n @apply text-base pb-1 transition-colors duration-200;\n \n &.active {\n @apply font-semibold text-blue-600 border-b-3 border-solid border-blue-600;\n }\n \n &:not(.active) {\n @apply font-normal text-gray-900;\n \n &:hover, &:focus {\n @apply text-blue-600 font-semibold;\n }\n \n &:focus {\n @apply outline-none underline;\n }\n }\n }\n }\n \n .mobile-nav {\n @apply sm:hidden;\n \n &__toggle {\n @apply hidden;\n }\n \n &__label {\n @apply flex items-center justify-between w-full py-2 px-3 border border-solid border-gray-300 rounded-lg cursor-pointer;\n }\n \n &__menu {\n @apply mt-1 hidden flex-col gap-2 border border-solid border-gray-300 rounded-lg p-2 bg-white shadow-sm;\n \n a {\n @apply text-base font-normal text-gray-900 rounded px-3 py-2;\n \n &:hover {\n @apply bg-gray-100;\n }\n \n &.active {\n @apply font-semibold text-blue-600 bg-blue-50;\n }\n }\n }\n }\n }\n \n &__divider {\n @apply h-px w-full bg-gray-300;\n }\n}\n</style>\n\n<div class=\"about-iia\">\n <div class=\"about-iia__header\">\n <h1>关于IIA</h1>\n </div>\n \n <div class=\"about-iia__nav-container\">\n <div class=\"desktop-nav\">\n <a href=\"#\" class=\"active\">关于IIA</a>\n <a href=\"#\">院长寄语</a>\n <a href=\"#\">组织架构</a>\n <a href=\"#\">人才团队</a>\n <a href=\"#\">服务对象</a>\n <a href=\"#\">教育</a>\n <a href=\"#\">基金</a>\n </div>\n \n <div class=\"mobile-nav\">\n <input type=\"checkbox\" id=\"about-iia-menu-toggle\" class=\"mobile-nav__toggle\">\n <label for=\"about-iia-menu-toggle\" class=\"mobile-nav__label\">\n <span>导航菜单</span>\n <svg class=\"mobile-nav-icon w-5 h-5 text-gray-500\" 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=\"M19 9l-7 7-7-7\"></path>\n </svg>\n </label>\n <div class=\"mobile-nav__menu\">\n <a href=\"#\" class=\"active\">关于IIA</a>\n <a href=\"#\">院长寄语</a>\n <a href=\"#\">组织架构</a>\n <a href=\"#\">人才团队</a>\n <a href=\"#\">服务对象</a>\n <a href=\"#\">教育</a>\n <a href=\"#\">基金</a>\n </div>\n </div>\n </div>\n \n <div class=\"about-iia__divider\"></div>\n</div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n const toggle = document.getElementById('about-iia-menu-toggle');\n const menu = document.querySelector('.mobile-nav__menu');\n const icon = document.querySelector('.mobile-nav-icon');\n \n if (toggle && menu && icon) {\n toggle.addEventListener('change', function() {\n if (this.checked) {\n menu.classList.remove('hidden');\n icon.classList.add('rotate-180');\n } else {\n menu.classList.add('hidden');\n icon.classList.remove('rotate-180');\n }\n });\n \n // 点击菜单外区域关闭菜单\n document.addEventListener('click', function(e) {\n if (toggle.checked && !e.target.closest('.mobile-nav')) {\n toggle.checked = false;\n menu.classList.add('hidden');\n icon.classList.remove('rotate-180');\n }\n });\n }\n});\n</script>"
},
"next": [
"添加平滑动画",
"优化响应式间距",
"添加路由功能",
"增加焦点样式",
"添加滚动效果"
],
"summary": "已完成组件重构：1) 使用SCSS的@apply语法优化了Tailwind样式结构 2) 添加了移动端菜单切换的JS交互逻辑 3) 改进了CSS层级组织。下一步可考虑添加动画效果或集成路由功能。"
}
```