Commit @099c434dc81ba1bd12ec84b4d1de293f5a22f4ce

최정임 2023-06-23

230623 최정임 반응형 작업중

@099c434dc81ba1bd12ec84b4d1de293f5a22f4ce

302e670

099c434

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


 
 
 /*스크롤바디자인*/
-::-webkit-scrollbar {
-  width: 8px;
-}
 ::-webkit-scrollbar-thumb {
   background-color: #c4c7cc;
   border-radius: 10px;

302e670

099c434

client/resources/css/responsive.css

--- client/resources/css/responsive.css

+++ client/resources/css/responsive.css


   .main-warp > div {
     display: block;
   }
-  .header_menu nav{display: none;}
 }

099c434

client/resources/images/right.png (Binary) (added)

+++ client/resources/images/right.png

Binary file is not shown

302e670

099c434

client/views/pages/RealtimeStatus/RealtimeStatus.vue

--- client/views/pages/RealtimeStatus/RealtimeStatus.vue

+++ client/views/pages/RealtimeStatus/RealtimeStatus.vue


 <template>
   <div class="flex">
-    <div class="left">
+    <div :class="['side-menu left flex', { open: isMenuOpen }]">
       <div class="wrap flex-between">
         <div class="iconlist">
           <ul>

             </li>
           </ul>
         </div>
-        <button class="hide-on-mobile" @click="toggleVisibility">
-          Click Me
-        </button>
-        <div class="search" v-if="isButtonVisible">
+
+        <div class="search">
           <h2>지역설정</h2>
           <div class="box">
             <div class="flex-between m-b">

           </div>
         </div>
       </div>
+      <div class="hide-on-mobile flex">
+        <img
+          @click="toggleMenu"
+          src="../../../resources/images/right.png"
+          alt=""
+        />
+      </div>
     </div>
     <div class="right">
-      <div class="top">
-        <ul class="flex-end">
+      <div class="top slider">
+        <ul class="flex-end list">
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
+                alt
+              />금일 보행자
+            </p>
             <h3>명</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
+                alt
+              />금일 무단횡단 발생
+            </p>
             <h3>회</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
+                alt
+              />금일 신호연장 발생
+            </p>
             <h3>회</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 시간</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
+                alt
+              />금일 신호연장 시간
+            </p>
             <h3>초</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 차량 신호위반 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
+                alt
+              />금일 차량 신호위반 발생
+            </p>
             <h3>회</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 장애 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
+                alt
+              />금일 장애 발생
+            </p>
             <h3>회</h3>
           </li>
         </ul>

   </div>
 </template>
 <style scoped>
-.chart div{min-height: 13rem;}
+.box {
+  background: #fff;
+}
+.chart div {
+  min-height: 13rem;
+}
 .chart {
   width: 600px;
 }

   width: calc(100% / 6);
   text-align: center;
 }
-.top li img{width: 20px;}
+.top li img {
+  width: 20px;
+}
 .top h3 {
   font-size: 20px;
 }

   width: -webkit-fill-available;
 }
 .hide-on-mobile {
-    display: none;
-  }
+  display: none;
+}
 @media all and (max-width: 768px) {
-  .left .wrap{display: -webkit-box;}
+  .bg-white{min-height: -webkit-fill-available;}
+  .wrap {
+    height: -webkit-fill-available;
+  }
+  .side-menu {
+    align-items: baseline;
+    position: fixed;
+    top: 136px;
+    left: -55rem; /* Adjust the value as per your needs */
+    transition: left 0.3s ease-in-out;
+    height: -webkit-fill-available;
+  }
+
+  .side-menu.open {
+    left: 0;
+  }
+
+  .main-content {
+    margin-left: 300px; /* Adjust the value to accommodate the menu width */
+    transition: margin-left 0.3s ease-in-out;
+  }
+
+  .side-menu.open + .main-content {
+    margin-left: 0;
+  }
+  .left {
+    z-index: 50;
+    background: none;
+  }
+  .search {
+    width: 494px;
+  }
+  .left .wrap {
+    display: -webkit-box;
+  }
   .slider {
-    overflow-x: hidden;
+    overflow-x: scroll;
   }
   .hide-on-mobile {
-  display: block;
-}
+    display: block;
+    background: #e5e3e3;
+    border: 1px solid #333;
+  }
   .list {
     display: flex;
     flex-wrap: nowrap;

     transition: transform 0.3s ease-in-out;
     width: 1800px;
   }
-  .list li{}
+  .list li {
+  }
 }
 </style>
 <script>

 export default {
   data() {
     return {
-      isButtonVisible: true,
+      isMenuOpen: false,
       tabs: [
         {
           id: 1,

     Map: Map,
   },
   methods: {
-    toggleVisibility() {
-      this.isButtonVisible = !this.isButtonVisible;
+    toggleContent() {
+      this.isContentVisible = !this.isContentVisible;
+    },
+    toggleMenu() {
+      this.isMenuOpen = !this.isMenuOpen;
     },
     changeTab(tabId) {
       this.activeTab = tabId;

302e670

099c434

client/views/pages/SystemManagement/UserManagement.vue

--- client/views/pages/SystemManagement/UserManagement.vue

+++ client/views/pages/SystemManagement/UserManagement.vue


             <option value="지자체관리자">지자체관리자</option>
           </select>
         </div>
-        <div class="float-right">
+        <div class="float-right flex gap">
           <label>등록일자</label>
           <input type="date" value-format="yyyyMMdd" v-model="userListSearch.startDate"/>
           <span>~</span>

             <col style="width: 15%;">
             <col style="width: 15%;">
             <col style="width: 15%;">
-            <col style="width: 20%;">
+            <col style="width: 10%;">
             <col style="width: 15%;">
+            <col style="width: 10%;">
           </colgroup>
           <thead>
             <tr>

Add a comment

Open 0
Closed 0

List

...	...	@@ -161,9 +161,6 @@
161	161
162	162
163	163	/스크롤바디자인/
164		-::-webkit-scrollbar {
165		- width: 8px;
166		-}
167	164	::-webkit-scrollbar-thumb {
168	165	background-color: #c4c7cc;
169	166	border-radius: 10px;

...	...	@@ -23,7 +23,7 @@
23	23	<option value="지자체관리자">지자체관리자</option>
24	24	</select>
25	25	</div>
26		- <div class="float-right">
	26	+ <div class="float-right flex gap">
27	27	<label>등록일자</label>
28	28	<input type="date" value-format="yyyyMMdd" v-model="userListSearch.startDate"/>
29	29	<span>~</span>
...	...	@@ -46,8 +46,9 @@
46	46	<col style="width: 15%;">
47	47	<col style="width: 15%;">
48	48	<col style="width: 15%;">
49		- <col style="width: 20%;">
	49	+ <col style="width: 10%;">
50	50	<col style="width: 15%;">
	51	+ <col style="width: 10%;">
51	52	</colgroup>
52	53	<thead>
53	54	<tr>

...	...	@@ -3,5 +3,4 @@
3	3	.main-warp > div {
4	4	display: block;
5	5	}
6		- .header_menu nav{display: none;}
7	6	}

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div class="flex">
3		- <div class="left">
	3	+ <div :class="['side-menu left flex', { open: isMenuOpen }]">
4	4	<div class="wrap flex-between">
5	5	<div class="iconlist">
6	6	<ul>
...	...	@@ -15,10 +15,8 @@
15	15	</li>
16	16	</ul>
17	17	</div>
18		- <button class="hide-on-mobile" @click="toggleVisibility">
19		- Click Me
20		- </button>
21		- <div class="search" v-if="isButtonVisible">
	18	+
	19	+ <div class="search">
22	20	<h2>지역설정</h2>
23	21	<div class="box">
24	22	<div class="flex-between m-b">
...	...	@@ -104,32 +102,75 @@
104	102	</div>
105	103	</div>
106	104	</div>
	105	+ <div class="hide-on-mobile flex">
	106	+ <img
	107	+ @click="toggleMenu"
	108	+ src="../../../resources/images/right.png"
	109	+ alt=""
	110	+ />
	111	+ </div>
107	112	</div>
108	113	<div class="right">
109		- <div class="top">
110		- <ul class="flex-end">
	114	+ <div class="top slider">
	115	+ <ul class="flex-end list">
111	116	<li>
112		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자</p>
	117	+ <p class="flex-center">
	118	+ <img
	119	+ class="m-r"
	120	+ src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
	121	+ alt
	122	+ />금일 보행자
	123	+ </p>
113	124	<h3>명</h3>
114	125	</li>
115	126	<li>
116		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생</p>
	127	+ <p class="flex-center">
	128	+ <img
	129	+ class="m-r"
	130	+ src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
	131	+ alt
	132	+ />금일 무단횡단 발생
	133	+ </p>
117	134	<h3>회</h3>
118	135	</li>
119	136	<li>
120		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 발생</p>
	137	+ <p class="flex-center">
	138	+ <img
	139	+ class="m-r"
	140	+ src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
	141	+ alt
	142	+ />금일 신호연장 발생
	143	+ </p>
121	144	<h3>회</h3>
122	145	</li>
123	146	<li>
124		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 시간</p>
	147	+ <p class="flex-center">
	148	+ <img
	149	+ class="m-r"
	150	+ src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
	151	+ alt
	152	+ />금일 신호연장 시간
	153	+ </p>
125	154	<h3>초</h3>
126	155	</li>
127	156	<li>
128		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 차량 신호위반 발생</p>
	157	+ <p class="flex-center">
	158	+ <img
	159	+ class="m-r"
	160	+ src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
	161	+ alt
	162	+ />금일 차량 신호위반 발생
	163	+ </p>
129	164	<h3>회</h3>
130	165	</li>
131	166	<li>
132		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 장애 발생</p>
	167	+ <p class="flex-center">
	168	+ <img
	169	+ class="m-r"
	170	+ src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
	171	+ alt
	172	+ />금일 장애 발생
	173	+ </p>
133	174	<h3>회</h3>
134	175	</li>
135	176	</ul>
...	...	@@ -150,7 +191,12 @@
150	191	</div>
151	192	</template>
152	193	<style scoped>
153		-.chart div{min-height: 13rem;}
	194	+.box {
	195	+ background: #fff;
	196	+}
	197	+.chart div {
	198	+ min-height: 13rem;
	199	+}
154	200	.chart {
155	201	width: 600px;
156	202	}
...	...	@@ -195,7 +241,9 @@
195	241	width: calc(100% / 6);
196	242	text-align: center;
197	243	}
198		-.top li img{width: 20px;}
	244	+.top li img {
	245	+ width: 20px;
	246	+}
199	247	.top h3 {
200	248	font-size: 20px;
201	249	}
...	...	@@ -211,16 +259,52 @@
211	259	width: -webkit-fill-available;
212	260	}
213	261	.hide-on-mobile {
214		- display: none;
215		- }
	262	+ display: none;
	263	+}
216	264	@media all and (max-width: 768px) {
217		- .left .wrap{display: -webkit-box;}
	265	+ .bg-white{min-height: -webkit-fill-available;}
	266	+ .wrap {
	267	+ height: -webkit-fill-available;
	268	+ }
	269	+ .side-menu {
	270	+ align-items: baseline;
	271	+ position: fixed;
	272	+ top: 136px;
	273	+ left: -55rem; /* Adjust the value as per your needs */
	274	+ transition: left 0.3s ease-in-out;
	275	+ height: -webkit-fill-available;
	276	+ }
	277	+
	278	+ .side-menu.open {
	279	+ left: 0;
	280	+ }
	281	+
	282	+ .main-content {
	283	+ margin-left: 300px; /* Adjust the value to accommodate the menu width */
	284	+ transition: margin-left 0.3s ease-in-out;
	285	+ }
	286	+
	287	+ .side-menu.open + .main-content {
	288	+ margin-left: 0;
	289	+ }
	290	+ .left {
	291	+ z-index: 50;
	292	+ background: none;
	293	+ }
	294	+ .search {
	295	+ width: 494px;
	296	+ }
	297	+ .left .wrap {
	298	+ display: -webkit-box;
	299	+ }
218	300	.slider {
219		- overflow-x: hidden;
	301	+ overflow-x: scroll;
220	302	}
221	303	.hide-on-mobile {
222		- display: block;
223		-}
	304	+ display: block;
	305	+ background: #e5e3e3;
	306	+ border: 1px solid #333;
	307	+ }
224	308	.list {
225	309	display: flex;
226	310	flex-wrap: nowrap;
...	...	@@ -231,7 +315,8 @@
231	315	transition: transform 0.3s ease-in-out;
232	316	width: 1800px;
233	317	}
234		- .list li{}
	318	+ .list li {
	319	+ }
235	320	}
236	321	</style>
237	322	<script>
...	...	@@ -240,7 +325,7 @@
240	325	export default {
241	326	data() {
242	327	return {
243		- isButtonVisible: true,
	328	+ isMenuOpen: false,
244	329	tabs: [
245	330	{
246	331	id: 1,
...	...	@@ -267,8 +352,11 @@
267	352	Map: Map,
268	353	},
269	354	methods: {
270		- toggleVisibility() {
271		- this.isButtonVisible = !this.isButtonVisible;
	355	+ toggleContent() {
	356	+ this.isContentVisible = !this.isContentVisible;
	357	+ },
	358	+ toggleMenu() {
	359	+ this.isMenuOpen = !this.isMenuOpen;
272	360	},
273	361	changeTab(tabId) {
274	362	this.activeTab = tabId;

Delete comment