WindowBird/xlqx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

通用组件修改

Browse Source
This commit is contained in:
WindowBird 2025-10-29 13:52:37 +08:00
parent 70c56da6a3
commit f8ef69117a
4 changed files with 77 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/app.vue
View File

@ -7,6 +7,7 @@
<img src="/img/banner.png" alt="" class="w-full">
<UPageSection :ui="{container:'lg:py-0 lg:px-0' }">
<!-- 服务展示区域 -->
<section aria-label="服务展示" class="mb-16">
<div class="grid grid-cols-1">
@ -25,8 +26,12 @@
<div class=" cursor-pointer">
<img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full rounded-lg transition-shadow duration-300">
</div>
<div class=" cursor-pointer">
<img src="/img/6.jpg" alt="服务项目展示图片6" class="w-full rounded-lg transition-shadow duration-300">
<UCarousel v-slot="{ item }" arrows :prev="{ color: 'primary' }"
:next="{ color: 'primary' }" loop :items="items" class="w-full max-w-xl mx-auto">
<img :src="item" width="620" height="320" class="rounded-lg" alt="">
</UCarousel>
<div class="cursor-pointer">
<img src="/img/6.png" alt="服务项目展示图片6" class="w-full rounded-lg transition-shadow duration-300">
</div>
<div class=" cursor-pointer">
<img src="/img/7.jpg" alt="服务项目展示图片7" class="w-full rounded-lg transition-shadow duration-300">
@ -136,7 +141,7 @@
<script setup lang="ts">
// SEO优化配置
useHead({
title: '联系我们 - 专业服务公司 | 电话：15280659990',
title: '小鹿骑行',
meta: [
{
name: 'description',
@ -242,4 +247,10 @@ const users = ref([
}
])
const items = [
'https://picsum.photos/640/640?random=1',
'https://picsum.photos/640/640?random=2',
'https://picsum.photos/640/640?random=3',
]
</script>

60
app/components/AppHeader.vue
View File

@ -1,19 +1,19 @@
<script lang="ts" setup>
const isScrolled = ref(false)
const headerUI = ref({
root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
})
const handleScroll = () => {
isScrolled.value = window.scrollY > 10
headerUI.value.root = isScrolled.value
? 'fixed top-0 left-0 right-0 z-50 bg-green-700 h-8 lg:h-16' // 不透明
: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16' // 半透明
}
onMounted(() => window.addEventListener('scroll', handleScroll))
onUnmounted(() => window.removeEventListener('scroll', handleScroll))
// const isScrolled = ref(false)
// const headerUI = ref({
// root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
// })
//
// const handleScroll = () => {
// isScrolled.value = window.scrollY > 10
// headerUI.value.root = isScrolled.value
// ? 'fixed top-0 left-0 right-0 z-50 bg-green-700 h-8 lg:h-16' // 不透明
// : 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16' // 半透明
// }
//
// onMounted(() => window.addEventListener('scroll', handleScroll))
// onUnmounted(() => window.removeEventListener('scroll', handleScroll))
@ -32,9 +32,35 @@ onUnmounted(() => window.removeEventListener('scroll', handleScroll))
<!-- 右侧区域 -->
<template #right>
<view class="h-6 w-auto text-primary">
商户中心
</view>
<UButton
color='primary'
label='商户中心'
to="https://ele.ccttiot.com/login"
class="gap-2"
variant="ghost"
>
<template #leading>
<span class="relative flex size-2">
<span
class='bg-primary animate-ping absolute inline-flex size-full rounded-full opacity-75'
/>
<span
class=" bg-primary relative inline-flex size-2 scale-90 rounded-full"
/>
</span>
</template>
</UButton>
<!-- <NuxtLink-->
<!-- to="https://ele.ccttiot.com/login"-->
<!-- target="_blank"-->
<!-- class="admin-link"-->
<!-- >-->
<!-- <view class="h-6 w-auto text-primary text-md hover:scale-105 hover:text-shadow-xs">-->
<!-- -->
<!-- </view>-->
<!-- </NuxtLink>-->
</template>
</UHeader>
</template>

3
app/components/ContactFloatingButton.vue
View File

@ -3,8 +3,7 @@
<div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
<UPopover mode="hover">
<UButton
class="bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
class="bg-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
color="neutral" label="联系客服"
variant="subtle"/>
<template #content>

56
app/components/ScrollToTop.vue
View File

@ -2,18 +2,21 @@
<!-- 悬浮置顶按钮 -->
<Transition name="fade-slide">
<button
v-show="showScrollToTop"
aria-label="回到顶部"
class="scroll-to-top-btn fixed bottom-8 right-8 z-50 text-white rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none"
title="回到顶部"
@click="scrollToTop"
v-show="showScrollToTop"
aria-label="回到顶部"
class="fixed bottom-32 right-8 z-50 rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none
bg-primary/90 backdrop-blur-md border border-white/20
hover:bg-primary/95 hover:-translate-y-0.5 hover:scale-110 hover:shadow-xl
active:scale-95 focus:ring-4 focus:ring-primary/30"
title="回到顶部"
@click="scrollToTop"
>
<UIcon name="i-lucide-chevron-up" class="w-6 h-6" />
<UIcon class="w-6 h-6 text-white -rotate-45" name="i-lucide-rocket"/>
</button>
</Transition>
</template>
<script setup lang="ts">
<script lang="ts" setup>
// 响应式状态
const showScrollToTop = ref(false)
@ -42,38 +45,15 @@ onUnmounted(() => {
</script>
<style scoped>
/* 按钮悬停效果增强 */
.scroll-to-top-btn {
backdrop-filter: blur(10px);
background: rgba(59, 130, 246, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
/* 保留过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all 0.3s ease;
}
.scroll-to-top-btn:hover {
background: rgba(37, 99, 235, 0.95);
transform: translateY(-2px) scale(1.1);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* 响应式设计 */
@media (max-width: 768px) {
.scroll-to-top-btn {
bottom: 1rem;
right: 1rem;
padding: 0.75rem;
}
}
/* 按钮点击波纹效果 */
.scroll-to-top-btn:active {
transform: scale(0.95);
}
/* 焦点状态优化 */
.scroll-to-top-btn:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
.fade-slide-enter-from,
.fade-slide-leave-to {
opacity: 0;
transform: translateY(10px);
}
</style>