通用组件修改

app/app.vue

@@ -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">
+                <UCarousel v-slot="{ item }" arrows  :prev="{ color: 'primary' }"
-                  <img src="/img/6.jpg" alt="服务项目展示图片6" class="w-full rounded-lg       transition-shadow duration-300">
+                           :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>

app/components/AppHeader.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 
-const isScrolled = ref(false)
+// const isScrolled = ref(false)
-const headerUI = ref({
+// 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'
+//   root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
-})
+// })
-
+//
-const handleScroll = () => {
+// const handleScroll = () => {
-  isScrolled.value = window.scrollY > 10
+//   isScrolled.value = window.scrollY > 10
-  headerUI.value.root = isScrolled.value
+//   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-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' // 半透明
+//       : '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))
+// onMounted(() => window.addEventListener('scroll', handleScroll))
-onUnmounted(() => window.removeEventListener('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">
+      <UButton
-        商户中心
+          color='primary'
-      </view>
+          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>

app/components/ContactFloatingButton.vue

@@ -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-primary hover:bg-primary-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
-          class="bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
           color="neutral" label="联系客服"
           variant="subtle"/>
       <template #content>

app/components/ScrollToTop.vue

@@ -2,18 +2,21 @@
   <!-- 悬浮置顶按钮 -->
   <Transition name="fade-slide">
     <button
-      v-show="showScrollToTop"
+        v-show="showScrollToTop"
-      aria-label="回到顶部"
+        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"
+        class="fixed bottom-32 right-8 z-50 rounded-full p-3 shadow-lg transition-all duration-300 focus:outline-none
-      title="回到顶部"
+             bg-primary/90 backdrop-blur-md border border-white/20
-      @click="scrollToTop"
+             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>
-
+/* 保留过渡动画 */
-
+.fade-slide-enter-active,
-/* 按钮悬停效果增强 */
+.fade-slide-leave-active {
-.scroll-to-top-btn {
+  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-  background: rgba(59, 130, 246, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.scroll-to-top-btn:hover {
+.fade-slide-enter-from,
-  background: rgba(37, 99, 235, 0.95);
+.fade-slide-leave-to {
-  transform: translateY(-2px) scale(1.1);
+  opacity: 0;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  transform: translateY(10px);
 }
-
+</style>
-/* 响应式设计 */
-@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);
-}
-</style>