[jichoi]
08-06
240806 최정임
@9bf9ee2dcd9e79108ba3995a41a06f858ea642ac
--- client/resources/css/common.css
+++ client/resources/css/common.css
... | ... | @@ -767,10 +767,6 @@ |
| 767 | 767 |
background-color: #aaa; |
| 768 | 768 |
} |
| 769 | 769 |
|
| 770 |
-.close-btn {
|
|
| 771 |
- color: #d6def6; |
|
| 772 |
-} |
|
| 773 |
- |
|
| 774 | 770 |
.style-btn {
|
| 775 | 771 |
border: 1px solid #eee; |
| 776 | 772 |
border-radius: 3px; |
... | ... | @@ -950,7 +946,7 @@ |
| 950 | 946 |
-moz-border-radius: 50%; |
| 951 | 947 |
border-radius: 50%; |
| 952 | 948 |
border: 3px solid #ffffff; |
| 953 |
- accent-color: #00A8BA; |
|
| 949 |
+ accent-color: #ffba08; |
|
| 954 | 950 |
} |
| 955 | 951 |
/* Global CSS */ |
| 956 | 952 |
fieldset {
|
... | ... | @@ -967,9 +963,9 @@ |
| 967 | 963 |
box-sizing: border-box; |
| 968 | 964 |
} |
| 969 | 965 |
.ui-checkbox {
|
| 970 |
- --primary-color: #00A8BA; |
|
| 966 |
+ --primary-color: #ffba08; |
|
| 971 | 967 |
--secondary-color: #fff; |
| 972 |
- --primary-hover-color: #00A8BA; |
|
| 968 |
+ --primary-hover-color: #ffba08; |
|
| 973 | 969 |
/* checkbox */ |
| 974 | 970 |
--checkbox-diameter: 22px; |
| 975 | 971 |
--checkbox-border-radius: 3px; |
... | ... | @@ -1069,4 +1065,91 @@ |
| 1069 | 1065 |
opacity: 1; |
| 1070 | 1066 |
} |
| 1071 | 1067 |
|
| 1072 |
-(파일 끝에 줄바꿈 문자 없음) |
|
| 1068 |
+ |
|
| 1069 |
+input.borderx {
|
|
| 1070 |
+ border: none; |
|
| 1071 |
+ } |
|
| 1072 |
+ |
|
| 1073 |
+ .underline {
|
|
| 1074 |
+ text-decoration: underline; |
|
| 1075 |
+ } |
|
| 1076 |
+ .bd-bt{border-bottom:#FFBA08 solid 2px ; min-width: 66px;
|
|
| 1077 |
+ width: max-content; } |
|
| 1078 |
+ hr {
|
|
| 1079 |
+ color: #C6C6C6; |
|
| 1080 |
+ margin: 20px 0; |
|
| 1081 |
+ } |
|
| 1082 |
+ em{ font-style: normal;}
|
|
| 1083 |
+ em.yellow{color: #FFBA08;}
|
|
| 1084 |
+ em.green{color: #00B204; }
|
|
| 1085 |
+ em.gray{color: #75767A; }
|
|
| 1086 |
+ em.yellow-bg{background-color: #FFBA08; }
|
|
| 1087 |
+ input.yellow-bd{border:#FFBA08 solid 2px ; border-radius: 10px; padding: 20px; font-size: 24px; font-family: 'ONEMobileOTF-Regular';}
|
|
| 1088 |
+ |
|
| 1089 |
+ .blue-c{border: #2948FF solid 5px; width: 30px; height: 30px; border-radius: 50px;}
|
|
| 1090 |
+ |
|
| 1091 |
+ .title-box .title {
|
|
| 1092 |
+ font-size: 32px; |
|
| 1093 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 1094 |
+ } |
|
| 1095 |
+ |
|
| 1096 |
+ .title1 {
|
|
| 1097 |
+ font-size: 24px !important; |
|
| 1098 |
+ font-weight: bold; |
|
| 1099 |
+ width: max-content; |
|
| 1100 |
+ } |
|
| 1101 |
+ .title2 {
|
|
| 1102 |
+ font-size: 20px !important; |
|
| 1103 |
+ font-weight: bold; |
|
| 1104 |
+ font-family: 'ONEMobileOTF-Regular'; |
|
| 1105 |
+ } |
|
| 1106 |
+ .title3 {
|
|
| 1107 |
+ font-size: 64px; |
|
| 1108 |
+ font-family: 'Pretendard-ExtraBold'; |
|
| 1109 |
+ } |
|
| 1110 |
+ .title4 {
|
|
| 1111 |
+ font-size: 31px; |
|
| 1112 |
+ font-weight: bold; |
|
| 1113 |
+ } |
|
| 1114 |
+ .title5{
|
|
| 1115 |
+ font-size: 36px; |
|
| 1116 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 1117 |
+ } |
|
| 1118 |
+ |
|
| 1119 |
+ |
|
| 1120 |
+ .title-box .subtitle {
|
|
| 1121 |
+ font-size: 16px; |
|
| 1122 |
+ background-color: #441E03; |
|
| 1123 |
+ color: #fff; |
|
| 1124 |
+ padding: 5px 15px; |
|
| 1125 |
+ width: fit-content; |
|
| 1126 |
+ border-radius: 20px; |
|
| 1127 |
+ display: inline-block; |
|
| 1128 |
+ font-family: 'ONEMobileOTF-Bold'; |
|
| 1129 |
+ } |
|
| 1130 |
+ |
|
| 1131 |
+ .title-box .subtitle2{
|
|
| 1132 |
+ padding-left: 60px; |
|
| 1133 |
+ font-size: 28px; |
|
| 1134 |
+ } |
|
| 1135 |
+ .subtitle3 {
|
|
| 1136 |
+ font-size: 42px; |
|
| 1137 |
+ font-weight: bold; |
|
| 1138 |
+ color: #464749; |
|
| 1139 |
+ font-family: 'Pretendard-Light'; |
|
| 1140 |
+ } |
|
| 1141 |
+ |
|
| 1142 |
+ |
|
| 1143 |
+ |
|
| 1144 |
+ input[type="radio"] {
|
|
| 1145 |
+ display: inline-block; |
|
| 1146 |
+ width: 18px !important; |
|
| 1147 |
+ height: 18px; |
|
| 1148 |
+ margin: -2px 10px 0 0; |
|
| 1149 |
+ vertical-align: middle; |
|
| 1150 |
+ cursor: pointer; |
|
| 1151 |
+ -moz-border-radius: 50%; |
|
| 1152 |
+ border-radius: 50%; |
|
| 1153 |
+ border: 3px solid #ffffff; |
|
| 1154 |
+ accent-color: #ffba08; |
|
| 1155 |
+}(파일 끝에 줄바꿈 문자 없음) |
--- client/resources/css/reset.css
+++ client/resources/css/reset.css
... | ... | @@ -77,24 +77,39 @@ |
| 77 | 77 |
font-size: 10px; |
| 78 | 78 |
color: #2E2F30; |
| 79 | 79 |
font-family: 'ONEMobileOTF-Regular'; |
| 80 |
+ |
|
| 80 | 81 |
} |
| 81 | 82 |
html, |
| 82 |
-body{height: 100%}
|
|
| 83 |
+body{height: 100%; background-color: #eaedf4;}
|
|
| 83 | 84 |
body{position:relative;text-align: left; overflow-x: hidden; width: 1920px;}
|
| 84 |
-::-webkit-scrollbar {width: 10px; }
|
|
| 85 |
+::-webkit-scrollbar {width: 10px; height: 10px;}
|
|
| 85 | 86 |
::-webkit-scrollbar-track {border-radius: 5px;background-color: #EAEDF4;}
|
| 86 | 87 |
::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #FFBA08;}
|
| 87 |
-#root{padding: 15px 60px 90px 60px;
|
|
| 88 |
- height: 920px; |
|
| 89 |
- background-color: #eaedf4;} |
|
| 88 |
+#root, #app{
|
|
| 89 |
+ height: 100%; |
|
| 90 |
+ } |
|
| 90 | 91 |
input, select, span,p, label {
|
| 91 | 92 |
font-size: 16px; |
| 92 | 93 |
} |
| 93 | 94 |
input::placeholder{color: #8C8E92;}
|
| 95 |
+input[type="text"]{ padding:10px 20px; width: 100%; }
|
|
| 94 | 96 |
|
| 97 |
+ |
|
| 95 | 98 |
button{
|
| 96 | 99 |
border: none; |
| 97 | 100 |
background-color: transparent; |
| 98 | 101 |
cursor: pointer; |
| 99 | 102 |
} |
| 100 |
-textarea{resize: none; border: 0; outline: 0; font-size: 20px; font-family: 'ONEMobileOTF-Regular';} (파일 끝에 줄바꿈 문자 없음)
|
|
| 103 |
+textarea{resize: none; border: 0; outline: 0; font-size: 20px; font-family: 'ONEMobileOTF-Regular';}
|
|
| 104 |
+ |
|
| 105 |
+a{text-decoration: none; color: #2E2F30;}
|
|
| 106 |
+ |
|
| 107 |
+table {
|
|
| 108 |
+ font-size: 20px; |
|
| 109 |
+ width: 100%; |
|
| 110 |
+ border-collapse: collapse; |
|
| 111 |
+ table-layout: fixed; |
|
| 112 |
+border: 0;} |
|
| 113 |
+thead{background-color: #eaedf4;}
|
|
| 114 |
+tbody tr{border-bottom: #eaedf4 1px solid; cursor: pointer;}
|
|
| 115 |
+td{padding: 10px ; text-align: center;} (파일 끝에 줄바꿈 문자 없음)
|
--- client/resources/css/style.css
+++ client/resources/css/style.css
... | ... | @@ -1,20 +1,36 @@ |
| 1 |
+/* 회원가입 */ |
|
| 2 |
+.join-box{width: 800px; margin: 0 auto;}
|
|
| 3 |
+.join-box input[type="radio"] {
|
|
| 4 |
+ display: inline-block; |
|
| 5 |
+ width: 24px !important; |
|
| 6 |
+ height: 24px; |
|
| 7 |
+ margin: -2px 10px 0 0; |
|
| 8 |
+ vertical-align: middle; |
|
| 9 |
+ cursor: pointer; |
|
| 10 |
+ -moz-border-radius: 50%; |
|
| 11 |
+ border-radius: 50%; |
|
| 12 |
+ border: 3px solid #ffffff; |
|
| 13 |
+ accent-color: #ffba08; |
|
| 14 |
+} |
|
| 15 |
+ |
|
| 16 |
+.find-table tr{
|
|
| 17 |
+ border-top: #A3A5AA 1px solid; |
|
| 18 |
+ border-bottom: #A3A5AA 1px solid; |
|
| 19 |
+} |
|
| 20 |
+.find-table .thead{background-color: #EAEDF4;}
|
|
| 1 | 21 |
/* 로그인페이지 */ |
| 2 | 22 |
.login-container {
|
| 3 |
- padding: 40px 60px; |
|
| 23 |
+ padding: 20px 20px; |
|
| 24 |
+ background-image: url('../img/bg.png');
|
|
| 4 | 25 |
} |
| 5 | 26 |
|
| 6 | 27 |
.login h2 {
|
| 7 | 28 |
font-size: 30px; |
| 8 | 29 |
color: #fff; |
| 9 | 30 |
font-family: 'ONEMobilePOPOTF'; |
| 31 |
+ font-weight: 100; |
|
| 10 | 32 |
} |
| 11 | 33 |
|
| 12 |
-.login-bg {
|
|
| 13 |
- position: absolute; |
|
| 14 |
- z-index: -10; |
|
| 15 |
- left: 0; |
|
| 16 |
- top: 0; |
|
| 17 |
-} |
|
| 18 | 34 |
|
| 19 | 35 |
.login-box {
|
| 20 | 36 |
width: 712px; |
... | ... | @@ -28,19 +44,33 @@ |
| 28 | 44 |
border-radius: 20px; |
| 29 | 45 |
} |
| 30 | 46 |
|
| 31 |
-.login-form p {
|
|
| 47 |
+.login-form .title {
|
|
| 32 | 48 |
font-family: 'ONEMobileOTF-Bold'; |
| 33 | 49 |
font-size: 24px; |
| 50 |
+ width: 230px; |
|
| 34 | 51 |
} |
| 35 |
- |
|
| 36 |
-.login-form input {
|
|
| 52 |
+.login-form .help{margin-left: 170px;}
|
|
| 53 |
+.login-form input[type="text"], .login-form input[type="password"] {
|
|
| 37 | 54 |
border: 3px solid #FFD56B; |
| 38 | 55 |
border-radius: 10px; |
| 39 | 56 |
padding: 22px 19px; |
| 40 | 57 |
width: 100%; |
| 41 | 58 |
font-size: 24px; |
| 42 | 59 |
} |
| 43 |
- |
|
| 60 |
+.login-form input:focus {
|
|
| 61 |
+ outline: 3px solid #ffba0a; |
|
| 62 |
+ border: 0 !important; /* 클릭 시 테두리 색상 변경 */ |
|
| 63 |
+} |
|
| 64 |
+.login-form .search-wrap input[type="text"], .login-form .search-wrap select{
|
|
| 65 |
+ border: 3px solid #FFD56B; |
|
| 66 |
+ border-radius: 10px; |
|
| 67 |
+ padding: 22px 19px; |
|
| 68 |
+ width: 100%; |
|
| 69 |
+ font-size: 24px;} |
|
| 70 |
+ .login-form .search-wrap button{
|
|
| 71 |
+ top: 24px; |
|
| 72 |
+ right: 2rem; |
|
| 73 |
+ } |
|
| 44 | 74 |
.login-btn {
|
| 45 | 75 |
position: relative; |
| 46 | 76 |
} |
... | ... | @@ -55,6 +85,20 @@ |
| 55 | 85 |
} |
| 56 | 86 |
|
| 57 | 87 |
|
| 88 |
+ |
|
| 89 |
+/* ------------------------학생 --------------------- */ |
|
| 90 |
+/* 헤더 */ |
|
| 91 |
+.notice{position: relative; cursor: pointer;}
|
|
| 92 |
+.notice p{position: absolute; top: 3px;
|
|
| 93 |
+ right: 6px; color: #fff; font-weight: bold;} |
|
| 94 |
+ |
|
| 95 |
+ .header article{
|
|
| 96 |
+ background-color: #F8F9FB; |
|
| 97 |
+ border-radius: 10px; |
|
| 98 |
+ padding: 22px 19px; |
|
| 99 |
+ width: 100%; |
|
| 100 |
+ font-size: 24px; |
|
| 101 |
+ } |
|
| 58 | 102 |
/* 레이아웃 */ |
| 59 | 103 |
.side {
|
| 60 | 104 |
width: 42rem; |
... | ... | @@ -62,7 +106,7 @@ |
| 62 | 106 |
|
| 63 | 107 |
.main-wrap {
|
| 64 | 108 |
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| 65 |
- padding: 65px 15px 70px 60px; |
|
| 109 |
+ padding: 50px 40px; |
|
| 66 | 110 |
} |
| 67 | 111 |
|
| 68 | 112 |
.main-wrap {
|
... | ... | @@ -96,11 +140,14 @@ |
| 96 | 140 |
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| 97 | 141 |
} |
| 98 | 142 |
|
| 99 |
-.side .profile .name {
|
|
| 143 |
+.side .name {
|
|
| 100 | 144 |
font-family: 'ONEMobilePOPOTF'; |
| 101 | 145 |
font-size: 24px; |
| 102 | 146 |
} |
| 103 |
- |
|
| 147 |
+.name {
|
|
| 148 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 149 |
+ font-size: 24px; |
|
| 150 |
+} |
|
| 104 | 151 |
.side .profile img {
|
| 105 | 152 |
object-fit: contain; |
| 106 | 153 |
} |
... | ... | @@ -210,8 +257,58 @@ |
| 210 | 257 |
display: none; |
| 211 | 258 |
/* 원하는 색상으로 변경 */ |
| 212 | 259 |
} |
| 260 |
+/* 마이페이지 */ |
|
| 261 |
+.look-btn{cursor: pointer;}
|
|
| 262 |
+.mypage .class {
|
|
| 263 |
+ background-image: url('../img/btn46_12s_normal.png');
|
|
| 264 |
+ width: 286px; |
|
| 265 |
+ height: 114px; |
|
| 266 |
+ padding: 11px 25px 40px 25px; |
|
| 267 |
+ cursor: pointer; |
|
| 268 |
+} |
|
| 213 | 269 |
|
| 270 |
+.mypage .class img {
|
|
| 271 |
+ width: 35px; |
|
| 272 |
+ height: 100%; |
|
| 273 |
+} |
|
| 274 |
+.mypage .class .box{background-color: transparent; padding: 0;}
|
|
| 275 |
+.mypage .class .box > div {height: 35px;}
|
|
| 276 |
+.mypage .photobook{
|
|
| 277 |
+ background-image: url('../img/img199_12p.png');
|
|
| 278 |
+ width: 367px; |
|
| 279 |
+ height: 182px; |
|
| 280 |
+ padding: 20px 46px 20px 31px; |
|
| 281 |
+ color: #fff; |
|
| 282 |
+} |
|
| 283 |
+.mypage .textbook{font-family: 'ONEMobilePOPOTF';}
|
|
| 284 |
+.mypage .photobook .title1{font-family: 'ONEMobilePOPOTF'; font-weight: 100;}
|
|
| 285 |
+.mypage .textbook .text {border-radius: 12px 12px 0px 0px; height: 68px;
|
|
| 286 |
+} |
|
| 287 |
+.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
|
|
| 288 |
+.mypage .textbook:nth-child(1) .text{background-color: #DB2B39;}
|
|
| 289 |
+/* .mypage .textbook:nth-child(2) .text */ |
|
| 290 |
+.mypage .textbook:nth-child(3) .text{background-color:#2D7DD2;}
|
|
| 291 |
+.mypage .textbook:nth-child(4) .text{ background-color: #3066BE;}
|
|
| 292 |
+.mypage .textbook .box{height: 199px; text-align: center; padding: 10px;}
|
|
| 293 |
+.mypage .textbook:nth-child(1){border: #DB2B39 solid 6px;}
|
|
| 294 |
+/* .mypage .textbook:nth-child(2) .text */ |
|
| 295 |
+.mypage .textbook:nth-child(3){border:#2D7DD2 solid 6px;}
|
|
| 296 |
+.mypage .textbook:nth-child(4){ border: #3066BE solid 6px;}
|
|
| 297 |
+.mypage em.orange {
|
|
| 298 |
+ color: #FFBA08; |
|
| 299 |
+} |
|
| 214 | 300 |
|
| 301 |
+.mypage em.navy {
|
|
| 302 |
+ color: #3066BE; |
|
| 303 |
+} |
|
| 304 |
+ |
|
| 305 |
+.mypage em.blue {
|
|
| 306 |
+ color:#2D7DD2; |
|
| 307 |
+} |
|
| 308 |
+ |
|
| 309 |
+.mypage em.red {
|
|
| 310 |
+ color: #DB2B39; |
|
| 311 |
+} |
|
| 215 | 312 |
/* 대시보드 */ |
| 216 | 313 |
.main {
|
| 217 | 314 |
max-height: 600px; |
... | ... | @@ -313,7 +410,7 @@ |
| 313 | 410 |
|
| 314 | 411 |
/* 챕터 */ |
| 315 | 412 |
.content-wrap {
|
| 316 |
- width: 1808px; |
|
| 413 |
+ margin: 90px 60px 0 60px; |
|
| 317 | 414 |
|
| 318 | 415 |
} |
| 319 | 416 |
|
... | ... | @@ -325,7 +422,7 @@ |
| 325 | 422 |
content: ""; |
| 326 | 423 |
display: block; |
| 327 | 424 |
position: absolute; |
| 328 |
- top: 17px; |
|
| 425 |
+ top: -72px; |
|
| 329 | 426 |
} |
| 330 | 427 |
|
| 331 | 428 |
.content-wrap>.title-box {
|
... | ... | @@ -559,14 +656,13 @@ |
| 559 | 656 |
text-align: center; |
| 560 | 657 |
font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;}
|
| 561 | 658 |
.time-bg > div{position: relative;}
|
| 562 |
- .time{
|
|
| 563 |
- color: #752AFF; |
|
| 659 |
+ .time{
|
|
| 564 | 660 |
position: absolute; |
| 565 | 661 |
top: 70px; |
| 566 | 662 |
left: 50%; |
| 567 | 663 |
transform: translate(-50%, -50%);} |
| 568 |
- .time .second{font-size: 51px;}
|
|
| 569 |
- .time .text{font-size: 21px;}
|
|
| 664 |
+ .second{font-size: 51px; font-family: 'neodgm'; color: #752AFF;}
|
|
| 665 |
+ .time .text{font-size: 21px; color: #752AFF;}
|
|
| 570 | 666 |
|
| 571 | 667 |
/* step2_5 */ |
| 572 | 668 |
.dropGroup .popTxt{position: relative; width: fit-content;}
|
... | ... | @@ -614,7 +710,7 @@ |
| 614 | 710 |
position: absolute; |
| 615 | 711 |
top: 93px; |
| 616 | 712 |
} |
| 617 |
-.inputGroup input{border: #CAE5FF 1px solid; border-radius: 5px; padding: 10px 20px; width: min-content;}
|
|
| 713 |
+.inputGroup input{border: #CAE5FF 1px solid; border-radius: 5px; padding: 10px 20px; width: min-content; font-size: 28px;}
|
|
| 618 | 714 |
|
| 619 | 715 |
|
| 620 | 716 |
/* step3_2 */ |
... | ... | @@ -627,69 +723,213 @@ |
| 627 | 723 |
|
| 628 | 724 |
|
| 629 | 725 |
|
| 630 |
-input.borderx {
|
|
| 631 |
- border: none; |
|
| 726 |
+.listen-btn{cursor: pointer;}
|
|
| 727 |
+ |
|
| 728 |
+ |
|
| 729 |
+ |
|
| 730 |
+/* ------------------------학생 --------------------- */ |
|
| 731 |
+ |
|
| 732 |
+ |
|
| 733 |
+/* ------------------------선생님 --------------------- */ |
|
| 734 |
+.side_t{
|
|
| 735 |
+ background-color: #fff; |
|
| 736 |
+ width: 360px; |
|
| 737 |
+ height: 100%; |
|
| 738 |
+ padding: 25px 40px; |
|
| 632 | 739 |
} |
| 633 | 740 |
|
| 634 |
-.underline {
|
|
| 635 |
- text-decoration: underline; |
|
| 636 |
-} |
|
| 637 |
-.bd-bt{border-bottom:#FFBA08 solid 2px ; min-width: 66px;
|
|
| 638 |
- width: max-content; } |
|
| 639 |
-hr {
|
|
| 640 |
- color: #C6C6C6; |
|
| 641 |
- margin: 10px 0 20px 0; |
|
| 642 |
-} |
|
| 643 |
-em.yellow{color: #FFBA08; font-style: normal;}
|
|
| 644 |
-em.yellow-bg{background-color: #FFBA08; font-style: normal;}
|
|
| 645 |
-input.yellow-bd{border:#FFBA08 solid 2px ; border-radius: 10px; padding: 20px; font-size: 24px; font-family: 'ONEMobileOTF-Regular';}
|
|
| 646 |
- |
|
| 647 |
-.blue-c{border: #2948FF solid 5px; width: 30px; height: 30px; border-radius: 50px;}
|
|
| 648 |
- |
|
| 649 |
-.title-box .title {
|
|
| 650 |
- font-size: 32px; |
|
| 651 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 741 |
+details { margin:5px 0 10px; }
|
|
| 742 |
+details a{display: block;}
|
|
| 743 |
+details > summary {font-size: 24px; font-family: 'ONEMobilePOP'; padding:10px; outline:0; border-radius:5px; cursor:pointer; transition:background 0.5s; text-align:left; }
|
|
| 744 |
+details > summary::-webkit-details-marker { background:#444; color:#fff; background-size:contain; transform:rotate3d(0, 0, 1, 90deg); transition:transform 0.25s;}
|
|
| 745 |
+details[open] > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 180deg);}
|
|
| 746 |
+details[open] > summary ~ * { animation:reveal 0.5s;}
|
|
| 747 |
+.tpt {font-family: 'Pretendard-SemiBold'; font-size: 20px;padding:10px; line-height:25px; cursor: pointer;}
|
|
| 748 |
+.side_t .tpt{ margin:5px 0 10px 30px; }
|
|
| 749 |
+.side_t .tpt:hover{background-color: #fff; border: 1px solid #FFBA08; border-radius: 5px; text-decoration: underline; text-decoration-color: #FFBA08;
|
|
| 750 |
+text-decoration-thickness: 3px;} |
|
| 751 |
+@keyframes reveal {
|
|
| 752 |
+ from { opacity:0; transform:translate3d(0, -30px, 0); }
|
|
| 753 |
+ to { opacity:1; transform:translate3d(0, 0, 0); }
|
|
| 652 | 754 |
} |
| 653 | 755 |
|
| 654 |
-.title1 {
|
|
| 655 |
- font-size: 24px; |
|
| 656 |
- font-weight: bold; |
|
| 756 |
+select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px;}
|
|
| 757 |
+select option{font-size: 20px; font-weight: bold;}
|
|
| 758 |
+ |
|
| 759 |
+ |
|
| 760 |
+.class{ background-color: #F8F9FB; border-radius: 10px; padding: 25px; font-size: 19px;}
|
|
| 761 |
+.class .title1, .textbook .title1{font-family: 'ONEMobilePOP'; font-weight: 100;}
|
|
| 762 |
+.class .box{background-color: #EAEDF4; border-radius: 10px;
|
|
| 763 |
+ padding: 10px; |
|
| 657 | 764 |
} |
| 658 |
-.title2 {
|
|
| 765 |
+.class .member{font-size: 20px; color: #75767A; position: relative;}
|
|
| 766 |
+.class .member::before{content: ""; background-image: url('../img/img171_82t.png'); width: 20px; height: 22px; position: absolute; left: -28px;}
|
|
| 767 |
+.class .btnGroup, .textbook .text .btnGroup {width: initial;}
|
|
| 768 |
+.class button, .textbook button{font-size: 19px; font-family: 'Pretendard-Regular';}
|
|
| 769 |
+.textbook{width: 300px; border: #FFBA08 solid 6px; border-radius: 20px; font-size: 19px;}
|
|
| 770 |
+.textbook-add{width: 300px; height: 354px; background-color: #F8F9FB; border: #75767A solid 2px; border-radius: 20px; font-size: 19px;}
|
|
| 771 |
+.textbook .box{height: 250px;}
|
|
| 772 |
+.textbook .text{height: 97px; background-color: #FFBA08; border-radius: 0px 0px 12px 12px; padding: 20px;}
|
|
| 773 |
+.textbook-add{position: relative;}
|
|
| 774 |
+.textbook-add button{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
|
|
| 775 |
+ |
|
| 776 |
+.search-wrap{
|
|
| 777 |
+ position: relative;} |
|
| 778 |
+.search-wrap select{
|
|
| 659 | 779 |
font-size: 20px; |
| 660 |
- font-weight: bold; |
|
| 780 |
+ width: 13rem; |
|
| 781 |
+ background-color: #fff; |
|
| 782 |
+ border: 0; |
|
| 783 |
+ border-bottom: 1px solid #a4a4a4; |
|
| 784 |
+ border-radius: 0; |
|
| 661 | 785 |
} |
| 662 |
-.title3 {
|
|
| 663 |
- font-size: 64px; |
|
| 664 |
- font-family: 'Pretendard-ExtraBold'; |
|
| 786 |
+.search-wrap input{
|
|
| 787 |
+ font-size: 20px; |
|
| 788 |
+ width: 40rem; |
|
| 789 |
+ border: 0; |
|
| 790 |
+ border-bottom: 1px solid #c8c8c8; |
|
| 665 | 791 |
} |
| 666 |
-.title4 {
|
|
| 667 |
- font-size: 31px; |
|
| 668 |
- font-weight: bold; |
|
| 792 |
+.search-wrap button{
|
|
| 793 |
+ position: absolute; |
|
| 794 |
+ right: 1rem; |
|
| 795 |
+ top: 6px; |
|
| 796 |
+} |
|
| 797 |
+.input-icon{
|
|
| 798 |
+display: block; |
|
| 799 |
+ width: 30px; |
|
| 800 |
+ height: 30px; |
|
| 801 |
+ font-size: 1.9rem; |
|
| 802 |
+ color: #000; |
|
| 803 |
+ cursor: pointer; |
|
| 804 |
+} |
|
| 805 |
+/* 테이블 */ |
|
| 806 |
+.table-pagination button, |
|
| 807 |
+.table-pagination button, |
|
| 808 |
+ .table-pagination button {
|
|
| 809 |
+ font-size: 2rem; |
|
| 810 |
+ font-family: 'Pretendard-Regular'; |
|
| 811 |
+ height: 40px; |
|
| 812 |
+ width: 40px; |
|
| 813 |
+ border-radius: 0.5rem; |
|
| 669 | 814 |
} |
| 670 | 815 |
|
| 671 |
- |
|
| 672 |
- |
|
| 673 |
-.title-box .subtitle {
|
|
| 674 |
- font-size: 16px; |
|
| 675 |
- background-color: #441E03; |
|
| 676 |
- color: #fff; |
|
| 677 |
- padding: 5px 15px; |
|
| 678 |
- width: fit-content; |
|
| 679 |
- border-radius: 20px; |
|
| 680 |
- display: inline-block; |
|
| 681 |
- font-family: 'ONEMobileOTF-Bold'; |
|
| 816 |
+ .table-pagination .selected-btn, |
|
| 817 |
+.table-pagination .selected-btn, |
|
| 818 |
+ .table-pagination .selected-btn {
|
|
| 819 |
+ background-color: #FFBA08; |
|
| 820 |
+ color: #fff; |
|
| 821 |
+ font-family: 'Pretendard-Bold'; |
|
| 822 |
+} |
|
| 823 |
+.new-btn{
|
|
| 824 |
+ padding: 5px 20px; |
|
| 825 |
+ font-size: 20px; |
|
| 826 |
+ font-family: 'Pretendard-Bold'; |
|
| 827 |
+ border-radius: 5px; |
|
| 828 |
+ background-color: #FFF3D7; |
|
| 829 |
+} |
|
| 830 |
+.new-btn:hover{background-color: #FFBA08;
|
|
| 831 |
+ color: #fff;} |
|
| 832 |
+ |
|
| 833 |
+/* 팝업 */ |
|
| 834 |
+.popup-wrap{
|
|
| 835 |
+ position: fixed; |
|
| 836 |
+ background-color: rgba(0, 0, 0, 0.283); |
|
| 837 |
+ width: 100%; |
|
| 838 |
+ height: 100%; |
|
| 839 |
+ top: 0; |
|
| 840 |
+ left: 0; |
|
| 682 | 841 |
} |
| 683 | 842 |
|
| 684 |
-.title-box .subtitle2{
|
|
| 685 |
- padding-left: 60px; |
|
| 686 |
- font-size: 28px; |
|
| 687 |
-} |
|
| 688 |
-.subtitle3 {
|
|
| 689 |
- font-size: 42px; |
|
| 690 |
- font-weight: bold; |
|
| 691 |
- color: #464749; |
|
| 692 |
- font-family: 'Pretendard-Light'; |
|
| 843 |
+.popup-box {
|
|
| 844 |
+ position: fixed; |
|
| 845 |
+ width: 670px; |
|
| 846 |
+ /* min-height: 219px; */ |
|
| 847 |
+ background-color: var(--color-white); |
|
| 848 |
+ top: 50%; |
|
| 849 |
+ left: 37%; |
|
| 850 |
+ transform: translateY(-50%); |
|
| 851 |
+ border: 1px solid var(--color-gray); |
|
| 852 |
+ border-radius: 1rem; |
|
| 853 |
+ padding: 3rem; |
|
| 854 |
+ z-index: 11111; |
|
| 693 | 855 |
} |
| 694 | 856 |
|
| 695 |
-.listen-btn{cursor: pointer;} (파일 끝에 줄바꿈 문자 없음)
|
|
| 857 |
+.popup-title {
|
|
| 858 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 859 |
+ font-size: 32px; |
|
| 860 |
+} |
|
| 861 |
+.popup-wrap .search-wrap input, .popup-wrap .search-wrap select{
|
|
| 862 |
+ position: relative; |
|
| 863 |
+ font-size: 20px; |
|
| 864 |
+ width: 100%; |
|
| 865 |
+ border-radius: 10px; |
|
| 866 |
+ border: 1px solid #ffdf9a; |
|
| 867 |
+ height: 50px; |
|
| 868 |
+ |
|
| 869 |
+} |
|
| 870 |
+.popup-wrap .search-wrap button{
|
|
| 871 |
+ position: absolute; |
|
| 872 |
+ right: 1rem; |
|
| 873 |
+ top: 9px; |
|
| 874 |
+} |
|
| 875 |
+ |
|
| 876 |
+/* 공지등록 */ |
|
| 877 |
+.board-wrap{
|
|
| 878 |
+ border-top: 1px #606060 solid; |
|
| 879 |
+ border-bottom: 1px #606060 solid; |
|
| 880 |
+ padding: 20px 0; |
|
| 881 |
+} |
|
| 882 |
+.board-wrap label{width: 13rem;}
|
|
| 883 |
+.board-wrap textarea{min-height: 25rem; font-size: 20px; width: 100%;}
|
|
| 884 |
+ input.data-wrap, textarea.data-wrap{
|
|
| 885 |
+ width: -webkit-fill-available; |
|
| 886 |
+ padding: 1.2rem; |
|
| 887 |
+ border-radius: 0.8rem; |
|
| 888 |
+ border: 1px solid #8C8E92; |
|
| 889 |
+} |
|
| 890 |
+.wrap {
|
|
| 891 |
+ border: 1px solid var(--color-lightGray); |
|
| 892 |
+ padding: 2rem; |
|
| 893 |
+ position: relative; |
|
| 894 |
+ border-radius: 10px; |
|
| 895 |
+ |
|
| 896 |
+ |
|
| 897 |
+} |
|
| 898 |
+.mypage .wrap{overflow-x: auto;}
|
|
| 899 |
+.wrap section {width: max-content;}
|
|
| 900 |
+.wrap .wrap-bg{
|
|
| 901 |
+ background-color: #f7f8fa; |
|
| 902 |
+ padding: 20px; |
|
| 903 |
+ border-radius: 10px; |
|
| 904 |
+ height: 20rem; |
|
| 905 |
+ width: -webkit-fill-available; |
|
| 906 |
+ |
|
| 907 |
+} |
|
| 908 |
+.wrap .wrap-bg >div{ text-align: center;}
|
|
| 909 |
+.wrap .progress-bar {height: 40px;}
|
|
| 910 |
+.wrap .progress-bar-fill {height: 40px;}
|
|
| 911 |
+.wrap details .title2{width: 160px;}
|
|
| 912 |
+.wrap details span{width: 110px; text-align: end;}
|
|
| 913 |
+ |
|
| 914 |
+ |
|
| 915 |
+.bookmanage-btn{
|
|
| 916 |
+ padding: 20px 30px; |
|
| 917 |
+ font-size: 20px; |
|
| 918 |
+ font-family: 'Pretendard-Bold'; |
|
| 919 |
+ border-radius: 5px; |
|
| 920 |
+ border: #FFBA08 solid 2px; |
|
| 921 |
+ cursor: pointer; |
|
| 922 |
+} |
|
| 923 |
+.bookmanage-btn:hover{background-color: #FFF3D7;}
|
|
| 924 |
+.hidden-tr {
|
|
| 925 |
+ display: none; |
|
| 926 |
+} |
|
| 927 |
+.show-tr {
|
|
| 928 |
+ background-color: #FFF3D7 ; |
|
| 929 |
+} |
|
| 930 |
+.show-tr div{ margin: 10px;}
|
|
| 931 |
+.show-tr table{
|
|
| 932 |
+ background-color: #fff; |
|
| 933 |
+ |
|
| 934 |
+} |
|
| 935 |
+/* ------------------------선생님 --------------------- */(파일 끝에 줄바꿈 문자 없음) |
+++ client/resources/img/btn24_76s_normal.png
| Binary file is not shown |
+++ client/resources/img/btn24_82t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn25_88t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn25_93t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn26_90t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn27_90t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn28_90t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn29_95t_click.png
| Binary file is not shown |
+++ client/resources/img/btn29_95t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn30_95t_click.png
| Binary file is not shown |
+++ client/resources/img/btn30_95t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn31_95t_click.png
| Binary file is not shown |
+++ client/resources/img/btn31_95t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn32_98t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn33_101t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn34_101t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn35_107t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn36_120t_click.png
| Binary file is not shown |
+++ client/resources/img/btn36_120t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn37_120t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn38_120t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn39_120t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn40_81t_click.png
| Binary file is not shown |
+++ client/resources/img/btn40_81t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn41_81t_click.png
| Binary file is not shown |
+++ client/resources/img/btn41_81t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn42_81t_click.png
| Binary file is not shown |
+++ client/resources/img/btn42_81t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn43_07t_click.png
| Binary file is not shown |
+++ client/resources/img/btn43_09t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn44_07t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn44_09t_click.png
| Binary file is not shown |
+++ client/resources/img/btn45_07t_normal.png
| Binary file is not shown |
+++ client/resources/img/btn46_12s_normal.png
| Binary file is not shown |
+++ client/resources/img/btn47_13s_click.png
| Binary file is not shown |
+++ client/resources/img/btn47_13s_normal.png
| Binary file is not shown |
+++ client/resources/img/img105_46_01s.png
| Binary file is not shown |
+++ client/resources/img/img161_44s.png
| Binary file is not shown |
--- client/resources/img/img166_46s.png
+++ client/resources/img/img166_46s.png
| Binary file is not shown |
+++ client/resources/img/img167_82t.png
| Binary file is not shown |
+++ client/resources/img/img168_82t.png
| Binary file is not shown |
+++ client/resources/img/img169_82t.png
| Binary file is not shown |
+++ client/resources/img/img170_82t.png
| Binary file is not shown |
+++ client/resources/img/img171_82t.png
| Binary file is not shown |
+++ client/resources/img/img172_82t.png
| Binary file is not shown |
+++ client/resources/img/img173_82t.png
| Binary file is not shown |
+++ client/resources/img/img174_82t.png
| Binary file is not shown |
+++ client/resources/img/img175_82t.png
| Binary file is not shown |
+++ client/resources/img/img176_82t.png
| Binary file is not shown |
+++ client/resources/img/img177_79p.png
| Binary file is not shown |
+++ client/resources/img/img178_79p.png
| Binary file is not shown |
+++ client/resources/img/img179_85p.png
| Binary file is not shown |
+++ client/resources/img/img179_85t.png
| Binary file is not shown |
+++ client/resources/img/img179_86t.png
| Binary file is not shown |
+++ client/resources/img/img180_86t.png
| Binary file is not shown |
+++ client/resources/img/img180_87t.png
| Binary file is not shown |
+++ client/resources/img/img181_88t.png
| Binary file is not shown |
+++ client/resources/img/img182_93t.png
| Binary file is not shown |
+++ client/resources/img/img183_91t.png
| Binary file is not shown |
+++ client/resources/img/img184_91t.png
| Binary file is not shown |
+++ client/resources/img/img185_94t.png
| Binary file is not shown |
+++ client/resources/img/img186_94t.png
| Binary file is not shown |
+++ client/resources/img/img187_82t.png
| Binary file is not shown |
+++ client/resources/img/img187_94t.png
| Binary file is not shown |
+++ client/resources/img/img188_95t.png
| Binary file is not shown |
+++ client/resources/img/img189_104t.png
| Binary file is not shown |
+++ client/resources/img/img190_125t.png
| Binary file is not shown |
+++ client/resources/img/img191_125t.png
| Binary file is not shown |
+++ client/resources/img/img192_78p.png
| Binary file is not shown |
+++ client/resources/img/img193_78p.png
| Binary file is not shown |
+++ client/resources/img/img194_78p.png
| Binary file is not shown |
+++ client/resources/img/img195_81p.png
| Binary file is not shown |
+++ client/resources/img/img196_12p.png
| Binary file is not shown |
+++ client/resources/img/img197_12p.png
| Binary file is not shown |
+++ client/resources/img/img198_12p.png
| Binary file is not shown |
+++ client/resources/img/img199_12p.png
| Binary file is not shown |
+++ client/resources/img/img200_13p.png
| Binary file is not shown |
+++ client/resources/img/img201_13p.png
| Binary file is not shown |
+++ client/resources/img/img202_13p.png
| Binary file is not shown |
+++ client/resources/img/img203_13p.png
| Binary file is not shown |
+++ client/resources/img/look_t.png
| Binary file is not shown |
+++ client/resources/img/tab1_79t.png
| Binary file is not shown |
--- client/views/App.vue
+++ client/views/App.vue
... | ... | @@ -1,6 +1,6 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div id="app"> |
| 3 |
- <Header></Header> |
|
| 3 |
+ <!-- <Header></Header> --> |
|
| 4 | 4 |
<router-view /> |
| 5 | 5 |
<v-app > |
| 6 | 6 |
</v-app> |
+++ client/views/Join.vue
... | ... | @@ -0,0 +1,316 @@ |
| 1 | +<template> | |
| 2 | + <div class="login-container"> | |
| 3 | + <div class="login-bg"> | |
| 4 | + <div> | |
| 5 | + | |
| 6 | + </div> | |
| 7 | + </div> | |
| 8 | + <div class="login "> | |
| 9 | + <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div> | |
| 10 | + | |
| 11 | + <div class="join-box"> | |
| 12 | + <div class="flex align-center justify-start mb40"> | |
| 13 | + <img src="../resources/img/icon1.png" alt="" class="mr20"> | |
| 14 | + <h2>회원가입</h2> | |
| 15 | + </div> | |
| 16 | + <label class="mr20 title1"> | |
| 17 | + <input type="radio" v-model="selectedTab" value="tab1" /> | |
| 18 | + 학생 | |
| 19 | + </label> | |
| 20 | + <label class="mr20 title1"> | |
| 21 | + <input type="radio" v-model="selectedTab" value="tab2" /> | |
| 22 | + 학부모 | |
| 23 | + </label> | |
| 24 | + <label class="mr20 title1"> | |
| 25 | + <input type="radio" v-model="selectedTab" value="tab3" /> | |
| 26 | + 선생님 | |
| 27 | + </label> | |
| 28 | + <!-- 학생 --> | |
| 29 | + <form @submit.prevent="submitForm" class="login-form mt20" v-if="selectedTab === 'tab1'"> | |
| 30 | + <div class="mb10 flex justify-between align-center"> | |
| 31 | + <p class="title" for="username">아이디</p> | |
| 32 | + <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> | |
| 33 | + </div> | |
| 34 | + <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" | |
| 35 | + alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> | |
| 36 | + <div class="flex justify-between align-center mb10"> | |
| 37 | + <p class="title" for="password">비밀번호</p> | |
| 38 | + <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 39 | + </div> | |
| 40 | + <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em | |
| 41 | + class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> | |
| 42 | + <div class="flex justify-between align-center mb10"> | |
| 43 | + <p class="title" for="password">비밀번호 확인</p> | |
| 44 | + <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 45 | + </div> | |
| 46 | + <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em | |
| 47 | + class="green ml10">비밀번호가 일치 합니다.</em></p> | |
| 48 | + <div class="mb30 flex justify-between align-center"> | |
| 49 | + <p class="title" for="username">이름</p> | |
| 50 | + <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> | |
| 51 | + </div> | |
| 52 | + <div class="mb30 flex justify-between align-center"> | |
| 53 | + <p class="title" for="username">전화번호</p> | |
| 54 | + <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username" | |
| 55 | + > | |
| 56 | + <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > | |
| 57 | + <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | + <div class="mb30 flex justify-between align-center"> | |
| 61 | + <p class="title" for="username">학교</p> | |
| 62 | + <div class="search-wrap" style="width: 100%;"> | |
| 63 | + <input type="text" placeholder="검색하세요."> | |
| 64 | + <button @click="buttonSearch" type="button" title="위원회 검색"> | |
| 65 | + <img src="../resources/img/look_t.png" alt=""> | |
| 66 | + </button> | |
| 67 | + </div> | |
| 68 | + </div> | |
| 69 | + <div class="mb30 flex justify-between align-center"> | |
| 70 | + <p class="title" for="username">학교</p> | |
| 71 | + <div class="search-wrap flex justify-end mb20" style="width: 100%;"> | |
| 72 | + <select name="" id="" class="mr10 data-wrap"> | |
| 73 | + <option value="">학년</option> | |
| 74 | + </select> | |
| 75 | + <select name="" id="" class="mr10 data-wrap"> | |
| 76 | + <option value="">반</option> | |
| 77 | + </select> | |
| 78 | + <select name="" id="" class="data-wrap"> | |
| 79 | + <option value="">번호</option> | |
| 80 | + </select> | |
| 81 | + | |
| 82 | + </div> | |
| 83 | + </div> | |
| 84 | + <div class="flex justify-end align-center mb10"> | |
| 85 | + <input type="checkbox" class="ui-checkbox mr10"> | |
| 86 | + <p class="title2" for="password">개인정보 수집 동의</p> | |
| 87 | + </div> | |
| 88 | + <button style="width: 100%;" class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/btn_.png" | |
| 89 | + alt=""> | |
| 90 | + <p>로그인</p> | |
| 91 | + </button> | |
| 92 | + </form> | |
| 93 | + <!-- 학부모 --> | |
| 94 | + <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab2'"> | |
| 95 | + <div class="mb10 flex justify-between align-center"> | |
| 96 | + <p class="title" for="username">아이디</p> | |
| 97 | + <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> | |
| 98 | + </div> | |
| 99 | + <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" | |
| 100 | + alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> | |
| 101 | + <div class="flex justify-between align-center mb10"> | |
| 102 | + <p class="title" for="password">비밀번호</p> | |
| 103 | + <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 104 | + </div> | |
| 105 | + <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em | |
| 106 | + class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> | |
| 107 | + <div class="flex justify-between align-center mb10"> | |
| 108 | + <p class="title" for="password">비밀번호 확인</p> | |
| 109 | + <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 110 | + </div> | |
| 111 | + <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em | |
| 112 | + class="green ml10">비밀번호가 일치 합니다.</em></p> | |
| 113 | + <div class="mb30 flex justify-between align-center"> | |
| 114 | + <p class="title" for="username">이름</p> | |
| 115 | + <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> | |
| 116 | + </div> | |
| 117 | + <div class="mb30 flex justify-between align-center"> | |
| 118 | + <p class="title" for="username">전화번호</p> | |
| 119 | + <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username" | |
| 120 | + > | |
| 121 | + <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > | |
| 122 | + <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > | |
| 123 | + </div> | |
| 124 | + </div> | |
| 125 | + <div class="flex justify-between mb20"> | |
| 126 | + <p class="title " for="username"><em class="yellow">학생 정보</em></p> | |
| 127 | + <div class="flex justify-end align-center mb10"> | |
| 128 | + <img src="../resources/img/img192_78p.png" alt=""> | |
| 129 | + <p class="title2 ml10" for="password">자녀 추가하기</p> | |
| 130 | + </div> | |
| 131 | + </div> | |
| 132 | + <div class="mb30 flex justify-between align-center"> | |
| 133 | + <p class="title" for="username">학교</p> | |
| 134 | + <div class="search-wrap" style="width: 100%;"> | |
| 135 | + <input type="text" placeholder="검색하세요."> | |
| 136 | + <button @click="buttonSearch" type="button" title="위원회 검색"> | |
| 137 | + <img src="../resources/img/look_t.png" alt=""> | |
| 138 | + </button> | |
| 139 | + </div> | |
| 140 | + </div> | |
| 141 | + <div class="mb30 flex justify-between align-center"> | |
| 142 | + <p class="title" for="username">학생 정보</p> | |
| 143 | + <div class="search-wrap flex justify-end mb20" style="width: 100%;"> | |
| 144 | + <select name="" id="" class="mr10 data-wrap"> | |
| 145 | + <option value="">학년</option> | |
| 146 | + </select> | |
| 147 | + <select name="" id="" class="mr10 data-wrap"> | |
| 148 | + <option value="">반</option> | |
| 149 | + </select> | |
| 150 | + <select name="" id="" class=" data-wrap"> | |
| 151 | + <option value="">번호</option> | |
| 152 | + </select> | |
| 153 | + | |
| 154 | + </div> | |
| 155 | + </div> | |
| 156 | + <div class="flex justify-end align-center mb10"> | |
| 157 | + <input type="checkbox" class="ui-checkbox mr10"> | |
| 158 | + <p class="title2" for="password">개인정보 수집 동의</p> | |
| 159 | + </div> | |
| 160 | + <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png" | |
| 161 | + alt=""> | |
| 162 | + <p>로그인</p> | |
| 163 | + </button> | |
| 164 | + </form> | |
| 165 | + <!-- 선생님 --> | |
| 166 | + <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab3'"> | |
| 167 | + <div class="mb10 flex justify-between align-center"> | |
| 168 | + <p class="title" for="username">아이디</p> | |
| 169 | + <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> | |
| 170 | + </div> | |
| 171 | + <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" | |
| 172 | + alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> | |
| 173 | + <div class="flex justify-between align-center mb10"> | |
| 174 | + <p class="title" for="password">비밀번호</p> | |
| 175 | + <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 176 | + </div> | |
| 177 | + <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img194_78p.png" alt=""><em | |
| 178 | + class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> | |
| 179 | + <div class="flex justify-between align-center mb10"> | |
| 180 | + <p class="title" for="password">비밀번호 확인</p> | |
| 181 | + <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 182 | + </div> | |
| 183 | + <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em | |
| 184 | + class="green ml10">비밀번호가 일치 합니다.</em></p> | |
| 185 | + <div class="mb30 flex justify-between align-center"> | |
| 186 | + <p class="title" for="username">이름</p> | |
| 187 | + <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> | |
| 188 | + </div> | |
| 189 | + <div class="mb30 flex justify-between align-center"> | |
| 190 | + <p class="title" for="username">전화번호</p> | |
| 191 | + <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username" | |
| 192 | + > | |
| 193 | + <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > | |
| 194 | + <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" > | |
| 195 | + </div> | |
| 196 | + </div> | |
| 197 | + <div class="mb30 flex justify-between align-center"> | |
| 198 | + <p class="title" for="username">학교</p> | |
| 199 | + <div class="search-wrap" style="width: 100%;"> | |
| 200 | + <input type="text" placeholder="검색하세요."> | |
| 201 | + <button @click="buttonSearch" type="button" title="위원회 검색"> | |
| 202 | + <img src="../resources/img/look_t.png" alt=""> | |
| 203 | + </button> | |
| 204 | + </div> | |
| 205 | + </div> | |
| 206 | + <div class="mb30 flex justify-between align-center"> | |
| 207 | + <p class="title" for="username">학교</p> | |
| 208 | + <div class="search-wrap flex justify-end mb20" style="width: 100%;"> | |
| 209 | + <select name="" id="" class="mr10 data-wrap"> | |
| 210 | + <option value="">학년</option> | |
| 211 | + </select> | |
| 212 | + <select name="" id="" class="mr10 data-wrap"> | |
| 213 | + <option value="">반</option> | |
| 214 | + </select> | |
| 215 | + <select name="" id="" class="data-wrap"> | |
| 216 | + <option value="">번호</option> | |
| 217 | + </select> | |
| 218 | + | |
| 219 | + </div> | |
| 220 | + </div> | |
| 221 | + <div class="flex justify-end align-center mb10"> | |
| 222 | + <input type="checkbox" class="ui-checkbox mr10"> | |
| 223 | + <p class="title2" for="password">개인정보 수집 동의</p> | |
| 224 | + </div> | |
| 225 | + <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png" | |
| 226 | + alt=""> | |
| 227 | + <p>로그인</p> | |
| 228 | + </button> | |
| 229 | + </form> | |
| 230 | + </div> | |
| 231 | + </div> | |
| 232 | + </div> | |
| 233 | + <div v-show="searchOpen" class="popup-wrap"> | |
| 234 | + <div class="popup-box "> | |
| 235 | + <div class="flex justify-between mb30"> | |
| 236 | + <p class="popup-title">학교 검색</p> | |
| 237 | + <button type="button" class="popup-close-btn" @click="closeBtn"> | |
| 238 | + <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> | |
| 239 | + | |
| 240 | + </button> | |
| 241 | + </div> | |
| 242 | + <div class="mb30 flex justify-between align-center"> | |
| 243 | + <p class="title1" for="username" style="width: 12rem;">시/도</p> | |
| 244 | + <div class="search-wrap flex justify-end" style="width: 100%;"> | |
| 245 | + <select name="" id="" class="mr10 data-wrap"> | |
| 246 | + <option value="">시</option> | |
| 247 | + </select> | |
| 248 | + <select name="" id="" class=" data-wrap"> | |
| 249 | + <option value="">도</option> | |
| 250 | + </select> | |
| 251 | + </div> | |
| 252 | + </div> | |
| 253 | + <div class="mb10 flex justify-between align-center"> | |
| 254 | + <p class="title1" for="username" style="width: 12rem;">학교명</p> | |
| 255 | + <div class="search-wrap" style="width: 100%;"> | |
| 256 | + <input type="text" placeholder="검색하세요."> | |
| 257 | + <button @click="buttonSearch" type="button" title="위원회 검색"> | |
| 258 | + <img src="../resources/img/look_t.png" alt=""> | |
| 259 | + </button> | |
| 260 | + </div> | |
| 261 | + </div> | |
| 262 | + <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img src="../resources/img/img194_78p.png" alt=""><em | |
| 263 | + class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p> | |
| 264 | + <div class="flex justify-center "> | |
| 265 | + <button type="button" title="글쓰기" class="new-btn mr10"> | |
| 266 | + 취소 | |
| 267 | + </button> | |
| 268 | + <button type="button" title="글쓰기" class="new-btn"> | |
| 269 | + 등록 | |
| 270 | + </button> | |
| 271 | + </div> | |
| 272 | + </div> | |
| 273 | + </div> | |
| 274 | +</template> | |
| 275 | + | |
| 276 | +<script> | |
| 277 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 278 | +import { mdiMagnify, mdiWindowClose } from '@mdi/js'; | |
| 279 | +export default { | |
| 280 | + data() { | |
| 281 | + return { | |
| 282 | + mdiWindowClose: mdiWindowClose, | |
| 283 | + username: '', | |
| 284 | + password: '', | |
| 285 | + selectedTab: 'tab1', // 초기 선택 탭 | |
| 286 | + showModal: false, | |
| 287 | + searchOpen: false, | |
| 288 | + } | |
| 289 | + }, | |
| 290 | + methods: { | |
| 291 | + submitForm() { | |
| 292 | + // 여기에 로그인 로직을 추가하세요. | |
| 293 | + console.log('Username:', this.username); | |
| 294 | + console.log('Password:', this.password); | |
| 295 | + }, | |
| 296 | + goToApp() { | |
| 297 | + this.$router.push('/app.page'); | |
| 298 | + }, | |
| 299 | + closeModal() { | |
| 300 | + this.showModal = false; | |
| 301 | + }, | |
| 302 | + buttonSearch() { | |
| 303 | + this.searchOpen = true; | |
| 304 | + }, | |
| 305 | + closeBtn() { | |
| 306 | + this.searchOpen = false; | |
| 307 | + | |
| 308 | + }, | |
| 309 | + }, | |
| 310 | + components: { | |
| 311 | + SvgIcon | |
| 312 | + }, | |
| 313 | +} | |
| 314 | +</script> | |
| 315 | + | |
| 316 | +<style scoped></style>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/Login.vue
+++ client/views/Login.vue
... | ... | @@ -1,6 +1,6 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div class="login-container"> |
| 3 |
- <img class="login-bg" src="../resources/img/bg.png" alt=""> |
|
| 3 |
+ |
|
| 4 | 4 |
<div class="login "> |
| 5 | 5 |
<div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div> |
| 6 | 6 |
|
... | ... | @@ -11,30 +11,156 @@ |
| 11 | 11 |
</div> |
| 12 | 12 |
<form @submit.prevent="submitForm" class="login-form "> |
| 13 | 13 |
<div class="mb30"> |
| 14 |
- <p class="mb15" for="username">아이디</p> |
|
| 14 |
+ <p class="mb15 title" for="username">아이디</p> |
|
| 15 | 15 |
<input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> |
| 16 | 16 |
</div> |
| 17 | 17 |
<div> |
| 18 |
- <p class="mb15" for="password">비밀번호</p> |
|
| 18 |
+ <p class="mb15 title" for="password">비밀번호</p> |
|
| 19 | 19 |
<input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> |
| 20 | 20 |
</div> |
| 21 |
- <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/button.png" alt=""> <p >로그인</p></button> |
|
| 21 |
+ <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/button.png" |
|
| 22 |
+ alt=""> |
|
| 23 |
+ <p>로그인</p> |
|
| 24 |
+ </button> |
|
| 22 | 25 |
<div class="flex justify-between mt40"> |
| 23 |
- <p class="underline">아이디/비밀번호 찾기</p> |
|
| 24 |
- <p class="underline">회원가입</p> |
|
| 26 |
+ <button> |
|
| 27 |
+ <p class="underline title2" @click="buttonSearch">아이디/비밀번호 찾기</p> |
|
| 28 |
+ </button> |
|
| 29 |
+ <button> |
|
| 30 |
+ <p class="underline title2" @click="goToPage('Join')">회원가입</p>
|
|
| 31 |
+ </button> |
|
| 25 | 32 |
</div> |
| 26 | 33 |
</form> |
| 27 | 34 |
</div> |
| 28 | 35 |
</div> |
| 29 | 36 |
</div> |
| 37 |
+ <div v-show="searchOpen" class="popup-wrap"> |
|
| 38 |
+ <div class="popup-box "> |
|
| 39 |
+ <div class="flex justify-end mb10"> |
|
| 40 |
+ <!-- <p class="popup-title">학교 검색</p> --> |
|
| 41 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 42 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 43 |
+ |
|
| 44 |
+ </button> |
|
| 45 |
+ </div> |
|
| 46 |
+ <div class="tab-box" v-show="selectedTab !== 'tab3' && selectedTab !== 'tab4'"> |
|
| 47 |
+ <label class="mr20 title1"> |
|
| 48 |
+ <input type="radio" v-model="selectedTab" value="tab1" /> |
|
| 49 |
+ 아이디 찾기 |
|
| 50 |
+ </label> |
|
| 51 |
+ <label class="mr20 title1"> |
|
| 52 |
+ <input type="radio" v-model="selectedTab" value="tab2" /> |
|
| 53 |
+ 비밀번호 찾기 |
|
| 54 |
+ </label> |
|
| 55 |
+ </div> |
|
| 56 |
+ <!-- 아이디 찾기 --> |
|
| 57 |
+ <form @submit.prevent="submitForm" class="find-form mt30" v-if="selectedTab === 'tab1'"> |
|
| 58 |
+ <div class="mb20 flex justify-between align-center"> |
|
| 59 |
+ <p class="title2" for="username" style="width: 12rem;">이름</p> |
|
| 60 |
+ <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> |
|
| 61 |
+ </div> |
|
| 62 |
+ <div class="mb30 flex justify-between align-center"> |
|
| 63 |
+ <p class="title2" for="username" style="width: 12rem;">전화번호</p> |
|
| 64 |
+ <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" |
|
| 65 |
+ type="text" id="username" v-model="username"> |
|
| 66 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 67 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 68 |
+ </div> |
|
| 69 |
+ </div> |
|
| 70 |
+ <div class="flex justify-center "> |
|
| 71 |
+ <button type="button" title="글쓰기" class="new-btn mr10"> |
|
| 72 |
+ 취소 |
|
| 73 |
+ </button> |
|
| 74 |
+ <button @click="selectedTab = 'tab3'" type="button" title="글쓰기" class="new-btn"> |
|
| 75 |
+ 찾기 |
|
| 76 |
+ </button> |
|
| 77 |
+ </div> |
|
| 78 |
+ </form> |
|
| 79 |
+ <!-- 비밀번호 찾기 --> |
|
| 80 |
+ <form @submit.prevent="submitForm" class="find-form mt30" v-else-if="selectedTab === 'tab2'"> |
|
| 81 |
+ <div class="mb20 flex justify-between align-center"> |
|
| 82 |
+ <p class="title2" for="username" style="width: 12rem;">아이디</p> |
|
| 83 |
+ <input class="data-wrap" type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> |
|
| 84 |
+ </div> |
|
| 85 |
+ <div class="mb20 flex justify-between align-center"> |
|
| 86 |
+ <p class="title2" for="username" style="width: 12rem;">이름</p> |
|
| 87 |
+ <input class="data-wrap" type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> |
|
| 88 |
+ </div> |
|
| 89 |
+ <div class="mb30 flex justify-between align-center"> |
|
| 90 |
+ <p class="title2" for="username" style="width: 12rem;">전화번호</p> |
|
| 91 |
+ <div class="flex justify-between align-center" style="width: 100%;"><input class="data-wrap" style="width: 12rem;" |
|
| 92 |
+ type="text" id="username" v-model="username"> |
|
| 93 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 94 |
+ <p class="title2">-</p><input class="data-wrap" style="width: 14rem;" type="text" id="username" v-model="username"> |
|
| 95 |
+ </div> |
|
| 96 |
+ </div> |
|
| 97 |
+ <div class="flex justify-center "> |
|
| 98 |
+ <button type="button" title="글쓰기" class="new-btn mr10"> |
|
| 99 |
+ 취소 |
|
| 100 |
+ </button> |
|
| 101 |
+ <button @click="selectedTab = 'tab4'" type="button" title="글쓰기" class="new-btn"> |
|
| 102 |
+ 찾기 |
|
| 103 |
+ </button> |
|
| 104 |
+ </div> |
|
| 105 |
+ </form> |
|
| 106 |
+ <!-- 아이디 찾기 결과 --> |
|
| 107 |
+ <div v-else-if="selectedTab === 'tab3'"> |
|
| 108 |
+ <div class="flex justify-center mt30"> |
|
| 109 |
+ <p class="title2">아이디 찾기가 완료 되었습니다.</p> |
|
| 110 |
+ </div> |
|
| 111 |
+ <table class="find-table mt30 mb30"> |
|
| 112 |
+ <tr> |
|
| 113 |
+ <td class="thead">이름</td> |
|
| 114 |
+ <td></td> |
|
| 115 |
+ </tr> |
|
| 116 |
+ <tr> |
|
| 117 |
+ <td class="thead">아이디</td> |
|
| 118 |
+ <td></td> |
|
| 119 |
+ </tr> |
|
| 120 |
+ </table> |
|
| 121 |
+ <div class="flex justify-center "> |
|
| 122 |
+ <button @click="closeBtn" type="button" title="글쓰기" class="new-btn"> |
|
| 123 |
+ 로그인 하기 |
|
| 124 |
+ </button> |
|
| 125 |
+ </div> |
|
| 126 |
+ </div> |
|
| 127 |
+ <!-- 비밀번호 찾기 결과 --> |
|
| 128 |
+ <div v-else-if="selectedTab === 'tab4'"> |
|
| 129 |
+ <div class="flex justify-center mt30"> |
|
| 130 |
+ <p class="title2">비밀번호 찾기가 완료 되었습니다.</p> |
|
| 131 |
+ </div> |
|
| 132 |
+ <table class="find-table mt30 mb30"> |
|
| 133 |
+ <tr> |
|
| 134 |
+ <td class="thead">이름</td> |
|
| 135 |
+ <td></td> |
|
| 136 |
+ </tr> |
|
| 137 |
+ <tr> |
|
| 138 |
+ <td class="thead">비밀번호</td> |
|
| 139 |
+ <td></td> |
|
| 140 |
+ </tr> |
|
| 141 |
+ </table> |
|
| 142 |
+ <div class="flex justify-center "> |
|
| 143 |
+ <button @click="closeBtn" type="button" title="글쓰기" class="new-btn"> |
|
| 144 |
+ 로그인 하기 |
|
| 145 |
+ </button> |
|
| 146 |
+ </div> |
|
| 147 |
+ </div> |
|
| 148 |
+ </div> |
|
| 149 |
+ </div> |
|
| 30 | 150 |
</template> |
| 31 | 151 |
|
| 32 | 152 |
<script> |
| 153 |
+import SvgIcon from '@jamescoyle/vue-icon'; |
|
| 154 |
+import { mdiMagnify, mdiWindowClose } from '@mdi/js';
|
|
| 33 | 155 |
export default {
|
| 34 | 156 |
data() {
|
| 35 | 157 |
return {
|
| 158 |
+ selectedTab: 'tab1', |
|
| 36 | 159 |
username: '', |
| 37 |
- password: '' |
|
| 160 |
+ password: '', |
|
| 161 |
+ mdiWindowClose: mdiWindowClose, |
|
| 162 |
+ showModal: false, |
|
| 163 |
+ searchOpen: false, |
|
| 38 | 164 |
} |
| 39 | 165 |
}, |
| 40 | 166 |
methods: {
|
... | ... | @@ -43,10 +169,23 @@ |
| 43 | 169 |
console.log('Username:', this.username);
|
| 44 | 170 |
console.log('Password:', this.password);
|
| 45 | 171 |
}, |
| 46 |
- goToApp() {
|
|
| 47 |
- this.$router.push('/');
|
|
| 48 |
- } |
|
| 49 |
- } |
|
| 172 |
+ goToPage(page) {
|
|
| 173 |
+ this.$router.push({ name: page });
|
|
| 174 |
+ }, |
|
| 175 |
+ closeModal() {
|
|
| 176 |
+ this.showModal = false; |
|
| 177 |
+ }, |
|
| 178 |
+ buttonSearch() {
|
|
| 179 |
+ this.searchOpen = true; |
|
| 180 |
+ }, |
|
| 181 |
+ closeBtn() {
|
|
| 182 |
+ this.searchOpen = false; |
|
| 183 |
+ |
|
| 184 |
+ }, |
|
| 185 |
+ }, |
|
| 186 |
+ components: {
|
|
| 187 |
+ SvgIcon |
|
| 188 |
+ }, |
|
| 50 | 189 |
} |
| 51 | 190 |
</script> |
| 52 | 191 |
|
--- client/views/layout/Header.vue
+++ client/views/layout/Header.vue
... | ... | @@ -1,19 +1,53 @@ |
| 1 | 1 |
<template> |
| 2 | 2 |
<div class="header flex justify-end"> |
| 3 | 3 |
<img src="../../resources/img/setting.png" alt=""> |
| 4 |
- <img src="../../resources/img/icon2.png" alt=""> |
|
| 4 |
+ <div class="notice" @click="buttonSearch"><img src="../../resources/img/icon2.png" alt=""> |
|
| 5 |
+ <p>1</p> |
|
| 6 |
+ </div> |
|
| 5 | 7 |
<img src="../../resources/img/img03.png" alt=""> |
| 8 |
+ <div class="popup-wrap" v-show="searchOpen"> |
|
| 9 |
+ <div class="popup-box "> |
|
| 10 |
+ <div class="flex mb10 justify-between"> |
|
| 11 |
+ <p class="popup-title" >알림</p> |
|
| 12 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 13 |
+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 14 |
+ </button> |
|
| 15 |
+ </div> |
|
| 16 |
+ <article class="flex justify-between mt20"> |
|
| 17 |
+ <img style="width: fit-content;" src="../../resources/img/img200_13p.png" alt=""> |
|
| 18 |
+ <p class="title1 ml20" style="width: 60%;">1반친구들</p> |
|
| 19 |
+ <button type="button" title="글쓰기" class="new-btn"> |
|
| 20 |
+ 자세히 보기 |
|
| 21 |
+ </button> |
|
| 22 |
+ </article> |
|
| 23 |
+ </div> |
|
| 24 |
+ </div> |
|
| 6 | 25 |
</div> |
| 26 |
+ |
|
| 7 | 27 |
</template> |
| 8 | 28 |
|
| 9 | 29 |
<script> |
| 30 |
+import SvgIcon from '@jamescoyle/vue-icon'; |
|
| 31 |
+import { mdiMagnify, mdiWindowClose } from '@mdi/js';
|
|
| 10 | 32 |
export default {
|
| 11 |
- data () {
|
|
| 33 |
+ data() {
|
|
| 12 | 34 |
return {
|
| 35 |
+ mdiWindowClose: mdiWindowClose, |
|
| 36 |
+ showModal: false, |
|
| 37 |
+ searchOpen: false, |
|
| 13 | 38 |
} |
| 14 | 39 |
}, |
| 15 | 40 |
methods: {
|
| 41 |
+ closeModal() {
|
|
| 42 |
+ this.showModal = false; |
|
| 43 |
+ }, |
|
| 44 |
+ buttonSearch() {
|
|
| 45 |
+ this.searchOpen = true; |
|
| 46 |
+ }, |
|
| 47 |
+ closeBtn() {
|
|
| 48 |
+ this.searchOpen = false; |
|
| 16 | 49 |
|
| 50 |
+ }, |
|
| 17 | 51 |
}, |
| 18 | 52 |
watch: {
|
| 19 | 53 |
|
... | ... | @@ -21,8 +55,25 @@ |
| 21 | 55 |
computed: {
|
| 22 | 56 |
|
| 23 | 57 |
}, |
| 58 |
+ components: {
|
|
| 59 |
+ SvgIcon |
|
| 60 |
+ }, |
|
| 24 | 61 |
mounted() {
|
| 25 | 62 |
console.log('Header mounted');
|
| 26 | 63 |
} |
| 27 | 64 |
} |
| 28 |
-</script>(파일 끝에 줄바꿈 문자 없음) |
|
| 65 |
+</script> |
|
| 66 |
+<style scoped> |
|
| 67 |
+.popup-wrap {
|
|
| 68 |
+ position: fixed; |
|
| 69 |
+ background-color: transparent; |
|
| 70 |
+ width: fit-content; |
|
| 71 |
+ height: fit-content; |
|
| 72 |
+ z-index: 10; |
|
| 73 |
+} |
|
| 74 |
+.popup-box{
|
|
| 75 |
+ top: 8%; |
|
| 76 |
+ right: 58px; |
|
| 77 |
+ left: 62%; |
|
| 78 |
+} |
|
| 79 |
+</style>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/layout/Side_t.vue
... | ... | @@ -0,0 +1,75 @@ |
| 1 | +<template> | |
| 2 | + <div class="side_t side"> | |
| 3 | + <div class="logo mb25"><img src="../../resources/img/logo2.png" alt=""></div> | |
| 4 | + <div class=" mb30"> | |
| 5 | + <div> | |
| 6 | + <img src="../../resources/img/img16_s.png" alt=""> | |
| 7 | + <div class="mt10" style="width: 100%;"> | |
| 8 | + <p class="name mb10">선생님</p> | |
| 9 | + <p class="mb5">xx중학교</p> | |
| 10 | + | |
| 11 | + </div> | |
| 12 | + </div> | |
| 13 | + <hr> | |
| 14 | + <div class="mb10"> | |
| 15 | + <span @click="increaseProgress">평균 학습 진행률</span> | |
| 16 | + <span class="brown ">{{ progress }}%</span> | |
| 17 | + </div> | |
| 18 | + <progress-bar :progress="progress"></progress-bar> | |
| 19 | + <hr> | |
| 20 | + </div> | |
| 21 | + <div class="side-menu"> | |
| 22 | + <div> | |
| 23 | + <details> | |
| 24 | + <summary>반 관리 | |
| 25 | + </summary> | |
| 26 | + <router-link to="/Home.page" class="tpt">홈</router-link> | |
| 27 | + <router-link to="/Board.page" class="tpt">게시판</router-link> | |
| 28 | + <router-link to="/StudentList.page" class="tpt">학생목록</router-link> | |
| 29 | + <router-link to="/textbook.page" class="tpt">교재</router-link> | |
| 30 | + </details> | |
| 31 | + </div> | |
| 32 | + <div> | |
| 33 | + <details> | |
| 34 | + <summary>교재 관리</summary> | |
| 35 | + <router-link to="/Board.page" class="tpt">홈</router-link> | |
| 36 | + <router-link to="/Board.page" class="tpt">게시판</router-link> | |
| 37 | + <router-link to="/Board.page" class="tpt">학생목록</router-link> | |
| 38 | + <router-link to="/Board.page" class="tpt">교재</router-link> | |
| 39 | + </details> | |
| 40 | + </div> | |
| 41 | + </div> | |
| 42 | + </div> | |
| 43 | +</template> | |
| 44 | + | |
| 45 | +<script> | |
| 46 | +import ProgressBar from '../component/ProgressBar.vue'; | |
| 47 | + | |
| 48 | +export default { | |
| 49 | + data () { | |
| 50 | + return { | |
| 51 | + progress: 20 | |
| 52 | + } | |
| 53 | + }, | |
| 54 | + methods: { | |
| 55 | + increaseProgress() { | |
| 56 | + if (this.progress < 100) { | |
| 57 | + this.progress += 10; | |
| 58 | + } | |
| 59 | + } | |
| 60 | + | |
| 61 | + }, | |
| 62 | + watch: { | |
| 63 | + | |
| 64 | + }, | |
| 65 | + computed: { | |
| 66 | + | |
| 67 | + }, | |
| 68 | + components: { | |
| 69 | + ProgressBar | |
| 70 | + }, | |
| 71 | + mounted() { | |
| 72 | + console.log('Menu mounted'); | |
| 73 | + } | |
| 74 | +} | |
| 75 | +</script>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
... | ... | @@ -2,6 +2,7 @@ |
| 2 | 2 |
|
| 3 | 3 |
// import App from "../App.vue"; |
| 4 | 4 |
import login from "../Login.vue" |
| 5 |
+import Join from "../Join.vue" |
|
| 5 | 6 |
import MyPage from './main/MyPage.vue'; |
| 6 | 7 |
import MyPlan from './main/MyPlan.vue'; |
| 7 | 8 |
import Dashboard from './main/Dashboard.vue'; |
... | ... | @@ -53,9 +54,26 @@ |
| 53 | 54 |
import Main_p from "./parents/Main_p.vue"; |
| 54 | 55 |
|
| 55 | 56 |
import Main_t from "./teacher/Main_t.vue"; |
| 57 |
+import Board from "./teacher/Board.vue"; |
|
| 58 |
+import noticeInsert from "./teacher/noticeInsert.vue"; |
|
| 59 |
+import noticeDetail from "./teacher/noticeDetail.vue"; |
|
| 60 |
+import StudentList from "./teacher/StudentList.vue"; |
|
| 61 |
+import StudentDetail from "./teacher/StudentDetail.vue"; |
|
| 62 |
+import textbook from "./teacher/textbook.vue"; |
|
| 63 |
+import TextBookDetail from "./teacher/TextBookDetail.vue"; |
|
| 64 |
+import Home from "./teacher/Home.vue"; |
|
| 65 |
+import ClassDetail from "./teacher/ClassDetail.vue"; |
|
| 66 |
+import TextList from "./teacher/TextList.vue"; |
|
| 67 |
+import TextInsert from "./teacher/TextInsert.vue"; |
|
| 68 |
+import QuestionList from "./teacher/QuestionList.vue"; |
|
| 69 |
+import QuestionInsert from "./teacher/QuestionInsert.vue"; |
|
| 70 |
+import VocaList from "./teacher/VocaList.vue"; |
|
| 71 |
+import ExamList from "./teacher/ExamList.vue"; |
|
| 72 |
+import ExamDetail from "./teacher/ExamDetail.vue"; |
|
| 56 | 73 |
|
| 57 | 74 |
const routes = [ |
| 58 | 75 |
{ path: '/login.page', name: 'login', component: login },
|
| 76 |
+ { path: '/Join.page', name: 'Join', component: Join },
|
|
| 59 | 77 |
// { path: '/App.page', name: 'App', component: App,
|
| 60 | 78 |
// children:[ |
| 61 | 79 |
|
... | ... | @@ -124,7 +142,26 @@ |
| 124 | 142 |
/* 부모님 */ |
| 125 | 143 |
{ path: '/Main_p.page', name: 'Main_p', component: Main_p },
|
| 126 | 144 |
/* 선생님 */ |
| 127 |
- { path: '/Main_t.page', name: 'Main_t', component: Main_t },
|
|
| 145 |
+ { path: '/Main_t.page', name: 'Main_t', component: Main_t ,
|
|
| 146 |
+ children: [ |
|
| 147 |
+ { path: '/Board.page', name: 'Board', component: Board },
|
|
| 148 |
+ { path: '/noticeInsert.page', name: 'noticeInsert', component: noticeInsert },
|
|
| 149 |
+ { path: '/noticeDetail.page', name: 'noticeDetail', component: noticeDetail },
|
|
| 150 |
+ { path: '/Home.page', name: 'Home', component: Home },
|
|
| 151 |
+ { path: '/ClassDetail.page', name: 'ClassDetail', component: ClassDetail },
|
|
| 152 |
+ { path: '/StudentList.page', name: 'StudentList', component: StudentList },
|
|
| 153 |
+ { path: '/StudentDetail.page', name: 'StudentDetail', component: StudentDetail },
|
|
| 154 |
+ { path: '/textbook.page', name: 'textbook', component: textbook },
|
|
| 155 |
+ { path: '/TextBookDetail.page', name: 'TextBookDetail', component: TextBookDetail },
|
|
| 156 |
+ { path: '/TextList.page', name: 'TextList', component: TextList },
|
|
| 157 |
+ { path: '/TextInsert.page', name: 'TextInsert', component: TextInsert },
|
|
| 158 |
+ { path: '/QuestionList.page', name: 'QuestionList', component: QuestionList },
|
|
| 159 |
+ { path: '/QuestionInsert.page', name: 'QuestionInsert', component: QuestionInsert },
|
|
| 160 |
+ { path: '/VocaList.page', name: 'VocaList', component: VocaList },
|
|
| 161 |
+ { path: '/ExamList.page', name: 'ExamList', component: ExamList },
|
|
| 162 |
+ { path: '/ExamDetail.page', name: 'ExamDetail', component: ExamDetail },
|
|
| 163 |
+ ], |
|
| 164 |
+ }, |
|
| 128 | 165 |
]; |
| 129 | 166 |
|
| 130 | 167 |
const AppRouter = createRouter({
|
--- client/views/pages/Login copy.vue
... | ... | @@ -1,53 +0,0 @@ |
| 1 | -<template> | |
| 2 | - <div class="login-container"> | |
| 3 | - <img class="login-bg" src="../../resources/img/bg.png" alt=""> | |
| 4 | - <div class="login "> | |
| 5 | - <div class="logo flex justify-end"><img src="../../resources/img/logo.png" alt=""></div> | |
| 6 | - | |
| 7 | - <div class="login-box"> | |
| 8 | - <div class="flex align-center justify-start mb40"> | |
| 9 | - <img src="../../resources/img/icon1.png" alt="" class="mr20"> | |
| 10 | - <h2> 로그인 하기</h2> | |
| 11 | - </div> | |
| 12 | - <form @submit.prevent="submitForm" class="login-form "> | |
| 13 | - <div class="mb30"> | |
| 14 | - <p class="mb15" for="username">아이디</p> | |
| 15 | - <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요."> | |
| 16 | - </div> | |
| 17 | - <div> | |
| 18 | - <p class="mb15" for="password">비밀번호</p> | |
| 19 | - <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> | |
| 20 | - </div> | |
| 21 | - <button class="login-btn mt50" type="submit" @click="goToApp"><img src="../../resources/img/button.png" alt=""> <p >로그인</p></button> | |
| 22 | - <div class="flex justify-between mt40"> | |
| 23 | - <p class="underline">아이디/비밀번호 찾기</p> | |
| 24 | - <p class="underline">회원가입</p> | |
| 25 | - </div> | |
| 26 | - </form> | |
| 27 | - </div> | |
| 28 | - </div> | |
| 29 | - </div> | |
| 30 | -</template> | |
| 31 | - | |
| 32 | -<script> | |
| 33 | -export default { | |
| 34 | - data() { | |
| 35 | - return { | |
| 36 | - username: '', | |
| 37 | - password: '' | |
| 38 | - } | |
| 39 | - }, | |
| 40 | - methods: { | |
| 41 | - submitForm() { | |
| 42 | - // 여기에 로그인 로직을 추가하세요. | |
| 43 | - console.log('Username:', this.username); | |
| 44 | - console.log('Password:', this.password); | |
| 45 | - }, | |
| 46 | - goToApp() { | |
| 47 | - this.$router.push('/app.page'); | |
| 48 | - } | |
| 49 | - } | |
| 50 | -} | |
| 51 | -</script> | |
| 52 | - | |
| 53 | -<style scoped></style>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/pages/main/Chapter/Chapter2.vue
+++ client/views/pages/main/Chapter/Chapter2.vue
... | ... | @@ -7,7 +7,12 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">step1. Hello WORLD</p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20"></p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 11 | 16 |
|
| 12 | 17 |
<div class="flex justify-center"> |
| 13 | 18 |
<div class="vocaGroup"> |
--- client/views/pages/main/Chapter/Chapter2_1.vue
+++ client/views/pages/main/Chapter/Chapter2_1.vue
... | ... | @@ -7,9 +7,13 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt40 ml50">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요!</p> |
|
| 11 |
- |
|
| 12 |
- <div class="flex justify-center mt50"> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 16 |
+ <div class="flex justify-center "> |
|
| 13 | 17 |
<div class="readGroup"> |
| 14 | 18 |
<section > |
| 15 | 19 |
<div class="imgGroup flex justify-center"> |
... | ... | @@ -18,7 +22,7 @@ |
| 18 | 22 |
</div> |
| 19 | 23 |
|
| 20 | 24 |
</div> |
| 21 |
- <article class="mt30"> |
|
| 25 |
+ <article > |
|
| 22 | 26 |
<input type="text" class="speak mb25" placeholder="오늘 배운 단어를 말해보세요!"> |
| 23 | 27 |
<p class="read-ai"><img style="margin-top: -5px;" src="../../../../resources/img/img43_s.png" alt=""></p> |
| 24 | 28 |
</article> |
--- client/views/pages/main/Chapter/Chapter2_10.vue
+++ client/views/pages/main/Chapter/Chapter2_10.vue
... | ... | @@ -7,10 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt80 flex align-center justify-center" style="gap: 113px;"> |
|
| 17 |
+ <div class="flex align-center justify-center" style="gap: 113px;"> |
|
| 14 | 18 |
<div class="imgGroup"> |
| 15 | 19 |
<div class="flex" style="gap: 60px;"> |
| 16 | 20 |
<button><img src="../../../../resources/img/img82_42s.png" alt=""> |
... | ... | @@ -25,7 +29,7 @@ |
| 25 | 29 |
</div> |
| 26 | 30 |
<div class="pickGroup"> |
| 27 | 31 |
<div> |
| 28 |
- <article class="flex justify-center" style="gap: 60px;"> |
|
| 32 |
+ <article class="flex justify-center mb50" style="gap: 60px;"> |
|
| 29 | 33 |
<img src="../../../../resources/img/img84_42s.png" alt=""> |
| 30 | 34 |
<div class="flex"> |
| 31 | 35 |
<button><img src="../../../../resources/img/img136_71s.png" alt=""> |
... | ... | @@ -34,7 +38,7 @@ |
| 34 | 38 |
<p>a</p> |
| 35 | 39 |
</div> |
| 36 | 40 |
</article> |
| 37 |
- <article class="flex justify-center" style="gap: 60px;"> |
|
| 41 |
+ <article class="flex justify-center mb50" style="gap: 60px;"> |
|
| 38 | 42 |
<img src="../../../../resources/img/img85_42s.png" alt=""> |
| 39 | 43 |
<div class="flex"> |
| 40 | 44 |
<button><img src="../../../../resources/img/img136_71s.png" alt=""> |
... | ... | @@ -120,7 +124,6 @@ |
| 120 | 124 |
left: 50%; |
| 121 | 125 |
transform: translate(-50%, -50%); |
| 122 | 126 |
} |
| 123 |
-.pickGroup article{margin-bottom: 50px;}
|
|
| 124 | 127 |
.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
|
| 125 | 128 |
.pickGroup article >div >p {
|
| 126 | 129 |
font-size: 64px; |
--- client/views/pages/main/Chapter/Chapter2_11.vue
+++ client/views/pages/main/Chapter/Chapter2_11.vue
... | ... | @@ -7,10 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">빈칸에 들어갈 알맞은 낱말을 골라 문장 완성시키기</p> |
|
| 11 |
- <p class="subtitle2 ">앗! 연못에 도끼를 빠뜨렸어! 둘 중에 어느 도끼가 내 도끼였지?</p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">빈칸에 들어갈 알맞은 낱말을 골라 문장 완성시키기</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt50 text-ct"> |
|
| 17 |
+ <div class=" text-ct"> |
|
| 14 | 18 |
<div class="imgGroup flex align-start justify-center mt30"> |
| 15 | 19 |
<img src="../../../../resources/img/img87_43s.png" alt=""> |
| 16 | 20 |
<div class="inputGroup" > |
... | ... | @@ -18,7 +22,7 @@ |
| 18 | 22 |
</div> |
| 19 | 23 |
|
| 20 | 24 |
</div> |
| 21 |
- <div class="pickGroup mt40"> |
|
| 25 |
+ <div class="pickGroup"> |
|
| 22 | 26 |
<article class="flex justify-center" style="gap: 60px; bottom: 159px; |
| 23 | 27 |
left: 242px;"> |
| 24 | 28 |
<div class="flex"> |
... | ... | @@ -71,6 +75,8 @@ |
| 71 | 75 |
} |
| 72 | 76 |
</script> |
| 73 | 77 |
<style scoped> |
| 78 |
+ .imgGroup{ margin-left: 183px;
|
|
| 79 |
+ width: auto;} |
|
| 74 | 80 |
.pickGroup button {
|
| 75 | 81 |
position: relative; |
| 76 | 82 |
margin-right: 30px; |
--- client/views/pages/main/Chapter/Chapter2_12.vue
+++ client/views/pages/main/Chapter/Chapter2_12.vue
... | ... | @@ -7,10 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_11')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">단어 짝 맞추기 게임</p> |
|
| 11 |
- <p class="subtitle2 ">앗...책들이 엉망이야 단어책과 뜻책을 맞추어 책을 책꽃이로 돌려놓자!</p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">단어 짝 맞추기 게임</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt50 text-ct"> |
|
| 17 |
+ <div class="text-ct"> |
|
| 14 | 18 |
<div class="pickGroup flex align-center justify-center mt50" style="gap: 100px;"> |
| 15 | 19 |
<div> |
| 16 | 20 |
<div class="mb20"> |
... | ... | @@ -42,10 +46,16 @@ |
| 42 | 46 |
</button> |
| 43 | 47 |
</div> |
| 44 | 48 |
</div> |
| 45 |
- <div class="flex" style="gap: 20px;"> |
|
| 46 |
- <img src="../../../../resources/img/img99_45s.png" alt=""> |
|
| 49 |
+ <div class="dropGroup" style="gap: 20px;"> |
|
| 50 |
+ <img src="../../../../resources/img/img160_43s.png" alt=""> |
|
| 51 |
+ <div class="dropimg"> |
|
| 52 |
+ <img style="top: 21px;" src="../../../../resources/img/img161_44s.png" alt=""> |
|
| 53 |
+ <img style="top: 119px;" src="../../../../resources/img/img162_43s.png" alt=""> |
|
| 54 |
+ <img style="top: 215px;" src="../../../../resources/img/img163_43s.png" alt=""> |
|
| 55 |
+ <img style="bottom: 36px;" src="../../../../resources/img/img164_43s.png" alt=""> |
|
| 56 |
+ </div> |
|
| 47 | 57 |
</div> |
| 48 |
- |
|
| 58 |
+ |
|
| 49 | 59 |
</div> |
| 50 | 60 |
|
| 51 | 61 |
<div class="time-bg"> |
... | ... | @@ -102,6 +112,8 @@ |
| 102 | 112 |
} |
| 103 | 113 |
</script> |
| 104 | 114 |
<style scoped> |
| 115 |
+.dropGroup{position: relative;}
|
|
| 116 |
+.dropimg img{position: absolute; left: 27px;}
|
|
| 105 | 117 |
.pickGroup button {
|
| 106 | 118 |
position: relative; |
| 107 | 119 |
margin: 10px 40px; |
--- client/views/pages/main/Chapter/Chapter2_13.vue
+++ client/views/pages/main/Chapter/Chapter2_13.vue
... | ... | @@ -7,13 +7,17 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">객관식 미니게임</p> |
|
| 11 |
- <p class="subtitle2 ">헉... 물폭탄이 작동해서 물난리가 나기 전에 알맞은 선을 잘라 해제해야겠어!</p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">객관식 미니게임</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt50 text-ct"> |
|
| 14 |
- <div class="imgGroup flex align-center justify-center mt30"> |
|
| 17 |
+ <div class="text-ct"> |
|
| 18 |
+ <div class="imgGroup flex align-center justify-center"> |
|
| 15 | 19 |
<div class="flex" style="gap: 20px; position: relative;"> |
| 16 |
- <img src="../../../../resources/img/img105_46s.png" alt=""> |
|
| 20 |
+ <img src="../../../../resources/img/img105_46s.png" alt="" style="width: 90%;"> |
|
| 17 | 21 |
<div class="time-bg"> |
| 18 | 22 |
<div> |
| 19 | 23 |
<div class="time"> |
... | ... | @@ -22,11 +26,11 @@ |
| 22 | 26 |
</div> |
| 23 | 27 |
</div> |
| 24 | 28 |
</div> |
| 25 |
- <div class="textbox mt40"> |
|
| 29 |
+ <div class="textbox "> |
|
| 26 | 30 |
<p class="title1 text-lf"> 문제</p> |
| 27 | 31 |
<div class="pickGroup"> |
| 28 | 32 |
<div> |
| 29 |
- <article class="flex mb20" style="gap: 60px;"> |
|
| 33 |
+ <article class="flex mb10" style="gap: 60px;"> |
|
| 30 | 34 |
<div class="flex align-center"> |
| 31 | 35 |
<button><img src="../../../../resources/img/img136_71s.png" alt=""> |
| 32 | 36 |
<p>1</p> |
... | ... | @@ -34,7 +38,7 @@ |
| 34 | 38 |
<p class="red">a</p> |
| 35 | 39 |
</div> |
| 36 | 40 |
</article> |
| 37 |
- <article class="flex mb20" style="gap: 60px;"> |
|
| 41 |
+ <article class="flex mb10" style="gap: 60px;"> |
|
| 38 | 42 |
<div class="flex align-center"> |
| 39 | 43 |
<button><img src="../../../../resources/img/img136_71s.png" alt=""> |
| 40 | 44 |
<p>2</p> |
... | ... | @@ -42,7 +46,7 @@ |
| 42 | 46 |
<p class="orange">a</p> |
| 43 | 47 |
</div> |
| 44 | 48 |
</article> |
| 45 |
- <article class="flex mb20" style="gap: 60px;"> |
|
| 49 |
+ <article class="flex mb10" style="gap: 60px;"> |
|
| 46 | 50 |
<div class="flex align-center"> |
| 47 | 51 |
<button><img src="../../../../resources/img/img136_71s.png" alt=""> |
| 48 | 52 |
<p>3</p> |
... | ... | @@ -60,8 +64,9 @@ |
| 60 | 64 |
</article> |
| 61 | 65 |
</div> |
| 62 | 66 |
</div> |
| 63 |
- |
|
| 64 |
- <div class="flex justify-center" style="gap: 20px;"> |
|
| 67 |
+ <!-- 오답일 경우 아래의 이미지가 보여야함 --> |
|
| 68 |
+ <div class="flex justify-center wrong-anwser" style="gap: 20px;"> |
|
| 69 |
+ <img src="../../../../resources/img/img165_46s.png" alt=""> |
|
| 65 | 70 |
</div> |
| 66 | 71 |
|
| 67 | 72 |
</div> |
... | ... | @@ -78,6 +83,7 @@ |
| 78 | 83 |
export default {
|
| 79 | 84 |
data() {
|
| 80 | 85 |
return {
|
| 86 |
+ timer:'00' |
|
| 81 | 87 |
} |
| 82 | 88 |
}, |
| 83 | 89 |
methods: {
|
... | ... | @@ -112,10 +118,14 @@ |
| 112 | 118 |
} |
| 113 | 119 |
</script> |
| 114 | 120 |
<style scoped> |
| 115 |
-.textbox{position: absolute; top: 114px;
|
|
| 121 |
+.wrong-anwser{position: absolute; top: 51%;
|
|
| 122 |
+ left: 102%; |
|
| 123 |
+ transform: translate(-50%, -50%);} |
|
| 124 |
+.textbox{position: absolute; top: 140px;
|
|
| 116 | 125 |
left: 45px;} |
| 117 |
- .time-bg{ top: 137px;}
|
|
| 118 |
- .pickGroup{margin: 50px 0 0 180px;}
|
|
| 126 |
+ .time-bg{ top: 136px;
|
|
| 127 |
+ right: 124px;} |
|
| 128 |
+ .pickGroup{margin: 45px 0 0 180px;}
|
|
| 119 | 129 |
.pickGroup button {
|
| 120 | 130 |
position: relative; |
| 121 | 131 |
margin-right: 30px; |
--- client/views/pages/main/Chapter/Chapter2_2.vue
+++ client/views/pages/main/Chapter/Chapter2_2.vue
... | ... | @@ -7,9 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_1')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">카드를 뒤집어 보세요.</p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">카드를 뒤집어 보세요.</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 11 | 16 |
|
| 12 |
- <div class="imgGroup mt80"> |
|
| 17 |
+ <div class="imgGroup"> |
|
| 13 | 18 |
<div class="flex justify-center" style="gap: 90px;"> |
| 14 | 19 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)"> |
| 15 | 20 |
<img :src="item.imgSrc1" > |
... | ... | @@ -29,10 +34,10 @@ |
| 29 | 34 |
data() {
|
| 30 | 35 |
return {
|
| 31 | 36 |
items: [ |
| 32 |
- { imgSrc1: 'http://localhost/client/build/d7b87b0aee959597bc7a8ff59c92e172.png', imgSrc2: 'http://localhost/client/build/eeb66d34a14f431520977cac0a89adf1.png', isSecondImageVisible: false },
|
|
| 33 |
- { imgSrc1: 'http://localhost/client/build/75be1e0527bdc23177d46d5525646b57.png', imgSrc2: 'http://localhost/client/build/f1c52445fc7b070642d6d4add5208383.png', isSecondImageVisible: false },
|
|
| 34 |
- { imgSrc1: 'http://localhost/client/build/5351236e4d5e2d68b4c0d475c2a6bad2.png', imgSrc2: 'http://localhost/client/build/82edbab93426e02a09ee3518801c956e.png', isSecondImageVisible: false },
|
|
| 35 |
- { imgSrc1: 'http://localhost/client/build/c9ab71d4ac740b625b6ed54611775727.png', imgSrc2: 'http://localhost/client/build/1fa02c19c1f627c33be9dcb2de41b869.png', isSecondImageVisible: false }
|
|
| 37 |
+ { imgSrc1: 'client/resources/img/img49_s_1.png', imgSrc2: 'client/resources/img/img50_s_2.png', isSecondImageVisible: false },
|
|
| 38 |
+ { imgSrc1: 'client/resources/img/img49_s_2.png', imgSrc2: 'client/resources/img/img50_s_3.png', isSecondImageVisible: false },
|
|
| 39 |
+ { imgSrc1: 'client/resources/img/img49_s_3.png', imgSrc2: 'client/resources/img/img50_s_4.png', isSecondImageVisible: false },
|
|
| 40 |
+ { imgSrc1: 'client/resources/img/img49_s_4.png', imgSrc2: 'client/resources/img/img50_s_1.png', isSecondImageVisible: false }
|
|
| 36 | 41 |
] |
| 37 | 42 |
}; |
| 38 | 43 |
}, |
--- client/views/pages/main/Chapter/Chapter2_3.vue
+++ client/views/pages/main/Chapter/Chapter2_3.vue
... | ... | @@ -7,9 +7,12 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">다음을 듣고 따라 말하세요.</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 12 |
- <div class="time-bg"> |
|
| 10 |
+ <p class="subtitle2 "></p><p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">다음을 듣고 따라 말하세요.</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div><div class="time-bg"> |
|
| 13 | 16 |
<div> |
| 14 | 17 |
<div class="time"> |
| 15 | 18 |
<p class="second">{{timer}}</p>
|
--- client/views/pages/main/Chapter/Chapter2_4.vue
+++ client/views/pages/main/Chapter/Chapter2_4.vue
... | ... | @@ -8,14 +8,18 @@ |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
|
| 9 | 9 |
</div> |
| 10 | 10 |
<div class="content title-box"> |
| 11 |
- <p class="title mt25 title-bg">다음을 듣고 맞는 단어를 선택하세요.</p> |
|
| 12 |
- <p class="subtitle2 "></p> |
|
| 11 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 12 |
+ <div class="flex align-center mb30"> |
|
| 13 |
+ <p class="subtitle2 mr20">다음을 듣고 맞는 단어를 선택하세요.</p> |
|
| 14 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 15 |
+ </button> --> |
|
| 16 |
+ </div> |
|
| 13 | 17 |
|
| 14 | 18 |
|
| 15 | 19 |
<div class="imgGroup"> |
| 16 | 20 |
|
| 17 | 21 |
<div class="flex justify-center"> |
| 18 |
- <div class="btnGroup mt30 flex" style="gap: 60px;"> |
|
| 22 |
+ <div class="btnGroup flex" style="gap: 60px;"> |
|
| 19 | 23 |
<button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" |
| 20 | 24 |
:class="{ active: selectedIndex === index }">
|
| 21 | 25 |
<img :src="item.imgSrc1"> |
--- client/views/pages/main/Chapter/Chapter2_5.vue
+++ client/views/pages/main/Chapter/Chapter2_5.vue
... | ... | @@ -7,10 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">아래 지문을 보고 빈칸을 채워주세요.</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">아래 지문을 보고 빈칸을 채워주세요.</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt50 text-ct"> |
|
| 17 |
+ <div class="text-ct"> |
|
| 14 | 18 |
<p class="title1 mb40" style="color: #464749;">the sun rises in the</p> |
| 15 | 19 |
<img src="../../../../resources/img/img65_37s.png" alt=""> |
| 16 | 20 |
<div class="dropGroup flex align-center justify-center mt30"> |
--- client/views/pages/main/Chapter/Chapter2_6.vue
+++ client/views/pages/main/Chapter/Chapter2_6.vue
... | ... | @@ -7,11 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 12 |
- |
|
| 13 |
- <div class="mt50 text-ct"> |
|
| 14 |
- <div class="dropGroup mt30"> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 16 |
+ <div class="text-ct"> |
|
| 17 |
+ <div class="dropGroup "> |
|
| 15 | 18 |
<div class="flex justify-center"> |
| 16 | 19 |
<div class="popTxt" id="drop1"> |
| 17 | 20 |
<img src="../../../../resources/img/img66_38s_1.png" alt="" @click="showButton(1)" > |
... | ... | @@ -28,7 +31,7 @@ |
| 28 | 31 |
</div> |
| 29 | 32 |
|
| 30 | 33 |
</div> |
| 31 |
- <div class="dragGroup mt40"> |
|
| 34 |
+ <div class="dragGroup"> |
|
| 32 | 35 |
<article style=" right: 0; |
| 33 | 36 |
top: 36%; " @click="handleDrag(1)" v-show="!dragHidden1"> |
| 34 | 37 |
<button id="drag1"> |
--- client/views/pages/main/Chapter/Chapter2_7.vue
+++ client/views/pages/main/Chapter/Chapter2_7.vue
... | ... | @@ -7,11 +7,15 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_6')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt50 text-ct flex justify-center" style="gap: 80px;"> |
|
| 14 |
- <div class="dropGroup flex align-center justify-center mt30"> |
|
| 17 |
+ <div class="text-ct flex justify-center" style="gap: 80px;"> |
|
| 18 |
+ <div class="dropGroup flex align-center justify-center"> |
|
| 15 | 19 |
<div class="flex" style="gap: 20px; position: relative;" > |
| 16 | 20 |
<img src="../../../../resources/img/img70_39s.png" alt=""> |
| 17 | 21 |
<div class="textbox"> |
--- client/views/pages/main/Chapter/Chapter2_8.vue
+++ client/views/pages/main/Chapter/Chapter2_8.vue
... | ... | @@ -7,10 +7,14 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_7')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt80 text-ct"> |
|
| 17 |
+ <div class="text-ct"> |
|
| 14 | 18 |
<div class="dropGroup flex align-center justify-center mt30"> |
| 15 | 19 |
<div style="position: relative;" > |
| 16 | 20 |
<img src="../../../../resources/img/img28_s.png" alt=""> |
... | ... | @@ -23,7 +27,7 @@ |
| 23 | 27 |
|
| 24 | 28 |
</div> |
| 25 | 29 |
</div> |
| 26 |
- <div class="dragGroup mt40"> |
|
| 30 |
+ <div class="dragGroup "> |
|
| 27 | 31 |
<div class="flex justify-center" style="gap: 20px;"> |
| 28 | 32 |
<article style=" right: 0; |
| 29 | 33 |
top: 36%; "><button><img src="../../../../resources/img/img29_s.png" alt=""><p>a</p></button></article> |
--- client/views/pages/main/Chapter/Chapter2_9.vue
+++ client/views/pages/main/Chapter/Chapter2_9.vue
... | ... | @@ -7,28 +7,32 @@ |
| 7 | 7 |
<div class="flex justify-between align-center"> |
| 8 | 8 |
<div class="pre-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
|
| 9 | 9 |
<div class="content title-box"> |
| 10 |
- <p class="title mt25 title-bg">앗! 잉크가 쏟아졌어! 잉크를 지워줘!</p> |
|
| 11 |
- <p class="subtitle2 "></p> |
|
| 10 |
+ <p class="title mt25 title-bg">step2</p> |
|
| 11 |
+ <div class="flex align-center mb30"> |
|
| 12 |
+ <p class="subtitle2 mr20">앗! 잉크가 쏟아졌어! 잉크를 지워줘!</p> |
|
| 13 |
+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt=""> |
|
| 14 |
+ </button> --> |
|
| 15 |
+ </div> |
|
| 12 | 16 |
|
| 13 |
- <div class="mt40 text-ct"> |
|
| 14 |
- <div class="dropGroup flex align-center justify-center mt30"> |
|
| 17 |
+ <div class="text-ct"> |
|
| 18 |
+ <div class="dropGroup flex align-center justify-center"> |
|
| 15 | 19 |
<div style="position: relative;" > |
| 16 |
- <img src="../../../../resources/img/img72_41s_1.png" alt=""> |
|
| 20 |
+ <img src="../../../../resources/img/img72_41s_1.png" alt="" style="width: 90%;"> |
|
| 17 | 21 |
<button style="left: 141px; |
| 18 |
- top: 60px;"><img src="../../../../resources/img/img78_41s.png" alt=""><p>a</p></button> |
|
| 22 |
+ top: 60px;"><img src="../../../../resources/img/img78_41s.png" alt=""></button> |
|
| 19 | 23 |
<button style=" left: 200px; |
| 20 |
- bottom: 86px;"><img src="../../../../resources/img/img79_41s.png" alt=""><p>a</p></button> |
|
| 24 |
+ bottom: 86px;"><img src="../../../../resources/img/img79_41s.png" alt=""></button> |
|
| 21 | 25 |
<button style=" right: 237px; |
| 22 |
- top: 159px;"><img src="../../../../resources/img/img80_41s.png" alt=""><p>a</p></button> |
|
| 26 |
+ top: 159px;"><img src="../../../../resources/img/img80_41s.png" alt=""></button> |
|
| 23 | 27 |
<button style=" right: 159px; |
| 24 |
- bottom: 46px;"><img src="../../../../resources/img/img81_41s.png" alt=""><p>a</p></button> |
|
| 28 |
+ bottom: 46px;"><img src="../../../../resources/img/img81_41s.png" alt=""></button> |
|
| 25 | 29 |
|
| 26 | 30 |
</div> |
| 27 | 31 |
</div> |
| 28 |
- <div class="dragGroup mt40"> |
|
| 32 |
+ <div class="dragGroup"> |
|
| 29 | 33 |
<div > |
| 30 | 34 |
<article style=" left: 83px; |
| 31 |
- top: 69%; "><button><img src="../../../../resources/img/img73_41s.png" alt=""><p>a</p></button></article> |
|
| 35 |
+ top: 69%; "><button><img src="../../../../resources/img/img73_41s.png" alt=""></button></article> |
|
| 32 | 36 |
</div> |
| 33 | 37 |
|
| 34 | 38 |
</div> |
--- client/views/pages/main/Chapter/Chapter3_3.vue
+++ client/views/pages/main/Chapter/Chapter3_3.vue
... | ... | @@ -21,7 +21,7 @@ |
| 21 | 21 |
</div> |
| 22 | 22 |
</div> |
| 23 | 23 |
</div> |
| 24 |
- <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px;"> |
|
| 24 |
+ <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;"> |
|
| 25 | 25 |
<article style="gap: 60px; bottom: 159px; |
| 26 | 26 |
left: 242px;"> |
| 27 | 27 |
<div class="flex align-center"> |
--- client/views/pages/main/Main.vue
+++ client/views/pages/main/Main.vue
... | ... | @@ -1,13 +1,16 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="flex justify-between"> |
|
| 3 |
- <Side></Side> |
|
| 4 |
- <div> |
|
| 5 |
- <Menu></Menu> |
|
| 6 |
- <div class="main-wrap"> |
|
| 7 |
- <router-view /> |
|
| 8 |
- </div> |
|
| 9 |
- </div> |
|
| 10 |
- </div> |
|
| 2 |
+ <div style="padding: 15px 60px 90px 60px; "> |
|
| 3 |
+ <Header></Header> |
|
| 4 |
+ <div class="flex justify-between" > |
|
| 5 |
+ <Side></Side> |
|
| 6 |
+ <div> |
|
| 7 |
+ <Menu></Menu> |
|
| 8 |
+ <div class="main-wrap"> |
|
| 9 |
+ <router-view /> |
|
| 10 |
+ </div> |
|
| 11 |
+ </div> |
|
| 12 |
+ </div> |
|
| 13 |
+ </div> |
|
| 11 | 14 |
|
| 12 | 15 |
</template> |
| 13 | 16 |
|
--- client/views/pages/main/MyPage.vue
+++ client/views/pages/main/MyPage.vue
... | ... | @@ -1,15 +1,159 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div>마이페이지</div> |
|
| 2 |
+ |
|
| 3 |
+ <div class="mypage"> |
|
| 4 |
+ <div class="flex justify-between mb30" style="gap: 30px;"> |
|
| 5 |
+ <div> |
|
| 6 |
+ <div class="title-box flex justify-between mb20"> |
|
| 7 |
+ <p class="title">입장하기</p> |
|
| 8 |
+ <div class="flex align-center look-btn"><p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div> |
|
| 9 |
+ </div> |
|
| 10 |
+ <div class="wrap " style="width: 82rem;"> |
|
| 11 |
+ <section class="flex" style="gap: 20px;"> |
|
| 12 |
+ <div class="class flex justify-between"> |
|
| 13 |
+ <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
|
|
| 14 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 15 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 16 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 17 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 18 |
+ </div> |
|
| 19 |
+ <div class="text mt10"> |
|
| 20 |
+ <p class="title1 mb10">A반</p> |
|
| 21 |
+ <span class="member">20명</span> |
|
| 22 |
+ </div> |
|
| 23 |
+ </div> |
|
| 24 |
+ <div class="class flex justify-between"> |
|
| 25 |
+ <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
|
|
| 26 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 27 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 28 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 29 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 30 |
+ </div> |
|
| 31 |
+ <div class="text mt10"> |
|
| 32 |
+ <p class="title1 mb10">A반</p> |
|
| 33 |
+ <span class="member">20명</span> |
|
| 34 |
+ </div> |
|
| 35 |
+ </div> |
|
| 36 |
+ <div class="class flex justify-between"> |
|
| 37 |
+ <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
|
|
| 38 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 39 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 40 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 41 |
+ <div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
|
| 42 |
+ </div> |
|
| 43 |
+ <div class="text mt10"> |
|
| 44 |
+ <p class="title1 mb10">A반</p> |
|
| 45 |
+ <span class="member">20명</span> |
|
| 46 |
+ </div> |
|
| 47 |
+ </div> |
|
| 48 |
+ </section> |
|
| 49 |
+ </div> |
|
| 50 |
+ </div> |
|
| 51 |
+ <div > |
|
| 52 |
+ <div class="title-box flex justify-between mb20"> |
|
| 53 |
+ <p class="title">사진첩</p> |
|
| 54 |
+ </div> |
|
| 55 |
+ <div class="photobook"> |
|
| 56 |
+ <div class="flex justify-between"> |
|
| 57 |
+ <div class="box" style="gap: 5px;" @click="goToPage('ClassDetail')">
|
|
| 58 |
+ <div><img src="../../../resources/img/img198_12p.png" alt=""></div> |
|
| 59 |
+ </div> |
|
| 60 |
+ <div class="text mt10"> |
|
| 61 |
+ <p class="title1 mb10">나의 사진첩</p> |
|
| 62 |
+ <button @click="selectedTab = 'tab4'" type="button" title="글쓰기" class="new-btn"> |
|
| 63 |
+ 바로가기 |
|
| 64 |
+ </button> |
|
| 65 |
+ </div> |
|
| 66 |
+ </div> |
|
| 67 |
+ |
|
| 68 |
+ </div> |
|
| 69 |
+ </div> |
|
| 70 |
+ </div> |
|
| 71 |
+ <div class="title-box flex justify-between mb20"> |
|
| 72 |
+ <p class="title">가나다학생 랭킹</p> |
|
| 73 |
+ </div> |
|
| 74 |
+ <div class=" mb30"> |
|
| 75 |
+ <div class=" flex " style="gap: 50px;"> |
|
| 76 |
+ <div class="textbook"> |
|
| 77 |
+ <div class="text "> |
|
| 78 |
+ <p class="title1" style="color: #fff;">포토북 랭킹</p> |
|
| 79 |
+ </div> |
|
| 80 |
+ <div class="box " style="gap: 10px;"> |
|
| 81 |
+ <div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
|
| 82 |
+ <P class="title2 mt10">현재 30명 중 <em class="red">2등</em>입니다.</P> |
|
| 83 |
+ </div> |
|
| 84 |
+ </div> |
|
| 85 |
+ <div class="textbook"> |
|
| 86 |
+ <div class="text "> |
|
| 87 |
+ <p class="title1" style="color: #fff;">포토북 랭킹</p> |
|
| 88 |
+ </div> |
|
| 89 |
+ <div class="box " style="gap: 10px;"> |
|
| 90 |
+ <div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
|
| 91 |
+ <P class="title2 mt10">현재 30명 중 <em class="yellow">2등</em>입니다.</P> |
|
| 92 |
+ </div> |
|
| 93 |
+ </div> |
|
| 94 |
+ <div class="textbook"> |
|
| 95 |
+ <div class="text "> |
|
| 96 |
+ <p class="title1" style="color: #fff;">포토북 랭킹</p> |
|
| 97 |
+ </div> |
|
| 98 |
+ <div class="box " style="gap: 10px;"> |
|
| 99 |
+ <div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
|
| 100 |
+ <P class="title2 mt10">현재 30명 중 <em class="blue">2등</em>입니다.</P> |
|
| 101 |
+ </div> |
|
| 102 |
+ </div> |
|
| 103 |
+ <div class="textbook"> |
|
| 104 |
+ <div class="text "> |
|
| 105 |
+ <p class="title1" style="color: #fff;">포토북 랭킹</p> |
|
| 106 |
+ </div> |
|
| 107 |
+ <div class="box " style="gap: 10px;"> |
|
| 108 |
+ <div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
|
| 109 |
+ <P class="title2 mt10">현재 30명 중 <em class="navy">2등</em>입니다.</P> |
|
| 110 |
+ </div> |
|
| 111 |
+ </div> |
|
| 112 |
+ </div> |
|
| 113 |
+ </div> |
|
| 114 |
+ </div> |
|
| 115 |
+ |
|
| 3 | 116 |
</template> |
| 4 | 117 |
|
| 5 | 118 |
<script> |
| 119 |
+import SvgIcon from '@jamescoyle/vue-icon'; |
|
| 120 |
+import { mdiMagnify, } from '@mdi/js';
|
|
| 121 |
+import { mdilArrowRight } from '@mdi/light-js';
|
|
| 122 |
+import ProgressBar from '../../component/ProgressBar.vue'; |
|
| 123 |
+ |
|
| 124 |
+ |
|
| 6 | 125 |
export default {
|
| 7 |
- data () {
|
|
| 126 |
+ data() {
|
|
| 8 | 127 |
return {
|
| 128 |
+ mdiMagnify: mdiMagnify, |
|
| 129 |
+ mdilArrowRight: mdilArrowRight, |
|
| 130 |
+ timer: "00:00", |
|
| 131 |
+ progress: 20 |
|
| 9 | 132 |
} |
| 10 | 133 |
}, |
| 11 | 134 |
methods: {
|
| 135 |
+ goToPage(page) {
|
|
| 136 |
+ this.$router.push({ name: page });
|
|
| 137 |
+ }, |
|
| 138 |
+ increaseProgress() {
|
|
| 139 |
+ if (this.progress < 100) {
|
|
| 140 |
+ this.progress += 10; |
|
| 141 |
+ } |
|
| 142 |
+ }, |
|
| 143 |
+ showConfirm(type) {
|
|
| 144 |
+ let message = ''; |
|
| 145 |
+ if (type === 'cancel') {
|
|
| 146 |
+ message = '삭제하시겠습니까?'; |
|
| 147 |
+ } else if (type === 'reset') {
|
|
| 148 |
+ message = '초기화하시겠습니까?'; |
|
| 149 |
+ } else if (type === 'save') {
|
|
| 150 |
+ message = '등록하시겠습니까?'; |
|
| 151 |
+ } |
|
| 12 | 152 |
|
| 153 |
+ if (confirm(message)) {
|
|
| 154 |
+ this.goBack(); |
|
| 155 |
+ } |
|
| 156 |
+ }, |
|
| 13 | 157 |
}, |
| 14 | 158 |
watch: {
|
| 15 | 159 |
|
... | ... | @@ -17,8 +161,14 @@ |
| 17 | 161 |
computed: {
|
| 18 | 162 |
|
| 19 | 163 |
}, |
| 164 |
+ components: {
|
|
| 165 |
+ SvgIcon, |
|
| 166 |
+ ProgressBar |
|
| 167 |
+ }, |
|
| 20 | 168 |
mounted() {
|
| 21 | 169 |
console.log('Main2 mounted');
|
| 22 | 170 |
} |
| 23 | 171 |
} |
| 24 |
-</script>(파일 끝에 줄바꿈 문자 없음) |
|
| 172 |
+</script> |
|
| 173 |
+<style scoped> |
|
| 174 |
+</style>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/Board.vue
... | ... | @@ -0,0 +1,95 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">게시판</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">A반</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="search-wrap flex justify-end mb20"> | |
| 9 | + <select name="" id="" class="mr10 data-wrap"> | |
| 10 | + <option value="">전체</option> | |
| 11 | + </select> | |
| 12 | + <input type="text" placeholder="검색하세요."> | |
| 13 | + <button type="button" title="위원회 검색"> | |
| 14 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 15 | + </button> | |
| 16 | + </div> | |
| 17 | + <div class="table-wrap"> | |
| 18 | + <table> | |
| 19 | + <thead> | |
| 20 | + <td>No.</td> | |
| 21 | + <td>제목</td> | |
| 22 | + <td>카테고리</td> | |
| 23 | + <td>작성자</td> | |
| 24 | + <td>등록일</td> | |
| 25 | + </thead> | |
| 26 | + <tbody> | |
| 27 | + <tr @click="goToPage('noticeDetail')"> | |
| 28 | + <td></td> | |
| 29 | + <td></td> | |
| 30 | + <td></td> | |
| 31 | + <td></td> | |
| 32 | + <td></td> | |
| 33 | + </tr> | |
| 34 | + </tbody> | |
| 35 | + </table> | |
| 36 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 37 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 38 | + <button class="selected-btn">1</button> | |
| 39 | + <button>2</button> | |
| 40 | + <button>3</button> | |
| 41 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 42 | + </article> | |
| 43 | + <div class="flex justify-end "> | |
| 44 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('noticeInsert')"> | |
| 45 | + 글쓰기 | |
| 46 | + </button> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | +</template> | |
| 50 | + | |
| 51 | +<script> | |
| 52 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 53 | +import { mdiMagnify} from '@mdi/js'; | |
| 54 | + | |
| 55 | + | |
| 56 | +export default { | |
| 57 | + data () { | |
| 58 | + return { | |
| 59 | + mdiMagnify: mdiMagnify, | |
| 60 | + } | |
| 61 | + }, | |
| 62 | + methods: { | |
| 63 | + goToPage(page) { | |
| 64 | + this.$router.push({ name: page }); | |
| 65 | + }, | |
| 66 | + showConfirm(type) { | |
| 67 | + let message = ''; | |
| 68 | + if (type === 'cancel') { | |
| 69 | + message = '삭제하시겠습니까?'; | |
| 70 | + } else if (type === 'reset') { | |
| 71 | + message = '초기화하시겠습니까?'; | |
| 72 | + } else if (type === 'save') { | |
| 73 | + message = '등록하시겠습니까?'; | |
| 74 | + } | |
| 75 | + | |
| 76 | + if (confirm(message)) { | |
| 77 | + this.goBack(); | |
| 78 | + } | |
| 79 | + }, | |
| 80 | + | |
| 81 | + }, | |
| 82 | + watch: { | |
| 83 | + | |
| 84 | + }, | |
| 85 | + computed: { | |
| 86 | + | |
| 87 | + }, | |
| 88 | + components:{ | |
| 89 | + SvgIcon | |
| 90 | + }, | |
| 91 | + mounted() { | |
| 92 | + console.log('Main2 mounted'); | |
| 93 | + } | |
| 94 | +} | |
| 95 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/ClassDetail.vue
... | ... | @@ -0,0 +1,149 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">반 관리</p> | |
| 4 | + </div> | |
| 5 | + <div class="wrap mb30"> | |
| 6 | + <div class="flex justify-between mb30 align-center"> | |
| 7 | + <label for="" class="title1">학습 현황</label> | |
| 8 | + <div class="look-btn flex align-center"> | |
| 9 | + <p>자세히 보기 </p> | |
| 10 | + <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> | |
| 11 | + </div> | |
| 12 | + </div> | |
| 13 | + <div class="table-wrap"> | |
| 14 | + <table> | |
| 15 | + <thead> | |
| 16 | + <td>No.</td> | |
| 17 | + <td>제목</td> | |
| 18 | + <td>내용</td> | |
| 19 | + <td>작성자</td> | |
| 20 | + <td>등록일</td> | |
| 21 | + </thead> | |
| 22 | + <tbody> | |
| 23 | + <tr> | |
| 24 | + <td></td> | |
| 25 | + <td></td> | |
| 26 | + <td></td> | |
| 27 | + <td></td> | |
| 28 | + <td></td> | |
| 29 | + </tr> | |
| 30 | + </tbody> | |
| 31 | + </table> | |
| 32 | + </div> | |
| 33 | + </div> | |
| 34 | + <div class="flex justify-between" style="gap: 30px;"> | |
| 35 | + <div class="wrap mb30"> | |
| 36 | + <div class="flex justify-between mb30 align-center"> | |
| 37 | + <label for="" class="title1">학생 목록</label> | |
| 38 | + <div class="look-btn align-center flex"> | |
| 39 | + <p>자세히 보기 </p> | |
| 40 | + <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> | |
| 41 | + </div> | |
| 42 | + </div> | |
| 43 | + <div class="table-wrap"> | |
| 44 | + <table> | |
| 45 | + <thead> | |
| 46 | + <td>No.</td> | |
| 47 | + <td>이름</td> | |
| 48 | + <td>학년</td> | |
| 49 | + <td>반</td> | |
| 50 | + </thead> | |
| 51 | + <tbody> | |
| 52 | + <tr> | |
| 53 | + <td></td> | |
| 54 | + <td></td> | |
| 55 | + <td></td> | |
| 56 | + <td></td> | |
| 57 | + </tr> | |
| 58 | + </tbody> | |
| 59 | + </table> | |
| 60 | + </div> | |
| 61 | + </div> | |
| 62 | + <div class="wrap mb30"> | |
| 63 | + <div class="flex justify-between mb30 align-center"> | |
| 64 | + <label for="" class="title1">책 </label> | |
| 65 | + <div class="align-center flex look-btn"><p>자세히 보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div> | |
| 66 | + </div> | |
| 67 | + <div class=" flex " style="gap: 50px;"> | |
| 68 | + <div class="textbook"> | |
| 69 | + <div class="box " style="gap: 10px;"> | |
| 70 | + </div> | |
| 71 | + <div class="text "> | |
| 72 | + <p class="title1" style="color: #fff;">A 교재</p> | |
| 73 | + <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> | |
| 74 | + <button>수정</button><p>|</p> | |
| 75 | + <button @click="showConfirm('delete')">삭제</button> | |
| 76 | + </div> | |
| 77 | + </div> | |
| 78 | + </div> | |
| 79 | + <div class="textbook"> | |
| 80 | + <div class="box " style="gap: 10px;"> | |
| 81 | + </div> | |
| 82 | + <div class="text "> | |
| 83 | + <p class="title1" style="color: #fff;">A 교재</p> | |
| 84 | + <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> | |
| 85 | + <button>수정</button><p>|</p> | |
| 86 | + <button @click="showConfirm('delete')">삭제</button> | |
| 87 | + </div> | |
| 88 | + </div> | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + </div> | |
| 92 | + </div> | |
| 93 | +</template> | |
| 94 | + | |
| 95 | +<script> | |
| 96 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 97 | +import { mdiMagnify, } from '@mdi/js'; | |
| 98 | +import { mdilArrowRight } from '@mdi/light-js'; | |
| 99 | +import ProgressBar from '../../component/ProgressBar.vue'; | |
| 100 | + | |
| 101 | + | |
| 102 | +export default { | |
| 103 | + data() { | |
| 104 | + return { | |
| 105 | + mdiMagnify: mdiMagnify, | |
| 106 | + mdilArrowRight: mdilArrowRight, | |
| 107 | + timer: "00:00", | |
| 108 | + progress: 20 | |
| 109 | + } | |
| 110 | + }, | |
| 111 | + methods: { | |
| 112 | + goToPage(page) { | |
| 113 | + this.$router.push({ name: page }); | |
| 114 | + }, | |
| 115 | + increaseProgress() { | |
| 116 | + if (this.progress < 100) { | |
| 117 | + this.progress += 10; | |
| 118 | + } | |
| 119 | + }, | |
| 120 | + showConfirm(type) { | |
| 121 | + let message = ''; | |
| 122 | + if (type === 'cancel') { | |
| 123 | + message = '삭제하시겠습니까?'; | |
| 124 | + } else if (type === 'reset') { | |
| 125 | + message = '초기화하시겠습니까?'; | |
| 126 | + } else if (type === 'save') { | |
| 127 | + message = '등록하시겠습니까?'; | |
| 128 | + } | |
| 129 | + | |
| 130 | + if (confirm(message)) { | |
| 131 | + this.goBack(); | |
| 132 | + } | |
| 133 | + }, | |
| 134 | + }, | |
| 135 | + watch: { | |
| 136 | + | |
| 137 | + }, | |
| 138 | + computed: { | |
| 139 | + | |
| 140 | + }, | |
| 141 | + components: { | |
| 142 | + SvgIcon, | |
| 143 | + ProgressBar | |
| 144 | + }, | |
| 145 | + mounted() { | |
| 146 | + console.log('Main2 mounted'); | |
| 147 | + } | |
| 148 | +} | |
| 149 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/ExamDetail.vue
... | ... | @@ -0,0 +1,93 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">문제 상세 페이지</p> | |
| 4 | + </div> | |
| 5 | + <label for="" class="title1">문제 리스트</label> | |
| 6 | + <table class="mt20 mb100"> | |
| 7 | + <colgroup> | |
| 8 | + <col style="width: 10%;"> | |
| 9 | + <col style="width: 70%;"> | |
| 10 | + <col style="width: 20%;"> | |
| 11 | + </colgroup> | |
| 12 | + <thead> | |
| 13 | + <td>No.</td> | |
| 14 | + <td>문제</td> | |
| 15 | + <td>보기</td> | |
| 16 | + </thead> | |
| 17 | + <tbody> | |
| 18 | + <tr> | |
| 19 | + <td>1</td> | |
| 20 | + <td>1</td> | |
| 21 | + <td><button type="button" title="보기" class="new-btn"> | |
| 22 | + 보기 | |
| 23 | + </button></td> | |
| 24 | + </tr> | |
| 25 | + </tbody> | |
| 26 | + </table> | |
| 27 | + <label for="" class="title1">상세 내용</label> | |
| 28 | + <div class="board-wrap mt20"> | |
| 29 | + <div class="flex align-center mb20"> | |
| 30 | + <label for="" class="title2">문제</label> | |
| 31 | + <input type="text" class="data-wrap"> | |
| 32 | + </div> | |
| 33 | + | |
| 34 | + <hr> | |
| 35 | + <div class="flex align-center"> | |
| 36 | + <label for="" class="title2">내용</label> | |
| 37 | + <textarea name="" id="" class="data-wrap"></textarea> | |
| 38 | + </div> | |
| 39 | + <hr> | |
| 40 | + <div class="flex align-center mb20"> | |
| 41 | + <label for="" class="title2">첨부파일</label> | |
| 42 | + <input type="file" ref="fileInput" @change="handleFileUpload" /> | |
| 43 | + </div> | |
| 44 | + <div class="flex align-center"> | |
| 45 | + <label for="" class="title2">답</label> | |
| 46 | + <input type="text" class="data-wrap"> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | + <div class="flex justify-between mt50"> | |
| 50 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('ExamList')"> | |
| 51 | + 목록 | |
| 52 | + </button> | |
| 53 | + <div class="flex"> | |
| 54 | + <button type="button" title="글쓰기" class="new-btn mr10"> | |
| 55 | + 수정 | |
| 56 | + </button> | |
| 57 | + <button type="button" title="글쓰기" class="new-btn"> | |
| 58 | + 삭제 | |
| 59 | + </button> | |
| 60 | + </div> | |
| 61 | + </div> | |
| 62 | +</template> | |
| 63 | + | |
| 64 | +<script> | |
| 65 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 66 | +import { mdiMagnify } from '@mdi/js'; | |
| 67 | + | |
| 68 | + | |
| 69 | +export default { | |
| 70 | + data() { | |
| 71 | + return { | |
| 72 | + mdiMagnify: mdiMagnify, | |
| 73 | + } | |
| 74 | + }, | |
| 75 | + methods: { | |
| 76 | + goToPage(page) { | |
| 77 | + this.$router.push({ name: page }); | |
| 78 | + }, | |
| 79 | + }, | |
| 80 | + watch: { | |
| 81 | + | |
| 82 | + }, | |
| 83 | + computed: { | |
| 84 | + | |
| 85 | + }, | |
| 86 | + components: { | |
| 87 | + SvgIcon | |
| 88 | + }, | |
| 89 | + mounted() { | |
| 90 | + console.log('Main2 mounted'); | |
| 91 | + } | |
| 92 | +} | |
| 93 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/ExamList.vue
... | ... | @@ -0,0 +1,150 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">평가</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">1단원</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="search-wrap flex justify-end mb20"> | |
| 9 | + <select name="" id="" class="mr10 data-wrap"> | |
| 10 | + <option value="">중간</option> | |
| 11 | + <option value="">최종</option> | |
| 12 | + </select> | |
| 13 | + <select name="" id="" class="mr10 data-wrap"> | |
| 14 | + <option value="">전체</option> | |
| 15 | + </select> | |
| 16 | + <input type="text" placeholder="검색하세요."> | |
| 17 | + <button type="button" title="위원회 검색"> | |
| 18 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 19 | + </button> | |
| 20 | + </div> | |
| 21 | + <div class="table-wrap"> | |
| 22 | + <table> | |
| 23 | + <thead> | |
| 24 | + <td>No.</td> | |
| 25 | + <td>제목</td> | |
| 26 | + <td>중간/최종</td> | |
| 27 | + <td>작성자</td> | |
| 28 | + <td>문항</td> | |
| 29 | + <td>보기</td> | |
| 30 | + <td>등록일</td> | |
| 31 | + </thead> | |
| 32 | + <tbody> | |
| 33 | + <tr> | |
| 34 | + <td></td> | |
| 35 | + <td></td> | |
| 36 | + <td></td> | |
| 37 | + <td></td> | |
| 38 | + <td></td> | |
| 39 | + <td><button type="button" title="보기" class="new-btn" @click="toggleRow"> | |
| 40 | + 보기 | |
| 41 | + </button></td> | |
| 42 | + <td></td> | |
| 43 | + </tr> | |
| 44 | + <tr :class="{ 'hidden-tr': !isRowVisible }" class="show-tr"> | |
| 45 | + <td colspan="7"> | |
| 46 | + <div> | |
| 47 | + <table> | |
| 48 | + <colgroup> | |
| 49 | + <col style="width: 10%;"> | |
| 50 | + <col style="width: 70%;"> | |
| 51 | + <col style="width: 20%;"> | |
| 52 | + </colgroup> | |
| 53 | + <thead> | |
| 54 | + <td>No.</td> | |
| 55 | + <td>문제</td> | |
| 56 | + <td></td> | |
| 57 | + </thead> | |
| 58 | + <tbody> | |
| 59 | + <tr> | |
| 60 | + <td>1</td> | |
| 61 | + <td>1</td> | |
| 62 | + <td><button type="button" title="수정" class="new-btn" @click="goToPage('ExamDetail')"> | |
| 63 | + 수정 | |
| 64 | + </button></td> | |
| 65 | + </tr> | |
| 66 | + </tbody> | |
| 67 | + </table> | |
| 68 | + </div> | |
| 69 | + </td> | |
| 70 | + </tr> | |
| 71 | + </tbody> | |
| 72 | + </table> | |
| 73 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 74 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 75 | + <button class="selected-btn">1</button> | |
| 76 | + <button>2</button> | |
| 77 | + <button>3</button> | |
| 78 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 79 | + </article> | |
| 80 | + <div class="flex justify-end "> | |
| 81 | + <button type="button" title="등록" class="new-btn" @click="goToPage('ExamDetail')"> | |
| 82 | + 등록 | |
| 83 | + </button> | |
| 84 | + </div> | |
| 85 | + </div> | |
| 86 | +</template> | |
| 87 | + | |
| 88 | +<script> | |
| 89 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 90 | +import { mdiMagnify, mdiWindowClose} from '@mdi/js'; | |
| 91 | + | |
| 92 | + | |
| 93 | +export default { | |
| 94 | + data () { | |
| 95 | + return { | |
| 96 | + mdiMagnify: mdiMagnify, | |
| 97 | + mdiWindowClose: mdiWindowClose, | |
| 98 | + showModal: false, | |
| 99 | + searchOpen: false, | |
| 100 | + isRowVisible: false | |
| 101 | + } | |
| 102 | + }, | |
| 103 | + methods: { | |
| 104 | + toggleRow() { | |
| 105 | + this.isRowVisible = !this.isRowVisible; | |
| 106 | + }, | |
| 107 | + goToPage(page) { | |
| 108 | + this.$router.push({ name: page }); | |
| 109 | + }, | |
| 110 | + showConfirm(type) { | |
| 111 | + let message = ''; | |
| 112 | + if (type === 'cancel') { | |
| 113 | + message = '삭제하시겠습니까?'; | |
| 114 | + } else if (type === 'reset') { | |
| 115 | + message = '초기화하시겠습니까?'; | |
| 116 | + } else if (type === 'save') { | |
| 117 | + message = '등록하시겠습니까?'; | |
| 118 | + } | |
| 119 | + | |
| 120 | + if (confirm(message)) { | |
| 121 | + this.goBack(); | |
| 122 | + } | |
| 123 | + }, | |
| 124 | + | |
| 125 | + closeModal() { | |
| 126 | + this.showModal = false; | |
| 127 | + }, | |
| 128 | + buttonSearch() { | |
| 129 | + this.searchOpen = true; | |
| 130 | + }, | |
| 131 | + closeBtn() { | |
| 132 | + this.searchOpen = false; | |
| 133 | + | |
| 134 | + }, | |
| 135 | + | |
| 136 | + }, | |
| 137 | + watch: { | |
| 138 | + | |
| 139 | + }, | |
| 140 | + computed: { | |
| 141 | + | |
| 142 | + }, | |
| 143 | + components:{ | |
| 144 | + SvgIcon | |
| 145 | + }, | |
| 146 | + mounted() { | |
| 147 | + console.log('Main2 mounted'); | |
| 148 | + } | |
| 149 | +} | |
| 150 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/Home.vue
... | ... | @@ -0,0 +1,114 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">홈</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">A반</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="content-t"> | |
| 9 | + <div class=" flex " style="gap: 50px;"> | |
| 10 | + <div class="class"> | |
| 11 | + <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail')"> | |
| 12 | + <div><img src="../../../resources/img/img176_82t.png" alt=""></div> | |
| 13 | + <div><img src="../../../resources/img/img176_82t.png" alt=""></div> | |
| 14 | + <div><img src="../../../resources/img/img176_82t.png" alt=""></div> | |
| 15 | + <div><img src="../../../resources/img/img176_82t.png" alt=""></div> | |
| 16 | + </div> | |
| 17 | + <div class="text flex justify-between mt20"> | |
| 18 | + <p class="title1">A반</p> | |
| 19 | + <span class="member">20명</span> | |
| 20 | + </div> | |
| 21 | + <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> | |
| 22 | + <button @click="showConfirm('edit')">수정</button> | |
| 23 | + <p>|</p> | |
| 24 | + <button @click="showConfirm('delete')">삭제</button> | |
| 25 | + </div> | |
| 26 | + </div> | |
| 27 | + <div class="textbook-add"> | |
| 28 | + <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button> | |
| 29 | + | |
| 30 | + </div> | |
| 31 | + <div v-show="searchOpen" class="popup-wrap"> | |
| 32 | + <div class="popup-box "> | |
| 33 | + <div class="flex justify-between mb30"> | |
| 34 | + <p class="popup-title">반 이름</p> | |
| 35 | + <button type="button" class="popup-close-btn" @click="closeBtn"> | |
| 36 | + <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> | |
| 37 | + | |
| 38 | + </button> | |
| 39 | + </div> | |
| 40 | + <div class="search-wrap mb30"> | |
| 41 | + <input type="text" class="data-wrap" placeholder=""> | |
| 42 | + <!-- <button type="button" > | |
| 43 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 44 | + </button> --> | |
| 45 | + </div> | |
| 46 | + <div class="flex justify-center "> | |
| 47 | + <button type="button" title="글쓰기" class="new-btn mr10"> | |
| 48 | + 취소 | |
| 49 | + </button> | |
| 50 | + <button type="button" title="글쓰기" class="new-btn"> | |
| 51 | + 생성 | |
| 52 | + </button> | |
| 53 | + </div> | |
| 54 | + </div> | |
| 55 | + </div> | |
| 56 | + </div> | |
| 57 | + </div> | |
| 58 | +</template> | |
| 59 | + | |
| 60 | +<script> | |
| 61 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 62 | +import { mdiMagnify, mdiWindowClose } from '@mdi/js'; | |
| 63 | +export default { | |
| 64 | + data() { | |
| 65 | + return { | |
| 66 | + mdiWindowClose: mdiWindowClose, | |
| 67 | + showModal: false, | |
| 68 | + searchOpen: false, | |
| 69 | + } | |
| 70 | + }, | |
| 71 | + methods: { | |
| 72 | + goToPage(page) { | |
| 73 | + this.$router.push({ name: page }); | |
| 74 | + }, | |
| 75 | + closeModal() { | |
| 76 | + this.showModal = false; | |
| 77 | + }, | |
| 78 | + buttonSearch() { | |
| 79 | + this.searchOpen = true; | |
| 80 | + }, | |
| 81 | + closeBtn() { | |
| 82 | + this.searchOpen = false; | |
| 83 | + | |
| 84 | + }, | |
| 85 | + showConfirm(type) { | |
| 86 | + let message = ''; | |
| 87 | + if (type === 'delete') { | |
| 88 | + message = '삭제하시겠습니까?'; | |
| 89 | + } else if (type === 'reset') { | |
| 90 | + message = '초기화하시겠습니까?'; | |
| 91 | + } else if (type === 'save') { | |
| 92 | + message = '등록하시겠습니까?'; | |
| 93 | + } | |
| 94 | + | |
| 95 | + if (confirm(message)) { | |
| 96 | + this.goBack(); | |
| 97 | + } | |
| 98 | + }, | |
| 99 | + | |
| 100 | + }, | |
| 101 | + watch: { | |
| 102 | + | |
| 103 | + }, | |
| 104 | + computed: { | |
| 105 | + | |
| 106 | + }, | |
| 107 | + components: { | |
| 108 | + SvgIcon | |
| 109 | + }, | |
| 110 | + mounted() { | |
| 111 | + console.log('Main2 mounted'); | |
| 112 | + } | |
| 113 | +} | |
| 114 | +</script>(파일 끝에 줄바꿈 문자 없음) |
--- client/views/pages/teacher/Main_t.vue
+++ client/views/pages/teacher/Main_t.vue
... | ... | @@ -1,27 +1,51 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div>Main.vue</div> |
|
| 2 |
+ <div class="flex justify-between" style="height: 100%;"> |
|
| 3 |
+ <Side_t></Side_t> |
|
| 4 |
+ <div style="padding: 15px 60px 90px 60px; "> |
|
| 5 |
+ <Header></Header> |
|
| 6 |
+ <div class="main-wrap"> |
|
| 7 |
+ <router-view /> |
|
| 8 |
+ </div> |
|
| 9 |
+ </div> |
|
| 10 |
+ </div> |
|
| 11 |
+ |
|
| 3 | 12 |
</template> |
| 4 | 13 |
|
| 5 | 14 |
<script> |
| 15 |
+import Header from '../../layout/Header.vue'; |
|
| 16 |
+import Menu from '../../layout/Menu.vue'; |
|
| 17 |
+import Side_t from '../../layout/Side_t.vue'; |
|
| 6 | 18 |
|
| 7 | 19 |
export default {
|
| 8 |
- data () {
|
|
| 9 |
- return {
|
|
| 10 |
- } |
|
| 11 |
- }, |
|
| 12 |
- methods: {
|
|
| 20 |
+ data() {
|
|
| 21 |
+ return {
|
|
| 22 |
+ } |
|
| 23 |
+ }, |
|
| 24 |
+ methods: {
|
|
| 25 |
+ |
|
| 26 |
+ }, |
|
| 27 |
+ watch: {
|
|
| 13 | 28 |
|
| 14 |
- }, |
|
| 15 |
- watch: {
|
|
| 29 |
+ }, |
|
| 30 |
+ computed: {
|
|
| 16 | 31 |
|
| 17 |
- }, |
|
| 18 |
- computed: {
|
|
| 19 |
- |
|
| 20 |
- }, |
|
| 21 |
- components: {
|
|
| 22 |
- }, |
|
| 23 |
- mounted() {
|
|
| 24 |
- console.log('main mounted');
|
|
| 25 |
- } |
|
| 32 |
+ }, |
|
| 33 |
+ components: {
|
|
| 34 |
+ Header: Header, |
|
| 35 |
+ Menu: Menu, |
|
| 36 |
+ // Footer:Footer, |
|
| 37 |
+ Side_t:Side_t, |
|
| 38 |
+ }, |
|
| 39 |
+ mounted() {
|
|
| 40 |
+ console.log('main mounted');
|
|
| 41 |
+ } |
|
| 26 | 42 |
} |
| 27 |
-</script>(파일 끝에 줄바꿈 문자 없음) |
|
| 43 |
+</script> |
|
| 44 |
+<style scoped> |
|
| 45 |
+.main-wrap{
|
|
| 46 |
+ margin-top: 20px; |
|
| 47 |
+ position: static; |
|
| 48 |
+ width: 144rem; |
|
| 49 |
+ height: 100%; |
|
| 50 |
+} |
|
| 51 |
+</style>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/QuestionInsert.vue
... | ... | @@ -0,0 +1,99 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">문제 등록</p> | |
| 4 | + </div> | |
| 5 | + <div class="board-wrap"> | |
| 6 | + <div class="flex align-center mb20"> | |
| 7 | + <label for="" class="title2">제목</label> | |
| 8 | + <input type="text" class="data-wrap"> | |
| 9 | + </div> | |
| 10 | + <hr> | |
| 11 | + <div class="flex align-center"> | |
| 12 | + <label for="" class="title2">내용</label> | |
| 13 | + <textarea name="" id="" class="data-wrap"></textarea> | |
| 14 | + </div> | |
| 15 | + <hr> | |
| 16 | + <div class="flex align-center mb20"> | |
| 17 | + <label for="" class="title2">첨부파일</label> | |
| 18 | + <input type="file" ref="fileInput" @change="handleFileUpload" /> | |
| 19 | + </div> | |
| 20 | + <div class="flex align-center mb20"> | |
| 21 | + <label for="" class="title2">답</label> | |
| 22 | + <input type="text" class="data-wrap"> | |
| 23 | + </div> | |
| 24 | + <div> | |
| 25 | + <label for="" class="title2">오답 학생</label> | |
| 26 | + <div class="table-wrap mt20"> | |
| 27 | + <table> | |
| 28 | + <thead> | |
| 29 | + <td>No.</td> | |
| 30 | + <td>이름</td> | |
| 31 | + <td>학년</td> | |
| 32 | + <td>반</td> | |
| 33 | + <td>오답</td> | |
| 34 | + </thead> | |
| 35 | + <tbody> | |
| 36 | + <tr @click="goToPage('noticeDetail')"> | |
| 37 | + <td></td> | |
| 38 | + <td></td> | |
| 39 | + <td></td> | |
| 40 | + <td></td> | |
| 41 | + <td></td> | |
| 42 | + </tr> | |
| 43 | + </tbody> | |
| 44 | + </table> | |
| 45 | + <!-- <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 46 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 47 | + <button class="selected-btn">1</button> | |
| 48 | + <button>2</button> | |
| 49 | + <button>3</button> | |
| 50 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 51 | + </article> --> | |
| 52 | + </div> | |
| 53 | + </div> | |
| 54 | + </div> | |
| 55 | + <div class="flex justify-between mt50"> | |
| 56 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')"> | |
| 57 | + 목록 | |
| 58 | + </button> | |
| 59 | + <div class="flex"> | |
| 60 | + <button type="button" title="글쓰기" class="new-btn mr10"> | |
| 61 | + 수정 | |
| 62 | + </button> | |
| 63 | + <button type="button" title="글쓰기" class="new-btn"> | |
| 64 | + 삭제 | |
| 65 | + </button> | |
| 66 | + </div> | |
| 67 | + </div> | |
| 68 | +</template> | |
| 69 | + | |
| 70 | +<script> | |
| 71 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 72 | +import { mdiMagnify } from '@mdi/js'; | |
| 73 | + | |
| 74 | + | |
| 75 | +export default { | |
| 76 | + data() { | |
| 77 | + return { | |
| 78 | + mdiMagnify: mdiMagnify, | |
| 79 | + } | |
| 80 | + }, | |
| 81 | + methods: { | |
| 82 | + goToPage(page) { | |
| 83 | + this.$router.push({ name: page }); | |
| 84 | + }, | |
| 85 | + }, | |
| 86 | + watch: { | |
| 87 | + | |
| 88 | + }, | |
| 89 | + computed: { | |
| 90 | + | |
| 91 | + }, | |
| 92 | + components: { | |
| 93 | + SvgIcon | |
| 94 | + }, | |
| 95 | + mounted() { | |
| 96 | + console.log('Main2 mounted'); | |
| 97 | + } | |
| 98 | +} | |
| 99 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/QuestionList.vue
... | ... | @@ -0,0 +1,97 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">문제</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">1단원</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="search-wrap flex justify-end mb20"> | |
| 9 | + <select name="" id="" class="mr10 data-wrap"> | |
| 10 | + <option value="">전체</option> | |
| 11 | + </select> | |
| 12 | + <input type="text" placeholder="검색하세요."> | |
| 13 | + <button type="button" title="위원회 검색"> | |
| 14 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 15 | + </button> | |
| 16 | + </div> | |
| 17 | + <div class="table-wrap"> | |
| 18 | + <table> | |
| 19 | + <thead> | |
| 20 | + <td>No.</td> | |
| 21 | + <td>제목</td> | |
| 22 | + <td>문제</td> | |
| 23 | + <td>작성자</td> | |
| 24 | + <td>오답률</td> | |
| 25 | + <td>등록일</td> | |
| 26 | + </thead> | |
| 27 | + <tbody> | |
| 28 | + <tr @click="goToPage('QuestionInsert')"> | |
| 29 | + <td></td> | |
| 30 | + <td></td> | |
| 31 | + <td></td> | |
| 32 | + <td></td> | |
| 33 | + <td></td> | |
| 34 | + <td></td> | |
| 35 | + </tr> | |
| 36 | + </tbody> | |
| 37 | + </table> | |
| 38 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 39 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 40 | + <button class="selected-btn">1</button> | |
| 41 | + <button>2</button> | |
| 42 | + <button>3</button> | |
| 43 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 44 | + </article> | |
| 45 | + <div class="flex justify-end "> | |
| 46 | + <button type="button" title="등록" class="new-btn" @click="goToPage('QuestionInsert')"> | |
| 47 | + 등록 | |
| 48 | + </button> | |
| 49 | + </div> | |
| 50 | + </div> | |
| 51 | +</template> | |
| 52 | + | |
| 53 | +<script> | |
| 54 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 55 | +import { mdiMagnify} from '@mdi/js'; | |
| 56 | + | |
| 57 | + | |
| 58 | +export default { | |
| 59 | + data () { | |
| 60 | + return { | |
| 61 | + mdiMagnify: mdiMagnify, | |
| 62 | + } | |
| 63 | + }, | |
| 64 | + methods: { | |
| 65 | + goToPage(page) { | |
| 66 | + this.$router.push({ name: page }); | |
| 67 | + }, | |
| 68 | + showConfirm(type) { | |
| 69 | + let message = ''; | |
| 70 | + if (type === 'cancel') { | |
| 71 | + message = '삭제하시겠습니까?'; | |
| 72 | + } else if (type === 'reset') { | |
| 73 | + message = '초기화하시겠습니까?'; | |
| 74 | + } else if (type === 'save') { | |
| 75 | + message = '등록하시겠습니까?'; | |
| 76 | + } | |
| 77 | + | |
| 78 | + if (confirm(message)) { | |
| 79 | + this.goBack(); | |
| 80 | + } | |
| 81 | + }, | |
| 82 | + | |
| 83 | + }, | |
| 84 | + watch: { | |
| 85 | + | |
| 86 | + }, | |
| 87 | + computed: { | |
| 88 | + | |
| 89 | + }, | |
| 90 | + components:{ | |
| 91 | + SvgIcon | |
| 92 | + }, | |
| 93 | + mounted() { | |
| 94 | + console.log('Main2 mounted'); | |
| 95 | + } | |
| 96 | +} | |
| 97 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/StudentDetail.vue
... | ... | @@ -0,0 +1,166 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">학생 종합 리포트</p> | |
| 4 | + </div> | |
| 5 | + <div class="wrap mb30"> | |
| 6 | + <label for="" class="title1">학습 현황</label> | |
| 7 | + <div class="flex justify-between mt30" style="gap: 50px;"> | |
| 8 | + <div class="wrap-bg flex"> | |
| 9 | + <img src="../../../resources/img/img16_s.png" alt=""> | |
| 10 | + <div class="ml25" style="width: 100%;"> | |
| 11 | + <p class="name mb10">김</p> | |
| 12 | + <p class="mb5">xx중학교 3학년 x반</p> | |
| 13 | + </div> | |
| 14 | + </div> | |
| 15 | + <div class="wrap-bg "> | |
| 16 | + <p class="title1">평균 성적</p> | |
| 17 | + <div style="width: 100%;" class="flex mt30"> | |
| 18 | + <p class="title5"><em class="yellow">93</em></p> | |
| 19 | + <p class="title4 ml10 mr10">/</p> | |
| 20 | + <p class="title4">100</p> | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + <div class="wrap-bg flex "> | |
| 24 | + <div class="mr50"> | |
| 25 | + <p class="title1 mb30">총 학습 시간</p> | |
| 26 | + <p class="second">{{ timer }}</p> | |
| 27 | + </div> | |
| 28 | + <div> | |
| 29 | + <p class="title1 mb30">남은 시간</p> | |
| 30 | + <p class="second">{{ timer }}</p> | |
| 31 | + </div> | |
| 32 | + </div> | |
| 33 | + </div> | |
| 34 | + </div> | |
| 35 | + <div class="wrap mb30"> | |
| 36 | + <details> | |
| 37 | + <summary>진도율 | |
| 38 | + </summary> | |
| 39 | + <div class="tpt flex justify-between align-center"> | |
| 40 | + <p class="title2">종합 진도율 :</p> | |
| 41 | + <progress-bar :progress="progress"></progress-bar><span class="brown ">{{ progress }}%</span> | |
| 42 | + </div> | |
| 43 | + <div class="tpt flex justify-between align-center"> | |
| 44 | + <p class="title2">교재1 진도율 :</p><progress-bar :progress="progress"></progress-bar><span class="brown ">{{ | |
| 45 | + progress }}%</span> | |
| 46 | + </div> | |
| 47 | + <div class="tpt flex justify-between align-center"> | |
| 48 | + <p class="title2">교재2 진도율 :</p><progress-bar :progress="progress"></progress-bar><span class="brown ">{{ | |
| 49 | + progress }}%</span> | |
| 50 | + </div> | |
| 51 | + <div class="tpt flex justify-between align-center"> | |
| 52 | + <p class="title2">교재3 진도율 :</p><progress-bar :progress="progress"></progress-bar><span class="brown ">{{ | |
| 53 | + progress }}%</span> | |
| 54 | + </div> | |
| 55 | + </details> | |
| 56 | + </div> | |
| 57 | + <div class="wrap mb30"> | |
| 58 | + <details> | |
| 59 | + <summary>단원별 오답률</summary> | |
| 60 | + <div class="tpt"> | |
| 61 | + <div class="table-wrap"> | |
| 62 | + <table> | |
| 63 | + <thead> | |
| 64 | + <td>단원</td> | |
| 65 | + <td>문제수</td> | |
| 66 | + <td>정답</td> | |
| 67 | + <td>오답률</td> | |
| 68 | + </thead> | |
| 69 | + <tbody> | |
| 70 | + <tr> | |
| 71 | + <td></td> | |
| 72 | + <td></td> | |
| 73 | + <td></td> | |
| 74 | + <td></td> | |
| 75 | + </tr> | |
| 76 | + </tbody> | |
| 77 | + </table> | |
| 78 | + </div> | |
| 79 | + </div> | |
| 80 | + </details> | |
| 81 | + </div> | |
| 82 | + <div class="wrap mb30"> | |
| 83 | + <details> | |
| 84 | + <summary>학습 코스</summary> | |
| 85 | + <div class="tpt"> | |
| 86 | + <div class="table-wrap"> | |
| 87 | + <table> | |
| 88 | + <thead> | |
| 89 | + <td>단원</td> | |
| 90 | + <td>문제수</td> | |
| 91 | + <td>정답</td> | |
| 92 | + <td>오답률</td> | |
| 93 | + </thead> | |
| 94 | + <tbody> | |
| 95 | + <tr> | |
| 96 | + <td></td> | |
| 97 | + <td></td> | |
| 98 | + <td></td> | |
| 99 | + <td></td> | |
| 100 | + </tr> | |
| 101 | + </tbody> | |
| 102 | + </table> | |
| 103 | + </div> | |
| 104 | + </div> | |
| 105 | + </details> | |
| 106 | + </div> | |
| 107 | + <div class="flex justify-end "> | |
| 108 | + <button type="button" title="" class="new-btn" @click="showConfirm('delete')"> | |
| 109 | + 삭제 | |
| 110 | + </button> | |
| 111 | + </div> | |
| 112 | +</template> | |
| 113 | + | |
| 114 | +<script> | |
| 115 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 116 | +import { mdiMagnify } from '@mdi/js'; | |
| 117 | +import ProgressBar from '../../component/ProgressBar.vue'; | |
| 118 | + | |
| 119 | + | |
| 120 | +export default { | |
| 121 | + data() { | |
| 122 | + return { | |
| 123 | + mdiMagnify: mdiMagnify, | |
| 124 | + timer: "00:00", | |
| 125 | + progress: 20 | |
| 126 | + } | |
| 127 | + }, | |
| 128 | + methods: { | |
| 129 | + goToPage(page) { | |
| 130 | + this.$router.push({ name: page }); | |
| 131 | + }, | |
| 132 | + increaseProgress() { | |
| 133 | + if (this.progress < 100) { | |
| 134 | + this.progress += 10; | |
| 135 | + } | |
| 136 | + }, | |
| 137 | + showConfirm(type) { | |
| 138 | + let message = ''; | |
| 139 | + if (type === 'delete') { | |
| 140 | + message = '삭제하시겠습니까?'; | |
| 141 | + } else if (type === 'reset') { | |
| 142 | + message = '초기화하시겠습니까?'; | |
| 143 | + } else if (type === 'save') { | |
| 144 | + message = '등록하시겠습니까?'; | |
| 145 | + } | |
| 146 | + | |
| 147 | + if (confirm(message)) { | |
| 148 | + this.goBack(); | |
| 149 | + } | |
| 150 | + }, | |
| 151 | + }, | |
| 152 | + watch: { | |
| 153 | + | |
| 154 | + }, | |
| 155 | + computed: { | |
| 156 | + | |
| 157 | + }, | |
| 158 | + components: { | |
| 159 | + SvgIcon, | |
| 160 | + ProgressBar | |
| 161 | + }, | |
| 162 | + mounted() { | |
| 163 | + console.log('Main2 mounted'); | |
| 164 | + } | |
| 165 | +} | |
| 166 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/StudentList.vue
... | ... | @@ -0,0 +1,170 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">게시판</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">A반</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="flex justify-end mb20"> | |
| 9 | + <div class="search-wrap "> | |
| 10 | + <select name="" id="" class="mr10 data-wrap"> | |
| 11 | + <option value="">전체</option> | |
| 12 | + </select> | |
| 13 | + <input type="text" placeholder="검색하세요."> | |
| 14 | + <button type="button" title="위원회 검색"> | |
| 15 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 16 | + </button> | |
| 17 | + </div> | |
| 18 | + <button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch"> | |
| 19 | + 학생 추가 | |
| 20 | + </button> | |
| 21 | + </div> | |
| 22 | + <div class="table-wrap"> | |
| 23 | + <table> | |
| 24 | + <thead> | |
| 25 | + <td>No.</td> | |
| 26 | + <td>학년</td> | |
| 27 | + <td>반</td> | |
| 28 | + <td>성별</td> | |
| 29 | + <td>이름</td> | |
| 30 | + </thead> | |
| 31 | + <tbody> | |
| 32 | + <tr @click="goToPage('StudentDetail')"> | |
| 33 | + <td></td> | |
| 34 | + <td></td> | |
| 35 | + <td></td> | |
| 36 | + <td></td> | |
| 37 | + <td></td> | |
| 38 | + </tr> | |
| 39 | + </tbody> | |
| 40 | + </table> | |
| 41 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 42 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 43 | + <button class="selected-btn">1</button> | |
| 44 | + <button>2</button> | |
| 45 | + <button>3</button> | |
| 46 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 47 | + </article> | |
| 48 | + <div class="flex justify-end "> | |
| 49 | + | |
| 50 | + </div> | |
| 51 | + | |
| 52 | + </div> | |
| 53 | + <div v-show="searchOpen" class="popup-wrap"> | |
| 54 | + <div class="popup-box "> | |
| 55 | + <div class="flex justify-between mb30"> | |
| 56 | + <p class="popup-title">학생 검색</p> | |
| 57 | + <button type="button" class="popup-close-btn" @click="closeBtn"> | |
| 58 | + <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> | |
| 59 | + | |
| 60 | + </button> | |
| 61 | + </div> | |
| 62 | + <div class="search-wrap mb30"> | |
| 63 | + <input type="text" class="data-wrap" placeholder=""> | |
| 64 | + <button type="button" > | |
| 65 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 66 | + </button> | |
| 67 | + </div> | |
| 68 | + <div class="table-wrap"> | |
| 69 | + <table> | |
| 70 | + <thead> | |
| 71 | + <td>No.</td> | |
| 72 | + <td>학년</td> | |
| 73 | + <td>반</td> | |
| 74 | + <td>번호</td> | |
| 75 | + <td>이름</td> | |
| 76 | + <td>선택</td> | |
| 77 | + </thead> | |
| 78 | + <tbody> | |
| 79 | + <tr> | |
| 80 | + <td></td> | |
| 81 | + <td></td> | |
| 82 | + <td></td> | |
| 83 | + <td></td> | |
| 84 | + <td></td> | |
| 85 | + <td><input type="checkbox" class="ui-checkbox"></td> | |
| 86 | + </tr> | |
| 87 | + </tbody> | |
| 88 | + </table> | |
| 89 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 90 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 91 | + <button class="selected-btn">1</button> | |
| 92 | + <button>2</button> | |
| 93 | + <button>3</button> | |
| 94 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 95 | + </article> | |
| 96 | + <div class="flex justify-end "> | |
| 97 | + | |
| 98 | + </div> | |
| 99 | + | |
| 100 | + </div> | |
| 101 | + <div class="flex justify-end "> | |
| 102 | + <button type="button" title="" class="new-btn mr10"> | |
| 103 | + 취소 | |
| 104 | + </button> | |
| 105 | + <button type="button" title="" class="new-btn"> | |
| 106 | + 등록 | |
| 107 | + </button> | |
| 108 | + </div> | |
| 109 | + </div> | |
| 110 | + </div> | |
| 111 | +</template> | |
| 112 | + | |
| 113 | +<script> | |
| 114 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 115 | +import { mdiMagnify, mdiWindowClose } from '@mdi/js'; | |
| 116 | + | |
| 117 | + | |
| 118 | +export default { | |
| 119 | + data() { | |
| 120 | + return { | |
| 121 | + mdiMagnify: mdiMagnify, | |
| 122 | + mdiWindowClose: mdiWindowClose, | |
| 123 | + showModal: false, | |
| 124 | + searchOpen: false, | |
| 125 | + } | |
| 126 | + }, | |
| 127 | + methods: { | |
| 128 | + goToPage(page) { | |
| 129 | + this.$router.push({ name: page }); | |
| 130 | + }, | |
| 131 | + showConfirm(type) { | |
| 132 | + let message = ''; | |
| 133 | + if (type === 'cancel') { | |
| 134 | + message = '삭제하시겠습니까?'; | |
| 135 | + } else if (type === 'reset') { | |
| 136 | + message = '초기화하시겠습니까?'; | |
| 137 | + } else if (type === 'save') { | |
| 138 | + message = '등록하시겠습니까?'; | |
| 139 | + } | |
| 140 | + | |
| 141 | + if (confirm(message)) { | |
| 142 | + this.goBack(); | |
| 143 | + } | |
| 144 | + }, | |
| 145 | + closeModal() { | |
| 146 | + this.showModal = false; | |
| 147 | + }, | |
| 148 | + buttonSearch() { | |
| 149 | + this.searchOpen = true; | |
| 150 | + }, | |
| 151 | + closeBtn() { | |
| 152 | + this.searchOpen = false; | |
| 153 | + | |
| 154 | + }, | |
| 155 | + | |
| 156 | + }, | |
| 157 | + watch: { | |
| 158 | + | |
| 159 | + }, | |
| 160 | + computed: { | |
| 161 | + | |
| 162 | + }, | |
| 163 | + components: { | |
| 164 | + SvgIcon | |
| 165 | + }, | |
| 166 | + mounted() { | |
| 167 | + console.log('Main2 mounted'); | |
| 168 | + } | |
| 169 | +} | |
| 170 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/TextBookDetail.vue
... | ... | @@ -0,0 +1,112 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">교재 관리</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">A 교재</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="board-wrap"> | |
| 9 | + <label for="" class="title2">단원</label> | |
| 10 | + <div class="table-pagination flex mt10"> | |
| 11 | + <button class="selected-btn">1</button> | |
| 12 | + <button>2</button> | |
| 13 | + <button>3</button> | |
| 14 | + </div> | |
| 15 | + <hr> | |
| 16 | + <div class="bookmanage-btn mb20 flex justify-between align-center" @click="goToPage('TextList')"> | |
| 17 | + <label for="" class="title1">지문</label> | |
| 18 | + <div class="flex align-center " style="gap: 10px;"> | |
| 19 | + <p>00개</p> | |
| 20 | + <button><img src="../../../resources/img/btn33_101t_normal.png" alt=""></button> | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + <div class="bookmanage-btn mb20 flex justify-between align-center" @click="goToPage('QuestionList')"> | |
| 24 | + <label for="" class="title1">문제</label> | |
| 25 | + <div class="flex align-center " style="gap: 10px;"> | |
| 26 | + <p>00개</p> | |
| 27 | + <button><img src="../../../resources/img/btn33_101t_normal.png" alt=""></button> | |
| 28 | + </div> | |
| 29 | + </div> | |
| 30 | + <div class="bookmanage-btn mb20 flex justify-between align-center" @click="goToPage('VocaList')"> | |
| 31 | + <label for="" class="title1">단어</label> | |
| 32 | + <div class="flex align-center " style="gap: 10px;"> | |
| 33 | + <p>00개</p> | |
| 34 | + <button><img src="../../../resources/img/btn33_101t_normal.png" alt=""></button> | |
| 35 | + </div> | |
| 36 | + </div> | |
| 37 | + <div class="bookmanage-btn mb20 flex justify-between align-center" @click="goToPage('ExamList')"> | |
| 38 | + <label for="" class="title1">중간 평가</label> | |
| 39 | + <div class="flex align-center " style="gap: 10px;"> | |
| 40 | + <p>00개</p> | |
| 41 | + <button><img src="../../../resources/img/btn33_101t_normal.png" alt=""></button> | |
| 42 | + </div> | |
| 43 | + </div> | |
| 44 | + <div class="bookmanage-btn flex justify-between align-center" @click="goToPage('ExamList')"> | |
| 45 | + <label for="" class="title1">최종 평가</label> | |
| 46 | + <div class="flex align-center " style="gap: 10px;"> | |
| 47 | + <p>00개</p> | |
| 48 | + <button><img src="../../../resources/img/btn33_101t_normal.png" alt=""></button> | |
| 49 | + </div> | |
| 50 | + </div> | |
| 51 | + </div> | |
| 52 | + <div class="flex justify-end mt30"> | |
| 53 | + <button type="button" title="" class="new-btn" @click="showConfirm('delete')"> | |
| 54 | + 삭제 | |
| 55 | + </button> | |
| 56 | + </div> | |
| 57 | +</template> | |
| 58 | + | |
| 59 | +<script> | |
| 60 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 61 | +import { mdiMagnify, mdilArrowRight } from '@mdi/js'; | |
| 62 | +import ProgressBar from '../../component/ProgressBar.vue'; | |
| 63 | + | |
| 64 | + | |
| 65 | +export default { | |
| 66 | + data() { | |
| 67 | + return { | |
| 68 | + mdiMagnify: mdiMagnify, | |
| 69 | + mdilArrowRight: mdilArrowRight, | |
| 70 | + timer: "00:00", | |
| 71 | + progress: 20 | |
| 72 | + } | |
| 73 | + }, | |
| 74 | + methods: { | |
| 75 | + goToPage(page) { | |
| 76 | + this.$router.push({ name: page }); | |
| 77 | + }, | |
| 78 | + increaseProgress() { | |
| 79 | + if (this.progress < 100) { | |
| 80 | + this.progress += 10; | |
| 81 | + } | |
| 82 | + }, | |
| 83 | + showConfirm(type) { | |
| 84 | + let message = ''; | |
| 85 | + if (type === 'delete') { | |
| 86 | + message = '삭제하시겠습니까?'; | |
| 87 | + } else if (type === 'reset') { | |
| 88 | + message = '초기화하시겠습니까?'; | |
| 89 | + } else if (type === 'save') { | |
| 90 | + message = '등록하시겠습니까?'; | |
| 91 | + } | |
| 92 | + | |
| 93 | + if (confirm(message)) { | |
| 94 | + this.goBack(); | |
| 95 | + } | |
| 96 | + }, | |
| 97 | + }, | |
| 98 | + watch: { | |
| 99 | + | |
| 100 | + }, | |
| 101 | + computed: { | |
| 102 | + | |
| 103 | + }, | |
| 104 | + components: { | |
| 105 | + SvgIcon, | |
| 106 | + ProgressBar | |
| 107 | + }, | |
| 108 | + mounted() { | |
| 109 | + console.log('Main2 mounted'); | |
| 110 | + } | |
| 111 | +} | |
| 112 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/TextInsert.vue
... | ... | @@ -0,0 +1,64 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">지문 등록</p> | |
| 4 | + </div> | |
| 5 | + <div class="board-wrap"> | |
| 6 | + <div class="flex align-center mb20"> | |
| 7 | + <label for="" class="title2">제목</label> | |
| 8 | + <input type="text" class="data-wrap"> | |
| 9 | + </div> | |
| 10 | + <div class="flex align-center"> | |
| 11 | + <label for="" class="title2">URL</label> | |
| 12 | + <input type="text" class="data-wrap"> | |
| 13 | + </div> | |
| 14 | + <hr> | |
| 15 | + <div class="flex align-center"> | |
| 16 | + <label for="" class="title2">스크립트</label> | |
| 17 | + <textarea name="" id="" class="data-wrap"></textarea> | |
| 18 | + </div> | |
| 19 | + </div> | |
| 20 | + <div class="flex justify-between mt50"> | |
| 21 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('TextList')"> | |
| 22 | + 목록 | |
| 23 | + </button> | |
| 24 | + <div class="flex"> | |
| 25 | + <button type="button" title="글쓰기" class="new-btn mr10" > | |
| 26 | + 수정 | |
| 27 | + </button> | |
| 28 | + <button type="button" title="글쓰기" class="new-btn" > | |
| 29 | + 삭제 | |
| 30 | + </button> | |
| 31 | + </div> | |
| 32 | + </div> | |
| 33 | +</template> | |
| 34 | + | |
| 35 | +<script> | |
| 36 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 37 | +import { mdiMagnify} from '@mdi/js'; | |
| 38 | + | |
| 39 | + | |
| 40 | +export default { | |
| 41 | + data () { | |
| 42 | + return { | |
| 43 | + mdiMagnify: mdiMagnify, | |
| 44 | + } | |
| 45 | + }, | |
| 46 | + methods: { | |
| 47 | + goToPage(page) { | |
| 48 | + this.$router.push({ name: page }); | |
| 49 | + }, | |
| 50 | + }, | |
| 51 | + watch: { | |
| 52 | + | |
| 53 | + }, | |
| 54 | + computed: { | |
| 55 | + | |
| 56 | + }, | |
| 57 | + components:{ | |
| 58 | + SvgIcon | |
| 59 | + }, | |
| 60 | + mounted() { | |
| 61 | + console.log('Main2 mounted'); | |
| 62 | + } | |
| 63 | +} | |
| 64 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/TextList.vue
... | ... | @@ -0,0 +1,95 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">지문</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">1단원</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="search-wrap flex justify-end mb20"> | |
| 9 | + <select name="" id="" class="mr10 data-wrap"> | |
| 10 | + <option value="">전체</option> | |
| 11 | + </select> | |
| 12 | + <input type="text" placeholder="검색하세요."> | |
| 13 | + <button type="button" title="위원회 검색"> | |
| 14 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 15 | + </button> | |
| 16 | + </div> | |
| 17 | + <div class="table-wrap"> | |
| 18 | + <table> | |
| 19 | + <thead> | |
| 20 | + <td>No.</td> | |
| 21 | + <td>제목</td> | |
| 22 | + <td>내용</td> | |
| 23 | + <td>작성자</td> | |
| 24 | + <td>등록일</td> | |
| 25 | + </thead> | |
| 26 | + <tbody> | |
| 27 | + <tr @click="goToPage('TextInsert')"> | |
| 28 | + <td></td> | |
| 29 | + <td></td> | |
| 30 | + <td></td> | |
| 31 | + <td></td> | |
| 32 | + <td></td> | |
| 33 | + </tr> | |
| 34 | + </tbody> | |
| 35 | + </table> | |
| 36 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 37 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 38 | + <button class="selected-btn">1</button> | |
| 39 | + <button>2</button> | |
| 40 | + <button>3</button> | |
| 41 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 42 | + </article> | |
| 43 | + <div class="flex justify-end "> | |
| 44 | + <button type="button" title="등록" class="new-btn" @click="goToPage('TextInsert')"> | |
| 45 | + 등록 | |
| 46 | + </button> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | +</template> | |
| 50 | + | |
| 51 | +<script> | |
| 52 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 53 | +import { mdiMagnify} from '@mdi/js'; | |
| 54 | + | |
| 55 | + | |
| 56 | +export default { | |
| 57 | + data () { | |
| 58 | + return { | |
| 59 | + mdiMagnify: mdiMagnify, | |
| 60 | + } | |
| 61 | + }, | |
| 62 | + methods: { | |
| 63 | + goToPage(page) { | |
| 64 | + this.$router.push({ name: page }); | |
| 65 | + }, | |
| 66 | + showConfirm(type) { | |
| 67 | + let message = ''; | |
| 68 | + if (type === 'cancel') { | |
| 69 | + message = '삭제하시겠습니까?'; | |
| 70 | + } else if (type === 'reset') { | |
| 71 | + message = '초기화하시겠습니까?'; | |
| 72 | + } else if (type === 'save') { | |
| 73 | + message = '등록하시겠습니까?'; | |
| 74 | + } | |
| 75 | + | |
| 76 | + if (confirm(message)) { | |
| 77 | + this.goBack(); | |
| 78 | + } | |
| 79 | + }, | |
| 80 | + | |
| 81 | + }, | |
| 82 | + watch: { | |
| 83 | + | |
| 84 | + }, | |
| 85 | + computed: { | |
| 86 | + | |
| 87 | + }, | |
| 88 | + components:{ | |
| 89 | + SvgIcon | |
| 90 | + }, | |
| 91 | + mounted() { | |
| 92 | + console.log('Main2 mounted'); | |
| 93 | + } | |
| 94 | +} | |
| 95 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/VocaList.vue
... | ... | @@ -0,0 +1,95 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">단어</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">1단원</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="search-wrap flex justify-end mb20"> | |
| 9 | + <select name="" id="" class="mr10 data-wrap"> | |
| 10 | + <option value="">전체</option> | |
| 11 | + </select> | |
| 12 | + <input type="text" placeholder="검색하세요."> | |
| 13 | + <button type="button" title="위원회 검색"> | |
| 14 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 15 | + </button> | |
| 16 | + </div> | |
| 17 | + <div class="table-wrap"> | |
| 18 | + <table> | |
| 19 | + <thead> | |
| 20 | + <td>No.</td> | |
| 21 | + <td>단어</td> | |
| 22 | + <td>뜻</td> | |
| 23 | + <td>작성자</td> | |
| 24 | + <td>등록일</td> | |
| 25 | + </thead> | |
| 26 | + <tbody> | |
| 27 | + <tr @click="goToPage('noticeDetail')"> | |
| 28 | + <td></td> | |
| 29 | + <td></td> | |
| 30 | + <td></td> | |
| 31 | + <td></td> | |
| 32 | + <td></td> | |
| 33 | + </tr> | |
| 34 | + </tbody> | |
| 35 | + </table> | |
| 36 | + <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;"> | |
| 37 | + <button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button> | |
| 38 | + <button class="selected-btn">1</button> | |
| 39 | + <button>2</button> | |
| 40 | + <button>3</button> | |
| 41 | + <button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button> | |
| 42 | + </article> | |
| 43 | + <div class="flex justify-end "> | |
| 44 | + <button type="button" title="등록" class="new-btn" @click="goToPage('noticeInsert')"> | |
| 45 | + 등록 | |
| 46 | + </button> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | +</template> | |
| 50 | + | |
| 51 | +<script> | |
| 52 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 53 | +import { mdiMagnify} from '@mdi/js'; | |
| 54 | + | |
| 55 | + | |
| 56 | +export default { | |
| 57 | + data () { | |
| 58 | + return { | |
| 59 | + mdiMagnify: mdiMagnify, | |
| 60 | + } | |
| 61 | + }, | |
| 62 | + methods: { | |
| 63 | + goToPage(page) { | |
| 64 | + this.$router.push({ name: page }); | |
| 65 | + }, | |
| 66 | + showConfirm(type) { | |
| 67 | + let message = ''; | |
| 68 | + if (type === 'cancel') { | |
| 69 | + message = '삭제하시겠습니까?'; | |
| 70 | + } else if (type === 'reset') { | |
| 71 | + message = '초기화하시겠습니까?'; | |
| 72 | + } else if (type === 'save') { | |
| 73 | + message = '등록하시겠습니까?'; | |
| 74 | + } | |
| 75 | + | |
| 76 | + if (confirm(message)) { | |
| 77 | + this.goBack(); | |
| 78 | + } | |
| 79 | + }, | |
| 80 | + | |
| 81 | + }, | |
| 82 | + watch: { | |
| 83 | + | |
| 84 | + }, | |
| 85 | + computed: { | |
| 86 | + | |
| 87 | + }, | |
| 88 | + components:{ | |
| 89 | + SvgIcon | |
| 90 | + }, | |
| 91 | + mounted() { | |
| 92 | + console.log('Main2 mounted'); | |
| 93 | + } | |
| 94 | +} | |
| 95 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/noticeDetail.vue
... | ... | @@ -0,0 +1,78 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">공지 등록</p> | |
| 4 | + </div> | |
| 5 | + <div class="board-wrap"> | |
| 6 | + <div class="flex align-center"> | |
| 7 | + <label for="" class="title2">제목</label> | |
| 8 | + <input type="text" class="data-wrap"> | |
| 9 | + </div> | |
| 10 | + <hr> | |
| 11 | + <textarea name="" id=""></textarea> | |
| 12 | + <hr> | |
| 13 | + <div class="flex align-center"> | |
| 14 | + <label for="" class="title2">첨부파일</label> | |
| 15 | + <input type="file" ref="fileInput" @change="handleFileUpload" /> | |
| 16 | + </div> | |
| 17 | + <hr> | |
| 18 | + <div class="flex justify-between"> | |
| 19 | + <button type="button" class="flex align-center"> | |
| 20 | + <svg-icon type="mdi" :path="mdilChevronLeft" ></svg-icon> | |
| 21 | + <p> 이전글</p> | |
| 22 | + </button> | |
| 23 | + <button type="button" class="flex align-center"><p>다음글</p> | |
| 24 | + <svg-icon type="mdi" :path="mdilChevronRight" ></svg-icon> | |
| 25 | + | |
| 26 | + </button> | |
| 27 | + | |
| 28 | + | |
| 29 | + </div> | |
| 30 | + </div> | |
| 31 | + <div class="flex justify-between mt50"> | |
| 32 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('Board')"> | |
| 33 | + 목록 | |
| 34 | + </button> | |
| 35 | + <div class="flex"> | |
| 36 | + <button type="button" title="글쓰기" class="new-btn mr10" > | |
| 37 | + 수정 | |
| 38 | + </button> | |
| 39 | + <button type="button" title="글쓰기" class="new-btn" > | |
| 40 | + 삭제 | |
| 41 | + </button> | |
| 42 | + </div> | |
| 43 | + </div> | |
| 44 | +</template> | |
| 45 | + | |
| 46 | +<script> | |
| 47 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 48 | +import { mdiMagnify } from '@mdi/js'; | |
| 49 | +import { mdilChevronRight,mdilChevronLeft } from '@mdi/light-js'; | |
| 50 | + | |
| 51 | + | |
| 52 | +export default { | |
| 53 | + data () { | |
| 54 | + return { | |
| 55 | + mdiMagnify: mdiMagnify, | |
| 56 | + mdilChevronRight: mdilChevronRight , | |
| 57 | + mdilChevronLeft:mdilChevronLeft, | |
| 58 | + } | |
| 59 | + }, | |
| 60 | + methods: { | |
| 61 | + goToPage(page) { | |
| 62 | + this.$router.push({ name: page }); | |
| 63 | + }, | |
| 64 | + }, | |
| 65 | + watch: { | |
| 66 | + | |
| 67 | + }, | |
| 68 | + computed: { | |
| 69 | + | |
| 70 | + }, | |
| 71 | + components:{ | |
| 72 | + SvgIcon | |
| 73 | + }, | |
| 74 | + mounted() { | |
| 75 | + console.log('Main2 mounted'); | |
| 76 | + } | |
| 77 | +} | |
| 78 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/noticeInsert.vue
... | ... | @@ -0,0 +1,57 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">공지 등록</p> | |
| 4 | + </div> | |
| 5 | + <div class="board-wrap"> | |
| 6 | + <div class="flex align-center"> | |
| 7 | + <label for="" class="title2">제목</label> | |
| 8 | + <input type="text" class="data-wrap"> | |
| 9 | + </div> | |
| 10 | + <hr> | |
| 11 | + <textarea name="" id=""></textarea> | |
| 12 | + <hr> | |
| 13 | + <div class="flex align-center"> | |
| 14 | + <label for="" class="title2">첨부파일</label> | |
| 15 | + <input type="file" ref="fileInput" @change="handleFileUpload" /> | |
| 16 | + </div> | |
| 17 | + </div> | |
| 18 | + <div class="flex justify-between mt50"> | |
| 19 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('Board')"> | |
| 20 | + 목록 | |
| 21 | + </button> | |
| 22 | + <button type="button" title="글쓰기" class="new-btn" @click="goToPage('Board')"> | |
| 23 | + 등록 | |
| 24 | + </button> | |
| 25 | + </div> | |
| 26 | +</template> | |
| 27 | + | |
| 28 | +<script> | |
| 29 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 30 | +import { mdiMagnify} from '@mdi/js'; | |
| 31 | + | |
| 32 | + | |
| 33 | +export default { | |
| 34 | + data () { | |
| 35 | + return { | |
| 36 | + mdiMagnify: mdiMagnify, | |
| 37 | + } | |
| 38 | + }, | |
| 39 | + methods: { | |
| 40 | + goToPage(page) { | |
| 41 | + this.$router.push({ name: page }); | |
| 42 | + }, | |
| 43 | + }, | |
| 44 | + watch: { | |
| 45 | + | |
| 46 | + }, | |
| 47 | + computed: { | |
| 48 | + | |
| 49 | + }, | |
| 50 | + components:{ | |
| 51 | + SvgIcon | |
| 52 | + }, | |
| 53 | + mounted() { | |
| 54 | + console.log('Main2 mounted'); | |
| 55 | + } | |
| 56 | +} | |
| 57 | +</script>(파일 끝에 줄바꿈 문자 없음) |
+++ client/views/pages/teacher/textbook.vue
... | ... | @@ -0,0 +1,110 @@ |
| 1 | +<template> | |
| 2 | + <div class="title-box flex justify-between mb40"> | |
| 3 | + <p class="title">교재</p> | |
| 4 | + <select name="" id=""> | |
| 5 | + <option value="">A반</option> | |
| 6 | + </select> | |
| 7 | + </div> | |
| 8 | + <div class="content-t"> | |
| 9 | + <div class=" flex " style="gap: 50px;"> | |
| 10 | + <div class="textbook"> | |
| 11 | + <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')"> | |
| 12 | + </div> | |
| 13 | + <div class="text "> | |
| 14 | + <p class="title1" style="color: #fff;">A 교재</p> | |
| 15 | + <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;"> | |
| 16 | + <button>수정</button><p>|</p> | |
| 17 | + <button @click="showConfirm('delete')">삭제</button> | |
| 18 | + </div> | |
| 19 | + </div> | |
| 20 | + </div> | |
| 21 | + | |
| 22 | + <div class="textbook-add"> | |
| 23 | + <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button> | |
| 24 | + | |
| 25 | + </div> | |
| 26 | + </div> | |
| 27 | + </div> | |
| 28 | + <div v-show="searchOpen" class="popup-wrap"> | |
| 29 | + <div class="popup-box "> | |
| 30 | + <div class="flex justify-between mb30"> | |
| 31 | + <p class="popup-title">교재 이름</p> | |
| 32 | + <button type="button" class="popup-close-btn" @click="closeBtn"> | |
| 33 | + <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> | |
| 34 | + | |
| 35 | + </button> | |
| 36 | + </div> | |
| 37 | + <div class="search-wrap mb30"> | |
| 38 | + <input type="text" class="data-wrap" placeholder=""> | |
| 39 | + <button type="button" title="교재 검색"> | |
| 40 | + <img src="../../../resources/img/look_t.png" alt=""> | |
| 41 | + </button> | |
| 42 | + </div> | |
| 43 | + <div class="flex justify-center "> | |
| 44 | + <button type="button" title="글쓰기" class="new-btn mr10"> | |
| 45 | + 취소 | |
| 46 | + </button> | |
| 47 | + <button type="button" title="글쓰기" class="new-btn"> | |
| 48 | + 생성 | |
| 49 | + </button> | |
| 50 | + </div> | |
| 51 | + </div> | |
| 52 | + </div> | |
| 53 | +</template> | |
| 54 | + | |
| 55 | +<script> | |
| 56 | +import SvgIcon from '@jamescoyle/vue-icon'; | |
| 57 | +import { mdiMagnify, mdiWindowClose } from '@mdi/js'; | |
| 58 | + | |
| 59 | +export default { | |
| 60 | + data () { | |
| 61 | + return { | |
| 62 | + mdiWindowClose: mdiWindowClose, | |
| 63 | + showModal: false, | |
| 64 | + searchOpen: false, | |
| 65 | + } | |
| 66 | + }, | |
| 67 | + methods: { | |
| 68 | + goToPage(page) { | |
| 69 | + this.$router.push({ name: page }); | |
| 70 | + }, | |
| 71 | + closeModal() { | |
| 72 | + this.showModal = false; | |
| 73 | + }, | |
| 74 | + buttonSearch() { | |
| 75 | + this.searchOpen = true; | |
| 76 | + }, | |
| 77 | + closeBtn() { | |
| 78 | + this.searchOpen = false; | |
| 79 | + | |
| 80 | + }, | |
| 81 | + showConfirm(type) { | |
| 82 | + let message = ''; | |
| 83 | + if (type === 'delete') { | |
| 84 | + message = '삭제하시겠습니까?'; | |
| 85 | + } else if (type === 'reset') { | |
| 86 | + message = '초기화하시겠습니까?'; | |
| 87 | + } else if (type === 'save') { | |
| 88 | + message = '등록하시겠습니까?'; | |
| 89 | + } | |
| 90 | + | |
| 91 | + if (confirm(message)) { | |
| 92 | + this.goBack(); | |
| 93 | + } | |
| 94 | + }, | |
| 95 | + | |
| 96 | + }, | |
| 97 | + watch: { | |
| 98 | + | |
| 99 | + }, | |
| 100 | + computed: { | |
| 101 | + | |
| 102 | + }, | |
| 103 | + components: { | |
| 104 | + SvgIcon | |
| 105 | + }, | |
| 106 | + mounted() { | |
| 107 | + console.log('Main2 mounted'); | |
| 108 | + } | |
| 109 | +} | |
| 110 | +</script>(파일 끝에 줄바꿈 문자 없음) |
--- package-lock.json
+++ package-lock.json
... | ... | @@ -7,6 +7,9 @@ |
| 7 | 7 |
"dependencies": {
|
| 8 | 8 |
"@babel/cli": "7.19.3", |
| 9 | 9 |
"@babel/core": "7.19.3", |
| 10 |
+ "@jamescoyle/vue-icon": "^0.1.2", |
|
| 11 |
+ "@mdi/js": "^7.4.47", |
|
| 12 |
+ "@mdi/light-js": "^0.2.63", |
|
| 10 | 13 |
"babel-loader": "8.2.5", |
| 11 | 14 |
"css-loader": "6.7.1", |
| 12 | 15 |
"express": "^4.18.1", |
... | ... | @@ -316,6 +319,12 @@ |
| 316 | 319 |
"node": ">=10.0.0" |
| 317 | 320 |
} |
| 318 | 321 |
}, |
| 322 |
+ "node_modules/@jamescoyle/vue-icon": {
|
|
| 323 |
+ "version": "0.1.2", |
|
| 324 |
+ "resolved": "https://registry.npmjs.org/@jamescoyle/vue-icon/-/vue-icon-0.1.2.tgz", |
|
| 325 |
+ "integrity": "sha512-KFrImXx5TKIi6iQXlnyLEBl4rNosNKbTeRnr70ucTdUaciVmd9qK9d/pZAaKt1Ob/8xNnX2GMp8LisyHdKtEgw==", |
|
| 326 |
+ "license": "MIT" |
|
| 327 |
+ }, |
|
| 319 | 328 |
"node_modules/@jridgewell/gen-mapping": {
|
| 320 | 329 |
"version": "0.3.5", |
| 321 | 330 |
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", |
... | ... | @@ -374,6 +383,18 @@ |
| 374 | 383 |
"@jridgewell/sourcemap-codec": "^1.4.14" |
| 375 | 384 |
} |
| 376 | 385 |
}, |
| 386 |
+ "node_modules/@mdi/js": {
|
|
| 387 |
+ "version": "7.4.47", |
|
| 388 |
+ "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", |
|
| 389 |
+ "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==", |
|
| 390 |
+ "license": "Apache-2.0" |
|
| 391 |
+ }, |
|
| 392 |
+ "node_modules/@mdi/light-js": {
|
|
| 393 |
+ "version": "0.2.63", |
|
| 394 |
+ "resolved": "https://registry.npmjs.org/@mdi/light-js/-/light-js-0.2.63.tgz", |
|
| 395 |
+ "integrity": "sha512-+SUtJIOxvEy6DiVq0wTRPIzVuoPB5fhnubmzaN7e2ew0v3/nvnpC4mqbGCjiTK0diVd3+zvhEQHZzPDErGb1fg==", |
|
| 396 |
+ "license": "MIT" |
|
| 397 |
+ }, |
|
| 377 | 398 |
"node_modules/@nicolo-ribaudo/chokidar-2": {
|
| 378 | 399 |
"version": "2.1.8-no-fsevents.3", |
| 379 | 400 |
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", |
--- package.json
+++ package.json
... | ... | @@ -2,6 +2,9 @@ |
| 2 | 2 |
"dependencies": {
|
| 3 | 3 |
"@babel/cli": "7.19.3", |
| 4 | 4 |
"@babel/core": "7.19.3", |
| 5 |
+ "@jamescoyle/vue-icon": "^0.1.2", |
|
| 6 |
+ "@mdi/js": "^7.4.47", |
|
| 7 |
+ "@mdi/light-js": "^0.2.63", |
|
| 5 | 8 |
"babel-loader": "8.2.5", |
| 6 | 9 |
"css-loader": "6.7.1", |
| 7 | 10 |
"express": "^4.18.1", |
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?