diff --git a/public/assets/imgs/icon_assign_class.png b/public/assets/imgs/icon_assign_class.png new file mode 100644 index 0000000..b78758c Binary files /dev/null and b/public/assets/imgs/icon_assign_class.png differ diff --git a/public/assets/imgs/icon_group.png b/public/assets/imgs/icon_group.png new file mode 100644 index 0000000..0850e09 Binary files /dev/null and b/public/assets/imgs/icon_group.png differ diff --git a/src/_screens/home/headmaster/headmaster.style.scss b/src/_screens/home/headmaster/headmaster.style.scss index bee294c..5a741a2 100644 --- a/src/_screens/home/headmaster/headmaster.style.scss +++ b/src/_screens/home/headmaster/headmaster.style.scss @@ -1,5 +1,15 @@ @import "/src/_styles/mixin"; +:root { + --height-avatar: 88px; + --width-avatar: 88px; + + @include screen_pc_sm { + --height-avatar: 70px; + --width-avatar: 70px; + } +} + .headmaster-home-container { display: flex; gap: 32px; @@ -160,12 +170,10 @@ gap: 16px; } - .headmaster-home-item-teacher { - padding: 8px; - border: 1.25px solid #e5e5e5; + .headmaster-home-item-teacher-container { + padding: 8px 8px 32px; + border: 1.25px solid var(--primary-color); border-radius: 4px; - display: flex; - gap: 16px; background-color: #fff; transition: all 0.5s linear; @@ -174,83 +182,94 @@ cursor: pointer; } - .headmaster-home-avatar-teacher { - width: 88px; - height: 88px; - border-radius: 5px; - box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, - rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; - - @include screen_pc_sm { - height: 70px; - width: 70px; - } + .headmaster-home-item-teacher { + display: flex; + gap: 16px; + border-bottom: 1px solid #939393; + padding-bottom: 12px; - img { - width: 100%; - height: 100%; - object-fit: cover; + .headmaster-home-avatar-teacher { + width: var(--width-avatar); + height: var(--height-avatar); border-radius: 5px; + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, + rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; + + // @include screen_pc_sm { + // height: 70px; + // width: 70px; + // } + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; + } } - } - - .headmaster-home-detail-teacher { - display: flex; - flex: 1; - justify-content: space-between; - gap: 24px; - .headmaster-home-info-teacher { + .headmaster-home-detail-teacher { display: flex; - flex-direction: column; - - .headmaster-info-teacher-name { - font-size: 2rem; - font-weight: 700; - color: var(--primary-color); - } + flex: 1; + justify-content: space-between; + gap: 24px; - .headmaster-info-teacher-text { - font-size: 1.8rem; - } - } + .headmaster-home-info-teacher { + display: flex; + flex-direction: column; + position: relative; + flex: 1; + height: 100%; - .headmaster-home-criteria-teacher { - display: flex; - flex-direction: column; + .headmaster-info-teacher-name { + font-size: 2rem; + font-weight: 700; + color: var(--primary-color); + } - .headmaster-criteria-teacher-title { - font-size: 2rem; - font-weight: 700; - color: var(--primary-color); + .headmaster-info-teacher-text { + font-size: 1.8rem; + } } - .headmaster-criteria-teacher-row { + .headmaster-home-criteria-teacher { display: flex; - justify-content: space-between; - gap: 8px; + flex-direction: column; + position: relative; - .criteria-teacher-title { + .headmaster-criteria-teacher-title { font-size: 2rem; font-weight: 700; + color: var(--primary-color); } - .headmaster-criteria-teacher-criteria { - font-size: 1.8rem; - font-weight: 400; - position: relative; - padding-left: 12px; - - &::before { - content: ""; - display: block; - position: absolute; - left: 0; - top: 12px; - width: 5px; - height: 5px; - background-color: var(--primary-color); - border-radius: 50%; + .headmaster-criteria-teacher-row { + display: flex; + justify-content: space-between; + gap: 8px; + + .criteria-teacher-title { + font-size: 2rem; + font-weight: 700; + } + + .headmaster-criteria-teacher-criteria { + font-size: 1.8rem; + font-weight: 400; + position: relative; + padding-left: 12px; + + &::before { + content: ""; + display: block; + position: absolute; + left: 0; + top: 12px; + width: 5px; + height: 5px; + background-color: var(--primary-color); + border-radius: 50%; + } } } } @@ -259,4 +278,15 @@ } } } + + .headmaster-home-teacher-assign-text { + position: absolute; + bottom: -4rem; + left: 0; + font-weight: 700; + + @include screen_pc_sm { + bottom: -4.6rem; + } + } } \ No newline at end of file diff --git a/src/_screens/home/headmaster/index.js b/src/_screens/home/headmaster/index.js index b2c7584..c30a642 100644 --- a/src/_screens/home/headmaster/index.js +++ b/src/_screens/home/headmaster/index.js @@ -290,40 +290,44 @@ export default function HeadmasterHome() { )} {listTeacher.map((item, index) => { return ( -
handleClickTeacherItem(item)}> -
- -
-
-
-

- {item?.teacher_name} -

-

- {item?.email} -

-

- {item?.phone} -

+
handleClickTeacherItem(item)}> +
+
+
-
-
-

- Mức độ CĐS Sunday English +

+
+

+ {item?.teacher_name}

- -
-
-

- Tiêu chí giao bài +

+ {item?.email}

- -
-
-

- Tiêu chí tỷ lệ học sinh làm bài +

+ {item?.phone}

- +

{'Số lần giao bài: ' + item?.total_assign}

+
+
+
+

+ Mức độ CĐS Sunday English +

+ +
+
+

+ Tiêu chí giao bài +

+ +
+
+

+ Tiêu chí tỷ lệ học sinh làm bài +

+ +
+

{'Số lớp đã giao: ' + item?.assign_class + '/' + item?.total_class}

diff --git a/src/_screens/home/teacher/index.js b/src/_screens/home/teacher/index.js index 4115ca0..41e5494 100644 --- a/src/_screens/home/teacher/index.js +++ b/src/_screens/home/teacher/index.js @@ -13,6 +13,7 @@ import { LIST_SCHOOL_YEAR, LIST_SEMESTER, listAlphabet, + PRIMARY_COLOR, } from "../../../_constants/common"; import { useEffect, useState } from "react"; import { apiCaller, history } from "../../../_helpers"; @@ -152,6 +153,20 @@ export default function TeacherHome() { Áp dụng
+
+
+ + {"Tổng số lớp: "} + 5 + +
+
+ + {"Tổng số lần giao: "} + 50 + +
+

Mức độ CĐS Sunday Englsih của Giáo viên diff --git a/src/_screens/home/teacher/teacherHome.style.scss b/src/_screens/home/teacher/teacherHome.style.scss index d27f687..c32d7b2 100644 --- a/src/_screens/home/teacher/teacherHome.style.scss +++ b/src/_screens/home/teacher/teacherHome.style.scss @@ -17,9 +17,26 @@ gap: 16px; } + .teacher-home-info-assign-box { + border-radius: 8px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + padding: 6px 24px 6px 8px; + background-color: #fff; + display: flex; + gap: 4px; + justify-content: center; + align-items: center; + + img { + width: 20px; + height: 20px; + object-fit: contain; + } + } + .teacher-home-overview { padding: 16px; - margin: 48px 16px 0; + margin: 24px 16px 0; box-shadow: 0px 0px 8px 0px #00000040; border-radius: 12px; background-color: #fff; @@ -192,4 +209,4 @@ } } } -} +} \ No newline at end of file