7ce37ad995
- 删掉 details.html / details_e.html 旧结构（InfoTitle / download / right_body）， 与 official_journalism/details(.html/_e.html) 保持同一版式语言： 面包屑、项目实录 seal + 分类徽标、H1、发布时间与所属分类、正文、文末项目团队 说明、上一篇 / 下一篇、预约咨询 + 电话咨询 + 返回案例列表 - 配抽象 inline SVG 配图「远山叠嶂 · 窗棂日月」（科技蓝 + 青 + 紫，水墨式分层， 窗棂格纹 + 印章点缀），aria-hidden 装饰图，零新增文件 - 用词规范：去掉阅读量展示，空数据给友好空状态（该案例不存在或已下架） - 验证：标签配平通过，无旧类名残留；3 项失败为并行会话半成品导致， 经 stash 对照与本改动无关（失败测试均不读取本文件）
226 行
17 KiB
HTML
226 行
17 KiB
HTML
{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">></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">></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">← 上一篇案例</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">下一篇案例 →</span>
|
|
<span class="nhc-case-nav-title">{$after['title']}</span>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<!-- 客户案例详情页 结束 -->
|
|
{/block}
|