Skip to content
This repository was archived by the owner on Jun 19, 2025. It is now read-only.

Commit 212c63d

Browse files
Hoang21002Hoang21002
committed
Chinh sua router
1 parent f5a40dd commit 212c63d

File tree

11 files changed

+237
-52
lines changed

11 files changed

+237
-52
lines changed

‎Bus-Management/package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Bus-Management/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@fortawesome/free-regular-svg-icons": "^6.4.2",
1414
"@fortawesome/free-solid-svg-icons": "^6.4.2",
1515
"@fortawesome/vue-fontawesome": "^3.0.3",
16+
"gsap": "^3.12.2",
1617
"pinia": "^2.1.4",
1718
"vue": "^3.3.4",
1819
"vue-router": "^4.2.4"

‎Bus-Management/src/App.vue‎

Lines changed: 69 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,75 @@
1-
<script>
2-
import { RouterLink, RouterView } from 'vue-router'
3-
import HeaderView from './components/HeaderView.vue'
1+
<template>
2+
<router-view > </router-view>
3+
</template>
44

5-
export default {
6-
components :{
7-
HeaderView
8-
}
5+
<style>
6+
@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Poppins&display=swap');
7+
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
font-family: 'poppins', sans-serif;
13+
text-decoration: none;
914
}
10-
</script>
1115
12-
<template>
13-
<header>
14-
<HeaderView />
15-
<nav>
16-
<!-- <RouterLink to="/">Home</RouterLink>
17-
<RouterLink to="/about">About</RouterLink> -->
18-
</nav>
19-
</header>
20-
21-
<RouterView />
22-
</template>
16+
#app {
17+
-webkit-user-select: none;
18+
/* Safari */
19+
-ms-user-select: none;
20+
/* IE 10 and IE 11 */
21+
user-select: none;
22+
/* Standard syntax */
23+
font-family: 'poppins', sans-serif;
24+
-webkit-font-smoothing: antialiased;
25+
-moz-osx-font-smoothing: grayscale;
26+
text-align: center;
27+
color: #2c3e50;
28+
}
2329
24-
<style scoped>
2530
31+
/* Scroll bar stylings */
32+
::-webkit-scrollbar {
33+
width: 15px;
34+
height: 15px;
35+
}
36+
37+
/* Track */
38+
::-webkit-scrollbar-track {
39+
background: #c5c5c576;
40+
}
41+
42+
/* Handle */
43+
::-webkit-scrollbar-thumb {
44+
background: #5175559a;
45+
}
46+
47+
/* Handle on hover */
48+
::-webkit-scrollbar-thumb:hover {
49+
background: #55555588;
50+
}
51+
52+
.relative {
53+
position: relative;
54+
}
55+
56+
svg {
57+
color: #fff;
58+
}
59+
60+
svg:hover {
61+
cursor: pointer;
62+
}
63+
64+
65+
.fade-enter-from,
66+
.fade-leave-active {
67+
opacity: 0.1;
68+
}
69+
70+
.fade-enter-active,
71+
.fade-leave-active {
72+
transition: opacity 0.2s ease;
73+
}
2674
</style>
75+

‎Bus-Management/src/assets/img/pngkey.com-world-map-black-and-1707126.png‎

283 KB
Loading

‎Bus-Management/src/components/FooterView.vue‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,80 @@
1-
<template></template>
1+
<template>
2+
<footer>
3+
<div class="footer">
4+
<div class="about-us relative">
5+
<div class="context context-left">
6+
<h1>BUS MANAGEMENT</h1>
7+
<p>Địa chỉ: 217/24/12 Ngô Quyền, Phường 6, Tp Đà Lạt </p>
8+
<p>Hotline: <a href="tel:+0908747742" style="color: #fff;"> 0908747742 (Mr Tâm)</a>
9+
</p>
10+
<p>Email: <a href="mailto:tamproduction102@gmail.com"
11+
style="color: #fff;">tamproduction102@gmail.com</a>
12+
</p>
13+
<p>Chụp ảnh Đà Lạt, quay phim Đà Lạt</p>
14+
<div class="line"></div>
15+
<div class="icon flex justify-center items-center">
16+
<a href="https://www.facebook.com/ngothanhtam.photodalat" target="_blank">
17+
<font-awesome-icon icon="fa-brands fa-facebook"
18+
style="font-size: 20px; margin-top: 10px; --fa-animation-duration: 2s; --fa-animation-iteration-count: 5" />
19+
</a>
20+
<a href="https://www.youtube.com/@quayphimdalat102" target="_blank">
21+
<font-awesome-icon icon="fa-brands fa-youtube"
22+
style=" font-size: 20px; margin-top: 10px; margin-left: 10px; --fa-animation-duration: 2s; --fa-animation-iteration-count: 5" />
23+
24+
</a>
25+
<a href="https://www.tiktok.com/@ngothanhtam.dalat" target="_blank">
26+
<font-awesome-icon icon="fa-brands fa-tiktok"
27+
style=" font-size: 20px; margin-top: 10px; margin-left: 10px; --fa-animation-duration: 2s; --fa-animation-iteration-count: 5" />
28+
</a>
29+
<a href="https://tamproduction.com/" target="_blank">
30+
<font-awesome-icon icon="earth-americas" style=" font-size: 20px; margin-top: 5px; margin-left: 10px; --fa-animation-duration: 2s; --fa-animation-iteration-count: 5" />
31+
</a>
32+
</div>
33+
34+
</div>
35+
</div>
36+
</div>
37+
</footer>
38+
</template>
39+
40+
<style scoped>
41+
.footer {
42+
position: relative;
43+
bottom: 0;
44+
overflow: hidden;
45+
width: 100%;
46+
color: #fff;
47+
}
48+
49+
.about-us {
50+
background: url('../assets/img/pngkey.com-world-map-black-and-1707126.png'), #1a5b34e0;
51+
background-repeat: no-repeat;
52+
background-position: center;
53+
width: 100%;
54+
height: 450px;
55+
border-top: 2px solid #fff;
56+
}
57+
58+
.about-us p {
59+
font-size: 15px;
60+
text-align: center;
61+
margin-bottom: 10px;
62+
}
63+
64+
.about-us h1 {
65+
font-size: 3.5em;
66+
font-weight: bold;
67+
text-align: center;
68+
}
69+
70+
.context-left {
71+
transform: translateY(35%);
72+
}
73+
74+
.line {
75+
width: 45%;
76+
border-bottom: 1px solid #fff;
77+
margin: auto;
78+
}
79+
80+
</style>

‎Bus-Management/src/components/HeaderView.vue‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
<script>
2-
import { RouterLink } from 'vue-router';
3-
</script>
1+
42
<template>
5-
<header class="bg-white">
6-
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8 " aria-label="Global">
3+
<header class="bg-white drop-shadow-md ">
4+
<nav class="mx-auto flex items-center justify-between p-6 lg:px-8 " aria-label="Global">
75
<div class="flex lg:flex-1">
86
<a href="#" class="-m-1.5 p-1.5">
97
<span class="sr-only">Your Company</span>
@@ -20,16 +18,13 @@ import { RouterLink } from 'vue-router';
2018
</svg>
2119
</button>
2220
</div>
23-
<div class="hidden lg:flex lg:gap-x-12">
24-
21+
<div class="hidden lg:flex lg:gap-x-36">
2522
<RouterLink to="/" class=" text-xl font-semibold leading-6 text-gray-900">Home</RouterLink>
2623
<RouterLink to="/about" class=" text-xl font-semibold leading-6 text-gray-900">About</RouterLink>
27-
<a href="#" class=" text-xl font-semibold leading-6 text-gray-900">Contact</a>
28-
<a href="#" class=" text-xl font-semibold leading-6 text-gray-900">Blog</a>
24+
<RouterLink to="/contact" class=" text-xl font-semibold leading-6 text-gray-900">Contact</RouterLink>
2925
</div>
30-
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
31-
<a href="#" class="text-xl font-semibold leading-6 text-gray-900">Log in <span
32-
aria-hidden="true">&rarr;</span></a>
26+
<div class="lg:flex lg:flex-1 lg:justify-end">
27+
<button class="text-xl font-semibold leading-6 text-gray-900 ">Log in</button>
3328
</div>
3429
</nav>
3530
<!-- Mobile menu, show/hide based on menu open state. -->
@@ -74,10 +69,13 @@ import { RouterLink } from 'vue-router';
7469
</div>
7570
</header>
7671
</template>
77-
<style>
7872

79-
header{
80-
border-bottom: 0.1px solid ;
81-
}
73+
<script>
74+
import { RouterLink, RouterView } from 'vue-router';
75+
</script>
8276

77+
<style scoped>
78+
nav{
79+
max-width: 95%;
80+
}
8381
</style>

‎Bus-Management/src/router/index.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import { createRouter, createWebHistory } from 'vue-router'
22
import HomeView from '../views/HomeView.vue'
3-
43
const router = createRouter({
54
history: createWebHistory(import.meta.env.BASE_URL),
65
routes: [
76
{
87
path: '/',
9-
name: 'home',
8+
name: 'Home | Bus Management',
109
component: HomeView
1110
},
1211
{
1312
path: '/about',
14-
name: 'about',
13+
name: 'About | Bus Management',
1514
// route level code-splitting
1615
// this generates a separate chunk (About.[hash].js) for this route
1716
// which is lazy-loaded when the route is visited.
1817
component: () => import('../views/AboutView.vue')
1918
},
2019
{
2120
path: '/contact',
22-
name: 'contact',
21+
name: 'Contact | Bus Management',
2322
// route level code-splitting
2423
// this generates a separate chunk (About.[hash].js) for this route
2524
// which is lazy-loaded when the route is visited.
2625
component: () => import('../views/ContactView.vue')
2726
},
27+
{
28+
path: "/:pathMatch(.*)*",
29+
name:"OPPS | Page Not Found",
30+
component: () => import('../views/NotfoundView.vue'),
31+
},
2832
]
2933
})
3034

‎Bus-Management/src/views/AboutView.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
11
<template>
2-
<div class="about">
3-
<h1 class="text-3xl font-bold underline text-red-600">This is an about page</h1>
2+
<div>
3+
<HeaderView/>
4+
<h1>dasdsdsdsdad</h1>
5+
6+
<FooterView/>
47
</div>
58
</template>
69

7-
<style>
10+
<script>
11+
import HeaderView from '../components/HeaderView.vue'
12+
import FooterView from '../components/FooterView.vue';
13+
export default {
14+
components:{
15+
HeaderView,
16+
FooterView
17+
}
18+
}
19+
</script>
20+
21+
<style scoped>
822
9-
</style>
23+
</style>

‎Bus-Management/src/views/ContactView.vue‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,21 @@
1-
<template></template>
1+
<template>
2+
<div>
3+
<HeaderView/>
4+
<FooterView/>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import HeaderView from '../components/HeaderView.vue'
10+
import FooterView from '../components/FooterView.vue';
11+
export default {
12+
components:{
13+
HeaderView,
14+
FooterView
15+
}
16+
}
17+
</script>
18+
19+
<style scoped>
20+
21+
</style>

‎Bus-Management/src/views/HomeView.vue‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
<script setup>
1+
<template>
2+
<HeaderView/>
3+
4+
<FooterView/>
5+
</template>
26

7+
<script>
8+
import HeaderView from '../components/HeaderView.vue'
9+
import FooterView from '../components/FooterView.vue';
10+
export default {
11+
components:{
12+
HeaderView,
13+
FooterView
14+
}
15+
}
316
</script>
417

5-
<template>
6-
<main>
7-
<h1>Home</h1>
8-
</main>
9-
</template>
18+
<style scoped>
19+
20+
</style>

0 commit comments

Comments
 (0)