feat:移动端 drawer 背景色调整
This commit is contained in:
@@ -70,7 +70,7 @@ export default function FundCard({
|
|||||||
boxShadow: 'none',
|
boxShadow: 'none',
|
||||||
paddingLeft: 0,
|
paddingLeft: 0,
|
||||||
paddingRight: 0,
|
paddingRight: 0,
|
||||||
background: 'transparent',
|
background: 'none',
|
||||||
} : {};
|
} : {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -91,6 +91,7 @@ export default function FundCard({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onRemoveFromGroup?.(f.code);
|
onRemoveFromGroup?.(f.code);
|
||||||
}}
|
}}
|
||||||
|
style={{backgroundColor: 'transparent'}}
|
||||||
title="从当前分组移除"
|
title="从当前分组移除"
|
||||||
>
|
>
|
||||||
<ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
|
<ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
|
||||||
|
|||||||
@@ -1167,22 +1167,13 @@ export default function PcFundTable({
|
|||||||
>
|
>
|
||||||
<DialogContent
|
<DialogContent
|
||||||
className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
|
className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
|
||||||
showCloseButton={false}
|
showCloseButton={true}
|
||||||
onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
|
onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
|
||||||
>
|
>
|
||||||
<DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">
|
<DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">
|
||||||
<DialogTitle className="text-base font-semibold text-[var(--text)]">
|
<DialogTitle className="text-base font-semibold text-[var(--text)]">
|
||||||
基金详情
|
基金详情
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="icon-button rounded-lg"
|
|
||||||
aria-label="关闭"
|
|
||||||
onClick={() => setCardDialogRow(null)}
|
|
||||||
style={{ padding: 4, borderColor: 'transparent' }}
|
|
||||||
>
|
|
||||||
<CloseIcon width="20" height="20" />
|
|
||||||
</button>
|
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div
|
<div
|
||||||
className="flex-1 min-h-0 overflow-y-auto px-6 py-4"
|
className="flex-1 min-h-0 overflow-y-auto px-6 py-4"
|
||||||
|
|||||||
@@ -2076,6 +2076,21 @@ input[type="number"] {
|
|||||||
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
|
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Drawer 内容玻璃拟态:与 Dialog 统一的毛玻璃效果(更通透) */
|
||||||
|
.drawer-content-theme {
|
||||||
|
background: rgba(15, 23, 42, 0);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-color: rgba(148, 163, 184, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"] .drawer-content-theme {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-color: rgba(148, 163, 184, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
/* shadcn Dialog:符合项目规范(ui-ux-pro-max),适配亮/暗主题,略微玻璃拟态 */
|
/* shadcn Dialog:符合项目规范(ui-ux-pro-max),适配亮/暗主题,略微玻璃拟态 */
|
||||||
[data-slot="dialog-content"] {
|
[data-slot="dialog-content"] {
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { XIcon } from "lucide-react"
|
|||||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
import {CloseIcon} from "@/app/components/Icons";
|
||||||
|
|
||||||
function Dialog({
|
function Dialog({
|
||||||
...props
|
...props
|
||||||
@@ -60,6 +61,7 @@ function DialogContent({
|
|||||||
data-slot="dialog-content"
|
data-slot="dialog-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
"fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
|
"fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
|
||||||
|
"mobile-dialog-glass",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}>
|
{...props}>
|
||||||
@@ -68,7 +70,7 @@ function DialogContent({
|
|||||||
<DialogPrimitive.Close
|
<DialogPrimitive.Close
|
||||||
data-slot="dialog-close"
|
data-slot="dialog-close"
|
||||||
className="absolute top-4 right-4 rounded-md p-1.5 text-[var(--muted-foreground)] opacity-70 transition-colors duration-200 hover:opacity-100 hover:text-[var(--foreground)] hover:bg-[var(--secondary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--card)] disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
className="absolute top-4 right-4 rounded-md p-1.5 text-[var(--muted-foreground)] opacity-70 transition-colors duration-200 hover:opacity-100 hover:text-[var(--foreground)] hover:bg-[var(--secondary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--card)] disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
||||||
<XIcon />
|
<CloseIcon width="20" height="20" />
|
||||||
<span className="sr-only">Close</span>
|
<span className="sr-only">Close</span>
|
||||||
</DialogPrimitive.Close>
|
</DialogPrimitive.Close>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user