首页
This commit is contained in:
WindowBird
parent
63c3f1a0da
commit
cb9f0c680f
|
|
@ -1,24 +1,67 @@
|
|||
<script setup lang="ts">
|
||||
const { footer } = useAppConfig()
|
||||
<script lang="ts" setup>
|
||||
import type {NavigationMenuItem} from '@nuxt/ui'
|
||||
|
||||
const items: NavigationMenuItem[] = [
|
||||
{
|
||||
label: '电话:15280659990',
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
label: '邮箱:564737095@qq.com',
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
label: '地址:福建省福鼎市太姥山镇海埕路13号',
|
||||
// to: 'https://github.com/nuxt/ui/releases',
|
||||
// target: '_blank'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UFooter
|
||||
class="z-10 bg-default"
|
||||
:ui="{ left: 'text-muted text-xs' }"
|
||||
>
|
||||
<template #left>
|
||||
{{ footer.credits }}
|
||||
</template>
|
||||
<div
|
||||
:style="{ backgroundImage: `url('/img/index/footer_bg.png')` , }"
|
||||
class="bg-cover bg-no-repeat bg-center w-full mt-5">
|
||||
<UFooter>
|
||||
<template #left>
|
||||
<p class="text-bold text-sm">Copyright © 闽ICP备2023022186号-2</p>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<template v-if="footer?.links">
|
||||
<UNavigationMenu
|
||||
:items="items" :ui="{
|
||||
link: 'text-gray-800 ', // 默认/悬停颜色
|
||||
|
||||
}" variant="link"/>
|
||||
|
||||
<template #right>
|
||||
<!-- <UButton-->
|
||||
<!-- aria-label="Discord"-->
|
||||
<!-- color="neutral"-->
|
||||
<!-- icon="i-simple-icons-discord"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- to="https://go.nuxt.com/discord"-->
|
||||
<!-- variant="ghost"-->
|
||||
<!-- />-->
|
||||
<UButton
|
||||
v-for="(link, index) of footer?.links"
|
||||
:key="index"
|
||||
v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
|
||||
|
||||
color="neutral"
|
||||
icon="simple-icons-alibabadotcom"
|
||||
target="_blank"
|
||||
to="https://chuangtewulian.1688.com/page/index.html"
|
||||
|
||||
/>
|
||||
<UButton
|
||||
|
||||
color="neutral"
|
||||
icon="i-simple-icons-tiktok"
|
||||
target="_blank"
|
||||
to="https://www.douyin.com/user/MS4wLjABAAAAdPkGyADnJFLrZBwDM9U7faUJs-wmmyEU9L34SS0CKhs"
|
||||
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</UFooter>
|
||||
</UFooter>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
107
app/components/ScrollToTop.vue
Normal file
107
app/components/ScrollToTop.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<!-- components/ScrollToTop.vue -->
|
||||
<template>
|
||||
<UButton
|
||||
v-show="isVisible"
|
||||
:aria-label="ariaLabel"
|
||||
:class="buttonClasses"
|
||||
|
||||
:icon="icon"
|
||||
|
||||
:variant="variant"
|
||||
@click="handleClick"
|
||||
@mouseenter="isHovered = true"
|
||||
@mouseleave="isHovered = false"
|
||||
>
|
||||
<!-- 插槽支持自定义内容 -->
|
||||
<slot>
|
||||
<span v-if="showText && isHovered" class="ml-2 text-xs font-medium">
|
||||
{{ text }}
|
||||
</span>
|
||||
</slot>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useThrottleFn} from '@vueuse/core'
|
||||
|
||||
interface Props {
|
||||
threshold?: number
|
||||
position?: 'br' | 'bl' | 'tr' | 'tl' // bottom-right, bottom-left, etc.
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
color?: 'primary' | 'green' | 'blue' | 'gray'
|
||||
variant?: 'solid' | 'outline' | 'soft'
|
||||
icon?: string
|
||||
showText?: boolean
|
||||
text?: string
|
||||
ariaLabel?: string
|
||||
smoothScroll?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
threshold: 300,
|
||||
position: 'br',
|
||||
size: 'lg',
|
||||
color: 'green',
|
||||
variant: 'solid',
|
||||
icon: 'i-heroicons-arrow-up',
|
||||
showText: false,
|
||||
text: '回到顶部',
|
||||
ariaLabel: '回到页面顶部',
|
||||
smoothScroll: true
|
||||
})
|
||||
|
||||
const isVisible = ref(false)
|
||||
const isHovered = ref(false)
|
||||
|
||||
// 计算位置类名
|
||||
const positionClasses = computed(() => {
|
||||
const map = {
|
||||
br: 'bottom-6 right-6',
|
||||
bl: 'bottom-6 left-6',
|
||||
tr: 'top-6 right-6',
|
||||
tl: 'top-6 left-6'
|
||||
}
|
||||
return map[props.position] || map.br
|
||||
})
|
||||
|
||||
// 计算尺寸类名
|
||||
|
||||
|
||||
const buttonClasses = computed(() => [
|
||||
'fixed z-50 rounded-full transition-all duration-300 ease-in-out',
|
||||
positionClasses.value,
|
||||
{
|
||||
'opacity-100': isVisible.value,
|
||||
'opacity-0': !isVisible.value,
|
||||
'hover:scale-110': isVisible.value,
|
||||
'px-4': props.showText && isHovered.value
|
||||
}
|
||||
])
|
||||
|
||||
const handleScroll = useThrottleFn(() => {
|
||||
isVisible.value = window.scrollY > props.threshold
|
||||
}, 100)
|
||||
|
||||
const handleClick = () => {
|
||||
if (props.smoothScroll) {
|
||||
window.scrollTo({top: 0, behavior: 'smooth'})
|
||||
} else {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
|
||||
// 触发自定义事件
|
||||
emit('click')
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: []
|
||||
}>()
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll, {passive: true})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
</script>
|
||||
58
app/components/landing/CaseFacts.vue
Normal file
58
app/components/landing/CaseFacts.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script lang="ts" setup>
|
||||
const cardItems = ref([
|
||||
{
|
||||
title: "蜜蜂大世界",
|
||||
description: "北京最大的蜜蜂文化产业园，世界蜜蜂日承办点",
|
||||
image: "/img/index/c1.png"
|
||||
},
|
||||
{
|
||||
title: "竹山县智慧蜂场",
|
||||
description: "受国家烟草专卖局和竹山县政府委托建立的高标准示范蜂场",
|
||||
image: "/img/index/c2.png"
|
||||
},
|
||||
{
|
||||
title: "雪慧峰业研究",
|
||||
description: "蜂产品质量安全追溯系统的研究与应用探索",
|
||||
image: "/img/index/c3.png"
|
||||
},
|
||||
{
|
||||
title: "智能蜂箱监测",
|
||||
description: "中国农业科学院蜜蜂研究所研发，已在全国多地示范应用",
|
||||
image: "/img/index/c4.png"
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:style="{ backgroundImage: `url('/img/index/3d_bg.png')` , }"
|
||||
class="bg-cover bg-no-repeat bg-center w-full ">
|
||||
<TitleSection
|
||||
subtitle="CASE FACTS"
|
||||
title="案例实况"
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 px-40">
|
||||
<UPageCard
|
||||
v-for="(item, index) in cardItems"
|
||||
:key="index"
|
||||
:description="item.description"
|
||||
:title="item.title"
|
||||
:ui="{
|
||||
title: 'font-semibold text-lg',
|
||||
description: 'text-gray-600 leading-relaxed',
|
||||
|
||||
}"
|
||||
reverse
|
||||
>
|
||||
<img
|
||||
:alt="item.title"
|
||||
:src="item.image"
|
||||
class="w-full"
|
||||
>
|
||||
</UPageCard>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -3,9 +3,14 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<TitleSection
|
||||
subtitle="3D INTELLIGENT APIARY"
|
||||
title="3D智慧蜂场"
|
||||
/>
|
||||
<img alt="" class="w-full lg:px-40" src="/img/index/model2.b444287.gif">
|
||||
<div
|
||||
:style="{ backgroundImage: `url('/img/index/3d_bg.png')` , }"
|
||||
class="bg-cover bg-no-repeat bg-center w-full ">
|
||||
<TitleSection
|
||||
subtitle="3D INTELLIGENT APIARY"
|
||||
title="3D智慧蜂场"
|
||||
/>
|
||||
<img alt="" class="w-full lg:px-40 " src="/img/index/model2.b444287.gif">
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<AppHeader />
|
||||
<slot />
|
||||
<!-- <AppFooter />-->
|
||||
<AppHeader/>
|
||||
<slot/>
|
||||
<AppFooter/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,13 @@
|
|||
<LandingSERVICEINTRODUCTION/>
|
||||
<LandingOURSTRENGTHS/>
|
||||
<LandingPRODUCT_INTRODUCTION/>
|
||||
<LandingCaseFacts/>
|
||||
<div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50">
|
||||
<button class="bg-green-500 text-white px-4 py-3 rounded-l-lg shadow-lg writing-mode-vertical">
|
||||
<span class="font-medium">联系客服</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</UPage>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"@nuxt/eslint": "1.9.0",
|
||||
"@nuxt/image": "1.11.0",
|
||||
"@nuxt/ui": "4.0.1",
|
||||
"@vueuse/core": "^14.0.0",
|
||||
"eslint": "^9.38.0",
|
||||
"nuxt": "^4.1.3",
|
||||
"typescript": "^5.9.3",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ importers:
|
|||
'@nuxt/ui':
|
||||
specifier: 4.0.1
|
||||
version: 4.0.1(@babel/parser@7.28.4)(change-case@5.4.4)(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.8.1)(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.11(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))(zod@4.1.12)
|
||||
'@vueuse/core':
|
||||
specifier: ^14.0.0
|
||||
version: 14.0.0(vue@3.5.22(typescript@5.9.3))
|
||||
eslint:
|
||||
specifier: ^9.38.0
|
||||
version: 9.38.0(jiti@2.6.1)
|
||||
|
|
@ -1696,6 +1699,11 @@ packages:
|
|||
peerDependencies:
|
||||
vue: ^3.5.0
|
||||
|
||||
'@vueuse/core@14.0.0':
|
||||
resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==}
|
||||
peerDependencies:
|
||||
vue: ^3.5.0
|
||||
|
||||
'@vueuse/integrations@13.9.0':
|
||||
resolution: {integrity: sha512-SDobKBbPIOe0cVL7QxMzGkuUGHvWTdihi9zOrrWaWUgFKe15cwEcwfWmgrcNzjT6kHnNmWuTajPHoIzUjYNYYQ==}
|
||||
peerDependencies:
|
||||
|
|
@ -1747,6 +1755,9 @@ packages:
|
|||
'@vueuse/metadata@13.9.0':
|
||||
resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
|
||||
|
||||
'@vueuse/metadata@14.0.0':
|
||||
resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==}
|
||||
|
||||
'@vueuse/shared@10.11.1':
|
||||
resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
|
||||
|
||||
|
|
@ -1758,6 +1769,11 @@ packages:
|
|||
peerDependencies:
|
||||
vue: ^3.5.0
|
||||
|
||||
'@vueuse/shared@14.0.0':
|
||||
resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==}
|
||||
peerDependencies:
|
||||
vue: ^3.5.0
|
||||
|
||||
abbrev@3.0.1:
|
||||
resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
|
||||
engines: {node: ^18.17.0 || >=20.5.0}
|
||||
|
|
@ -6686,6 +6702,13 @@ snapshots:
|
|||
'@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
|
||||
vue: 3.5.22(typescript@5.9.3)
|
||||
|
||||
'@vueuse/core@14.0.0(vue@3.5.22(typescript@5.9.3))':
|
||||
dependencies:
|
||||
'@types/web-bluetooth': 0.0.21
|
||||
'@vueuse/metadata': 14.0.0
|
||||
'@vueuse/shared': 14.0.0(vue@3.5.22(typescript@5.9.3))
|
||||
vue: 3.5.22(typescript@5.9.3)
|
||||
|
||||
'@vueuse/integrations@13.9.0(change-case@5.4.4)(fuse.js@7.1.0)(vue@3.5.22(typescript@5.9.3))':
|
||||
dependencies:
|
||||
'@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
|
||||
|
|
@ -6701,6 +6724,8 @@ snapshots:
|
|||
|
||||
'@vueuse/metadata@13.9.0': {}
|
||||
|
||||
'@vueuse/metadata@14.0.0': {}
|
||||
|
||||
'@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.9.3))':
|
||||
dependencies:
|
||||
vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
|
||||
|
|
@ -6718,6 +6743,10 @@ snapshots:
|
|||
dependencies:
|
||||
vue: 3.5.22(typescript@5.9.3)
|
||||
|
||||
'@vueuse/shared@14.0.0(vue@3.5.22(typescript@5.9.3))':
|
||||
dependencies:
|
||||
vue: 3.5.22(typescript@5.9.3)
|
||||
|
||||
abbrev@3.0.1: {}
|
||||
|
||||
abort-controller@3.0.0:
|
||||
|
|
|
|||
BIN
public/img/index/3d_bg.png
Normal file
BIN
public/img/index/3d_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
public/img/index/c1.png
Normal file
BIN
public/img/index/c1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/img/index/c2.png
Normal file
BIN
public/img/index/c2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 921 KiB |
BIN
public/img/index/c3.png
Normal file
BIN
public/img/index/c3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 KiB |
BIN
public/img/index/c4.png
Normal file
BIN
public/img/index/c4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 KiB |
BIN
public/img/index/footer_bg.png
Normal file
BIN
public/img/index/footer_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Loading…
Reference in New Issue
Block a user