classic-init

app/pages/classic/index.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+// 产业与科研平台数据
+const industryPlatforms = [
+  {
+    name: '中国蜂业信息服务平台',
+    image: '/img/classic/p1.png'
+  },
+  {
+    name: '蜂产品质量安全追溯平台',
+    image: '/img/classic/p2.png'
+  },
+  {
+    name: '首届全国优质成熟蜂蜜大会',
+    image: '/img/classic/p3.png'
+  }
+]
+
+// 示范蜂场数据
+const demonstrationFields = [
+  {
+    name: '北京京纯高标准示范蜂场',
+    image: '/img/classic/c1.png'
+  },
+  {
+    name: '湖北金叶情高标准示范蜂场',
+    image: '/img/classic/c2.png'
+  },
+  {
+    name: '广西蒙山高标准智慧蜂场',
+    image: '/img/classic/c3.png'
+  },
+  {
+    name: '重庆武隆数字化智慧蜂场',
+    image: '/img/classic/c4.png'
+  },
+  {
+    name: '蜜蜂大世界蜂群认养示范蜂场',
+    image: '/img/classic/c5.png'
+  }
+]
+</script>
+
+<template>
+  <UPage>
+    <img alt="" class="w-full" src="/img/classic/banner.png">
+    <UPageSection
+        :ui="{
+       container: 'flex flex-col lg:grid py-16 lg:py-12 gap-8 sm:gap-16',
+    }">
+      <!-- 面向产业与科研 -->
+      <UPageCard
+          :ui="{
+        title: 'font-bold text-2xl text-primary',
+        description:'font-semibold text-lg',
+        container: 'relative grid lg:grid-cols-[1fr_4fr] gap-8 p-6'
+      }"
+          description="紧跟产业需求，破解发展痛点，提供智能化、集约化的综合解决方案，推动产业升级，实现绿色发展。强化科技支撑与引领，注重科技创新与成果转化有机融合。"
+          highlight
+          highlight-color="primary"
+          icon="i-heroicons-building-library"
+          orientation="horizontal"
+          title="面向产业与科研"
+      >
+        <view class="grid lg:grid-cols-3 gap-4">
+
+          <view
+              v-for="(field, index) in industryPlatforms"
+              :key="index"
+              class="flex flex-col items-center justify-center text-center"
+          >
+            <img
+                :alt="field.name"
+                :src="field.image"
+                class="w-full rounded-lg shadow-sm mb-2"
+            >
+            <text class="py-2 text-lg font-bold">{{ field.name }}</text>
+          </view>
+        </view>
+      </UPageCard>
+
+      <!-- 面向企业与政府 -->
+      <UPageCard
+          :ui="{
+
+          title: 'font-bold text-2xl text-primary',
+description:'font-semibold text-lg',
+        container: 'grid lg:grid-cols-3 gap-4'
+      }"
+          description="精准定制，量身打造，协助构建先进实用、高效便捷的企业生产经营管理模式，实现生产经营智能化、精准化，管理高效化、便捷化。"
+          highlight
+          highlight-color="primary"
+          icon="i-heroicons-building-office"
+          orientation="horizontal"
+          title="面向企业与政府"
+      >
+
+        <view
+            v-for="(field, index) in demonstrationFields"
+            :key="index"
+            class="flex flex-col items-center justify-center text-center"
+        >
+          <img
+              :alt="field.name"
+              :src="field.image"
+              class="w-full rounded-lg shadow-sm mb-2"
+          >
+          <text class="py-2 text-lg font-bold">{{ field.name }}</text>
+        </view>
+
+      </UPageCard>
+    </UPageSection>
+  </UPage>
+</template>
+
+<style scoped>
+
+</style>