Commit @4093128a80cbb2f9bc652acab01f9169c0bc14bd

최정임 2023-06-30

230630 최정임 반응형 작업중

@4093128a80cbb2f9bc652acab01f9169c0bc14bd

25bc276

4093128

client/resources/css/layout.css

--- client/resources/css/layout.css

+++ client/resources/css/layout.css


 header{background: #13833b; padding: 0 2rem;}
 .logo {
   display: flex;
-  width: 30rem;
+  /* width: 30rem; */
   /* border: 1px solid red; */
   height: 7rem;
   justify-content: center;

   color: #3b3d3d;
   font-size: 28px;
   font-weight: bolder;
-  width: 41rem;
+  /* width: 41rem; */
   padding-left: 9rem;
 }
 
 .barinfo {
-  width: 100%;
+  /* width: 100%; */
   display: flex;
   gap: 15rem;
   align-items: baseline;

 .board_element {
   transition: 0.3s;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   margin-bottom: 15px;
   justify-content: space-between;

25bc276

4093128

client/resources/css/main.css

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

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


   }
   .top ul {
     padding: 1rem 0;
+    justify-content: space-evenly;
   }
   .top li {
-    width: calc(100% / 6);
     text-align: center;
   }
   .top h3 {

25bc276

4093128

client/resources/css/responsive.css

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

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


 @media all and (max-width: 479px) {
   #root {
-    width: fit-content;
   }
   .main-warp > div {
-    display: block;
+    display: block !important;
   }
 }

25bc276

4093128

client/resources/css/test.css

--- client/resources/css/test.css

+++ client/resources/css/test.css

...	...	@@ -1,3 +1,124 @@
1	1	.test {
2	2	font-size: 50px;
3		- } (No newline at end of file)
	3	+ }
	4	+
	5	+ @media (max-width: 375px) {
	6	+ .box_title {
	7	+ /* margin-top: 172px; */
	8	+ width: 1000px;
	9	+ /* border: 1px solid; */
	10	+ color: #9c9b9a;
	11	+ text-align: center;
	12	+ /* margin-right: 30px; */
	13	+ font-size: 15px;
	14	+ }
	15	+ .box {
	16	+ width: 150px;
	17	+ margin-top: 10px;
	18	+ /* margin-right: -32px; */
	19	+ text-align: end;
	20	+ float: left;
	21	+ margin: 0px;
	22	+ }
	23	+ .boxmenu img {
	24	+ width: 35px;
	25	+ display: none;
	26	+ }
	27	+ .boxmenu {
	28	+ width: 92vw;
	29	+ height: 206px;
	30	+ margin: 10px;
	31	+ border-radius: 20px;
	32	+ }
	33	+ .boxborder {
	34	+ display: none;
	35	+ }
	36	+ .box {
	37	+ width: 150px;
	38	+ margin-top: 10px;
	39	+ margin-right: 42px;
	40	+ text-align: end;
	41	+ float: left;
	42	+ }
	43	+ .box .flex {
	44	+ /* border: 1px solid red; */
	45	+ display: flex;
	46	+ align-items: center;
	47	+ width: 190px;
	48	+ margin: 0px -8px 5px;
	49	+ }
	50	+ .box_title {
	51	+ /* margin-top: 172px; */
	52	+ width: 1000px;
	53	+ /* border: 1px solid; */
	54	+ color: #9c9b9a;
	55	+ text-align: center;
	56	+ /* margin-right: 30px; */
	57	+ font-size: 15px;
	58	+ }
	59	+ .main_section h1 {
	60	+ font-size: 20px;
	61	+ color: #13833b;
	62	+ margin: 3rem 0;
	63	+ text-align: center;
	64	+ width: 100vw;
	65	+ }
	66	+ .verticalbar {
	67	+ width: 93vw;
	68	+ border-radius: 15px;
	69	+ background-color: #dddddd00;
	70	+ margin-bottom: 3rem;
	71	+ margin: 10px;
	72	+ padding: 1rem;
	73	+ }
	74	+ .barinfo {
	75	+ gap: 0;
	76	+ width: 90vw;
	77	+ }
	78	+ .barinfo img {
	79	+ width: 30px;
	80	+ margin-top: 15px;
	81	+ }
	82	+ .bar_title {
	83	+ color: #3b3d3d;
	84	+ font-size: 8px;
	85	+ gap: none;
	86	+ display: inline;
	87	+ display: none;
	88	+ }
	89	+ .main_section .elementtxt {
	90	+ display: flex;
	91	+ font-size: 8px;
	92	+ width: 90px;
	93	+ justify-content: center;
	94	+ align-items: center;
	95	+ }
	96	+ .bar_element {
	97	+ width: 100vw;
	98	+ border-radius: 20px;
	99	+ height: 90px;
	100	+ line-height: 30px;
	101	+ background: #dddddd;
	102	+ text-align: center;
	103	+ margin: 5px;
	104	+ }
	105	+ .boxmenu img {
	106	+ display: none;
	107	+ }
	108	+ .board_title {
	109	+ color: #ffff;
	110	+ font-size: 16px;
	111	+ }
	112	+ .board {
	113	+ background: #ffffff;
	114	+ border-radius: 15px;
	115	+ width: 93vw;
	116	+ box-shadow: 0px 5px 20px #00000038;
	117	+ padding: 2rem;
	118	+ margin: 30px 10px;
	119	+ }
	120	+ .box_num {
	121	+ color: #13833b;
	122	+ font-size: 17px;
	123	+ }
	124	+ } (No newline at end of file)

25bc276

4093128

client/resources/images/close.png (Binary)

--- client/resources/images/close.png

+++ client/resources/images/close.png

Binary file is not shown

25bc276

4093128

client/views/layout/Header.vue

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

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

...	...	@@ -1,6 +1,51 @@
1	1	<template>
2	2	<header class="flex-between">
3		- <div class="logo">
	3	+ <div class="flex-between2">
	4	+ <ul
	5	+ class="submenu contenedor-menu2"
	6	+ :class="{ 'show-menu ': showSubmenu }"
	7	+ >
	8	+ <li
	9	+ v-for="(item, index) in menuItems"
	10	+ :key="index"
	11	+ style="color: #3fb52d"
	12	+ >
	13	+ <span @click="toggleSubMenu(index)">
	14	+ {{ item.title }}
	15	+ <i
	16	+ :class="{
	17	+ 'fa fa-chevron-down': item.open,
	18	+ 'fa fa-chevron-up': !item.open,
	19	+ }"
	20	+ ></i>
	21	+ </span>
	22	+ <ul v-if="item.open">
	23	+ <li
	24	+ v-for="(subItem, subIndex) in item.subMenu"
	25	+ :key="subIndex"
	26	+ style="color: #333"
	27	+ >
	28	+ <router-link :to="subItem.route"> {{ subItem.title }}</router-link>
	29	+ </li>
	30	+
	31	+ </ul>
	32	+ </li>
	33	+ <li style="color: #3fb52d"><router-link to="/Mypage.page">
	34	+ 마이페이지
	35	+ </router-link></li>
	36	+ <li style="color: #3fb52d"><router-link to="/Login.page">
	37	+ 로그인
	38	+ </router-link></li>
	39	+ </ul>
	40	+ </div>
	41	+ <div class="logo flex">
	42	+ <input type="checkbox" id="menuicon" @click="toggleSubmenu()" />
	43	+ <label class="menu-icon" for="menuicon">
	44	+ <img :src="imageSrc" alt="Image" @click="toggle()"/>
	45	+ <!-- <span></span>
	46	+ <span></span>
	47	+ <span></span> -->
	48	+ </label>
4	49	<router-link to="/">
5	50	<span class="logotxt"> AI 안전통합 횡단보도 플랫폼 </span>
6	51	</router-link>
...	...	@@ -13,71 +58,62 @@
13	58	@mouseleave="showDropdown = false"
14	59	>플랫폼 소개
15	60	</span>
16		- <div
17		- class="nav"
18		- v-show="showDropdown"
19		- @mouseover="showDropdown = true"
20		- @mouseleave="showDropdown = false"
21		- >
22		- <div class="menu flex-end">
23		- <ul>
24		- <li
25		- v-for="option in dropdownOptions"
26		- :key="option.value"
27		- @click="navigateToPage(option)"
28		- >
29		- <router-link :to="option.route">{{
30		- option.label
31		- }}</router-link>
32		- </li>
33		- </ul>
34		- <ul>
35		- <li
36		- v-for="option in dropdownOptions2"
37		- :key="option.value"
38		- @click="navigateToPage(option)"
39		- >
40		- <router-link :to="option.route">{{
41		- option.label
42		- }}</router-link>
43		- </li>
44		- </ul>
45		- <ul>
46		- <li
47		- v-for="option in dropdownOptions5"
48		- :key="option.value"
49		- @click="navigateToPage(option)"
50		- >
51		- <router-link :to="option.route">{{
52		- option.label
53		- }}</router-link>
54		- </li>
55		- </ul>
56		- <ul>
57		- <li
58		- v-for="option in dropdownOptions3"
59		- :key="option.value"
60		- @click="navigateToPage(option)"
61		- >
62		- <router-link :to="option.route">{{
63		- option.label
64		- }}</router-link>
65		- </li>
66		- </ul>
67		- <ul>
68		- <li
69		- v-for="option in dropdownOptions4"
70		- :key="option.value"
71		- @click="navigateToPage(option)"
72		- >
73		- <router-link :to="option.route">{{
74		- option.label
75		- }}</router-link>
76		- </li>
77		- </ul>
78		- </div>
79		- </div>
80	61	</router-link>
	62	+ <div
	63	+ class="nav"
	64	+ v-show="showDropdown"
	65	+ @mouseover="showDropdown = true"
	66	+ @mouseleave="showDropdown = false"
	67	+ >
	68	+ <div class="menu flex-end">
	69	+ <ul>
	70	+ <li
	71	+ v-for="option in dropdownOptions"
	72	+ :key="option.value"
	73	+ @click="navigateToPage(option)"
	74	+ >
	75	+ <router-link :to="option.route">{{ option.label }}</router-link>
	76	+ </li>
	77	+ </ul>
	78	+ <ul>
	79	+ <li
	80	+ v-for="option in dropdownOptions2"
	81	+ :key="option.value"
	82	+ @click="navigateToPage(option)"
	83	+ >
	84	+ <router-link :to="option.route">{{ option.label }}</router-link>
	85	+ </li>
	86	+ </ul>
	87	+ <ul>
	88	+ <li
	89	+ v-for="option in dropdownOptions5"
	90	+ :key="option.value"
	91	+ @click="navigateToPage(option)"
	92	+ >
	93	+ <router-link :to="option.route">{{ option.label }}</router-link>
	94	+ </li>
	95	+ </ul>
	96	+ <ul>
	97	+ <li
	98	+ v-for="option in dropdownOptions3"
	99	+ :key="option.value"
	100	+ @click="navigateToPage(option)"
	101	+ >
	102	+ <router-link :to="option.route">{{ option.label }}</router-link>
	103	+ </li>
	104	+ </ul>
	105	+ <ul>
	106	+ <li
	107	+ v-for="option in dropdownOptions4"
	108	+ :key="option.value"
	109	+ @click="navigateToPage(option)"
	110	+ >
	111	+ <router-link :to="option.route">{{ option.label }}</router-link>
	112	+ </li>
	113	+ </ul>
	114	+ </div>
	115	+ </div>
	116	+
81	117	<router-link to="/RealtimeStatus.page">
82	118	<span
83	119	@mouseover="showDropdown = true"
...	...	@@ -179,34 +215,6 @@
179	215	</router-link>
180	216	</li>
181	217	</ul> -->
182		- <header class="flex-between2">
183		- <input type="checkbox" id="menuicon" @click="toggleSubmenu()" />
184		- <label class="menu-icon" for="menuicon">
185		- <span></span>
186		- <span></span>
187		- <span></span>
188		- </label>
189		- <div class="contenedor-menu2" :class="{ 'show-menu': showSubmenu }">
190		- <ul class="submenu">
191		- <li v-for="(item, index) in menuItems" :key="index">
192		- <span @click="toggleSubMenu(index)">
193		- {{ item.title }}
194		- <i
195		- :class="{
196		- 'fa fa-chevron-down': item.open,
197		- 'fa fa-chevron-up': !item.open,
198		- }"
199		- ></i>
200		- </span>
201		- <ul v-if="item.open">
202		- <li v-for="(subItem, subIndex) in item.subMenu" :key="subIndex">
203		- {{ subItem }}
204		- </li>
205		- </ul>
206		- </li>
207		- </ul>
208		- </div>
209		- </header>
210	218	</template>
211	219
212	220	<script>
...	...	@@ -215,6 +223,7 @@
215	223	export default {
216	224	data() {
217	225	return {
	226	+ imageSrc: 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5',
218	227	menuOpen: false,
219	228	showDropdown: false,
220	229	showSubmenu: false,
...	...	@@ -299,53 +308,54 @@
299	308	{
300	309	title: "플랫폼 소개",
301	310	open: false,
302		- subMenu: ["스마트 횡단보도란?"],
303		- value: "Introduction",
304		- route: "/Introduction.page",
	311	+ subMenu: [
	312	+ { title: "스마트 횡단보도란?", route: "/Introduction.page" },
	313	+ ]
305	314	},
306	315	{
307	316	title: "현황관제",
308	317	open: false,
309	318	subMenu: [
310		- "실시간 현황관제",
311		- "상황발생 정보조회",
312		- "장애 발생 정보조회",
313		- "횡단보도 목록조회",
	319	+ { title: "실시간 현황관제", route: "/RealtimeStatus.page" },
	320	+ { title: "상황발생 정보조회", route: "/SituationSearch.page" },
	321	+ { title: "장애 발생 정보조회", route: "/ErrorSearch.page" },
	322	+ { title: "횡단보도 목록조회", route: "/CrosswalkListSearch.page" },
314	323	],
315		- value: "RealtimeStatus",
316		- route: "/RealtimeStatus.page",
317	324	},
318	325	{
319	326	title: "통계분석",
320	327	open: false,
321		- subMenu: ["통계분석"],
	328	+ subMenu: [{ title: "통계분석", route: "/Analysis.page" },],
322	329	},
323	330	{
324	331	title: "횡단보도 관리",
325	332	open: false,
326		- subMenu: ["횡단보도 등록", "횡단보도 조회"],
	333	+ subMenu: [
	334	+ { title: "횡단보도 등록", route: "/CrosswalkInsert.page" },
	335	+ { title: "횡단보도 조회", route: "/CrosswalkSearch.page" },
	336	+ ],
327	337	},
328	338	{
329	339	title: "시스템 관리",
330	340	open: false,
331	341	subMenu: [
332		- "사용자 관리",
333		- "유지보수 담당자 관리",
334		- "표준노드 관리",
335		- "행정동 관리",
336		- "데이터 수집기록",
	342	+ { title: "사용자 관리", route: "/UserManagement.page" },
	343	+ { title: "유지보수 담당자 관리", route: "/ChargeManagement.page" },
	344	+ { title: "표준노드 관리", route: "/NodeManagement.page" },
	345	+ { title: "행정동 관리", route: "/DongManagement.page" },
	346	+ { title: "데이터 수집기록", route: "/DataRecord.page" },
337	347	],
338	348	},
339		- {
340		- title: "마이페이지",
341		- open: false,
342		- subMenu: [],
343		- },
344		- {
345		- title: "로그인",
346		- open: false,
347		- subMenu: [],
348		- },
	349	+ // {
	350	+ // title: "마이페이지",
	351	+ // open: false,
	352	+ // route: "/Mypage.page"
	353	+ // },
	354	+ // {
	355	+ // title: "로그인",
	356	+ // open: false,
	357	+ // subMenu: [{ title: "로그인", route: "/Login.page" },],
	358	+ // },
349	359	],
350	360	};
351	361	},
...	...	@@ -354,6 +364,14 @@
354	364	this.menuItems[index].open = !this.menuItems[index].open;
355	365	this.showSubmenu = true;
356	366	console.log("toggleSubMenu 호출됨");
	367	+ },
	368	+ toggle(){
	369	+
	370	+ if (this.imageSrc === 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5') {
	371	+ this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close.png?alt=media&token=3bb79767-6d6e-4742-aede-5a2e065daee2';
	372	+ } else {
	373	+ this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5';
	374	+ }
357	375	},
358	376	toggleSubmenu: function () {
359	377	this.showSubmenu = !this.showSubmenu;
...	...	@@ -393,6 +411,9 @@
393	411	</script>
394	412
395	413	<style scoped>
	414	+.menu-icon {
	415	+ display: none;
	416	+}
396	417	header {
397	418	position: relative;
398	419	}
...	...	@@ -472,22 +493,32 @@
472	493	.flex-between2 {
473	494	display: none;
474	495	}
	496	+
475	497	@media (max-width: 749px) {
	498	+ .logo {
	499	+ align-items: unset;
	500	+ padding-top: 2rem;
	501	+ gap: 1rem;
	502	+ }
	503	+ .menu-icon img {
	504	+ width: 3rem;
	505	+ }
476	506	.logotxt {
477	507	text-align: center;
478		- width: 100vw;
479		- position: absolute;
	508	+ /* width: 100vw;
	509	+ position: absolute; */
480	510	left: 0%;
481	511	top: 22%;
	512	+ font-size: 2rem;
482	513	}
483	514	input#menuicon {
484	515	display: none;
485	516	}
486	517	input#menuicon + label {
487	518	display: block;
488		- width: 30px;
	519	+ /* width: 30px; */
489	520	height: 40px;
490		- position: absolute;
	521	+ /* position: absolute; */
491	522	left: 2%;
492	523	top: 25px;
493	524	cursor: pointer;
...	...	@@ -525,7 +556,7 @@
525	556	}
526	557
527	558	.flex-between2 {
528		- width: 100vw;
	559	+ /* width: 100vw; */
529	560	position: absolute;
530	561	top: 0;
531	562	display: flex;
...	...	@@ -559,11 +590,11 @@
559	590	display: none;
560	591	position: absolute;
561	592	top: 100%;
562		- left: 0;
563		- width: 100%;
	593	+ left: -21px;
	594	+ /* padding-left: 3rem; */
564	595	background-color: #fff;
565	596	z-index: 999;
566		- min-width: 300px;
	597	+ min-width: 260px;
567	598	margin-top: 70px;
568	599	/* display: inline-block; */
569	600	/* /background: #fff; */
...	...	@@ -578,15 +609,23 @@
578	609
579	610	.show-menu {
580	611	display: block;
	612	+ padding: 1rem 0;
	613	+
581	614	}
582	615
583	616	.contenedor-menu2 li {
584		- width: 100vw;
585		- text-align: center;
586		- margin-top: 20px;
587		- margin-bottom: 20px;
	617	+ width: -webkit-fill-available;
	618	+ text-align: left;
	619	+ /* margin-top: 20px; */
	620	+ padding: 1rem 2rem;
	621	+ /* margin-bottom: 20px;
	622	+
588	623	/* border: 1px solid green; */
589	624	}
	625	+ .contenedor-menu2 li ul {
	626	+ margin-top: 1rem;
	627	+ }
	628	+ /* .contenedor-menu2 li ul li{padding: 2rem 1rem 1rem 1rem;} */
590	629	.contenedor-menu2 a {
591	630	width: 100vw;
592	631	text-align: center;
...	...	@@ -607,6 +646,7 @@
607	646
608	647	.contenedor-menu2 ul {
609	648	list-style: none;
	649	+ width: -webkit-fill-available;
610	650	}
611	651
612	652	.contenedor-menu2 .menu2 li a {

25bc276

4093128

client/views/pages/CrosswalkManagement/CrosswalkInsert.vue

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

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

...	...	@@ -1,6 +1,7 @@
1	1	<template>
2	2	<div class="flex">
3		- <div class="left">
	3	+ <button @click="toggleSlide" class="toggle">검색하기</button>
	4	+ <div :class="['slide-content left', { active: showSlide }]">
4	5	<div class="wrap flex-between">
5	6	<div class="search">
6	7	<h2>횡단보도 등록</h2>
...	...	@@ -179,6 +180,55 @@
179	180	</div>
180	181	</template>
181	182	<style scoped>
	183	+@media all and (max-width: 479px) {
	184	+ .top {
	185	+ overflow: scroll;
	186	+ }
	187	+ .top ul {
	188	+ width: 137rem;
	189	+ overflow: hidden;
	190	+ justify-content: space-between !important;
	191	+ padding: 2rem 1rem !important;
	192	+ }
	193	+ .top li {
	194	+ display: flex;
	195	+ }
	196	+ .search {
	197	+ width: inherit;
	198	+ }
	199	+ .toggle {
	200	+ color: #fff;
	201	+ font-weight: bold;
	202	+ background: #13833b;
	203	+ display: block !important;
	204	+ position: absolute;
	205	+ z-index: 150;
	206	+ top: 7.5rem;
	207	+ right: 1rem;
	208	+ }
	209	+ .wrap {
	210	+ height: auto !important;
	211	+ width: inherit;
	212	+ }
	213	+ .slide-content {
	214	+ position: absolute;
	215	+ z-index: 97;
	216	+ top: 6.5rem;
	217	+ left: -36rem;
	218	+ width: 34rem;
	219	+ height: 100vh;
	220	+ background-color: #f0f0f0;
	221	+ transition: transform 0.3s ease;
	222	+ transform: translateX(100%);
	223	+ }
	224	+
	225	+ .slide-content.active {
	226	+ transform: translateX(0);
	227	+ }
	228	+}
	229	+.toggle {
	230	+ display: none;
	231	+}
182	232	label {
183	233	width: max-content;
184	234	text-align: left;
...	...	@@ -376,6 +426,7 @@
376	426	export default {
377	427	data() {
378	428	return {
	429	+ showSlide: false,
379	430	modal_1: false,
380	431	modal_2: false,
381	432	tabs: [
...	...	@@ -404,6 +455,9 @@
404	455	OpenLayers: OpenLayers,
405	456	},
406	457	methods: {
	458	+ toggleSlide() {
	459	+ this.showSlide = !this.showSlide;
	460	+ },
407	461	changeTab(tabId) {
408	462	this.activeTab = tabId;
409	463	},

25bc276

4093128

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">
+    <button @click="toggleSlide" class="toggle">검색하기</button>
+    <div :class="['slide-content left', { active: showSlide }]">
       <div class="wrap flex-between">
-        <button @click="toggleSlide" class="toggle">Toggle Slide</button>
         <!-- <div class="iconlist">
           <ul>
             <li v-for="item in items" :key="item.id" :class="{ active: item.isActive }" @click="toggleActive(item)">

             </li>
           </ul>
         </div> -->
-        <div class="search slide-content" v-if="showSlide">
+        <div class="search">
           <h2>지역설정</h2>
           <div class="box">
             <DongSelectList @setDongCd="setDongCd"></DongSelectList>

 export default {
   data() {
     return {
-      showSlide: true,
+      showSlide: false,
       address: {},
       //조건설정
       condition: {

 
 <style scoped>
 @media all and (max-width: 479px) {
-  .toggle{
+  .chart{width: -webkit-fill-available !important;}
+  
+  .top {
+    overflow: scroll;
+  }
+  .top ul {
+    width: 137rem;
+    overflow: hidden;
+    justify-content: space-between !important;
+    padding: 2rem 1rem !important;
+  }
+  .top li {
+    display: flex;
+  }
+  .search {
+    width: inherit;
+  }
+  .toggle {
+    color: #fff;
+    font-weight: bold;
+    background: #13833b;
     display: block !important;
     position: absolute;
     z-index: 150;
-    top: 12rem;
-    left: 3rem;}
+    top: 7.5rem;
+    right: 1rem;
+  }
   .wrap {
     height: auto !important;
+    width: inherit;
   }
   .slide-content {
-    position: fixed;
-    top: 0;
-    left: 0px;
-    width: -webkit-fill-available;
-    z-index: 50;
+    position: absolute;
+    z-index: 97;
+    top: 6.5rem;
+    left: -46rem;
+    width: 46rem;
     height: 100vh;
     background-color: #f0f0f0;
-    transition: right 0.3s ease; /* Adjust the duration and easing as needed */
+    transition: transform 0.3s ease;
+    transform: translateX(100%);
   }
 
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: right 0.3s ease; /* Adjust the duration and easing as needed */
-  }
-
-  .slide-enter,
-  .slide-leave-to {
-    right: -300px; /* Initial and final position outside the viewport */
+  .slide-content.active {
+    transform: translateX(0);
   }
 }
-.toggle{display: none;}
+.toggle {
+  display: none;
+}
 .chart div {
   min-height: 13rem;
 }

 
 .top ul {
   padding: 1rem 0;
+  justify-content: space-evenly;
 }
 
 .top li {
-  width: calc(100% / 6);
   text-align: center;
 }
 

25bc276

4093128

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


   align-items: center;
   margin-bottom: 5rem;
 }
-.flex-between {
+/* .flex-between {
   height: 7rem;
   width: 100%;
   z-index: 2000;
   padding: 0 4rem 0 1rem;
   background: #13833b;
   box-shadow: 0px 5px 20px #00000038;
-}
+} */
 @media (max-width: 479px) {
+  .box{display: flex; gap: 1rem; align-items: center;     padding: 0.5rem;  width: 250px;}
+  .bar_element {
+  width: -webkit-fill-available;
+}
   .maintop{overflow: scroll;}
   .boxmenu {
-        /* width: 92vw; */
+    width: max-content;
         height: fit-content;
         display: flex !important;
+        padding: 1.5rem;
     /* margin: 10px; */
     /* border-radius: 20px;*/
   }

     display: none;
   }
   
-  .box .flex {
-    /* border: 1px solid red; */
-    display: flex;
-    align-items: center;
-    width: 190px;
-    margin: 0px -8px 5px;
-  }
   .box_title {
     /* margin-top: 172px; */
-    width: 1000px;
+    /* width: 1000px; */
     /* border: 1px solid; */
     color: #9c9b9a;
     text-align: center;

     color: #13833b;
     margin: 3rem 0;
     text-align: center;
-    width: 100vw;
+    /* width: 100vw; */
   }
   .verticalbar {
-    width: 93vw;
+    display: block;
+    width: -webkit-fill-available;
     border-radius: 15px;
     background-color: #dddddd00;
-    margin-bottom: 3rem;
-    margin: 10px;
-    padding: 1rem;
+    margin-bottom:  0;
+    margin: 0;
+    padding: 0;
   }
   .barinfo {
-    gap: 0;
-    /* width: 90vw; */
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0rem;
   }
   .barinfo img {
     width: 30px;

   }
   .main_section .elementtxt {
     display: flex;
-    font-size: 8px;
-    width: 90px;
+    font-size: 15px;
     justify-content: center;
     align-items: center;
   }
   .bar_element {
-    width: 100vw;
+    /* width: 100vw; */
     border-radius: 20px;
     height: 90px;
     line-height: 30px;

     display: none;
   }
   .board_title {
-    color: #ffff;
     font-size: 16px;
   }
   .board {
     background: #ffffff;
     border-radius: 15px;
-    width: 93vw;
+    width: -webkit-fill-available;
     box-shadow: 0px 5px 20px #00000038;
     padding: 2rem;
     margin: 30px 10px;

     color: #13833b;
     font-size: 17px;
   }
+  .boardinfo {
+    font-size: 17px;
+    padding: 2rem 0;
+}
 }
 
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,7 +1,7 @@
1	1	header{background: #13833b; padding: 0 2rem;}
2	2	.logo {
3	3	display: flex;
4		- width: 30rem;
	4	+ /* width: 30rem; */
5	5	/* border: 1px solid red; */
6	6	height: 7rem;
7	7	justify-content: center;
...	...	@@ -58,12 +58,12 @@
58	58	color: #3b3d3d;
59	59	font-size: 28px;
60	60	font-weight: bolder;
61		- width: 41rem;
	61	+ /* width: 41rem; */
62	62	padding-left: 9rem;
63	63	}
64	64
65	65	.barinfo {
66		- width: 100%;
	66	+ /* width: 100%; */
67	67	display: flex;
68	68	gap: 15rem;
69	69	align-items: baseline;
...	...	@@ -115,7 +115,6 @@
115	115	.board_element {
116	116	transition: 0.3s;
117	117	display: flex;
118		- flex-wrap: wrap;
119	118	align-items: center;
120	119	margin-bottom: 15px;
121	120	justify-content: space-between;

...	...	@@ -25,9 +25,9 @@
25	25	}
26	26	.top ul {
27	27	padding: 1rem 0;
	28	+ justify-content: space-evenly;
28	29	}
29	30	.top li {
30		- width: calc(100% / 6);
31	31	text-align: center;
32	32	}
33	33	.top h3 {

...	...	@@ -1,8 +1,7 @@
1	1	@media all and (max-width: 479px) {
2	2	#root {
3		- width: fit-content;
4	3	}
5	4	.main-warp > div {
6		- display: block;
	5	+ display: block !important;
7	6	}
8	7	}

...	...	@@ -1,8 +1,8 @@
1	1	<template>
2	2	<div class="flex">
3		- <div class="left">
	3	+ <button @click="toggleSlide" class="toggle">검색하기</button>
	4	+ <div :class="['slide-content left', { active: showSlide }]">
4	5	<div class="wrap flex-between">
5		- <button @click="toggleSlide" class="toggle">Toggle Slide</button>
6	6	<!-- <div class="iconlist">
7	7	<ul>
8	8	<li v-for="item in items" :key="item.id" :class="{ active: item.isActive }" @click="toggleActive(item)">
...	...	@@ -11,7 +11,7 @@
11	11	</li>
12	12	</ul>
13	13	</div> -->
14		- <div class="search slide-content" v-if="showSlide">
	14	+ <div class="search">
15	15	<h2>지역설정</h2>
16	16	<div class="box">
17	17	<DongSelectList @setDongCd="setDongCd"></DongSelectList>
...	...	@@ -213,7 +213,7 @@
213	213	export default {
214	214	data() {
215	215	return {
216		- showSlide: true,
	216	+ showSlide: false,
217	217	address: {},
218	218	//조건설정
219	219	condition: {
...	...	@@ -350,37 +350,56 @@
350	350
351	351	<style scoped>
352	352	@media all and (max-width: 479px) {
353		- .toggle{
	353	+ .chart{width: -webkit-fill-available !important;}
	354	+
	355	+ .top {
	356	+ overflow: scroll;
	357	+ }
	358	+ .top ul {
	359	+ width: 137rem;
	360	+ overflow: hidden;
	361	+ justify-content: space-between !important;
	362	+ padding: 2rem 1rem !important;
	363	+ }
	364	+ .top li {
	365	+ display: flex;
	366	+ }
	367	+ .search {
	368	+ width: inherit;
	369	+ }
	370	+ .toggle {
	371	+ color: #fff;
	372	+ font-weight: bold;
	373	+ background: #13833b;
354	374	display: block !important;
355	375	position: absolute;
356	376	z-index: 150;
357		- top: 12rem;
358		- left: 3rem;}
	377	+ top: 7.5rem;
	378	+ right: 1rem;
	379	+ }
359	380	.wrap {
360	381	height: auto !important;
	382	+ width: inherit;
361	383	}
362	384	.slide-content {
363		- position: fixed;
364		- top: 0;
365		- left: 0px;
366		- width: -webkit-fill-available;
367		- z-index: 50;
	385	+ position: absolute;
	386	+ z-index: 97;
	387	+ top: 6.5rem;
	388	+ left: -46rem;
	389	+ width: 46rem;
368	390	height: 100vh;
369	391	background-color: #f0f0f0;
370		- transition: right 0.3s ease; /* Adjust the duration and easing as needed */
	392	+ transition: transform 0.3s ease;
	393	+ transform: translateX(100%);
371	394	}
372	395
373		- .slide-enter-active,
374		- .slide-leave-active {
375		- transition: right 0.3s ease; /* Adjust the duration and easing as needed */
376		- }
377		-
378		- .slide-enter,
379		- .slide-leave-to {
380		- right: -300px; /* Initial and final position outside the viewport */
	396	+ .slide-content.active {
	397	+ transform: translateX(0);
381	398	}
382	399	}
383		-.toggle{display: none;}
	400	+.toggle {
	401	+ display: none;
	402	+}
384	403	.chart div {
385	404	min-height: 13rem;
386	405	}
...	...	@@ -432,10 +451,10 @@
432	451
433	452	.top ul {
434	453	padding: 1rem 0;
	454	+ justify-content: space-evenly;
435	455	}
436	456
437	457	.top li {
438		- width: calc(100% / 6);
439	458	text-align: center;
440	459	}
441	460

...	...	@@ -286,20 +286,25 @@
286	286	align-items: center;
287	287	margin-bottom: 5rem;
288	288	}
289		-.flex-between {
	289	+/* .flex-between {
290	290	height: 7rem;
291	291	width: 100%;
292	292	z-index: 2000;
293	293	padding: 0 4rem 0 1rem;
294	294	background: #13833b;
295	295	box-shadow: 0px 5px 20px #00000038;
296		-}
	296	+} */
297	297	@media (max-width: 479px) {
	298	+ .box{display: flex; gap: 1rem; align-items: center; padding: 0.5rem; width: 250px;}
	299	+ .bar_element {
	300	+ width: -webkit-fill-available;
	301	+}
298	302	.maintop{overflow: scroll;}
299	303	.boxmenu {
300		- /* width: 92vw; */
	304	+ width: max-content;
301	305	height: fit-content;
302	306	display: flex !important;
	307	+ padding: 1.5rem;
303	308	/* margin: 10px; */
304	309	/* border-radius: 20px;*/
305	310	}
...	...	@@ -308,16 +313,9 @@
308	313	display: none;
309	314	}
310	315
311		- .box .flex {
312		- /* border: 1px solid red; */
313		- display: flex;
314		- align-items: center;
315		- width: 190px;
316		- margin: 0px -8px 5px;
317		- }
318	316	.box_title {
319	317	/* margin-top: 172px; */
320		- width: 1000px;
	318	+ /* width: 1000px; */
321	319	/* border: 1px solid; */
322	320	color: #9c9b9a;
323	321	text-align: center;
...	...	@@ -329,19 +327,21 @@
329	327	color: #13833b;
330	328	margin: 3rem 0;
331	329	text-align: center;
332		- width: 100vw;
	330	+ /* width: 100vw; */
333	331	}
334	332	.verticalbar {
335		- width: 93vw;
	333	+ display: block;
	334	+ width: -webkit-fill-available;
336	335	border-radius: 15px;
337	336	background-color: #dddddd00;
338		- margin-bottom: 3rem;
339		- margin: 10px;
340		- padding: 1rem;
	337	+ margin-bottom: 0;
	338	+ margin: 0;
	339	+ padding: 0;
341	340	}
342	341	.barinfo {
343		- gap: 0;
344		- /* width: 90vw; */
	342	+ display: grid;
	343	+ grid-template-columns: 1fr 1fr;
	344	+ gap: 0rem;
345	345	}
346	346	.barinfo img {
347	347	width: 30px;
...	...	@@ -356,13 +356,12 @@
356	356	}
357	357	.main_section .elementtxt {
358	358	display: flex;
359		- font-size: 8px;
360		- width: 90px;
	359	+ font-size: 15px;
361	360	justify-content: center;
362	361	align-items: center;
363	362	}
364	363	.bar_element {
365		- width: 100vw;
	364	+ /* width: 100vw; */
366	365	border-radius: 20px;
367	366	height: 90px;
368	367	line-height: 30px;
...	...	@@ -374,13 +373,12 @@
374	373	display: none;
375	374	}
376	375	.board_title {
377		- color: #ffff;
378	376	font-size: 16px;
379	377	}
380	378	.board {
381	379	background: #ffffff;
382	380	border-radius: 15px;
383		- width: 93vw;
	381	+ width: -webkit-fill-available;
384	382	box-shadow: 0px 5px 20px #00000038;
385	383	padding: 2rem;
386	384	margin: 30px 10px;
...	...	@@ -389,6 +387,10 @@
389	387	color: #13833b;
390	388	font-size: 17px;
391	389	}
	390	+ .boardinfo {
	391	+ font-size: 17px;
	392	+ padding: 2rem 0;
	393	+}
392	394	}
393	395
394	396	</style>

Delete comment