mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、修改左上角背景图颜色修改

Browse Source 
2、左下角文字变大
3、默认账户名字修改
4、右下角联系我们修改位置跟可以移动
This commit is contained in:
root
2026-06-29 18:12:48 +08:00
parent f61e5035ff
commit 13970941d5
6 changed files with 122 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/components/Layout/AppLayout.css
+13 -5
View File
@@ -85,8 +85,9 @@
.contact-button-wrapper {
position: fixed;
right: 24px;
bottom: 24px;
bottom: 25%;
z-index: 1000;
cursor: move;
}
.contact-tooltip {
@@ -94,7 +95,7 @@
right: 64px;
bottom: 8px;
padding: 8px 16px;
background: #1e293b;
background: rgba(30, 41, 59, 0.9);
color: #ffffff;
border-radius: 8px;
font-size: 13px;
@@ -108,19 +109,26 @@
height: 40px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
transition: all 0.3s ease;
}
.contact-button:hover {
transform: scale(1.05);
box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%);
box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);
}
.contact-button.dragging {
cursor: grabbing;
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}
@media (max-width: 767px) {
video-gen-app/src/components/Layout/AppLayout.tsx
+64 -12
View File
@@ -136,12 +136,19 @@ const AppLayout: React.FC = () => {
const { user, logout } = useAuthStore();
const [pwdModalOpen, setPwdModalOpen] = useState(false);
const [rechargeModalOpen, setRechargeModalOpen] = useState(false);
const [contactModalOpen, setContactModalOpen] = useState(false);
const [pwdForm] = Form.useForm();
const [selectedPlan, setSelectedPlan] = useState<number | null>(null);
const [menuItems, setMenuItems] = useState<MenuConfig[]>([]);
const [rechargeOptions, setRechargeOptions] = useState<any[]>([]);
const [unreadCount, setUnreadCount] = useState(0);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [contactHovered, setContactHovered] = useState(false);
const [contactForm] = Form.useForm();
const [submittingContact, setSubmittingContact] = useState(false);
const [contactPosition, setContactPosition] = useState<{ x: number; y: number | string }>({ x: 24, y: '25%' });
const [isDragging, setIsDragging] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
const [mobileExpandedMenus, setMobileExpandedMenus] = useState<Record<string, boolean>>({});
const [siteName, setSiteName] = useState(() => {
const cached = localStorage.getItem('siteInfo');
@@ -174,10 +181,6 @@ const AppLayout: React.FC = () => {
const countdownTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
const currentOrderNoRef = useRef<string | null>(null);
const [enabledMethods, setEnabledMethods] = useState<{ alipay: boolean; wechat: boolean }>({ alipay: false, wechat: false });
const [contactModalOpen, setContactModalOpen] = useState(false);
const [contactForm] = Form.useForm();
const [contactHovered, setContactHovered] = useState(false);
const [submittingContact, setSubmittingContact] = useState(false);
const PENDING_ORDER_KEY = 'pending_payment_order';
@@ -207,6 +210,40 @@ const AppLayout: React.FC = () => {
}).catch(() => { });
}, []);
const handleContactMouseDown = (e: React.MouseEvent) => {
if (e.button === 0) {
setIsDragging(true);
setDragStart({
x: e.clientX - contactPosition.x,
y: typeof contactPosition.y === 'string' ? e.clientY - (window.innerHeight * parseInt(contactPosition.y) / 100) : e.clientY - contactPosition.y,
});
}
};
const handleContactMouseMove = (e: MouseEvent) => {
if (!isDragging) return;
const newX = Math.max(16, Math.min(window.innerWidth - 70, e.clientX - dragStart.x));
const newY = Math.max(60, Math.min(window.innerHeight - 60, e.clientY - dragStart.y));
setContactPosition({ x: newX, y: newY });
};
const handleContactMouseUp = () => {
setIsDragging(false);
};
useEffect(() => {
if (isDragging) {
document.addEventListener('mousemove', handleContactMouseMove);
document.addEventListener('mouseup', handleContactMouseUp);
return () => {
document.removeEventListener('mousemove', handleContactMouseMove);
document.removeEventListener('mouseup', handleContactMouseUp);
};
}
}, [isDragging, dragStart]);
const loadUnreadCount = () => {
getUnreadCount().then(count => {
setUnreadCount(count);
@@ -520,7 +557,7 @@ const AppLayout: React.FC = () => {
}}>
<div style={{
width: 42, height: 42, borderRadius: 14, flexShrink: 0,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%)',
//background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.35)',
overflow: 'hidden',
@@ -604,12 +641,12 @@ const AppLayout: React.FC = () => {
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
}} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ color: '#1e293b', fontSize: 14, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', letterSpacing: -0.01 }}>
<div style={{ color: '#1e293b', fontSize: 16, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', letterSpacing: -0.01 }}>
{user?.username}
</div>
<div style={{
color: '#6366f1',
fontSize: 12,
fontSize: 16,
fontWeight: 500,
letterSpacing: 0,
background: 'rgba(99, 102, 241, 0.08)',
@@ -917,8 +954,16 @@ const AppLayout: React.FC = () => {
gap: 8,
}}>
<InfoOutlined style={{ color: '#6366f1', fontSize: 14 }} />
<Typography.Text style={{ color: '#ff0000ff', fontSize: 13 }}>
当前平台仅支持支付宝/微信扫码充值，如需转账支付请联系我们
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
当前平台仅支持支付宝/微信扫码充值，如需转账支付请
<Typography.Text
style={{
color: '#6366f1',
cursor: 'pointer',
textDecoration: 'underline',
}}
onClick={() => { setRechargeModalOpen(false); setContactModalOpen(true); }}
>联系我们</Typography.Text>
</Typography.Text>
</div>
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
@@ -1193,7 +1238,13 @@ const AppLayout: React.FC = () => {
<NotificationPopup />
<div className="contact-button-wrapper">
<div
className="contact-button-wrapper"
style={{
right: `${contactPosition.x}px`,
bottom: typeof contactPosition.y === 'string' ? contactPosition.y : `${window.innerHeight - contactPosition.y}px`,
}}
>
<div style={{
position: 'relative',
}}>
@@ -1206,10 +1257,11 @@ const AppLayout: React.FC = () => {
联系我们
</div>
<button
onClick={() => setContactModalOpen(true)}
className="contact-button"
onClick={() => !isDragging && setContactModalOpen(true)}
className={`contact-button ${isDragging ? 'dragging' : ''}`}
onMouseEnter={() => setContactHovered(true)}
onMouseLeave={() => setContactHovered(false)}
onMouseDown={handleContactMouseDown}
>
<MessageOutlined style={{ fontSize: 20 }} />
</button>