about-team advantage

app/pages/about/index.vue

@@ -1,11 +1,118 @@
 <script lang="ts" setup>
+import type {TabsItem} from '@nuxt/ui'
 
+const items = [
+  {
+    label: '团队简介',
+    description: 'Make changes to your account here. Click save when you\'re done.',
+    icon: 'i-lucide-users',
+    slot: 'team' as const
+  },
+  {
+    label: '我们的优势',
+    description: 'Make changes to your account here. Click save when you\'re done.',
+    icon: 'i-lucide-layers',
+    slot: 'advantage' as const
+  },
+  {
+    label: '大事记',
+    description: 'Make changes to your account here. Click save when you\'re done.',
+    icon: 'i-lucide-cctv',
+    slot: 'account' as const
+  },
+  {
+    label: '荣誉资质',
+    description: 'Make changes to your account here. Click save when you\'re done.',
+    icon: 'i-lucide-circle-star',
+    slot: 'account' as const
+  },
+  {
+    label: '合作伙伴',
+    description: 'Change your password here. After saving, you\'ll be logged out.',
+    icon: 'i-lucide-heart-handshake',
+    slot: 'password' as const
+  }
+] satisfies TabsItem[]
+
+const cards = [
+  {
+    title: "国家级科研平台支撑",
+    description: "智能农业技术研究室隶属于国家级农业科研机构——中国农业科学院农业信息研究所，长期致力于农业信息技术应用研究与农业问题研究，对农业生产中人工智能和模拟模型技术、农产品质量安全控制技术、农业宏观决策分析技术、地理信息系统研究和应用等拥有较深刻的研究和丰富的实践积累。同时作为农业部农业大数据重点实验室和农业部农业信息服务技术重点实验室成员之一，拥有丰富的数据资源和计算资源。",
+    icon: "i-heroicons-academic-cap",
+    image: "/img/about/a1.png",
+    alt: "科研平台"
+  },
+  {
+    title: "复合型专家与技术团队",
+    description: "拥有作物信息科学、作物气象学等农学背景以及计算机科学、地图学与地理信息系统、农业信息技术、管理学等复合型专业背景的科研团队，长期从事农业信息技术研究与农业生产智能管控平台研发工作；同时拥有专门从事软硬件研发与运维服务的技术团队，为项目顺利实施提供了有力的专家支撑和技术保障。",
+    icon: "i-heroicons-user-group",
+    image: "/img/about/a2.png",
+    alt: "专家团队"
+  },
+  {
+    title: "聚焦蜂产业需求前沿",
+    description: "作为国内最早开展蜂产业信息技术研究的团队之一，已深耕蜂产业十余年，承担国家蜂产业关键技术及设备攻关项目，紧密围绕蜂产业发展需求和痛点，开展蜂业数字化、智能化、标准化养殖模式研究与应用，精准提供整体化解决方案。",
+    icon: "i-heroicons-light-bulb",
+    image: "/img/about/a3.png",
+    alt: "蜂产业研究"
+  },
+  {
+    title: "强大的产业体系护航",
+    description: "团队负责人为国家蜂产业技术体系岗位科学家，可充分发挥产业体系优势，借力行业资源，直接对接全国各省实验站和知名企业，孵化开发的产品可通过全国示范区快速推广。",
+    icon: "i-heroicons-shield-check",
+    image: "/img/about/a4.png",
+    alt: "产业体系"
+  },
+  {
+    title: "软硬一体化定制研发保障",
+    description: "提供蜂业全产业信息自动获取、查询、追溯及大数据分析等智能管控软件以及智能蜂箱等硬件设备定制化研发、生产服务，制定软硬一体化智慧养殖解决方案，建设高标准蜂场，提高蜂业生产效能。",
+    icon: "i-heroicons-cog",
+    image: "/img/about/a5.png",
+    alt: "软硬一体化"
+  }
+]
 </script>
-
 <template>
   <UPage>
-    <UPageSection>
-      <img alt="" src="/img/img.png">
+    <img alt="" class="w-full" src="/img/about/banner.png">
+    <UPageSection
+        :style="{ backgroundImage: `url('/img/about/bg.png')` ,    }"
+        class="space-y-6 bg-cover bg-no-repeat bg-center w-full mb-4">
+      <UTabs :items="items" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
+        <template #team="{ item }">
+
+          <view class="grid lg:grid-cols-[2fr_3fr] gap-4 items-center">
+            <img alt="" src="/img/about/teamPhoto.png">
+            <img alt="" src="/img/about/about.png">
+
+          </view>
+
+        </template>
+
+        <template #advantage="{ item }">
+
+          <div
+
+              class="space-y-6 ">
+            <UPageCard
+                v-for="(card, index) in cards"
+                :key="index"
+                :description="card.description"
+                :icon="card.icon"
+                :title="card.title"
+                :ui="{
+        container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6',
+      }"
+                orientation="horizontal"
+                reverse
+                spotlight
+                spotlight-color="primary"
+            >
+              <img :alt="card.alt" :src="card.image" class="w-16 m-auto">
+            </UPageCard>
+          </div>
+        </template>
+      </UTabs>
     </upagesection>
   </UPage>
 </template>