web/src/app/admin/identify/page.tsx

import {Button} from '@/components/ui/button'
import banner from './_assets/banner.webp'
import personal from './_assets/personal.webp'
import Image from 'next/image'
import Page from '@/components/page'

export type IdentifyPageProps = {}

export default async function IdentifyPage(props: IdentifyPageProps) {
  return (
    <Page mode={`blank`}>
      <div className={`flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden 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`}/>
          <h3 className={`text-lg font-bold z-10 relative`}>蓝狐HTTP邀请您参与【先测后买】服务</h3>
          <p className={`text-sm text-gray-600 z-10 relative`}>为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
        </section>

        <div className={`flex-auto flex justify-center items-start`}>
          {/* 个人认证 */}
          <section className={`w-96 bg-gray-50 p-8 rounded-md flex flex-col gap-4 items-center`}>
            <Image src={personal} alt={`个人认证`}/>
            <div>
              <h3 className={`text-center text-lg font-bold`}>个人认证</h3>
              <p className={`text-sm text-gray-600`}>平台授权支付宝安全认证，不会泄露您的认证信息</p>
            </div>
            <Button className={`w-full`}>去认证</Button>
          </section>
        </div>
      </div>

      <section className={`flex-1/4 flex flex-col bg-white rounded-lg`}>
        <h3>操作引导</h3>
        <p>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
      </section>
    </Page>
  )
}