최정임
2023-07-03
230703 최정임 반응형 작업 및 핀 이미지 추가
@bbfec449d282181370b9e7069a2530f21452136e
--- client/resources/css/layout.css
+++ client/resources/css/layout.css
... | ... | @@ -58,7 +58,7 @@ |
| 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 |
|
--- client/resources/images/close.png
+++ client/resources/images/close.png
| Binary file is not shown |
+++ client/resources/images/close2.png
| Binary file is not shown |
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
... | ... | @@ -368,7 +368,7 @@ |
| 368 | 368 |
toggle(){
|
| 369 | 369 |
|
| 370 | 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'; |
|
| 371 |
+ this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close2.png?alt=media&token=801544fa-80dd-4dc5-98c2-099a2fdb7791'; |
|
| 372 | 372 |
} else {
|
| 373 | 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 | 374 |
} |
... | ... | @@ -629,7 +629,7 @@ |
| 629 | 629 |
.contenedor-menu2 a {
|
| 630 | 630 |
width: 100vw; |
| 631 | 631 |
text-align: center; |
| 632 |
- font-size: 20px; |
|
| 632 |
+ font-size: 18px; |
|
| 633 | 633 |
font-weight: 500; |
| 634 | 634 |
margin-top: 20px; |
| 635 | 635 |
margin-bottom: 20px; |
--- client/views/pages/main/IdFind.vue
+++ client/views/pages/main/IdFind.vue
... | ... | @@ -2,23 +2,42 @@ |
| 2 | 2 |
<div class="wrap"> |
| 3 | 3 |
<div> |
| 4 | 4 |
<div> |
| 5 |
- <h2 class="page-title">Login</h2> |
|
| 5 |
+ <h2 class="page-title">아이디 찾기</h2> |
|
| 6 | 6 |
</div> |
| 7 |
- <hr class="margin"> |
|
| 7 |
+ <hr class="margin" /> |
|
| 8 | 8 |
<div class="form-wrap"> |
| 9 | 9 |
<form action=""> |
| 10 | 10 |
<div class="flex m-b"> |
| 11 | 11 |
<span>이름 : </span> |
| 12 |
- <input type="text" name="" id="" placeholder="이름"> |
|
| 12 |
+ <input type="text" name="" id="" placeholder="이름" /> |
|
| 13 | 13 |
</div> |
| 14 | 14 |
<div class="flex m-b"> |
| 15 | 15 |
<span>이메일 : </span> |
| 16 |
- <input type="password" name="" id="" placeholder="e-mail"> |
|
| 16 |
+ <input type="email" name="" id="" placeholder="e-mail" /> |
|
| 17 | 17 |
</div> |
| 18 |
- |
|
| 19 | 18 |
|
| 20 | 19 |
<div class="btn-wrap"> |
| 21 |
- <button type="button" class="green-btn m-r" @click="modal_1 = true">찾기</button> |
|
| 20 |
+ <button type="button" class="green-btn m-r" @click="modal_1 = true"> |
|
| 21 |
+ 찾기 |
|
| 22 |
+ </button> |
|
| 23 |
+ <div class="modal-wrap" v-if="modal_1 == true"> |
|
| 24 |
+ <div class="modal-bg"></div> |
|
| 25 |
+ <div class="modal"> |
|
| 26 |
+ <button |
|
| 27 |
+ type="button" |
|
| 28 |
+ class="gray-btn" |
|
| 29 |
+ @click="modal_1 = false" |
|
| 30 |
+ > |
|
| 31 |
+ <img |
|
| 32 |
+ src="../../../resources/images/close.png" |
|
| 33 |
+ alt="" |
|
| 34 |
+ /> |
|
| 35 |
+ </button> |
|
| 36 |
+ <div class="modalmain"> |
|
| 37 |
+ |
|
| 38 |
+ </div> |
|
| 39 |
+ </div> |
|
| 40 |
+ </div> |
|
| 22 | 41 |
<router-link to=""> |
| 23 | 42 |
<span class="btn-2 gray-btn">취소</span> |
| 24 | 43 |
</router-link> |
... | ... | @@ -27,8 +46,6 @@ |
| 27 | 46 |
</div> |
| 28 | 47 |
</div> |
| 29 | 48 |
</div> |
| 30 |
- |
|
| 31 |
- |
|
| 32 | 49 |
</template> |
| 33 | 50 |
|
| 34 | 51 |
<script> |
... | ... | @@ -48,8 +65,23 @@ |
| 48 | 65 |
</script> |
| 49 | 66 |
|
| 50 | 67 |
<style scoped> |
| 51 |
-.btn-wrap span{font-size: 13px; margin-top: 2rem;}
|
|
| 52 |
-.loginbtn{padding: 1rem 0; margin-bottom: 1rem;}
|
|
| 68 |
+@media all and (max-width: 479px) {
|
|
| 69 |
+ .modal{padding: 1rem;}
|
|
| 70 |
+ .form-wrap input{}
|
|
| 71 |
+ .form-wrap{ width: -webkit-fill-available !important;}
|
|
| 72 |
+ .wrap {
|
|
| 73 |
+ width: -webkit-fill-available !important; |
|
| 74 |
+ padding: 0 1rem; |
|
| 75 |
+ } |
|
| 76 |
+} |
|
| 77 |
+.btn-wrap span {
|
|
| 78 |
+ font-size: 13px; |
|
| 79 |
+ margin-top: 2rem; |
|
| 80 |
+} |
|
| 81 |
+.loginbtn {
|
|
| 82 |
+ padding: 1rem 0; |
|
| 83 |
+ margin-bottom: 1rem; |
|
| 84 |
+} |
|
| 53 | 85 |
.wrap {
|
| 54 | 86 |
width: 155rem; |
| 55 | 87 |
margin: 100px auto; |
... | ... | @@ -111,7 +143,6 @@ |
| 111 | 143 |
color: #000; |
| 112 | 144 |
} |
| 113 | 145 |
|
| 114 |
- |
|
| 115 | 146 |
.form-wrap .flex span {
|
| 116 | 147 |
display: inline-block; |
| 117 | 148 |
width: 10rem; |
... | ... | @@ -151,7 +182,7 @@ |
| 151 | 182 |
position: absolute; |
| 152 | 183 |
width: 100%; |
| 153 | 184 |
height: 100%; |
| 154 |
- background-color: rgba(0, 0, 0, .6); |
|
| 185 |
+ background-color: rgba(0, 0, 0, 0.6); |
|
| 155 | 186 |
} |
| 156 | 187 |
|
| 157 | 188 |
.modal {
|
... | ... | @@ -174,4 +205,4 @@ |
| 174 | 205 |
.txt-point {
|
| 175 | 206 |
color: #13833b; |
| 176 | 207 |
} |
| 177 |
-</style>(No newline at end of file) |
|
| 208 |
+</style> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?