/* ============================================================
锦玥图像引擎 · 移动端正式布局模板 (mobile-layout.css)
版本: v1.0 日期: 2026-09-15
作用: 系统性解决手机端排版混乱、语言下拉框遮挡、header挤压等问题
用法: 在 中
必须放在 style.css / i18n-switcher.css 之后加载，以覆盖桌面样式
断点: <=768px 平板/大手机, <=480px 小手机, <=360px 超小屏
维护: 修改本文件后，在 index.html 引用处追加 ?v=YYYYMMDD 强制刷新缓存
============================================================ */
/* ---------- 0. 全局基础 ---------- */
@media (max-width: 768px) {
html { -webkit-text-size-adjust: 100%; }
body {
font-size: 15px;
line-height: 1.6;
overflow-x: hidden;
/* iPhone 刘海屏安全区 */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; }
/* 禁止横向溢出 */
.main, .container, .wrapper, section, header, footer {
max-width: 100%;
overflow-x: hidden;
}
}
/* ---------- 1. Header / 导航 ---------- */
@media (max-width: 768px) {
header {
flex-wrap: wrap;
gap: 8px;
padding: 10px 14px !important;
min-height: auto;
}
/* Logo 缩小 */
.logo-text { font-size: 16px !important; }
.logo-subtitle { display: none !important; }
.logo img, .logo svg { width: 28px; height: 28px; }
/* 隐私安全徽章：缩小或隐藏 */
.privacy-badge {
padding: 4px 10px !important;
font-size: 11px !important;
order: 10;
}
/* 登录/注册按钮：缩小 */
.auth-buttons { gap: 6px !important; }
.auth-buttons .btn,
.auth-buttons a {
padding: 6px 14px !important;
font-size: 13px !important;
min-width: auto;
}
/* 已登录用户菜单：缩小 */
.user-menu .user-avatar {
width: 32px !important;
height: 32px !important;
}
.user-menu .user-name { font-size: 13px; }
/* 移动端登录链接（header内的li）：隐藏，用auth-buttons即可 */
.mobile-auth-links { display: none !important; }
}
@media (max-width: 480px) {
header { padding: 8px 10px !important; }
.logo-text { font-size: 14px !important; }
.privacy-badge { display: none !important; } /* 小屏隐藏隐私徽章，节省空间 */
.auth-buttons .btn,
.auth-buttons a { padding: 5px 10px !important; font-size: 12px !important; }
}
/* ---------- 2. 语言切换器（核心：解决遮挡） ---------- */
@media (max-width: 768px) {
#langSwitcherContainer {
margin-left: 0 !important;
order: 5;
position: relative;
z-index: 100;
}
.lang-switcher {
font-size: 12px !important;
padding: 5px 10px !important;
min-width: auto;
max-width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lang-flag { font-size: 14px !important; }
.lang-name { display: inline; }
/* 下拉框：限制宽度、防止溢出视口、z-index最高 */
.lang-dropdown {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
min-width: 130px !important;
max-width: 160px !important;
width: auto !important;
z-index: 9999 !important;
margin-top: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
border-radius: 10px;
overflow: hidden;
}
.lang-option {
padding: 10px 14px !important;
font-size: 13px !important;
white-space: nowrap;
}
/* 防止下拉框被 header overflow 裁剪 */
header { overflow: visible !important; }
}
@media (max-width: 480px) {
.lang-switcher {
font-size: 11px !important;
padding: 4px 8px !important;
max-width: 90px;
}
.lang-dropdown { min-width: 110px !important; max-width: 140px !important; }
.lang-option { padding: 9px 12px !important; font-size: 12px !important; }
}
/* ---------- 3. 英雄区 / 标题 ---------- */
@media (max-width: 768px) {
h1 { font-size: 24px !important; line-height: 1.3 !important; }
h2 { font-size: 20px !important; line-height: 1.35 !important; }
h3 { font-size: 17px !important; }
.hero, .hero-section, .banner {
padding: 24px 16px !important;
text-align: center;
}
.hero p, .hero-subtitle, .subtitle {
font-size: 14px !important;
padding: 0 8px;
}
/* 隐私安全提示条 */
.privacy-notice, .notice-bar, .alert {
padding: 10px 14px !important;
font-size: 13px !important;
margin: 12px 10px !important;
border-radius: 10px;
}
}
@media (max-width: 480px) {
h1 { font-size: 20px !important; }
h2 { font-size: 18px !important; }
.hero, .hero-section { padding: 18px 12px !important; }
}
/* ---------- 4. 统计数字 ---------- */
@media (max-width: 768px) {
.stats-counter-number, .stat-number, .big-number {
font-size: 36px !important;
line-height: 1.2;
}
.stats-label, .stat-label { font-size: 13px !important; }
}
/* ---------- 5. 特性卡片 / 信任指标 ---------- */
@media (max-width: 768px) {
.trust-bar, .features-grid, .feature-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 0 10px;
}
.trust-bar .item, .feature-card {
padding: 14px 10px !important;
border-radius: 12px;
}
.trust-bar .item .icon, .feature-card .icon {
font-size: 22px !important;
width: 36px !important;
height: 36px !important;
}
.trust-bar .item .title, .feature-card .title {
font-size: 13px !important;
font-weight: 600;
}
.trust-bar .item .desc, .feature-card .desc {
font-size: 11px !important;
color: #666;
}
}
@media (max-width: 480px) {
.trust-bar, .features-grid { gap: 8px !important; }
.trust-bar .item, .feature-card { padding: 12px 8px !important; }
}
/* ---------- 6. 工具卡片网格（核心：排版） ---------- */
@media (max-width: 768px) {
.tools-grid, .tool-grid, .tools-container,
[class*="grid"]:not(.trust-bar):not(.features-grid) {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 0 10px !important;
}
.tool-card, .tools-grid .card, .tool-item {
padding: 16px 12px !important;
border-radius: 14px;
min-height: auto;
}
.tool-card .icon, .tool-card svg {
width: 36px !important;
height: 36px !important;
margin-bottom: 8px;
}
.tool-card .title, .tool-card h3, .tool-card h4 {
font-size: 14px !important;
margin-bottom: 4px;
}
.tool-card .desc, .tool-card p {
font-size: 11px !important;
line-height: 1.4;
color: #777;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 480px) {
.tools-grid, .tool-grid, [class*="grid"]:not(.trust-bar):not(.features-grid) {
gap: 8px !important;
padding: 0 8px !important;
}
.tool-card { padding: 14px 10px !important; }
.tool-card .title { font-size: 13px !important; }
.tool-card .desc { font-size: 10px !important; }
}
@media (max-width: 360px) {
/* 超小屏：工具卡片1列 */
.tools-grid, .tool-grid, [class*="grid"]:not(.trust-bar):not(.features-grid) {
grid-template-columns: 1fr !important;
}
}
/* ---------- 7. 表单 / 按钮 / 输入框 ---------- */
@media (max-width: 768px) {
input, select, textarea, button {
font-size: 16px !important; /* 防止 iOS 自动缩放 */
max-width: 100%;
}
.form-group, .form-row {
flex-direction: column;
gap: 10px;
}
.form-group input, .form-group select, .form-group textarea {
width: 100% !important;
padding: 12px 14px !important;
border-radius: 10px;
}
.btn, button, .button {
padding: 12px 20px !important;
font-size: 15px !important;
border-radius: 10px;
min-height: 44px; /* 可点击区域 >=44px，符合移动端规范 */
}
.btn-primary, .btn-success { width: 100%; }
}
/* ---------- 8. 页脚 ---------- */
@media (max-width: 768px) {
footer {
padding: 24px 16px !important;
text-align: center;
}
.footer-grid, .footer-links, .footer-columns {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.footer-links a, footer a { font-size: 13px; }
.footer-copyright, .footer-bottom {
font-size: 12px;
flex-direction: column;
gap: 8px;
}
}
/* ---------- 9. 隐藏非关键元素（减少混乱） ---------- */
@media (max-width: 768px) {
/* 云同步浮标（用户反馈遮挡） */
.sync-status, #syncStatus, .sync-indicator, [class*="sync-status"] {
display: none !important;
}
/* 桌面端专用侧边栏/广告位 */
.sidebar, .desktop-only, .ads-side { display: none !important; }
/* 过长的装饰性元素 */
.decoration, .bg-decoration, .floating-shape { display: none !important; }
}
/* ---------- 10. 工具详情页 / 上传区 ---------- */
@media (max-width: 768px) {
.upload-area, .drop-zone, .upload-zone {
padding: 30px 20px !important;
margin: 12px 10px !important;
border-radius: 14px;
min-height: 160px;
}
.upload-area .icon, .drop-zone .icon { font-size: 32px !important; }
.upload-area .title { font-size: 15px !important; }
.upload-area .hint { font-size: 12px !important; }
.preview-area, .result-area {
margin: 12px 10px !important;
padding: 14px !important;
border-radius: 14px;
}
.options-panel, .settings-panel {
margin: 12px 10px !important;
padding: 14px !important;
border-radius: 14px;
}
.option-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* ---------- 11. 弹窗 / Modal ---------- */
@media (max-width: 768px) {
.modal, .modal-dialog, .popup {
width: calc(100% - 32px) !important;
max-width: 100% !important;
margin: 16px !important;
border-radius: 16px !important;
max-height: 85vh;
overflow-y: auto;
}
.modal-header { padding: 16px !important; }
.modal-body { padding: 16px !important; }
.modal-footer { padding: 12px 16px !important; flex-direction: column-reverse; gap: 8px; }
.modal-footer .btn { width: 100%; }
}
/* ---------- 12. 表格 ---------- */
@media (max-width: 768px) {
table, .table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 13px;
}
th, td { padding: 8px 10px !important; white-space: nowrap; }
}
/* ---------- 13. 分享按钮 / 底部操作栏 ---------- */
@media (max-width: 768px) {
.share-bar, .action-bar, .bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-top: 1px solid #eee;
display: flex;
justify-content: space-around;
gap: 8px;
}
.share-bar .btn, .action-bar .btn { flex: 1; padding: 10px !important; font-size: 13px !important; }
/* 底部固定栏时，body留出空间 */
body.has-bottom-bar { padding-bottom: 70px; }
}
/* ============================================================
模板使用说明（维护者必读）
------------------------------------------------------------
1. 本文件是"覆盖层"，不修改桌面样式，只在小屏追加规则。
2. 所有规则都包裹在 @media (max-width: Npx) 中，不影响桌面。
3. 优先级：本文件必须在 style.css 和 i18n-switcher.css 之后加载。
4. 修改后更新引用版本号：
5. 新增页面只需引用本文件即可获得移动端适配，无需重复写CSS。
6. 语言切换器下拉框遮挡问题通过 .lang-dropdown 的 position:absolute +
right:0 + z-index:9999 + header overflow:visible 解决。
7. 工具卡片在 <=768px 为2列，<=360px 为1列，避免过窄。
8. 所有可点击元素 min-height:44px，符合 WCAG 移动端可访问性。
9. input font-size:16px 防止 iOS Safari 聚焦时自动放大页面。
10. iPhone 刘海屏用 env(safe-area-inset-*) 适配。
============================================================ */
/* ---------- 14. Bottom Nav & Floating Buttons (v1.1) ---------- */
@media (max-width: 768px) {
.mobile-bottom-nav {
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 60px !important;
padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) !important;
background: rgba(255,255,255,0.97) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid #eee !important;
z-index: 1000 !important;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}
.mobile-bottom-nav a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
flex: 1 !important;
min-width: 0 !important;
min-height: 44px !important;
text-decoration: none !important;
color: #666 !important;
font-size: 11px !important;
padding: 2px 4px !important;
}
.mobile-bottom-nav a > span:first-child {
font-size: 20px !important;
line-height: 1.2 !important;
margin-bottom: 2px !important;
}
.mobile-bottom-nav a > span:last-child {
font-size: 10px !important;
line-height: 1.2 !important;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a[aria-current="page"] {
color: #10b981 !important;
}
.ai-float-btn,
.collab-float-btn {
display: none !important;
}
#backToTop {
width: 38px !important;
height: 38px !important;
bottom: 72px !important;
right: 12px !important;
font-size: 16px !important;
z-index: 999 !important;
}
body {
padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
}
}
@media (max-width: 480px) {
.mobile-bottom-nav { height: 56px !important; }
.mobile-bottom-nav a > span:first-child { font-size: 18px !important; }
.mobile-bottom-nav a > span:last-child { font-size: 9px !important; }
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
}
/* ---------- 15. AI Feature Hide (v1.2, AI not filed for record) ---------- */
@media (max-width: 768px) {
/* Hide AI category button */
.cat-btn[data-cat="ai"] {
display: none !important;
}
/* Hide AI tool cards (remove-bg = smart background removal) */
.tool-card[href*="remove-bg"] {
display: none !important;
}
/* Hide AI float button and collaboration float button (already in module 14, reinforce) */
.ai-float-btn,
.collab-float-btn {
display: none !important;
}
}
@media (max-width: 480px) {
.cat-btn[data-cat="ai"],
.tool-card[href*="remove-bg"] {
display: none !important;
}
}
/* ---------- 16. Language Switcher Mobile Fix (v1.3) ---------- */
@media (max-width: 768px) {
/* Remove inline margin that squeezes the switcher on mobile */
#langSwitcherContainer {
margin-left: 0 !important;
position: relative !important;
z-index: 9998 !important;
}
/* Ensure the wrapper has proper stacking context */
.lang-switcher-wrapper {
position: relative !important;
z-index: 9998 !important;
}
/* Enlarge tap target on mobile (min 44px per iOS HIG) */
.lang-switcher {
min-height: 44px !important;
min-width: 44px !important;
padding: 8px 12px !important;
font-size: 13px !important;
pointer-events: auto !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Keep language name visible on mobile (was hidden by i18n-switcher.css) */
.lang-switcher .lang-name {
display: inline !important;
white-space: nowrap !important;
}
/* Ensure dropdown appears above everything */
.lang-dropdown {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
min-width: 150px !important;
max-width: 200px !important;
z-index: 9999 !important;
display: none;
}
.lang-dropdown[style*="display: block"],
.lang-dropdown.show {
display: block !important;
}
/* Ensure header does not clip the dropdown */
header.header, header, .header {
overflow: visible !important;
}
/* Ensure no element overlaps the switcher */
.header .auth-buttons,
.header .user-menu {
z-index: 1 !important;
}
}
@media (max-width: 480px) {
.lang-switcher {
padding: 6px 10px !important;
font-size: 12px !important;
min-height: 40px !important;
}
.lang-switcher .lang-name {
max-width: 70px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.lang-dropdown {
min-width: 130px !important;
}
}
/* ============================================================
17. 鍏ㄩ潰绉诲姩绔竷灞€淇 (v1.4)
- Header瀹藉害鍗犳弧銆佽儗鏅粺涓€
- 闅愯棌鎵€鏈夋闈㈢鎮诞鎸夐挳锛坵orkspace-settings/ai/collab锛? - Header鍐呭厓绱犲悎鐞嗗竷灞€
- 涓诲姩鎺掓煡鎵€鏈塸osition:fixed鍏冪礌
============================================================ */
@media (max-width: 768px) {
/* --- 17.1 Header寮哄埗鍗犳弧瀹藉害 --- */
header.header,
header,
.header {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 10px 0 !important;
box-sizing: border-box !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
overflow: visible !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06) !important;
}
/* Header鍐卌ontainer鍗犳弧 */
.header .container {
max-width: 100% !important;
width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
}
/* --- 17.2 闅愯棌鎵€鏈夋闈㈢鎮诞鎸夐挳 --- */
.workspace-settings-btn,
.ai-float-btn,
.collab-float-btn,
[class*="workspace-settings"],
[class*="float-btn"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 闅愯棌宸ヤ綔鍖洪潰鏉?*/
.workspace-panel,
[class*="workspace-panel"] {
display: none !important;
}
/* --- 17.3 Header鍐呭厓绱犲竷灞€浼樺寲 --- */
.header .logo {
font-size: 16px !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
max-width: 40% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.header .logo-icon {
width: 32px !important;
height: 32px !important;
font-size: 16px !important;
}
/* 姹夊牎鑿滃崟鎸夐挳 */
.header .menu-toggle,
.header .hamburger,
.header [class*="menu-btn"] {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
/* Header瀵艰埅锛堟闈㈢鑿滃崟锛岀Щ鍔ㄧ闅愯棌鎴栬浆涓烘眽鍫★級 */
.header nav {
display: none !important;
}
/* --- 17.4 璇█鍒囨崲鍣ㄥ湪Header鍐呯殑甯冨眬 --- */
#langSwitcherContainer {
margin-left: 0 !important;
flex-shrink: 0 !important;
position: relative !important;
z-index: 9998 !important;
}
.lang-switcher-wrapper {
position: relative !important;
z-index: 9998 !important;
}
.lang-switcher {
min-height: 38px !important;
min-width: 38px !important;
padding: 6px 10px !important;
font-size: 12px !important;
pointer-events: auto !important;
cursor: pointer !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent;
}
.lang-switcher .lang-name {
display: inline !important;
max-width: 70px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.lang-dropdown {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
min-width: 140px !important;
max-width: 180px !important;
z-index: 9999 !important;
}
/* --- 17.5 纭繚鍐呭鍖轰笉琚獺eader閬尅 --- */
body {
padding-top: 0 !important;
}
.main,
main,
.content {
padding-top: 16px !important;
}
/* --- 17.6 涓诲姩鎺掓煡锛氭墍鏈塸osition:fixed鍏冪礌缁熶竴绠＄悊 --- */
/* 杩斿洖椤堕儴鎸夐挳缂╁皬骞朵笂绉伙紙閬垮厤琚簳閮ㄥ鑸伄鎸★級 */
#backToTop,
[id*="backToTop"],
[class*="back-to-top"] {
width: 38px !important;
height: 38px !important;
bottom: 72px !important;
right: 12px !important;
font-size: 16px !important;
z-index: 998 !important;
}
/* Toast閫氱煡浣嶇疆浼樺寲 */
.toast,
[class*="toast"] {
top: 60px !important;
right: 12px !important;
left: 12px !important;
max-width: calc(100% - 24px) !important;
z-index: 10000 !important;
}
/* 寮圭獥/妯℃€佹浼樺寲 */
.modal,
[class*="modal"],
.popup,
[class*="popup"] {
max-width: calc(100% - 24px) !important;
max-height: 80vh !important;
overflow-y: auto !important;
z-index: 10001 !important;
}
/* --- 17.7 搴曢儴瀵艰埅浼樺寲 --- */
.mobile-bottom-nav {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center !important;
padding: 8px 0 !important;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
flex: 1 !important;
min-height: 44px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
font-size: 10px !important;
color: #64748b !important;
text-decoration: none !important;
pointer-events: auto !important;
touch-action: manipulation !important;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active {
color: #10b981 !important;
}
/* body搴曢儴鐣欏嚭瀵艰埅绌洪棿 */
body {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* 灏忓睆鎵嬫満锛堚墹360px锛夐澶栦紭鍖?*/
@media (max-width: 360px) {
.header .logo {
font-size: 14px !important;
max-width: 35% !important;
}
.lang-switcher .lang-name {
max-width: 50px !important;
font-size: 11px !important;
}
.lang-switcher {
padding: 5px 8px !important;
}
}
/* ============================================================
修复：移动端隐藏桌面端导航
============================================================ */
@media (max-width: 768px) {
/* 隐藏桌面端导航链接 */
.desktop-nav,
.nav-links.desktop-nav {
display: none !important;
}
/* 确保汉堡菜单按钮显示 */
.mobile-menu-toggle {
display: flex !important;
}
}