Commit @9ccde137dff14dfe498eb3a192f4d1ed76d7bc22

박정하 04-15

250415 박정하 등록, 수정, 상세보기 페이지에서도 현재 메뉴 표시용 css가 적용되도록 수정

@9ccde137dff14dfe498eb3a192f4d1ed76d7bc22

81f87b5

9ccde13

client/resources/css/user/main.css

--- client/resources/css/user/main.css

+++ client/resources/css/user/main.css


         }
 
         p:hover a,
-        .point-menu {
+        .point-menu a {
             color: #c23d4a;
             font-family: "Pretendard-B";
 
         }
 
-        p:hover a::after {
+        p:hover a::after,
+        .point-menu a::after {
             content: '';
             background-image: url(../../images/hover.png);
             background-repeat: no-repeat;

81f87b5

9ccde13

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


           <nav>
             <ul v-if="$store.state.roles.length > 0">
               <li @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
-                <p :class="{ 'active-menu': this.$route.path === '/PicHistorySearch.page' || this.$route.path === '/VideoHistorySearch.page' }">기록물</p>
+                <p :class="{ 'active-menu': this.$route.path.startsWith('/PicHistory') || this.$route.path.startsWith('/VideoHistory') }">기록물</p>
                 <div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
-                  <p :class="{ 'now-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/PicHistory') }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
                   </p>
                   <div class="hr"></div>
-                  <p :class="{ 'now-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/VideoHistory') }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
                   </p>
                 </div>
               </li>
               <li @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
-                <p :class="{ 'active-menu': this.$route.path === '/MediaVideoSearch.page' || this.$route.path === '/NewsReleaseSearch.page' }">언론에서 바라본 구미시</p>
+                <p :class="{ 'active-menu': this.$route.path.startsWith('/MediaVideo') || this.$route.path.startsWith('/NewsRelease') }">언론에서 바라본 구미시</p>
                 <div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
-                  <p :class="{ 'now-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/MediaVideo') }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
                   </p>
                   <div class="hr"></div>
-                  <p :class="{ 'now-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/NewsRelease') }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
                   </p>
                 </div>
               </li>

               <li>
                 <h6>기록물</h6>
                 <div class="submenu">
-                  <p :class="{ 'point-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path.startsWith('/PicHistory') }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
                   <div class="hr pink"></div>
-                  <p :class="{ 'point-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path.startsWith('/VideoHistory') }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
                 </div>
               </li>
               <li>
                 <h6>언론에서 바라본 구미시</h6>
                 <div class="submenu">
-                  <p :class="{ 'point-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path.startsWith('/MediaVideo') }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
                   <div class="hr pink"></div>
-                  <p :class="{ 'point-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
+                  <p :class="{ 'point-menu': this.$route.path.startsWith('/NewsRelease') }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
                 </div>
               </li>
               <template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">

Add a comment

Open 0
Closed 0

List

...	...	@@ -84,13 +84,14 @@
84	84	}
85	85
86	86	p:hover a,
87		- .point-menu {
	87	+ .point-menu a {
88	88	color: #c23d4a;
89	89	font-family: "Pretendard-B";
90	90
91	91	}
92	92
93		- p:hover a::after {
	93	+ p:hover a::after,
	94	+ .point-menu a::after {
94	95	content: '';
95	96	background-image: url(../../images/hover.png);
96	97	background-repeat: no-repeat;

...	...	@@ -9,22 +9,22 @@
9	9	<nav>
10	10	<ul v-if="$store.state.roles.length > 0">
11	11	<li @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
12		- <p :class="{ 'active-menu': this.$route.path === '/PicHistorySearch.page' \|\| this.$route.path === '/VideoHistorySearch.page' }">기록물</p>
	12	+ <p :class="{ 'active-menu': this.$route.path.startsWith('/PicHistory') \|\| this.$route.path.startsWith('/VideoHistory') }">기록물</p>
13	13	<div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
14		- <p :class="{ 'now-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
	14	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/PicHistory') }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
15	15	</p>
16	16	<div class="hr"></div>
17		- <p :class="{ 'now-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
	17	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/VideoHistory') }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
18	18	</p>
19	19	</div>
20	20	</li>
21	21	<li @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
22		- <p :class="{ 'active-menu': this.$route.path === '/MediaVideoSearch.page' \|\| this.$route.path === '/NewsReleaseSearch.page' }">언론에서 바라본 구미시</p>
	22	+ <p :class="{ 'active-menu': this.$route.path.startsWith('/MediaVideo') \|\| this.$route.path.startsWith('/NewsRelease') }">언론에서 바라본 구미시</p>
23	23	<div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
24		- <p :class="{ 'now-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
	24	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/MediaVideo') }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
25	25	</p>
26	26	<div class="hr"></div>
27		- <p :class="{ 'now-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
	27	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/NewsRelease') }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
28	28	</p>
29	29	</div>
30	30	</li>
...	...	@@ -62,17 +62,17 @@
62	62	<li>
63	63	<h6>기록물</h6>
64	64	<div class="submenu">
65		- <p :class="{ 'point-menu': this.$route.path === '/PicHistorySearch.page' }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
	65	+ <p :class="{ 'point-menu': this.$route.path.startsWith('/PicHistory') }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="closeMenu">사진 기록물</router-link></p>
66	66	<div class="hr pink"></div>
67		- <p :class="{ 'point-menu': this.$route.path === '/VideoHistorySearch.page' }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
	67	+ <p :class="{ 'point-menu': this.$route.path.startsWith('/VideoHistory') }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="closeMenu">영상 기록물</router-link></p>
68	68	</div>
69	69	</li>
70	70	<li>
71	71	<h6>언론에서 바라본 구미시</h6>
72	72	<div class="submenu">
73		- <p :class="{ 'point-menu': this.$route.path === '/MediaVideoSearch.page' }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
	73	+ <p :class="{ 'point-menu': this.$route.path.startsWith('/MediaVideo') }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="closeMenu">미디어 영상</router-link></p>
74	74	<div class="hr pink"></div>
75		- <p :class="{ 'point-menu': this.$route.path === '/NewsReleaseSearch.page' }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
	75	+ <p :class="{ 'point-menu': this.$route.path.startsWith('/NewsRelease') }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="closeMenu">보도자료</router-link></p>
76	76	</div>
77	77	</li>
78	78	<template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">

Delete comment