vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
William Tso
2025-03-25 22:24:52 +08:00
parent e0ac87fb25
commit 1755b44a39
5 changed files with 29 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/analytics/devices/page.tsx
View File

@@ -69,16 +69,16 @@ export default function DeviceAnalyticsPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
{/* 设备类型 */}
<div className="bg-card-bg rounded-xl p-6">
<h3 className="text-lg font-medium text-foreground mb-4">Device Types</h3>
<h3 className="text-lg font-medium text-white mb-4">Device Types</h3>
{deviceData?.deviceTypes.map(item => (
<div key={item.type} className="mb-4 last:mb-0">
<div className="flex justify-between items-center mb-1">
<span className="text-sm text-foreground">{item.type}</span>
<span className="text-sm text-text-secondary">{item.count} ({item.percentage.toFixed(1)}%)</span>
<span className="text-sm text-white">{item.type}</span>
<span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
</div>
<div className="w-full bg-background rounded-full h-2">
<div
className="bg-accent-blue h-2 rounded-full"
className="bg-blue-500 h-2 rounded-full"
style={{ width: `${item.percentage}%` }}
/>
</div>
@@ -88,16 +88,16 @@ export default function DeviceAnalyticsPage() {
{/* 浏览器 */}
<div className="bg-card-bg rounded-xl p-6">
<h3 className="text-lg font-medium text-foreground mb-4">Browsers</h3>
<h3 className="text-lg font-medium text-white mb-4">Browsers</h3>
{deviceData?.browsers.map(item => (
<div key={item.name} className="mb-4 last:mb-0">
<div className="flex justify-between items-center mb-1">
<span className="text-sm text-foreground">{item.name}</span>
<span className="text-sm text-text-secondary">{item.count} ({item.percentage.toFixed(1)}%)</span>
<span className="text-sm text-white">{item.name}</span>
<span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
</div>
<div className="w-full bg-background rounded-full h-2">
<div
className="bg-accent-green h-2 rounded-full"
className="bg-green-500 h-2 rounded-full"
style={{ width: `${item.percentage}%` }}
/>
</div>
@@ -107,16 +107,16 @@ export default function DeviceAnalyticsPage() {
{/* 操作系统 */}
<div className="bg-card-bg rounded-xl p-6">
<h3 className="text-lg font-medium text-foreground mb-4">Operating Systems</h3>
<h3 className="text-lg font-medium text-white mb-4">Operating Systems</h3>
{deviceData?.operatingSystems.map(item => (
<div key={item.name} className="mb-4 last:mb-0">
<div className="flex justify-between items-center mb-1">
<span className="text-sm text-foreground">{item.name}</span>
<span className="text-sm text-text-secondary">{item.count} ({item.percentage.toFixed(1)}%)</span>
<span className="text-sm text-white">{item.name}</span>
<span className="text-sm text-white">{item.count} ({item.percentage.toFixed(1)}%)</span>
</div>
<div className="w-full bg-background rounded-full h-2">
<div
className="bg-accent-red h-2 rounded-full"
className="bg-red-500 h-2 rounded-full"
style={{ width: `${item.percentage}%` }}
/>
</div>