498 行
16 KiB
HTML
498 行
16 KiB
HTML
{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>></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>></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}
|