File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<header class="flex-between">
<div class="logo">
<router-link to="/">
<span class="logotxt"> AI 안전통합 횡단보도 플랫폼 </span>
</router-link>
</div>
<div class="header_menu">
<router-link to="/Introduction.page">
<span @mouseover="showDropdown = true" @mouseleave="showDropdown = false"
>플랫폼 소개
</span>
<ul
v-show="showDropdown"
@mouseover="showDropdown = true"
>
<li
v-for="option in dropdownOptions"
:key="option.value"
@click="navigateToPage(option)"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
</router-link>
<router-link to="/RealtimeStatus.page">
<span @mouseover="showDropdown2 = true" @mouseleave="showDropdown2 = false">현황관제</span>
<ul
v-show="showDropdown2"
@mouseover="showDropdown2 = true" @mouseleave="showDropdown2 = false"
>
<li
v-for="option in dropdownOptions2"
:key="option.value"
@click="navigateToPage(option)"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
</router-link>
<router-link to="/Analysis.page">
<span>통계분석 </span>
</router-link>
<router-link to="/CrosswalkInsert.page">
<span @mouseover="showDropdown3 = true" @mouseleave="showDropdown3 = false">횡단보도 관리</span>
<ul
v-show="showDropdown3"
@mouseover="showDropdown3 = true" @mouseleave="showDropdown3 = false"
>
<li
v-for="option in dropdownOptions3"
:key="option.value"
@click="navigateToPage(option)"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
</router-link>
<router-link to="/UserManagement.page">
<span @mouseover="showDropdown4 = true" @mouseleave="showDropdown4 = false">시스템 관리</span>
<ul
v-show="showDropdown4"
@mouseover="showDropdown4 = true" @mouseleave="showDropdown4 = false"
>
<li
v-for="option in dropdownOptions4"
:key="option.value"
@click="navigateToPage(option)"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
</router-link>
<div class="sub_menu">
<router-link to="/Mypage.page">
<span>마이페이지</span>
</router-link>
<router-link to="/Login.page">
<span>로그인</span>
</router-link>
</div>
</div>
</header>
</template>
<script>
import Menu from "./Menu.vue";
export default {
data() {
return {
showDropdown: false,
dropdownOptions: [
{ label: '스마트 횡단보도란?', value: 'Introduction', route: '/Introduction.page' },
{ label: '매뉴얼 다운로드', value: 'ManualDown', route: '/ManualDown.page' },
],
selectedOption: null,
showDropdown2: false,
dropdownOptions2: [
{ label: '실시간 현황 관제', value: 'RealtimeStatus', route: '/RealtimeStatus.page' },
{ label: '상황발생 정보 조회', value: 'SituationSearch', route: '/SituationSearch.page' },
{ label: '장애발생 정보 조회', value: 'ErrorSearch', route: '/ErrorSearch.page' },
{ label: '횡단보도 목록 조회', value: 'CrosswalkListSearch', route: '/CrosswalkListSearch.page' },
],
selectedOption2: null,
showDropdown3: false,
dropdownOptions3: [
{ label: '횡단보도 등록', value: 'CrosswalkInsert', route: '/CrosswalkInsert.page' },
{ label: '횡단보도 조회', value: 'CrosswalkSearch', route: '/CrosswalkSearch.page' },
],
selectedOption3: null,
showDropdown4: false,
dropdownOptions4: [
{ label: '사용자 관리', value: 'UserManagement', route: '/UserManagement.page' },
{ label: '유지보수담당자 관리', value: 'ChargeManagement', route: '/ChargeManagement.page' },
{ label: '표준노드 관리', value: 'NodeManagement', route: '/NodeManagement.page' },
{ label: '행정동 관리', value: 'DongManagement', route: '/DongManagement.page' },
{ label: '데이터 수집 기록', value: 'DataRecord', route: '/DataRecord.page' },
],
selectedOption4: null,
};
},
methods: {
toggleDropdown() {
this.showDropdown = !this.showDropdown;
},
selectOption(option) {
this.selectedOption = option;
this.showDropdown = false;
},
toggleDropdown2() {
this.showDropdown2 = !this.showDropdown2;
},
selectOption2(option) {
this.selectedOption2 = option;
this.showDropdown2 = false;
},
toggleDropdown3() {
this.showDropdown3 = !this.showDropdown3;
},
selectOption3(option) {
this.selectedOption3 = option;
this.showDropdown3 = false;
},
toggleDropdown4() {
this.showDropdown4 = !this.showDropdown4;
},
selectOption3(option) {
this.selectedOption4 = option;
this.showDropdown4 = false;
},
},
watch: {},
computed: {},
components: {
Menu: Menu,
},
mounted() {
console.log("Header mounted");
},
};
</script>
<style scoped>
ul {
position: absolute;
z-index: 500;
background: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
li a{color: #bbb;}
.logotxt {
transition: 0.3s;
color: #ffffff;
font-size: 23px;
}
.logotxt:hover {
transition: 0.3s;
color: #fff200;
}
.header_menu {
transition: 0.3s;
color: #ffffff;
font-size: 16px;
display: flex;
gap: 10rem;
align-items: baseline;
align-content: center;
justify-content: center;
}
.header_menu span:hover {
transition: 0.3s;
color: #fff200;
}
.sub_menu {
color: #ffffff81;
font-size: 14px;
gap: 3rem;
display: flex;
left: 70%;
}
</style>