feat: 成功案例滑动效果优化 - 鼠标悬停暂停,移开继续滚动

This commit is contained in:
leisileken
2026-06-25 16:18:16 +08:00
6 changed files with 21 additions and 2 deletions

BIN
public/videos/黑背景.mp4 Normal file

Binary file not shown.

View File

@@ -2,6 +2,7 @@
import { onMounted, onUnmounted } from 'vue' import { onMounted, onUnmounted } from 'vue'
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue' import Footer from '@/components/Footer.vue'
import MouseTrail from '@/components/MouseTrail.vue'
const handleScroll = () => { const handleScroll = () => {
const nav = document.querySelector('.navbar') const nav = document.querySelector('.navbar')
@@ -25,6 +26,7 @@ onUnmounted(() => {
<template> <template>
<div class="min-h-screen flex flex-col"> <div class="min-h-screen flex flex-col">
<MouseTrail />
<Navbar /> <Navbar />
<main class="flex-1"> <main class="flex-1">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">

View File

@@ -7,7 +7,7 @@ const isMenuOpen = ref(false)
const isScrolled = ref(false) const isScrolled = ref(false)
const navItems = [ const navItems = [
{ name: '首页', path: '/' }, { name: '首页', path: '/home' },
{ name: '产品中心', path: '/products' }, { name: '产品中心', path: '/products' },
{ name: '解决方案', path: '/solutions' }, { name: '解决方案', path: '/solutions' },
{ name: '关于我们', path: '/about' }, { name: '关于我们', path: '/about' },
@@ -42,7 +42,7 @@ onUnmounted(() => {
> >
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20"> <div class="flex items-center justify-between h-16 lg:h-20">
<div class="flex items-center space-x-3 cursor-pointer" @click="router.push('/')"> <div class="flex items-center space-x-3 cursor-pointer" @click="router.push('/home')">
<img src="/images/logo.jpg" alt="云阶智元" class="w-10 h-10 rounded-lg object-cover" /> <img src="/images/logo.jpg" alt="云阶智元" class="w-10 h-10 rounded-lg object-cover" />
<div> <div>
<span <span

View File

@@ -5,6 +5,11 @@ const router = createRouter({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'Landing',
component: () => import('@/views/LandingPage.vue')
},
{
path: '/home',
name: 'Home', name: 'Home',
component: () => import('@/views/Home.vue') component: () => import('@/views/Home.vue')
}, },

View File

@@ -54,7 +54,11 @@ const contactInfo = [
class="fixed inset-0 w-full h-full object-cover z-0" class="fixed inset-0 w-full h-full object-cover z-0"
autoplay loop muted playsinline autoplay loop muted playsinline
> >
<<<<<<< HEAD
<source src="/videos/xingkong.mp4" type="video/mp4" /> <source src="/videos/xingkong.mp4" type="video/mp4" />
=======
<source src="/videos/starry-sky.mp4" type="video/mp4" />
>>>>>>> b71fd0336a7a487dac3c305e8fdde42fe63de6f4
</video> </video>
<div class="fixed inset-0 bg-black/30 z-0"></div> <div class="fixed inset-0 bg-black/30 z-0"></div>
@@ -103,7 +107,11 @@ const contactInfo = [
</div> </div>
</section> </section>
<<<<<<< HEAD
<section id="consultation" class="py-20 relative z-10"> <section id="consultation" class="py-20 relative z-10">
=======
<section class="py-20 relative z-10">
>>>>>>> b71fd0336a7a487dac3c305e8fdde42fe63de6f4
<div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12"> <div class="grid lg:grid-cols-2 gap-12">
<div> <div>

View File

@@ -88,7 +88,11 @@ const handleMouseMove = (e: MouseEvent) => {
const enterWebsite = () => { const enterWebsite = () => {
isEntering.value = true isEntering.value = true
setTimeout(() => { setTimeout(() => {
<<<<<<< HEAD
router.push('/') router.push('/')
=======
router.push('/home')
>>>>>>> b71fd0336a7a487dac3c305e8fdde42fe63de6f4
}, 1500) }, 1500)
} }