修正網址 & 頁碼

builder/lists/js/main.js

@@ -7,7 +7,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 
 //     if (screen.width < 991) {
-       
+
 //         window.location.href = `https://m.hhh.com.tw/builder/lists/`;
 //     }
 // }
@@ -15,7 +15,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 //   //hhh_user_api();
 //     if (screen.width >= 991) {
-    
+
 //     window.location.href =`https://hhh.com.tw/builder/lists/`;
 //   }
 
@@ -92,12 +92,11 @@ async function dataSearch(type = "") {
   try {
     const response = await axios.get(url);
     console.log('response.data', response.data);
-    // console.log('response.data.videos', response.data.videos);
 
-    let totalCount = response.data.total_count.toLocaleString();
+    let totalCount = response.data.total_count;
     let totalPages = Math.ceil(totalCount / pageSize);
 
-    $("#totalCount").html(totalCount);
+    $("#totalCount").html(totalCount.toLocaleString());
 
     if (totalPages) {
       $('.filter-list .pagination').show();

cases/lists/js/main.js

@@ -9,7 +9,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 
 //     if (screen.width < 991) {
-       
+
 //         window.location.href = `https://m.hhh.com.tw/cases/lists/`;
 //     }
 // }
@@ -17,7 +17,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 //   //hhh_user_api();
 //     if (screen.width >= 991) {
-    
+
 //     window.location.href =`https://hhh.com.tw/cases/lists/`;
 //   }
 
@@ -151,10 +151,10 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.cases', response.data.cases);
 
-    let totalCount = response.data.total_count.toLocaleString();
+    let totalCount = response.data.total_count;
     let totalPages = Math.ceil(totalCount / pageSize);
 
-    $("#totalCount").html(totalCount);
+    $("#totalCount").html(totalCount.toLocaleString());
 
     if (totalPages) {
       $('.filter-list .pagination').show();
@@ -178,29 +178,32 @@ async function dataSearch(type = "") {
 
         resultHtml += `
           <div class="col-md-4 mb-4">
-            <a href="${item.DesignerLink}">
-              <div class="card lists-card">
+            <div class="card lists-card">
+              <a href="${item.CaseLink}">
                 <img src="${item.CaseCoverImg}" class="cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
-                  <div class="card-body d-flex flex-column">
-                    <div class="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="text-muted mb-2">${item.DesignerTitle}</h5>
-                        <h6 class="mb-0 text-dark">
-                          <span class="font-weight-bold">
-                            ${item.DesignerName}
-                          </span>
-                          設計師
-                        </h6>
-                      </section>
-                    </div>
-                    <p class="mt-3 text-dark title">${item.CaseTitle}</p>
-                    <div class="tags-container my-3 me-auto">${tagsHtml}</div>
-                    <small class="d-block ms-auto mt-auto date-item">上架日期 ${item.CaseSdate}</small>
-                  </div>
+              </a>
+              <div class="card-body d-flex flex-column">
+                <div class="d-flex align-items-center">
+                  <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
+                  <a href="${item.DesignerLink}" class="link">
+                    <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
+                    <h6 class="mb-0 text-dark">
+                      <span class="font-weight-bold">
+                        ${item.DesignerName}
+                      </span>
+                      設計師
+                    </h6>
+                  </section>
+                </a>
               </div>
-            </a>
-          </div>`;
+              <a href="${item.CaseLink}" class="link">
+                <p class="mt-3 text-dark title">${item.CaseTitle}</p>
+              </a>
+              <div class="tags-container my-3 me-auto">${tagsHtml}</div>
+              <small class="d-block ms-auto mt-auto date-item">上架日期 ${item.CaseSdate}</small>
+            </div>
+          </div>
+          </div >`;
       });
     } else {
       resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"

columns/lists/js/main.js

@@ -8,7 +8,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 
 //     if (screen.width < 991) {
-       
+
 //         window.location.href = `https://m.hhh.com.tw/columns/lists/`;
 //     }
 // }
@@ -16,7 +16,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 //   //hhh_user_api();
 //     if (screen.width >= 991) {
-    
+
 //     window.location.href =`https://hhh.com.tw/columns/lists/`;
 //   }
 
@@ -186,8 +186,8 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.columns', response.data.columns);
 
-    let totalCount = response.data.total_count.toLocaleString();
-    $("#totalCount").html(totalCount);
+    let totalCount = response.data.total_count;
+    $("#totalCount").html(totalCount.toLocaleString());
 
     let resultHtml = '';
 

css/lists.css

@@ -124,8 +124,10 @@
 .filter-list .lists-card {
   height: 100%;
 }
-.filter-list .lists-card:hover .title,
-.filter-list .lists-card:hover .video-title {
+.filter-list .lists-card .link {
+  transition: all 0.3s;
+}
+.filter-list .lists-card .link:hover {
   opacity: 0.7;
 }
 .filter-list .lists-card .person-img {
@@ -166,6 +168,7 @@
   }
 }
 .filter-list .lists-card .video-cover-img {
+  width: 100%;
   height: 225px;
   -o-object-fit: cover;
      object-fit: cover;

css/lists.scss

@@ -147,14 +147,21 @@
   .lists-card {
     height: 100%;
 
-    &:hover {
+    .link {
+      transition: all .3s;
 
-      .title,
-      .video-title {
+      &:hover {
         opacity: .7;
       }
     }
 
+    // &:hover {
+    //   .title,
+    //   .video-title {
+    //     opacity: .7;
+    //   }
+    // }
+
     .person-img {
       width: 100%;
       height: 80px;
@@ -190,6 +197,7 @@
     }
 
     .video-cover-img {
+      width: 100%;
       height: 225px;
       object-fit: cover;
 

designers/lists/js/main.js

@@ -8,7 +8,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 
 //     if (screen.width < 991) {
-       
+
 //         window.location.href = `https://m.hhh.com.tw/designers/lists/`;
 //     }
 // }
@@ -16,7 +16,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 //   //hhh_user_api();
 //     if (screen.width >= 991) {
-    
+
 //     window.location.href =`https://hhh.com.tw/designers/lists/`;
 //   }
 
@@ -132,10 +132,10 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.designers', response.data.designers);
 
-    let totalCount = response.data.total_count.toLocaleString();
+    let totalCount = response.data.total_count;
     let totalPages = Math.ceil(totalCount / pageSize);
 
-    $("#totalCount").html(totalCount);
+    $("#totalCount").html(totalCount.toLocaleString());
 
     if (totalPages) {
       $('.filter-list .pagination').show();

videos/lists/js/main.js

@@ -7,7 +7,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 
 //     if (screen.width < 991) {
-       
+
 //         window.location.href = `https://m.hhh.com.tw/videos/lists/`;
 //     }
 // }
@@ -15,7 +15,7 @@ $('#topCarousel').load('../../template/top_carousel.html');
 // window.onload = function () {
 //   //hhh_user_api();
 //     if (screen.width >= 991) {
-    
+
 //     window.location.href =`https://hhh.com.tw/videos/lists/`;
 //   }
 
@@ -106,10 +106,10 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.videos', response.data.videos);
 
-    let totalCount = response.data.total_count.toLocaleString();
+    let totalCount = response.data.total_count;
     let totalPages = Math.ceil(totalCount / pageSize);
 
-    $("#totalCount").html(totalCount);
+    $("#totalCount").html(totalCount.toLocaleString());
 
     if (totalPages) {
       $('.filter-list .pagination').show();
@@ -132,19 +132,21 @@ async function dataSearch(type = "") {
 
         resultHtml += `
           <div class="col-md-4 mb-4">
-            <a href="${item.DesignerLink}">
-              <div class="card lists-card">
+            <div class="card lists-card">
+              <a href="${item.VideoLink}">
                 <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="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>
+              </a>
+              <div class="card-body d-flex flex-column align-items-center">
+                <a href="${item.DesignerLink}" 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="text-muted mb-2">${item.DesignerTitle}</h5>
+                </a>
+                <a href="${item.VideoLink}">
+                  <h3 class="my-3 video-title">${item.VideoTitle}</h3>
+                </a>
+                <div class="tags-container mt-2 me-auto">${tagsHtml}</div>
               </div>
-            </a>
+            </div>
           </div>`;
       });
     } else {