lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

账户总览页优化手机端适配问题

Browse Source
This commit is contained in:
Eamon-meng
2025-06-10 12:51:35 +08:00
parent 0f34b938e5
commit 87d638c3fe
3 changed files with 79 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/admin/(dashboard)/page.tsx
View File

@@ -30,16 +30,17 @@ export default async function DashboardPage(props: DashboardPageProps) {
return (
<Page className={merge(
`flex-auto grid`,
`grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
`grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`,
`grid-cols-1`,
`md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
`md:grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`,
)}
>
{/* banner */}
<section className="col-start-1 row-start-1 col-span-3 relative rounded-lg overflow-hidden">
<Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute object-cover"/>
<section className="md:row-start-1 md:col-start-1 md:col-span-3 relative md:rounded-lg overflow-hidden hidden md:block">
<Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute "/>
<div className="flex flex-col absolute inset-0 justify-center px-8 gap-1">
<h3 className="text-2xl text-primary font-medium">代理IP资源，先测后买</h3>
<p className="text-primary font-medium">短效/长效/固定IP代理，一站式服务</p>
<h3 className="text-2xl text-balance text-primary font-medium">代理IP资源，先测后买</h3>
<p className="text-primary text-balance font-medium">短效/长效/固定IP代理，一站式服务</p>
</div>
</section>
@@ -54,15 +55,19 @@ export default async function DashboardPage(props: DashboardPageProps) {
)}
{/* 图表 */}
<Charts/>
<div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts/></div>
{/* 信息 */}
<UserCenter/>
<div className=" md:col-start-4 md:row-start-1 md:row-span-2">
<UserCenter/>
</div>
{/* 通知 */}
{initData && (
<Announcements list={initData.list}/>
)}
<div className="md:col-start-4 md:row-start-3 md:row-span-2">
{initData && (
<Announcements list={initData.list}/>
)}
</div>
</Page>
)
@@ -75,14 +80,12 @@ type DashboardChartProps = {
}
function Pins(props: DashboardChartProps) {
return (
<>
<div className="flex md:row-start-2 md:col-start-1 md:col-span-3 gap-4">
{/* 短效 */}
<Card className="col-start-1 row-start-2 py-4">
<Card className="flex-1">
<CardHeader>
<CardTitle>
<Image src={mask} alt="Mask group" width={35} height={35} priority/>
{' '}
<Image src={mask} alt="Mask group" priority/>
短效动态套餐
</CardTitle>
</CardHeader>
@@ -91,52 +94,49 @@ function Pins(props: DashboardChartProps) {
<h4>包时</h4>
<p className="flex flex-col items-end">
<span className="text-sm text-weak">当日可提取数量</span>
<span className="text-lg">{props.short_term ? props.short_term : '1'}</span>
<span className="text-sm">{props.short_term ? props.short_term : '1'}</span>
</p>
</div>
<div className="border-b"></div>
<div className="flex-1 flex items-center justify-between">
<h4>包量</h4>
<h4 className="text-balance">包量</h4>
<p className="flex flex-col items-end">
<span className="text-sm text-weak">剩余可提取数量</span>
<span className="text-lg">{props.short_term_monthly}</span>
<span className="text-sm">{props.short_term_monthly}</span>
</p>
</div>
</CardContent>
</Card>
{/* 长效 */}
<Card className="col-start-2 row-start-2">
<Card className="flex-1">
<CardHeader>
<CardTitle>
<Image src={mask} alt="Mask group" width={35} height={35} priority/>
{' '}
<Image src={mask} alt="Mask group" priority/>
长效动态套餐
</CardTitle>
</CardHeader>
<CardContent className="flex-auto flex flex-col gap-2">
{/* <Image alt={`coming soon`} src={soon} />
<p>敬请期待</p> */}
<div className="flex-1 flex items-center justify-between">
<h4>包时</h4>
<h4 className="text-balance">包时</h4>
<p className="flex flex-col items-end">
<span className="text-sm text-weak">当日可提取数量</span>
<span className="text-lg">{props.long_term}</span>
<span className="text-sm text-weak" >当日可提取数量</span>
<span className="text-sm">{props.long_term}</span>
</p>
</div>
<div className="border-b"></div>
<div className="flex-1 flex items-center justify-between">
<h4>包量</h4>
<h4 className="text-balance">包量</h4>
<p className="flex flex-col items-end">
<span className="text-sm text-weak">剩余可提取数量</span>
<span className="text-lg">{props.long_term_monthly}</span>
<span className="text-sm text-weak">剩余可提取数量</span>
<span className="text-sm">{props.long_term_monthly}</span>
</p>
</div>
</CardContent>
</Card>
{/* 固定 */}
<Card className="col-start-3 row-start-2 py-4">
<Card className="flex-1 py-4 h-full hidden xl:block ">
<CardHeader className="px-4">
<CardTitle>固定IP套餐</CardTitle>
</CardHeader>
@@ -145,7 +145,8 @@ function Pins(props: DashboardChartProps) {
<p>敬请期待</p>
</CardContent>
</Card>
</>
</div>
)
}
@@ -158,17 +159,17 @@ type Props = {
}
function Announcements(props: Props) {
return (
<Card className="col-start-4 row-start-3 row-span-2">
<Card className="h-full">
<CardHeader>
<div className="flex justify-between gap-2">
<CardTitle>公告</CardTitle>
<span className="text-sm text-weak">查看更多</span>
<span className="text-sm text-primary font-medium">查看更多</span>
</div>
</CardHeader>
<CardContent className="flex-auto p-0">
{!props.list.length
? (
<div className="flex flex-col items-center justify-center gap-2 h-full">
<div className="flex flex-col items-center justify-center gap-8 ">
<Image alt="coming soon" src={soon}/>
<p>暂无公告</p>
</div>