Commit @b136685ba8243dc4385af08a880ea2c26273a6da

최정임 2023-06-13

230613 최정임 css수정

@b136685ba8243dc4385af08a880ea2c26273a6da

0c4d099

b136685

client/resources/css/main.css

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

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


 /* 현황관제 */
-.search{ height: inherit; width: 330px; background: #eaebec;}
+.search{ height: inherit; width: 330px; }
 .search label{width: max-content; font-size: 14px;}
 .search p{font-size: 14px;}
 .search select{width: 20rem;}

 .iconlist li:nth-child(2) div{background-image: url(../images/icon/Signalextensiongray.png);}
 .iconlist li:nth-child(2).active div{background-image: url(../images/icon/Signalextensiongreen.png);}
 
-.top{position: absolute; z-index: 100; background: #fff; top: 0;}
+.top{position: absolute; z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
 .top p {
     font-size: 15px;
   }
   .top ul {
     padding: 1rem 0;
-    width: 153rem;
   }
   .top li {
     width: calc(100% / 6);

0c4d099

b136685

client/views/component/map/map.vue

--- client/views/component/map/map.vue

+++ client/views/component/map/map.vue


       this.map = new Map({
         target: this.$refs.map,
         view: new View({
-            center: fromLonLat([126.9784, 37.5665]), // Centered around Seoul, Korea
-          zoom: 8,
+            center: fromLonLat([128.55917070703123, 35.87169009414457]), // 대구광역시 서구청
+          zoom: 14,
         }),
         layers: [ new TileLayer({
       source: new OSM(),

0c4d099

b136685

client/views/index.html

--- client/views/index.html

+++ client/views/index.html


     <link rel="stylesheet" href="/client/resources/css/layout.css" />
     <link rel="stylesheet" href="/client/resources/css/responsive.css" />
     <link rel="stylesheet" href="/client/resources/css/main.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/dist/ol.css" />
+
     <title>Node Vue Web</title>
 </head>
 

0c4d099

b136685

client/views/layout/Header.vue

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

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


       </router-link>
     </div>
     <div class="header_menu">
-     <nav class="flex">
+      <nav class="flex">
         <router-link to="/Introduction.page">
           <span
             @mouseover="showDropdown = true"
             @mouseleave="showDropdown = false"
             >플랫폼 소개
           </span>
-          <div class=" nav" v-show="showDropdown" @mouseover="showDropdown = true" @mouseleave="showDropdown = false">
-           <div class="menu flex-end">
-              <ul >
+          <div
+            class="nav"
+            v-show="showDropdown"
+            @mouseover="showDropdown = true"
+            @mouseleave="showDropdown = false"
+          >
+            <div class="menu flex-end">
+              <ul>
                 <li
-                
                   v-for="option in dropdownOptions"
                   :key="option.value"
                   @click="navigateToPage(option)"
                 >
-                  <router-link :to="option.route">{{ option.label }}</router-link>
+                  <router-link :to="option.route">{{
+                    option.label
+                  }}</router-link>
                 </li>
               </ul>
               <ul>

                   :key="option.value"
                   @click="navigateToPage(option)"
                 >
-                  <router-link :to="option.route">{{ option.label }}</router-link>
+                  <router-link :to="option.route">{{
+                    option.label
+                  }}</router-link>
                 </li>
               </ul>
-              <ul
-            >
-              <li
-                v-for="option in dropdownOptions5"
-                :key="option.value"
-                @click="navigateToPage(option)"
-              >
-                <router-link :to="option.route">{{ option.label }}</router-link>
-              </li>
-            </ul>
-            <ul
-            >
-              <li
-                v-for="option in dropdownOptions3"
-                :key="option.value"
-                @click="navigateToPage(option)"
-              >
-                <router-link :to="option.route">{{ option.label }}</router-link>
-              </li>
-            </ul>
-            <ul
-            >
-              <li
-                v-for="option in dropdownOptions4"
-                :key="option.value"
-                @click="navigateToPage(option)"
-              >
-                <router-link :to="option.route">{{ option.label }}</router-link>
-              </li>
-            </ul>
-           </div>
-  
+              <ul>
+                <li
+                  v-for="option in dropdownOptions5"
+                  :key="option.value"
+                  @click="navigateToPage(option)"
+                >
+                  <router-link :to="option.route">{{
+                    option.label
+                  }}</router-link>
+                </li>
+              </ul>
+              <ul>
+                <li
+                  v-for="option in dropdownOptions3"
+                  :key="option.value"
+                  @click="navigateToPage(option)"
+                >
+                  <router-link :to="option.route">{{
+                    option.label
+                  }}</router-link>
+                </li>
+              </ul>
+              <ul>
+                <li
+                  v-for="option in dropdownOptions4"
+                  :key="option.value"
+                  @click="navigateToPage(option)"
+                >
+                  <router-link :to="option.route">{{
+                    option.label
+                  }}</router-link>
+                </li>
+              </ul>
+            </div>
           </div>
         </router-link>
         <router-link to="/RealtimeStatus.page">

             @mouseleave="showDropdown = false"
             >통계분석
           </span>
-          
         </router-link>
         <router-link to="/CrosswalkInsert.page">
           <span

             @mouseleave="showDropdown = false"
             >횡단보도 관리</span
           >
-         
         </router-link>
         <router-link to="/UserManagement.page">
           <span

             @mouseleave="showDropdown = false"
             >시스템 관리</span
           >
-         
         </router-link>
-     </nav>
+      </nav>
       <div class="sub_menu">
         <router-link to="/Mypage.page">
           <span>마이페이지</span>

 </script>
 
 <style scoped>
-nav a{width: 16rem;  }
-nav span{padding: 2.7rem 0;}
-.menu{ 
-    width: 85rem;
-    margin-left: 77.5rem;
+header{position: relative;}
+nav {
 }
-.nav{position: absolute; background: #ffffff; left: 0;
-    top: 7rem; z-index: 500;    width: 100%;
-    padding: 1rem;}
-ul {width: 16rem;
+nav a {
+  width: 16rem;
+}
+nav span {
+  padding: 2.7rem 0;
+}
+.menu {
+  position: absolute;
+  background: #ffffff;
+  left: 0;
+  top: 0rem;
+  z-index: 500;
+  width: 100%;
+  padding: 1rem 28rem 1rem 1rem;
+}
+.nav {
+  position: absolute;
+  background: #ffffff;
+  left: -148rem;
+  top: 7rem;
+  z-index: 500;
+  width: -webkit-fill-available;
+  padding: 1rem;
+}
+ul {
+  width: 16rem;
 }
 li a {
   color: #7e7e7f;
-
 }
 .logotxt {
   transition: 0.3s;

 }
 
 .header_menu {
+  
   transition: 0.3s;
   color: #ffffff;
   font-size: 16px;

0c4d099

b136685

client/views/pages/Analysis/Analysis.vue

--- client/views/pages/Analysis/Analysis.vue

+++ client/views/pages/Analysis/Analysis.vue


           </ul>
         </div>
         <div class="search">
-          <h2 style="background: #00b050; ">무단횡단 분석</h2>
+          <h2 style="background: #00b050">무단횡단 분석</h2>
           <h2>지역별</h2>
-          <div class="box ">
+          <div class="box" style="background: #eaebec">
             <div class="flex gap m-b">
               <label style="width: 7rem">분석날짜</label>
               <input type="date" name="" id="" />

               <label for="">횡단보도</label>
               <select name="" id=""></select>
             </div>
-            <div class="flex-center"><button type="button" class="btn-2 green-btn btn-l">조회</button></div>
+            <div class="flex-center">
+              <button type="button" class="btn-2 green-btn btn-l">조회</button>
+            </div>
           </div>
-          <h2>검색결과</h2>         
+          <h2>검색결과</h2>
           <div class="box bg-white tab-buttons">
-            <h4>총 <em style="color: #13833b;">200</em>건</h4>
-              <ul>                
-                <li class="result">
-                  <h5>1</h5>
-                  <p class="m-b">시도: 대구광역시 서구 평리동</p>
-                  <p class="m-b"><em style="color: #13833b;">장소: 남평리네거리</em></p>
-                  <p class="m-b">X좌표: 00.0000</p>
-                  <p class="m-b">Y좌표: 00.0000</p>
-                  <p class="">무단횡단 수: 120</p>
-                </li>
-              </ul>              
+            <h4>총 <em style="color: #13833b">200</em>건</h4>
+            <ul>
+              <li class="result">
+                <h5>1</h5>
+                <p class="m-b">시도: 대구광역시 서구 평리동</p>
+                <p class="m-b">
+                  <em style="color: #13833b">장소: 남평리네거리</em>
+                </p>
+                <p class="m-b">X좌표: 00.0000</p>
+                <p class="m-b">Y좌표: 00.0000</p>
+                <p class="">무단횡단 수: 120</p>
+              </li>
+            </ul>
           </div>
         </div>
       </div>

         <button>레이어</button>
         <button>히트맵</button>
       </div>
-      <div><MapPage /></div>
+      <div><MapPage></MapPage></div>
     </div>
     <div class="chart">
-      <h2>보행자 수 대비 무단횡단 수</h2>         
+      <h2>보행자 수 대비 무단횡단 수</h2>
+      <div class=""></div>
+      <h2>무단횡단 비율</h2>
+      <div class="">
+        <h2 style="background: #f7f6f6; color: #333;">시/군/구 별</h2>
+        <div class=""></div>
+        <h2 style="background: #f7f6f6; color: #333;">읍/면/동 별</h2>
+        <div class=""></div>
+      </div>
+      <h2>시/도 전체 시간/요일별 발생현황</h2>         
           <div class="">
           </div>
     </div>
   </div>
 </template>
 <style scoped>
-
-.chart{width: 600px;}
-.chart h2{padding: 0.5rem 0;}
-.search .box ul li {
-    padding: 1rem 1rem 1rem 3rem;
+.chart {
+  width: 600px;
 }
-.result{position: relative;}
-h5{position: absolute;
-left: 0; font-size: 2rem;}
+.chart div{min-height: 17.53rem;}
+.chart h2 {
+  padding: 0.5rem 0;
+}
+.search .box ul li {
+  padding: 1rem 1rem 1rem 3rem;
+}
+.result {
+  position: relative;
+}
+h5 {
+  position: absolute;
+  left: 0;
+  font-size: 2rem;
+}
 .box {
   text-align: left;
 }

   padding: 1rem;
 }
 .bg-white {
-  min-height: 47.3rem;
-  max-height: 47.3rem;
   overflow: scroll;
   overflow-x: hidden;
 }

 .right {
   width: -webkit-fill-available;
 }
+.top button.clicked{background: #50ba8a;}
 </style>
 <script>
-import MapPage from "../../component/MapPage.vue";
+import { Map } from "ol";
+import MapPage from "../../component/map/map.vue";
 
 export default {
   data() {

   },
   components: {
     MapPage: MapPage,
+    Map,
   },
   methods: {
     changeTab(tabId) {

0c4d099

b136685

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


 </script>
 
 <style scoped>
-.main-warp{position: relative; height: 865px;}
+.main-warp{position: relative; height: -webkit-fill-available;}
 [v-cloak] {
   display: none;
 }

0c4d099

b136685

client/views/pages/RealtimeStatus/RealtimeStatus.vue

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

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


           </li>
         </ul>
       </div>
-      <div><MapPage /></div>
+      <!-- <div><MapPage /></div> -->
+      <div><Map ></Map></div>
+
     </div>
   </div>
 </template>

 </style>
 <script>
 import MapPage from "../../component/MapPage.vue";
-
+import Map from "../../component/map/map.vue"
 export default {
   data() {
     return {

   },
   components: {
     MapPage: MapPage,
+    Map:Map,
   },
   methods: {
     changeTab(tabId) {

Add a comment

Open 0
Closed 0

List

...	...	@@ -117,7 +117,9 @@
117	117	</li>
118	118	</ul>
119	119	</div>
120		- <div><MapPage /></div>
	120	+ <!-- <div><MapPage /></div> -->
	121	+ <div><Map ></Map></div>
	122	+
121	123	</div>
122	124	</div>
123	125	</template>
...	...	@@ -165,7 +167,7 @@
165	167	</style>
166	168	<script>
167	169	import MapPage from "../../component/MapPage.vue";
168		-
	170	+import Map from "../../component/map/map.vue"
169	171	export default {
170	172	data() {
171	173	return {
...	...	@@ -184,6 +186,7 @@
184	186	},
185	187	components: {
186	188	MapPage: MapPage,
	189	+ Map:Map,
187	190	},
188	191	methods: {
189	192	changeTab(tabId) {

...	...	@@ -1,5 +1,5 @@
1	1	/* 현황관제 */
2		-.search{ height: inherit; width: 330px; background: #eaebec;}
	2	+.search{ height: inherit; width: 330px; }
3	3	.search label{width: max-content; font-size: 14px;}
4	4	.search p{font-size: 14px;}
5	5	.search select{width: 20rem;}
...	...	@@ -19,13 +19,12 @@
19	19	.iconlist li:nth-child(2) div{background-image: url(../images/icon/Signalextensiongray.png);}
20	20	.iconlist li:nth-child(2).active div{background-image: url(../images/icon/Signalextensiongreen.png);}
21	21
22		-.top{position: absolute; z-index: 100; background: #fff; top: 0;}
	22	+.top{position: absolute; z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
23	23	.top p {
24	24	font-size: 15px;
25	25	}
26	26	.top ul {
27	27	padding: 1rem 0;
28		- width: 153rem;
29	28	}
30	29	.top li {
31	30	width: calc(100% / 6);

...	...	@@ -25,8 +25,8 @@
25	25	this.map = new Map({
26	26	target: this.$refs.map,
27	27	view: new View({
28		- center: fromLonLat([126.9784, 37.5665]), // Centered around Seoul, Korea
29		- zoom: 8,
	28	+ center: fromLonLat([128.55917070703123, 35.87169009414457]), // 대구광역시 서구청
	29	+ zoom: 14,
30	30	}),
31	31	layers: [ new TileLayer({
32	32	source: new OSM(),

...	...	@@ -12,6 +12,8 @@
12	12	<link rel="stylesheet" href="/client/resources/css/layout.css" />
13	13	<link rel="stylesheet" href="/client/resources/css/responsive.css" />
14	14	<link rel="stylesheet" href="/client/resources/css/main.css" />
	15	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/dist/ol.css" />
	16	+
15	17	<title>Node Vue Web</title>
16	18	</head>
17	19

...	...	@@ -16,9 +16,9 @@
16	16	</ul>
17	17	</div>
18	18	<div class="search">
19		- <h2 style="background: #00b050; ">무단횡단 분석</h2>
	19	+ <h2 style="background: #00b050">무단횡단 분석</h2>
20	20	<h2>지역별</h2>
21		- <div class="box ">
	21	+ <div class="box" style="background: #eaebec">
22	22	<div class="flex gap m-b">
23	23	<label style="width: 7rem">분석날짜</label>
24	24	<input type="date" name="" id="" />
...	...	@@ -45,21 +45,25 @@
45	45	<label for="">횡단보도</label>
46	46	<select name="" id=""></select>
47	47	</div>
48		- <div class="flex-center"><button type="button" class="btn-2 green-btn btn-l">조회</button></div>
	48	+ <div class="flex-center">
	49	+ <button type="button" class="btn-2 green-btn btn-l">조회</button>
	50	+ </div>
49	51	</div>
50		- <h2>검색결과</h2>
	52	+ <h2>검색결과</h2>
51	53	<div class="box bg-white tab-buttons">
52		- <h4>총 <em style="color: #13833b;">200</em>건</h4>
53		- <ul>
54		- <li class="result">
55		- <h5>1</h5>
56		- <p class="m-b">시도: 대구광역시 서구 평리동</p>
57		- <p class="m-b"><em style="color: #13833b;">장소: 남평리네거리</em></p>
58		- <p class="m-b">X좌표: 00.0000</p>
59		- <p class="m-b">Y좌표: 00.0000</p>
60		- <p class="">무단횡단 수: 120</p>
61		- </li>
62		- </ul>
	54	+ <h4>총 <em style="color: #13833b">200</em>건</h4>
	55	+ <ul>
	56	+ <li class="result">
	57	+ <h5>1</h5>
	58	+ <p class="m-b">시도: 대구광역시 서구 평리동</p>
	59	+ <p class="m-b">
	60	+ <em style="color: #13833b">장소: 남평리네거리</em>
	61	+ </p>
	62	+ <p class="m-b">X좌표: 00.0000</p>
	63	+ <p class="m-b">Y좌표: 00.0000</p>
	64	+ <p class="">무단횡단 수: 120</p>
	65	+ </li>
	66	+ </ul>
63	67	</div>
64	68	</div>
65	69	</div>
...	...	@@ -70,25 +74,43 @@
70	74	<button>레이어</button>
71	75	<button>히트맵</button>
72	76	</div>
73		- <div><MapPage /></div>
	77	+ <div><MapPage></MapPage></div>
74	78	</div>
75	79	<div class="chart">
76		- <h2>보행자 수 대비 무단횡단 수</h2>
	80	+ <h2>보행자 수 대비 무단횡단 수</h2>
	81	+ <div class=""></div>
	82	+ <h2>무단횡단 비율</h2>
	83	+ <div class="">
	84	+ <h2 style="background: #f7f6f6; color: #333;">시/군/구 별</h2>
	85	+ <div class=""></div>
	86	+ <h2 style="background: #f7f6f6; color: #333;">읍/면/동 별</h2>
	87	+ <div class=""></div>
	88	+ </div>
	89	+ <h2>시/도 전체 시간/요일별 발생현황</h2>
77	90	<div class="">
78	91	</div>
79	92	</div>
80	93	</div>
81	94	</template>
82	95	<style scoped>
83		-
84		-.chart{width: 600px;}
85		-.chart h2{padding: 0.5rem 0;}
86		-.search .box ul li {
87		- padding: 1rem 1rem 1rem 3rem;
	96	+.chart {
	97	+ width: 600px;
88	98	}
89		-.result{position: relative;}
90		-h5{position: absolute;
91		-left: 0; font-size: 2rem;}
	99	+.chart div{min-height: 17.53rem;}
	100	+.chart h2 {
	101	+ padding: 0.5rem 0;
	102	+}
	103	+.search .box ul li {
	104	+ padding: 1rem 1rem 1rem 3rem;
	105	+}
	106	+.result {
	107	+ position: relative;
	108	+}
	109	+h5 {
	110	+ position: absolute;
	111	+ left: 0;
	112	+ font-size: 2rem;
	113	+}
92	114	.box {
93	115	text-align: left;
94	116	}
...	...	@@ -107,8 +129,6 @@
107	129	padding: 1rem;
108	130	}
109	131	.bg-white {
110		- min-height: 47.3rem;
111		- max-height: 47.3rem;
112	132	overflow: scroll;
113	133	overflow-x: hidden;
114	134	}
...	...	@@ -137,9 +157,11 @@
137	157	.right {
138	158	width: -webkit-fill-available;
139	159	}
	160	+.top button.clicked{background: #50ba8a;}
140	161	</style>
141	162	<script>
142		-import MapPage from "../../component/MapPage.vue";
	163	+import { Map } from "ol";
	164	+import MapPage from "../../component/map/map.vue";
143	165
144	166	export default {
145	167	data() {
...	...	@@ -167,6 +189,7 @@
167	189	},
168	190	components: {
169	191	MapPage: MapPage,
	192	+ Map,
170	193	},
171	194	methods: {
172	195	changeTab(tabId) {

...	...	@@ -35,7 +35,7 @@
35	35	</script>
36	36
37	37	<style scoped>
38		-.main-warp{position: relative; height: 865px;}
	38	+.main-warp{position: relative; height: -webkit-fill-available;}
39	39	[v-cloak] {
40	40	display: none;
41	41	}

Delete comment