router update

This commit is contained in:
2023-12-20 00:11:29 +08:00
parent d6ea49b9fa
commit 60705c9cdc
5 changed files with 90 additions and 50 deletions

View File

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

View File

@@ -1,53 +1,31 @@
<template>
<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>
<contentWrapper></contentWrapper>
<div class="overlay-app"></div>
</div>
</body>
<div class="wrapper">
<LeftSide></LeftSide>
<MainContainer></MainContainer>
</div>
</template>
<script>
// import $ from 'jquery'
import HomeHeader from "@/components/Home/HomeHeader.vue";
import contentWrapper from "@/components/Home/ContentWrapper.vue";
import MainContainer from "@/components/Home/MainContainer.vue";
import LeftSide from "@/components/Home/LeftSide.vue";
export default {
name: "HomePage",
components: {
HomeHeader,
contentWrapper
LeftSide, MainContainer
},
data() {
return {}
},
mounted() {
this.toggleDarkLight();
},
created() {
},
computed: {},
methods: {
toggleDarkLight() {
const toggleButton = document.querySelector('.dark-light');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('light-mode');
});
}
}
}

View File

@@ -1,11 +1,24 @@
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 = [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
redirect: '/home',
name: 'index',
component: Index
component: index,
children: [
{
path: '/home',
name: 'home',
component: home
}],
},
]

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>