293 lines
7.0 KiB
Vue
293 lines
7.0 KiB
Vue
<template>
|
||
<div class="our-plan-page">
|
||
<ihead></ihead>
|
||
|
||
<section class="page-banner">
|
||
<div class="gif-banner" aria-hidden="true">
|
||
<img src="/foundry_1.gif" alt="" class="banner-gif">
|
||
</div>
|
||
<div class="container banner-content">
|
||
<h1 class="banner-title">解决方案</h1>
|
||
<p class="banner-subtitle">覆盖 AI、App、小程序与 Web 产品交付，面向真实业务场景落地。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="main-content">
|
||
<div class="container">
|
||
<h2 class="section-title">核心服务</h2>
|
||
<div class="services-grid">
|
||
<article class="service-card" v-for="item in services" :key="item.title">
|
||
<div class="service-icon" v-html="item.icon"></div>
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.description }}</p>
|
||
<router-link :to="item.url" class="service-link">查看方案</router-link>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="main-content muted">
|
||
<div class="container">
|
||
<h2 class="section-title">交付方式</h2>
|
||
<div class="features">
|
||
<div class="feature-item" v-for="feature in features" :key="feature.title">
|
||
<h3>{{ feature.title }}</h3>
|
||
<p>{{ feature.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<ifooter></ifooter>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ihead from '@/components/ihead.vue'
|
||
import ifooter from '@/components/ifooter.vue'
|
||
|
||
const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`
|
||
|
||
export default {
|
||
name: 'ourPlan',
|
||
components: { ihead, ifooter },
|
||
data() {
|
||
return {
|
||
services: [
|
||
{
|
||
title: 'AI 集成',
|
||
description: '将智能能力接入知识库、客服、工单和运营流程，形成可验收业务结果。',
|
||
url: '/ourPlan/aiSolutions',
|
||
icon: icon('<path d="M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"/><path d="M9 9h6v6H9zM12 2v2M12 20v2M2 12h2M20 12h2"/>')
|
||
},
|
||
{
|
||
title: '智能建筑',
|
||
description: '整合空间、设备与巡检数据，支持告警联动和建筑运营看板。',
|
||
url: '/ourPlan/estateManagement',
|
||
icon: icon('<path d="M4 21V5.8C4 4.8 4.8 4 5.8 4h7.4c1 0 1.8.8 1.8 1.8V21"/><path d="M15 9h3.2c1 0 1.8.8 1.8 1.8V21"/><path d="M8 8h3M8 12h3M8 16h3M3 21h18"/>')
|
||
},
|
||
{
|
||
title: '物联网',
|
||
description: '连接设备与边缘数据，建设实时状态感知和运维调度能力。',
|
||
url: '/ourPlan/iot',
|
||
icon: icon('<circle cx="12" cy="12" r="3"/><path d="M3 9a9 9 0 0 1 18 0M6 12a6 6 0 0 1 12 0M9 15a3 3 0 0 1 6 0"/><path d="M12 15v6"/>')
|
||
},
|
||
{
|
||
title: '设施管理',
|
||
description: '围绕工单、保养、备件和验收搭建标准化设施运营流程。',
|
||
url: '/ourPlan/facilityManagement',
|
||
icon: icon('<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/>')
|
||
},
|
||
{
|
||
title: '系统集成',
|
||
description: '打通业务系统、数据平台和权限体系，减少重复建设成本。',
|
||
url: '/ourPlan/technologyIntegration',
|
||
icon: icon('<path d="M4 7h6v4H4zM14 13h6v4h-6z"/><path d="M10 9h4v2h-4zM10 14h4v2h-4z"/>')
|
||
},
|
||
{
|
||
title: 'App 交付',
|
||
description: '覆盖 iOS / Android 的业务应用设计、开发、联调和版本迭代。',
|
||
url: '/ourPlan/appDelivery',
|
||
icon: icon('<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M10 5h4M11 18h2"/>')
|
||
},
|
||
{
|
||
title: '小程序方案',
|
||
description: '提供小程序从场景定义、功能开发到上线运营的全流程支持。',
|
||
url: '/ourPlan/miniProgram',
|
||
icon: icon('<rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/>')
|
||
}
|
||
],
|
||
features: [
|
||
{
|
||
title: '先评估再实施',
|
||
description: '先确认数据质量、系统边界与业务目标，再定义交付优先级。'
|
||
},
|
||
{
|
||
title: '跨端协同开发',
|
||
description: '同一业务场景可同步规划 Web、App、小程序和后台管理能力。'
|
||
},
|
||
{
|
||
title: '结果可验收',
|
||
description: '围绕效率、时效、稳定性等指标跟踪上线效果，支持持续迭代。'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.our-plan-page {
|
||
min-height: 100vh;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.page-banner {
|
||
position: relative;
|
||
height: 440px;
|
||
color: #fff;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.banner-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.gif-banner {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.banner-gif {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
filter: saturate(0.86) brightness(0.7);
|
||
}
|
||
|
||
.banner-title {
|
||
margin: 0 0 16px;
|
||
font-size: 44px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
margin: 0 auto;
|
||
max-width: 760px;
|
||
color: rgba(255, 255, 255, 0.86);
|
||
font-size: 18px;
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 88px 0;
|
||
}
|
||
|
||
.main-content.muted {
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0 0 34px;
|
||
text-align: center;
|
||
color: #101828;
|
||
font-size: 34px;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.service-card {
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
padding: 28px;
|
||
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.service-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
margin-bottom: 16px;
|
||
color: #2563eb;
|
||
}
|
||
|
||
.service-icon /deep/ svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.8;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.service-card h3 {
|
||
margin: 0 0 10px;
|
||
color: #101828;
|
||
font-size: 21px;
|
||
}
|
||
|
||
.service-card p {
|
||
margin: 0 0 16px;
|
||
color: #667085;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.service-link {
|
||
color: #1d4ed8;
|
||
text-decoration: none;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 22px;
|
||
}
|
||
|
||
.feature-item {
|
||
border: 1px solid #dbe5f1;
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
padding: 26px;
|
||
}
|
||
|
||
.feature-item h3 {
|
||
margin: 0 0 10px;
|
||
color: #101828;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.feature-item p {
|
||
margin: 0;
|
||
color: #667085;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.page-banner {
|
||
height: 360px;
|
||
}
|
||
|
||
.services-grid,
|
||
.features {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.main-content {
|
||
padding: 52px 0;
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 22px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.service-card {
|
||
padding: 20px;
|
||
}
|
||
|
||
.feature-item {
|
||
padding: 18px;
|
||
}
|
||
}
|
||
</style>
|