13-12-2023

README.md

@@ -0,0 +1,69 @@
+<h1>Hướng dẫn các bước làm dự án mẫu</h1>
+
+<h2>Mô tả</h2>
+<p>Là nơi tổng hợp các giao diện dự án của khách hàng.</p>
+
+
+<h2>Hướng dẫn tạo dự án mẫu</h2>
+<p>
+    Quy trình:
+    <ol>
+        <li>Kéo tất cả file giao diện từ Repo về máy</li>
+        <li>Tạo 1 folder dự án mẫu</li>
+        <li>Upload code lên Repo (<a href="#huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</a>)</li>
+        <li>Cắt giao diện</li>
+        <li>Cuối mỗi ngày sẽ upload code đã cắt trong ngày hôm đó</li>
+    </ol>
+</p>
+<p>Khi cắt 1 giao diện mẫu mới sẽ có cấu trúc các file theo thư mục "<a href="" target="_blank">ten-du-an</a>" đã tạo ở trên (Download folder mẫu về, chỉnh sửa các thông tin theo quy định và cắt ghép).</p>
+
+
+<h2>Hướng dẫn đặt tên</h2>
+<p>Mỗi thư mục sẽ đặt tên theo quy định: <strong>ten-du-an</strong>. Mô tả của thư mục sẽ là URL dẫn đến giao diện đã được cắt ghép hoàn chỉnh </p>
+<p>VD: Giao diện mẹ và bé, mẫu 2 </p> 
+<ul>
+    <li>Tên folder: <strong>ten-du-an</strong></li>
+    <li>Mô tả: <a href="">url-du-an</a></li>
+</ul>
+
+
+<h2>Quy định cấu trúc</h2>
+<p>Sử dụng Tailwind để style giao diện.</p>
+<p> Tài liệu tham khảo </p>
+<ul>
+    <li><a href="https://tailwindui.com/"> https://tailwindui.com/ </a></li>
+    <li><a href="https://tailblocks.cc/"> https://tailblocks.cc/ </a></li>
+    <li><a href="https://www.hyperui.dev/"> https://www.hyperui.dev/ </a></li>
+    <li><a href="https://flowbite.com/docs/plugins/charts/"> Biểu đồ </a></li>
+</ul>
+
+
+<h2 id="huong-dan-su-dung-git">Hướng dẫn up code sử dụng git</h2>
+<p> Các bước up code:
+    <ol>
+        <li>Lấy tất cả code từ git url về máy</li>
+        <li>Kiểm tra trạng thái</li>
+        <li>Nếu có sự thay đổi, sẽ thêm file có sự thay đổi (Sẽ được thông báo ở bước 2)</li>
+        <li>Tạo ghi chú (Không viết tiếng việt có dấu)</li>
+        <li>Upload code</li>
+    </ol>
+</p>
+
+<p></p>
+
+<ol>
+    <li><strong>git pull (git URL) master:</strong> Lấy code về máy</li>
+    <li><strong>git status:</strong> Kiểm tra file nào có sự thay đổi</li>
+    <li><strong>git add 'tên file có sự thay đổi':</strong> Là file được báo đỏ ở git status</li>
+    <li><strong>git commit -m 'nội dung mô tả' :</strong> Comment nội dung </li>
+    <li><strong>git push origin master :</strong> Upload code</li>    
+</ol>
+
+<p>VD: Upload code từ url 'https://repo.hurasoft.com/ducdt/admin_hura.git', Thêm/Sửa file README.md</p>
+<ol>
+    <li>git pull https://repo.hurasoft.com/ducdt/admin_hura.git master</li>
+    <li>git status</li>
+    <li>git add 'README.md'</li>
+    <li>git commit -m 'Huong dan, quy dinh'</li>
+    <li>git push origin master</li>    
+</ol>

scss/pc_style.css

@@ -0,0 +1,475 @@
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+
+button, input, select {
+  outline: none !important;
+  color: #000;
+  border-radius: 0;
+}
+
+button, input {
+  overflow: visible;
+}
+
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: 0;
+}
+
+input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+body {
+  color: #000;
+  font-family: "Inter", sans-serif;
+  background: #FAFAFB;
+  position: relative;
+  font-size: 14px;
+  word-break: break-word;
+  counter-reset: section;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  text-decoration: none;
+}
+
+::-webkit-scrollbar-track {
+  background: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  background: grey;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #ccc;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 10px;
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+
+.inherit {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+
+.line-clamp-2 {
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-4 {
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 4;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-5 {
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.icons {
+  background: url(../images/global-sprite.png) no-repeat;
+  background-size: 400px 400px;
+}
+
+.admin-global-container {
+  max-width: 1720px;
+  margin: auto;
+  display: flex;
+}
+
+.admin-menu-container {
+  position: relative;
+  overflow: auto;
+  background: #004E99;
+  color: #fff;
+  width: 16%;
+  padding: 20px 0;
+  line-height: 20px;
+}
+.admin-menu-container a {
+  color: #fff;
+}
+.admin-menu-container .menu-logo {
+  display: table;
+  margin-bottom: 50px;
+  margin-left: 16px;
+}
+.admin-menu-container .menu-logo img {
+  height: 22px;
+}
+.admin-menu-container .menu-list {
+  margin: 50px 0;
+}
+.admin-menu-container details[open] svg {
+  transform: rotate(90deg);
+}
+.admin-menu-container details[open] summary {
+  background: #81B5E4;
+}
+.admin-menu-container details[open] summary a {
+  font-weight: 700;
+}
+.admin-menu-container details[open] .icons {
+  filter: brightness(100);
+}
+.admin-menu-container summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding-right: 16px;
+  border-radius: 4px;
+  position: relative;
+  transition: 0.3s all;
+}
+.admin-menu-container summary a {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+}
+.admin-menu-container svg {
+  position: absolute;
+  right: 16px;
+  transition: 0.3s all;
+}
+.admin-menu-container .item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  line-height: 36px;
+  transition: 0.3s all;
+  border-radius: 4px;
+}
+.admin-menu-container .item:hover {
+  background: #81B5E4;
+}
+.admin-menu-container .item:hover .icons {
+  filter: brightness(100);
+}
+.admin-menu-container .title {
+  width: calc(100% - 33px);
+}
+.admin-menu-container .sub-menu {
+  padding: 13px 13px 13px 45px;
+  position: relative;
+}
+.admin-menu-container .sub-menu::before {
+  content: "";
+  width: 1px;
+  height: calc(100% - 39px);
+  background: #79B0E2;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+}
+.admin-menu-container .sub-menu a {
+  display: block;
+  margin-bottom: 15px;
+  position: relative;
+}
+.admin-menu-container .sub-menu a:hover {
+  text-decoration: underline;
+}
+.admin-menu-container .sub-menu a::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #79B0E2;
+  position: absolute;
+  top: 6px;
+  left: -28px;
+}
+.admin-menu-container .sub-menu a:last-child {
+  margin: 0;
+}
+.admin-menu-container .icons {
+  width: 20px;
+  height: 20px;
+  margin-right: 13px;
+}
+.admin-menu-container .icon-home {
+  background-position: -9px -7px;
+}
+.admin-menu-container .icon-sell {
+  background-position: -45px -7px;
+}
+.admin-menu-container .icon-product {
+  background-position: -81px -8px;
+}
+.admin-menu-container .icon-user {
+  background-position: -117px -8px;
+}
+.admin-menu-container .icon-marketing {
+  background-position: -154px -8px;
+}
+.admin-menu-container .icon-content {
+  background-position: -187px -8px;
+}
+.admin-menu-container .icon-stats {
+  background-position: -224px -8px;
+}
+.admin-menu-container .icon-system {
+  background-position: -262px -8px;
+}
+.admin-menu-container .icon-settings {
+  background-position: -297px -8px;
+}
+.admin-menu-container .icon-support {
+  background-position: -332px -7px;
+}
+.admin-menu-container .icon-account {
+  background-position: -367px -9px;
+}
+.admin-menu-container .icon-logout {
+  background-position: -9px -45px;
+}
+
+.admin-menu {
+  color: #fff;
+  z-index: 1;
+}
+.admin-menu .item {
+  display: flex;
+  align-items: center;
+  transition: 0.3s all;
+  position: relative;
+}
+.admin-menu .item:hover {
+  background: #81B5E4;
+}
+.admin-menu .item:hover .icons {
+  filter: brightness(100);
+}
+.admin-menu .item:hover .sub-menu {
+  left: calc(100% + 8px);
+  opacity: 1;
+  visibility: inherit;
+}
+.admin-menu .sub-menu {
+  padding: 10px 22px 10px 15px;
+  border-radius: 6px;
+  background: #004E99;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  min-width: 150px;
+  z-index: -1;
+  transition: 0.2s all;
+  position: absolute;
+  left: calc(100% + 30px);
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
+  min-width: 200px;
+}
+.admin-menu .sub-menu a {
+  display: block;
+  margin-bottom: 12px;
+  line-height: 18px;
+  position: relative;
+}
+.admin-menu .sub-menu a:hover {
+  text-decoration: underline;
+}
+.admin-menu .sub-menu a::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #79B0E2;
+  position: absolute;
+  top: 6px;
+  left: -18px;
+}
+.admin-menu .sub-menu a:last-child {
+  margin: 0;
+}
+.admin-menu .menu-list {
+  padding-left: 16px;
+  margin-top: 10px;
+  position: relative;
+}
+.admin-menu .menu-list::before {
+  content: "";
+  width: 1.5px;
+  background: #79B0E2;
+  position: absolute;
+  left: 1px;
+  top: 7px;
+  bottom: 7px;
+}
+.admin-menu .icons {
+  width: 50px;
+  height: 40px;
+}
+.admin-menu .icon-home {
+  background-position: 7px 3px;
+}
+.admin-menu .icon-sell {
+  background-position: -29px 3px;
+}
+.admin-menu .icon-product {
+  background-position: -66px 3px;
+}
+.admin-menu .icon-user {
+  background-position: -103px 3px;
+}
+.admin-menu .icon-marketing {
+  background-position: -139px 3px;
+}
+.admin-menu .icon-content {
+  background-position: -172px 3px;
+}
+.admin-menu .icon-stats {
+  background-position: -208px 3px;
+}
+.admin-menu .icon-system {
+  background-position: -247px 3px;
+}
+.admin-menu .icon-settings {
+  background-position: -282px 2px;
+  margin-left: -1px;
+}
+.admin-menu .icon-support {
+  background-position: -318px 3px;
+}
+.admin-menu .icon-account {
+  background-position: -354px 2px;
+}
+.admin-menu .icon-logout {
+  background-position: 6px -34px;
+}
+
+.admin-content-container .note-list {
+  min-width: 144px;
+}
+.admin-content-container .note-list a {
+  display: block;
+  padding: 0 10px;
+  line-height: 35px;
+  transition: 0.2s all;
+}
+.admin-content-container .note-list a:hover {
+  background: #F5F7FF;
+  color: #0041E8;
+  font-weight: 600;
+}
+.admin-content-container .content-holder {
+  padding: 16px 0 16px 16px;
+}
+
+.table-fixed {
+  text-align: center;
+}
+.table-fixed td {
+  padding: 13px 8px;
+  border: 1px solid #ECECEC;
+}
+.table-fixed tbody td {
+  padding: 5px 8px;
+}
+.table-fixed tbody td:nth-child(2), .table-fixed tbody td:nth-child(3) {
+  text-align: left;
+}
+.table-fixed tbody td:nth-child(2) {
+  color: #0041E8;
+}
+
+.admin-home-tab {
+  overflow: auto;
+}
+.admin-home-tab a {
+  color: #A0A8B5;
+  padding: 9px 7.7px;
+  text-align: center;
+  border-right: 1px solid #DDE1EB;
+  white-space: nowrap;
+}
+.admin-home-tab a:last-child {
+  border: 0;
+}
+.admin-home-tab a:hover, .admin-home-tab a.current {
+  background: #0041E8;
+  color: #fff;
+}
+
+.home-report-holder {
+  display: none;
+}
+.home-report-holder table {
+  width: 100%;
+  line-height: 20px;
+  text-align: center;
+}
+.home-report-holder thead {
+  background: #f6f6f6;
+  font-weight: 500;
+}
+.home-report-holder td {
+  border: 1px solid #ECECEC;
+  padding: 14px 5px;
+}
+.home-report-holder td a {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.home-report-holder td:nth-child(2) {
+  text-align: left;
+}
+
+.home-todo-list td {
+  padding: 0 4px;
+  color: #000 !important;
+}
+.home-todo-list td:nth-child(1), .home-todo-list td:nth-child(3), .home-todo-list td:nth-child(4) {
+  white-space: nowrap;
+}/*# sourceMappingURL=pc_style.css.map */

scss/pc_style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["pc_style.scss","pc_style.css"],"names":[],"mappings":"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","file":"pc_style.css"}

scss/pc_style.scss

@@ -0,0 +1,401 @@
+*, ::after, ::before {box-sizing: border-box;}
+button,input,select{outline:none!important;color:#000;border-radius:0}
+button, input {overflow: visible;}
+button, input, optgroup, select, textarea {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;border-radius: 0;}
+input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}
+input[type=number] {-moz-appearance: textfield;}
+body{
+    color:#000;
+    font-family: 'Inter', sans-serif;
+    background: #FAFAFB;
+    position: relative;
+    font-size: 14px;    
+    word-break: break-word;
+    counter-reset: section;
+    font-weight: 400;
+    line-height: 1.5;
+    margin: auto;
+}
+img{
+    max-width: 100%;
+    height: auto;
+}
+a{
+    text-decoration: none;
+}
+::-webkit-scrollbar-track{background:#f5f5f5;}
+::-webkit-scrollbar-thumb{background: grey;border-radius:5px;}
+::-webkit-scrollbar-thumb:hover{background:#ccc;}
+::-webkit-scrollbar{width: 8px;height:10px;}
+.clearfix{
+    &::after{
+        content:'';clear:both;display:block
+    }
+}
+.inherit{font-size: inherit;font-weight: inherit;line-height: inherit;margin: 0;}
+.line-clamp-2{text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
+.line-clamp-3{text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
+.line-clamp-4{text-overflow:ellipsis;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
+.line-clamp-5{text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
+.icons{
+    background: url(../images/global-sprite.png) no-repeat;
+    background-size: 400px 400px;
+}
+.admin-global-container {
+    max-width: 1720px;
+    margin: auto;
+    display: flex;
+}
+.admin-menu-container {
+    position: relative;
+    overflow: auto;
+    background: #004E99;
+    color: #fff;    
+    width: 16%;  
+    padding: 20px 0;
+    line-height: 20px;
+    a{
+        color: #fff;
+    }
+    .menu-logo{
+        display: table;
+        margin-bottom: 50px;
+        margin-left: 16px;
+        img{
+            height: 22px;
+        }
+    }
+    .menu-list{
+        margin: 50px 0;
+    }
+    details{
+        &[open] {
+            svg {
+                transform: rotate(90deg);
+            }
+            summary {
+                background: #81B5E4;
+                a{
+                    font-weight: 700;
+                }
+            }
+            .icons{
+                filter: brightness(100);
+            }
+        }
+    }
+    summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;     
+        padding-right: 16px;  
+        border-radius: 4px; 
+        position: relative;
+        transition: .3s all;
+        a{
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+        }
+    }
+    svg {
+        position: absolute;
+        right: 16px;
+        transition: .3s all;
+    }
+    .item {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        line-height: 36px;
+        transition: .3s all;
+        border-radius: 4px;
+        &:hover{
+            background: #81B5E4;
+            .icons{
+                filter: brightness(100);
+            }
+        }
+    }
+    .title {
+        width: calc(100% - 33px);
+    }
+    .sub-menu {
+        padding: 13px 13px 13px 45px;
+        position: relative;
+        &::before{
+            content: "";
+            width: 1px;
+            height: calc(100% - 39px);
+            background: #79B0E2;
+            position: absolute;
+            left: 20px;
+            top: 20px;            
+        }
+        a{
+            display: block;
+            margin-bottom: 15px;
+            position: relative;
+            &:hover{
+                text-decoration: underline;
+            }
+            &::before{
+                content: "";
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: #79B0E2;
+                position: absolute;
+                top: 6px;
+                left: -28px;
+            }
+            &:last-child{
+                margin: 0;
+            }
+        }
+    }
+    .icons{
+        width: 20px;
+        height: 20px;
+        margin-right: 13px;
+    }
+    .icon-home {
+        background-position: -9px -7px;
+    }
+    .icon-sell {
+        background-position: -45px -7px;
+    }
+    .icon-product {
+        background-position: -81px -8px;
+    }
+    .icon-user {
+        background-position: -117px -8px;
+    }
+    .icon-marketing {
+        background-position: -154px -8px;
+    }
+    .icon-content {
+        background-position: -187px -8px;
+    }
+    .icon-stats {
+        background-position: -224px -8px;
+    }
+    .icon-system {
+        background-position: -262px -8px;
+    }
+    .icon-settings {
+        background-position: -297px -8px;
+    }
+    .icon-support {
+        background-position: -332px -7px;
+    }
+    .icon-account {
+        background-position: -367px -9px;
+    }
+    .icon-logout {
+        background-position: -9px -45px;
+    }
+}
+.admin-menu {
+    color: #fff;
+    z-index: 1;
+    .item {
+        display: flex;
+        align-items: center;
+        transition: .3s all;
+        position: relative;
+        &:hover{
+            background: #81B5E4;
+            .icons{
+                filter: brightness(100);
+            }
+            .sub-menu {
+                left: calc(100% + 8px);
+                opacity: 1;
+                visibility: inherit;
+            }
+        }
+    }
+    .sub-menu {
+        padding: 10px 22px 10px 15px;
+        border-radius: 6px;
+        background: #004E99;
+        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+        white-space: nowrap;
+        min-width: 150px;
+        z-index: -1;
+        transition: .2s all;
+        position: absolute;
+        left: calc(100% + 30px);
+        top: 0;
+        opacity: 0;
+        visibility: hidden;        
+        min-width: 200px;
+        a{
+            display: block;
+            margin-bottom: 12px;
+            line-height: 18px;
+            position: relative;
+            &:hover{
+                text-decoration: underline;
+            }
+            &::before{
+                content: "";
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: #79B0E2;
+                position: absolute;
+                top: 6px;
+                left: -18px;
+            }
+            &:last-child{
+                margin: 0;
+            }
+        }
+    }
+    .menu-list {
+        padding-left: 16px;
+        margin-top: 10px;
+        position: relative;
+        &::before{
+            content: "";
+            width: 1.5px;
+            background: #79B0E2;
+            position: absolute;
+            left: 1px;
+            top: 7px;
+            bottom: 7px;
+        }
+    }
+    .icons{
+        width: 50px;
+        height: 40px;
+    }
+    .icon-home {
+        background-position: 7px 3px;
+    }
+    .icon-sell {
+        background-position: -29px 3px;
+    }
+    .icon-product {
+        background-position: -66px 3px;
+    }
+    .icon-user {
+        background-position: -103px 3px;
+    }
+    .icon-marketing {
+        background-position: -139px 3px;
+    }
+    .icon-content {
+        background-position: -172px 3px;
+    }
+    .icon-stats {
+        background-position: -208px 3px;
+    }
+    .icon-system {
+        background-position: -247px 3px;
+    }
+    .icon-settings {
+        background-position: -282px 2px;
+        margin-left: -1px;
+    }
+    .icon-support {
+        background-position: -318px 3px;
+    }
+    .icon-account {
+        background-position: -354px 2px;
+    }
+    .icon-logout {
+        background-position: 6px -34px;
+    }
+}
+.admin-content-container{
+    .note-list{
+        min-width: 144px;
+        a{
+            display: block;
+            padding: 0 10px;
+            line-height: 35px;
+            transition: .2s all;
+            &:hover {
+                background: #F5F7FF;
+                color: #0041E8;
+                font-weight: 600;
+            }
+        }
+    }
+    .content-holder{
+        padding: 16px 0 16px 16px;
+    }
+}
+.table-fixed {
+    text-align: center;
+    td {
+        padding: 13px 8px;
+        border: 1px solid #ECECEC;
+    }
+    tbody {
+        td{  
+            padding: 5px 8px;          
+            &:nth-child(2), &:nth-child(3){
+                text-align: left;
+            }
+            &:nth-child(2){
+                color: #0041E8;
+            }
+        }
+    }
+}
+.admin-home-tab{    
+    overflow: auto;
+    a{
+        color: #A0A8B5;
+        padding: 9px 7.7px;
+        text-align: center;
+        border-right: 1px solid #DDE1EB;
+        white-space: nowrap;
+        &:last-child{
+            border: 0;
+        }
+        &:hover,&.current{
+            background: #0041E8;
+            color: #fff;
+        }
+    }
+}
+.home-report-holder {
+    display: none;
+    table{
+        width: 100%;
+        line-height: 20px;
+        text-align: center;
+    }
+    thead {
+        background: #f6f6f6;
+        font-weight: 500;
+    }
+    td{
+        border: 1px solid #ECECEC;
+        padding: 14px 5px;
+        a{
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        &:nth-child(2){
+            text-align: left;
+        }
+    }
+}
+.home-todo-list{
+    td{
+        padding: 0 4px;
+        color: #000 !important;
+        &:nth-child(1), &:nth-child(3), &:nth-child(4){
+            white-space: nowrap;
+        }
+    }
+}