Commit @d259db3500a785cc77042e41d2b404fd6a8fa88f

kimgkdud898 2023-10-27

231027김하영 홍보/뉴스 ,기타

@d259db3500a785cc77042e41d2b404fd6a8fa88f

8ff46aa

d259db3

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


   overflow-y: scroll;
 }
 
-body,#root {
+body,
+#root {
   width: 100%;
   height: 100%;
-  background-color: #f8f8f8;
+  /* background-color: #f8f8f8; */
 }
 
 ul,

8ff46aa

d259db3

client/views/layout/Header.vue

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

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


 <template>
     <div class="header">
         <div class="b1400">
-
+            <div class="name">
+                <p>테이큰소프트 <span>님</span></p>
+            </div>
+            <div class="mypage">
+                <router-link to="/Info.page"><button id="input">마이페이지</button></router-link>
+            </div>
             <div class="login">
                 <i class="fa-solid fa-user fa-lg" style="color: #ffffff;"></i>
-                <router-link to="/Login.page"><input type="button" value="로그인" name="" id="input"></router-link>
+                <router-link to="/Login.page"><button id="input">로그인</button></router-link>
 
             </div>
 

     }
 }
 </script>
+
 <style scoped>
+.name {
+    padding: 0.5rem;
+    font-size: 1.5rem;
+    font-family: "Pretendard-Regular";
+
+    color: white;
+}
+
+.b1400 {
+    padding: 1rem;
+    /* border: 1px solid red; */
+}
+
+.b1400 div {
+    margin-right: 2rem;
+}
+
+.mypage button {
+    font-size: 1.5rem !important;
+    padding: 0.5rem;
+}
+
 .header {
     width: 100%;
     /* height: 40px; */

     border: 0;
     background-color: rgba(240, 248, 255, 0);
     cursor: pointer;
+    /* border: 1px solid red; */
+    /* padding: 1rem; */
     color: white;
+    font-size: 1.5rem;
 }
 </style>

8ff46aa

d259db3

client/views/layout/Menu.vue

--- client/views/layout/Menu.vue

+++ client/views/layout/Menu.vue


                     link: "/Guide.page",
                     isHovered: false,
                     subMenu: [
-                        { text: "AI 디지털교과서개발 가이드라인", link: "/Guide.page" },
+                        // { text: "AI 디지털교과서개발 가이드라인", link: "/Guide.page" },
                         { text: "기술문서", link: "/Technology.page" },
                         { text: "자료집", link: "/Data.page" }
                     ]

                     isHovered: false,
                     subMenu: [
                         { text: "공지사항", link: "/Notice.page" },
-                        { text: "홍보/뉴스", link: "" },
+                        { text: "홍보/뉴스", link: "/News.page" },
                         { text: "WG 커뮤니티", link: "" }
                     ]
                 },
-                {
-                    text: "마이페이지",
-                    link: "/Info.page",
-                    isHovered: false,
-                    subMenu: [
-                        { text: "내 정보 수정", link: "/Info.page" },
-                        { text: "매칭 관리", link: "" }
-                    ]
-                }
+                // {
+                //     text: "마이페이지",
+                //     link: "/Info.page",
+                //     isHovered: false,
+                //     subMenu: [
+                //         { text: "내 정보 수정", link: "/Info.page" },
+                //         { text: "매칭 관리", link: "" }
+                //     ]
+                // }
             ]
         };
     },

     overflow: hidden;
     transition: all 0.8s;
     position: absolute;
-    top: 69px;
+    top: 100px;
     left: 0;
     width: 100%;
     z-index: 100000;
-    background-color: #f8f8f8;
-    box-shadow: 0px 2px 2px #3333331b;
+    background-color: #ffff;
+    /* box-shadow: 0px 2px 2px #3333331b; */
 }
 
 ul.main-menu>li.active ul.sub-menu {

8ff46aa

d259db3

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Data from "../pages/user/Data/Data.vue";
 import Login from "../pages/user/login/Login.vue";
 import Join from "../pages/user/Join/Join.vue";
+import Joinsub from "../pages/user/Join/Joinsub.vue";
 import Introduction from "../pages/user/introduction/Introduction.vue";
 import Technology from "../pages/user/Data/Technology.vue";
 import Notice from "../pages/user/community/Notice.vue";
+import News from "../pages/user/community/News.vue";
 import Info from "../pages/user/mypage/Info.vue";
 import Infosub from "../pages/user/mypage/Infosub.vue";
 import Guide from "../pages/user/Data/Guide.vue";

   { path: "/Matching.page", name: "Matching", component: Matching },
   { path: "/Login.page", name: "Login", component: Login },
   { path: "/Join.page", name: "Join", component: Join },
+  { path: "/Joinsub.page", name: "Joinsub", component: Joinsub },
   { path: "/Introduction.page", name: "Introduction", component: Introduction },
   { path: "/Technology.page", name: "Technology", component: Technology },
   { path: "/Notice.page", name: "Notice", component: Notice },
   { path: "/Info.page", name: "Info", component: Info },
   { path: "/Guide.page", name: "Guide", component: Guide },
   { path: "/Infosub.page", name: "Infosub", component: Infosub },
+  { path: "/News.page", name: "News", component: News },
   /* 관리자 */
   { path: "/adm.page", name: "AdminMain", component: AdminMain },
   { path: "/adm/user.page", name: "AdminUser", component: AdminUser },

d259db3

client/views/pages/user/community/News.vue (added)

+++ client/views/pages/user/community/News.vue

...	...	@@ -0,0 +1,238 @@
	1	+<template>
	2	+ <div>
	3	+
	4	+
	5	+ <div class="w1400">
	6	+ <div class="page-logo new-logo">
	7	+ <img src="../../../../resources/jpg/info-logo.png" alt="">
	8	+ <h1>홍보/뉴스</h1>
	9	+ </div>
	10	+
	11	+
	12	+
	13	+
	14	+
	15	+
	16	+ <section class="news-bos">
	17	+ <section class="news-bos-box">
	18	+
	19	+ <div class="modal-img"
	20	+ @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
	21	+ <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
	22	+ </div>
	23	+ <div>
	24	+ <h3>학교알리미</h3>
	25	+ </div>
	26	+ <div class="news-box-sed">
	27	+ <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
	28	+ </div>
	29	+
	30	+ <div class="news-box-end">
	31	+ <p>작성자 <span>케리스</span></p>
	32	+ <p>조회수 <span>100</span></p>
	33	+ </div>
	34	+ </section>
	35	+
	36	+
	37	+ <section class="news-bos-box">
	38	+
	39	+ <div class="modal-img"
	40	+ @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
	41	+ <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
	42	+ </div>
	43	+ <div>
	44	+ <h3>학교알리미</h3>
	45	+ </div>
	46	+ <div class="news-box-sed">
	47	+ <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
	48	+ </div>
	49	+
	50	+ <div class="news-box-end">
	51	+ <p>작성자 <span>케리스</span></p>
	52	+ <p>조회수 <span>100</span></p>
	53	+ </div>
	54	+ </section>
	55	+ <section class="news-bos-box">
	56	+
	57	+ <div class="modal-img"
	58	+ @click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
	59	+ <img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
	60	+ </div>
	61	+ <div>
	62	+ <h3>학교알리미</h3>
	63	+ </div>
	64	+ <div class="news-box-sed">
	65	+ <p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
	66	+ </div>
	67	+
	68	+ <div class="news-box-end">
	69	+ <p>작성자 <span>케리스</span></p>
	70	+ <p>조회수 <span>100</span></p>
	71	+ </div>
	72	+ </section>
	73	+ </section>
	74	+
	75	+
	76	+
	77	+ <div v-if="isModalOpen" class="modal">
	78	+ <div class="modal-content">
	79	+ <iframe width="100%" height="80%" :src="videoUrl" title="YouTube video player" frameborder="0"
	80	+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	81	+ allowfullscreen></iframe>
	82	+ <!-- 모달 닫기 버튼 -->
	83	+ <button @click="closeModal">닫기</button>
	84	+ </div>
	85	+ </div>
	86	+ </div>
	87	+ </div>
	88	+</template>
	89	+
	90	+<script>
	91	+export default {
	92	+ data() {
	93	+ return {
	94	+ isModalOpen: false,
	95	+ videoUrl: '',
	96	+ }
	97	+ },
	98	+ methods: {
	99	+ openModal(url) {
	100	+ this.videoUrl = url;
	101	+ this.isModalOpen = true;
	102	+ },
	103	+ closeModal() {
	104	+ this.isModalOpen = false;
	105	+ },
	106	+ },
	107	+ watch: {
	108	+
	109	+ },
	110	+ computed: {
	111	+
	112	+ },
	113	+ mounted() {
	114	+ console.log('Login mounted');
	115	+ }
	116	+}
	117	+</script>
	118	+
	119	+<style scoped>
	120	+.new-logo img {
	121	+ width: 50px;
	122	+ height: 50px;
	123	+ z-index: -1;
	124	+ /* transform: translateY(-40px); */
	125	+}
	126	+
	127	+/* 모달 */
	128	+.modal {
	129	+ width: 100%;
	130	+ height: 100%;
	131	+ background-color: #33333324;
	132	+ margin: 0 auto;
	133	+ text-align: center;
	134	+ padding: 3rem;
	135	+ position: fixed;
	136	+ top: 0;
	137	+ left: 0;
	138	+}
	139	+
	140	+.modal-content {
	141	+ position: fixed;
	142	+ top: 50%;
	143	+ left: 50%;
	144	+ padding: 4rem;
	145	+ border-radius: 2rem;
	146	+ background-color: #f9f9f9;
	147	+ transform: translate(-50%, -50%);
	148	+ /* margin: 0 auto; */
	149	+ box-shadow: 2px 2px 5px #86868644;
	150	+
	151	+ width: 70%;
	152	+ height: 70%;
	153	+}
	154	+
	155	+.modal-content button {
	156	+ margin: 2rem;
	157	+ padding: 2rem 6rem 2rem;
	158	+ background-color: #007aff;
	159	+ border-radius: 2rem;
	160	+ color: white;
	161	+ font-family: "Pretendard-Regular";
	162	+
	163	+}
	164	+
	165	+/* ----------------------------------- */
	166	+.news-bos {
	167	+ width: 100%;
	168	+ display: grid;
	169	+ gap: 3rem;
	170	+ grid-template-columns: 1fr 1fr 1fr;
	171	+ padding: 6rem 6rem 12rem 6rem;
	172	+ /* border: 1px solid red; */
	173	+}
	174	+
	175	+.news-bos-box {
	176	+ display: grid;
	177	+ grid-template-columns: 1fr;
	178	+ margin: 0 auto;
	179	+ border-radius: 2rem;
	180	+ padding: 2rem;
	181	+ background-color: #f7f7f7;
	182	+ box-shadow: 2px 2px 5px #8484847c;
	183	+}
	184	+
	185	+.news-bos-box div {
	186	+ padding: 1rem;
	187	+}
	188	+
	189	+.modal-img {
	190	+ width: 100%;
	191	+ height: 195px;
	192	+ /* border: 1px solid/ red; */
	193	+}
	194	+
	195	+.news-bos-box div h3 {
	196	+ font-size: 1.7rem;
	197	+ padding: 1rem;
	198	+}
	199	+
	200	+.news-bos-box img {
	201	+ width: 100%;
	202	+ height: 100%;
	203	+ object-fit: cover;
	204	+ border-radius: 2.5rem;
	205	+ box-shadow: 2px 2px 5px #8484847c;
	206	+
	207	+}
	208	+
	209	+.news-box-end {
	210	+ display: grid;
	211	+ grid-template-columns: 1fr 1fr;
	212	+
	213	+}
	214	+
	215	+.news-box-sed p {
	216	+ font-size: 1.5rem;
	217	+ /* padding: 1rem; */
	218	+ /* background-color: aquamarine; */
	219	+}
	220	+
	221	+.news-box-end p {
	222	+ font-size: 1.5rem;
	223	+ color: #3f87f7;
	224	+ /* padding: 1rem; */
	225	+}
	226	+
	227	+.news-box-end p span {
	228	+ color: #333;
	229	+
	230	+}
	231	+
	232	+.news-box-end p:nth-child(2) {
	233	+
	234	+ text-align: right;
	235	+}
	236	+</style>
	237	+
	238	+

d259db3

client/views/pages/user/join/Joinsub.vue (added)

+++ client/views/pages/user/join/Joinsub.vue

...	...	@@ -0,0 +1,1046 @@
	1	+<template>
	2	+ <div class="w1400">
	3	+ <section class="join-logo">
	4	+ <h1>회원가입</h1>
	5	+ </section>
	6	+
	7	+ <div v-if="selectedMembership === 'one'">
	8	+ <div class="login-info">
	9	+ <div>
	10	+ <h3>회원정보</h3>
	11	+ <p>※ 기업회원의 경우 담당자 1인만 가입할 수 있습니다. 이미 가입한 기업은 중복 계정 생성이 불가합니다.
	12	+ </p>
	13	+ <hr>
	14	+ </div>
	15	+ <section class="join-sec1 joinsub0">
	16	+ <div class="join-sec-sub ">
	17	+ <span>아이디</span>
	18	+ </div>
	19	+ <div>
	20	+ <input type="text" value="아이디를 입력하세요.">
	21	+ </div>
	22	+ <div>
	23	+
	24	+ <button>중복확인</button>
	25	+ </div>
	26	+ </section>
	27	+
	28	+
	29	+ <section class="join-sec2 joinsub">
	30	+
	31	+ <div class="join-sec-sub">
	32	+ <span>기관업체</span>
	33	+ </div>
	34	+ <div class="join-sub-input">
	35	+ <input type="text">
	36	+
	37	+ </div>
	38	+
	39	+ </section>
	40	+
	41	+
	42	+ <section class="join-sec3 joinsub">
	43	+ <div class="join-sec-sub">
	44	+ <span>비밀번호</span>
	45	+ </div>
	46	+ <div class="join-sub-input">
	47	+ <input type="text">
	48	+
	49	+ </div>
	50	+ </section>
	51	+
	52	+
	53	+ <section class="join-sec4 joinsub">
	54	+ <div class="join-sec-sub">
	55	+ <span>비밀번호 확인</span>
	56	+ </div>
	57	+ <div class="join-sub-input">
	58	+ <input type="text">
	59	+
	60	+ </div>
	61	+ </section>
	62	+
	63	+
	64	+ <section class="join-sec5 joinsub">
	65	+ <div class="join-sec-sub">
	66	+ <span>담당자명<span>(필수)</span></span>
	67	+ </div>
	68	+ <div>
	69	+ <input type="text">
	70	+
	71	+ </div>
	72	+ </section>
	73	+
	74	+
	75	+ <section class="join-sec6">
	76	+ <div class="join-sec-sub">
	77	+ <span>이메일<span>(필수)</span></span>
	78	+ </div>
	79	+ <div class="email-sec">
	80	+
	81	+ <div>
	82	+ <input type="text" name="email_id" id="email_id">
	83	+ </div>
	84	+ <div>@</div>
	85	+ <div>
	86	+ <input type="text" name="email_dns" id="email_dns">
	87	+ </div>
	88	+ <div>
	89	+ <select name="email_sel" id="email_sel">
	90	+ <option value="">직접 입력</option>
	91	+ <option value="naver.com">naver</option>
	92	+ <option value="hanmail.net">daum</option>
	93	+ <option value="gmail.com">google</option>
	94	+ </select>
	95	+ </div>
	96	+ </div>
	97	+
	98	+ </section>
	99	+ </div>
	100	+ <div class="login-info2">
	101	+ <div>
	102	+ <h3>회사소개</h3>
	103	+ <hr>
	104	+ </div>
	105	+ <div class="login-info-grid">
	106	+ <div class="login-info-grid-1">
	107	+ <section class="join-sec0">
	108	+ <div>
	109	+ <p>logo</p>
	110	+ </div>
	111	+ </section>
	112	+ </div>
	113	+
	114	+ <div class="login-info-grid-2">
	115	+ <section class="join-sec1 joinsub0-1">
	116	+ <div class="join-sec-sub ">
	117	+ <span>회사명</span>
	118	+ </div>
	119	+ <div>
	120	+ <input type="text" value="회사명을 입력해주세요.">
	121	+ </div>
	122	+
	123	+ </section>
	124	+
	125	+
	126	+ <section class="join-sec2 joinsub">
	127	+
	128	+ <div class="join-sec-sub">
	129	+ <span>우리회사 키워드</span>
	130	+ </div>
	131	+ <div class="join-sub-input">
	132	+ <input type="text">
	133	+
	134	+ </div>
	135	+
	136	+ </section>
	137	+
	138	+
	139	+ <section class="join-sec3 joinsub j-s-3">
	140	+ <div class="join-sec-sub">
	141	+ <span>회사소개글</span>
	142	+ </div>
	143	+ <div class="join-sub-input">
	144	+ <input type="text">
	145	+
	146	+ </div>
	147	+ </section>
	148	+
	149	+
	150	+ <section class="join-sec4 joinsub">
	151	+ <div class="join-sec-sub join-sec-1">
	152	+ <span>회사소개서 첨부파일</span>
	153	+ </div>
	154	+ <div class="join-sub-input">
	155	+ <input type="file">
	156	+
	157	+ </div>
	158	+ </section>
	159	+ </div>
	160	+ </div>
	161	+
	162	+
	163	+ </div>
	164	+ </div>
	165	+ <div v-else>
	166	+ <div class="login-info">
	167	+ <div>
	168	+ <h3>회원정보</h3>
	169	+ <hr>
	170	+ </div>
	171	+ <section class="join-sec1 joinsub0">
	172	+ <div class="join-sec-sub ">
	173	+ <span>아이디</span>
	174	+ </div>
	175	+ <div>
	176	+ <input type="text" value="아이디를 입력하세요.">
	177	+ </div>
	178	+ <div>
	179	+
	180	+ <button>중복확인</button>
	181	+ </div>
	182	+ </section>
	183	+
	184	+
	185	+ <!-- <section class="join-sec2 joinsub">
	186	+
	187	+ <div class="join-sec-sub">
	188	+ <span>기관업체</span>
	189	+ </div>
	190	+ <div class="join-sub-input">
	191	+ <input type="text">
	192	+
	193	+ </div>
	194	+
	195	+ </section> -->
	196	+
	197	+
	198	+ <section class="join-sec3 joinsub">
	199	+ <div class="join-sec-sub">
	200	+ <span>비밀번호</span>
	201	+ </div>
	202	+ <div class="join-sub-input">
	203	+ <input type="text">
	204	+
	205	+ </div>
	206	+ </section>
	207	+
	208	+
	209	+ <section class="join-sec4 joinsub">
	210	+ <div class="join-sec-sub">
	211	+ <span>비밀번호 확인</span>
	212	+ </div>
	213	+ <div class="join-sub-input">
	214	+ <input type="text">
	215	+
	216	+ </div>
	217	+ </section>
	218	+
	219	+
	220	+ <section class="join-sec5 joinsub">
	221	+ <div class="join-sec-sub">
	222	+ <span>담당자명</span>
	223	+ </div>
	224	+ <div>
	225	+ <input type="text">
	226	+
	227	+ </div>
	228	+ </section>
	229	+
	230	+
	231	+ <section class="join-sec6">
	232	+ <div class="join-sec-sub">
	233	+ <span>이메일</span>
	234	+ </div>
	235	+ <div class="email-sec">
	236	+
	237	+ <div>
	238	+ <input type="text" name="email_id" id="email_id">
	239	+ </div>
	240	+ <div>@</div>
	241	+ <div>
	242	+ <input type="text" name="email_dns" id="email_dns">
	243	+ </div>
	244	+ <div>
	245	+ <select name="email_sel" id="email_sel">
	246	+ <option value="">직접 입력</option>
	247	+ <option value="naver.com">naver</option>
	248	+ <option value="hanmail.net">daum</option>
	249	+ <option value="gmail.com">google</option>
	250	+ </select>
	251	+ </div>
	252	+ </div>
	253	+
	254	+ </section>
	255	+ </div>
	256	+ </div>
	257	+
	258	+
	259	+
	260	+ <!---------------------------------------------------------------------------------------------------------------->
	261	+
	262	+
	263	+
	264	+ <div class="join-w1400">
	265	+
	266	+ <section class="join-email-bt">
	267	+ <input type="checkbox">
	268	+ <span>E-mail 구독서비스를 신청하시겠습니까?</span>
	269	+ </section>
	270	+
	271	+ <section class="join-end-bt">
	272	+ <button>이전</button>
	273	+
	274	+ <button @click="showDiv">회원가입</button>
	275	+ </section>
	276	+ </div>
	277	+
	278	+ </div>
	279	+
	280	+
	281	+
	282	+ <!-- 회원가입 완료 모달 -->
	283	+ <div class="joinmodal" v-if="isVisible">
	284	+ <section class="join-modal-a">
	285	+ <div>
	286	+ <h1>회원가입 안내</h1>
	287	+ </div>
	288	+ <div>
	289	+ <p>회원가입이 완료되었습니다.
	290	+ 승인 결과는 작성해주신 이메일로 발송될 예정입니다.
	291	+
	292	+ 회원가입 승인 전까지 특정 서비스는 이용하실 수 없으며,
	293	+ 승인 이후 모든 서비스를 이용하실 수 있습니다.
	294	+ 또한, 해당 기업은 같은 기업명으로 중복 계정 생성이 불가합니다.
	295	+
	296	+ </p>
	297	+ </div>
	298	+ <div>
	299	+ <button @click="hideDiv">확인</button>
	300	+ </div>
	301	+ </section>
	302	+ </div>
	303	+</template>
	304	+
	305	+<script>
	306	+
	307	+
	308	+export default {
	309	+ data() {
	310	+ return {
	311	+ selectedMembership: 'one',
	312	+ isVisible: false
	313	+ }
	314	+ },
	315	+ methods: {
	316	+
	317	+ showDiv: function () {
	318	+ this.isVisible = true;
	319	+ },
	320	+ hideDiv: function () {
	321	+ this.isVisible = false;
	322	+ }
	323	+ },
	324	+ watch: {
	325	+
	326	+ },
	327	+ computed: {
	328	+
	329	+ },
	330	+ mounted() {
	331	+ console.log('Join mounted');
	332	+ }
	333	+}
	334	+</script>
	335	+
	336	+<style scoped>
	337	+/* 모달 */
	338	+.joinmodal {
	339	+ width: 100%;
	340	+ height: 100%;
	341	+ background-color: #33333324;
	342	+ margin: 0 auto;
	343	+ text-align: center;
	344	+ padding: 3rem;
	345	+ position: fixed;
	346	+ top: 0;
	347	+ left: 0;
	348	+}
	349	+
	350	+.join-modal-a {
	351	+ position: fixed;
	352	+ top: 50%;
	353	+ left: 50%;
	354	+ padding: 4rem;
	355	+ border-radius: 2rem;
	356	+ background-color: #f9f9f9;
	357	+ transform: translate(-50%, -50%);
	358	+ /* margin: 0 auto; */
	359	+ box-shadow: 2px 2px 5px #86868644;
	360	+
	361	+ width: 25%;
	362	+}
	363	+
	364	+.join-modal-a h1 {
	365	+ font-size: 2rem;
	366	+ padding: 3rem 0 0 0;
	367	+}
	368	+
	369	+.join-modal-a p {
	370	+ width: 85%;
	371	+ margin: 0 auto;
	372	+ font-size: 1.5rem;
	373	+ padding: 3rem;
	374	+ text-align: left;
	375	+}
	376	+
	377	+.join-modal-a button {
	378	+ width: 20%;
	379	+ background-color: #3f87f7;
	380	+ border-radius: 1.5rem;
	381	+ color: white;
	382	+ font-family: "Pretendard-Regular";
	383	+
	384	+
	385	+}
	386	+
	387	+/* ----------------------------------- */
	388	+.join-b {
	389	+ width: 100%;
	390	+
	391	+ /* border: 1px solid red; */
	392	+}
	393	+
	394	+.join-logo {
	395	+ padding: 6rem;
	396	+}
	397	+
	398	+.login-info p {
	399	+ color: rgb(255, 0, 0);
	400	+ padding: 0 1rem;
	401	+ font-size: 1.5rem;
	402	+}
	403	+
	404	+.join-logo h1 {
	405	+ font-family: SBaggroM;
	406	+ color: #0e0077;
	407	+ font-size: 4rem;
	408	+}
	409	+
	410	+.join-b-button {
	411	+ width: 50%;
	412	+ display: grid;
	413	+ grid-template-columns: 1fr 1fr;
	414	+ margin: 0 auto;
	415	+ gap: 6rem;
	416	+ flex-direction: row;
	417	+ /* padding: 9rem; */
	418	+}
	419	+
	420	+.join-b-button input[type="radio"] {
	421	+ display: none;
	422	+}
	423	+
	424	+.join-b-button button {
	425	+ height: 20rem;
	426	+ display: grid;
	427	+ grid-template-columns: 1fr;
	428	+ border-radius: 2rem;
	429	+ text-align: center;
	430	+ box-shadow: 2px 2px 5px #86868644;
	431	+ /* padding: 1rem; */
	432	+}
	433	+
	434	+.join-b-button button p {
	435	+ padding: 3rem 0 0;
	436	+ /* padding: 3rem 0rem 1rem 3rem; */
	437	+ font-size: 3rem;
	438	+ font-family: SBaggroM;
	439	+ color: #014099;
	440	+
	441	+}
	442	+
	443	+.join-b-button button img {
	444	+ width: 200px;
	445	+ height: 100px;
	446	+ text-align: center;
	447	+ margin: 0 auto;
	448	+ /* border: 1px solid red; */
	449	+ background-position: center;
	450	+}
	451	+
	452	+
	453	+.background {
	454	+ background-color: #000000;
	455	+}
	456	+
	457	+.join-b-button button:nth-child(1).background {
	458	+ background-color: #000000;
	459	+}
	460	+
	461	+
	462	+.light {
	463	+ z-index: 1;
	464	+ background-color: #ff0000;
	465	+}
	466	+
	467	+.join-b-button button:nth-child(2) {
	468	+ background-color: #e6fff1;
	469	+}
	470	+
	471	+.join-b-button button:nth-child(2) img {
	472	+ width: 100px;
	473	+}
	474	+
	475	+.join-b-button button:nth-child(2) p {
	476	+ color: #0e5e2e;
	477	+}
	478	+
	479	+.radio-t {
	480	+ padding: 3rem;
	481	+ height: 25rem;
	482	+ font-size: 3rem;
	483	+ border-radius: 2rem;
	484	+ font-family: SBaggroM;
	485	+ margin: 0 auto;
	486	+ box-shadow: 2px 2px 5px #33333330;
	487	+ text-align: center;
	488	+}
	489	+
	490	+.t1 {
	491	+ padding: 6rem 0;
	492	+ color: #014099;
	493	+ background-color: #e2ecfc;
	494	+}
	495	+
	496	+.t1 img {
	497	+ padding: 1rem;
	498	+ width: 90%;
	499	+ margin: 0 auto;
	500	+}
	501	+
	502	+.t2 img {
	503	+ padding: 1rem;
	504	+ width: 50%;
	505	+ margin: 0 auto;
	506	+
	507	+}
	508	+
	509	+.t2 {
	510	+ padding: 6rem 0;
	511	+ color: #0e5e2e;
	512	+ background-color: #e6fff1;
	513	+}
	514	+
	515	+/* 공통요소-------------------------------------------------------------------------*/
	516	+hr {
	517	+ margin: 1rem 0 3rem 0;
	518	+ border: 1px solid #cbcbcb;
	519	+}
	520	+
	521	+section div span {
	522	+ font-size: 1.5rem;
	523	+ font-family: "Pretendard-Regular";
	524	+
	525	+ /* float: left; */
	526	+ color: #3f87f7;
	527	+ padding: 1rem 1rem 1rem 5rem;
	528	+}
	529	+
	530	+section div span span {
	531	+ padding: 0rem;
	532	+ color: #a6a6a6;
	533	+}
	534	+
	535	+section div input {
	536	+ width: 100%;
	537	+ padding: 1rem;
	538	+ border: 1px solid #cbcbcb;
	539	+ color: #cbcbcb;
	540	+ border-radius: 0.5rem;
	541	+}
	542	+
	543	+section div button {
	544	+ width: 100%;
	545	+ padding: 1rem;
	546	+ cursor: pointer;
	547	+ border-radius: 0.5rem;
	548	+}
	549	+
	550	+section div select {
	551	+ width: 100%;
	552	+ padding: 1rem;
	553	+ border: 1px solid #cbcbcb;
	554	+ border-radius: 0.5rem;
	555	+ color: #6b6b6b;
	556	+ font-family: "Pretendard-Regular";
	557	+
	558	+}
	559	+
	560	+
	561	+/* -------------------------------------------------------------------------------- */
	562	+
	563	+
	564	+
	565	+
	566	+
	567	+
	568	+.login-info,
	569	+.login-info2 {
	570	+ width: 50%;
	571	+ margin: 0 auto;
	572	+
	573	+}
	574	+
	575	+.login-info2 {
	576	+ display: block;
	577	+}
	578	+
	579	+.login-info2.Chacked {
	580	+ display: none;
	581	+}
	582	+
	583	+.login-info h3,
	584	+.login-info2 h3 {
	585	+ color: #0e0077;
	586	+
	587	+ font-size: 2rem;
	588	+ font-family: "Pretendard-Regular";
	589	+
	590	+ padding: 3rem 1rem 1rem 1rem;
	591	+}
	592	+
	593	+.joinsub0 {
	594	+ padding: 1rem;
	595	+ display: grid;
	596	+ grid-template-columns: 200px 2fr 1fr;
	597	+ gap: 1rem;
	598	+}
	599	+
	600	+.j-s-3 {
	601	+ display: grid;
	602	+ grid-template-rows: 30rem;
	603	+}
	604	+
	605	+.j-s-3 input {
	606	+ height: 100%;
	607	+}
	608	+
	609	+.join-sec1 button {
	610	+ font-size: 1.5rem;
	611	+ color: white;
	612	+ font-family: "Pretendard-Regular";
	613	+
	614	+ background-color: #3f87f7;
	615	+}
	616	+
	617	+.joinsub {
	618	+ padding: 1rem;
	619	+ display: grid;
	620	+ grid-template-columns: 200px 2fr;
	621	+ gap: 1rem;
	622	+}
	623	+
	624	+.join-sec6 {
	625	+ padding: 1rem;
	626	+ display: grid;
	627	+ grid-template-columns: 200px 1fr;
	628	+ gap: 1rem;
	629	+}
	630	+
	631	+.join-sec6 div:nth-child(3) {
	632	+ padding: 1rem 0;
	633	+ font-size: 1.5rem;
	634	+ font-family: "Pretendard-Regular";
	635	+
	636	+}
	637	+
	638	+.login-info-grid {
	639	+ display: grid;
	640	+ grid-template-columns: 100px 1fr;
	641	+
	642	+}
	643	+
	644	+.join-sec0 {
	645	+ display: grid;
	646	+ padding: 2rem;
	647	+ grid-row: 1 / span 3;
	648	+
	649	+}
	650	+
	651	+.join-sec0 div p {
	652	+ width: 100px;
	653	+ height: 100px;
	654	+ line-height: 100px;
	655	+ border-radius: 50%;
	656	+ text-align: center;
	657	+ color: #333;
	658	+ font-size: 2.5rem;
	659	+ font-family: "Pretendard-Regular";
	660	+ background-color: #b5b5b5;
	661	+ /* border: 1px solid red; */
	662	+ box-shadow: 2px 2px 5px #33333328;
	663	+}
	664	+
	665	+.joinsub0-1 {
	666	+ padding: 1rem;
	667	+ display: grid;
	668	+ grid-template-columns: 200px 2fr;
	669	+
	670	+}
	671	+
	672	+.join-w1400 {
	673	+ width: 50%;
	674	+ margin: 0 auto;
	675	+
	676	+}
	677	+
	678	+.join-email-bt {
	679	+ font-size: 1.6rem;
	680	+ padding: 3rem 3rem 3rem 0rem;
	681	+}
	682	+
	683	+.join-email-bt input[type=checkbox] {
	684	+ margin: 1rem;
	685	+ /* border: 1px solid red; */
	686	+ transform: scale(1.5);
	687	+}
	688	+
	689	+.join-email-bt span {
	690	+ color: #898989;
	691	+ font-family: "Pretendard-Regular";
	692	+
	693	+}
	694	+
	695	+.join-end-bt {
	696	+ display: grid;
	697	+ grid-template-columns: 25% 73%;
	698	+ gap: 1rem;
	699	+ padding: 6rem 0rem 6rem 0rem;
	700	+}
	701	+
	702	+.join-end-bt button {
	703	+ padding: 2rem;
	704	+ cursor: pointer;
	705	+ border-radius: 1.2rem;
	706	+ font-size: 1.5rem;
	707	+ font-family: "Pretendard-Regular";
	708	+
	709	+}
	710	+
	711	+.join-end-bt button:nth-child(2) {
	712	+ background-color: #3f87f7;
	713	+ color: white;
	714	+
	715	+
	716	+}
	717	+
	718	+.login-info2 {
	719	+ width: 50%;
	720	+}
	721	+
	722	+.email-sec {
	723	+ display: grid;
	724	+
	725	+ grid-template-columns: 1fr 30px 1fr 1fr;
	726	+}
	727	+
	728	+.email-sec div {
	729	+ /* padding: 2rem; */
	730	+ padding: 1rem 0;
	731	+ font-size: 1.5rem;
	732	+ font-family: "Pretendard-Regular";
	733	+ /* border: 1px solid red; */
	734	+ text-align: center;
	735	+ gap: 1rem;
	736	+}
	737	+
	738	+.email-sec div:nth-child(2) {
	739	+ padding: 2rem 0;
	740	+}
	741	+
	742	+
	743	+
	744	+
	745	+@media all and (max-width:479px) {
	746	+ .join-logo h1 {
	747	+ font-size: 3rem;
	748	+ }
	749	+
	750	+ .join-b {
	751	+ /* border: 1px solid red; */
	752	+ width: 100%;
	753	+ }
	754	+
	755	+
	756	+
	757	+ .join-b-button {
	758	+ padding: 2rem;
	759	+ gap: 2rem;
	760	+ width: 100%;
	761	+ }
	762	+
	763	+ .login-info {
	764	+ width: 90%;
	765	+ }
	766	+
	767	+ .login-info2 {
	768	+ width: 90%;
	769	+ }
	770	+
	771	+ hr {
	772	+ display: none;
	773	+ }
	774	+
	775	+ .joinsub0 {
	776	+ grid-template-columns: 1fr;
	777	+ }
	778	+
	779	+ .joinsub {
	780	+ grid-template-columns: 1fr;
	781	+
	782	+ }
	783	+
	784	+ .join-sec6 {
	785	+
	786	+ grid-template-columns: 1fr;
	787	+
	788	+ }
	789	+
	790	+ .login-info-grid {
	791	+ grid-template-columns: 1fr;
	792	+ }
	793	+
	794	+ .join-sec0 {
	795	+ place-items: center;
	796	+ }
	797	+
	798	+ .joinsub0-1 {
	799	+ grid-template-columns: 1fr;
	800	+
	801	+ }
	802	+
	803	+ .j-s-3 input {
	804	+ height: 100%;
	805	+ }
	806	+
	807	+ .join-w1400 {
	808	+ width: 100%;
	809	+ padding: 1rem;
	810	+ }
	811	+
	812	+ .login-info h3,
	813	+ .login-info2 h3 {
	814	+ font-size: 1.8rem;
	815	+ text-align: center;
	816	+ }
	817	+
	818	+ section div {}
	819	+
	820	+ section div input {
	821	+ width: 100%;
	822	+ /* border: 1px solid red; */
	823	+ }
	824	+
	825	+ .join-email-bt {
	826	+ text-align: center;
	827	+ }
	828	+
	829	+ .email-sec {
	830	+ display: grid;
	831	+
	832	+ grid-template-columns: 1fr 30px 1fr 1fr;
	833	+ }
	834	+
	835	+ .email-sec div {
	836	+ /* padding: 2rem; */
	837	+ padding: 1rem 0;
	838	+ font-size: 1.5rem;
	839	+ font-family: "Pretendard-Regular";
	840	+ /* border: 1px solid red; */
	841	+ text-align: center;
	842	+ gap: 1rem;
	843	+ }
	844	+
	845	+ .email-sec div:nth-child(2) {
	846	+ padding: 2rem 0;
	847	+ }
	848	+
	849	+ .join-sec-sub {
	850	+ margin: 0 auto;
	851	+ }
	852	+
	853	+ .join-sec-1 span br {
	854	+ display: none;
	855	+ }
	856	+
	857	+ .j-s-3 {
	858	+ display: grid;
	859	+ gap: 0;
	860	+ height: 50rem;
	861	+ grid-template-rows: 4rem;
	862	+ }
	863	+
	864	+
	865	+}
	866	+
	867	+@media all and (min-width: 479px) and (max-width: 767px) {
	868	+ .join-logo h1 {
	869	+ font-size: 2.2rem;
	870	+ }
	871	+
	872	+ .login-info,
	873	+ .login-info2 {
	874	+ width: 100%;
	875	+ padding: 1rem;
	876	+ }
	877	+
	878	+ .join-b-button {
	879	+ padding: 4rem;
	880	+ /* gap: 1rem; */
	881	+ width: 100%;
	882	+ }
	883	+
	884	+ .login-info {
	885	+ width: 100%;
	886	+ }
	887	+
	888	+ .joinsub0 {
	889	+ grid-template-columns: 1fr;
	890	+ }
	891	+
	892	+ .joinsub {
	893	+ grid-template-columns: 1fr;
	894	+
	895	+ }
	896	+
	897	+ .join-sec6 {
	898	+
	899	+ grid-template-columns: 1fr;
	900	+
	901	+ }
	902	+
	903	+ .login-info-grid {
	904	+ grid-template-columns: 1fr;
	905	+ }
	906	+
	907	+ .join-sec0 {
	908	+ place-items: center;
	909	+ }
	910	+
	911	+ .joinsub0-1 {
	912	+ grid-template-columns: 1fr;
	913	+
	914	+ }
	915	+
	916	+ .j-s-3 input {
	917	+ height: 100%;
	918	+ }
	919	+
	920	+ .join-w1400 {
	921	+ width: 100%;
	922	+ padding: 1rem;
	923	+ }
	924	+
	925	+ .login-info h3,
	926	+ .login-info2 h3 {
	927	+ font-size: 1.8rem;
	928	+ text-align: center;
	929	+ }
	930	+
	931	+ section div {}
	932	+
	933	+ section div input {
	934	+ width: 100%;
	935	+ /* border: 1px solid red; */
	936	+ }
	937	+
	938	+ .join-email-bt {
	939	+ text-align: center;
	940	+ }
	941	+
	942	+ .email-sec {
	943	+ display: grid;
	944	+
	945	+ grid-template-columns: 1fr 30px 1fr 1fr;
	946	+ }
	947	+
	948	+ .email-sec div {
	949	+ /* padding: 2rem; */
	950	+ padding: 1rem 0;
	951	+ font-size: 1.5rem;
	952	+ font-family: "Pretendard-Regular";
	953	+ /* border: 1px solid red; */
	954	+ text-align: center;
	955	+ gap: 1rem;
	956	+ }
	957	+
	958	+ .email-sec div:nth-child(2) {
	959	+ padding: 2rem 0;
	960	+ }
	961	+
	962	+ .join-sec-sub {
	963	+ margin: 0 auto;
	964	+ }
	965	+
	966	+ .join-sec-1 span br {
	967	+ display: none;
	968	+ }
	969	+
	970	+ .j-s-3 {
	971	+ display: grid;
	972	+ gap: 0;
	973	+ height: 50rem;
	974	+ grid-template-rows: 4rem;
	975	+ }
	976	+}
	977	+
	978	+@media all and (min-width: 767px) and (max-width: 1023px) {
	979	+ .join-b-button {
	980	+ width: 80%;
	981	+ }
	982	+
	983	+ .login-info {
	984	+ width: 80%;
	985	+ padding: 3rem 0;
	986	+ }
	987	+
	988	+ .email-sec {
	989	+ width: 100%;
	990	+ display: grid;
	991	+ /* border: 1px solid red; */
	992	+
	993	+ grid-template-columns: 1fr 30px 1fr 1fr;
	994	+ }
	995	+
	996	+ .email-sec div {
	997	+ /* padding: 2rem; */
	998	+ padding: 1rem 0;
	999	+ font-size: 1.5rem;
	1000	+ font-family: "Pretendard-Regular";
	1001	+ /* border: 1px solid red; */
	1002	+ text-align: center;
	1003	+ gap: 1rem;
	1004	+ }
	1005	+
	1006	+ .email-sec div:nth-child(2) {
	1007	+ padding: 2rem 0;
	1008	+ }
	1009	+
	1010	+ .login-info2 {
	1011	+ width: 80%;
	1012	+ }
	1013	+
	1014	+ .join-w1400 {
	1015	+ width: 80%;
	1016	+ }
	1017	+}
	1018	+
	1019	+@media all and (min-width: 1023px) and (max-width: 1268px) {
	1020	+ .email-sec {
	1021	+ width: 100%;
	1022	+ display: grid;
	1023	+ /* border: 1px solid red; */
	1024	+
	1025	+ grid-template-columns: 1fr 30px 1fr 1fr;
	1026	+ }
	1027	+
	1028	+ .email-sec div {
	1029	+ /* padding: 2rem; */
	1030	+ padding: 1rem 0;
	1031	+ font-size: 1.5rem;
	1032	+ font-family: "Pretendard-Regular";
	1033	+ /* border: 1px solid red; */
	1034	+ text-align: center;
	1035	+ gap: 1rem;
	1036	+ }
	1037	+
	1038	+ .email-sec div:nth-child(2) {
	1039	+ padding: 2rem 0;
	1040	+ }
	1041	+
	1042	+ .login-info2 {
	1043	+ width: 50%;
	1044	+ }
	1045	+}
	1046	+</style>(No newline at end of file)

8ff46aa

d259db3

client/views/pages/user/login/Login.vue

--- client/views/pages/user/login/Login.vue

+++ client/views/pages/user/login/Login.vue


                 </div>
             </section>
             <section class="login-button">
-                <button>로그인</button>
+                <button @click="showDiv">로그인</button>
             </section>
         </div>
     </div>
+
+
+    <!-- 로그인 모달  회원가입 승인중일때 노출-->
+
+    <section class="login-modal" v-if="isVisible">
+        <div class="login-wrap">
+            <div>
+                <p>가입 승인 중인 회원입니다.</p>
+                <button @click="hideDiv">확인</button>
+            </div>
+        </div>
+    </section>
 </template>
 
 <script>
 export default {
     data() {
         return {
+            isVisible: false
         }
     },
     methods: {
 
+        showDiv: function () {
+            this.isVisible = true;
+        },
+        hideDiv: function () {
+            this.isVisible = false;
+        }
     },
     watch: {
 

 
 
 <style scoped>
+/* 모달창 css */
+.login-modal {
+    width: 100%;
+    height: 100%;
+    background-color: #33333324;
+    margin: 0 auto;
+    text-align: center;
+    padding: 3rem;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.login-wrap {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    padding: 4rem;
+    border-radius: 2rem;
+    background-color: #f9f9f9;
+    transform: translate(-50%, -50%);
+    /* margin: 0 auto; */
+    box-shadow: 2px 2px 5px #86868644;
+
+    width: 25%;
+}
+
+.login-wrap p {
+    font-size: 1.7rem;
+    font-family: "Pretendard-Regular";
+    padding: 3rem;
+}
+
+.login-wrap button {
+    padding: 1rem 3rem 1rem 3rem;
+    border-radius: 1rem;
+    background-color: #3f87f7;
+    color: white;
+    font-family: "Pretendard-Regular";
+
+}
+
+/* ----------------------------------- */
 .w1400 {
     overflow-y: hidden;
     margin: 0 auto;

     border-radius: 1.2rem;
     cursor: pointer;
 }
-@media all and (max-width:479px){
-.login-logo{
-    margin: 0 auto;
-    width: 90%;
-}
-.login-input-d div{
-    width: 90%;
-    margin: 0 auto;
-}
-.ID input,.PW input{
-    width: 100%;
-}
-.login-checkbox-i{
-    width: 90%;
-    margin: 0 auto;
-}
-.login-checkbox-b{
-    padding: 2rem;
-}
-.login-button{
-    width: 90%;
-    margin: 0 auto;
-}
-.login-button button{
-    width: 100%;
-}
+
+@media all and (max-width:479px) {
+    .login-logo {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+    .login-input-d div {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .ID input,
+    .PW input {
+        width: 100%;
+    }
+
+    .login-checkbox-i {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .login-checkbox-b {
+        padding: 2rem;
+    }
+
+    .login-button {
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .login-button button {
+        width: 100%;
+    }
 }
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -40,10 +40,11 @@
40	40	overflow-y: scroll;
41	41	}
42	42
43		-body,#root {
	43	+body,
	44	+#root {
44	45	width: 100%;
45	46	height: 100%;
46		- background-color: #f8f8f8;
	47	+ /* background-color: #f8f8f8; */
47	48	}
48	49
49	50	ul,

...	...	@@ -5,9 +5,11 @@
5	5	import Data from "../pages/user/Data/Data.vue";
6	6	import Login from "../pages/user/login/Login.vue";
7	7	import Join from "../pages/user/Join/Join.vue";
	8	+import Joinsub from "../pages/user/Join/Joinsub.vue";
8	9	import Introduction from "../pages/user/introduction/Introduction.vue";
9	10	import Technology from "../pages/user/Data/Technology.vue";
10	11	import Notice from "../pages/user/community/Notice.vue";
	12	+import News from "../pages/user/community/News.vue";
11	13	import Info from "../pages/user/mypage/Info.vue";
12	14	import Infosub from "../pages/user/mypage/Infosub.vue";
13	15	import Guide from "../pages/user/Data/Guide.vue";
...	...	@@ -23,12 +25,14 @@
23	25	{ path: "/Matching.page", name: "Matching", component: Matching },
24	26	{ path: "/Login.page", name: "Login", component: Login },
25	27	{ path: "/Join.page", name: "Join", component: Join },
	28	+ { path: "/Joinsub.page", name: "Joinsub", component: Joinsub },
26	29	{ path: "/Introduction.page", name: "Introduction", component: Introduction },
27	30	{ path: "/Technology.page", name: "Technology", component: Technology },
28	31	{ path: "/Notice.page", name: "Notice", component: Notice },
29	32	{ path: "/Info.page", name: "Info", component: Info },
30	33	{ path: "/Guide.page", name: "Guide", component: Guide },
31	34	{ path: "/Infosub.page", name: "Infosub", component: Infosub },
	35	+ { path: "/News.page", name: "News", component: News },
32	36	/* 관리자 */
33	37	{ path: "/adm.page", name: "AdminMain", component: AdminMain },
34	38	{ path: "/adm/user.page", name: "AdminUser", component: AdminUser },

...	...	@@ -35,20 +35,39 @@
35	35	</div>
36	36	</section>
37	37	<section class="login-button">
38		- <button>로그인</button>
	38	+ <button @click="showDiv">로그인</button>
39	39	</section>
40	40	</div>
41	41	</div>
	42	+
	43	+
	44	+ <!-- 로그인 모달 회원가입 승인중일때 노출-->
	45	+
	46	+ <section class="login-modal" v-if="isVisible">
	47	+ <div class="login-wrap">
	48	+ <div>
	49	+ <p>가입 승인 중인 회원입니다.</p>
	50	+ <button @click="hideDiv">확인</button>
	51	+ </div>
	52	+ </div>
	53	+ </section>
42	54	</template>
43	55
44	56	<script>
45	57	export default {
46	58	data() {
47	59	return {
	60	+ isVisible: false
48	61	}
49	62	},
50	63	methods: {
51	64
	65	+ showDiv: function () {
	66	+ this.isVisible = true;
	67	+ },
	68	+ hideDiv: function () {
	69	+ this.isVisible = false;
	70	+ }
52	71	},
53	72	watch: {
54	73
...	...	@@ -64,6 +83,49 @@
64	83
65	84
66	85	<style scoped>
	86	+/* 모달창 css */
	87	+.login-modal {
	88	+ width: 100%;
	89	+ height: 100%;
	90	+ background-color: #33333324;
	91	+ margin: 0 auto;
	92	+ text-align: center;
	93	+ padding: 3rem;
	94	+ position: fixed;
	95	+ top: 0;
	96	+ left: 0;
	97	+}
	98	+
	99	+.login-wrap {
	100	+ position: fixed;
	101	+ top: 50%;
	102	+ left: 50%;
	103	+ padding: 4rem;
	104	+ border-radius: 2rem;
	105	+ background-color: #f9f9f9;
	106	+ transform: translate(-50%, -50%);
	107	+ /* margin: 0 auto; */
	108	+ box-shadow: 2px 2px 5px #86868644;
	109	+
	110	+ width: 25%;
	111	+}
	112	+
	113	+.login-wrap p {
	114	+ font-size: 1.7rem;
	115	+ font-family: "Pretendard-Regular";
	116	+ padding: 3rem;
	117	+}
	118	+
	119	+.login-wrap button {
	120	+ padding: 1rem 3rem 1rem 3rem;
	121	+ border-radius: 1rem;
	122	+ background-color: #3f87f7;
	123	+ color: white;
	124	+ font-family: "Pretendard-Regular";
	125	+
	126	+}
	127	+
	128	+/* ----------------------------------- */
67	129	.w1400 {
68	130	overflow-y: hidden;
69	131	margin: 0 auto;
...	...	@@ -188,31 +250,39 @@
188	250	border-radius: 1.2rem;
189	251	cursor: pointer;
190	252	}
191		-@media all and (max-width:479px){
192		-.login-logo{
193		- margin: 0 auto;
194		- width: 90%;
195		-}
196		-.login-input-d div{
197		- width: 90%;
198		- margin: 0 auto;
199		-}
200		-.ID input,.PW input{
201		- width: 100%;
202		-}
203		-.login-checkbox-i{
204		- width: 90%;
205		- margin: 0 auto;
206		-}
207		-.login-checkbox-b{
208		- padding: 2rem;
209		-}
210		-.login-button{
211		- width: 90%;
212		- margin: 0 auto;
213		-}
214		-.login-button button{
215		- width: 100%;
216		-}
	253	+
	254	+@media all and (max-width:479px) {
	255	+ .login-logo {
	256	+ margin: 0 auto;
	257	+ width: 90%;
	258	+ }
	259	+
	260	+ .login-input-d div {
	261	+ width: 90%;
	262	+ margin: 0 auto;
	263	+ }
	264	+
	265	+ .ID input,
	266	+ .PW input {
	267	+ width: 100%;
	268	+ }
	269	+
	270	+ .login-checkbox-i {
	271	+ width: 90%;
	272	+ margin: 0 auto;
	273	+ }
	274	+
	275	+ .login-checkbox-b {
	276	+ padding: 2rem;
	277	+ }
	278	+
	279	+ .login-button {
	280	+ width: 90%;
	281	+ margin: 0 auto;
	282	+ }
	283	+
	284	+ .login-button button {
	285	+ width: 100%;
	286	+ }
217	287	}
218	288	</style> (No newline at end of file)

Delete comment