Dai0814
9955e830ce
mirror-to-gitee / mirror (push) Successful in 4s
对比 https://www.facms.cn 后调整三处结构性差异： 1. 顺序归位 参考站是「产品功能 → 核心能力」，先讲做什么再讲凭什么。 上一版我把核心能力提到前面并染成深色，属于人为制造差异。 现在改回：项目 → 产品功能 → 核心能力 → 界面预览。 2. 撤掉深色块 参考站全程浅色，靠留白与间距分段，没有深色区块打断。 移除 .p-section--deep 的使用，核心能力回归 p-section--alt 浅灰， 与前后白底交替，和整站色阶统一。 （样式定义保留，后续需要强调区块时可用。） 3. 核心能力改标签切换 参考站核心能力是一条「通用特性」+ 9 个产品分组的标签切换。 新增 abilityGroups：通用底座 / iotLCM / 秀杰 DTU / XiuAdmin 四组， 每组 6 项，复用 CapabilityTabs（加 source="home" 与 cols 参数）。 替代原先 8 张平铺卡片。 4. 产品功能密度对齐 参考站产品功能 9 张卡各带 6 项功能点。原先我们只有 3 张卡 （每条产品线一张），信息密度偏低。 拆成 9 张：卡与库存 / 通道与上游 / 资费与计费 / 组织与账号 / 生产与研发 / 代理与客户 / 设备接入 / 中后台底座 / 开发效率。 验证 - 构建 13 页，274 条引用 0 失效 - 浏览器实测区块顺序：hero → projects → features → core → preview → foundation → how → docs → cta，无 .p-section--deep 残留 - 产品功能 9 卡、核心能力 4 标签每标签 6 卡 - 移动端 390px 无横向溢出
85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import {
|
|
iotlcmGroups,
|
|
dtuGroups,
|
|
abilityGroups,
|
|
type CapGroup,
|
|
} from '../../../data/content'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** 数据源：iotlcm / dtu 用于项目详情页，home 用于首页核心能力 */
|
|
source?: 'iotlcm' | 'dtu' | 'home'
|
|
/** 三栏还是四栏 */
|
|
cols?: 3 | 4
|
|
}>(),
|
|
{ source: 'iotlcm', cols: 3 }
|
|
)
|
|
|
|
const groups: CapGroup[] =
|
|
props.source === 'dtu'
|
|
? dtuGroups
|
|
: props.source === 'home'
|
|
? abilityGroups
|
|
: iotlcmGroups
|
|
|
|
const active = ref(groups[0]?.id ?? '')
|
|
const current = computed(() => groups.find((g) => g.id === active.value) ?? groups[0])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cap-tabs">
|
|
<div class="p-tabs" role="tablist">
|
|
<button
|
|
v-for="g in groups"
|
|
:key="g.id"
|
|
class="p-tab"
|
|
:class="{ 'is-active': g.id === active }"
|
|
role="tab"
|
|
:aria-selected="g.id === active"
|
|
@click="active = g.id"
|
|
>
|
|
{{ g.name }}
|
|
</button>
|
|
</div>
|
|
|
|
<p v-if="current" class="cap-intro">{{ current.intro }}</p>
|
|
|
|
<div
|
|
v-if="current"
|
|
:key="current.id"
|
|
class="p-grid cap-grid"
|
|
:class="cols === 4 ? 'p-grid--4' : 'p-grid--3'"
|
|
>
|
|
<div v-for="(item, i) in current.items" :key="item.title" class="p-card ca-card">
|
|
<span class="p-card-index">{{ String(i + 1).padStart(2, '0') }}</span>
|
|
<h3 class="p-card-title">{{ item.title }}</h3>
|
|
<p class="p-card-text">{{ item.text }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cap-intro {
|
|
max-width: 760px;
|
|
margin: 0 auto 36px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
color: var(--p-ink-2);
|
|
}
|
|
|
|
.cap-grid {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.cap-intro {
|
|
margin-bottom: 24px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|