fix: 统一模态框主题为网站深色风格,修复头部和关闭按钮随内容滚动的问题

This commit is contained in:
gujiangjiang committed 2025-10-17 05:46:06 +08:00
1 parent 8e011c8f60
commit 96ea9bf65b
4 files changed
+22 -12

No files matched your search

+16 -9
View File
@@ -12,16 +12,23 @@ interface InfoModalProps {
export function InfoModal({ showModal, setShowModal, title, children }: InfoModalProps) {
return (
<Modal showModal={showModal} setShowModal={setShowModal}>
<div className="w-full max-h-[80vh] overflow-y-auto bg-white/95 backdrop-blur-xl shadow-xl p-4 md:max-w-3xl md:rounded-2xl md:border md:border-gray-200">
<Close
className="absolute top-4 right-4 h-6 w-6 text-gray-500 hover:text-gray-700 cursor-pointer"
onClick={() => setShowModal(false)}
onPointerDown={(e) => e.stopPropagation()}
/>
<div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-5 text-center md:px-16">
<h3 className="font-display text-2xl font-bold">{title}</h3>
{/* 修复:将背景色从白色更改为网站的深色主题,并调整边框颜色 */}
<div className="w-full max-h-[80vh] flex flex-col bg-neutral-800/95 backdrop-blur-xl shadow-xl md:max-w-3xl md:rounded-2xl md:border md:border-cyan-50/20">
{/* 修复:创建一个固定的头部,包含标题和关闭按钮,使其不随内容滚动 */}
<div className="flex-shrink-0 flex items-center justify-center p-4 border-b border-cyan-50/20 relative">
<h3 className="font-display text-2xl font-bold text-white">{title}</h3>
<Close
className="absolute top-4 right-4 h-6 w-6 text-gray-400 hover:text-white cursor-pointer"
onClick={() => setShowModal(false)}
onPointerDown={(e) => e.stopPropagation()}
/>
</div>
{/* 修复:为内容区域添加 overflow-y-auto,使其可独立滚动 */}
<div className="flex-grow overflow-y-auto text-white p-6">
{/* 修复:将内容区域的文字颜色从黑色改为白色 */}
<div className="text-white">{children}</div>
</div>
<div className="text-black p-4">{children}</div>
</div>
</Modal>
);
+2 -1
View File
@@ -1,7 +1,8 @@
// 这个文件内容直接从您的 _h.about.tsx 迁移而来
export function About() {
return (
<div className="text-black">
// 修复:移除 text-black 类,文本颜色将由父组件 InfoModal 控制
<div>
<div className="max-w-[1400px] ">
<p className="mt-8">
<strong>Vmail.DEV </strong> is a Virtual temporary email service.{" "}
+2 -1
View File
@@ -1,7 +1,8 @@
// 这个文件内容直接从您的 _h.privacy.tsx 迁移而来
export function Privacy() {
return (
<div className="text-black">
// 修复:移除 text-black 类,文本颜色将由父组件 InfoModal 控制
<div>
<div className="max-w-[1400px] ">
<p className="mt-8">
At Vmail.DEV, we value the privacy of our users and are committed to
+2 -1
View File
@@ -1,7 +1,8 @@
// 这个文件内容直接从您的 _h.terms.tsx 迁移而来
export function Terms() {
return (
<div className="text-black">
// 修复:移除 text-black 类,文本颜色将由父组件 InfoModal 控制
<div>
<div className="max-w-[1400px] ">
<p className="mt-8">
Welcome to Vmail.DEV! These Terms of Service ("Terms") govern your