文件

748 行
27 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">&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}