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="flex-between2">
<ul
class="submenu contenedor-menu2"
:class="{ 'show-menu ': showSubmenu }"
>
<li
v-for="(item, index) in menuItems"
:key="index"
style="color: #3fb52d"
>
<span @click="toggleSubMenu(index)">
{{ item.title }}
<i
:class="{
'fa fa-chevron-down': item.open,
'fa fa-chevron-up': !item.open,
}"
></i>
</span>
<ul v-if="item.open">
<li
v-for="(subItem, subIndex) in item.subMenu"
:key="subIndex"
style="color: #333"
>
<router-link :to="subItem.route">
{{ subItem.title }}</router-link
>
</li>
</ul>
</li>
<!-- <li style="color: #3fb52d">
<router-link to="/Mypage.page"> 마이페이지 </router-link>
</li> -->
<li style="color: #3fb52d">
<router-link to="/Login.page"> 로그인 </router-link>
</li>
</ul>
</div>
<div class="logo flex">
<input type="checkbox" id="menuicon" @click="toggleSubmenu()" />
<label class="menu-icon" for="menuicon">
<img :src="imageSrc" alt="Image" @click="toggle()" />
<!-- <span></span>
<span></span>
<span></span> -->
</label>
<router-link to="/">
<span class="logotxt"> AI 안전통합 횡단보도 플랫폼 </span>
</router-link>
</div>
<div class="header_menu">
<nav class="flex gap" v-show="store.state.loginUser != null">
<router-link to="/Introduction.page">
<span
@mouseover="showDropdown = true"
@mouseleave="showDropdown = false"
>플랫폼 소개
</span>
</router-link>
<div
class="nav"
v-show="showDropdown"
@mouseover="showDropdown = true"
@mouseleave="showDropdown = false"
>
<div class="menu flex-end gap">
<ul>
<li
v-for="option in dropdownOptions"
:key="option.value"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
<ul>
<li
v-for="option in dropdownOptions2"
:key="option.value"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
<ul>
<li
v-for="option in dropdownOptions5"
:key="option.value"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
<ul>
<li
v-for="option in dropdownOptions3"
:key="option.value"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
<ul>
<li
v-for="option in dropdownOptions4"
:key="option.value"
@click="navigateToPage(option)"
>
<router-link :to="option.route">{{ option.label }}</router-link>
</li>
</ul>
</div>
</div>
<router-link to="/RealtimeStatus.page">
<span
@mouseover="showDropdown = true"
@mouseleave="showDropdown = false"
>현황관제</span
>
</router-link>
<router-link to="/Analysis.page">
<span
@mouseover="showDropdown = true"
@mouseleave="showDropdown = false"
>통계분석
</span>
</router-link>
<router-link to="/CrosswalkInsert.page">
<span
@mouseover="showDropdown = true"
@mouseleave="showDropdown = false"
>횡단보도 관리</span
>
</router-link>
<router-link to="/UserManagement.page">
<span
@mouseover="showDropdown = true"
@mouseleave="showDropdown = false"
>시스템 관리</span
>
</router-link>
</nav>
<div class="sub_menu">
<router-link to="/Mypage.page">
<span v-show="store.state.loginUser != null">마이페이지</span>
</router-link>
<!--
<router-link to="/Login.page">
<span v-show="store.state.loginUser == null">로그인</span>
</router-link>
-->
<div
class="logout-btn s-btn"
@click="logout"
v-show="store.state.loginUser != null"
>
로그아웃
</div>
</div>
</div>
</header>
<!-- 가로 467px 일때 실행되는 template 평소엔 display:none -->
<!-- <div class="submenu" v-show="showSubmenu">/// -->
<!-- <ul class="submenu" >
<li>
<router-link to="/Introduction.page">
<a href="#">플랫폼 소개<i class="fa fa-chevron-down"></i></a>
</router-link>
<ul>
<li>스마트 횡단보도란?</li>
</ul>
</li>
<li>
<router-link to="/Analysis.page">
<a href="#">현황관제<i class="fa fa-chevron-down"></i></a>
</router-link>
<ul>
<li>실시간 현황관제</li>
<li>상황발생 정보조회</li>
<li>장애 발생 정보조회</li>
<li>횡단보도 목록조회</li>
</ul>
</li>
<li>
<router-link to="/Analysis.page">
<a href="#">통계분석<i class="fa fa-chevron-down"></i></a>
</router-link>
<ul>
<li>통계분석</li>
</ul>
</li>
<li>
<router-link to="/CrosswalkInsert.page">
<a href="#">횡단보도 관리<i class="fa fa-chevron-down"></i></a>
</router-link>
<ul>
<li>횡단보도 등록</li>
<li>횡단보도 조회</li>
</ul>
</li>
<li>
<router-link to="/UserManagement.page">
<a href="#">시스템 관리<i class="fa fa-chevron-down"></i></a>
</router-link>
<ul>
<li>사용자 관리</li>
<li>유지보수 담당자 관리</li>
<li>표준노드 관리</li>
<li>행정동 관리</li>
<li>데이터 수집기록</li>
</ul>
</li>
<li>
<router-link to="/Mypage.page"> 마이페이지 </router-link>
</li>
<li>
<router-link to="/Login.page">
<a href="#">로그인</a>
</router-link>
</li>
</ul> -->
</template>
<script>
// import test from "./sidebar-accordion";
const Menu = require("./Menu");
import { useStore } from "vuex";
import axios from "axios";
export default {
data() {
return {
imageSrc:
"https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5",
menuOpen: false,
showDropdown: false,
showSubmenu: false,
dropdownOptions: [
{
label: "스마트 횡단보도란?",
value: "Introduction",
route: "/Introduction.page",
},
// { label: '매뉴얼 다운로드', value: 'ManualDown', route: '/ManualDown.page' },
],
selectedOption: null,
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,
dropdownOptions3: [
{
label: "횡단보도 등록",
value: "CrosswalkInsert",
route: "/CrosswalkInsert.page",
},
{
label: "횡단보도 조회",
value: "CrosswalkSearch",
route: "/CrosswalkSearch.page",
},
],
selectedOption3: null,
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,
dropdownOptions5: [
{ label: "통계분석", value: "Analysis", route: "/Analysis.page" },
],
selectedOption5: null,
menuItems: [
{
title: "플랫폼 소개",
open: false,
subMenu: [
{ title: "스마트 횡단보도란?", route: "/Introduction.page" },
],
},
{
title: "현황관제",
open: false,
subMenu: [
{ title: "실시간 현황관제", route: "/RealtimeStatus.page" },
{ title: "상황발생 정보조회", route: "/SituationSearch.page" },
{ title: "장애 발생 정보조회", route: "/ErrorSearch.page" },
{ title: "횡단보도 목록조회", route: "/CrosswalkListSearch.page" },
],
},
{
title: "통계분석",
open: false,
subMenu: [{ title: "통계분석", route: "/Analysis.page" }],
},
{
title: "횡단보도 관리",
open: false,
subMenu: [
{ title: "횡단보도 등록", route: "/CrosswalkInsert.page" },
{ title: "횡단보도 조회", route: "/CrosswalkSearch.page" },
],
},
{
title: "시스템 관리",
open: false,
subMenu: [
{ title: "사용자 관리", route: "/UserManagement.page" },
{ title: "유지보수 담당자 관리", route: "/ChargeManagement.page" },
{ title: "표준노드 관리", route: "/NodeManagement.page" },
// { title: "행정동 관리", route: "/DongManagement.page" },
{ title: "데이터 수집기록", route: "/DataRecord.page" },
],
},
// {
// title: "마이페이지",
// open: false,
// route: "/Mypage.page"
// },
// {
// title: "로그인",
// open: false,
// subMenu: [{ title: "로그인", route: "/Login.page" },],
// },
],
store: useStore(),
};
},
methods: {
//로그아웃
logout: function () {
if (confirm("로그아웃 하시겠습니까?") == false) {
return;
}
let vm = this;
axios({
url: "/user/logout.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
})
.then(function (response) {
// console.log("logout - response : ", response);
vm.$router.push({ path: "/Login.page", query: {} });
})
.catch(function (error) {
console.log("logout - error : ", error);
});
},
toggleSubMenu(index) {
this.menuItems[index].open = !this.menuItems[index].open;
this.showSubmenu = true;
console.log("toggleSubMenu 호출됨");
},
toggle() {
if (
this.imageSrc ===
"https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5"
) {
this.imageSrc =
"https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close2.png?alt=media&token=801544fa-80dd-4dc5-98c2-099a2fdb7791";
} else {
this.imageSrc =
"https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5";
}
},
toggleSubmenu: function () {
this.showSubmenu = !this.showSubmenu;
},
toggleDropdown() {
this.showDropdown = !this.showDropdown;
// this.menuOpen = !this.menu;
},
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;
},
selectOption4(option) {
this.selectedOption4 = option;
this.showDropdown4 = false;
},
},
};
</script>
<style scoped>
.menu-icon {
display: none;
}
header {
position: relative;
}
nav {
position: relative;
}
nav a {
width: 16rem;
text-align: center;
}
nav span {
padding: 2.7rem 0;
/* border: 1px solid blue; */
}
.nav {
position: absolute;
left: 0;
top: 47px;
z-index: 500;
width: -webkit-fill-available;
box-sizing: border-box;
/* padding: 50em 50em 50em 50em !important; */
/* padding-left: 50em !important; */
height: 14rem;
/* background-color: white; */
}
.menu {
position: absolute;
left: 0;
/* top: -1.6rem; */
z-index: 500;
width: fit-content;
/* border: 1px solid red; */
/* padding: 1rem 25.5rem 1rem 1rem; */
text-align: center;
background-color: rgba(255, 255, 255, 0.86);
padding: 1em 50em 2em 100em;
transform: translateX(-100em);
border-bottom: 1px solid #b0afaf;
}
.menu li:hover {
background: #13833b;
}
.menu li:hover a {
color: #fff;
}
ul {
width: 16rem;
}
li a {
color: #7e7e7f;
}
.logotxt {
transition: 0.3s;
color: #ffffff;
font-size: 23px;
}
.logotxt:hover {
transition: 0.3s;
color: #fff200;
}
.logoimg {
display: none;
}
.header_menu {
transition: 0.3s;
color: #ffffff;
font-size: 16px;
display: flex;
gap: 10rem;
align-items: center;
align-content: center;
justify-content: center;
/* width: 45%; */
}
.header_menu span:hover {
transition: 0.3s;
color: #fff200;
}
.sub_menu {
color: #ffffff81;
font-size: 14px;
gap: 3rem;
display: flex;
left: 70%;
align-items: center;
width: 40%;
}
.sub_menu a{width: max-content;}
input[id="menuicon"] {
display: none;
}
.flex-between2 {
display: none;
}
@media (max-width: 749px) {
.logo {
align-items: center;
padding-top: 2rem;
gap: 1rem;
}
.menu-icon img {
width: 3rem;
}
.logotxt {
text-align: center;
/* width: 100vw;
position: absolute; */
left: 0%;
top: 22%;
font-size: 2rem;
}
input#menuicon {
display: none;
}
input#menuicon + label {
flex: 0 0 10%;
display: block;
/* width: 30px; */
height: 30px;
/* position: absolute; */
left: 2%;
top: 25px;
cursor: pointer;
}
input#menuicon + label span {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 30px;
background: #ffffff;
transition: all 0.35s;
}
input#menuicon + label span:nth-child(1) {
top: 0;
}
input#menuicon + label span:nth-child(2) {
top: 20%;
transform: translateY(-60%);
}
input#menuicon + label span:nth-child(3) {
bottom: 60%;
}
input#menuicon:checked + label span:nth-child(1) {
top: 20%;
transform: rotate(50deg);
}
input#menuicon:checked + label span:nth-child(2) {
opacity: 0;
}
input#menuicon:checked + label span:nth-child(3) {
bottom: 79%;
transform: rotate(-50deg);
}
.flex-between2 {
/* width: 100vw; */
position: absolute;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 40000;
display: none;
}
body {
font-family: "Montserrat", sans-serif;
}
a {
text-decoration: none;
}
.btnMenu {
display: none;
padding: 20px;
display: block;
background: #1abc9c;
color: #fff;
}
.btnMenu i.fa {
float: right;
}
.contenedor-menu2 {
display: none;
position: absolute;
top: 100%;
left: -21px;
/* padding-left: 3rem; */
background-color: #fff;
z-index: 999;
min-width: 329px;
margin-top: 70px;
/* display: inline-block; */
/* /background: #fff; */
font-size: 20px;
/* height: 700px; */
/* margin: 0 auto; */
/* text-align: center; */
/* border: 1px solid red; */
line-height: 18px;
cursor: pointer;
}
.show-menu {
display: block;
padding: 1rem;
}
.contenedor-menu2 li {
width: -webkit-fill-available;
text-align: left;
/* margin-top: 20px; */
padding: 1rem 2rem;
/* margin-bottom: 20px;
/* border: 1px solid green; */
}
.contenedor-menu2 li ul {
margin-top: 1rem;
}
/* .contenedor-menu2 li ul li{padding: 2rem 1rem 1rem 1rem;} */
.contenedor-menu2 a {
width: 100vw;
text-align: center;
font-size: 18px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 20px;
/* border: 1px solid green; */
}
.sub_menu {
width: 100vw;
background: #fff;
height: 700px;
}
.contenedor-menu2 .menu2 {
width: 100%;
}
.contenedor-menu2 ul {
list-style: none;
width: -webkit-fill-available;
}
.contenedor-menu2 .menu2 li a {
color: #494949;
display: block;
border: 1px solid red;
padding: 15px 0px;
text-align: center;
background: #e9e9e9;
font-size: 25px;
}
.contenedor-menu2 .menu2 li a:hover {
background: #16a085;
color: #fff;
}
.contenedor-menu2 .menu2 i.fa {
font-size: 12px;
line-height: 18px;
float: right;
margin-left: 10px;
}
.contenedor-menu2 .menu2 ul {
display: none;
}
.contenedor-menu2 .menu2 ul li a {
background: #424242;
color: #e9e9e9;
}
.contenedor-menu2 .menu2 .activado > a {
background: #16a085;
color: #fff;
}
body {
font-family: "Montserrat", sans-serif;
}
a {
text-decoration: none;
}
.header_menu {
display: none;
}
.flex-between2 {
display: block;
}
}
</style>