Commit @4c606ca4b70f5955841e5d22007188e46aef9625

mycoms 2024-03-08

240308 김하영 비밀번호 변경 버튼

@4c606ca4b70f5955841e5d22007188e46aef9625

c3142ab

4c606ca

client/resources/css/component.css

--- client/resources/css/component.css

+++ client/resources/css/component.css


     top: 0px;
     left: 0px;
     flex-wrap: nowrap;
-    padding-top: 64.5px;
+    padding-top: 58.5px;
     font-family: 'Pretendard';
     background-color: var(--white);
 }

 }
 
 .box-overflow {
-    height: 320px;
+    height: 100%;
+    min-height: 320px; 
+    max-height: 650px;
     overflow-y: auto;
 }
 

c3142ab

4c606ca

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


     width: 100%;
     height: 100%;
     z-index: 3;
-    background-color: #fff;
+    background-color: var(--white);
 
 }
-.login-box p{
+
+.login-box p {
     font-size: 1.5rem;
     color: var(--navbarblue);
     font-weight: 600;
 }
-.login-wrap{
+
+.login-wrap {
     gap: 30px;
 }
-.login-wrap h1{
+
+.login-wrap h1 {
     font-size: 4.5rem;
     text-align: center;
     font-weight: 900;
     color: var(--navbarblue);
 }
+
 .login-content {
     /* min-width: 400px;
     max-width: 400px; */

     top: 50%;
     left: 50%;
     margin: 0 auto;
-    transform: translate(-50% ,-45%);
+    transform: translate(-50%, -45%);
     box-shadow: 0 0 20px #ddd;
 }
-.login-user input{
+
+.login-user input {
     background: url(../img/component/login-user.png) no-repeat;
     background-size: 20px;
     background-position: left;
     padding-left: 30px;
-    border-top:0px;
-    border-left:0px;
-    border-right:0px;
+    border-top: 0px;
+    border-left: 0px;
+    border-right: 0px;
     border-radius: 0px;
     font-size: 1.6rem;
     width: 100%;
     color: var(--dark);
 }
-.login-pw input{
+
+.login-pw input {
     background: url(../img/component/login-pw.png) no-repeat;
     background-size: 20px;
     background-position: left;
     padding-left: 30px;
-    border-top:0px;
-    border-left:0px;
-    border-right:0px;
+    border-top: 0px;
+    border-left: 0px;
+    border-right: 0px;
     border-radius: 0px;
     font-size: 1.6rem;
     width: 100%;
     color: var(--dark);
 }
-.button-wrap label{
+
+.button-wrap label {
     padding: 0px 10px;
     font-size: 1.2rem;
 }
-.login-imgbox{
+
+.login-imgbox {
     width: 482px;
     height: 360px;
     border-radius: 10px;
     overflow: hidden;
-    
+
     box-shadow: 1px 1px 5px #0000002f;
 }
 
-.login-btn{
-    padding: 20px ;
+.login-btn {
+    padding: 20px;
 }
+
 .login-logo {
     background: url(../img/common/header-logo.png) no-repeat;
     width: 100%;
     height: 30px;
     background-size: contain;
     background-position: right;
+}
+
+.pwchange-modal {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: var(--white);
+}
+.pwchange-modal h1{
+    font-size: 2rem;
+    text-align: left;
+}
+.pwchange-header button{
+    background: url(../img/component/chevron-left-solid.svg) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 30px;
+    height: 30px;
+}
+.pwchange-user input ,.pwchange-pw input {
+    background: url(../img/component/pwchange-icon.png) no-repeat;
+    background-size: 20px;
+    background-position: right;
+    padding-left: 10px;
+    border-top: 0px;
+    border-left: 0px;
+    border-right: 0px;
+    border-radius: 0px;
+    font-size: 1.6rem;
+    width: 100%;
+    color: var(--dark);
 }
 
 

 }
 
 
-.topmenu-wrap p{
+.topmenu-wrap p {
     position: relative;
     padding: 1px 5px;
     font-family: 'Pretendard';
     font-weight: 500;
     /* height: px; */
     color: var(--white);
-    font-size: 1.5rem ;
+    font-size: 1.5rem;
 }
+
 .topmenu-wrap p.active {
     width: 100px;
     background-color: white;

 
 .list-table {
     background-color: var(--white);
-    border-left: 1px solid var(--borderlightgray);    
+    border-left: 1px solid var(--borderlightgray);
 }
 
 .code-area {

     background-color: var(--tableblue);
     border-radius: 10px;
 }
-.code-area th{
+
+.code-area th {
     white-space: nowrap;
-padding: 7px 10px !important;}
+    padding: 7px 10px !important;
+}
 
 .code-area td {
 

 .table-border th {
     border: 1px solid var(--borderlightgray);
 }
-.box-overflow{
+
+.box-overflow {
     border-top: 1px solid var(--borderlightgray);
 }
+
 .box-overflow thead {
     position: sticky;
     top: -1px;

     border-right: 1px solid var(--borderlightgray);
 
 }
-.table-header{
-    background-color: var(--tableblue); 
+
+.table-header {
+    background-color: var(--tableblue);
     color: var(--navbarblue);
 }
 

     margin: 0 auto;
 }
 
-.section-wrap{
+.section-wrap {
     background-color: var(--tableblue);
     border: 1px solid red;
 }
-.section-wrap table{
+
+.section-wrap table {
     height: 300px;
     overflow-y: auto;
-    
+
 }
 
-.Bi002-table{
+.Bi002-table {
     text-align: left;
 }
-.Bi002-table tr{
+
+.Bi002-table tr {
     padding: 2rem;
 }
 
 
-.input-box{
+.input-box {
     flex-wrap: nowrap;
     gap: 1px;
 }
-.input-box input{
+
+.input-box input {
     width: 100%;
-}
+}

4c606ca

client/resources/img/component/chevron-left-solid.svg (added)

+++ client/resources/img/component/chevron-left-solid.svg

@@ -0,0 +1,1 @@

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#005aab" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>(파일 끝에 줄바꿈 문자 없음)

4c606ca

client/resources/img/component/pwchange-icon.png (Binary) (added)

+++ client/resources/img/component/pwchange-icon.png

Binary file is not shown

c3142ab

4c606ca

client/views/pages/AccountingManagement/ChitManagement/Cm002.vue

--- client/views/pages/AccountingManagement/ChitManagement/Cm002.vue

+++ client/views/pages/AccountingManagement/ChitManagement/Cm002.vue

...	...	@@ -173,11 +173,11 @@
173	173
174	174	</tbody>
175	175	</table>
176		- </div>
177		- <div class="button-wrap flex justify-end mb2">
178		- <button>전표 전송</button>
179		- <button style="border: 1px solid var(--red); color: var(--red);">전표 취소</button>
180		- <button>G/W 전송</button>
	176	+ <div class="button-wrap flex justify-end mb2">
	177	+ <button>전표 전송</button>
	178	+ <button style="border: 1px solid var(--red); color: var(--red);">전표 취소</button>
	179	+ <button>G/W 전송</button>
	180	+ </div>
181	181	</div>
182	182	</div>
183	183	<div class=" pd1 table-area content-wrap" style="width: 80%;">
...	...	@@ -229,7 +229,7 @@
229	229
230	230
231	231	<template v-for="(listNam, index) in listNam">
232		- <tr class="table-header table-border">
	232	+ <tr class=" table-border">
233	233	<td rowspan="2">{{ listNam.no }}</td>
234	234	<td rowspan="2">{{ listNam.name }}</td>
235	235	<td>{{ listNam.list1 }}</td>
...	...	@@ -241,7 +241,7 @@
241	241	<td rowspan="2">{{ listNam.list7 }}</td>
242	242	<td rowspan="2">{{ listNam.list8 }}</td>
243	243	</tr>
244		- <tr class="table-header table-border">
	244	+ <tr class="table-border">
245	245	<td>{{ listNam.list9 }}</td>
246	246	<td>{{ listNam.list10 }}</td>
247	247	<td>{{ listNam.list11 }}</td>
...	...	@@ -455,6 +455,10 @@
455	455	{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
456	456	{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
457	457	{ no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
	458	+ { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
	459	+ { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
	460	+ { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
	461	+ { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
458	462
459	463
460	464	]
...	...	@@ -484,6 +488,8 @@
484	488
485	489	<style scoped>
486	490
487		-
	491	+table td,table td{
	492	+ text-align: center;
	493	+}
488	494
489	495	</style> (파일 끝에 줄바꿈 문자 없음)

c3142ab

4c606ca

client/views/pages/login/Login.vue

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

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


                                 <label for="a">ID 저장하기</label>
 
                             </div>
-                            <button class="small-btn ">비밀번호 변경하기</button>
+                            <button class="small-btn " @click="pwchange">비밀번호 변경하기</button>
                         </div>
                         <button class="blue-btn large-btn "
                             style="padding: 10px !important; font-size: 1.5rem !important;" @click="login">로그인</button>
+                    </div>
+                    <!-- 비밀번호 변경 페이지 -->
+                    <div class="pwchange-modal pt10" v-show="isActive" >
+                        <div class="flex justify-between pwchange-header">
+                            <h1 class="mt1 mb4">비밀번호 변경</h1>
+                            <button @click="pwChangeBtn"></button>
+                        </div>
+                        <div class="login-box  ">
+                            <div class="pwchange-user mb2">
+                                <p>비밀번호 변경</p>
+                                <input type="text ">
+                            </div>
+                            <div class="pwchange-pw mb2">
+                                <p>비밀번호 확인</p>
+                                <input type="password">
+                            </div>
+
+                            <button class="blue-btn large-btn "
+                                style="padding: 10px !important; font-size: 1.5rem !important;"
+                                @click="pwChangeBtn">비밀번호 변경하기</button>
+                        </div>
                     </div>
                 </div>
             </div>

     data() {
         return {
             imagePreview: null,
+            isActive: false,
+
         }
 
     },

                 reader.readAsDataURL(file);
             }
         },
+        pwchange() {
+            this.isActive = true;
+        },
+        pwChangeBtn(){
+            this.isActive = false;
+        }
 
     },
     watch: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -25,7 +25,7 @@
25	25	top: 0px;
26	26	left: 0px;
27	27	flex-wrap: nowrap;
28		- padding-top: 64.5px;
	28	+ padding-top: 58.5px;
29	29	font-family: 'Pretendard';
30	30	background-color: var(--white);
31	31	}
...	...	@@ -813,7 +813,9 @@
813	813	}
814	814
815	815	.box-overflow {
816		- height: 320px;
	816	+ height: 100%;
	817	+ min-height: 320px;
	818	+ max-height: 650px;
817	819	overflow-y: auto;
818	820	}
819	821

...	...	@@ -5,23 +5,27 @@
5	5	width: 100%;
6	6	height: 100%;
7	7	z-index: 3;
8		- background-color: #fff;
	8	+ background-color: var(--white);
9	9
10	10	}
11		-.login-box p{
	11	+
	12	+.login-box p {
12	13	font-size: 1.5rem;
13	14	color: var(--navbarblue);
14	15	font-weight: 600;
15	16	}
16		-.login-wrap{
	17	+
	18	+.login-wrap {
17	19	gap: 30px;
18	20	}
19		-.login-wrap h1{
	21	+
	22	+.login-wrap h1 {
20	23	font-size: 4.5rem;
21	24	text-align: center;
22	25	font-weight: 900;
23	26	color: var(--navbarblue);
24	27	}
	28	+
25	29	.login-content {
26	30	/* min-width: 400px;
27	31	max-width: 400px; */
...	...	@@ -32,57 +36,93 @@
32	36	top: 50%;
33	37	left: 50%;
34	38	margin: 0 auto;
35		- transform: translate(-50% ,-45%);
	39	+ transform: translate(-50%, -45%);
36	40	box-shadow: 0 0 20px #ddd;
37	41	}
38		-.login-user input{
	42	+
	43	+.login-user input {
39	44	background: url(../img/component/login-user.png) no-repeat;
40	45	background-size: 20px;
41	46	background-position: left;
42	47	padding-left: 30px;
43		- border-top:0px;
44		- border-left:0px;
45		- border-right:0px;
	48	+ border-top: 0px;
	49	+ border-left: 0px;
	50	+ border-right: 0px;
46	51	border-radius: 0px;
47	52	font-size: 1.6rem;
48	53	width: 100%;
49	54	color: var(--dark);
50	55	}
51		-.login-pw input{
	56	+
	57	+.login-pw input {
52	58	background: url(../img/component/login-pw.png) no-repeat;
53	59	background-size: 20px;
54	60	background-position: left;
55	61	padding-left: 30px;
56		- border-top:0px;
57		- border-left:0px;
58		- border-right:0px;
	62	+ border-top: 0px;
	63	+ border-left: 0px;
	64	+ border-right: 0px;
59	65	border-radius: 0px;
60	66	font-size: 1.6rem;
61	67	width: 100%;
62	68	color: var(--dark);
63	69	}
64		-.button-wrap label{
	70	+
	71	+.button-wrap label {
65	72	padding: 0px 10px;
66	73	font-size: 1.2rem;
67	74	}
68		-.login-imgbox{
	75	+
	76	+.login-imgbox {
69	77	width: 482px;
70	78	height: 360px;
71	79	border-radius: 10px;
72	80	overflow: hidden;
73		-
	81	+
74	82	box-shadow: 1px 1px 5px #0000002f;
75	83	}
76	84
77		-.login-btn{
78		- padding: 20px ;
	85	+.login-btn {
	86	+ padding: 20px;
79	87	}
	88	+
80	89	.login-logo {
81	90	background: url(../img/common/header-logo.png) no-repeat;
82	91	width: 100%;
83	92	height: 30px;
84	93	background-size: contain;
85	94	background-position: right;
	95	+}
	96	+
	97	+.pwchange-modal {
	98	+ position: absolute;
	99	+ width: 100%;
	100	+ height: 100%;
	101	+ background-color: var(--white);
	102	+}
	103	+.pwchange-modal h1{
	104	+ font-size: 2rem;
	105	+ text-align: left;
	106	+}
	107	+.pwchange-header button{
	108	+ background: url(../img/component/chevron-left-solid.svg) no-repeat;
	109	+ background-size: contain;
	110	+ background-position: center;
	111	+ width: 30px;
	112	+ height: 30px;
	113	+}
	114	+.pwchange-user input ,.pwchange-pw input {
	115	+ background: url(../img/component/pwchange-icon.png) no-repeat;
	116	+ background-size: 20px;
	117	+ background-position: right;
	118	+ padding-left: 10px;
	119	+ border-top: 0px;
	120	+ border-left: 0px;
	121	+ border-right: 0px;
	122	+ border-radius: 0px;
	123	+ font-size: 1.6rem;
	124	+ width: 100%;
	125	+ color: var(--dark);
86	126	}
87	127
88	128
...	...	@@ -133,15 +173,16 @@
133	173	}
134	174
135	175
136		-.topmenu-wrap p{
	176	+.topmenu-wrap p {
137	177	position: relative;
138	178	padding: 1px 5px;
139	179	font-family: 'Pretendard';
140	180	font-weight: 500;
141	181	/* height: px; */
142	182	color: var(--white);
143		- font-size: 1.5rem ;
	183	+ font-size: 1.5rem;
144	184	}
	185	+
145	186	.topmenu-wrap p.active {
146	187	width: 100px;
147	188	background-color: white;
...	...	@@ -253,7 +294,7 @@
253	294
254	295	.list-table {
255	296	background-color: var(--white);
256		- border-left: 1px solid var(--borderlightgray);
	297	+ border-left: 1px solid var(--borderlightgray);
257	298	}
258	299
259	300	.code-area {
...	...	@@ -261,9 +302,11 @@
261	302	background-color: var(--tableblue);
262	303	border-radius: 10px;
263	304	}
264		-.code-area th{
	305	+
	306	+.code-area th {
265	307	white-space: nowrap;
266		-padding: 7px 10px !important;}
	308	+ padding: 7px 10px !important;
	309	+}
267	310
268	311	.code-area td {
269	312
...	...	@@ -305,9 +348,11 @@
305	348	.table-border th {
306	349	border: 1px solid var(--borderlightgray);
307	350	}
308		-.box-overflow{
	351	+
	352	+.box-overflow {
309	353	border-top: 1px solid var(--borderlightgray);
310	354	}
	355	+
311	356	.box-overflow thead {
312	357	position: sticky;
313	358	top: -1px;
...	...	@@ -361,8 +406,9 @@
361	406	border-right: 1px solid var(--borderlightgray);
362	407
363	408	}
364		-.table-header{
365		- background-color: var(--tableblue);
	409	+
	410	+.table-header {
	411	+ background-color: var(--tableblue);
366	412	color: var(--navbarblue);
367	413	}
368	414
...	...	@@ -395,28 +441,31 @@
395	441	margin: 0 auto;
396	442	}
397	443
398		-.section-wrap{
	444	+.section-wrap {
399	445	background-color: var(--tableblue);
400	446	border: 1px solid red;
401	447	}
402		-.section-wrap table{
	448	+
	449	+.section-wrap table {
403	450	height: 300px;
404	451	overflow-y: auto;
405		-
	452	+
406	453	}
407	454
408		-.Bi002-table{
	455	+.Bi002-table {
409	456	text-align: left;
410	457	}
411		-.Bi002-table tr{
	458	+
	459	+.Bi002-table tr {
412	460	padding: 2rem;
413	461	}
414	462
415	463
416		-.input-box{
	464	+.input-box {
417	465	flex-wrap: nowrap;
418	466	gap: 1px;
419	467	}
420		-.input-box input{
	468	+
	469	+.input-box input {
421	470	width: 100%;
422		-}
	471	+} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -32,10 +32,31 @@
32	32	<label for="a">ID 저장하기</label>
33	33
34	34	</div>
35		- <button class="small-btn ">비밀번호 변경하기</button>
	35	+ <button class="small-btn " @click="pwchange">비밀번호 변경하기</button>
36	36	</div>
37	37	<button class="blue-btn large-btn "
38	38	style="padding: 10px !important; font-size: 1.5rem !important;" @click="login">로그인</button>
	39	+ </div>
	40	+ <!-- 비밀번호 변경 페이지 -->
	41	+ <div class="pwchange-modal pt10" v-show="isActive" >
	42	+ <div class="flex justify-between pwchange-header">
	43	+ <h1 class="mt1 mb4">비밀번호 변경</h1>
	44	+ <button @click="pwChangeBtn"></button>
	45	+ </div>
	46	+ <div class="login-box ">
	47	+ <div class="pwchange-user mb2">
	48	+ <p>비밀번호 변경</p>
	49	+ <input type="text ">
	50	+ </div>
	51	+ <div class="pwchange-pw mb2">
	52	+ <p>비밀번호 확인</p>
	53	+ <input type="password">
	54	+ </div>
	55	+
	56	+ <button class="blue-btn large-btn "
	57	+ style="padding: 10px !important; font-size: 1.5rem !important;"
	58	+ @click="pwChangeBtn">비밀번호 변경하기</button>
	59	+ </div>
39	60	</div>
40	61	</div>
41	62	</div>
...	...	@@ -54,6 +75,8 @@
54	75	data() {
55	76	return {
56	77	imagePreview: null,
	78	+ isActive: false,
	79	+
57	80	}
58	81
59	82	},
...	...	@@ -71,6 +94,12 @@
71	94	reader.readAsDataURL(file);
72	95	}
73	96	},
	97	+ pwchange() {
	98	+ this.isActive = true;
	99	+ },
	100	+ pwChangeBtn(){
	101	+ this.isActive = false;
	102	+ }
74	103
75	104	},
76	105	watch: {

Delete comment