{extend name="web/official_common/mobile/base" /} {block name="content"}
<!-- 纳海川移动端客户案例详情页 开始 -->
<style>
    .nhc-mcase-art svg {
        display: block;
        width: 100%;
        height: auto;
    }
    .nhc-mcase-body {
        font-size: 15px;
        line-height: 1.75;
        color: var(--text-primary);
        overflow-wrap: break-word;
    }
    .nhc-mcase-body p {
        margin: 0 0 1em 0;
    }
    .nhc-mcase-body img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px;
        display: block;
        margin: 1.2em auto;
    }
    .nhc-mcase-body h2 {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 1.6em 0 0.7em 0;
        padding-bottom: 0.4em;
        border-bottom: 1px solid var(--border-color);
    }
    .nhc-mcase-body h3 {
        font-family: var(--font-serif);
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 1.4em 0 0.6em 0;
    }
    .nhc-mcase-body ul,
    .nhc-mcase-body ol {
        margin: 0 0 1em 0;
        padding-left: 1.5em;
    }
    .nhc-mcase-body a {
        color: var(--primary);
        text-underline-offset: 3px;
    }
    .nhc-mcase-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        margin: 1.2em 0;
    }
    .nhc-mcase-body th,
    .nhc-mcase-body td {
        border: 1px solid var(--border-color);
        padding: 8px 10px;
        font-size: 13px;
        text-align: left;
    }
    .nhc-mcase-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border-radius: var(--radius-sm);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }
    .nhc-mcase-btn-primary {
        background: var(--primary);
        color: #ffffff;
    }
    .nhc-mcase-btn-ghost {
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        background: #ffffff;
    }
    a:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
        * {
            transition: none !important;
        }
    }
</style>
<div
    class="nhc-mobile-wrap"
    style="padding: 16px; background: var(--bg-primary)"
>
    <!-- 移动端面包屑导航 -->
    <nav
        aria-label="当前位置"
        style="
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 6px;
        "
    >
        <a href="/" style="color: var(--text-secondary)">首页</a>
        <span>&gt;</span>
        <a
            href="{:addon_url('official/web.official_case_show/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid')])}"
            style="color: var(--primary)"
            >客户案例</a
        >
        <span>&gt;</span>
        <span>正文</span>
    </nav>

    {if empty($data)}
    <!-- 空状态：案例不存在或已下架 -->
    <article
        style="
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 48px 20px;
            text-align: center;
        "
    >
        <div style="margin-bottom: 12px">
            <span class="nhc-seal" style="font-size: 10px; padding: 1px 5px"
                >暂无内容</span
            >
        </div>
        <h1
            style="
                font-family: var(--font-serif);
                font-size: 20px;
                font-weight: 700;
                color: var(--text-primary);
                line-height: 1.4;
                margin: 0 0 10px 0;
            "
        >
            该案例不存在或已下架
        </h1>
        <p
            style="
                font-size: 13px;
                color: var(--text-secondary);
                line-height: 1.6;
                margin: 0 0 20px 0;
            "
        >
            页面可能已被归档，可返回案例列表查看其他项目实录。
        </p>
        <div style="display: flex; flex-direction: column; gap: 10px">
            <a
                class="nhc-mcase-btn nhc-mcase-btn-primary"
                href="{:addon_url('official/web.official_case_show/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid')])}"
                >返回案例列表</a
            >
            <a
                class="nhc-mcase-btn nhc-mcase-btn-ghost"
                href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}"
                >预约咨询</a
            >
        </div>
    </article>
    {else/}
    <!-- 案例卡片主体 -->
    <article
        style="
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 20px;
            box-shadow: var(--shadow-subtle);
        "
    >
        <header
            style="
                border-bottom: 1px solid var(--border-color);
                padding-bottom: 16px;
                margin-bottom: 16px;
            "
        >
            <div
                style="
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    margin-bottom: 10px;
                "
            >
                <span class="nhc-seal" style="font-size: 10px; padding: 1px 5px"
                    >项目实录</span
                >
                <span
                    style="
                        font-size: 11px;
                        padding: 1px 6px;
                        background: var(--primary-light);
                        color: var(--primary);
                        border-radius: 2px;
                    "
                    >{:ze($category,'name')}</span
                >
            </div>
            <h1
                style="
                    font-family: var(--font-serif);
                    font-size: 20px;
                    font-weight: 700;
                    color: var(--text-primary);
                    line-height: 1.4;
                    margin: 0 0 12px 0;
                "
            >
                {$data['title']}
            </h1>
            <div
                style="
                    display: flex;
                    flex-wrap: wrap;
                    gap: 12px;
                    font-size: 12px;
                    color: var(--text-muted);
                "
            >
                <span>{:date('Y-m-d H:i', $data['createtime'])}</span>
                <span>{:ze($category,'name')}</span>
                {if !empty($data['source'])}
                <span>合作客户：{$data['source']}</span>
                {/if}
            </div>
        </header>

        <!-- 抽象配图：远山叠嶂 · 窗棂日月 -->
        <figure
            class="nhc-mcase-art"
            style="
                margin: 0 0 20px 0;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-sm);
                overflow: hidden;
            "
            aria-hidden="true"
        >
            <svg
                viewBox="0 0 1200 360"
                preserveAspectRatio="xMidYMid slice"
                focusable="false"
            >
                <defs>
                    <linearGradient
                        id="nhcMCaseSky"
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                    >
                        <stop offset="0" stop-color="#FFFFFF" />
                        <stop offset="1" stop-color="#EFF6FF" />
                    </linearGradient>
                    <linearGradient
                        id="nhcMCaseSun"
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                    >
                        <stop offset="0" stop-color="#7DD3FC" />
                        <stop offset="1" stop-color="#2563EB" />
                    </linearGradient>
                </defs>
                <rect
                    x="0"
                    y="0"
                    width="1200"
                    height="360"
                    fill="url(#nhcMCaseSky)"
                />
                <polygon
                    points="0,250 140,150 260,230 400,120 540,240 700,170 860,250 1000,180 1200,250 1200,360 0,360"
                    fill="#DBEAFE"
                />
                <polygon
                    points="0,280 180,190 330,260 470,170 640,270 800,210 960,280 1120,220 1200,260 1200,360 0,360"
                    fill="#BFDBFE"
                    opacity="0.85"
                />
                <polygon
                    points="60,300 220,230 360,290 520,225 700,300 880,245 1040,300 1200,255 1200,360 0,360"
                    fill="#93C5FD"
                    opacity="0.55"
                />
                <polygon
                    points="400,120 470,170 400,240 330,260"
                    fill="#FFFFFF"
                    opacity="0.35"
                />
                <circle
                    cx="880"
                    cy="105"
                    r="48"
                    fill="url(#nhcMCaseSun)"
                    opacity="0.92"
                />
                <circle
                    cx="880"
                    cy="105"
                    r="60"
                    fill="none"
                    stroke="#2563EB"
                    stroke-width="1.5"
                    opacity="0.25"
                />
                <g stroke="#1E40AF" stroke-width="2" opacity="0.14">
                    <rect x="988" y="60" width="148" height="180" fill="none" />
                    <line x1="1025" y1="60" x2="1025" y2="240" />
                    <line x1="1062" y1="60" x2="1062" y2="240" />
                    <line x1="1099" y1="60" x2="1099" y2="240" />
                    <line x1="988" y1="105" x2="1136" y2="105" />
                    <line x1="988" y1="150" x2="1136" y2="150" />
                    <line x1="988" y1="195" x2="1136" y2="195" />
                </g>
                <g stroke="#2563EB" stroke-linecap="round" fill="none">
                    <line
                        x1="80"
                        y1="296"
                        x2="420"
                        y2="296"
                        stroke-width="2"
                        opacity="0.20"
                    />
                    <line
                        x1="180"
                        y1="312"
                        x2="560"
                        y2="312"
                        stroke-width="2"
                        opacity="0.14"
                    />
                    <line
                        x1="470"
                        y1="296"
                        x2="540"
                        y2="296"
                        stroke-width="3"
                        opacity="0.28"
                    />
                </g>
                <g>
                    <rect
                        x="72"
                        y="196"
                        width="58"
                        height="58"
                        rx="6"
                        fill="#C73E3A"
                    />
                    <rect
                        x="78"
                        y="202"
                        width="46"
                        height="46"
                        rx="3"
                        fill="none"
                        stroke="#FFFFFF"
                        stroke-width="1.5"
                        opacity="0.85"
                    />
                    <text
                        x="101"
                        y="238"
                        text-anchor="middle"
                        font-family="SimSun, Songti SC, serif"
                        font-size="30"
                        fill="#FFFFFF"
                    >
                        案
                    </text>
                </g>
            </svg>
        </figure>

        {if !empty($data['subheading'])}
        <div
            style="
                background: #f8fafc;
                border-left: 3px solid var(--primary);
                padding: 12px 14px;
                font-size: 13px;
                color: var(--text-secondary);
                line-height: 1.6;
                margin-bottom: 20px;
                border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            "
        >
            {$data['subheading']}
        </div>
        {/if}

        <!-- 正文排版 -->
        <div class="nhc-mcase-body">
            {$data['content']|htmlspecialchars_decode}
        </div>

        <!-- 移动端文末项目说明与咨询 -->
        <div
            style="
                margin-top: 28px;
                padding: 16px;
                background: #f8fafc;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-sm);
                font-size: 12px;
                color: var(--text-secondary);
                line-height: 1.6;
            "
        >
            <strong>项目团队说明：</strong
            >以上案例来自纳海川实际交付项目。如有同类业务需求，可预约沟通，我们结合具体场景提供针对性方案，支持源码交付与私有化部署。
        </div>
        <div
            style="
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 14px;
            "
        >
            <a
                class="nhc-mcase-btn nhc-mcase-btn-primary"
                href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}"
                >预约咨询</a
            >
            <a
                class="nhc-mcase-btn nhc-mcase-btn-ghost"
                href="tel:{:__config('site_mobile','value')}"
                >电话咨询</a
            >
            <a
                class="nhc-mcase-btn nhc-mcase-btn-ghost"
                href="{:addon_url('official/web.official_case_show/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid')])}"
                >返回案例列表</a
            >
        </div>

        <!-- 移动端上一篇/下一篇 -->
        <div
            class="info_previous_next_wrap"
            style="
                margin-top: 24px;
                padding-top: 16px;
                border-top: 1px dashed var(--border-color);
                display: flex;
                flex-direction: column;
                gap: 10px;
            "
        >
            <div class="Previous" style="font-size: 13px">
                <span style="color: var(--text-muted)">上一篇案例：</span>
                {if empty($before)}
                <span style="color: #94a3b8"
                    >{:__l('index','There no data')}</span
                >
                {else/}
                <a
                    href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$before['id']])}"
                    style="color: var(--primary)"
                    >{$before['title']}</a
                >
                {/if}
            </div>
            <div class="Next" style="font-size: 13px">
                <span style="color: var(--text-muted)">下一篇案例：</span>
                {if empty($after)}
                <span style="color: #94a3b8"
                    >{:__l('index','There no data')}</span
                >
                {else/}
                <a
                    href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$after['id']])}"
                    style="color: var(--primary)"
                    >{$after['title']}</a
                >
                {/if}
            </div>
        </div>
    </article>
    {/if}
</div>
<!-- 纳海川移动端客户案例详情页 结束 -->
{/block}