Showing
3 changed files
with
43 additions
and
12 deletions
| ... | @@ -5,18 +5,28 @@ | ... | @@ -5,18 +5,28 @@ |
| 5 | display:grid; | 5 | display:grid; |
| 6 | grid-template-rows: 1.4fr 1fr; | 6 | grid-template-rows: 1.4fr 1fr; |
| 7 | 7 | ||
| 8 | + margin: 1%; | ||
| 9 | + | ||
| 10 | + background-color: #FFE4b1; | ||
| 8 | 11 | ||
| 9 | } | 12 | } |
| 10 | 13 | ||
| 11 | .mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){ | 14 | .mainpage :nth-child(1):not(.mainpage :nth-child(1) :nth-child(1)){ |
| 12 | display:grid; | 15 | display:grid; |
| 13 | grid-template-columns: 1fr 1fr; | 16 | grid-template-columns: 1fr 1fr; |
| 14 | - grid-template-rows: 8% 16% 74%; | 17 | + grid-template-rows: 8% 12% 79%; |
| 18 | +} | ||
| 15 | 19 | ||
| 20 | +.mainpage :nth-child(1):not(.haksikTitle){ | ||
| 21 | + border: 2px solid black; | ||
| 16 | } | 22 | } |
| 17 | 23 | ||
| 18 | -.mainpage :nth-child(1) :nth-child(1){ | 24 | +.mainpage :nth-child(1) :nth-child(1), |
| 25 | +.mainpage :nth-child(1) :nth-child(2) | ||
| 26 | +{ | ||
| 19 | padding-left: 10%; | 27 | padding-left: 10%; |
| 28 | + | ||
| 29 | + border-bottom: 2px solid black; | ||
| 20 | } | 30 | } |
| 21 | .mainpage :nth-child(1) :nth-child(3), | 31 | .mainpage :nth-child(1) :nth-child(3), |
| 22 | .mainpage :nth-child(1) :nth-child(4), | 32 | .mainpage :nth-child(1) :nth-child(4), |
| ... | @@ -24,8 +34,17 @@ | ... | @@ -24,8 +34,17 @@ |
| 24 | .mainpage :nth-child(1) :nth-child(6){ | 34 | .mainpage :nth-child(1) :nth-child(6){ |
| 25 | text-align: center; | 35 | text-align: center; |
| 26 | padding-top: 2%; | 36 | padding-top: 2%; |
| 37 | + | ||
| 38 | + | ||
| 39 | +} | ||
| 40 | +.mainpage :nth-child(1) :nth-child(3), | ||
| 41 | +.mainpage :nth-child(1) :nth-child(4){ | ||
| 42 | + border-bottom: 2px solid black; | ||
| 43 | + | ||
| 27 | } | 44 | } |
| 28 | 45 | ||
| 46 | + | ||
| 47 | + | ||
| 29 | .lunchTable, .dinnerTable{ | 48 | .lunchTable, .dinnerTable{ |
| 30 | display:flex; | 49 | display:flex; |
| 31 | flex-direction: column; | 50 | flex-direction: column; |
| ... | @@ -34,8 +53,18 @@ | ... | @@ -34,8 +53,18 @@ |
| 34 | 53 | ||
| 35 | .mainpage :nth-child(2){ | 54 | .mainpage :nth-child(2){ |
| 36 | display: grid; | 55 | display: grid; |
| 37 | - grid-template-rows: 8% 90%; | 56 | + grid-template-rows: 10% 90%; |
| 38 | - padding-left: 2%; | 57 | + |
| 58 | + | ||
| 39 | } | 59 | } |
| 40 | 60 | ||
| 61 | +.mainpage :nth-child(2) :nth-child(1){ | ||
| 62 | + border-bottom: 2px solid black; | ||
| 63 | + border-top: 2px hidden black; | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +.mainpage :nth-child(2) :nth-child(2){ | ||
| 67 | + border: 2px solid black; | ||
| 68 | + border-top: 2px hidden black; | ||
| 69 | +} | ||
| 41 | 70 | ... | ... |
| ... | @@ -14,6 +14,11 @@ function MainPage() { | ... | @@ -14,6 +14,11 @@ function MainPage() { |
| 14 | let today = currentYear+'/'+currentMonth+'/'+currentDate; | 14 | let today = currentYear+'/'+currentMonth+'/'+currentDate; |
| 15 | 15 | ||
| 16 | 16 | ||
| 17 | + | ||
| 18 | + | ||
| 19 | + const todayMealTable = async()=>{ | ||
| 20 | + axios.get("/api/todayMenu").then( | ||
| 21 | + (res) => { | ||
| 17 | const makeTable = (arr_, dom_) => { | 22 | const makeTable = (arr_, dom_) => { |
| 18 | 23 | ||
| 19 | arr_.forEach((elem)=>{ | 24 | arr_.forEach((elem)=>{ |
| ... | @@ -24,9 +29,6 @@ function MainPage() { | ... | @@ -24,9 +29,6 @@ function MainPage() { |
| 24 | 29 | ||
| 25 | }; | 30 | }; |
| 26 | 31 | ||
| 27 | - const todayMealTable = async()=>{ | ||
| 28 | - axios.get("/api/todayMenu").then( | ||
| 29 | - (res) => { | ||
| 30 | const index1 = res.data[0].indexOf(':'); | 32 | const index1 = res.data[0].indexOf(':'); |
| 31 | const index2 = res.data[1].indexOf(':'); | 33 | const index2 = res.data[1].indexOf(':'); |
| 32 | let lunchArr = res.data[0].substring(index1+1); | 34 | let lunchArr = res.data[0].substring(index1+1); |
| ... | @@ -38,15 +40,13 @@ function MainPage() { | ... | @@ -38,15 +40,13 @@ function MainPage() { |
| 38 | if(index1 !== -1){ | 40 | if(index1 !== -1){ |
| 39 | dinnerArr = dinnerArr.split(','); | 41 | dinnerArr = dinnerArr.split(','); |
| 40 | } | 42 | } |
| 41 | - console.log(lunchArr, dinnerArr); | ||
| 42 | 43 | ||
| 43 | const lunchDom = document.getElementsByClassName('lunchTable')[0]; | 44 | const lunchDom = document.getElementsByClassName('lunchTable')[0]; |
| 44 | const dinnerDom = document.getElementsByClassName('dinnerTable')[0]; | 45 | const dinnerDom = document.getElementsByClassName('dinnerTable')[0]; |
| 45 | 46 | ||
| 46 | makeTable(lunchArr, lunchDom); | 47 | makeTable(lunchArr, lunchDom); |
| 47 | makeTable(dinnerArr, dinnerDom); | 48 | makeTable(dinnerArr, dinnerDom); |
| 48 | - setlunch(lunchArr); | 49 | + console.log() |
| 49 | - setdinner(dinnerArr); | ||
| 50 | 50 | ||
| 51 | 51 | ||
| 52 | 52 | ||
| ... | @@ -63,7 +63,7 @@ function MainPage() { | ... | @@ -63,7 +63,7 @@ function MainPage() { |
| 63 | <div className='mainpage'> | 63 | <div className='mainpage'> |
| 64 | 64 | ||
| 65 | <div> | 65 | <div> |
| 66 | - <div> | 66 | + <div className='haksikTitle'> |
| 67 | {today} 제2기숙사 학식 | 67 | {today} 제2기숙사 학식 |
| 68 | </div> | 68 | </div> |
| 69 | <div></div> | 69 | <div></div> |
| ... | @@ -74,7 +74,7 @@ function MainPage() { | ... | @@ -74,7 +74,7 @@ function MainPage() { |
| 74 | </div> | 74 | </div> |
| 75 | <div className='dinnerTable'></div> | 75 | <div className='dinnerTable'></div> |
| 76 | </div> | 76 | </div> |
| 77 | - <div> | 77 | + <div className='mainpageUnder'> |
| 78 | <div>메뉴에 대한 이야기</div> | 78 | <div>메뉴에 대한 이야기</div> |
| 79 | <div></div> | 79 | <div></div> |
| 80 | </div> | 80 | </div> | ... | ... |
| ... | @@ -15,7 +15,9 @@ code { | ... | @@ -15,7 +15,9 @@ code { |
| 15 | *{ | 15 | *{ |
| 16 | margin:0px; | 16 | margin:0px; |
| 17 | padding:0px; | 17 | padding:0px; |
| 18 | + /* | ||
| 18 | border-style: solid; | 19 | border-style: solid; |
| 19 | border-color: black; | 20 | border-color: black; |
| 20 | border-width: 5px; | 21 | border-width: 5px; |
| 22 | + */ | ||
| 21 | } | 23 | } | ... | ... |
-
Please register or login to post a comment