xtu_mall/public/assets/css/mobile-override.css

/**
 * 移动端优化样式覆盖
 * 解决手机访问时的布局和显示问题
 */

/* ========== 全局优化 ========== */
@media screen and (max-width: 768px) {
    /* 基础布局优化 */
    html, body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .layui-container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 防止图片/视频超出屏幕 */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* 表格横向滚动 */
    .layui-table-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .layui-table-view table {
        min-width: 600px;
    }
    
    /* 按钮适配 */
    .layui-btn {
        padding: 0 15px;
        height: 38px;
        line-height: 38px;
        font-size: 14px;
    }
    
    .layui-btn-sm {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
    }
    
    .layui-btn-lg {
        height: 44px;
        line-height: 44px;
    }
    
    /* 表单优化 */
    .layui-input, .layui-textarea, .layui-select {
        height: 38px;
        line-height: 1.3;
        font-size: 14px;
    }
    
    .layui-textarea {
        min-height: 100px;
    }
    
    /* 卡片间距优化 */
    .fly-panel, .layui-card {
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    .layui-card-header {
        font-size: 15px;
        font-weight: 600;
        padding: 12px 15px;
    }
    
    .layui-card-body {
        padding: 15px;
    }
    
    /* 导航优化 */
    .layui-nav .layui-nav-item a {
        padding: 0 15px;
    }
    
    .layui-nav-child {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .layui-nav-child dd a {
        padding: 10px 20px;
    }
    
    /* 页脚优化 */
    .fly-footer {
        margin-top: 30px;
        padding: 20px 0;
    }
    
    .fly-footer .copyright {
        font-size: 12px;
        line-height: 1.6;
        padding: 0 15px;
    }
    
    /* 头部导航优化 - 防止拉长 */
    .fly-header {
        position: fixed;
        height: 56px !important;
        overflow: visible;
    }
    
    .fly-header .layui-container {
        height: 56px;
        overflow: visible;
    }
    
    .fly-header .fly-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        flex-wrap: nowrap;
    }
    
    /* 移动端导航菜单项简化 */
    .fly-header .fly-nav-mobile .layui-nav-item {
        position: relative;
    }
    
    .fly-header .fly-nav-mobile .layui-nav-item a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* 语言/商城简化显示 */
    .fly-header .fly-nav-mobile .nav-lang,
    .fly-header .fly-nav-mobile .nav-shop {
        font-size: 14px;
    }
    
    .fly-header .fly-nav-mobile .nav-lang span,
    .fly-header .fly-nav-mobile .nav-shop span {
        display: inline-block;
    }
}

/* ========== 首页特殊优化 ========== */
@media screen and (max-width: 768px) {
    #mainbody {
        padding-top: 80px;
        height: auto;
        min-height: calc(100vh - 61px);
    }
    
    #mainbody h2 {
        font-size: 36px;
    }
    
    #mainbody h2:before {
        font-size: 32px;
        height: 12px;
    }
    
    #mainbody h3 {
        font-size: 20px;
    }
    
    #mainbody p.desc {
        font-size: 14px;
    }
    
    #mainbody a {
        margin-top: 25px;
        padding: 10px 20px;
        font-size: 16px;
        display: block;
        text-align: center;
    }
}

/* ========== 用户中心优化 ========== */
@media screen and (max-width: 768px) {
    .fly-user-main {
        margin-top: 10px;
    }
    
    /* 用户信息卡片 */
    .fly-userinfo {
        padding: 15px;
        display: block !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .fly-avatar {
        width: 60px !important;
        height: 60px !important;
    }
    
    .fly-username {
        font-size: 14px !important;
        padding: 8px 0;
    }
    
    .fly-userinfo .layui-btn-group {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .fly-userinfo .layui-btn-sm {
        font-size: 12px;
        padding: 0 12px;
    }
    
    /* 侧边导航 */
    .fly-aside {
        width: 280px;
    }
    
    .fly-user-main .layui-nav-tree .layui-nav-item a {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .fly-user-main .layui-nav-tree .layui-nav-item i {
        font-size: 14px;
    }
    
    /* 主内容区 */
    .fly-panel-user {
        padding: 15px !important;
    }
    
    /* 用户信息网格布局改为单列 */
    .user-baseinfo {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .user-baseinfo .layui-card-header {
        font-size: 14px;
    }
    
    .user-baseinfo .info-value {
        font-size: 16px;
    }
}

/* ========== 表单优化 ========== */
@media screen and (max-width: 768px) {
    .layui-form-item {
        margin-bottom: 20px;
    }
    
    .layui-form-label {
        width: 100%;
        text-align: left;
        padding: 8px 0;
        font-weight: 500;
    }
    
    .layui-input-block {
        margin-left: 0 !important;
        max-width: 100%;
    }
    
    .layui-input-inline {
        width: 100%;
        margin-right: 0 !important;
    }
    
    .layui-input-inline input,
    .layui-input-inline select,
    .layui-input-inline textarea {
        width: 100%;
    }
    
    /* 验证码输入框优化 */
    .verify-box input {
        width: calc(100% - 120px) !important;
    }
    
    .verify-box img {
        height: 38px !important;
    }
    
    /* 单选/复选框 */
    .layui-form-checkbox,
    .layui-form-radio {
        margin: 5px 10px 5px 0;
    }
    
    /* 提交按钮组 */
    .layui-form-item .layui-input-block {
        text-align: center;
    }
    
    .layui-form-item .layui-input-block .layui-btn {
        margin: 5px;
        min-width: 100px;
    }
}

/* ========== 表格优化 ========== */
@media screen and (max-width: 768px) {
    .layui-table-tool {
        padding: 10px;
    }
    
    .layui-table-tool .layui-btn {
        margin-bottom: 8px;
    }
    
    .layui-table-page {
        padding: 10px;
    }
    
    .layui-laypage a,
    .layui-laypage span {
        padding: 5px 10px;
        font-size: 13px;
    }
    
    .layui-laypage input,
    .layui-laypage button {
        height: 30px;
    }
}

/* ========== 弹窗优化 ========== */
@media screen and (max-width: 768px) {
    .layui-layer {
        max-width: 95% !important;
        margin: 10px !important;
    }
    
    .layui-layer-content {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .layui-layer-padding {
        padding: 15px !important;
    }
    
    .layui-layer-btn {
        padding: 10px 15px 15px !important;
        text-align: center;
    }
    
    .layui-layer-btn a {
        display: inline-block;
        margin: 5px !important;
        min-width: 80px;
    }
}

/* ========== 提示框优化 ========== */
@media screen and (max-width: 768px) {
    .alert {
        padding: 12px 15px;
        font-size: 13px;
        border-radius: 6px;
    }
    
    .alert h4 {
        font-size: 14px;
        margin-bottom: 5px;
    }
}

/* ========== 加载动画优化 ========== */
@media screen and (max-width: 768px) {
    .layui-layer-loading {
        transform: scale(0.8);
    }
}

/* ========== 触摸优化 ========== */
@media screen and (max-width: 768px) {
    /* 增加触摸目标大小 */
    a, button, .layui-btn, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 移除点击高亮 */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 下拉菜单优化 */
    .layui-nav-child {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========== 暗黑模式支持（可选） ========== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .fly-panel, .layui-card {
        background-color: #1a1a1a;
        border-color: #333;
    }
    
    .layui-card-header {
        color: #fff;
    }
    
    .layui-card-body {
        color: #ccc;
    }
}

/* ========== 横屏优化 ========== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #mainbody {
        padding-top: 60px;
        height: auto;
    }
    
    .fly-userinfo {
        padding: 10px;
    }
    
    .fly-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .layui-layer-content {
        max-height: 60vh;
    }
}