MUD6 推广移动统一设计

client/src/pages/MobileProfilePage.tsx

@@ -124,20 +124,20 @@ export function MobileProfilePage() {
       ) : null}
 
       <SectionPanel title="基本信息">
-        <dl className="grid gap-3 text-sm">
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+        <dl className="mobile-info-grid text-sm">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">姓名</dt>
             <dd className="mt-1 font-medium text-zinc-900">{me?.name ?? "-"}</dd>
           </div>
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">员工号</dt>
             <dd className="mt-1 font-medium text-zinc-900">{me?.employeeNo ?? "-"}</dd>
           </div>
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">邮箱</dt>
             <dd className="mt-1 break-words font-medium text-zinc-900">{me?.email ?? "-"}</dd>
           </div>
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <dt className="text-xs text-zinc-500">手机号</dt>
             <dd className="mt-1 font-medium text-zinc-900">{me?.phone ?? "-"}</dd>
           </div>
@@ -145,7 +145,7 @@ export function MobileProfilePage() {
       </SectionPanel>
 
       <SectionPanel title="外部通知推送">
-        <label className="flex min-h-12 items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-800">
+        <label className="mobile-list-card flex min-h-12 items-center justify-between gap-3 text-sm text-zinc-800">
           <span>接收外部渠道推送</span>
           <input
             type="checkbox"
@@ -159,13 +159,13 @@ export function MobileProfilePage() {
 
       <SectionPanel title="企业微信绑定">
         <div className="space-y-3" data-testid="mobile-profile-wecom-card">
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <div className="text-xs text-zinc-500">接入状态</div>
             <div className="mt-1 font-semibold text-zinc-900">{wecomStatus.label}</div>
             <div className="mt-1 text-sm leading-5 text-zinc-500">{wecomStatus.description}</div>
           </div>
 
-          <div className="rounded-lg border border-zinc-200 bg-white px-3 py-3">
+          <div className="mobile-subcard">
             <div className="flex items-center justify-between gap-3">
               <div>
                 <div className="text-xs text-zinc-500">当前绑定</div>
@@ -181,7 +181,7 @@ export function MobileProfilePage() {
             ) : null}
           </div>
 
-          <div className="grid grid-cols-2 gap-2">
+          <div className="mobile-two-action-grid">
             <Button
               className="w-full"
               type="button"