新增專欄 new 標籤

columns/lists/js/main.js

@@ -165,7 +165,21 @@ async function dataSearch(type = "") {
         noData = true;
       }
 
+      // 取得當前日期並計算三天前的日期
+      const currentDate = new Date();
+      const threeDaysAgo = new Date();
+      threeDaysAgo.setDate(currentDate.getDate() - 3);
+
+
       response.data.columns.forEach((item, index) => {
+        // 將 ColumnDate 轉換成日期物件
+        const columnDate = new Date(item.ColumnDate);
+
+        // 判斷 ColumnDate 是否在三天內
+        const isNew = columnDate >= threeDaysAgo && columnDate <= currentDate;
+
+        const newItemClass = isNew ? '' : 'd-none'; // 非三天內則隱藏 New 標籤
+
         let tagList = item.ColumnTag.split(',');
         let tagsHtml = '';
 
@@ -184,6 +198,7 @@ async function dataSearch(type = "") {
                     <h5 class="text-dark title">${item.ColumnTitle}</h5>
                     <div class="tags-container columns-tag mt-3 me-auto">${tagsHtml}</div>
                   </div>
+                  <span class="new-item ${newItemClass}">NEW</span>
               </div>
             </a>
           </div>`;

css/lists.css

@@ -256,6 +256,16 @@
   color: #EE751B;
   border: 1px solid #EE751B;
 }
+.filter-list .new-item {
+  display: block;
+  padding: 6px 8px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #fff;
+  background: red;
+  font-size: 0.75rem;
+}
 
 #builderList .card h5 {
   font-size: 1.125rem;

css/lists.scss

@@ -304,6 +304,17 @@
       }
     }
   }
+
+  .new-item {
+    display: block;
+    padding: 6px 8px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #fff;
+    background: red;
+    font-size: .75rem;
+  }
 }
 
 #builderList {