add serviceIcon

This commit is contained in:
WindowBird 2025-10-23 09:40:28 +08:00
parent 5a0497a6fe
commit 2d747f07c3
8 changed files with 65 additions and 12 deletions

View File

@ -5,10 +5,10 @@
<template>
<UPageCTA
:ui="{ container: 'border-0' } "
description="3D INTELLIGENT APIARY"
title="3D智慧蜂场"
/>
<img alt="" class="w-max" src="/img/index/model2.b444287.gif">
<img alt="" class="w-full px-40" src="/img/index/model2.b444287.gif">
</template>

View File

@ -1,5 +1,44 @@
<script setup>
import SmartApiaryCard from "~/components/landing/SmartApiaryCard.vue";
const services = [
{
title: "智慧蜂场建设",
description: "提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务,实现智能化养殖,提高管理效率,节省成本。",
iconSrc: "/img/index/s1.svg",
linkUrl: "/product/smart-farm"
},
{
title: "蜂产品质量追溯",
description: "建立完整的蜂产品质量追溯体系,从源头到终端全程可追溯,确保产品质量安全可靠。",
iconSrc: "/img/index/s2.svg",
linkUrl: "/product/quality-trace"
},
{
title: "智能蜂箱管理",
description: "采用物联网技术实时监控蜂箱状态,智能调节温湿度,提高蜜蜂养殖效率和生存率。",
iconSrc: "/img/index/s3.svg",
linkUrl: "/product/smart-hive"
},
{
title: "蜂业知识服务",
description: "提供专业的蜂业知识库和技术指导,帮助养殖户科学养殖,提升技术水平。",
iconSrc: "/img/index/s4.svg",
linkUrl: "/product/knowledge"
},
{
title: "蜂产业大数据",
description: "基于大数据分析的蜂产业监测预警系统,为产业发展提供数据支撑和决策依据。",
iconSrc: "/img/index/s5.svg",
linkUrl: "/product/big-data"
},
{
title: "无人机巡检",
description: "利用无人机技术进行蜂场巡检,高效监测蜂群状态和环境变化,降低人工成本。",
iconSrc: "/img/index/s6.svg",
linkUrl: "/product/drone-inspection"
}
]
</script>
<template>
@ -21,13 +60,21 @@ import SmartApiaryCard from "~/components/landing/SmartApiaryCard.vue";
<!-- 图片作为背景非内容 -->
</UPageHero>
<div class="w-45 h-45">
<SmartApiaryCard
description="提供蜂群、蜂箱、蜂场环境等信息远程实时自动获取、统计分析和监测预警服务,实现智能化养殖,提高管理效率,节省成本。"
icon-src="/img/index/s1.svg"
link-url="/product/smart-farm"
title="智慧蜂场建设"
/>
<!-- 服务卡片网格布局 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 lg:px-50">
<!-- 外层控制大小的容器 -->
<div
v-for="(service, index) in services"
:key="index"
class="w-45 aspect-square justify-center align-center"
>
<SmartApiaryCard
:description="service.description"
:icon-src="service.iconSrc"
:link-url="service.linkUrl"
:title="service.title"
/>
</div>
</div>

View File

@ -9,8 +9,9 @@
<!-- 正面内容 -->
<div
class="absolute inset-0 w-full h-full bg-white rounded-lg p-5 flex flex-col justify-center items-center backface-hidden">
<div class="h-16 flex justify-center items-center"/>
<img :src="iconSrc" alt="" class="w-2/3">
<div class="h-16 flex justify-center items-center">
<img :src="iconSrc" alt="" class=" h-16">
</div>
<p class="text-black text-xl mt-2.5 font-medium">
{{ title }}
</p>

1
public/img/index/s2.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43px" height="40px"> <path fill-rule="evenodd" fill="rgb(0, 166, 97)" d="M35.980,0.294 L7.012,0.294 L-0.002,17.762 L-0.002,39.341 L42.994,39.341 L42.994,17.762 L35.980,0.294 ZM26.391,13.778 L26.391,13.987 C26.391,16.676 24.196,18.857 21.491,18.857 C18.786,18.857 16.591,16.676 16.591,13.987 L16.591,13.778 L5.910,13.778 L9.728,4.278 L33.265,4.278 L37.082,13.778 L26.391,13.778 Z"/> </svg>

After

Width:  |  Height:  |  Size: 485 B

1
public/img/index/s3.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="47px"> <path fill-rule="evenodd" fill="rgb(0, 166, 97)" d="M19.134,37.294 C8.900,37.294 0.605,29.024 0.605,18.821 C0.605,8.618 8.900,0.347 19.134,0.347 C29.368,0.347 37.664,8.618 37.664,18.821 C37.664,29.024 29.368,37.294 19.134,37.294 ZM19.134,7.386 C12.810,7.386 7.665,12.516 7.665,18.821 C7.665,25.126 12.810,30.256 19.134,30.256 C25.458,30.256 30.604,25.126 30.604,18.821 C30.604,12.516 25.458,7.386 19.134,7.386 ZM33.429,31.020 C33.824,30.626 34.341,30.430 34.858,30.430 C35.375,30.430 35.892,30.626 36.287,31.020 L46.587,41.289 L41.479,46.382 L31.179,36.112 C30.390,35.326 30.390,34.050 31.179,33.263 L33.429,31.020 Z"/> </svg>

After

Width:  |  Height:  |  Size: 744 B

1
public/img/index/s4.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46px" height="42px"> <path fill-rule="evenodd" fill="rgb(0, 166, 97)" d="M45.714,25.621 C45.083,29.495 43.202,33.017 40.450,35.722 C40.066,36.100 39.561,36.285 39.054,36.285 C38.535,36.285 38.013,36.090 37.618,35.706 L24.842,23.304 L43.719,23.304 C44.970,23.304 45.912,24.408 45.714,25.621 ZM41.141,19.304 L23.045,19.304 L23.045,2.081 C23.045,0.987 23.950,0.094 25.044,0.094 C25.096,0.094 25.148,0.096 25.201,0.100 C36.265,0.957 42.828,8.417 43.164,17.286 C43.205,18.394 42.270,19.304 41.141,19.304 ZM31.187,38.386 C28.191,40.147 24.692,41.154 20.947,41.154 C9.889,41.154 0.930,32.363 0.930,21.521 C0.930,12.187 7.554,4.382 16.439,2.379 C16.594,2.344 16.749,2.327 16.901,2.327 C17.991,2.327 18.929,3.188 18.929,4.312 L18.929,22.508 C18.929,23.048 19.153,23.564 19.550,23.938 L31.552,35.246 C32.516,36.154 32.332,37.713 31.187,38.386 Z"/> </svg>

After

Width:  |  Height:  |  Size: 941 B

1
public/img/index/s5.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="46px"> <path fill-rule="evenodd" fill="rgb(0, 166, 97)" d="M22.652,11.583 L22.652,0.329 L23.314,0.329 C23.842,0.329 24.348,0.540 24.723,0.916 L33.412,9.658 C33.786,10.034 33.997,10.546 33.997,11.078 L33.997,11.583 L22.652,11.583 ZM33.967,15.818 L33.967,43.872 C33.967,44.696 33.304,45.364 32.486,45.364 L1.475,45.364 C0.656,45.364 -0.008,44.696 -0.008,43.872 L-0.008,1.821 C-0.008,0.997 0.656,0.329 1.475,0.329 L18.227,0.329 C19.046,0.329 19.709,0.997 19.709,1.821 L19.709,12.834 C19.709,13.658 20.372,14.326 21.190,14.326 L32.486,14.326 C33.304,14.326 33.967,14.994 33.967,15.818 ZM23.974,19.862 L10.274,19.862 C9.457,19.862 8.793,20.530 8.793,21.354 C8.793,22.179 9.457,22.846 10.274,22.846 L23.974,22.846 C24.793,22.846 25.456,22.179 25.456,21.354 C25.456,20.530 24.793,19.862 23.974,19.862 ZM25.456,27.011 C25.456,26.187 24.793,25.519 23.974,25.519 L10.274,25.519 C9.457,25.519 8.793,26.187 8.793,27.011 L8.793,27.012 C8.793,27.835 9.457,28.503 10.274,28.503 L23.974,28.503 C24.793,28.503 25.456,27.835 25.456,27.012 L25.456,27.011 ZM23.974,31.186 L10.274,31.186 C9.457,31.186 8.793,31.854 8.793,32.678 C8.793,33.502 9.457,34.171 10.274,34.171 L23.974,34.171 C24.793,34.171 25.456,33.502 25.456,32.678 C25.456,31.854 24.793,31.186 23.974,31.186 Z"/> </svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/img/index/s6.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1698376837434" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7666" xmlns:xlink="http://www.w3.org/1999/xlink" width="58px" height="52px"><path d="M891.23498667 161.10478222H133.34755555c-20.97152 0-37.86524445 16.89372445-37.86524444 37.86524444v528.94833778c0 20.97152 16.89372445 37.86524445 37.86524444 37.86524444h292.43619556v125.82912H284.22599111c-16.31118222 0-29.70965333 13.39847111-29.70965333 29.70965334s13.39847111 29.70965333 29.70965333 29.70965333h456.13056c16.31118222 0 29.70965333-13.39847111 29.70965334-29.70965333s-13.39847111-29.70965333-29.70965334-29.70965334H599.38133333v-125.82912h292.43619556c20.97152 0 37.86524445-16.89372445 37.86524444-37.86524444V198.97002666c-0.58254222-20.97152-17.47626667-37.86524445-38.44778666-37.86524444z m-538.26901334 386.80803556c11.65084445 11.65084445 11.65084445 30.29219555 0 41.94304-5.82542222 5.82542222-13.39847111 8.73813333-20.97152 8.73813333s-15.14609778-2.91271111-20.97152-8.73813333L205.00024889 483.83317333c-11.65084445-11.65084445-11.65084445-30.29219555 0-41.94304l106.60522666-106.60522667c11.65084445-11.65084445 30.29219555-11.65084445 41.94304 0s11.65084445 30.29219555 0 41.94304L267.91480889 462.86165333l85.05116444 85.05116445z m186.41351112 343.6999111h-54.17642667v-125.82912h54.17642667v125.82912zM613.94488889 345.77066666l-149.71335111 261.56145778c-5.24288 9.32067555-15.72864 15.14609778-25.63185778 15.14609778-5.24288 0-9.90321778-1.16508445-14.56355555-4.07779556-13.98101333-8.15559111-19.22389333-26.2144-11.06830223-40.77795555l149.71335111-261.56145778c8.15559111-13.98101333 26.2144-19.22389333 40.77795556-11.06830222 13.98101333 8.73813333 18.64135111 26.79694222 10.48576 40.77795555z m205.05486222 138.06250667l-106.02268444 106.02268445c-5.82542222 5.82542222-13.39847111 8.73813333-20.97152 8.73813333s-15.14609778-2.91271111-20.97152-8.73813333c-11.65084445-11.65084445-11.65084445-30.29219555 0-41.94304l85.05116444-85.05116445-85.05116444-85.05116445c-11.65084445-11.65084445-11.65084445-30.29219555 0-41.94304s30.29219555-11.65084445 41.94304 0l106.60522666 106.60522667c5.82542222 5.82542222 8.73813333 13.39847111 8.73813334 20.97152-0.58254222 6.99050667-3.49525333 14.56355555-9.32067556 20.38897778z" fill="#00b674" p-id="7667"></path></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB