fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

faet: 存一版本，首页样式处理好了。

Browse Source
This commit is contained in:
许永平
2025-07-04 16:32:07 +08:00
parent 7e0d9210a9
commit aba02e0835
3 changed files with 142 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
nkebao/src/index.css
View File

@@ -2,6 +2,10 @@
@tailwind components;
@tailwind utilities;
html {
font-size: 16px; /* 基础字体大小，1rem = 16px */
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -9,9 +13,25 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1rem; /* 16px */
line-height: 1.5;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
html {
font-size: 16px; /* 移动端保持16px基础字体大小 */
}
}
/* 小屏幕设备适配 */
@media screen and (max-width: 375px) {
html {
font-size: 14px; /* 小屏幕设备稍微减小字体 */
}
}

141
nkebao/src/pages/Home.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Bell, Smartphone, Users, Activity } from 'lucide-react';
import Chart from 'chart.js/auto';
// 模拟数据
const stats = {
@@ -54,78 +55,86 @@ export default function Home() {
};
useEffect(() => {
if (chartRef.current) {
// 如果已经有图表实例，先销毁它
if (chartInstance.current) {
chartInstance.current.destroy();
}
if (!chartRef.current) return;
const ctx = chartRef.current.getContext('2d');
if (ctx) {
// 动态导入Chart.js
import('chart.js/auto').then(({ Chart }) => {
// 创建新的图表实例
chartInstance.current = new Chart(ctx, {
type: 'line',
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [
{
label: '获客数量',
data: [12, 19, 15, 25, 22, 30, 28],
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 2,
tension: 0.3,
pointRadius: 4,
pointBackgroundColor: 'rgba(59, 130, 246, 1)',
pointHoverRadius: 6,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: '#333',
bodyColor: '#666',
borderColor: '#ddd',
borderWidth: 1,
padding: 10,
displayColors: false,
callbacks: {
label: (context: any) => `获客数量: ${context.parsed.y}`,
},
},
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)',
},
},
},
},
});
});
}
// 销毁旧实例
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
// 组件卸载时清理图表实例
const ctx = chartRef.current.getContext('2d');
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: 'line',
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [
{
label: '获客数量',
data: [12, 19, 15, 25, 22, 30, 28],
backgroundColor: 'rgba(59, 130, 246, 0.2)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 2,
tension: 0.3,
pointRadius: 4,
pointBackgroundColor: 'rgba(59, 130, 246, 1)',
pointHoverRadius: 6,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: '#333',
bodyColor: '#666',
borderColor: '#ddd',
borderWidth: 1,
padding: 10,
displayColors: false,
callbacks: {
label: (context: any) => `获客数量: ${context.parsed.y}`,
},
},
},
scales: {
x: {
grid: {
display: false,
},
ticks: {
font: {
size: 12, // 0.75rem
},
},
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)',
},
ticks: {
font: {
size: 12, // 0.75rem
},
},
},
},
},
});
}
// 卸载时销毁
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, []);

48
nkebao/tailwind.config.js
View File

@@ -4,7 +4,53 @@ module.exports = {
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
extend: {
fontSize: {
'xs': ['0.75rem', { lineHeight: '1rem' }],
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
'base': ['1rem', { lineHeight: '1.5rem' }],
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
},
spacing: {
'0.5': '0.125rem',
'1': '0.25rem',
'1.5': '0.375rem',
'2': '0.5rem',
'2.5': '0.625rem',
'3': '0.75rem',
'3.5': '0.875rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'9': '2.25rem',
'10': '2.5rem',
'11': '2.75rem',
'12': '3rem',
'14': '3.5rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'28': '7rem',
'32': '8rem',
'36': '9rem',
'40': '10rem',
'44': '11rem',
'48': '12rem',
'52': '13rem',
'56': '14rem',
'60': '15rem',
'64': '16rem',
'72': '18rem',
'80': '20rem',
'96': '24rem',
},
},
},
plugins: [],
}