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 19:09:19 +08:00
parent 87621202a9
commit 7bceedb8f2
3 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -80,7 +80,7 @@ type DashboardChartProps = {
} }
function Pins(props: DashboardChartProps) { function Pins(props: DashboardChartProps) {
return ( return (
<div className="flex md:row-start-2 md:col-start-1 md:col-span-3 gap-4"> <div className="flex md:row-start-2 md:col-start-1 md:col-span-3 gap-4 max-md:flex-col">
{/* 短效 */} {/* 短效 */}
<Card className="flex-1"> <Card className="flex-1">
<CardHeader> <CardHeader>
@@ -94,7 +94,7 @@ function Pins(props: DashboardChartProps) {
<h4>包时</h4> <h4>包时</h4>
<p className="flex flex-col items-end"> <p className="flex flex-col items-end">
<span className="text-sm text-weak">当日可提取数量</span> <span className="text-sm text-weak">当日可提取数量</span>
<span className="text-sm">{props.short_term ? props.short_term : '1'}</span> <span className="text-sm">{props.short_term}</span>
</p> </p>
</div> </div>
<div className="border-b"></div> <div className="border-b"></div>

14
src/app/admin/identify/page.tsx
View File

@@ -103,12 +103,12 @@ export default function IdentifyPage(props: IdentifyPageProps) {
// ====================== // ======================
return ( return (
<Page className="flex-row"> <Page className="flex-row max-md:flex-col">
<div className="flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16"> <div className="flex-3/4 flex flex-col bg-white rounded-lg gap-16">
{/* banner */} {/* banner */}
<section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 justify-center"> <section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 pr-4 justify-center">
<Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/> <Image src={banner} alt="背景图" className="absolute inset-0 w-full h-full object-cover"/>
<h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3> <h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
<p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p> <p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
</section> </section>
@@ -200,7 +200,7 @@ export default function IdentifyPage(props: IdentifyPageProps) {
<span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">01</span> <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">01</span>
<span>注册账号</span> <span>注册账号</span>
</span> </span>
<Image alt="步骤配图" src={step1} aria-hidden/> <Image alt="步骤配图" src={step1}/>
</p> </p>
<div className="h-16 w-56 px-4 flex self-center"> <div className="h-16 w-56 px-4 flex self-center">
<div className={merge( <div className={merge(
@@ -214,7 +214,7 @@ export default function IdentifyPage(props: IdentifyPageProps) {
<span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">02</span> <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">02</span>
<span>实名认证</span> <span>实名认证</span>
</span> </span>
<Image alt="步骤配图" src={step2} aria-hidden/> <Image alt="步骤配图" src={step2}/>
</p> </p>
<div className="h-16 w-56 px-4 flex self-center"> <div className="h-16 w-56 px-4 flex self-center">
<div className={merge( <div className={merge(
@@ -228,7 +228,7 @@ export default function IdentifyPage(props: IdentifyPageProps) {
<span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">03</span> <span className="bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center">03</span>
<span>充值、支付</span> <span>充值、支付</span>
</span> </span>
<Image alt="步骤配图" src={step3} aria-hidden/> <Image alt="步骤配图" src={step3}/>
</p> </p>
</CardContent> </CardContent>
</Card> </Card>

33
src/app/admin/profile/page.tsx
View File

@@ -50,19 +50,19 @@ export default function ProfilePage(props: ProfilePageProps) {
} }
return ( return (
<Page className="flex-row items-start"> <Page className="lg:flex-row lg:items-stretch md:flex-col max-sm:flex-col">
<div className="flex-3/4 flex flex-col gap-4"> <div className="flex-3/4 flex flex-col gap-4">
{/* banner */} {/* banner */}
<section className="flex-none basis-40 relative rounded-lg overflow-hidden flex flex-col gap-4 pl-8 justify-center"> <section className="flex-1 relative rounded-lg p-10 overflow-hidden flex max-sm:flex-col flex-col gap-4 pl-8 justify-center">
<Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/> <Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
<h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3> <h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
<p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p> <p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
</section> </section>
{/* 块信息 */} {/* 块信息 */}
<div className="flex-none basis-40 flex gap-4"> <div className="flex gap-4 max-md:flex-col max-sm:flex-col">
<Card className="flex-1"> <Card className="flex-1 ">
<CardHeader> <CardHeader>
<CardTitle className="font-normal">帐号余额（元）</CardTitle> <CardTitle className="font-normal">帐号余额（元）</CardTitle>
</CardHeader> </CardHeader>
@@ -78,12 +78,12 @@ export default function ProfilePage(props: ProfilePageProps) {
<CardHeader> <CardHeader>
<CardTitle className="font-normal">实名认证</CardTitle> <CardTitle className="font-normal">实名认证</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex-auto flex justify-between items-center px-8"> <CardContent className="flex-auto flex justify-between items-center gap-4 px-4 pr-8">
{!profile?.id_token {!profile?.id_token
? ( ? (
<> <>
<p className="text-sm">为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p> <p className="text-sm">为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
<Button theme="outline" className="mx-16 w-24" onClick={() => router.push('/admin/identify')}>去认证</Button> <Button theme="outline" className="w-24" onClick={() => router.push('/admin/identify')}>去认证</Button>
</> </>
) )
: ( : (
@@ -102,7 +102,7 @@ export default function ProfilePage(props: ProfilePageProps) {
</Card> </Card>
</div> </div>
<div className="flex-auto shrink-0 basis-80 rounded-lg bg-white p-4 flex flex-col gap-8"> <div className="flex-none rounded-lg bg-white p-4 flex max-sm:flex-col flex-col gap-8">
{/* 安全信息 */} {/* 安全信息 */}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@@ -143,11 +143,10 @@ function Aftersale(props: {
}, [admin]) }, [admin])
return ( return (
<Card className="flex-none basis-80"> <Card className="flex-1 max-sm:flex-col">
<CardHeader> <CardHeader>
<CardTitle> <CardTitle>
<QrCodeIcon size={18}/> <QrCodeIcon size={18}/>
{' '}
关于售后 关于售后
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
@@ -223,13 +222,13 @@ function BasicForm(props: {
const refreshProfile = useProfileStore(store => store.refreshProfile) const refreshProfile = useProfileStore(store => store.refreshProfile)
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4 flex-1 w-full">
<h3 className="font-normal">基本信息</h3> <h3 className="font-normal">基本信息</h3>
<Form <Form
form={form} form={form}
handler={handler} handler={handler}
className={merge( className={merge(
`grid grid-cols-2 gap-4 items-start`, `grid grid-cols-2 gap-4 max-md:grid-cols-1 items-start`,
)} )}
> >
<FormField<Schema> <FormField<Schema>
@@ -241,7 +240,7 @@ function BasicForm(props: {
}} }}
> >
{({field}) => ( {({field}) => (
<Input {...field} placeholder="请输入用户名" className="w-52"/> <Input {...field} placeholder="请输入用户名" className="w-48"/>
)} )}
</FormField> </FormField>
<FormField<Schema> <FormField<Schema>
@@ -253,7 +252,7 @@ function BasicForm(props: {
}} }}
> >
{({field}) => ( {({field}) => (
<Input {...field} placeholder="请输入邮箱" className="w-52"/> <Input {...field} placeholder="请输入邮箱" className="w-48"/>
)} )}
</FormField> </FormField>
<FormField<Schema> <FormField<Schema>
@@ -265,7 +264,7 @@ function BasicForm(props: {
}} }}
> >
{({field}) => ( {({field}) => (
<Input {...field} placeholder="请输入QQ号" className="w-52"/> <Input {...field} placeholder="请输入QQ号" className="w-48"/>
)} )}
</FormField> </FormField>
<FormField<Schema> <FormField<Schema>
@@ -277,10 +276,10 @@ function BasicForm(props: {
}} }}
> >
{({field}) => ( {({field}) => (
<Input {...field} placeholder="请输入微信号" className="w-52"/> <Input {...field} placeholder="请输入微信号" className="w-48"/>
)} )}
</FormField> </FormField>
<div className="flex justify-end gap-4 col-span-2 justify-self-stretch"> <div className="flex justify-end gap-4 md:col-span-2 justify-self-stretch">
<Button <Button
theme="outline" theme="outline"
type="button" type="button"