Commit @8ade54d87f2a4580d56679c38c667d40cff022b6

최정임 2023-07-26

230726 최정임 css 수정중2

@8ade54d87f2a4580d56679c38c667d40cff022b6

5e93da8

8ade54d

client/resources/css/common.css

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

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


   padding-top: 20px;
   padding-bottom: 8px;
 }
-.title {
-  text-align: center;
+.title { 
+  text-align: center; 
 }
+
 .combine-left {
   grid-column: 1/2;
 }

 .green {
   color: #a7d292;
 }
+.green2{color: #13833b;}
 .black {
   color: #333;
 }

 .bg-bluegray {
   background: #d2e2ef;
 }
-.bg-gra
-.leaflet-left .leaflet-control {
+.bg-gra .leaflet-left .leaflet-control {
   margin-left: 32rem !important;
 }
-.m-b{margin-bottom: 1rem;}
+.m-b {
+  margin-bottom: 1rem;
+}
 .m-b3 {
   margin-bottom: 3rem;
 }
 .m-r {
-  /* margin-right: 1rem; */
-  /* min-height: 150px; */
-  flex-shrink: 1;
-  /* flex-grow: 1; */
+  margin-right: 1rem;
 }
 .m-r3 {
   margin-right: 3rem;

   height: 3em;
   line-height: 3em;
 }
-.gr-btn{background: #13833b;
+.gr-btn {
+  background: #13833b;
   border: 0;
   border-radius: 5px;
-  color: #fff;}
+  color: #fff;
+}
 .gray-btn {
   background: #ffffff;
   border: 1px solid #b0afaf;
   border-radius: 5px;
   color: #b0afaf;
 }
-.search-btn{height: 4rem;}
+.search-btn {
+  height: 4rem;
+}
 /*스크롤바디자인*/
 ::-webkit-scrollbar-thumb {
   background-color: #c4c7cc;

 .right > div > div {
   height: inherit;
 }
+
+.br {
+  width: 1px;
+  height: 6rem;
+  border: 1px solid #b0afaf;
+}

8ade54d

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

+++ client/resources/images/bar.png

Binary file is not shown

5e93da8

8ade54d

client/views/pages/RealtimeStatus/CrosswalkListSearch.vue

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

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


 <template>
   <div class="wrap">
-    <h2 style="color: #10833b">횡단보도 목록 조회</h2>
+    <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">횡단보도 목록 조회</h2>
+    <div style="margin-left: 2rem;" class="m-b3">현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">횡단보도 목록 조회</em> </div>
     <div class="board-wrap">
       <div class="search-wrap">
         <div class="flex m-b mb-block">

   }
 }
 
-.gap {
+.wrap h2{font-size: 2.5rem;}
+.gap-sub {
+  height: 13em;
   width: 77.5em;
   /* height: 16em; */
   display: flex;
   flex-wrap: wrap;
   /* align-content: flex-start; */
-  border: 1px solid red;
-}
-.gap-sub {
-  height: 13em;
 }
 .taa2 {
   height: 5.5em !important;

   color: #333;
 }
 .wrap {
-  width: 155rem;
+  width: 80%;
   margin: 100px auto;
 }
 

   /* background: #f7f6f6; */
   /* padding: 1rem; */
 }
-
 .search-wrap input,
 .search-wrap select {
   height: 22.5px;

5e93da8

8ade54d

client/views/pages/RealtimeStatus/ErrorSearch.vue

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

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


 <template>
   <div class="wrap">
+    <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">장애발생 정보 조회</h2>
+    <div style="margin-left: 2rem;" class="m-b3">현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">장애발생 정보 조회</em> </div>
     <div class="board-wrap">
       <div class="search-wrap">
         <div class="flex m-b gap mb-block" style="margin-bottom: 2rem">

   color: #333;
 }
 .wrap {
-  width: 155rem;
+  width: 80%;
   margin: 100px auto;
 }
-
+.wrap h2{font-size: 2.5rem;}
 .search-wrap {
   margin-bottom: 30px;
   background: #f7f6f6;

5e93da8

8ade54d

client/views/pages/RealtimeStatus/RealtimeStatus.vue

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

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


       <div class="top">
         <ul class="flex-end">
           <li>
-            <p class="flex-center">
+            <p class="flex-center gap">
               <img
                 class="m-r"
                 src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
                 alt
               />금일 보행자
             </p>
-            <h3>명</h3>
+            <h3><em class="green2 m-r">45</em>명</h3>
           </li>
+          <li class="br"></li>
           <li>
-            <p class="flex-center">
+            <p class="flex-center gap">
               <img
                 class="m-r"
                 src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
                 alt
               />금일 무단횡단 발생
             </p>
-            <h3>회</h3>
+            <h3><em class="green2 m-r">45</em>회</h3>
           </li>
+          <li class="br"></li>
           <li>
-            <p class="flex-center">
+            <p class="flex-center gap">
               <img
                 class="m-r"
                 src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
                 alt
               />금일 신호연장 발생
             </p>
-            <h3>회</h3>
+            <h3><em class="green2 m-r">45</em>회</h3>
           </li>
+          <li class="br"></li>
           <li>
-            <p class="flex-center">
+            <p class="flex-center gap">
               <img
                 class="m-r"
                 src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
                 alt
               />금일 신호연장 시간
             </p>
-            <h3>초</h3>
+            <h3><em class="green2 m-r">45</em>초</h3>
           </li>
+          <li class="br"></li>
           <li>
-            <p class="flex-center">
+            <p class="flex-center gap">
               <img
                 class="m-r"
                 src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
                 alt
               />금일 차량 신호위반 발생
             </p>
-            <h3>회</h3>
+            <h3><em class="green2 m-r">45</em>회</h3>
           </li>
+          <li class="br"></li>
           <li>
-            <p class="flex-center">
+            <p class="flex-center gap">
               <img
                 class="m-r"
                 src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
                 alt
               />금일 장애 발생
             </p>
-            <h3>회</h3>
+            <h3><em class="green2 m-r">45</em>회</h3>
           </li>
         </ul>
       </div>

5e93da8

8ade54d

client/views/pages/RealtimeStatus/SituationSearch.vue

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

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


 <template>
   <div class="wrap">
+    <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">상황발생 정보 조회</h2>
+    <div style="margin-left: 2rem;" class="m-b3">현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">상황발생 정보 조회</em> </div>
     <div class="board-wrap">
       <div class="search-wrap">
         <div class="flex-between mb-block">

   color: #333;
 }
 .wrap {
-  width: 155rem;
+  width: 80%;
   margin: 100px auto;
 }
-
+.wrap h2{font-size: 2.5rem;}
 .search-wrap {
   margin-bottom: 30px;
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -68,9 +68,10 @@
68	68	padding-top: 20px;
69	69	padding-bottom: 8px;
70	70	}
71		-.title {
72		- text-align: center;
	71	+.title {
	72	+ text-align: center;
73	73	}
	74	+
74	75	.combine-left {
75	76	grid-column: 1/2;
76	77	}
...	...	@@ -152,6 +153,7 @@
152	153	.green {
153	154	color: #a7d292;
154	155	}
	156	+.green2{color: #13833b;}
155	157	.black {
156	158	color: #333;
157	159	}
...	...	@@ -164,19 +166,17 @@
164	166	.bg-bluegray {
165	167	background: #d2e2ef;
166	168	}
167		-.bg-gra
168		-.leaflet-left .leaflet-control {
	169	+.bg-gra .leaflet-left .leaflet-control {
169	170	margin-left: 32rem !important;
170	171	}
171		-.m-b{margin-bottom: 1rem;}
	172	+.m-b {
	173	+ margin-bottom: 1rem;
	174	+}
172	175	.m-b3 {
173	176	margin-bottom: 3rem;
174	177	}
175	178	.m-r {
176		- /* margin-right: 1rem; */
177		- /* min-height: 150px; */
178		- flex-shrink: 1;
179		- /* flex-grow: 1; */
	179	+ margin-right: 1rem;
180	180	}
181	181	.m-r3 {
182	182	margin-right: 3rem;
...	...	@@ -202,17 +202,21 @@
202	202	height: 3em;
203	203	line-height: 3em;
204	204	}
205		-.gr-btn{background: #13833b;
	205	+.gr-btn {
	206	+ background: #13833b;
206	207	border: 0;
207	208	border-radius: 5px;
208		- color: #fff;}
	209	+ color: #fff;
	210	+}
209	211	.gray-btn {
210	212	background: #ffffff;
211	213	border: 1px solid #b0afaf;
212	214	border-radius: 5px;
213	215	color: #b0afaf;
214	216	}
215		-.search-btn{height: 4rem;}
	217	+.search-btn {
	218	+ height: 4rem;
	219	+}
216	220	/스크롤바디자인/
217	221	::-webkit-scrollbar-thumb {
218	222	background-color: #c4c7cc;
...	...	@@ -298,3 +302,9 @@
298	302	.right > div > div {
299	303	height: inherit;
300	304	}
	305	+
	306	+.br {
	307	+ width: 1px;
	308	+ height: 6rem;
	309	+ border: 1px solid #b0afaf;
	310	+}

...	...	@@ -1,6 +1,7 @@
1	1	<template>
2	2	<div class="wrap">
3		- <h2 style="color: #10833b">횡단보도 목록 조회</h2>
	3	+ <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">횡단보도 목록 조회</h2>
	4	+ <div style="margin-left: 2rem;" class="m-b3">현황관제 > <em class="green2 lined">횡단보도 목록 조회</em> </div>
4	5	<div class="board-wrap">
5	6	<div class="search-wrap">
6	7	<div class="flex m-b mb-block">
...	...	@@ -495,16 +496,14 @@
495	496	}
496	497	}
497	498
498		-.gap {
	499	+.wrap h2{font-size: 2.5rem;}
	500	+.gap-sub {
	501	+ height: 13em;
499	502	width: 77.5em;
500	503	/* height: 16em; */
501	504	display: flex;
502	505	flex-wrap: wrap;
503	506	/* align-content: flex-start; */
504		- border: 1px solid red;
505		-}
506		-.gap-sub {
507		- height: 13em;
508	507	}
509	508	.taa2 {
510	509	height: 5.5em !important;
...	...	@@ -621,7 +620,7 @@
621	620	color: #333;
622	621	}
623	622	.wrap {
624		- width: 155rem;
	623	+ width: 80%;
625	624	margin: 100px auto;
626	625	}
627	626
...	...	@@ -639,7 +638,6 @@
639	638	/* background: #f7f6f6; */
640	639	/* padding: 1rem; */
641	640	}
642		-
643	641	.search-wrap input,
644	642	.search-wrap select {
645	643	height: 22.5px;

...	...	@@ -1,5 +1,7 @@
1	1	<template>
2	2	<div class="wrap">
	3	+ <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">장애발생 정보 조회</h2>
	4	+ <div style="margin-left: 2rem;" class="m-b3">현황관제 > <em class="green2 lined">장애발생 정보 조회</em> </div>
3	5	<div class="board-wrap">
4	6	<div class="search-wrap">
5	7	<div class="flex m-b gap mb-block" style="margin-bottom: 2rem">
...	...	@@ -353,10 +355,10 @@
353	355	color: #333;
354	356	}
355	357	.wrap {
356		- width: 155rem;
	358	+ width: 80%;
357	359	margin: 100px auto;
358	360	}
359		-
	361	+.wrap h2{font-size: 2.5rem;}
360	362	.search-wrap {
361	363	margin-bottom: 30px;
362	364	background: #f7f6f6;

...	...	@@ -124,64 +124,69 @@
124	124	<div class="top">
125	125	<ul class="flex-end">
126	126	<li>
127		- <p class="flex-center">
	127	+ <p class="flex-center gap">
128	128	<img
129	129	class="m-r"
130	130	src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
131	131	alt
132	132	/>금일 보행자
133	133	</p>
134		- <h3>명</h3>
	134	+ <h3><em class="green2 m-r">45</em>명</h3>
135	135	</li>
	136	+ <li class="br"></li>
136	137	<li>
137		- <p class="flex-center">
	138	+ <p class="flex-center gap">
138	139	<img
139	140	class="m-r"
140	141	src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
141	142	alt
142	143	/>금일 무단횡단 발생
143	144	</p>
144		- <h3>회</h3>
	145	+ <h3><em class="green2 m-r">45</em>회</h3>
145	146	</li>
	147	+ <li class="br"></li>
146	148	<li>
147		- <p class="flex-center">
	149	+ <p class="flex-center gap">
148	150	<img
149	151	class="m-r"
150	152	src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
151	153	alt
152	154	/>금일 신호연장 발생
153	155	</p>
154		- <h3>회</h3>
	156	+ <h3><em class="green2 m-r">45</em>회</h3>
155	157	</li>
	158	+ <li class="br"></li>
156	159	<li>
157		- <p class="flex-center">
	160	+ <p class="flex-center gap">
158	161	<img
159	162	class="m-r"
160	163	src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
161	164	alt
162	165	/>금일 신호연장 시간
163	166	</p>
164		- <h3>초</h3>
	167	+ <h3><em class="green2 m-r">45</em>초</h3>
165	168	</li>
	169	+ <li class="br"></li>
166	170	<li>
167		- <p class="flex-center">
	171	+ <p class="flex-center gap">
168	172	<img
169	173	class="m-r"
170	174	src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
171	175	alt
172	176	/>금일 차량 신호위반 발생
173	177	</p>
174		- <h3>회</h3>
	178	+ <h3><em class="green2 m-r">45</em>회</h3>
175	179	</li>
	180	+ <li class="br"></li>
176	181	<li>
177		- <p class="flex-center">
	182	+ <p class="flex-center gap">
178	183	<img
179	184	class="m-r"
180	185	src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
181	186	alt
182	187	/>금일 장애 발생
183	188	</p>
184		- <h3>회</h3>
	189	+ <h3><em class="green2 m-r">45</em>회</h3>
185	190	</li>
186	191	</ul>
187	192	</div>

...	...	@@ -1,5 +1,7 @@
1	1	<template>
2	2	<div class="wrap">
	3	+ <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">상황발생 정보 조회</h2>
	4	+ <div style="margin-left: 2rem;" class="m-b3">현황관제 > <em class="green2 lined">상황발생 정보 조회</em> </div>
3	5	<div class="board-wrap">
4	6	<div class="search-wrap">
5	7	<div class="flex-between mb-block">
...	...	@@ -195,10 +197,10 @@
195	197	color: #333;
196	198	}
197	199	.wrap {
198		- width: 155rem;
	200	+ width: 80%;
199	201	margin: 100px auto;
200	202	}
201		-
	203	+.wrap h2{font-size: 2.5rem;}
202	204	.search-wrap {
203	205	margin-bottom: 30px;
204	206	}

Delete comment