更新影音列表頁

css/lists.css

@@ -93,6 +93,9 @@
 .filter-list .search-tab-result {
   font-size: 14px;
 }
+.filter-list .lists-card {
+  height: 100%;
+}
 .filter-list .lists-card .person-img {
   width: 100%;
   height: 80px;
@@ -163,9 +166,10 @@
   width: 70%;
 }
 .filter-list .lists-card .card-body h5,
-.filter-list .lists-card .card-body h6 {
+.filter-list .lists-card .card-body h6,
+.filter-list .lists-card .card-body .video-title {
   line-height: 1.25;
-  font-size: 0.875rem;
+  font-size: 1rem;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -177,4 +181,18 @@
 }
 .filter-list .lists-card .card-body h6 {
   -webkit-line-clamp: 2;
+}
+.filter-list .lists-card .card-body .video-title {
+  font-weight: bold;
+  color: #43484C;
+  -webkit-line-clamp: 2;
+}
+.filter-list .lists-card .card-body .tags-container span {
+  display: inline-block;
+  margin: 3px 6px 3px 0;
+  padding: 4px 6px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  color: #EE7800;
+  border: 1px solid #EE7800;
 }/*# sourceMappingURL=lists.css.map */

css/lists.css.map

@@ -1 +1 @@
-{"version":3,"sources":["lists.css","lists.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,YAAA;AAEA;EACE,kBAAA;EACA,gBAAA;EACA,qBAAA;ADCF;;ACEA;EACE,eAAA;EACA,gBAAA;ADCF;;ACGE;EACE,cAAA;ADAJ;ACGE;EACE,eAAA;ADDJ;ACIM;EADF;IAEI,eAAA;IACA,eAAA;EDDN;AACF;ACII;EACE,kBAAA;ADFN;ACIM;EAHF;IAII,sBAAA;EDDN;AACF;ACKE;EACE,mBAAA;EACA,yBAAA;ADHJ;ACME;EACE,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kCAAA;ADJJ;;ACSE;EACE,aAAA;EACA,mBAAA;ADNJ;ACSE;EACE,iBAAA;ADPJ;ACUE;EACE,YAAA;EACA,qBAAA;EACA,uBAAA;ADRJ;ACUI;EACE,cAAA;EACA,qBAAA;ADRN;ACWI;EACE,cAAA;EACA,qBAAA;ADTN;ACaE;EACE,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;ADXJ;ACaI;EACE,wBAAA;EACA,6CAAA;ADXN;ACaM;;EAEE,eAAA;ADXR;ACiBI;EACE,YAAA;EACA,uBAAA;ADfN;ACiBM;EACE,cAAA;ADfR;ACkBM;EACE,cAAA;ADhBR;ACqBE;EACE,eAAA;ADnBJ;ACuBI;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,iDAAA;ADrBN;ACuBM;EATF;IAUI,YAAA;IACA,eAAA;EDpBN;AACF;ACsBM;EAdF;IAeI,YAAA;IACA,eAAA;EDnBN;AACF;ACsBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADpBN;ACsBM;EAJF;IAKI,aAAA;EDnBN;AACF;ACqBM;EARF;IASI,aAAA;EDlBN;AACF;ACqBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADnBN;ACqBM;EAJF;IAKI,aAAA;EDlBN;AACF;ACoBM;EARF;IASI,aAAA;EDjBN;AACF;ACmBM;EAZF;IAaI,aAAA;EDhBN;AACF;ACkBM;EAhBF;IAiBI,aAAA;EDfN;AACF;ACiBM;EApBF;IAqBI,cAAA;EDdN;AACF;ACkBM;EACE,UAAA;ADhBR;ACmBM;;EAEE,iBAAA;EACA,mBAAA;EAEA,4BAAA;EACA,gBAAA;EACA,uBAAA;EACA,oBAAA;ADlBR;ACqBM;EACE,kBAAA;EACA,qBAAA;ADnBR;ACsBM;EACE,qBAAA;ADpBR","file":"lists.css"}
+{"version":3,"sources":["lists.css","lists.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,YAAA;AAEA;EACE,kBAAA;EACA,gBAAA;EACA,qBAAA;ADCF;;ACEA;EACE,eAAA;EACA,gBAAA;ADCF;;ACGE;EACE,cAAA;ADAJ;ACGE;EACE,eAAA;ADDJ;ACIM;EADF;IAEI,eAAA;IACA,eAAA;EDDN;AACF;ACII;EACE,kBAAA;ADFN;ACIM;EAHF;IAII,sBAAA;EDDN;AACF;ACKE;EACE,mBAAA;EACA,yBAAA;ADHJ;ACME;EACE,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kCAAA;ADJJ;;ACSE;EACE,aAAA;EACA,mBAAA;ADNJ;ACSE;EACE,iBAAA;ADPJ;ACUE;EACE,YAAA;EACA,qBAAA;EACA,uBAAA;ADRJ;ACUI;EACE,cAAA;EACA,qBAAA;ADRN;ACWI;EACE,cAAA;EACA,qBAAA;ADTN;ACaE;EACE,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;ADXJ;ACaI;EACE,wBAAA;EACA,6CAAA;ADXN;ACaM;;EAEE,eAAA;ADXR;ACiBI;EACE,YAAA;EACA,uBAAA;ADfN;ACiBM;EACE,cAAA;ADfR;ACkBM;EACE,cAAA;ADhBR;ACqBE;EACE,eAAA;ADnBJ;ACsBE;EACE,YAAA;ADpBJ;ACsBI;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,iDAAA;ADpBN;ACsBM;EATF;IAUI,YAAA;IACA,eAAA;EDnBN;AACF;ACqBM;EAdF;IAeI,YAAA;IACA,eAAA;EDlBN;AACF;ACqBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADnBN;ACqBM;EAJF;IAKI,aAAA;EDlBN;AACF;ACoBM;EARF;IASI,aAAA;EDjBN;AACF;ACoBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADlBN;ACoBM;EAJF;IAKI,aAAA;EDjBN;AACF;ACmBM;EARF;IASI,aAAA;EDhBN;AACF;ACkBM;EAZF;IAaI,aAAA;EDfN;AACF;ACiBM;EAhBF;IAiBI,aAAA;EDdN;AACF;ACgBM;EApBF;IAqBI,cAAA;EDbN;AACF;ACiBM;EACE,UAAA;ADfR;ACkBM;;;EAGE,iBAAA;EACA,eAAA;EAEA,4BAAA;EACA,gBAAA;EACA,uBAAA;EACA,oBAAA;ADjBR;ACoBM;EACE,kBAAA;EACA,qBAAA;ADlBR;ACqBM;EACE,qBAAA;ADnBR;ACsBM;EACE,iBAAA;EACA,cAAA;EACA,qBAAA;ADpBR;ACwBQ;EACE,qBAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,yBAAA;ADtBV","file":"lists.css"}

css/lists.scss

@@ -115,6 +115,8 @@
   }
 
   .lists-card {
+    height: 100%;
+
     .person-img {
       width: 100%;
       height: 80px;
@@ -179,9 +181,10 @@
       }
 
       h5,
-      h6 {
+      h6,
+      .video-title {
         line-height: 1.25;
-        font-size: 0.875rem;
+        font-size: 1rem;
         // 換行
         -webkit-box-orient: vertical;
         overflow: hidden;
@@ -197,6 +200,24 @@
       h6 {
         -webkit-line-clamp: 2;
       }
+
+      .video-title {
+        font-weight: bold;
+        color: #43484C;
+        -webkit-line-clamp: 2;
+      }
+
+      .tags-container {
+        span {
+          display: inline-block;
+          margin: 3px 6px 3px 0;
+          padding: 4px 6px;
+          border-radius: 3px;
+          font-size: 0.75rem;
+          color: #EE7800;
+          border: 1px solid #EE7800;
+        }
+      }
     }
   }
 }

videos/lists/js/main.js

@@ -179,26 +179,30 @@ async function videoSearch(type = "") {
 
     if (response.data.videos.length) {
       response.data.videos.forEach((item) => {
+        let tagsHtml = '';
+
+        item.VideoTag.forEach((tag) => {
+          tagsHtml += `<span>${tag}</span>`;
+        });
+
+        console.log('tagsHtml', tagsHtml);
+
         resultHtml += `
-        <div class="col-md-4 mb-4">
-          <a href="${item.DesignerLink}">
-            <div class="card lists-card">
-              <img src="${item.VideoCoverImg}" class="video-cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
-                <div class="card-body d-flex align-items-center">
-                  <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
-                  <section>
-                    <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
-                    <h6 class="card-title mb-0 text-dark">
-                      <span class="font-weight-bold">
-                        ${item.DesignerName}
-                      </span>
-                      設計師
-                    </h6>
-                  </section>
-                </div>
-            </div>
-          </a>
-        </div>`;
+          <div class="col-md-4 mb-4">
+            <a href="${item.DesignerLink}">
+              <div class="card lists-card">
+                <img src="${item.VideoCoverImg}" class="video-cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
+                  <div class="card-body d-flex flex-column align-items-center">
+                    <section class="d-flex align-items-center w-100">
+                      <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
+                      <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
+                    </section>
+                    <h3 class="my-3 video-title">${item.VideoTitle}</h3>
+                    <div class="tags-container mt-2 me-auto">${tagsHtml}</div>
+                  </div>
+              </div>
+            </a>
+          </div>`;
       });
     } else {
       resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"