이은진
09-11
240911 이은진 마이페이지 css 수정
@96aad6fd030e6adff1820509fb411099ff349af3
+++ client/resources/img/new_img/mypage/background.png
| Binary file is not shown |
+++ client/resources/img/new_img/mypage/photoBtn.png
| Binary file is not shown |
--- client/views/pages/main/Main.vue
+++ client/views/pages/main/Main.vue
... | ... | @@ -9,6 +9,9 @@ |
| 9 | 9 |
<div v-if="$route.name === 'MyPlan'" class="main-wrap-plan"> |
| 10 | 10 |
<router-view /> |
| 11 | 11 |
</div> |
| 12 |
+ <div v-else-if="$route.name === 'MyPage'" class="main-wrap-mypage"> |
|
| 13 |
+ <router-view /> |
|
| 14 |
+ </div> |
|
| 12 | 15 |
<div v-else class="main-wrap"> |
| 13 | 16 |
<router-view /> |
| 14 | 17 |
</div> |
--- client/views/pages/main/MyPage.vue
+++ client/views/pages/main/MyPage.vue
... | ... | @@ -3,14 +3,14 @@ |
| 3 | 3 |
<div class="flex justify-between mb30" style="gap: 30px;"> |
| 4 | 4 |
<div> |
| 5 | 5 |
<div class="title-box flex justify-between mb20"> |
| 6 |
- <p class="title">소속 반</p> |
|
| 6 |
+ <p class="title" style="color: white;">소속 반</p> |
|
| 7 | 7 |
<div class="flex align-center look-btn"> |
| 8 | 8 |
<!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> --> |
| 9 | 9 |
</div> |
| 10 | 10 |
</div> |
| 11 |
- <div class="wrap " style="width: 82rem;"> |
|
| 11 |
+ <div style="width: 82rem; padding: 2rem;"> |
|
| 12 | 12 |
<section class="flex" style="gap: 20px;"> |
| 13 |
- <div class="class flex justify-between" style="cursor: default;"> |
|
| 13 |
+ <div class="class flex justify-between" style="cursor: default; background-color: transparent;"> |
|
| 14 | 14 |
<div class="box gd-col2" style="gap: 5px;"> |
| 15 | 15 |
<div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
| 16 | 16 |
<div><img src="../../../resources/img/img176_82t.png" alt=""></div> |
... | ... | @@ -27,66 +27,60 @@ |
| 27 | 27 |
</div> |
| 28 | 28 |
</div> |
| 29 | 29 |
<div> |
| 30 |
- <div class="title-box flex justify-between mb20"> |
|
| 31 |
- <p class="title">사진첩</p> |
|
| 32 |
- </div> |
|
| 33 |
- <div class="photobook"> |
|
| 34 |
- <div class="flex justify-between"> |
|
| 35 |
- <div class="box" style="gap: 5px;"> |
|
| 36 |
- <div><img src="../../../resources/img/img198_12p.png" alt=""></div> |
|
| 37 |
- </div> |
|
| 38 |
- <div class="text mt10"> |
|
| 39 |
- <p class="title1 mb10">나의 사진첩</p> |
|
| 40 |
- <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기"
|
|
| 41 |
- class="new-btn"> |
|
| 42 |
- 바로가기 |
|
| 43 |
- </button> |
|
| 44 | 30 |
|
| 45 |
- </div> |
|
| 46 |
- </div> |
|
| 47 |
- |
|
| 31 |
+ <div style="position: absolute; left: 102rem; top: 10rem; " |
|
| 32 |
+ @click="selectedTab = 'tab4'; goToPage('PhotoBook')"><img
|
|
| 33 |
+ src="../../../resources/img/new_img/mypage/photoBtn.png" alt=""></div> |
|
| 34 |
+ <div class="title-box flex justify-between mb20" style=" position: absolute; left: 117em; top: 6em; "> |
|
| 35 |
+ <p class="title" style="color: white;">사진첩</p> |
|
| 48 | 36 |
</div> |
| 49 | 37 |
</div> |
| 50 | 38 |
</div> |
| 51 | 39 |
<div class="title-box flex justify-between mb20"> |
| 52 |
- <p class="title">{{ studentInfo.studentName }} 학생 랭킹</p>
|
|
| 40 |
+ <p class="title" style="color: white;">{{ studentInfo.studentName }} 학생 랭킹</p>
|
|
| 53 | 41 |
</div> |
| 54 | 42 |
<div class=" mb30"> |
| 55 |
- <div class=" flex " style="gap: 50px;"> |
|
| 56 |
- <div class="textbook book-red"> |
|
| 57 |
- <div class="text "> |
|
| 43 |
+ <div class=" flex " style="gap: 95px;"> |
|
| 44 |
+ <div class="textbook book-red" style="background-color: white; width: 19%; border: #f9c4eb solid 6px;"> |
|
| 45 |
+ <div class="text" style="background-color: #f9c4eb;"> |
|
| 58 | 46 |
<p class="title1" style="color: #fff;">포토북 랭킹</p> |
| 59 | 47 |
</div> |
| 60 | 48 |
<div class="box " style="gap: 10px;"> |
| 61 | 49 |
<div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
| 62 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="red">{{ photo_rank }}등</em>입니다.</P>
|
|
| 50 |
+ <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="red">{{
|
|
| 51 |
+ photo_rank }}등</em>입니다.</P> |
|
| 63 | 52 |
</div> |
| 64 | 53 |
</div> |
| 65 |
- <div class="textbook "> |
|
| 66 |
- <div class="text "> |
|
| 54 |
+ <div class="textbook " style="background-color: white; width: 19%; border: #b5dbcc solid 6px;"> |
|
| 55 |
+ <div class="text" style="background-color: #b5dbcc;"> |
|
| 67 | 56 |
<p class="title1" style="color: #fff;">진도율 랭킹</p> |
| 68 | 57 |
</div> |
| 69 | 58 |
<div class="box " style="gap: 10px;"> |
| 70 | 59 |
<div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
| 71 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="yellow">{{ problem_rank }}등</em>입니다.</P>
|
|
| 60 |
+ <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="yellow">{{
|
|
| 61 |
+ problem_rank }}등</em>입니다.</P> |
|
| 72 | 62 |
</div> |
| 73 | 63 |
</div> |
| 74 |
- <div class="textbook book-blue"> |
|
| 75 |
- <div class="text "> |
|
| 64 |
+ <div class="textbook book-blue " |
|
| 65 |
+ style="background-color: white; width: 19%; border: #bcd3eb solid 6px;"> |
|
| 66 |
+ <div class="text" style="background-color: #bcd3eb;"> |
|
| 76 | 67 |
<p class="title1" style="color: #fff;">점수 랭킹</p> |
| 77 | 68 |
</div> |
| 78 | 69 |
<div class="box " style="gap: 10px;"> |
| 79 | 70 |
<div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
| 80 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="blue">{{ score_rank }}등</em>입니다.</P>
|
|
| 71 |
+ <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="blue">{{
|
|
| 72 |
+ score_rank }}등</em>입니다.</P> |
|
| 81 | 73 |
</div> |
| 82 | 74 |
</div> |
| 83 |
- <div class="textbook book-navy"> |
|
| 84 |
- <div class="text "> |
|
| 75 |
+ <div class="textbook book-navy " |
|
| 76 |
+ style="background-color: white; width: 19%; border: #f9c894 solid 6px;"> |
|
| 77 |
+ <div class="text" style="background-color: #f9c894;"> |
|
| 85 | 78 |
<p class="title1" style="color: #fff;">학습시간 랭킹</p> |
| 86 | 79 |
</div> |
| 87 | 80 |
<div class="box " style="gap: 10px;"> |
| 88 | 81 |
<div><img src="../../../resources/img/img196_12p.png" alt=""></div> |
| 89 |
- <P class="title2 mt10">현재 {{ stdCount }}명 중 <em class="navy">{{ time_rank }}등</em>입니다.</P>
|
|
| 82 |
+ <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="navy">{{
|
|
| 83 |
+ time_rank }}등</em>입니다.</P> |
|
| 90 | 84 |
</div> |
| 91 | 85 |
</div> |
| 92 | 86 |
</div> |
... | ... | @@ -159,11 +153,11 @@ |
| 159 | 153 |
} |
| 160 | 154 |
}) |
| 161 | 155 |
.then((response) => {
|
| 162 |
- console.log(response.data); |
|
| 163 |
- this.studentInfo = response.data; |
|
| 156 |
+ console.log(response.data); |
|
| 157 |
+ this.studentInfo = response.data; |
|
| 164 | 158 |
}) |
| 165 | 159 |
.catch((error) => {
|
| 166 |
- console.error("학생 정보 가져오기 실패:", error);
|
|
| 160 |
+ console.error("학생 정보 가져오기 실패:", error);
|
|
| 167 | 161 |
}); |
| 168 | 162 |
}, |
| 169 | 163 |
photoRankByLikeData: function () {
|
... | ... | @@ -202,7 +196,7 @@ |
| 202 | 196 |
}) |
| 203 | 197 |
.then(function (response) {
|
| 204 | 198 |
console.log("User Rank - response : ", response.data);
|
| 205 |
- vm.score_rank = response.data; |
|
| 199 |
+ vm.score_rank = response.data; |
|
| 206 | 200 |
}) |
| 207 | 201 |
.catch(function (error) {
|
| 208 | 202 |
console.log("User Rank - error : ", error);
|
... | ... | @@ -223,7 +217,7 @@ |
| 223 | 217 |
}) |
| 224 | 218 |
.then(function (response) {
|
| 225 | 219 |
console.log("User Rank - response : ", response.data);
|
| 226 |
- vm.time_rank = response.data; |
|
| 220 |
+ vm.time_rank = response.data; |
|
| 227 | 221 |
}) |
| 228 | 222 |
.catch(function (error) {
|
| 229 | 223 |
console.log("User Rank - error : ", error);
|
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?