From 7ce37ad99566d291aabdc4e0a1a5d2110aa861fc Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Thu, 5 Nov 2026 13:53:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=88=E4=BE=8B=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=EF=BC=9A=E5=88=A0=E9=99=A4=E6=97=A7=E9=97=BB?=
 =?UTF-8?q?=E8=AE=AF=E5=BC=8F=E6=A8=A1=E6=9D=BF=EF=BC=8C=E6=8C=89=E8=B5=84?=
 =?UTF-8?q?=E8=AE=AF=E8=AF=A6=E6=83=85=E6=A0=87=E5=87=86=E9=87=8D=E5=BB=BA?=
 =?UTF-8?q?=20PC=20+=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 删掉 details.html / details_e.html 旧结构（InfoTitle / download / right_body），
  与 official_journalism/details(.html/_e.html) 保持同一版式语言：
  面包屑、项目实录 seal + 分类徽标、H1、发布时间与所属分类、正文、文末项目团队
  说明、上一篇 / 下一篇、预约咨询 + 电话咨询 + 返回案例列表
- 配抽象 inline SVG 配图「远山叠嶂 · 窗棂日月」（科技蓝 + 青 + 紫，水墨式分层，
  窗棂格纹 + 印章点缀），aria-hidden 装饰图，零新增文件
- 用词规范：去掉阅读量展示，空数据给友好空状态（该案例不存在或已下架）
- 验证：标签配平通过，无旧类名残留；3 项失败为并行会话半成品导致，
  经 stash 对照与本改动无关（失败测试均不读取本文件）
---
 .../view/web/official_case_show/details.html  | 266 ++++++++++++++----
 .../web/official_case_show/details_e.html     | 202 +++++++++----
 2 files changed, 363 insertions(+), 105 deletions(-)

diff --git a/addons/official/view/web/official_case_show/details.html b/addons/official/view/web/official_case_show/details.html
index 420a813..860aa5d 100644
--- a/addons/official/view/web/official_case_show/details.html
+++ b/addons/official/view/web/official_case_show/details.html
@@ -1,61 +1,225 @@
-{extend name="web/official_common/pc/base" /}
+{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>
 
-{block name="content"}
-<!--主体内容 开始-->
-<div class="download">
-    <!--右侧区域 开始-->
-    <div id="right">
-        <div class="right_title"></div>
-        <div class="right_body">
-            <div class="InfoTitle"><h1>{$data['title']}</h1></div>
-            <div class="info_from_wrap">
-                {if $data['source']}
-                <b>{:__l('index','Source')}：</b>
-                    {if $data['source_url']}
-                        <a href="{$data['source_url']}">{$data['source']}</a>&nbsp;
-                    {else/}
-                        <a href="javascript:;">{$data['source']}</a>&nbsp;
-                    {/if}
-                {/if}
-                <b>{:__l('index','Date')}：</b>{:date('Y-m-d H:i:s',$data['createtime'])}&nbsp;
-                <b>{:__l('index','Click')}：</b>{$data['click']}&nbsp;
-                <b>{:__l('index','Belong to')}：</b><a href="javascript:;">{:ze($category,'name')}</a>
+        {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>
-            <!-- 文章内容  开始-->
-            <div class="InfoSContent"></div>
-            <div class="InfoContent">
-                <div>
-                    {$data['content']|htmlspecialchars_decode}
+        </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>
-            </div>
-            <!-- 文章内容  结束-->
-
-            <!-- 当前信息 上一条 下一条  开始-->
-            <div class="info_previous_next_wrap">
-                <div class="Previous">
-                    <b>{:__l('index','Previous page')}：</b>
-                    {if empty($before)}
-                        {:__l('index','There no data')}
-                    {else/}
-                        <a href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$before['id']])}" title="{$before['title']}">{$before['title']}</a>
+                <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>
 
-                <div class="Next">
-                    <b>{:__l('index','Page down')}：</b>
-                    {if empty($after)}
-                        {:__l('index','There no data')}
-                    {else/}
-                        <a href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$after['id']])}" title="{$after['title']}">{$after['title']}</a>
-                    {/if}
+            <!-- 抽象配图：远山叠嶂 · 窗棂日月 -->
+            <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>
-        <div class="right_bottom"></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 class="clear"></div>
 </div>
-<!--主体内容 结束-->
-{/block}
\ No newline at end of file
+<!-- 客户案例详情页 结束 -->
+{/block}
diff --git a/addons/official/view/web/official_case_show/details_e.html b/addons/official/view/web/official_case_show/details_e.html
index 09a4840..7209713 100644
--- a/addons/official/view/web/official_case_show/details_e.html
+++ b/addons/official/view/web/official_case_show/details_e.html
@@ -1,61 +1,155 @@
 {extend name="web/official_common/mobile/base" /}
 
 {block name="content"}
-<!--主体内容 开始-->
-<div class="download">
-    <!--右侧区域 开始-->
-    <div id="right">
-        <div class="right_title"></div>
-        <div class="right_body">
-            <div class="InfoTitle"><h1>{$data['title']}</h1></div>
-            <div class="info_from_wrap">
-                {if $data['source']}
-                <b>{:__l('index','Source')}：</b>
-                    {if $data['source_url']}
-                        <a href="{$data['source_url']}">{$data['source']}</a>
-                    {else/}
-                        <a href="javascript:;">{$data['source']}</a>
-                    {/if}
-                {/if}
-                <b>{:__l('index','Date')}：</b>{:date('Y-m-d',$data['createtime'])}
-                <b>{:__l('index','Click')}：</b>{$data['click']}
-            <!--<b>{:__l('index','Belong to')}：</b><a href="/official_video/list{:get_pid_sid()}" target="_blank">{:ze($category,'name')}</a>-->
-            </div>
-            <!-- 文章内容  开始-->
-            <div class="InfoSContent"></div>
-            <div class="InfoContent">
-                <div>
-                    {$data['content']|htmlspecialchars_decode}
-                </div>
-            </div>
-            <!-- 文章内容  结束-->
+<!-- 纳海川移动端客户案例详情页 开始 -->
+<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);">
 
-            <!-- 当前信息 上一条 下一条  开始-->
-            <div class="info_previous_next_wrap">
-                <div class="Previous">
-                    <b>{:__l('index','Previous page')}：</b>
-                    {if empty($before)}
-                        {:__l('index','There no data')}
-                    {else/}
-                        <a href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$before['id']])}" title="{$before['title']}">{$before['title']}</a>
-                    {/if}
-                </div>
+    <!-- 移动端面包屑导航 -->
+    <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>
 
-                <div class="Next">
-                    <b>{:__l('index','Page down')}：</b>
-                    {if empty($after)}
-                        {:__l('index','There no data')}
-                    {else/}
-                        <a href="{:addon_url('official/web.official_case_show/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$after['id']])}" title="{$after['title']}">{$after['title']}</a>
-                    {/if}
-                </div>
-            </div>
-            <!-- 当前信息 上一条 下一条  结束-->
+    {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>
-        <div class="right_bottom"></div>
-    </div>
-    <!--右侧区域 结束-->
-    <div class="clear"></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}
\ No newline at end of file
+<!-- 纳海川移动端客户案例详情页 结束 -->
+{/block}