156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
type InfoItem = {
|
|
title: string
|
|
description: string
|
|
}
|
|
|
|
defineProps<{
|
|
title: string
|
|
description: string
|
|
overview: string[]
|
|
capabilityItems: InfoItem[]
|
|
featureItems: InfoItem[]
|
|
architectureImage: string
|
|
architectureImageAlt: string
|
|
caseImages?: string[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<section class="page-title">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col col-xs-12">
|
|
<h2>{{ title }}</h2>
|
|
<p>{{ description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features-section-s2 section-padding">
|
|
<div class="container">
|
|
<div class="main_pro col col-xs-12">
|
|
<div class="feature-grids clearfix">
|
|
<div class="part_1 col col-xs-12">
|
|
<div>
|
|
<h1>系统概述</h1>
|
|
<p v-for="paragraph in overview" :key="paragraph">{{ paragraph }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-grids2 clearfix">
|
|
<div class="part_5 col">
|
|
<h1>系统功能</h1>
|
|
<div class="gongneng">
|
|
<ul>
|
|
<li v-for="(item, index) in capabilityItems" :key="item.title" class="grid" style="background: #fff;">
|
|
<i class="service-pill">{{ String(index + 1).padStart(2, '0') }}</i>
|
|
<p>
|
|
<span>{{ item.title }}</span>
|
|
{{ item.description }}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg_hui feature-grids clearfix">
|
|
<div class="part_6">
|
|
<h1>系统特性</h1>
|
|
<div class="case1">
|
|
<dl v-for="item in featureItems" :key="item.title" class="grid service-feature-card">
|
|
<dd><span class="service-feature-mark">•</span></dd>
|
|
<dt class="tit_2">{{ item.title }}</dt>
|
|
<p>{{ item.description }}</p>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg_white feature-grids clearfix">
|
|
<div class="part_3 col col-xs-12">
|
|
<h1>系统架构</h1>
|
|
<div class="jiagou_box">
|
|
<div class="jiagou_main" style="display: block;">
|
|
<img :src="architectureImage" :alt="architectureImageAlt" class="service-architecture-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="caseImages?.length" class="bg_white feature-grids clearfix">
|
|
<div class="part_3 col col-xs-12">
|
|
<h1>成功案例</h1>
|
|
<div class="service-logo-grid">
|
|
<div v-for="item in caseImages" :key="item" class="service-logo-card">
|
|
<img :src="item" alt="成功案例标识" class="service-logo-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.service-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #0f3e71, #1481ff);
|
|
color: #fff;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.service-feature-card {
|
|
min-height: 260px;
|
|
}
|
|
|
|
.service-feature-mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, rgba(20, 129, 255, 0.1), rgba(20, 129, 255, 0.18));
|
|
color: #1481ff;
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.service-architecture-image {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.service-logo-grid {
|
|
display: grid;
|
|
gap: 18px;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
|
|
.service-logo-card {
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
|
|
padding: 18px;
|
|
}
|
|
|
|
.service-logo-image {
|
|
width: 100%;
|
|
height: 96px;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|