/* ===================================================================== mobile.css — 手机端专用样式（仅样式层，不涉及业务逻辑） 生效条件：，由 app.blade.php 中的检测脚本及 resources/js/Hooks/useIsMobile.jsx 自动设置。平板/电脑不受影响。 ===================================================================== */ /* ---------- 0. 全局：解除桌面最小宽度、防止横向滚动 ---------- */ html.is-mobile, html.is-mobile body { min-width: 0 !important; width: 100%; max-width: 100vw; overflow-x: hidden; -webkit-text-size-adjust: 100%; } html.is-mobile body { background-color: #f5f5f5; font-size: 14px; } html.is-mobile .my-desktop-minwidth { min-width: 0 !important; } html.is-mobile .my-layout-body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } html.is-mobile .max-w-7xl, html.is-mobile .container { max-width: 100% !important; width: 100% !important; } html.is-mobile img { max-width: 100%; } html.is-mobile .my-content-travel-interval { height: 8px; } /* 桌面专用的固定宽度块（个人订制横幅 / 合作伙伴滚动条 / 私人订制横幅） */ html.is-mobile .my-slider .slider { min-width: 0 !important; max-width: 100% !important; } html.is-mobile div[style*="min-width: 1024px"], html.is-mobile div[style*="minWidth: 1024px"], html.is-mobile div[style*="min-width: 980px"] { min-width: 0 !important; } /* ---------- 1. antd 组件通用手机适配 ---------- */ html.is-mobile .ant-modal { min-width: 0 !important; width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; top: 8px !important; padding-bottom: 0; margin: 0 auto; } html.is-mobile .ant-modal-content { max-height: calc(100vh - 16px); overflow-y: auto; padding: 14px 12px; } html.is-mobile .ant-modal-body { overflow-x: auto; } html.is-mobile .ant-drawer-content-wrapper { width: 100vw !important; max-width: 100vw !important; } html.is-mobile .ant-drawer-body { padding: 12px; } html.is-mobile .ant-popover { max-width: calc(100vw - 12px); } html.is-mobile .ant-popover .ant-popover-inner { max-width: calc(100vw - 12px); overflow-x: auto; overflow-y: auto; max-height: 80vh; } html.is-mobile .ant-popover .ant-popover-inner-content > div[style*="width: 960px"], html.is-mobile .ant-popover .ant-popover-inner-content > div[style*="min-width: 320px"], html.is-mobile .ant-popover .ant-popover-inner-content > div[style*="min-width: 300px"] { width: auto !important; min-width: 0 !important; max-width: calc(100vw - 40px); } html.is-mobile .ant-popconfirm { max-width: calc(100vw - 16px); } html.is-mobile .ant-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } html.is-mobile .ant-table-wrapper .ant-table { min-width: 640px; font-size: 12px; } html.is-mobile .ant-table-wrapper .ant-table-cell { padding: 6px 6px !important; } html.is-mobile .ant-steps { flex-wrap: nowrap; } html.is-mobile .ant-steps .ant-steps-item { padding-inline-start: 4px !important; flex: 1 1 0; min-width: 0; } html.is-mobile .ant-steps .ant-steps-item-icon { width: 22px; height: 22px; line-height: 22px; font-size: 12px; margin-inline-end: 4px; } html.is-mobile .ant-steps .ant-steps-item-title { font-size: 11px; line-height: 22px; padding-inline-end: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html.is-mobile .ant-steps .ant-steps-item-title::after { display: none; } html.is-mobile .ant-steps .ant-steps-item-description { display: none; } html.is-mobile .ant-picker-dropdown, html.is-mobile .ant-select-dropdown { max-width: calc(100vw - 16px); } html.is-mobile .ant-picker-dropdown .ant-picker-panels { flex-direction: column; } html.is-mobile .ant-picker-dropdown .ant-picker-panel-container { overflow-x: auto; } html.is-mobile .ant-btn { max-width: 100%; white-space: normal; height: auto; min-height: 32px; } html.is-mobile .ant-btn-sm { min-height: 24px; } html.is-mobile .ant-btn-lg { min-height: 40px; } html.is-mobile .ant-input, html.is-mobile .ant-input-number, html.is-mobile .ant-picker, html.is-mobile .ant-select { max-width: 100%; } html.is-mobile .ant-float-btn { bottom: 72px !important; right: 12px !important; left: auto !important; } html.is-mobile .ant-tour { max-width: calc(100vw - 24px); } /* Tawk.to 聊天按钮：抬高到底部导航栏之上 */ html.is-mobile iframe[title*="chat"], html.is-mobile iframe[title*="Chat"] { bottom: 64px !important; } /* ---------- 2. 手机端顶部（Logo + 用户/购物车 + 搜索） ---------- */ html.is-mobile .my-m-header { position: sticky; top: 0; z-index: 900; background: linear-gradient(180deg, #2577e3 0%, #3b8bf0 100%); padding: 6px 10px 8px 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } html.is-mobile .my-m-header-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; } html.is-mobile .my-m-logo { flex: none; display: block; margin-right: 6px; } html.is-mobile .my-m-logo img { height: 36px; width: auto; max-width: none; display: block; background: #fff; border-radius: 6px; padding: 2px 6px; } html.is-mobile .my-m-header-right { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; } /* 复用 PhoneLanguage：去掉桌面留白，隐藏电话行 */ html.is-mobile .my-m-header-right > .flex-none > div:first-child { margin-top: 0 !important; } html.is-mobile .my-m-header-right > .flex-none > div:last-child { display: none; } html.is-mobile .my-m-header-right .ant-btn { height: 30px; min-height: 30px; padding: 0 8px; font-size: 12px; margin: 0 0 0 6px !important; white-space: nowrap; } html.is-mobile .my-m-header-right .ant-btn-primary { background: #fff; color: #2577e3; border-color: #fff; } html.is-mobile .my-m-header-right a { color: inherit; } html.is-mobile .my-m-header-right .ant-avatar { width: auto !important; max-width: 120px; min-width: 60px; height: 30px !important; line-height: 30px !important; margin: 0 !important; padding: 0 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff !important; color: #2577e3 !important; } html.is-mobile .my-m-header-right .ant-avatar-string { position: static; transform: none !important; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } html.is-mobile .my-m-header-right .ant-badge .ant-btn { width: 38px !important; padding: 0; } html.is-mobile .my-m-header-right > .flex-none .flex > .flex-none[style*="margin"] { margin: 0 0 0 6px !important; } html.is-mobile .my-m-header-search { margin-top: 8px; } html.is-mobile .my-m-header-search .my-search-bar { width: 100% !important; margin: 0 !important; } /* ---------- 3. 手机端底部导航栏 ---------- */ html.is-mobile .my-m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #e5e5e5; display: flex; justify-content: space-around; align-items: stretch; box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06); } html.is-mobile .my-m-tabbar-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: #666; font-size: 11px; line-height: 1; padding: 4px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.is-mobile .my-m-tabbar-item i { font-size: 20px; } html.is-mobile .my-m-tabbar-item.active { color: #2577e3; font-weight: bold; } /* ---------- 4. 首页：轮播图 + 图标导航 + 热门推荐 + 线路分组 ---------- */ html.is-mobile .slick-slider img { height: 170px !important; max-width: 100% !important; } html.is-mobile .slick-dots { height: 14px; bottom: 4px; } html.is-mobile .my-m-homenav { background: #fff; padding: 10px 6px 4px 6px; margin: 8px 8px 0 8px; border-radius: 10px; } html.is-mobile .my-m-homenav-grid { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 12px; } html.is-mobile .my-m-homenav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; -webkit-tap-highlight-color: transparent; } html.is-mobile .my-m-homenav-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } html.is-mobile .my-m-homenav-label { margin-top: 5px; font-size: 12px; line-height: 1.2; white-space: nowrap; } html.is-mobile .my-m-hot { display: flex; align-items: center; margin-top: 12px; padding-top: 8px; border-top: 1px solid #f0f0f0; } html.is-mobile .my-m-hot-title { flex: none; font-size: 13px; font-weight: bold; color: #e64340; padding: 0 6px 0 2px; white-space: nowrap; } html.is-mobile .my-m-hot-title i { margin-right: 3px; } html.is-mobile .my-m-hot-scroll { flex: 1 1 auto; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } html.is-mobile .my-m-hot-scroll::-webkit-scrollbar { display: none; } html.is-mobile .my-m-hot-chip { display: inline-block; padding: 3px 10px; margin-right: 6px; border-radius: 14px; background: #f2f6ff; color: #2577e3; font-size: 12px; text-decoration: none; } /* 首页线路分组：横向滑动卡片 */ html.is-mobile .my-home-group-head { height: auto !important; padding: 10px 0 6px 0; } html.is-mobile .my-home-group-head > div:first-child { float: none !important; height: auto !important; margin-top: 0 !important; } html.is-mobile .my-home-group-head span { font-size: 17px !important; font-weight: bold; margin-left: 12px !important; margin-right: 12px !important; } html.is-mobile .my-home-group-head span::before { content: ""; display: inline-block; width: 4px; height: 16px; background: #2577e3; border-radius: 2px; margin-right: 6px; vertical-align: -2px; } html.is-mobile .my-home-group-head > div:last-child { position: absolute !important; top: 8px !important; height: auto !important; margin-top: 0 !important; } html.is-mobile .my-home-group-head > div:last-child span { font-size: 13px !important; font-weight: normal; color: #888; } html.is-mobile .my-home-group-head > div:last-child span::before { display: none; } html.is-mobile .my-home-group { height: auto !important; } html.is-mobile .my-home-group > div { margin: 0 !important; } html.is-mobile .my-home-group > div > div, html.is-mobile .my-home-group > div > div > div { height: auto !important; overflow: visible !important; } html.is-mobile .my-home-group > div > div > div { display: flex; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 4px 8px 10px 8px; gap: 10px; scrollbar-width: none; } html.is-mobile .my-home-group > div > div > div::-webkit-scrollbar { display: none; } html.is-mobile .my-home-card-slot { display: block !important; float: none !important; flex: 0 0 66vw; width: 66vw !important; max-width: 260px; height: auto !important; margin: 0 !important; border-radius: 8px; overflow: hidden; scroll-snap-align: start; background: #fff; } html.is-mobile .my-home-card { float: none !important; width: 100% !important; height: auto !important; } html.is-mobile .my-home-card .figure-frontpage { height: 150px; } html.is-mobile .my-home-card .figure-frontpage img { width: 100% !important; height: 150px !important; object-fit: cover; } html.is-mobile .my-home-card .pic-title { font-size: 15px !important; margin: 6px 8px 0 8px !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-height: 2.7em; } html.is-mobile .my-home-card .pic-content { font-size: 12px !important; color: #888; margin: 4px 8px 8px 8px !important; height: auto !important; } html.is-mobile .my-home-card-slot .ant-skeleton-image, html.is-mobile .my-home-card-slot > div[style*="width: 270px"] { width: 100% !important; max-width: 100%; } html.is-mobile .my-home-card-slot .figure-frontpage img { width: 100% !important; height: 150px !important; object-fit: cover; } /* ---------- 5. 页脚 ---------- */ html.is-mobile .my-footer { padding: 12px 0 8px 0 !important; } html.is-mobile .my-footer-row { display: none !important; } html.is-mobile .my-footer-copyright { min-width: 0 !important; padding: 0 12px; } html.is-mobile .my-footer-copyright p { font-size: 12px !important; color: #888; line-height: 1.5; } html.is-mobile .my-footer .ant-float-btn { display: none; } /* ---------- 6. 通用：内容页（关于我们/签证/保险/条款等富文本页） ---------- */ html.is-mobile .my-layout-body > .max-w-7xl { overflow-x: hidden; } html.is-mobile .my-layout-body table { max-width: 100%; } html.is-mobile .my-layout-body iframe { max-width: 100%; } /* ---------- 13. 通用表单：固定宽度表单/输入框在手机上撑满 ---------- */ html.is-mobile .my-layout-body form[style*="width"] { width: 100% !important; max-width: 100%; } html.is-mobile .my-layout-body input:not([type="checkbox"]):not([type="radio"]), html.is-mobile .my-layout-body textarea, html.is-mobile .my-layout-body select { max-width: 100%; box-sizing: border-box; } html.is-mobile .my-layout-body .max-w-xl { max-width: 100%; } html.is-mobile .my-layout-body .p-4.sm\:p-8 { padding: 12px !important; }