LoveNav/love-nav-ui
Archived
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

router update

Browse Source
This commit is contained in:
landaiqing
2023-12-20 00:11:29 +08:00
parent d6ea49b9fa
commit 60705c9cdc
5 changed files with 90 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Detail/NavDetail.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
666
</template>
<script setup>
</script>
<style scoped>
</style>

40
src/components/Home/HomePage.vue
View File

@@ -1,53 +1,31 @@
<template> <template>
<body translate="no"> <div class="wrapper">
<div class="video-bg"> <LeftSide></LeftSide>
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057"> <MainContainer></MainContainer>
<source src="../../assets/video/background.mp4" type="video/mp4"> </div>
Your browser does not support the video tag.
</video>
</div>
<div class="dark-light">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</div>
<div class="app">
<HomeHeader></HomeHeader>
<contentWrapper></contentWrapper>
<div class="overlay-app"></div>
</div>
</body>
</template> </template>
<script> <script>
// import $ from 'jquery' import MainContainer from "@/components/Home/MainContainer.vue";
import HomeHeader from "@/components/Home/HomeHeader.vue"; import LeftSide from "@/components/Home/LeftSide.vue";
import contentWrapper from "@/components/Home/ContentWrapper.vue";
export default { export default {
name: "HomePage", name: "HomePage",
components: { components: {
HomeHeader, LeftSide, MainContainer
contentWrapper
}, },
data() { data() {
return {} return {}
}, },
mounted() { mounted() {
this.toggleDarkLight();
}, },
created() { created() {
}, },
computed: {}, computed: {},
methods: { methods: {
toggleDarkLight() {
const toggleButton = document.querySelector('.dark-light');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('light-mode');
});
}
} }
} }

17
src/router/index.js
View File

@@ -1,11 +1,24 @@
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
import Index from '../views/HomeView.vue' import index from '../views/Index.vue'
import home from "@/components/Home/HomePage.vue";
const routes = [ const routes = [
{ {
path: '/', path: '/',
redirect: '/index'
},
{
path: '/index',
redirect: '/home',
name: 'index', name: 'index',
component: Index component: index,
children: [
{
path: '/home',
name: 'home',
component: home
}],
}, },
] ]

17
src/views/HomeView.vue
View File

@@ -1,17 +0,0 @@
<template>
<div class="home">
<HomePage></HomePage>
</div>
</template>
<script>
// @ is an alias to /src
import HomePage from '@/components/Home/HomePage.vue'
export default {
name: 'HomeView',
components: {
HomePage
}
}
</script>

57
src/views/Index.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<!-- <div class="home">-->
<!-- <HomePage></HomePage>-->
<!-- </div>-->
<body translate="no">
<div class="video-bg">
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
<source src="../assets/video/background.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="dark-light">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</div>
<div class="app">
<HomeHeader></HomeHeader>
<router-view></router-view>
<div class="overlay-app"></div>
</div>
</body>
</template>
<script>
// @ is an alias to /src
// import HomePage from '@/components/Home/HomePage.vue'
// import contentWrapper from "@/components/Home/ContentWrapper.vue";
import HomeHeader from "@/components/Home/HomeHeader.vue";
export default {
name: 'HomeView',
components: {
HomeHeader,
},
data() {
return {}
},
mounted() {
this.toggleDarkLight();
},
created() {
},
computed: {},
methods:{
toggleDarkLight() {
const toggleButton = document.querySelector('.dark-light');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('light-mode');
});
}
}
}
</script>