56 lines
2.2 KiB
JavaScript
56 lines
2.2 KiB
JavaScript
// 測試創意測試結果頁面的響應式設計
|
|
const responsiveClasses = {
|
|
// 統計數據區域
|
|
statsGrid: "grid grid-cols-3 gap-4 mb-6",
|
|
statsText: "text-xs text-muted-foreground",
|
|
|
|
// 能力維度分析區域
|
|
categoryGrid: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6",
|
|
categoryItem: "space-y-2 md:space-y-3",
|
|
categoryTitle: "text-sm md:text-base",
|
|
categoryBadge: "text-xs",
|
|
categoryScore: "text-xs md:text-sm",
|
|
|
|
// 詳細反饋區域
|
|
feedbackCard: "p-3 md:p-4",
|
|
feedbackTitle: "text-sm md:text-base",
|
|
feedbackText: "text-xs md:text-sm",
|
|
feedbackGrid: "grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4",
|
|
|
|
// 按鈕區域
|
|
buttonContainer: "flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center",
|
|
button: "w-full sm:w-auto"
|
|
}
|
|
|
|
console.log('📱 創意測試結果頁面響應式設計測試')
|
|
console.log('=' .repeat(60))
|
|
|
|
console.log('\n📊 統計數據區域:')
|
|
console.log(`網格佈局: ${responsiveClasses.statsGrid}`)
|
|
console.log(`標籤文字: ${responsiveClasses.statsText}`)
|
|
|
|
console.log('\n📋 能力維度分析區域:')
|
|
console.log(`網格佈局: ${responsiveClasses.categoryGrid}`)
|
|
console.log(`項目間距: ${responsiveClasses.categoryItem}`)
|
|
console.log(`標題大小: ${responsiveClasses.categoryTitle}`)
|
|
console.log(`徽章大小: ${responsiveClasses.categoryBadge}`)
|
|
console.log(`分數文字: ${responsiveClasses.categoryScore}`)
|
|
|
|
console.log('\n💬 詳細反饋區域:')
|
|
console.log(`卡片內邊距: ${responsiveClasses.feedbackCard}`)
|
|
console.log(`標題大小: ${responsiveClasses.feedbackTitle}`)
|
|
console.log(`文字大小: ${responsiveClasses.feedbackText}`)
|
|
console.log(`網格佈局: ${responsiveClasses.feedbackGrid}`)
|
|
|
|
console.log('\n🔘 按鈕區域:')
|
|
console.log(`按鈕容器: ${responsiveClasses.buttonContainer}`)
|
|
console.log(`按鈕樣式: ${responsiveClasses.button}`)
|
|
|
|
console.log('\n✅ 響應式設計配置完成')
|
|
console.log('\n📱 手機版特點:')
|
|
console.log('- 統計數據始終 3 欄並排顯示')
|
|
console.log('- 文字大小在手機上較小，桌面版較大')
|
|
console.log('- 能力維度分析在手機上單欄顯示，桌面版雙欄')
|
|
console.log('- 按鈕在手機上全寬顯示，桌面版自動寬度')
|
|
console.log('- 內邊距在手機上較小，桌面版較大')
|