mirror of
https://gitcode.com/leisileken/cloud-smart.git
synced 2026-09-11 10:27:20 +08:00
feat: 成功案例滑动效果优化 - 鼠标悬停暂停,移开继续滚动
This commit is contained in:
BIN
public/videos/黑背景.mp4
Normal file
BIN
public/videos/黑背景.mp4
Normal file
Binary file not shown.
@@ -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 }">
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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')
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user