{extend name="web/official_common/pc/base" /} {block name="content"}
<!-- 纳海川官方网站 客户案例详情页 开始 -->
<style>
    .nhc-case-detail-art svg {
        display: block;
        width: 100%;
        height: auto;
    }
    .nhc-case-body {
        font-size: 16px;
        line-height: 1.8;
        color: var(--text-primary);
        overflow-wrap: break-word;
    }
    .nhc-case-body p {
        margin: 0 0 1em 0;
    }
    .nhc-case-body img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px;
        display: block;
        margin: 1.5em auto;
    }
    .nhc-case-body h2 {
        font-family: var(--font-serif);
        font-size: 22px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 2em 0 0.8em 0;
        padding-bottom: 0.5em;
        border-bottom: 1px solid var(--border-color);
    }
    .nhc-case-body h3 {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 1.8em 0 0.7em 0;
    }
    .nhc-case-body ul,
    .nhc-case-body ol {
        margin: 0 0 1em 0;
        padding-left: 1.6em;
    }
    .nhc-case-body li {
        margin-bottom: 0.4em;
    }
    .nhc-case-body a {
        color: var(--primary);
        text-underline-offset: 3px;
    }
    .nhc-case-body a:hover {
        color: var(--primary-hover);
    }
    .nhc-case-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        margin: 1.5em 0;
    }
    .nhc-case-body th,
    .nhc-case-body td {
        border: 1px solid var(--border-color);
        padding: 10px 14px;
        font-size: 14px;
        text-align: left;
    }
    .nhc-case-body th {
        background: #f8fafc;
        font-weight: 600;
    }
    .nhc-case-body blockquote {
        margin: 1.5em 0;
        padding: 14px 18px;
        background: #f8fafc;
        border-left: 3px solid var(--primary);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        color: var(--text-secondary);
    }
    .nhc-case-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 28px;
        border-radius: var(--radius-sm);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition:
            background-color 200ms ease-out,
            border-color 200ms ease-out,
            transform 200ms ease-out;
    }
    .nhc-case-btn-primary {
        background: var(--primary);
        color: #ffffff;
    }
    .nhc-case-btn-primary:hover {
        background: var(--primary-hover);
        color: #ffffff;
        transform: translateY(-1px);
    }
    .nhc-case-btn-ghost {
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        background: #ffffff;
    }
    .nhc-case-btn-ghost:hover {
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-1px);
    }
    .nhc-case-btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 20px;
    }
    a:focus-visible,
    .nhc-case-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    .nhc-case-nav-card {
        display: block;
        height: 100%;
        padding: 22px 24px;
        background: #f8fafc;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        text-decoration: none;
        transition:
            transform 200ms ease-out,
            border-color 200ms ease-out,
            background-color 200ms ease-out;
    }
    a.nhc-case-nav-card:hover {
        transform: translateY(-2px);
        border-color: var(--primary);
        background: #ffffff;
    }
    .nhc-case-nav-label {
        display: block;
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 8px;
    }
    .nhc-case-nav-title {
        display: block;
        font-family: var(--font-serif);
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.5;
    }
    .nhc-case-nav-empty {
        opacity: 0.6;
        cursor: not-allowed;
    }
    @media (prefers-reduced-motion: reduce) {
        .nhc-case-btn,
        .nhc-case-nav-card {
            transition: none;
        }
        a.nhc-case-nav-card:hover,
        .nhc-case-btn-primary:hover,
        .nhc-case-btn-ghost:hover {
            transform: none;
        }
    }
</style>
<div class="nhc-article-detail-wrap">
    <div class="nhc-container" style="max-width: 980px">
        <!-- 面包屑导航 -->
        <nav class="nhc-breadcrumb" aria-label="当前位置">
            <a href="{:addon_url('official/web.official_home/index')}">首页</a>
            <span class="sep">&gt;</span>
            <a
                href="{:addon_url('official/web.official_case_show/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid')])}"
                >客户案例</a
            >
            <span class="sep">&gt;</span>
            <span style="color: var(--text-primary); font-weight: 500"
                >正文</span
            >
        </nav>

        {if empty($data)}
        <!-- 空状态：案例不存在或已下架 -->
        <article
            style="
                background: #ffffff;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-sm);
                padding: 64px 48px;
                box-shadow: var(--shadow-subtle);
                text-align: center;
            "
        >
            <div style="margin-bottom: 16px">
                <span class="nhc-seal">暂无内容</span>
            </div>
            <h1
                style="
                    font-family: var(--font-serif);
                    font-size: 26px;
                    font-weight: 700;
                    color: var(--text-primary);
                    margin: 0 0 12px 0;
                "
            >
                该案例不存在或已下架
            </h1>
            <p
                style="
                    font-size: 14px;
                    color: var(--text-secondary);
                    line-height: 1.7;
                    margin: 0 0 8px 0;
                "
            >
                页面可能已被归档，可返回案例列表查看其他项目实录。
            </p>
            <div class="nhc-case-btn-row" style="justify-content: center">
                <a
                    class="nhc-case-btn nhc-case-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-case-btn nhc-case-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: 48px;
                box-shadow: var(--shadow-subtle);
            "
        >
            <!-- 案例头部信息 -->
            <header class="nhc-article-header">
                <div
                    style="
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        margin-bottom: 16px;
                    "
                >
                    <span class="nhc-seal">项目实录</span>
                    <span class="nhc-article-category-badge"
                        >{:ze($category,'name')}</span
                    >
                </div>
                <h1 class="nhc-article-detail-title">{$data['title']}</h1>
                <div class="nhc-article-detail-meta">
                    <span>
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <rect
                                x="3"
                                y="4"
                                width="18"
                                height="18"
                                rx="2"
                                ry="2"
                            />
                            <line x1="16" y1="2" x2="16" y2="6" />
                            <line x1="8" y1="2" x2="8" y2="6" />
                            <line x1="3" y1="10" x2="21" y2="10" />
                        </svg>
                        发布时间：{:date('Y-m-d H:i', $data['createtime'])}
                    </span>
                    <span>
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <path d="M4 7V4h16v3" />
                            <path d="M9 20h6" />
                            <path d="M12 4v16" />
                        </svg>
                        所属分类：{:ze($category,'name')}
                    </span>
                    {if !empty($data['source'])}
                    <span>
                        <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            aria-hidden="true"
                        >
                            <path
                                d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
                            />
                            <circle cx="12" cy="7" r="4" />
                        </svg>
                        合作客户： {if !empty($data['source_url'])}
                        <a
                            href="{$data['source_url']}"
                            target="_blank"
                            rel="noopener noreferrer"
                            style="color: var(--primary)"
                            >{$data['source']}</a
                        >
                        {else/}
                        <span>{$data['source']}</span>
                        {/if}
                    </span>
                    {/if}
                </div>
            </header>

            <!-- 抽象配图：远山叠嶂 · 窗棂日月 -->
            <figure
                class="nhc-case-detail-art"
                style="
                    margin: 0 0 36px 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="nhcCaseSky"
                            x1="0"
                            y1="0"
                            x2="0"
                            y2="1"
                        >
                            <stop offset="0" stop-color="#FFFFFF" />
                            <stop offset="1" stop-color="#EFF6FF" />
                        </linearGradient>
                        <linearGradient
                            id="nhcCaseSun"
                            x1="0"
                            y1="0"
                            x2="0"
                            y2="1"
                        >
                            <stop offset="0" stop-color="#7DD3FC" />
                            <stop offset="1" stop-color="#2563EB" />
                        </linearGradient>
                        <radialGradient
                            id="nhcCaseDots"
                            cx="0.5"
                            cy="0.5"
                            r="0.5"
                        >
                            <stop
                                offset="0"
                                stop-color="#2563EB"
                                stop-opacity="0.10"
                            />
                            <stop
                                offset="1"
                                stop-color="#2563EB"
                                stop-opacity="0"
                            />
                        </radialGradient>
                    </defs>
                    <rect
                        x="0"
                        y="0"
                        width="1200"
                        height="360"
                        fill="url(#nhcCaseSky)"
                    />
                    <rect
                        x="0"
                        y="0"
                        width="1200"
                        height="360"
                        fill="url(#nhcCaseDots)"
                    />
                    <!-- 远山三叠 -->
                    <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"
                    />
                    <polygon
                        points="700,170 800,210 700,270 640,270"
                        fill="#FFFFFF"
                        opacity="0.28"
                    />
                    <!-- 日月 -->
                    <circle
                        cx="880"
                        cy="105"
                        r="48"
                        fill="url(#nhcCaseSun)"
                        opacity="0.92"
                    />
                    <circle
                        cx="880"
                        cy="105"
                        r="60"
                        fill="none"
                        stroke="#2563EB"
                        stroke-width="1.5"
                        opacity="0.25"
                    />
                    <circle
                        cx="880"
                        cy="105"
                        r="72"
                        fill="none"
                        stroke="#2563EB"
                        stroke-width="1"
                        opacity="0.12"
                    />
                    <!-- 窗棂 -->
                    <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="60"
                            y1="328"
                            x2="340"
                            y2="328"
                            stroke-width="2"
                            opacity="0.10"
                        />
                        <line
                            x1="470"
                            y1="296"
                            x2="540"
                            y2="296"
                            stroke-width="3"
                            opacity="0.28"
                        />
                        <line
                            x1="620"
                            y1="312"
                            x2="700"
                            y2="312"
                            stroke-width="3"
                            opacity="0.22"
                        />
                    </g>
                    <g fill="#06B6D4">
                        <circle cx="500" cy="250" r="3" opacity="0.5" />
                        <circle cx="540" cy="238" r="2.4" opacity="0.45" />
                        <circle cx="576" cy="228" r="2" opacity="0.4" />
                    </g>
                    <!-- 紫点弧线点缀 -->
                    <g fill="#7C3AED">
                        <circle cx="240" cy="120" r="3" opacity="0.35" />
                        <circle cx="268" cy="100" r="2.4" opacity="0.3" />
                        <circle cx="292" cy="82" r="2" opacity="0.25" />
                    </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: 16px 20px;
                    margin-bottom: 32px;
                    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
                    font-size: 14px;
                    color: var(--text-secondary);
                    line-height: 1.7;
                "
            >
                <strong>核心要点：</strong>{$data['subheading']}
            </div>
            {/if}

            <!-- 正文区域 -->
            <div class="nhc-case-body">
                {$data['content']|htmlspecialchars_decode}
            </div>

            <!-- 文末项目团队说明与咨询 -->
            <div
                style="
                    margin-top: 48px;
                    padding: 24px;
                    background: #f8fafc;
                    border: 1px solid var(--border-color);
                    border-radius: var(--radius-sm);
                "
            >
                <div style="display: flex; align-items: flex-start; gap: 16px">
                    <div
                        style="
                            width: 44px;
                            height: 44px;
                            border-radius: var(--radius-sm);
                            background: var(--primary);
                            color: #ffffff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: 700;
                            font-size: 18px;
                            flex-shrink: 0;
                        "
                        aria-hidden="true"
                    >
                        川
                    </div>
                    <div>
                        <div
                            style="
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                margin-bottom: 6px;
                            "
                        >
                            <span
                                style="
                                    font-family: var(--font-serif);
                                    font-size: 16px;
                                    font-weight: 700;
                                    color: var(--text-primary);
                                "
                                >贵阳纳海川科技有限公司 · 项目团队</span
                            >
                            <span
                                class="nhc-seal"
                                style="font-size: 10px; padding: 1px 6px"
                                >项目实录</span
                            >
                        </div>
                        <p
                            style="
                                font-size: 13px;
                                color: var(--text-secondary);
                                line-height: 1.6;
                                margin: 0;
                            "
                        >
                            以上案例来自纳海川实际交付项目。如有同类业务需求，可预约沟通，我们结合具体场景提供针对性方案，支持源码交付与私有化部署。
                        </p>
                    </div>
                </div>
                <div class="nhc-case-btn-row">
                    <a
                        class="nhc-case-btn nhc-case-btn-primary"
                        href="{:addon_url('official/web.official_online_message/list',[':pid'=>18,':sid'=>18])}"
                        >预约咨询</a
                    >
                    <a
                        class="nhc-case-btn nhc-case-btn-ghost"
                        href="tel:{:__config('site_mobile','value')}"
                        >电话咨询</a
                    >
                    <a
                        class="nhc-case-btn nhc-case-btn-ghost"
                        href="{:addon_url('official/web.official_case_show/list',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid')])}"
                        >返回案例列表</a
                    >
                </div>
            </div>

            <!-- 上一篇与下一篇 -->
            <div
                class="info_previous_next_wrap nhc-article-nav-wrap"
                style="
                    margin-top: 32px;
                    padding-top: 24px;
                    border-top: 1px dashed var(--border-color);
                "
            >
                <div
                    style="
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 16px;
                    "
                >
                    <div class="Previous">
                        {if empty($before)}
                        <div class="nhc-case-nav-card nhc-case-nav-empty">
                            <span class="nhc-case-nav-label">上一篇案例</span>
                            <span class="nhc-case-nav-title"
                                >{:__l('index','There no data')}</span
                            >
                        </div>
                        {else/}
                        <a
                            href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$before['id']])}"
                            class="nhc-case-nav-card"
                            title="{$before['title']}"
                        >
                            <span class="nhc-case-nav-label"
                                >&larr; 上一篇案例</span
                            >
                            <span class="nhc-case-nav-title"
                                >{$before['title']}</span
                            >
                        </a>
                        {/if}
                    </div>
                    <div class="Next">
                        {if empty($after)}
                        <div
                            class="nhc-case-nav-card nhc-case-nav-empty"
                            style="text-align: right"
                        >
                            <span class="nhc-case-nav-label">下一篇案例</span>
                            <span class="nhc-case-nav-title"
                                >{:__l('index','There no data')}</span
                            >
                        </div>
                        {else/}
                        <a
                            href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$after['id']])}"
                            class="nhc-case-nav-card"
                            style="text-align: right"
                            title="{$after['title']}"
                        >
                            <span class="nhc-case-nav-label"
                                >下一篇案例 &rarr;</span
                            >
                            <span class="nhc-case-nav-title"
                                >{$after['title']}</span
                            >
                        </a>
                        {/if}
                    </div>
                </div>
            </div>
        </article>
        {/if}
    </div>
</div>
<!-- 客户案例详情页 结束 -->
{/block}