Commit @ca410d15b931620f5ac5ab9f8335951a5c869d0f

최정임 2023-07-26

230726 최정임 css 수정중 3

@ca410d15b931620f5ac5ab9f8335951a5c869d0f

56fd4cf

ca410d1

client/resources/css/common.css

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

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

...	...	@@ -19,6 +19,27 @@
19	19	font-weight: bold;
20	20	font-style: normal;
21	21	}
	22	+label{width: -webkit-fill-available;}
	23	+button {
	24	+ padding: 0.3rem 2rem;
	25	+ width: 100%;
	26	+ border-radius: 5px;
	27	+ border: 1px solid #333333;
	28	+ height: 3rem;
	29	+}
	30	+.s-btn{width: 15rem;}
	31	+input[type="text"]{height: 3rem; width: 40rem; padding: 0.5rem;
	32	+ border-radius: 5px; border: 1px solid #333333;}
	33	+ .text-input{width: 13rem !important;}
	34	+select {
	35	+ padding: 0.5rem;
	36	+ border-radius: 5px;
	37	+ width: 90%;
	38	+ height: 3rem;
	39	+}
	40	+.border-none{border-top: none !important; border-bottom: none !important;}
	41	+
	42	+
22	43	.grid {
23	44	display: grid;
24	45	}
...	...	@@ -30,7 +51,9 @@
30	51	display: flex;
31	52	align-items: center;
32	53	}
33		-.table{display: table;}
	54	+.table {
	55	+ display: table;
	56	+}
34	57	.flex-between {
35	58	display: flex;
36	59	/* flex-grow: 1; */
...	...	@@ -47,7 +70,11 @@
47	70	justify-content: space-around;
48	71	align-items: center;
49	72	}
50		-
	73	+.flex-border{ display: flex;
	74	+ flex-direction: row;
	75	+ align-items: flex-start;
	76	+ border: 1px solid #949292;
	77	+ flex-basis: content;}
51	78	.flex-center {
52	79	display: flex;
53	80	justify-content: center;
...	...	@@ -68,8 +95,8 @@
68	95	padding-top: 20px;
69	96	padding-bottom: 8px;
70	97	}
71		-.title {
72		- text-align: center;
	98	+.title {
	99	+ text-align: center;
73	100	}
74	101
75	102	.combine-left {
...	...	@@ -135,8 +162,14 @@
135	162	padding: 0px 0px;
136	163	}
137	164
	165	+
	166	+.b-r{border-radius: 10px;}
	167	+.b-shadow{box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.3);}
138	168	.bg-white {
139	169	background: #ffffff;
	170	+}
	171	+.bg-white2 {
	172	+ background: #ffffffbd;
140	173	}
141	174	.bg-gray {
142	175	background: #e5e5e5;
...	...	@@ -153,7 +186,9 @@
153	186	.green {
154	187	color: #a7d292;
155	188	}
156		-.green2{color: #13833b;}
	189	+.green2 {
	190	+ color: #13833b;
	191	+}
157	192	.black {
158	193	color: #333;
159	194	}
...	...	@@ -190,9 +225,7 @@
190	225	.gap5 {
191	226	gap: 5rem;
192	227	}
193		-button {
194		- padding: 0.3rem 2rem;
195		-}
	228	+
196	229	.btn-l {
197	230	width: -webkit-fill-available;
198	231	}
...	...	@@ -217,6 +250,8 @@
217	250	}
218	251	.search-btn {
219	252	height: 4rem;
	253	+ font-size: 16px;
	254	+ padding: 0.5rem 3rem;
220	255	}
221	256	/스크롤바디자인/
222	257	::-webkit-scrollbar-thumb {
...	...	@@ -309,3 +344,8 @@
309	344	height: 6rem;
310	345	border: 1px solid #b0afaf;
311	346	}
	347	+.br-ver {
	348	+ width: 100%;
	349	+ height: 1px;
	350	+ border: 1px solid #b0afaf;
	351	+} (No newline at end of file)

56fd4cf

ca410d1

client/resources/css/main.css

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

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


 /* 현황관제 */
 .search{ height: inherit; width: -webkit-fill-available; }
-.search label{width: max-content; font-size: 16px;}
+.search label{ font-size: 16px;}
 .search p{font-size: 16px;}
-.search select{width: 20rem;     height: 3rem;}
+/* .search select{width: 20rem;     height: 3rem;} */
 .search .box{padding: 2rem 1rem;}
 .search .box ul li{padding: 1rem; border-bottom: 1px solid #e5e3e3;}
 .iconlist{width: 55px; background: #d6d6d6; padding: 2rem 0.7rem; text-align: center; height: inherit;}

   }
 
 
-  .date-input{height: 3rem;
-    width: 77%;}
+  .date-input,.time-input{height: 3rem; width: 80%;
+    }
     .time-input, .text-input{height: 3rem;}
 
 .mobile{display: none;}
+
+.search-wrap {
+  margin-bottom: 30px;
+    background: #f7f6f6;
+    /* padding: 1rem; */
+    /* height: 16em; */
+    width: 100%;
+    /* flex-wrap: wrap; */
+    /* align-content: flex-start; */
+    margin-bottom: 3rem;
+}
+.search-wrap input{height: 3rem; width: 100%; border-radius: 5px;
+  border: 1px solid #949292; margin: 1rem; padding: 0.5rem;}
+  .search-wrap label{height: 100%; width: 20%; padding: 1rem; font-size: 14px;  background: #f7f6f6; border-collapse: collapse;}
+  .search-wrap select{margin: 1rem;}
+  .search-wrap .situ button{margin: 1rem;}
+  .search-wrap .box{width: 80%; padding-right: 5rem;}
+
   @media all and (max-width: 479px) {
   
     .board-wrap{padding:  0 1rem;}

56fd4cf

ca410d1

client/views/component/dongSelectList.vue

--- client/views/component/dongSelectList.vue

+++ client/views/component/dongSelectList.vue


     </div>
     <div class="flex-between  gap" id="gunGuHiddenCk">
         <label for="">시/군/구</label>
-        <select name="gunGuSelectList" id="gunGuSelectList" v-model="address['guGun_dong_cd']"
+        <select class="bg-white" name="gunGuSelectList" id="gunGuSelectList" v-model="address['guGun_dong_cd']"
             @change="siDoGunGuSelectF($event)">
             <option :value=null disabled> 시/군/구 </option>
             <option v-for="(item, key) in gunGuList" :key="key" :value="item['dong_cd']">

             </option>
         </select>
     </div>
-    <div class="flex-between " id="nodeHiddenCk">
+    <div class="flex-between gap" id="nodeHiddenCk">
         <label for="">교차로</label>
         <select name="nodeSelectList" id="nodeSelectList" v-model="address['node_id']" @change="nodeSelectF($event)">
             <option :value=null disabled> 교차로 </option>

 </script>
   
 
-  
+  <style scoped>
+  label{width: 30rem;} 
+  </style>
   

56fd4cf

ca410d1

client/views/layout/Header.vue

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

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


 .nav {
   position: absolute;
   left: 0;
-  top: 65px;
+  top: 47px;
   z-index: 500;
   width: -webkit-fill-available;
   box-sizing: border-box;

 .menu {
   position: absolute;
   left: 0;
-  top: -1.6rem;
+  /* top: -1.6rem; */
   z-index: 500;
   width: fit-content;
   /* border: 1px solid red; */

   background-color: rgba(255, 255, 255, 0.66);
   padding: 2em 50em 2em 100em;
   transform: translateX(-100em);
+  border-bottom: 1px solid #b0afaf;
 }
 .menu li:hover {
   background: #13833b;

   font-size: 16px;
   display: flex;
   gap: 10rem;
-  align-items: baseline;
+  align-items: center;
   align-content: center;
   justify-content: center;
+  
 }
 
 .header_menu span:hover {

56fd4cf

ca410d1

client/views/pages/CrosswalkManagement/CrosswalkInsert.vue

--- client/views/pages/CrosswalkManagement/CrosswalkInsert.vue

+++ client/views/pages/CrosswalkManagement/CrosswalkInsert.vue


               </select>
             </div>
 
-            <div class="m-b">
-              <div class="flex gap m-b">
-                <label for="" class="m-r">횡단보도 좌표</label><button @click="clickStateChange()">좌표선택</button>
+            <div class="m-b ">
+              <div class="flex-between gap m-b ">
+                <label for="" class="m-r">횡단보도 좌표</label><button class="s-btn" @click="clickStateChange()">좌표선택</button>
               </div>
-              <div class="flex gap">
+              <div class="br-ver m-b"></div>
+              <div class="flex-between gap">
                 <div class="flex m-b gap">
                   <label class="m-r">위도 : </label>
                   <input class="text-input" style="width: 9rem" type="text" name="" id="" placeholder="00.0000"

                 <label for="">검지장비 선택</label>
               </div>
               <div class="flex-between m-b">
-                <input type="checkbox" v-model="condition.wtrms_crosng_eqpmn_instl_yn" /><label for="">무단횡단</label>
-                <input type="checkbox" v-model="condition.signl_extn_eqpmn_instl_yn" /><label for="">신호연장</label>
-                <input type="checkbox" v-model="condition.rittrn_vhcle_eqpmn_instl_yn" /><label for="">우회전차량</label>
+                <input class="m-r" type="checkbox" v-model="condition.wtrms_crosng_eqpmn_instl_yn" /><label for="">무단횡단</label>
+                <input class="m-r" type="checkbox" v-model="condition.signl_extn_eqpmn_instl_yn" /><label for="">신호연장</label>
+                <input class="m-r" type="checkbox" v-model="condition.rittrn_vhcle_eqpmn_instl_yn" /><label for="">우회전차량</label>
               </div>
               <div class="bottom">
-                <div class="flex m-b gap">
+                <div class="flex-between m-b gap">
                   <label class="gap">무단횡단 검지 범위 : </label>
                   <select name="wtrms_crosng_detct_rate" id="wtrms_crosng_detct_rate"
                     v-model="condition.wtrms_crosng_detct_rate">

                     <option :value="10">10%</option>
                   </select>
                 </div>
-                <div class="flex m-b gap">
+                <div class="flex-between m-b gap">
                   <label class="gap">왕복차선 정보 : </label>
                   <select name="" id="" v-model="condition.rndtp_tfclne_info">
                     <option :value="99" disabled> 왕복 차선 정보 </option>

                     <option :value="20">왕복 20차선</option>
                   </select>
                 </div>
-                <div class="flex m-b gap">
+                <div class="flex-between m-b gap">
                   <label class="gap">우회전 차선 유무 : </label>
-                  <select style="width: 35%;" name="" id="" v-model="condition.rittrn_tfclne_yn">
+                  <select style="" name="" id="" v-model="condition.rittrn_tfclne_yn">
                     <option :value="null" disabled>우회전 차선 유무 선택</option>
                     <option :value=true>있음</option>
                     <option :value=false>없음</option>
                   </select>
                 </div>
-                <div class="flex m-b gap">
+                <div class="flex-between m-b gap">
                   <label class="gap">우회전 차선 유형 : </label>
-                  <input style="width: 35%;" class="text-input" type="text" name="" id="" placeholder="우회전 차선 유형 입력" v-model="condition.rittrn_tfclne_ty" />
+                  <input style="" class="" type="text" name="" id="" placeholder="우회전 차선 유형 입력" v-model="condition.rittrn_tfclne_ty" />
                 </div>
-                <div class="flex m-b gap">
+                <div class="flex-between m-b gap">
                   <label class="gap">횡단보도 관리자 : </label>
                   <div class="flex gap">
                     <input class="text-input" type="text" name="" id="" placeholder="" v-model="managerInfo.mngr_nm">
-                    <button @click="modal_managerSearch = true">검색</button>
+                    <button @click="modal_managerSearch = true" class="s-btn">검색</button>
                     <div class="modal-wrap" v-if="modal_managerSearch == true">
                       <div class="modal-bg"></div>
                       <div class="modal">

 }
 
 label {
-  width: max-content;
   text-align: left;
 }
 

 }
 
 .search input[type="text"] {
-  width: 9rem;
+  
 }
 
 .btn_set {

56fd4cf

ca410d1

client/views/pages/RealtimeStatus/CrosswalkListSearch.vue

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

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


     </div>
     <div class="board-wrap">
       <div class="search-wrap border">
-        <div class="flex m-b mb-block">
+        <div class="flex mb-block box">
           <div class="gap gap-sub">
-            <label class="taa ta5">지역 </label>
             <dongSelectList
               @setDongCd="setDongCd"
               :nodeHiddenCk="true"

             ></dongSelectList>
           </div>
         </div>
-        <div class="flex gap m-r date">
-          <label class="taa ta5">조회기간 </label>
+        <div class="flex gap  date box m-b">
+          <label class=" ">조회기간 </label>
           <input
-            class="in1"
+            class=""
             type="date"
             value-format="yyyyMMdd"
             v-model="crosswalkListSearch.startDate"
           />
           <span> ~ </span>
           <input
-            class="in1"
+            class=""
             type="date"
             value-format="yyyyMMdd"
             v-model="crosswalkListSearch.endDate"
           />
         </div>
-        <div class="flex">
-          <div class="flex m-b gap g3">
-            <label class="taa taa2">상태 </label>
+        <div class="flex box">
+          <div class="flex-start gap ">
+            <label class=" ">상태 </label>
             <select name="" id="op">
               <option value="">정상</option>
             </select>

           </div>
         </div>
 
-        <div class="flex-between line">
+        <div class="flex-between line box">
           <div class="flex mb-block">
-            <div class="flex m-b gap g2">
-              <label class="taa">우회차선 </label>
+            <div class="flex-start  gap ">
+              <label class="">우회차선 </label>
               <select v-model="crosswalkListSearch.searchRightTurnType">
                 <option value="null" disabled>전체</option>
                 <option value="직각">직각</option>

               </select>
             </div>
 
-            <div class="flex m-b gap g2">
-              <label class="taa">왕복차선 </label>
+            <div class="flex-start gap ">
+              <label class="">왕복차선 </label>
               <select v-model="crosswalkListSearch.searchRoundTripLane">
                 <option value="null" disabled>전체</option>
               </select>

           </div>
 
           <div class="flex">
-            <div class="m-r flex gap g2 g1">
-              <label class="m-r taa">장비 </label>
+            <div class=" flex gap ">
+              <label class="m-r ">장비 </label>
               <label>무단횡단</label>
               <input
                 class="m-r"

         </div>
       </div>
     </div>
-  </div>
-  <div class="bottom-wrap">
-    <PaginationButton
-      v-model:currentPage="crosswalkListSearch.currentPage"
-      :per-page="crosswalkListSearch.perPage"
-      :total-count="crosswalkListCount"
-      :max-range="5"
-      :click="crosswalkSelectList"
-    />
-    <div class="btn-wrap btnb">
-      <router-link to="/UserManagement.page">
-        <span class="btn-2 green-btn excel">Excel로 저장</span>
-      </router-link>
+    <div class="bottom-wrap">
+      <PaginationButton
+        v-model:currentPage="crosswalkListSearch.currentPage"
+        :per-page="crosswalkListSearch.perPage"
+        :total-count="crosswalkListCount"
+        :max-range="5"
+        :click="crosswalkSelectList"
+      />
+     
     </div>
+    <div class="flex-end">
+        <router-link to="/UserManagement.page">
+          <span class="btn-2 green-btn excel">Excel로 저장</span>
+        </router-link>
+      </div>
   </div>
 </template>
 

   font-size: 2.5rem;
 }
 .gap-sub {
-  height: 13em;
-  width: 77.5em;
-  /* height: 16em; */
   display: flex;
-  box-shadow: 0px 0px 1px gray;
-  flex-wrap: wrap;
-  /* align-content: flex-start; */
-  /* border: 1px solid red; */
-}
-.gap-sub {
-  height: 9em;
 }
 .g1 {
   width: 38.9em !important;

 }
 .board-wrap {
   width: 100%;
-  height: 24em;
 }
 .mobile {
   display: none;

   width: max-content;
 }
 select {
-  width: 19rem;
+  width: 28rem;
   line-height: 1.5 !important;
   height: 1.5em !important;
   /* background: #ffffffc2; */
   text-align: center;
-  margin: 0 auto;
 }
 .btnb {
   width: 1500px;

 
 .search-wrap {
   margin-bottom: 30px;
-  background: #f7f6f6;
-  display: flex;
-  /* padding: 1rem; */
-  height: 16em;
-  width: 100%;
-
-  flex-wrap: wrap;
-  align-content: flex-start;
-  margin: 30px 0;
-  /* background: #f7f6f6; */
-  /* padding: 1rem; */
+    background: #f7f6f6;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    /* padding: 1rem; */
+    /* height: 16em; */
+    width: 100%;
+    /* flex-wrap: wrap; */
+    /* align-content: flex-start; */
+    padding: 10px;
+    margin-bottom: 3rem;
 }
 .search-wrap input,
 .search-wrap select {

56fd4cf

ca410d1

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 style="margin-left: 2rem; font-size: 13px;" 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">
-          <div class="flex gap m-r date" style="margin-right: 5rem">
-            <label>조회기간: </label>
-            <input type="date" value-format="yyyyMMdd" />
-            <span> ~ </span>
-            <input type="date" value-format="yyyyMMdd" />
+        <div class="flex-border flex-between gap mb-block" >
+          <div class=" flex gap date" >
+            <label>조회기간 </label>
+            <div class=" bg-white flex box ">
+              <input type="date" value-format="yyyyMMdd" />
+              <span> ~ </span>
+              <input type="date" value-format="yyyyMMdd" />
+            </div>
           </div>
-          <div class="flex gap local">
-            <label>지역: </label>
-            <dongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true"></dongSelectList>
+          <div class=" flex gap local">
+            <div class="flex box"><dongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true"></dongSelectList></div>
           </div>
         </div>
-        <div class="flex-between gap m-b mb-block">
-          <div class="gap flex mb-block">
-            <div class="m-b">
-              <label>장애타입: </label>
-              <select name="" id="">
-                <option value="">전체</option>
-              </select>
-            </div>
-            <div class="m-b">
-              <label>장비타입: </label>
-              <select name="" id="">
-                <option value="">전체</option>
-              </select>
-            </div>
-            <div class="m-b flex-between gap">
-              <div>
-                <label>복구여부: </label>
+        <div class=" gap mb-block">
+          <div class="flex-border gap flex mb-block" >
+            <div class="flex">
+              <label>장애타입 </label>
+             <div class="bg-white flex box">
                 <select name="" id="">
-                  <option value="">정상</option>
+                  <option value="">전체</option>
+                </select>
+             </div>
+            </div>
+            <div class="flex">
+              <label>장비타입 </label>
+              <div class="bg-white flex box">
+                <select name="" id="">
+                  <option value="">전체</option>
                 </select>
               </div>
-              <button type="button" class="btn-2 green-btn">조회</button>
+            </div>
+            <div class=" flex-between gap">
+              <div class="flex">
+                <label>복구여부 </label>
+                <div class="bg-white flex box">
+                  <select name="" id="">
+                    <option value="">정상</option>
+                  </select>
+                  <button type="button" class="green-btn s-btn">조회</button>
+                </div>
+              </div>
             </div>
           </div>
         </div>

  
 }
 .mobile{display: none;}
-label {
-  width: max-content;
-}
-select {
-  width: 15rem;
-}
 .modal {
   width: max-content;
 }

   margin: 100px auto;
 }
 .wrap h2{font-size: 2.5rem;}
-.search-wrap {
-  margin-bottom: 30px;
-  background: #f7f6f6;
-  padding: 1rem;
-}
-
-.search-wrap input,
-.search-wrap select {
-  height: 22.5px;
-  border-radius: 3px;
-  border: 1px solid #949292;
-}
 
 .float-right {
   float: right;

   display: block;
   clear: both;
 }
-
+.search-wrap label{width: 30rem !important;}
 .search-wrap .float-right form > *:not(:last-child) {
   margin-right: 1rem;
 }

   position: relative;
   padding: 1rem 0;
 }
-
+.search-wrap label{width: -webkit-fill-available;}
+.search-wrap select{width: 100%;}
 .btn-2 {
   display: inline-block;
   padding: 0.3rem 2rem;

56fd4cf

ca410d1

client/views/pages/RealtimeStatus/RealtimeStatus.vue

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

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


           <h2>조건설정</h2>
           <div class="box">
             <div class="flex-between m-b">
-              <input type="checkbox" v-model="condition['wtrms']" /><label
+              <input class="m-r" type="checkbox" v-model="condition['wtrms']" /><label
                 for=""
                 >무단횡단</label
               >
-              <input type="checkbox" v-model="condition['signExtn']" /><label
+              <input class="m-r" type="checkbox" v-model="condition['signExtn']" /><label
                 for=""
                 >신호연장</label
               >
-              <input type="checkbox" v-model="condition['rittrnVhcle']" /><label
+              <input class="m-r" type="checkbox" v-model="condition['rittrnVhcle']" /><label
                 for=""
                 >신호위반</label
               >
-              <input type="checkbox" v-model="condition['eqpmnTrobl']" /><label
+              <input class="m-r" type="checkbox" v-model="condition['eqpmnTrobl']" /><label
                 for=""
                 >장애발생</label
               >

               />
               <!-- <input id="date-input" type="date" v-model="condition['end_date']" :picker-options="endDateOptions" /> -->
             </div>
-            <div class="flex-between m-b3">
+            <div class="flex-between m-b3 gap">
               <label for="time-input">시간대</label>
               <input
               class="time-input"

             <div class="btn_set flex-center gap">
               <button
               
-                class="m-r flex gray-btn"
+                class="m-r flex-between gray-btn"
                 v-for="tab in tabs"
                 :key="tab.id"
                 :class="{ active: activeTab === tab.id }"

         <OpenLayers ref="open_layers" />
       </div>
     </div>
-    <div class="chart grid">
-      <div>
+    <div class="chart grid gap">
+      <div class="m-b bg-white2 b-r b-shadow">
         <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
         <div class="box"><Chart1></Chart1></div>
       </div>
-      <div>
+      <div class="m-b bg-white2 b-r b-shadow">
         <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
         <div class="box"><Chart1></Chart1></div>
       </div>
-      <div>
+      <div class="m-b bg-white2 b-r b-shadow">
         <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
         <div class="box"><Chart1></Chart1></div>
       </div>
-      <div>
+      <div class="m-b bg-white2 b-r b-shadow">
         <h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
         <div class="box"><Chart1></Chart1></div>
       </div>

   height: 85%;
 }
 .chart {
-  width: 30%;
-  height: 100%;
+  width: 20%;
+    height: 83%;
+    position: absolute;
+    right: 2rem;
 }
+.chart h2{border-radius: 10px 10px 0 0;}
 .search .box ul li {
   text-align: left;
 }

56fd4cf

ca410d1

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>
+    <h2 style="color: #10833b" class="flex gap">
+      <img src="../../../resources/images/bar.png" alt="" />상황발생 정보 조회
+    </h2>
+    <div style="margin-left: 2rem; font-size: 13px" class="m-b3">
+      현황관제&nbsp;&#62;&nbsp;<em class="green2 lined">상황발생 정보 조회</em>
+    </div>
     <div class="board-wrap">
       <div class="search-wrap">
-        <div class="table mb-block">
-          <div class="flex gap m-b date">
+        <div class="mb-block grid">
+          <div class="flex-border gap date">
             <label>날짜를 선택해주세요.</label>
-            <input type="date" name="" id="" />
-            <span>~</span>
-            <input type="date" name="" id="" />
-          </div>
-          <div class="flex gap m-b">
-            <label>시/도</label>
-            <select name="" id="">
-              <option value="">대구광역시</option>
-            </select>
-            <label>시/군/구</label>
-            <select name="" id="">
-              <option value="">서구</option>
-            </select>
-            <label>행정동</label>
-            <select name="" id="">
-              <option value="">전체</option>
-            </select>
+            <div class="bg-white flex gap box">
+              <input type="date" name="" id="" />
+              <span>~</span>
+              <input type="date" name="" id="" />
             </div>
-            <div class="flex gap m-b situ">
-              <label>상황명</label>
+          </div>
+          <div class="flex-border gap border-none">
+            <label>시/도</label>
+            <div class="bg-white box">
+              <select name="" id="">
+                <option value="">대구광역시</option>
+              </select>
+            </div>
+            <label>시/군/구</label>
+            <div class="bg-white box">
+              <select name="" id="">
+                <option value="">서구</option>
+              </select>
+            </div>
+            <label>행정동</label>
+            <div class="bg-white box">
+              <select name="" id="">
+                <option value="">전체</option>
+              </select>
+            </div>
+          </div>
+          <div class="flex-border gap situ">
+            <label>상황명</label>
+            <div class="bg-white box flex-between">
               <select name="" id="">
                 <option value="">전체</option>
                 <option value="">무단횡단</option>

                 <option value="">신호위반</option>
               </select>
               <input type="text" />
-              <button type="button" class="btn-2 green-btn">조회</button>
+              <button type="button" class="btn-2 green-btn s-btn">조회</button>
             </div>
+          </div>
         </div>
       </div>
       <div>

             <tr>
               <th>상황명</th>
               <td></td>
-            </tr>            
+            </tr>
           </tbody>
         </table>
         <div class="modal-wrap" v-if="modal_1 == true">
           <div class="modal-bg"></div>
           <div class="modal">
-            <h2 class="flex">상황발생 상세정보 <button type="button" class="gray-btn" @click="modal_1 = false">
-                <img src="../../../resources/images/close.png" alt="">
-              </button></h2>
+            <h2 class="flex">
+              상황발생 상세정보
+              <button type="button" class="gray-btn" @click="modal_1 = false">
+                <img src="../../../resources/images/close.png" alt="" />
+              </button>
+            </h2>
             <div class="modalmain">
               <h3>영재어린이집(서측)</h3>
               <h4>동쪽횡단보도</h4>
               <table>
-            <colgroup>
-              <col style="width: 50%;">
-              <col style="width: 50%;">
-            </colgroup>
-            <tbody>
-              <tr @click="modal_1 = true">
-                <td>발생일시</td>
-                <td>2023-05-03 14:48</td>
-              </tr>
-              <tr @click="modal_1 = true">
-                <td>상황명</td>
-                <td>무단횡단</td>
-              </tr>
-              <tr @click="modal_1 = true">
-                <td>신호상태</td>
-                <td>적색불</td>
-              </tr>
-            </tbody>
-          </table>
+                <colgroup>
+                  <col style="width: 50%" />
+                  <col style="width: 50%" />
+                </colgroup>
+                <tbody>
+                  <tr @click="modal_1 = true">
+                    <td>발생일시</td>
+                    <td>2023-05-03 14:48</td>
+                  </tr>
+                  <tr @click="modal_1 = true">
+                    <td>상황명</td>
+                    <td>무단횡단</td>
+                  </tr>
+                  <tr @click="modal_1 = true">
+                    <td>신호상태</td>
+                    <td>적색불</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>

       modal_1: false,
     };
   },
-  methods: {
-    
-  },
+  methods: {},
   watch: {},
   computed: {
     Modal: Modal,

 
 <style scoped>
 @media all and (max-width: 479px) {
-  .situ input{width: 13rem;}
-  .date input{width: 10rem;}
- 
+  .situ input {
+    width: 13rem;
+  }
+  .date input {
+    width: 10rem;
+  }
 }
-.mobile{display: none;}
-.modal{width: max-content;}
-.modalmain{ padding: 1rem;}
-.modalmain table tbody tr:nth-child(odd){background: #f7f6f6;}
-.modalmain table tbody tr:nth-child(even){background: #ffffff;}
-.modalmain table td{border: 1px solid #eee;}
-.modal h2{background: #e5e5dd; font-size: 2rem; padding: 1rem ;}
-.modal h3{font-size: 1.8rem; border-bottom: 1px solid #eee; padding: 1rem  0  0.2rem 0;}
-.modal h4{font-size: 1.6rem; font-weight: 100; padding: 0.2rem 0 1rem 0 ;}
-.modal button{border: 0; background: none;     height: 30px;
-    padding: 0 0 0 50rem; cursor: pointer;}
-.modal button img{width: 25px;}
+.mobile {
+  display: none;
+}
+.modal {
+  width: max-content;
+}
+.modalmain {
+  padding: 1rem;
+}
+.modalmain table tbody tr:nth-child(odd) {
+  background: #f7f6f6;
+}
+.modalmain table tbody tr:nth-child(even) {
+  background: #ffffff;
+}
+.modalmain table td {
+  border: 1px solid #eee;
+}
+.modal h2 {
+  background: #e5e5dd;
+  font-size: 2rem;
+  padding: 1rem;
+}
+.modal h3 {
+  font-size: 1.8rem;
+  border-bottom: 1px solid #eee;
+  padding: 1rem 0 0.2rem 0;
+}
+.modal h4 {
+  font-size: 1.6rem;
+  font-weight: 100;
+  padding: 0.2rem 0 1rem 0;
+}
+.modal button {
+  border: 0;
+  background: none;
+  height: 30px;
+  padding: 0 0 0 50rem;
+  cursor: pointer;
+}
+.modal button img {
+  width: 25px;
+}
 .txt-point {
   color: #333;
 }

   width: 80%;
   margin: 100px auto;
 }
-.wrap h2{font-size: 2.5rem;}
-.search-wrap {
-  margin-bottom: 30px;
-}
-
-.search-wrap input,
-.search-wrap select {
-  height: 22.5px;
-  border-radius: 3px;
-  border: 1px solid #949292;
+.wrap h2 {
+  font-size: 2.5rem;
 }
 
 .float-right {

 
 .btn-2 {
   display: inline-block;
-  padding: 0.3rem 2rem;
+  padding: 0.5rem 2rem;
   font-size: 13.333px;
+  height: 3rem;
 }
 
 .pg-wrap {

56fd4cf

ca410d1

client/views/pages/SystemManagement/ManagerAddForm.vue

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

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


 <template>
   <div class="wrap">
     <div>
-      <div>
-        <h2 class="page-title">횡단보도 유지보수 담당자 등록</h2>
-      </div>
-      <hr class="margin">
+      <h2 style="color: #10833b" class="flex gap m-b3"><img src="../../../resources/images/bar.png" alt="">횡단보도 유지보수 담당자 등록</h2>
       <div class="form-wrap">
         <div class="flex m-b">
           <span>이름 : </span>

           <span>이메일 : </span>
           <input type="text" style="width: 10rem" v-model="email_id">
           <div>&nbsp; @ &nbsp;</div>
-          <input type="text" style="width: 10rem" v-model="email_domain" :disabled="email_disabled === true">
+          <input class="m-r" type="text" style="width: 10rem" v-model="email_domain" :disabled="email_disabled === true">
           <select @change="emailValue($event.target.value)">
             <option selected disabled>선택하세요</option>
             <option value="naver.com">naver.com</option>

   width: 155rem;
   margin: 100px auto;
 }
-
+.wrap h2{font-size: 2.5rem;}
 .tab-wrap {
   margin-bottom: 30px;
 }

56fd4cf

ca410d1

client/views/pages/SystemManagement/UserAddForm.vue

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

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


       </ul>
     </div>
     <div>
-      <div>
-        <h2 class="page-title">사용자 등록</h2>
-      </div>
-      <hr class="margin">
+      <h2 style="color: #10833b" class="flex gap m-b3"><img src="../../../resources/images/bar.png" alt="">상황발생 정보 조회</h2>
       <div class="form-wrap">
         <div class="flex m-b">
           <span>아이디 : </span>

   width: 155rem;
   margin: 100px auto;
 }
-
+.wrap h2{font-size: 2.5rem;}
 .tab-wrap {
   margin-bottom: 30px;
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -469,7 +469,7 @@
469	469	.nav {
470	470	position: absolute;
471	471	left: 0;
472		- top: 65px;
	472	+ top: 47px;
473	473	z-index: 500;
474	474	width: -webkit-fill-available;
475	475	box-sizing: border-box;
...	...	@@ -481,7 +481,7 @@
481	481	.menu {
482	482	position: absolute;
483	483	left: 0;
484		- top: -1.6rem;
	484	+ /* top: -1.6rem; */
485	485	z-index: 500;
486	486	width: fit-content;
487	487	/* border: 1px solid red; */
...	...	@@ -490,6 +490,7 @@
490	490	background-color: rgba(255, 255, 255, 0.66);
491	491	padding: 2em 50em 2em 100em;
492	492	transform: translateX(-100em);
	493	+ border-bottom: 1px solid #b0afaf;
493	494	}
494	495	.menu li:hover {
495	496	background: #13833b;
...	...	@@ -524,9 +525,10 @@
524	525	font-size: 16px;
525	526	display: flex;
526	527	gap: 10rem;
527		- align-items: baseline;
	528	+ align-items: center;
528	529	align-content: center;
529	530	justify-content: center;
	531	+
530	532	}
531	533
532	534	.header_menu span:hover {

...	...	@@ -1,8 +1,8 @@
1	1	/* 현황관제 */
2	2	.search{ height: inherit; width: -webkit-fill-available; }
3		-.search label{width: max-content; font-size: 16px;}
	3	+.search label{ font-size: 16px;}
4	4	.search p{font-size: 16px;}
5		-.search select{width: 20rem; height: 3rem;}
	5	+/* .search select{width: 20rem; height: 3rem;} */
6	6	.search .box{padding: 2rem 1rem;}
7	7	.search .box ul li{padding: 1rem; border-bottom: 1px solid #e5e3e3;}
8	8	.iconlist{width: 55px; background: #d6d6d6; padding: 2rem 0.7rem; text-align: center; height: inherit;}
...	...	@@ -35,11 +35,29 @@
35	35	}
36	36
37	37
38		- .date-input{height: 3rem;
39		- width: 77%;}
	38	+ .date-input,.time-input{height: 3rem; width: 80%;
	39	+ }
40	40	.time-input, .text-input{height: 3rem;}
41	41
42	42	.mobile{display: none;}
	43	+
	44	+.search-wrap {
	45	+ margin-bottom: 30px;
	46	+ background: #f7f6f6;
	47	+ /* padding: 1rem; */
	48	+ /* height: 16em; */
	49	+ width: 100%;
	50	+ /* flex-wrap: wrap; */
	51	+ /* align-content: flex-start; */
	52	+ margin-bottom: 3rem;
	53	+}
	54	+.search-wrap input{height: 3rem; width: 100%; border-radius: 5px;
	55	+ border: 1px solid #949292; margin: 1rem; padding: 0.5rem;}
	56	+ .search-wrap label{height: 100%; width: 20%; padding: 1rem; font-size: 14px; background: #f7f6f6; border-collapse: collapse;}
	57	+ .search-wrap select{margin: 1rem;}
	58	+ .search-wrap .situ button{margin: 1rem;}
	59	+ .search-wrap .box{width: 80%; padding-right: 5rem;}
	60	+
43	61	@media all and (max-width: 479px) {
44	62
45	63	.board-wrap{padding: 0 1rem;}

...	...	@@ -11,7 +11,7 @@
11	11	</div>
12	12	<div class="flex-between gap" id="gunGuHiddenCk">
13	13	<label for="">시/군/구</label>
14		- <select name="gunGuSelectList" id="gunGuSelectList" v-model="address['guGun_dong_cd']"
	14	+ <select class="bg-white" name="gunGuSelectList" id="gunGuSelectList" v-model="address['guGun_dong_cd']"
15	15	@change="siDoGunGuSelectF($event)">
16	16	<option :value=null disabled> 시/군/구 </option>
17	17	<option v-for="(item, key) in gunGuList" :key="key" :value="item['dong_cd']">
...	...	@@ -29,7 +29,7 @@
29	29	</option>
30	30	</select>
31	31	</div>
32		- <div class="flex-between " id="nodeHiddenCk">
	32	+ <div class="flex-between gap" id="nodeHiddenCk">
33	33	<label for="">교차로</label>
34	34	<select name="nodeSelectList" id="nodeSelectList" v-model="address['node_id']" @change="nodeSelectF($event)">
35	35	<option :value=null disabled> 교차로 </option>
...	...	@@ -288,5 +288,7 @@
288	288	</script>
289	289
290	290
291		-
	291	+ <style scoped>
	292	+ label{width: 30rem;}
	293	+ </style>
292	294	(No newline at end of file)

...	...	@@ -62,11 +62,12 @@
62	62	</select>
63	63	</div>
64	64
65		- <div class="m-b">
66		- <div class="flex gap m-b">
67		- <label for="" class="m-r">횡단보도 좌표</label><button @click="clickStateChange()">좌표선택</button>
	65	+ <div class="m-b ">
	66	+ <div class="flex-between gap m-b ">
	67	+ <label for="" class="m-r">횡단보도 좌표</label><button class="s-btn" @click="clickStateChange()">좌표선택</button>
68	68	</div>
69		- <div class="flex gap">
	69	+ <div class="br-ver m-b"></div>
	70	+ <div class="flex-between gap">
70	71	<div class="flex m-b gap">
71	72	<label class="m-r">위도 : </label>
72	73	<input class="text-input" style="width: 9rem" type="text" name="" id="" placeholder="00.0000"
...	...	@@ -84,12 +85,12 @@
84	85	<label for="">검지장비 선택</label>
85	86	</div>
86	87	<div class="flex-between m-b">
87		- <input type="checkbox" v-model="condition.wtrms_crosng_eqpmn_instl_yn" /><label for="">무단횡단</label>
88		- <input type="checkbox" v-model="condition.signl_extn_eqpmn_instl_yn" /><label for="">신호연장</label>
89		- <input type="checkbox" v-model="condition.rittrn_vhcle_eqpmn_instl_yn" /><label for="">우회전차량</label>
	88	+ <input class="m-r" type="checkbox" v-model="condition.wtrms_crosng_eqpmn_instl_yn" /><label for="">무단횡단</label>
	89	+ <input class="m-r" type="checkbox" v-model="condition.signl_extn_eqpmn_instl_yn" /><label for="">신호연장</label>
	90	+ <input class="m-r" type="checkbox" v-model="condition.rittrn_vhcle_eqpmn_instl_yn" /><label for="">우회전차량</label>
90	91	</div>
91	92	<div class="bottom">
92		- <div class="flex m-b gap">
	93	+ <div class="flex-between m-b gap">
93	94	<label class="gap">무단횡단 검지 범위 : </label>
94	95	<select name="wtrms_crosng_detct_rate" id="wtrms_crosng_detct_rate"
95	96	v-model="condition.wtrms_crosng_detct_rate">
...	...	@@ -105,7 +106,7 @@
105	106	<option :value="10">10%</option>
106	107	</select>
107	108	</div>
108		- <div class="flex m-b gap">
	109	+ <div class="flex-between m-b gap">
109	110	<label class="gap">왕복차선 정보 : </label>
110	111	<select name="" id="" v-model="condition.rndtp_tfclne_info">
111	112	<option :value="99" disabled> 왕복 차선 정보 </option>
...	...	@@ -130,23 +131,23 @@
130	131	<option :value="20">왕복 20차선</option>
131	132	</select>
132	133	</div>
133		- <div class="flex m-b gap">
	134	+ <div class="flex-between m-b gap">
134	135	<label class="gap">우회전 차선 유무 : </label>
135		- <select style="width: 35%;" name="" id="" v-model="condition.rittrn_tfclne_yn">
	136	+ <select style="" name="" id="" v-model="condition.rittrn_tfclne_yn">
136	137	<option :value="null" disabled>우회전 차선 유무 선택</option>
137	138	<option :value=true>있음</option>
138	139	<option :value=false>없음</option>
139	140	</select>
140	141	</div>
141		- <div class="flex m-b gap">
	142	+ <div class="flex-between m-b gap">
142	143	<label class="gap">우회전 차선 유형 : </label>
143		- <input style="width: 35%;" class="text-input" type="text" name="" id="" placeholder="우회전 차선 유형 입력" v-model="condition.rittrn_tfclne_ty" />
	144	+ <input style="" class="" type="text" name="" id="" placeholder="우회전 차선 유형 입력" v-model="condition.rittrn_tfclne_ty" />
144	145	</div>
145		- <div class="flex m-b gap">
	146	+ <div class="flex-between m-b gap">
146	147	<label class="gap">횡단보도 관리자 : </label>
147	148	<div class="flex gap">
148	149	<input class="text-input" type="text" name="" id="" placeholder="" v-model="managerInfo.mngr_nm">
149		- <button @click="modal_managerSearch = true">검색</button>
	150	+ <button @click="modal_managerSearch = true" class="s-btn">검색</button>
150	151	<div class="modal-wrap" v-if="modal_managerSearch == true">
151	152	<div class="modal-bg"></div>
152	153	<div class="modal">
...	...	@@ -915,7 +916,6 @@
915	916	}
916	917
917	918	label {
918		- width: max-content;
919	919	text-align: left;
920	920	}
921	921
...	...	@@ -924,7 +924,7 @@
924	924	}
925	925
926	926	.search input[type="text"] {
927		- width: 9rem;
	927	+
928	928	}
929	929
930	930	.btn_set {

...	...	@@ -8,9 +8,8 @@
8	8	</div>
9	9	<div class="board-wrap">
10	10	<div class="search-wrap border">
11		- <div class="flex m-b mb-block">
	11	+ <div class="flex mb-block box">
12	12	<div class="gap gap-sub">
13		- <label class="taa ta5">지역 </label>
14	13	<dongSelectList
15	14	@setDongCd="setDongCd"
16	15	:nodeHiddenCk="true"
...	...	@@ -18,25 +17,25 @@
18	17	></dongSelectList>
19	18	</div>
20	19	</div>
21		- <div class="flex gap m-r date">
22		- <label class="taa ta5">조회기간 </label>
	20	+ <div class="flex gap date box m-b">
	21	+ <label class=" ">조회기간 </label>
23	22	<input
24		- class="in1"
	23	+ class=""
25	24	type="date"
26	25	value-format="yyyyMMdd"
27	26	v-model="crosswalkListSearch.startDate"
28	27	/>
29	28	<span> ~ </span>
30	29	<input
31		- class="in1"
	30	+ class=""
32	31	type="date"
33	32	value-format="yyyyMMdd"
34	33	v-model="crosswalkListSearch.endDate"
35	34	/>
36	35	</div>
37		- <div class="flex">
38		- <div class="flex m-b gap g3">
39		- <label class="taa taa2">상태 </label>
	36	+ <div class="flex box">
	37	+ <div class="flex-start gap ">
	38	+ <label class=" ">상태 </label>
40	39	<select name="" id="op">
41	40	<option value="">정상</option>
42	41	</select>
...	...	@@ -50,10 +49,10 @@
50	49	</div>
51	50	</div>
52	51
53		- <div class="flex-between line">
	52	+ <div class="flex-between line box">
54	53	<div class="flex mb-block">
55		- <div class="flex m-b gap g2">
56		- <label class="taa">우회차선 </label>
	54	+ <div class="flex-start gap ">
	55	+ <label class="">우회차선 </label>
57	56	<select v-model="crosswalkListSearch.searchRightTurnType">
58	57	<option value="null" disabled>전체</option>
59	58	<option value="직각">직각</option>
...	...	@@ -61,8 +60,8 @@
61	60	</select>
62	61	</div>
63	62
64		- <div class="flex m-b gap g2">
65		- <label class="taa">왕복차선 </label>
	63	+ <div class="flex-start gap ">
	64	+ <label class="">왕복차선 </label>
66	65	<select v-model="crosswalkListSearch.searchRoundTripLane">
67	66	<option value="null" disabled>전체</option>
68	67	</select>
...	...	@@ -70,8 +69,8 @@
70	69	</div>
71	70
72	71	<div class="flex">
73		- <div class="m-r flex gap g2 g1">
74		- <label class="m-r taa">장비 </label>
	72	+ <div class=" flex gap ">
	73	+ <label class="m-r ">장비 </label>
75	74	<label>무단횡단</label>
76	75	<input
77	76	class="m-r"
...	...	@@ -335,20 +334,21 @@
335	334	</div>
336	335	</div>
337	336	</div>
338		- </div>
339		- <div class="bottom-wrap">
340		- <PaginationButton
341		- v-model:currentPage="crosswalkListSearch.currentPage"
342		- :per-page="crosswalkListSearch.perPage"
343		- :total-count="crosswalkListCount"
344		- :max-range="5"
345		- :click="crosswalkSelectList"
346		- />
347		- <div class="btn-wrap btnb">
348		- <router-link to="/UserManagement.page">
349		- <span class="btn-2 green-btn excel">Excel로 저장</span>
350		- </router-link>
	337	+ <div class="bottom-wrap">
	338	+ <PaginationButton
	339	+ v-model:currentPage="crosswalkListSearch.currentPage"
	340	+ :per-page="crosswalkListSearch.perPage"
	341	+ :total-count="crosswalkListCount"
	342	+ :max-range="5"
	343	+ :click="crosswalkSelectList"
	344	+ />
	345	+
351	346	</div>
	347	+ <div class="flex-end">
	348	+ <router-link to="/UserManagement.page">
	349	+ <span class="btn-2 green-btn excel">Excel로 저장</span>
	350	+ </router-link>
	351	+ </div>
352	352	</div>
353	353	</template>
354	354
...	...	@@ -505,17 +505,7 @@
505	505	font-size: 2.5rem;
506	506	}
507	507	.gap-sub {
508		- height: 13em;
509		- width: 77.5em;
510		- /* height: 16em; */
511	508	display: flex;
512		- box-shadow: 0px 0px 1px gray;
513		- flex-wrap: wrap;
514		- /* align-content: flex-start; */
515		- /* border: 1px solid red; */
516		-}
517		-.gap-sub {
518		- height: 9em;
519	509	}
520	510	.g1 {
521	511	width: 38.9em !important;
...	...	@@ -560,7 +550,6 @@
560	550	}
561	551	.board-wrap {
562	552	width: 100%;
563		- height: 24em;
564	553	}
565	554	.mobile {
566	555	display: none;
...	...	@@ -577,12 +566,11 @@
577	566	width: max-content;
578	567	}
579	568	select {
580		- width: 19rem;
	569	+ width: 28rem;
581	570	line-height: 1.5 !important;
582	571	height: 1.5em !important;
583	572	/* background: #ffffffc2; */
584	573	text-align: center;
585		- margin: 0 auto;
586	574	}
587	575	.btnb {
588	576	width: 1500px;
...	...	@@ -654,17 +642,16 @@
654	642
655	643	.search-wrap {
656	644	margin-bottom: 30px;
657		- background: #f7f6f6;
658		- display: flex;
659		- /* padding: 1rem; */
660		- height: 16em;
661		- width: 100%;
662		-
663		- flex-wrap: wrap;
664		- align-content: flex-start;
665		- margin: 30px 0;
666		- /* background: #f7f6f6; */
667		- /* padding: 1rem; */
	645	+ background: #f7f6f6;
	646	+ display: grid;
	647	+ grid-template-columns: 1fr 1fr;
	648	+ /* padding: 1rem; */
	649	+ /* height: 16em; */
	650	+ width: 100%;
	651	+ /* flex-wrap: wrap; */
	652	+ /* align-content: flex-start; */
	653	+ padding: 10px;
	654	+ margin-bottom: 3rem;
668	655	}
669	656	.search-wrap input,
670	657	.search-wrap select {

...	...	@@ -1,43 +1,50 @@
1	1	<template>
2	2	<div class="wrap">
3	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	+ <div style="margin-left: 2rem; font-size: 13px;" class="m-b3">현황관제 > <em class="green2 lined">장애발생 정보 조회</em> </div>
5	5	<div class="board-wrap">
6	6	<div class="search-wrap">
7		- <div class="flex m-b gap mb-block" style="margin-bottom: 2rem">
8		- <div class="flex gap m-r date" style="margin-right: 5rem">
9		- <label>조회기간: </label>
10		- <input type="date" value-format="yyyyMMdd" />
11		- <span> ~ </span>
12		- <input type="date" value-format="yyyyMMdd" />
	7	+ <div class="flex-border flex-between gap mb-block" >
	8	+ <div class=" flex gap date" >
	9	+ <label>조회기간 </label>
	10	+ <div class=" bg-white flex box ">
	11	+ <input type="date" value-format="yyyyMMdd" />
	12	+ <span> ~ </span>
	13	+ <input type="date" value-format="yyyyMMdd" />
	14	+ </div>
13	15	</div>
14		- <div class="flex gap local">
15		- <label>지역: </label>
16		- <dongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true"></dongSelectList>
	16	+ <div class=" flex gap local">
	17	+ <div class="flex box"><dongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true"></dongSelectList></div>
17	18	</div>
18	19	</div>
19		- <div class="flex-between gap m-b mb-block">
20		- <div class="gap flex mb-block">
21		- <div class="m-b">
22		- <label>장애타입: </label>
23		- <select name="" id="">
24		- <option value="">전체</option>
25		- </select>
26		- </div>
27		- <div class="m-b">
28		- <label>장비타입: </label>
29		- <select name="" id="">
30		- <option value="">전체</option>
31		- </select>
32		- </div>
33		- <div class="m-b flex-between gap">
34		- <div>
35		- <label>복구여부: </label>
	20	+ <div class=" gap mb-block">
	21	+ <div class="flex-border gap flex mb-block" >
	22	+ <div class="flex">
	23	+ <label>장애타입 </label>
	24	+ <div class="bg-white flex box">
36	25	<select name="" id="">
37		- <option value="">정상</option>
	26	+ <option value="">전체</option>
	27	+ </select>
	28	+ </div>
	29	+ </div>
	30	+ <div class="flex">
	31	+ <label>장비타입 </label>
	32	+ <div class="bg-white flex box">
	33	+ <select name="" id="">
	34	+ <option value="">전체</option>
38	35	</select>
39	36	</div>
40		- <button type="button" class="btn-2 green-btn">조회</button>
	37	+ </div>
	38	+ <div class=" flex-between gap">
	39	+ <div class="flex">
	40	+ <label>복구여부 </label>
	41	+ <div class="bg-white flex box">
	42	+ <select name="" id="">
	43	+ <option value="">정상</option>
	44	+ </select>
	45	+ <button type="button" class="green-btn s-btn">조회</button>
	46	+ </div>
	47	+ </div>
41	48	</div>
42	49	</div>
43	50	</div>
...	...	@@ -305,12 +312,6 @@
305	312
306	313	}
307	314	.mobile{display: none;}
308		-label {
309		- width: max-content;
310		-}
311		-select {
312		- width: 15rem;
313		-}
314	315	.modal {
315	316	width: max-content;
316	317	}
...	...	@@ -359,18 +360,6 @@
359	360	margin: 100px auto;
360	361	}
361	362	.wrap h2{font-size: 2.5rem;}
362		-.search-wrap {
363		- margin-bottom: 30px;
364		- background: #f7f6f6;
365		- padding: 1rem;
366		-}
367		-
368		-.search-wrap input,
369		-.search-wrap select {
370		- height: 22.5px;
371		- border-radius: 3px;
372		- border: 1px solid #949292;
373		-}
374	363
375	364	.float-right {
376	365	float: right;
...	...	@@ -381,7 +370,7 @@
381	370	display: block;
382	371	clear: both;
383	372	}
384		-
	373	+.search-wrap label{width: 30rem !important;}
385	374	.search-wrap .float-right form > *:not(:last-child) {
386	375	margin-right: 1rem;
387	376	}
...	...	@@ -421,7 +410,8 @@
421	410	position: relative;
422	411	padding: 1rem 0;
423	412	}
424		-
	413	+.search-wrap label{width: -webkit-fill-available;}
	414	+.search-wrap select{width: 100%;}
425	415	.btn-2 {
426	416	display: inline-block;
427	417	padding: 0.3rem 2rem;

...	...	@@ -26,19 +26,19 @@
26	26	<h2>조건설정</h2>
27	27	<div class="box">
28	28	<div class="flex-between m-b">
29		- <input type="checkbox" v-model="condition['wtrms']" /><label
	29	+ <input class="m-r" type="checkbox" v-model="condition['wtrms']" /><label
30	30	for=""
31	31	>무단횡단</label
32	32	>
33		- <input type="checkbox" v-model="condition['signExtn']" /><label
	33	+ <input class="m-r" type="checkbox" v-model="condition['signExtn']" /><label
34	34	for=""
35	35	>신호연장</label
36	36	>
37		- <input type="checkbox" v-model="condition['rittrnVhcle']" /><label
	37	+ <input class="m-r" type="checkbox" v-model="condition['rittrnVhcle']" /><label
38	38	for=""
39	39	>신호위반</label
40	40	>
41		- <input type="checkbox" v-model="condition['eqpmnTrobl']" /><label
	41	+ <input class="m-r" type="checkbox" v-model="condition['eqpmnTrobl']" /><label
42	42	for=""
43	43	>장애발생</label
44	44	>
...	...	@@ -54,7 +54,7 @@
54	54	/>
55	55	<!-- <input id="date-input" type="date" v-model="condition['end_date']" :picker-options="endDateOptions" /> -->
56	56	</div>
57		- <div class="flex-between m-b3">
	57	+ <div class="flex-between m-b3 gap">
58	58	<label for="time-input">시간대</label>
59	59	<input
60	60	class="time-input"
...	...	@@ -81,7 +81,7 @@
81	81	<div class="btn_set flex-center gap">
82	82	<button
83	83
84		- class="m-r flex gray-btn"
	84	+ class="m-r flex-between gray-btn"
85	85	v-for="tab in tabs"
86	86	:key="tab.id"
87	87	:class="{ active: activeTab === tab.id }"
...	...	@@ -194,20 +194,20 @@
194	194	<OpenLayers ref="open_layers" />
195	195	</div>
196	196	</div>
197		- <div class="chart grid">
198		- <div>
	197	+ <div class="chart grid gap">
	198	+ <div class="m-b bg-white2 b-r b-shadow">
199	199	<h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
200	200	<div class="box"><Chart1></Chart1></div>
201	201	</div>
202		- <div>
	202	+ <div class="m-b bg-white2 b-r b-shadow">
203	203	<h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
204	204	<div class="box"><Chart1></Chart1></div>
205	205	</div>
206		- <div>
	206	+ <div class="m-b bg-white2 b-r b-shadow">
207	207	<h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
208	208	<div class="box"><Chart1></Chart1></div>
209	209	</div>
210		- <div>
	210	+ <div class="m-b bg-white2 b-r b-shadow">
211	211	<h2>금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
212	212	<div class="box"><Chart1></Chart1></div>
213	213	</div>
...	...	@@ -539,9 +539,12 @@
539	539	height: 85%;
540	540	}
541	541	.chart {
542		- width: 30%;
543		- height: 100%;
	542	+ width: 20%;
	543	+ height: 83%;
	544	+ position: absolute;
	545	+ right: 2rem;
544	546	}
	547	+.chart h2{border-radius: 10px 10px 0 0;}
545	548	.search .box ul li {
546	549	text-align: left;
547	550	}

...	...	@@ -1,32 +1,45 @@
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	+ <h2 style="color: #10833b" class="flex gap">
	4	+ <img src="../../../resources/images/bar.png" alt="" />상황발생 정보 조회
	5	+ </h2>
	6	+ <div style="margin-left: 2rem; font-size: 13px" class="m-b3">
	7	+ 현황관제 > <em class="green2 lined">상황발생 정보 조회</em>
	8	+ </div>
5	9	<div class="board-wrap">
6	10	<div class="search-wrap">
7		- <div class="table mb-block">
8		- <div class="flex gap m-b date">
	11	+ <div class="mb-block grid">
	12	+ <div class="flex-border gap date">
9	13	<label>날짜를 선택해주세요.</label>
10		- <input type="date" name="" id="" />
11		- <span>~</span>
12		- <input type="date" name="" id="" />
13		- </div>
14		- <div class="flex gap m-b">
15		- <label>시/도</label>
16		- <select name="" id="">
17		- <option value="">대구광역시</option>
18		- </select>
19		- <label>시/군/구</label>
20		- <select name="" id="">
21		- <option value="">서구</option>
22		- </select>
23		- <label>행정동</label>
24		- <select name="" id="">
25		- <option value="">전체</option>
26		- </select>
	14	+ <div class="bg-white flex gap box">
	15	+ <input type="date" name="" id="" />
	16	+ <span>~</span>
	17	+ <input type="date" name="" id="" />
27	18	</div>
28		- <div class="flex gap m-b situ">
29		- <label>상황명</label>
	19	+ </div>
	20	+ <div class="flex-border gap border-none">
	21	+ <label>시/도</label>
	22	+ <div class="bg-white box">
	23	+ <select name="" id="">
	24	+ <option value="">대구광역시</option>
	25	+ </select>
	26	+ </div>
	27	+ <label>시/군/구</label>
	28	+ <div class="bg-white box">
	29	+ <select name="" id="">
	30	+ <option value="">서구</option>
	31	+ </select>
	32	+ </div>
	33	+ <label>행정동</label>
	34	+ <div class="bg-white box">
	35	+ <select name="" id="">
	36	+ <option value="">전체</option>
	37	+ </select>
	38	+ </div>
	39	+ </div>
	40	+ <div class="flex-border gap situ">
	41	+ <label>상황명</label>
	42	+ <div class="bg-white box flex-between">
30	43	<select name="" id="">
31	44	<option value="">전체</option>
32	45	<option value="">무단횡단</option>
...	...	@@ -34,8 +47,9 @@
34	47	<option value="">신호위반</option>
35	48	</select>
36	49	<input type="text" />
37		- <button type="button" class="btn-2 green-btn">조회</button>
	50	+ <button type="button" class="btn-2 green-btn s-btn">조회</button>
38	51	</div>
	52	+ </div>
39	53	</div>
40	54	</div>
41	55	<div>
...	...	@@ -97,38 +111,41 @@
97	111	<tr>
98	112	<th>상황명</th>
99	113	<td></td>
100		- </tr>
	114	+ </tr>
101	115	</tbody>
102	116	</table>
103	117	<div class="modal-wrap" v-if="modal_1 == true">
104	118	<div class="modal-bg"></div>
105	119	<div class="modal">
106		- <h2 class="flex">상황발생 상세정보 <button type="button" class="gray-btn" @click="modal_1 = false">
107		- <img src="../../../resources/images/close.png" alt="">
108		- </button></h2>
	120	+ <h2 class="flex">
	121	+ 상황발생 상세정보
	122	+ <button type="button" class="gray-btn" @click="modal_1 = false">
	123	+ <img src="../../../resources/images/close.png" alt="" />
	124	+ </button>
	125	+ </h2>
109	126	<div class="modalmain">
110	127	<h3>영재어린이집(서측)</h3>
111	128	<h4>동쪽횡단보도</h4>
112	129	<table>
113		- <colgroup>
114		- <col style="width: 50%;">
115		- <col style="width: 50%;">
116		- </colgroup>
117		- <tbody>
118		- <tr @click="modal_1 = true">
119		- <td>발생일시</td>
120		- <td>2023-05-03 14:48</td>
121		- </tr>
122		- <tr @click="modal_1 = true">
123		- <td>상황명</td>
124		- <td>무단횡단</td>
125		- </tr>
126		- <tr @click="modal_1 = true">
127		- <td>신호상태</td>
128		- <td>적색불</td>
129		- </tr>
130		- </tbody>
131		- </table>
	130	+ <colgroup>
	131	+ <col style="width: 50%" />
	132	+ <col style="width: 50%" />
	133	+ </colgroup>
	134	+ <tbody>
	135	+ <tr @click="modal_1 = true">
	136	+ <td>발생일시</td>
	137	+ <td>2023-05-03 14:48</td>
	138	+ </tr>
	139	+ <tr @click="modal_1 = true">
	140	+ <td>상황명</td>
	141	+ <td>무단횡단</td>
	142	+ </tr>
	143	+ <tr @click="modal_1 = true">
	144	+ <td>신호상태</td>
	145	+ <td>적색불</td>
	146	+ </tr>
	147	+ </tbody>
	148	+ </table>
132	149	</div>
133	150	</div>
134	151	</div>
...	...	@@ -162,9 +179,7 @@
162	179	modal_1: false,
163	180	};
164	181	},
165		- methods: {
166		-
167		- },
	182	+ methods: {},
168	183	watch: {},
169	184	computed: {
170	185	Modal: Modal,
...	...	@@ -177,22 +192,56 @@
177	192
178	193	<style scoped>
179	194	@media all and (max-width: 479px) {
180		- .situ input{width: 13rem;}
181		- .date input{width: 10rem;}
182		-
	195	+ .situ input {
	196	+ width: 13rem;
	197	+ }
	198	+ .date input {
	199	+ width: 10rem;
	200	+ }
183	201	}
184		-.mobile{display: none;}
185		-.modal{width: max-content;}
186		-.modalmain{ padding: 1rem;}
187		-.modalmain table tbody tr:nth-child(odd){background: #f7f6f6;}
188		-.modalmain table tbody tr:nth-child(even){background: #ffffff;}
189		-.modalmain table td{border: 1px solid #eee;}
190		-.modal h2{background: #e5e5dd; font-size: 2rem; padding: 1rem ;}
191		-.modal h3{font-size: 1.8rem; border-bottom: 1px solid #eee; padding: 1rem 0 0.2rem 0;}
192		-.modal h4{font-size: 1.6rem; font-weight: 100; padding: 0.2rem 0 1rem 0 ;}
193		-.modal button{border: 0; background: none; height: 30px;
194		- padding: 0 0 0 50rem; cursor: pointer;}
195		-.modal button img{width: 25px;}
	202	+.mobile {
	203	+ display: none;
	204	+}
	205	+.modal {
	206	+ width: max-content;
	207	+}
	208	+.modalmain {
	209	+ padding: 1rem;
	210	+}
	211	+.modalmain table tbody tr:nth-child(odd) {
	212	+ background: #f7f6f6;
	213	+}
	214	+.modalmain table tbody tr:nth-child(even) {
	215	+ background: #ffffff;
	216	+}
	217	+.modalmain table td {
	218	+ border: 1px solid #eee;
	219	+}
	220	+.modal h2 {
	221	+ background: #e5e5dd;
	222	+ font-size: 2rem;
	223	+ padding: 1rem;
	224	+}
	225	+.modal h3 {
	226	+ font-size: 1.8rem;
	227	+ border-bottom: 1px solid #eee;
	228	+ padding: 1rem 0 0.2rem 0;
	229	+}
	230	+.modal h4 {
	231	+ font-size: 1.6rem;
	232	+ font-weight: 100;
	233	+ padding: 0.2rem 0 1rem 0;
	234	+}
	235	+.modal button {
	236	+ border: 0;
	237	+ background: none;
	238	+ height: 30px;
	239	+ padding: 0 0 0 50rem;
	240	+ cursor: pointer;
	241	+}
	242	+.modal button img {
	243	+ width: 25px;
	244	+}
196	245	.txt-point {
197	246	color: #333;
198	247	}
...	...	@@ -200,16 +249,8 @@
200	249	width: 80%;
201	250	margin: 100px auto;
202	251	}
203		-.wrap h2{font-size: 2.5rem;}
204		-.search-wrap {
205		- margin-bottom: 30px;
206		-}
207		-
208		-.search-wrap input,
209		-.search-wrap select {
210		- height: 22.5px;
211		- border-radius: 3px;
212		- border: 1px solid #949292;
	252	+.wrap h2 {
	253	+ font-size: 2.5rem;
213	254	}
214	255
215	256	.float-right {
...	...	@@ -264,8 +305,9 @@
264	305
265	306	.btn-2 {
266	307	display: inline-block;
267		- padding: 0.3rem 2rem;
	308	+ padding: 0.5rem 2rem;
268	309	font-size: 13.333px;
	310	+ height: 3rem;
269	311	}
270	312
271	313	.pg-wrap {

...	...	@@ -1,10 +1,7 @@
1	1	<template>
2	2	<div class="wrap">
3	3	<div>
4		- <div>
5		- <h2 class="page-title">횡단보도 유지보수 담당자 등록</h2>
6		- </div>
7		- <hr class="margin">
	4	+ <h2 style="color: #10833b" class="flex gap m-b3"><img src="../../../resources/images/bar.png" alt="">횡단보도 유지보수 담당자 등록</h2>
8	5	<div class="form-wrap">
9	6	<div class="flex m-b">
10	7	<span>이름 : </span>
...	...	@@ -22,7 +19,7 @@
22	19	<span>이메일 : </span>
23	20	<input type="text" style="width: 10rem" v-model="email_id">
24	21	<div>  @  </div>
25		- <input type="text" style="width: 10rem" v-model="email_domain" :disabled="email_disabled === true">
	22	+ <input class="m-r" type="text" style="width: 10rem" v-model="email_domain" :disabled="email_disabled === true">
26	23	<select @change="emailValue($event.target.value)">
27	24	<option selected disabled>선택하세요</option>
28	25	<option value="naver.com">naver.com</option>
...	...	@@ -193,7 +190,7 @@
193	190	width: 155rem;
194	191	margin: 100px auto;
195	192	}
196		-
	193	+.wrap h2{font-size: 2.5rem;}
197	194	.tab-wrap {
198	195	margin-bottom: 30px;
199	196	}

...	...	@@ -11,10 +11,7 @@
11	11	</ul>
12	12	</div>
13	13	<div>
14		- <div>
15		- <h2 class="page-title">사용자 등록</h2>
16		- </div>
17		- <hr class="margin">
	14	+ <h2 style="color: #10833b" class="flex gap m-b3"><img src="../../../resources/images/bar.png" alt="">상황발생 정보 조회</h2>
18	15	<div class="form-wrap">
19	16	<div class="flex m-b">
20	17	<span>아이디 : </span>
...	...	@@ -314,7 +311,7 @@
314	311	width: 155rem;
315	312	margin: 100px auto;
316	313	}
317		-
	314	+.wrap h2{font-size: 2.5rem;}
318	315	.tab-wrap {
319	316	margin-bottom: 30px;
320	317	}

Delete comment