个人中心页面调整样式

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

View File

@@ -50,19 +50,19 @@ export default function ProfilePage(props: ProfilePageProps) {
}
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">
{/* 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"/>
<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>
{/* 块信息 */}
<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>
<CardTitle className="font-normal"></CardTitle>
</CardHeader>
@@ -78,12 +78,12 @@ export default function ProfilePage(props: ProfilePageProps) {
<CardHeader>
<CardTitle className="font-normal"></CardTitle>
</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
? (
<>
<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>
</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">
@@ -143,11 +143,10 @@ function Aftersale(props: {
}, [admin])
return (
<Card className="flex-none basis-80">
<Card className="flex-1 max-sm:flex-col">
<CardHeader>
<CardTitle>
<QrCodeIcon size={18}/>
{' '}
</CardTitle>
</CardHeader>
@@ -223,13 +222,13 @@ function BasicForm(props: {
const refreshProfile = useProfileStore(store => store.refreshProfile)
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 flex-1 w-full">
<h3 className="font-normal"></h3>
<Form
form={form}
handler={handler}
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>
@@ -241,7 +240,7 @@ function BasicForm(props: {
}}
>
{({field}) => (
<Input {...field} placeholder="请输入用户名" className="w-52"/>
<Input {...field} placeholder="请输入用户名" className="w-48"/>
)}
</FormField>
<FormField<Schema>
@@ -253,7 +252,7 @@ function BasicForm(props: {
}}
>
{({field}) => (
<Input {...field} placeholder="请输入邮箱" className="w-52"/>
<Input {...field} placeholder="请输入邮箱" className="w-48"/>
)}
</FormField>
<FormField<Schema>
@@ -265,7 +264,7 @@ function BasicForm(props: {
}}
>
{({field}) => (
<Input {...field} placeholder="请输入QQ号" className="w-52"/>
<Input {...field} placeholder="请输入QQ号" className="w-48"/>
)}
</FormField>
<FormField<Schema>
@@ -277,10 +276,10 @@ function BasicForm(props: {
}}
>
{({field}) => (
<Input {...field} placeholder="请输入微信号" className="w-52"/>
<Input {...field} placeholder="请输入微信号" className="w-48"/>
)}
</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
theme="outline"
type="button"