yf-portal-vue/src/views/index.vue

<template>
  <div class="bg-white">
    <Header />

    <section class="max-w-[1200px] mx-auto mt-6 mb-2 px-4 text-center">
      <h2 class="text-[28px] font-bold text-[#1f2d3d]">
        提供多维度、更可靠的数字化服务
      </h2>
      <p class="mt-2 text-[#606266]">
        围绕企业设备、场景、工厂、园区与政企服务提供一体化解决方案
      </p>
    </section>

    <section class="max-w-[1200px] mx-auto px-4 mb-8 mt-5">
      <div class="grid gap-5 grid-cols-1 md:grid-cols-3 xl:grid-cols-3">
        <CardItem
          v-for="card in cards"
          :key="card.key"
          :title="card.title"
          :desc="card.desc"
          :items="card.items"
          :bg="card.bg"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import Header from "@components/home/header.vue";
import CardItem from "@components/home/CardItem.vue";
import img1 from "@/assets/images/1.jpg";
import img2 from "@/assets/images/2.jpg";
import img3 from "@/assets/images/3.jpg";

type Card = {
  key: string;
  title: string;
  desc: string;
  bg: string;
  items: Array<{ label: string; tag?: "新" | "热" }>;
};

const cards: Card[] = [
  {
    key: "device",
    title: "经营管理平台",
    desc: "通过设备物联，实时掌握车间动态信息",
    bg: img1,
    items: [
      { label: "设备智能管理解决方案", tag: "新" },
      { label: "家电智能控制解决方案" },
      { label: "孪生制造一体化平台" },
    ],
  },
  {
    key: "scene",
    title: "生产指挥平台",
    desc: "深入工业场景，为中小企业数字化升级赋能",
    bg: img2,
    items: [
      { label: "机器视觉表面缺陷检测系统", tag: "热" },
      { label: "纺织服装大规模定制解决方案" },
      { label: "双碳场景" },
    ],
  },
  {
    key: "factory",
    title: "Chat BI平台",
    desc: "工厂上云，高效协同，生产效率和产品质量提升",
    bg: img3,
    items: [
      { label: "工业智慧仓储解决方案", tag: "热" },
      { label: "电子行业智能制造执行系统" },
      { label: "PCBA行业数字化工厂解决方案", tag: "新" },
    ],
  },
];
</script>

<style scoped></style>