lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 11 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) {
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">
<CardHeader>
@@ -94,7 +94,7 @@ function Pins(props: DashboardChartProps) {
<h4>包时</h4>
<p className="flex flex-col items-end">
<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>
</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 (
<Page className="flex-row">
<div className="flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16">
<Page className="flex-row max-md:flex-col">
<div className="flex-3/4 flex flex-col bg-white rounded-lg gap-16">
{/* banner */}
<section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 justify-center">
<Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
<section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 pr-4 justify-center">
<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>
<p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
</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>注册账号</span>
</span>
<Image alt="步骤配图" src={step1} aria-hidden/>
<Image alt="步骤配图" src={step1}/>
</p>
<div className="h-16 w-56 px-4 flex self-center">
<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>实名认证</span>
</span>
<Image alt="步骤配图" src={step2} aria-hidden/>
<Image alt="步骤配图" src={step2}/>
</p>
<div className="h-16 w-56 px-4 flex self-center">
<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>充值、支付</span>
</span>
<Image alt="步骤配图" src={step3} aria-hidden/>
<Image alt="步骤配图" src={step3}/>
</p>
</CardContent>
</Card>

33
src/app/admin/profile/page.tsx
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"