U
加载中...
正在为您加载UniMAP@KL招生项目信息，请稍候
正在加载70%
正在准备最佳留学方案...
免语言直录
2025年入学免雅思，无需语言成绩
费用透明
学费生活费详细说明，无隐藏收费
国企就业兜底
提供国企就业服务，解决家长焦虑
如果加载时间过长，请检查网络连接或联系技术支持
正在为您加载UniMAP@KL招生项目信息，请稍候
如果加载时间过长，请检查网络连接或联系技术支持
统一的设计规范和组件库，确保网站设计的一致性和专业性。
#0284c7Tailwind: primary-600#0369a1Tailwind: primary-700#eab308Tailwind: secondary-500#d946efTailwind: accent-500#0f172aTailwind: dark-bg#1e293bTailwind: dark-surfaceInter, system-ui, sans-serifTailwind: font-sansMontserrat, Inter, system-ui, sans-serifTailwind: font-displayNoto Sans SC, Inter, system-ui, sans-serifTailwind: font-chinese1remTailwind: spacing-42remTailwind: spacing-84remTailwind: spacing-160 8px 30px rgba(0, 0, 0, 0.08)Tailwind: shadow-card0 10px 15px -3px rgb(0 0 0 / 0.1)Tailwind: shadow-elevation-30.5remTailwind: rounded-lg0.75remTailwind: rounded-xl主要操作按钮，用于最重要的用户操作
<button className="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">主要按钮</button>次要操作按钮，用于辅助操作
<button className="px-6 py-3 bg-secondary-500 text-white rounded-lg hover:bg-secondary-600 transition-colors">次要按钮</button>轮廓按钮，用于次要或取消操作
<button className="px-6 py-3 border-2 border-primary-600 text-primary-600 rounded-lg hover:bg-primary-50 transition-colors">轮廓按钮</button>幽灵按钮，用于文本链接样式
<button className="px-6 py-3 text-primary-600 hover:text-primary-700 hover:bg-primary-50 rounded-lg transition-colors">幽灵按钮</button>基础信息展示卡片
卡片内容描述，用于展示信息或功能。
<div className="bg-white rounded-xl shadow-card p-6">
<h3 className="text-lg font-semibold mb-2">卡片标题</h3>
<p className="text-gray-600">卡片内容描述...</p>
</div>包含图片的卡片
包含图片或渐变背景的卡片，适合展示特色内容。
<div className="bg-white rounded-xl shadow-card overflow-hidden">
<div className="h-48 bg-gradient-academic"></div>
<div className="p-6">
<h3 className="text-lg font-semibold mb-2">带图卡片</h3>
<p className="text-gray-600">包含图片或渐变背景的卡片。</p>
</div>
</div>支持悬停效果的卡片
悬停时有阴影变化效果，适合可点击的卡片。
<div className="bg-white rounded-xl shadow-card p-6 hover:shadow-card-hover transition-shadow cursor-pointer">
<h3 className="text-lg font-semibold mb-2">交互卡片</h3>
<p className="text-gray-600">悬停时有阴影变化效果。</p>
</div>操作成功时的提示信息
操作成功
您的操作已成功完成。
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
<div className="flex items-center">
<CheckCircle className="h-5 w-5 text-green-600 mr-3" />
<div>
<p className="font-medium text-green-800">操作成功</p>
<p className="text-sm text-green-700 mt-1">您的操作已成功完成。</p>
</div>
</div>
</div>需要注意的警告信息
注意
请检查您的输入信息。
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<div className="flex items-center">
<AlertCircle className="h-5 w-5 text-yellow-600 mr-3" />
<div>
<p className="font-medium text-yellow-800">注意</p>
<p className="text-sm text-yellow-700 mt-1">请检查您的输入信息。</p>
</div>
</div>
</div>操作失败时的错误信息
发生错误
操作失败，请重试。
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
<div className="flex items-center">
<XCircle className="h-5 w-5 text-red-600 mr-3" />
<div>
<p className="font-medium text-red-800">发生错误</p>
<p className="text-sm text-red-700 mt-1">操作失败，请重试。</p>
</div>
</div>
</div>一般性信息提示
提示信息
这是一条信息提示。
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div className="flex items-center">
<Info className="h-5 w-5 text-blue-600 mr-3" />
<div>
<p className="font-medium text-blue-800">提示信息</p>
<p className="text-sm text-blue-700 mt-1">这是一条信息提示。</p>
</div>
</div>
</div>