新增全站搜尋頁

builder/lists/index.html

@@ -485,7 +485,7 @@
           </div>
         </div>
 
-        <!-- 設計師列表 -->
+        <!-- 列表 -->
         <div class="row mt-5" id="builderList">
           <!-- 動態載入 -->
         </div>

builder/lists/js/main.js

@@ -70,7 +70,7 @@ async function dataSearch(type = "") {
     console.log('response.data', response.data);
     // console.log('response.data.videos', response.data.videos);
 
-    let totalCount = response.data.total_count;
+    let totalCount = response.data.total_count.toLocaleString();
     let totalPages = Math.ceil(totalCount / pageSize);
 
     $("#totalCount").html(totalCount);

cases/lists/index.html

@@ -691,7 +691,6 @@
           </div>
         </div>
 
-
         <div class="row">
           <div class="col-md-9">
             <div class="d-flex flex-wrap align-items-center">
@@ -725,7 +724,7 @@
           </div>
         </div>
 
-        <!-- 設計師列表 -->
+        <!-- 列表 -->
         <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>

cases/lists/js/main.js

@@ -130,7 +130,7 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.cases', response.data.cases);
 
-    let totalCount = response.data.total_count;
+    let totalCount = response.data.total_count.toLocaleString();
     let totalPages = Math.ceil(totalCount / pageSize);
 
     $("#totalCount").html(totalCount);

columns/lists/index.html

@@ -281,7 +281,7 @@
           </div>
         </div>
 
-        <!-- 設計師列表 -->
+        <!-- 列表 -->
         <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>

columns/lists/js/main.js

@@ -158,7 +158,7 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.columns', response.data.columns);
 
-    let totalCount = response.data.total_count;
+    let totalCount = response.data.total_count.toLocaleString();
     $("#totalCount").html(totalCount);
 
     let resultHtml = '';

css/lists.css

@@ -80,6 +80,13 @@
   color: #EE7800;
   border-color: #EE7800;
 }
+.filter-list .play-img {
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .filter-list .dropdown-menu {
   padding: 0;
   min-width: 15rem;
@@ -310,13 +317,6 @@
 #builderList .card h6 {
   -webkit-line-clamp: 1;
 }
-#builderList .card .play-img {
-  width: 50px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 
 .date-item {
   color: #c3c3c3;

css/lists.scss

@@ -91,6 +91,14 @@
     }
   }
 
+  .play-img {
+    width: 50px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .dropdown-menu {
     padding: 0;
     min-width: 15rem;
@@ -358,14 +366,6 @@
     h6 {
       -webkit-line-clamp: 1;
     }
-
-    .play-img {
-      width: 50px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
   }
 }
 

designers/lists/index.html

@@ -892,7 +892,6 @@
           </div>
         </div>
 
-
         <div class="row">
           <div class="col-md-9">
             <div class="d-flex flex-wrap align-items-center">
@@ -932,7 +931,7 @@
           </div>
         </div>
 
-        <!-- 設計師列表 -->
+        <!-- 列表 -->
         <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>

designers/lists/js/main.js

@@ -114,7 +114,7 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.designers', response.data.designers);
 
-    let totalCount = response.data.total_count;
+    let totalCount = response.data.total_count.toLocaleString();
     let totalPages = Math.ceil(totalCount / pageSize);
 
     $("#totalCount").html(totalCount);

img/media/fb-o.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55"><defs><style>.a,.d{fill:none;}.a{stroke:#204889;}.b{fill:#204889;}.c{stroke:none;}</style></defs><g transform="translate(-0.446)"><g class="a" transform="translate(0.446)"><circle class="c" cx="27.5" cy="27.5" r="27.5"/><circle class="d" cx="27.5" cy="27.5" r="27"/></g><path class="b" d="M10.974,10.524l.52-3.386H8.244v-2.2a1.693,1.693,0,0,1,1.909-1.829H11.63V.229A18.013,18.013,0,0,0,9.008,0C6.333,0,4.584,1.622,4.584,4.558V7.138H1.609v3.386H4.584V18.71H8.244V10.524Z" transform="translate(20.391 18)"/></g></svg>

img/media/like.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55"><defs><style>.a,.d{fill:none;}.a{stroke:#ee751b;}.b{fill:#ee751b;}.c{stroke:none;}</style></defs><g transform="translate(-280.446)"><g class="a" transform="translate(280.446)"><circle class="c" cx="27.5" cy="27.5" r="27.5"/><circle class="d" cx="27.5" cy="27.5" r="27"/></g><g transform="translate(297 20)"><g transform="translate(0 0)"><path class="b" d="M15.4,30a4.966,4.966,0,0,0-3.1,1.072,7.064,7.064,0,0,0-1.814,2.182,7.064,7.064,0,0,0-1.814-2.182A4.966,4.966,0,0,0,5.571,30C2.4,30,0,32.6,0,36.043c0,3.722,2.988,6.268,7.511,10.123.768.655,1.639,1.4,2.544,2.188a.656.656,0,0,0,.863,0c.905-.791,1.776-1.533,2.544-2.188,4.523-3.854,7.511-6.4,7.511-10.122C20.973,32.6,18.578,30,15.4,30Z" transform="translate(0 -30)"/></g></g></g></svg>

img/media/line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55" height="55" viewBox="0 0 55 55"><defs><style>.a,.b{fill:none;}.b{stroke:#00b900;}.c{clip-path:url(#a);}.d{fill:#00b900;}.e{stroke:none;}</style><clipPath id="a"><rect class="a" width="29.573" height="10.333" transform="translate(0 0)"/></clipPath></defs><g transform="translate(-70.446)"><g class="b" transform="translate(70.446)"><circle class="e" cx="27.5" cy="27.5" r="27.5"/><circle class="a" cx="27.5" cy="27.5" r="27"/></g><g transform="translate(82.034 21.964)"><g class="c"><path class="d" d="M21.729,0H20.2a.424.424,0,0,0-.424.424V9.909a.424.424,0,0,0,.424.423h1.527a.424.424,0,0,0,.424-.423V.424A.424.424,0,0,0,21.729,0" transform="translate(-11.524 0)"/><path class="d" d="M37.628,0H36.1a.424.424,0,0,0-.424.424V6.059L31.33.189A.375.375,0,0,0,31.3.146l0,0L31.269.116,31.261.109,31.238.091,31.227.082,31.2.067,31.192.059,31.17.046,31.157.04,31.132.03l-.014,0L31.093.017l-.015,0L31.054.008l-.018,0-.023,0H29.45a.424.424,0,0,0-.424.424V9.909a.424.424,0,0,0,.424.423h1.527a.424.424,0,0,0,.424-.423V4.276l4.352,5.878a.412.412,0,0,0,.108.1l0,0,.026.016.012.007.02.01.021.008.013.005.029.009h.006a.4.4,0,0,0,.109.015h1.527a.423.423,0,0,0,.424-.423V.424A.424.424,0,0,0,37.628,0" transform="translate(-16.912 0)"/><path class="d" d="M6.524,7.957H2.375V.424A.424.424,0,0,0,1.951,0H.424A.424.424,0,0,0,0,.424V9.909H0a.422.422,0,0,0,.119.293l.006.007.006.006a.422.422,0,0,0,.293.118h6.1a.424.424,0,0,0,.423-.424V8.381a.424.424,0,0,0-.423-.424" transform="translate(0 0)"/><path class="d" d="M60.735,2.376a.424.424,0,0,0,.424-.424V.424A.424.424,0,0,0,60.735,0h-6.1a.419.419,0,0,0-.294.12l-.005,0-.007.008a.423.423,0,0,0-.117.292h0V9.909h0a.42.42,0,0,0,.119.293l.006.007.006.005a.418.418,0,0,0,.293.119h6.1a.424.424,0,0,0,.424-.424V8.382a.424.424,0,0,0-.424-.424H56.587v-1.6h4.149a.424.424,0,0,0,.424-.424V4.4a.424.424,0,0,0-.424-.424H56.587v-1.6Z" transform="translate(-31.586 0)"/></g></g></g></svg>

img/media/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55"><defs><style>.a,.d{fill:none;}.a{stroke:#ee751b;}.b{fill:#ee751b;}.c{stroke:none;}</style></defs><g transform="translate(-210.446)"><g class="a" transform="translate(210.446)"><circle class="c" cx="27.5" cy="27.5" r="27.5"/><circle class="d" cx="27.5" cy="27.5" r="27"/></g><path class="b" d="M21.707,9.727,13.945,2.194a.684.684,0,0,0-1.162.491V6.568A13.027,13.027,0,0,0,0,19.578a.674.674,0,0,0,.522.647.653.653,0,0,0,.162.02.72.72,0,0,0,.619-.369,11.646,11.646,0,0,1,10.186-6h1.295v3.881a.684.684,0,0,0,1.162.491l7.762-7.533a.684.684,0,0,0,0-.983Z" transform="translate(226.572 15.811)"/></g></svg>

img/media/wechat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 55 55"><defs><style>.a,.d{fill:none;}.a{stroke:#09e06c;}.b{fill:#00e06f;}.c{stroke:none;}</style></defs><g transform="translate(-140.446)"><g class="a" transform="translate(140.446)"><circle class="c" cx="27.5" cy="27.5" r="27.5"/><circle class="d" cx="27.5" cy="27.5" r="27"/></g><path class="b" d="M22.336,13.22A6.275,6.275,0,0,0,19.4,10.23a8.076,8.076,0,0,0-7.238.028,6,6,0,0,0-3.206,3.949A5.072,5.072,0,0,0,9.6,17.966a6.929,6.929,0,0,0,4.717,3.082,8.685,8.685,0,0,0,4.116-.27c.8.309,1.511.81,2.285,1.182-.2-.671-.414-1.334-.641-1.994a6.449,6.449,0,0,0,2.129-2.352A5.1,5.1,0,0,0,22.336,13.22ZM12.92,4.239a9.6,9.6,0,0,0-7.862-.612A8,8,0,0,0,.934,6.872a6.085,6.085,0,0,0-.758,4.665,7.145,7.145,0,0,0,3.1,4.187c-.285.806-.555,1.612-.811,2.424.925-.484,1.85-.99,2.776-1.481a10.306,10.306,0,0,0,3.473.491,5.843,5.843,0,0,1-.242-2.8,5.941,5.941,0,0,1,1.892-3.372,8.205,8.205,0,0,1,6.163-2.022A7.182,7.182,0,0,0,12.894,4.24h.026Zm1.644,9.478a.934.934,0,1,1-1.2-1.206.944.944,0,0,1,1.2,1.206Zm4.55.087a.955.955,0,0,1-1.5.256,1.421,1.421,0,0,1-.326-.693,1.05,1.05,0,0,1,.882-.906A.951.951,0,0,1,19.1,13.8h.014ZM12.325,7.68a1.372,1.372,0,1,1,0-.011l0,.011Zm-5.749.232A1.166,1.166,0,1,1,5.057,6.533,1.172,1.172,0,0,1,6.576,7.911Z" transform="translate(155.773 14.75)"/></g></svg>

js/lists.js

@@ -66,7 +66,10 @@ function updateSelectedOptions(id, button, radio) {
   }
 
   page = 1;
-  dataSearch(); // 搜尋
+
+  setTimeout(() => {
+    dataSearch(); // 搜尋
+  }, 0)
 
   console.log('filterList', filterList);
 

search/lists/css/style.css

@@ -0,0 +1,32 @@
+.search-tab-list {
+  width: 100%;
+}
+.search-tab-list .nav-item {
+  width: 20%;
+  padding: 0.1rem;
+}
+.search-tab-list .nav-item .nav-link {
+  width: 100%;
+  padding: 1rem;
+  font-weight: 600;
+  color: #43484c;
+  background-color: #f4f4f4;
+  box-shadow: rgb(170, 170, 170) 3px 1px 3px;
+}
+.search-tab-list .nav-item .nav-link span {
+  letter-spacing: 1px;
+}
+.search-tab-list .nav-item .nav-link.active,
+.search-tab-list .nav-item .show > .nav-link {
+  color: #fff;
+  background-color: #EE7800;
+}
+
+.tab-content {
+  padding: 1rem;
+  box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+#subCategory {
+  display: none;
+}/*# sourceMappingURL=style.css.map */

search/lists/css/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;ACCJ;ADCI;EACI,UAAA;EACA,eAAA;ACCR;ADCQ;EACI,WAAA;EACA,aAAA;EACA,gBAAA;EACA,cAAA;EACA,yBAAA;EACA,0CAAA;ACCZ;ADCY;EACI,mBAAA;ACChB;ADGQ;;EAEI,WAAA;EACA,yBAAA;ACDZ;;ADMA;EACI,aAAA;EACA,iHAAA;ACHJ;;ADMA;EACI,aAAA;ACHJ","file":"style.css"}

search/lists/css/style.scss

@@ -0,0 +1,36 @@
+.search-tab-list {
+    width: 100%;
+
+    .nav-item {
+        width: 20%;
+        padding: .1rem;
+
+        .nav-link {
+            width: 100%;
+            padding: 1rem;
+            font-weight: 600;
+            color: #43484c;
+            background-color: #f4f4f4;
+            box-shadow: rgb(170, 170, 170) 3px 1px 3px;
+
+            span {
+                letter-spacing: 1px;
+            }
+        }
+
+        .nav-link.active,
+        .show>.nav-link {
+            color: #fff;
+            background-color: #EE7800;
+        }
+    }
+}
+
+.tab-content {
+    padding: 1rem;
+    box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+#subCategory {
+    display: none;
+}

search/lists/index.html

@@ -0,0 +1,2029 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
+  <!-- End Google Tag Manager -->
+
+  <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-W3RJHTZ"></script>
+  <!-- <script src="https://connect.facebook.net/signals/config/585285442299590?v=2.9.100&amp;r=stable" async=""></script> -->
+
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1" />
+  <meta http-equiv="Cache-Control" content="no-cache" />
+  <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved." />
+  <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8" />
+  <meta name="description" content="讓幸福室內設計，走進您的生活，解決您的裝潢問
+    題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一，找尋室內設計點子與案例我
+    們一定能幫助你!" />
+  <meta name="distribution" content="Taiwan" />
+  <meta name="keywords" content="" />
+  <meta name="revisit-after" content="1 days" />
+  <meta name="robots" content="all" />
+  <meta name="format-detection" content="telephone=no" />
+
+  <meta property="og:description" content="讓幸福室內設計，走進您的生活，解決您的裝潢問題!
+    幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一，找尋室內設計點子與案例我們一定能幫助
+    你!" />
+  <meta property="og:site_name" content="幸福空間" />
+  <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台" />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="zh_TW" />
+
+  <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
+
+  <link rel="icon" href="../../img/favicon.ico" />
+
+  <!-- Fontawesome -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
+  <!-- Bootstrap -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
+  <!-- axios -->
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <!-- Google Font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap" rel="stylesheet" />
+  <!-- Slick -->
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+  <!-- CSS -->
+  <link rel="stylesheet" href="../../css/reset.css" />
+  <link rel="stylesheet" href="../../css/lists.css" />
+  <link rel="stylesheet" href="../../css/all.css" />
+  <link rel="stylesheet" href="../lists/css/style.css" />
+  <!-- 結構化資料 -->
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "@id": "https://hhh.com.tw/",
+        "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
+        "name": "幸福空間股份有限公司",
+        "address": "110台北市信義區菸廠路88號五樓之6",
+        "url": "https://hhh.com.tw/",
+        "telephone": "+886-2-6617-0123"
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "url": "https://hhh.com.tw/",
+        "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
+        "name": "幸福空間",
+        "sameAs": [
+          "https://www.facebook.com/hhhfb/",
+          "https://page.line.me/ovs4341s",
+          "https://www.youtube.com/user/gorgeousspace",
+          "https://www.instagram.com/gorgeous_space/"
+        ],
+        "contactPoint": [
+          {
+            "@type": "ContactPoint",
+            "areaServed": "TW",
+            "telephone": "+886-2-6617-0123",
+            "contactType": "customer service",
+            "availableLanguage": "Chinese"
+          }
+        ]
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "幸福空間－室內設計、裝潢、居家生活、影音平台",
+        "author": "幸福空間",
+        "url": "https://hhh.com.tw/",
+        "potentialAction": {
+          "@type": "SearchAction",
+          "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
+          "query-input": "required name=search_term_string"
+        }
+      }
+    </script>
+
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+          "itemListElement": [
+            {
+              "@type": "ListItem",
+              "position": 1,
+              "name": "幸福空間",
+              "item": "https://hhh.com.tw/"
+            },
+            {
+              "@type": "ListItem",
+              "position": 2,
+              "name": "新建案列表頁",
+              "item": "https://hhh.com.tw/builder/lists/"
+            }
+          ]
+    }
+	</script>
+</head>
+
+<body>
+  <!-- 動態載入 -->
+  <div id="topCarousel"></div>
+  <div id="navbar"></div>
+
+  <!-- searchModal -->
+  <div class="modal fade search-modal" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+      <div class="modal-content">
+        <div class="modal-body">
+          <div class="input-group">
+            <input type="text" class="form-control keyword" placeholder="請輸入關鍵字" aria-label="Please enter keywords"
+              aria-describedby="search-input" />
+            <span class="input-group-text" id="search-input">全站搜尋</span>
+          </div>
+        </div>
+        <section class="keyword-list">
+          <span>熱搜關鍵字：</span>
+          <ul>
+            <li>客變</li>
+            <li>小坪數</li>
+            <li>老屋翻新</li>
+            <li>收納</li>
+            <li>軟裝佈置</li>
+            <li>新手裝修</li>
+            <li>風水</li>
+            <li>北歐風</li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div class="container d-flex flex-column align-items-center justify-content-center list-content">
+    <h2 class="list-headline">全站搜尋</h2>
+
+    <!-- 搜尋 -->
+    <div class="row w-100 justify-content-center mt-5">
+      <div class="col-md-10">
+        <div class="card search-card">
+          <div class="card-body p-4">
+            <div class="input-group input-group-lg mb-2">
+              <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
+                class="form-control border-primary keywords" autocomplete="off">
+              <div class="input-group-append">
+                <button onclick="page = 1; dataSearch();" type="button" data-ga="View_Search_Results"
+                  class="input-group-text">搜尋</button>
+              </div>
+            </div>
+
+            <div class="search-bar-keyword d-flex mt-3 pl-4">
+              <p class="ms-3 text-muted">熱搜關鍵字</p>
+              <ul class="d-flex flex-wrap ps-3">
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">客變</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">小坪數</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">老屋翻新</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">收納</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">北歐風</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 篩選 -->
+    <div class="w-100 mt-5 filter-list">
+
+      <p class="mb-3 text-muted">
+        搜尋結果：總共 <span id="totalCount" class="text-primary font-weight-bold fs-4"></span> 筆符合條件
+      </p>
+
+      <ul class="nav nav-pills search-tab-list" id="pillsTab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" id="caseTab" data-bs-toggle="pill" data-bs-target="#pills-case" type="button"
+            role="tab" aria-controls="pills-case" aria-selected="true">
+            空間靈感 <span id="caseCount"></span>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="designerTab" data-bs-toggle="pill" data-bs-target="#pills-designer" type="button"
+            role="tab" aria-controls="pills-designer" aria-selected="false">
+            設計師 <span id="designerCount"></span>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="videoTab" data-bs-toggle="pill" data-bs-target="#pills-video" type="button"
+            role="tab" aria-controls="pills-video" aria-selected="false">
+            裝修影片 <span id="videoCount"></span>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="columnTab" data-bs-toggle="pill" data-bs-target="#pills-column" type="button"
+            role="tab" aria-controls="pills-column" aria-selected="false">
+            專欄文章 <span id="columnCount"></span>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="builderTab" data-bs-toggle="pill" data-bs-target="#pills-builder" type="button"
+            role="tab" aria-controls="pills-builder" aria-selected="false">
+            新建案 <span id="builderCount"></span>
+          </button>
+        </li>
+      </ul>
+
+      <!-- <div class="tab-content"></div> -->
+
+      <div class="tab-content" id="pillsTabContent">
+        <div class="tab-pane fade show active" id="pills-case" role="tabpanel" aria-labelledby="caseTab">
+          <div class="d-flex flex-wrap">
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="fee" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                裝修預算
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="fee">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd100">
+                    <label class="form-check-label" for="d_budgetd100">
+                      100萬以下
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd200">
+                    <label class="form-check-label" for="d_budgetd200">
+                      101~200萬
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd300">
+                    <label class="form-check-label" for="d_budgetd300">
+                      201~300萬
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd400">
+                    <label class="form-check-label" for="d_budgetd400">
+                      301萬以上
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="area" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                房屋坪數
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="area">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="case_area" id="case_areaall0">
+                        <label class="form-check-label" for="case_areaall0">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_area" id="case_areac201">
+                    <label class="form-check-label" for="case_areac201">
+                      20坪以下
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_area" id="case_areac212">
+                    <label class="form-check-label" for="case_areac212">
+                      21-30坪
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_area" id="case_areac313">
+                    <label class="form-check-label" for="case_areac313">
+                      31-50坪
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_area" id="case_areac514">
+                    <label class="form-check-label" for="case_areac514">
+                      51坪以上
+                    </label>
+                  </div>
+                </li>
+              </ul>
+
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="style" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                設計風格
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="style">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="d_style" id="d_styleall">
+                        <label class="form-check-label" for="d_styleall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylenordic">
+                    <label class="form-check-label" for="d_stylenordic">
+                      北歐風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylemodern">
+                    <label class="form-check-label" for="d_stylemodern">
+                      現代風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleindustry">
+                    <label class="form-check-label" for="d_styleindustry">
+                      工業風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleamerican">
+                    <label class="form-check-label" for="d_styleamerican">
+                      美式風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleleisure">
+                    <label class="form-check-label" for="d_styleleisure">
+                      休閒多元
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylevanguard">
+                    <label class="form-check-label" for="d_stylevanguard">
+                      前衛風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylerustuc">
+                    <label class="form-check-label" for="d_stylerustuc">
+                      鄉村風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylemashup">
+                    <label class="form-check-label" for="d_stylemashup">
+                      混搭風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleneoclassic">
+                    <label class="form-check-label" for="d_styleneoclassic">
+                      新古典
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleluxurious">
+                    <label class="form-check-label" for="d_styleluxurious">
+                      奢華風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleclassical">
+                    <label class="form-check-label" for="d_styleclassical">
+                      古典風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleexotic">
+                    <label class="form-check-label" for="d_styleexotic">
+                      異國風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylezen">
+                    <label class="form-check-label" for="d_stylezen">
+                      日式禪風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleoriental">
+                    <label class="form-check-label" for="d_styleoriental">
+                      東方風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylemuju">
+                    <label class="form-check-label" for="d_stylemuju">
+                      無印風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleminimalism">
+                    <label class="form-check-label" for="d_styleminimalism">
+                      簡約風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylejpstyle">
+                    <label class="form-check-label" for="d_stylejpstyle">
+                      日式風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleentrylux">
+                    <label class="form-check-label" for="d_styleentrylux">
+                      輕奢風
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="ctype" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                房屋類型
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="ctype">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="case_type" id="case_typeall">
+                        <label class="form-check-label" for="case_typeall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typesmall">
+                    <label class="form-check-label" for="case_typesmall">
+                      小坪數
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typestandard">
+                    <label class="form-check-label" for="case_typestandard">
+                      標準格局
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typebig">
+                    <label class="form-check-label" for="case_typebig">
+                      大坪數
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typevilla">
+                    <label class="form-check-label" for="case_typevilla">
+                      別墅
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typeraisehigh">
+                    <label class="form-check-label" for="case_typeraisehigh">
+                      挑高樓層
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typemiddle">
+                    <label class="form-check-label" for="case_typemiddle">
+                      樓中樓
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typesample">
+                    <label class="form-check-label" for="case_typesample">
+                      實品／樣品屋
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typeworkspace">
+                    <label class="form-check-label" for="case_typeworkspace">
+                      工作空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typecommercial">
+                    <label class="form-check-label" for="case_typecommercial">
+                      商業空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typehomestay">
+                    <label class="form-check-label" for="case_typehomestay">
+                      民宿旅館
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typedining">
+                    <label class="form-check-label" for="case_typedining">
+                      餐飲空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="case_type" id="case_typepublic">
+                    <label class="form-check-label" for="case_typepublic">
+                      公共空間
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="condition"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                房屋狀況
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="condition">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="condition" id="conditionall">
+                        <label class="form-check-label" for="conditionall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="condition" id="conditionnew">
+                    <label class="form-check-label" for="conditionnew">
+                      新成屋
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="condition" id="conditionblanks">
+                    <label class="form-check-label" for="conditionblanks">
+                      毛胚屋
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="condition" id="conditionrenovation">
+                    <label class="form-check-label" for="conditionrenovation">
+                      老屋翻新
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="condition" id="conditionselfbuilt">
+                    <label class="form-check-label" for="conditionselfbuilt">
+                      自地自建
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="condition" id="conditionmedievalhouse">
+                    <label class="form-check-label" for="conditionmedievalhouse">
+                      中古屋
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="award" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                亞洲設計獎得主
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="award">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="award" id="awardall">
+                        <label class="form-check-label" for="awardall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="award" id="awardY">
+                    <label class="form-check-label" for="awardY">
+                      有
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+        <div class="tab-pane fade" id="pills-designer" role="tabpanel" aria-labelledby="designerTab">
+          <div class="d-flex flex-wrap">
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="city" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                所在縣市
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="city">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taipei_city">
+                    <label class="form-check-label" for="taipei_city">
+                      台北市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="new_taipei_city">
+                    <label class="form-check-label" for="new_taipei_city">
+                      新北市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="keelung_city">
+                    <label class="form-check-label" for="keelung_city">
+                      基隆市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taoyuan_city">
+                    <label class="form-check-label" for="taoyuan_city">
+                      桃園市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_city">
+                    <label class="form-check-label" for="hsinchu_city">
+                      新竹市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_county">
+                    <label class="form-check-label" for="hsinchu_county">
+                      新竹縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="miaoli_county">
+                    <label class="form-check-label" for="miaoli_county">
+                      苗栗縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taichung_city">
+                    <label class="form-check-label" for="taichung_city">
+                      台中市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="changhua_county">
+                    <label class="form-check-label" for="changhua_county">
+                      彰化縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="nantou_county">
+                    <label class="form-check-label" for="nantou_county">
+                      南投縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="yunlin_county">
+                    <label class="form-check-label" for="yunlin_county">
+                      雲林縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_city">
+                    <label class="form-check-label" for="chiayi_city">
+                      嘉義市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_county">
+                    <label class="form-check-label" for="chiayi_county">
+                      嘉義縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="tainan_city">
+                    <label class="form-check-label" for="tainan_city">
+                      台南市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="kaohsiung_city">
+                    <label class="form-check-label" for="kaohsiung_city">
+                      高雄市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="pingtung_county">
+                    <label class="form-check-label" for="pingtung_county">
+                      屏東縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="yilan_county">
+                    <label class="form-check-label" for="yilan_county">
+                      宜蘭縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hualien_county">
+                    <label class="form-check-label" for="hualien_county">
+                      花蓮縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taitung_county">
+                    <label class="form-check-label" for="taitung_county">
+                      台東縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="penghu_county">
+                    <label class="form-check-label" for="penghu_county">
+                      澎湖縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="kinmen_county">
+                    <label class="form-check-label" for="kinmen_county">
+                      金門縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="lienchiang_county">
+                    <label class="form-check-label" for="lienchiang_county">
+                      連江縣
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="region" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                接案地區
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="region">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="region" id="all_region">
+                        <label class="form-check-label" for="all_region">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="region" id="north_region">
+                    <label class="form-check-label" for="north_region">
+                      北區
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="region" id="central_region">
+                    <label class="form-check-label" for="central_region">
+                      中區
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="region" id="south_region">
+                    <label class="form-check-label" for="south_region">
+                      南區
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="region" id="east_region">
+                    <label class="form-check-label" for="east_region">
+                      宜蘭花東
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="region" id="outlying_region">
+                    <label class="form-check-label" for="outlying_region">
+                      離島地區
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="region" id="overseas_region">
+                    <label class="form-check-label" for="overseas_region">
+                      海外地區
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="dtype" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                接案類型
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="dtype">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="d_type" id="d_typeall">
+                        <label class="form-check-label" for="d_typeall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typesmall">
+                    <label class="form-check-label" for="d_typesmall">
+                      小坪數
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typestandard">
+                    <label class="form-check-label" for="d_typestandard">
+                      標準格局
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typevilla">
+                    <label class="form-check-label" for="d_typevilla">
+                      別墅
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typebig">
+                    <label class="form-check-label" for="d_typebig">
+                      大坪數
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typemiddle">
+                    <label class="form-check-label" for="d_typemiddle">
+                      樓中樓
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typesample">
+                    <label class="form-check-label" for="d_typesample">
+                      實品／樣品屋
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typecommercial">
+                    <label class="form-check-label" for="d_typecommercial">
+                      商業空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typeraisehigh">
+                    <label class="form-check-label" for="d_typeraisehigh">
+                      挑高樓層
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typeworkspace">
+                    <label class="form-check-label" for="d_typeworkspace">
+                      工作空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typedining">
+                    <label class="form-check-label" for="d_typedining">
+                      餐飲空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typehomestay">
+                    <label class="form-check-label" for="d_typehomestay">
+                      民宿旅館
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typepublic">
+                    <label class="form-check-label" for="d_typepublic">
+                      公共空間
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="d_typerenovation">
+                    <label class="form-check-label" for="d_typerenovation">
+                      老屋翻新
+                    </label>
+                  </div>
+                </li>
+              </ul>
+
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="dstyle" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                接案風格
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="dstyle">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="d_style" id="d_styleall">
+                        <label class="form-check-label" for="d_styleall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylenordic">
+                    <label class="form-check-label" for="d_stylenordic">
+                      北歐風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylemodern">
+                    <label class="form-check-label" for="d_stylemodern">
+                      現代風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleindustry">
+                    <label class="form-check-label" for="d_styleindustry">
+                      工業風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleamerican">
+                    <label class="form-check-label" for="d_styleamerican">
+                      美式風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleleisure">
+                    <label class="form-check-label" for="d_styleleisure">
+                      休閒多元
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylevanguard">
+                    <label class="form-check-label" for="d_stylevanguard">
+                      前衛風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylerustuc">
+                    <label class="form-check-label" for="d_stylerustuc">
+                      鄉村風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylemashup">
+                    <label class="form-check-label" for="d_stylemashup">
+                      混搭風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleneoclassic">
+                    <label class="form-check-label" for="d_styleneoclassic">
+                      新古典
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleluxurious">
+                    <label class="form-check-label" for="d_styleluxurious">
+                      奢華風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleclassical">
+                    <label class="form-check-label" for="d_styleclassical">
+                      古典風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleexotic">
+                    <label class="form-check-label" for="d_styleexotic">
+                      異國風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylezen">
+                    <label class="form-check-label" for="d_stylezen">
+                      日式禪風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleoriental">
+                    <label class="form-check-label" for="d_styleoriental">
+                      東方風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylemuju">
+                    <label class="form-check-label" for="d_stylemuju">
+                      無印風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleminimalism">
+                    <label class="form-check-label" for="d_styleminimalism">
+                      簡約風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_stylejpstyle">
+                    <label class="form-check-label" for="d_stylejpstyle">
+                      日式風
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_style" id="d_styleentrylux">
+                    <label class="form-check-label" for="d_styleentrylux">
+                      輕奢風
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="budget" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                接案預算
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="budget">
+                <!-- <li>
+                      <div class="form-check">
+                        <input class="form-check-input" type="radio" name="d_budget" id="d_budgetall">
+                        <label class="form-check-label" for="d_budgetall">
+                          不拘
+                        </label>
+                      </div>
+                    </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd100">
+                    <label class="form-check-label" for="d_budgetd100">
+                      100萬以下
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd200">
+                    <label class="form-check-label" for="d_budgetd200">
+                      100~200萬
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd300">
+                    <label class="form-check-label" for="d_budgetd300">
+                      200~300萬
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd400">
+                    <label class="form-check-label" for="d_budgetd400">
+                      300~400萬
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd500">
+                    <label class="form-check-label" for="d_budgetd500">
+                      400~500萬
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd501">
+                    <label class="form-check-label" for="d_budgetd501">
+                      500萬以上
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+        <div class="tab-pane fade" id="pills-video" role="tabpanel" aria-labelledby="videoTab">
+          <div class="d-flex flex-wrap">
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="tag_vtype"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                單元類型
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="video_type">
+                <!-- <li>
+                    <div class="form-check">
+                      <input class="form-check-input" type="radio" name="video_type" id="video_type_all">
+                      <label class="form-check-label" for="video_type_all">
+                        不拘
+                      </label>
+                    </div>
+                  </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_soft">
+                    <label class="form-check-label" for="video_type_soft">
+                      軟裝佈置
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_small">
+                    <label class="form-check-label" for="video_type_small">
+                      小坪數
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_big">
+                    <label class="form-check-label" for="video_type_big">
+                      大坪數
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_program">
+                    <label class="form-check-label" for="video_type_program">
+                      節目
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_happiness">
+                    <label class="form-check-label" for="video_type_happiness">
+                      幸福達人
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_encyclopedia">
+                    <label class="form-check-label" for="video_type_encyclopedia">
+                      居家小百科
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_happysale">
+                    <label class="form-check-label" for="video_type_happysale">
+                      幸福開賣拉
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_knowledge">
+                    <label class="form-check-label" for="video_type_knowledge">
+                      裝修知識庫
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_directly">
+                    <label class="form-check-label" for="video_type_directly">
+                      直擊名人的家
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_storage">
+                    <label class="form-check-label" for="video_type_storage">
+                      小屋收納特輯
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_FengShui">
+                    <label class="form-check-label" for="video_type_FengShui">
+                      居家風水特輯
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_Brand">
+                    <label class="form-check-label" for="video_type_Brand">
+                      品牌故事
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_travel">
+                    <label class="form-check-label" for="video_type_travel">
+                      幸福旅行
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_designer">
+                    <label class="form-check-label" for="video_type_designer">
+                      王牌設計師
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_Treasure">
+                    <label class="form-check-label" for="video_type_Treasure">
+                      街頭尋寶趣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_two">
+                    <label class="form-check-label" for="video_type_two">
+                      幸福二三事
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_Happiness">
+                    <label class="form-check-label" for="video_type_Happiness">
+                      幸福大突擊
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_Award">
+                    <label class="form-check-label" for="video_type_Award">
+                      獎空間獎設計
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_broadcast">
+                    <label class="form-check-label" for="video_type_broadcast">
+                      幸福空間廣播
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_interview">
+                    <label class="form-check-label" for="video_type_interview">
+                      媒體採訪
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="video_type" id="video_type_topics">
+                    <label class="form-check-label" for="video_type_topics">
+                      主題精選
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="tag_vpattern"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                空間格局
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="tag_vpattern">
+                <!-- <li>
+                    <div class="form-check">
+                      <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternall">
+                      <label class="form-check-label" for="tag_vpatternall">
+                        不拘
+                      </label>
+                    </div>
+                  </li> -->
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternentrance">
+                    <label class="form-check-label" for="tag_vpatternentrance">
+                      玄關
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternliving">
+                    <label class="form-check-label" for="tag_vpatternliving">
+                      客廳
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternbedroom">
+                    <label class="form-check-label" for="tag_vpatternbedroom">
+                      臥室
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternlocker">
+                    <label class="form-check-label" for="tag_vpatternlocker">
+                      更衣室
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternchildren">
+                    <label class="form-check-label" for="tag_vpatternchildren">
+                      兒童房
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternjapanese">
+                    <label class="form-check-label" for="tag_vpatternjapanese">
+                      和室
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternstudy">
+                    <label class="form-check-label" for="tag_vpatternstudy">
+                      書房
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternrestaurant">
+                    <label class="form-check-label" for="tag_vpatternrestaurant">
+                      餐廳
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternkitchen">
+                    <label class="form-check-label" for="tag_vpatternkitchen">
+                      廚房
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternbathroom">
+                    <label class="form-check-label" for="tag_vpatternbathroom">
+                      浴室
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternaudiovisual">
+                    <label class="form-check-label" for="tag_vpatternaudiovisual">
+                      視聽室
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternbalcony">
+                    <label class="form-check-label" for="tag_vpatternbalcony">
+                      陽台露台
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatterncommercial">
+                    <label class="form-check-label" for="tag_vpatterncommercial">
+                      商業空間
+                    </label>
+                  </div>
+                </li>
+              </ul>
+
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane fade" id="pills-column" role="tabpanel" aria-labelledby="columnTab">
+          <div class="d-flex flex-wrap">
+            <div id="mainCategory" class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="ctype" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                文章分類
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="ctype">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type">
+                    <label class="form-check-label">
+                      編輯精選
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typefunction">
+                    <label class="form-check-label">
+                      居家設計
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type">
+                    <label class="form-check-label">
+                      裝修前線
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type">
+                    <label class="form-check-label">
+                      生活PLUS
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type">
+                    <label class="form-check-label">
+                      品牌好物
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type">
+                    <label class="form-check-label">
+                      房市焦點
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type">
+                    <label class="form-check-label">
+                      主題企劃
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div id="subCategory" class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="ctype_sub"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                次分類
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="ctype_sub">
+                <!-- 動態切換 -->
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="tab-pane fade" id="pills-builder" role="tabpanel" aria-labelledby="builderTab">
+          <div class="d-flex flex-wrap">
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="city" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                所在縣市
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="city">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taipei_city">
+                    <label class="form-check-label" for="taipei_city">
+                      台北市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="new_taipei_city">
+                    <label class="form-check-label" for="new_taipei_city">
+                      新北市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="keelung_city">
+                    <label class="form-check-label" for="keelung_city">
+                      基隆市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taoyuan_city">
+                    <label class="form-check-label" for="taoyuan_city">
+                      桃園市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_city">
+                    <label class="form-check-label" for="hsinchu_city">
+                      新竹市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_county">
+                    <label class="form-check-label" for="hsinchu_county">
+                      新竹縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="miaoli_county">
+                    <label class="form-check-label" for="miaoli_county">
+                      苗栗縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taichung_city">
+                    <label class="form-check-label" for="taichung_city">
+                      台中市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="changhua_county">
+                    <label class="form-check-label" for="changhua_county">
+                      彰化縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="nantou_county">
+                    <label class="form-check-label" for="nantou_county">
+                      南投縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="yunlin_county">
+                    <label class="form-check-label" for="yunlin_county">
+                      雲林縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_city">
+                    <label class="form-check-label" for="chiayi_city">
+                      嘉義市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_county">
+                    <label class="form-check-label" for="chiayi_county">
+                      嘉義縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="tainan_city">
+                    <label class="form-check-label" for="tainan_city">
+                      台南市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="kaohsiung_city">
+                    <label class="form-check-label" for="kaohsiung_city">
+                      高雄市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="pingtung_county">
+                    <label class="form-check-label" for="pingtung_county">
+                      屏東縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="yilan_county">
+                    <label class="form-check-label" for="yilan_county">
+                      宜蘭縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hualien_county">
+                    <label class="form-check-label" for="hualien_county">
+                      花蓮縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taitung_county">
+                    <label class="form-check-label" for="taitung_county">
+                      台東縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="penghu_county">
+                    <label class="form-check-label" for="penghu_county">
+                      澎湖縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="kinmen_county">
+                    <label class="form-check-label" for="kinmen_county">
+                      金門縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="lienchiang_county">
+                    <label class="form-check-label" for="lienchiang_county">
+                      連江縣
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="builder_type"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                類型
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="builder_type">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typemrt">
+                    <label class="form-check-label" for="search_typemrt">
+                      捷運宅
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typefunction">
+                    <label class="form-check-label" for="search_typefunction">
+                      機能宅
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typeking">
+                    <label class="form-check-label" for="search_typeking">
+                      帝王宅
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-4">
+        <div class="col-md-9">
+          <div class="d-flex flex-wrap align-items-center">
+            <div class="text-primary d-flex flex-wrap align-items-center search-tab-result">
+              <!-- 動態載入 -->
+            </div>
+
+            <button type="button" id="removeResultBtn" class="btn btn-light btn-sm text-muted px-3">全部清除</button>
+          </div>
+        </div>
+
+        <div class="col-md-3">
+          <div class="d-flex justify-content-end search-btn-filter">
+            <button id="hot" class="active">
+              人氣
+            </button>
+
+            <span class="mx-1">｜</span>
+
+            <button id="new">
+              最新
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 讀取圖示 -->
+      <div class="text-center my-5" id="dataSpinner">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+
+      <!-- 列表 -->
+      <div class="row mt-5" id="dataList">
+        <!-- 動態載入 -->
+      </div>
+
+      <!-- 分頁 -->
+      <div class="d-flex justify-content-center my-5">
+        <nav aria-label="Page navigation example">
+          <ul class="pagination border list-pagination">
+            <li class="page-item">
+              <a class="page-link" href="#" aria-label="Previous">
+                <span aria-hidden="true">＜</span>
+              </a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">1</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">2</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">3</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#" aria-label="Next">
+                <span aria-hidden="true">＞</span>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+
+  <!-- 動態載入 -->
+  <div id="btn-box"></div>
+  <div id="footer" class="d-none d-lg-block"></div>
+
+  <!-- jQuery -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Slick -->
+  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <!-- Bootstrap -->
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
+    integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
+    integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    crossorigin="anonymous"></script>
+  <script src="../../js/lists.js"></script>
+  <script src="./js/main.js"></script>
+</body>
+
+</html>

search/lists/js/main.js

@@ -0,0 +1,579 @@
+// 載入共用 template
+$('#navbar').load('../../template/navbar.html');
+$('#footer').load('../../template/footer.html');
+$('#btn-box').load('../../template/button.html');
+$('#topCarousel').load('../../template/top_carousel.html');
+
+let assignOrder = ""; // 當前排序
+
+// new, hot, recommend 排序 (預設推薦)
+$(".search-btn-filter button").click(function () {
+  // 切換選取狀態
+  $('.search-btn-filter').find('.active').removeClass('active');
+  $(this).addClass('active');
+  assignOrder = $(this).attr('id');
+  dataSearch();
+});
+
+let page = 1; // 當前頁數
+let pageSize = 18; // 每頁數量
+let isFirstLoad = true; // 初始載入
+
+let assignTab = "caseTab"; // 指定類別 (預設為空間靈感)
+
+// 列表篩選
+async function dataSearch(type = "") {
+  let url;
+  $('#dataSpinner').show();
+  $('#dataList').hide();
+
+  switch (assignTab) {
+    case "caseTab":
+      url = `https://m3.hhh.com.tw:18673/case_search?page=${page}&page_size=${pageSize}`;
+      break;
+
+    case "designerTab":
+      url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
+      break;
+
+    case "videoTab":
+      url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}`;
+      break;
+
+    case "columnTab":
+      url = `https://m3.hhh.com.tw:18673/column_search?page=${page}&page_size=${pageSize}`;
+      break;
+
+    case "builderTab":
+      url = `https://m3.hhh.com.tw:18673/builder_search?page=${page}&page_size=${pageSize}`;
+      break;
+
+    default:
+      break;
+  }
+
+  let input = $(".keywords").val();
+
+  if (input !== "") {
+    let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字
+
+    const newItem = {
+      id: "keyword",
+      text: "關鍵字",
+      value: input
+    };
+
+    if (!isExist) {
+      filterList.push(newItem);
+      createFilterHtml(newItem);
+    } else {
+      // 移除原本關鍵字
+      $('.budget p.me-1').each(function () {
+        if ($(this).text().includes('關鍵字')) {
+          $(this).closest('.me-3').remove();
+        }
+      });
+
+      if (filterList.length === 0) {
+        $('#removeResultBtn').hide();
+      }
+
+      filterList = filterList.filter(item => item.text !== "關鍵字");
+
+      filterList.push(newItem);
+      createFilterHtml(newItem);
+
+    }
+    $(".keywords").val("")
+  }
+
+  if (filterList.length) {
+    filterList.map(item => {
+      if (item.id === "fee") {
+        // 裝修預算
+        switch (item.value) {
+          case "100萬以下":
+            url += `&${item.id}=1`;
+            break;
+          case "101~200萬":
+            url += `&${item.id}=2`;
+            break;
+          case "201~300萬":
+            url += `&${item.id}=3`;
+            break;
+          case "301萬以上":
+            url += `&${item.id}=4`;
+            break;
+
+          default:
+            break;
+        }
+      } else if (item.id === "area") {
+        // 房屋坪數
+        switch (item.value) {
+          case "20坪以下":
+            url += `&${item.id}=1`;
+            break;
+          case "21-30坪":
+            url += `&${item.id}=2`;
+            break;
+          case "31-50坪":
+            url += `&${item.id}=3`;
+            break;
+          case "51坪以上":
+            url += `&${item.id}=4`;
+            break;
+
+          default:
+            break;
+        }
+      } else if (item.id === 'budget') {
+        switch (item.value) {
+          case "100萬以下":
+            url += `&${item.id}=1`;
+            break;
+          case "100~200萬":
+            url += `&${item.id}=2`;
+            break;
+          case "200~300萬":
+            url += `&${item.id}=3`;
+            break;
+          case "300~400萬":
+            url += `&${item.id}=4`;
+            break;
+          case "400~500萬":
+            url += `&${item.id}=5`;
+            break;
+          case "500萬以上":
+            url += `&${item.id}=6`;
+            break;
+          default:
+            break;
+        }
+      } else {
+        url += `&${item.id}=${item.value}`;
+      }
+    });
+  }
+
+  // 排序
+  if (assignOrder === "") {
+    url += "&order_by=hot"; // 預設
+  } else {
+    url += `&order_by=${assignOrder}`;
+  }
+
+  try {
+    const response = await axios.get(url);
+    console.log('response.data >>', response.data);
+
+    let totalPages = Math.ceil(totalCount / pageSize);
+
+    if (totalPages) {
+      $('.filter-list .pagination').show();
+      setPagination(totalPages); // 分頁處理
+    } else {
+      $('.filter-list .pagination').hide();
+    }
+
+    let resultHtml = '';
+
+    switch (assignTab) {
+      case "caseTab":
+        if (response.data.cases.length) {
+          response.data.cases.forEach((item) => {
+            let tagList = item.CaseTag.split(',');
+            let tagsHtml = '';
+
+            tagList.forEach((tag) => {
+              if (tag !== "") {
+                tagsHtml += `<span class="tag-item" data-tag="${tag}">${tag}</span>`;
+              }
+            });
+
+            resultHtml += `
+              <div class="col-md-4 mb-4">
+                <a href="${item.DesignerLink}">
+                  <div class="card lists-card">
+                    <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>
+                  </div>
+                </a>
+              </div>`;
+          });
+        } else {
+          resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+        }
+
+        let caseCount = response.data.total_count.toLocaleString();
+        $("#caseCount").html(`(${caseCount})`);
+
+        break;
+
+      case "designerTab":
+        if (response.data.designers.length) {
+          response.data.designers.forEach((item) => {
+            resultHtml += `
+            <div class="col-md-4 mb-4">
+              <a href="${item.DesignerLink}">
+                <div class="card lists-card">
+                  <img src="${item.CaseCoverImg}" class="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="text-muted mb-2">${item.DesignerTitle}</h5>
+                        <h6 class="mb-0 text-dark">
+                          <span class="font-weight-bold">
+                            ${item.DesignerName}
+                          </span>
+                          設計師
+                        </h6>
+                      </section>
+                    </div>
+                </div>
+              </a>
+            </div>`;
+          });
+        } else {
+          resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+        }
+
+        let designerCount = response.data.total_count.toLocaleString();
+        $("#designerCount").html(`(${designerCount})`);
+
+        break;
+
+      case "videoTab":
+        if (response.data.videos.length) {
+          response.data.videos.forEach((item) => {
+            let tagsHtml = '';
+
+            item.VideoTag.forEach((tag) => {
+              if (tag !== "") {
+                tagsHtml += `<span class="tag-item" data-tag="${tag}">${tag}</span>`;
+              }
+            });
+
+            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 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>
+                </div>
+              </a>
+            </div>`;
+          });
+        } else {
+          resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+        }
+
+        let videoCount = response.data.total_count.toLocaleString();
+        $("#videoCount").html(`(${videoCount})`);
+
+        break;
+
+      case "columnTab":
+        if (response.data.columns.length) {
+          // 取得當前日期並計算三天前的日期
+          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 = '';
+
+            tagList.forEach((tag) => {
+              if (tag !== "") {
+                tagsHtml += `<span class="tag-item" data-tag="${tag}">${tag}</span>`;
+              }
+            });
+
+            resultHtml += `
+              <div class="col-md-4 mb-4">
+                <a href="${item.ColumnLink}">
+                  <div class="card lists-card h-auto">
+                    <img src="${item.ColumnCoverImg}" class="cover-img" alt="${item.ColumnTitle}">
+                      <div class="card-body d-flex flex-column">
+                        <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>`;
+          });
+
+          $('#dataList').append(resultHtml);
+        } else {
+          resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+        }
+
+        let columnCount = response.data.total_count.toLocaleString();
+        $("#columnCount").html(`(${columnCount})`);
+
+        break;
+
+      case "builderTab":
+        if (response.data.videos.length) {
+          response.data.videos.forEach((item) => {
+            resultHtml += `
+              <div class="col-md-4 mb-4">
+                <a href="${item.DesignerLink}">
+                  <div class="card lists-card">
+                    <div class="position-relative">
+                      <img src="../../img/icon/play.svg" class="play-img${item.Is_video === '0' ? ' d-none' : ''}" alt="play-img">
+                        <img src="${item.BuilderCoverImg}" class="cover-img" alt="${item.BuilderTitle}">
+                        </div>
+                        <div class="card-body p-4">
+                          <section>
+                            <h5 class="text-dark">${item.BuilderTitle}</h5>
+                            <p class="text-dark my-3">${item.BuilderDescr}</p>
+                            <h6 class="mb-0 text-muted fw-normal">
+                              ${item.BuilderAddress}
+                            </h6>
+                          </section>
+                        </div>
+                    </div>
+                </a>
+              </div>`;
+          });
+        } else {
+          resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+        }
+
+        let builderCount = response.data.total_count.toLocaleString();
+        $("#builderCount").html(`(${builderCount})`);
+
+        break;
+
+      default:
+        break;
+    }
+
+    // if (response.data.videos.length) {
+    //   response.data.videos.forEach((item) => {
+    //     resultHtml += `
+    //       <div class="col-md-4 mb-4">
+    //         <a href="${item.DesignerLink}">
+    //           <div class="card lists-card">
+    //             <div class="position-relative">
+    //               <img src="../../img/icon/play.svg" class="play-img${item.Is_video === '0' ? ' d-none' : ''}" alt="play-img">
+    //                 <img src="${item.BuilderCoverImg}" class="cover-img" alt="${item.BuilderTitle}">
+    //                 </div>
+    //                 <div class="card-body p-4">
+    //                   <section>
+    //                     <h5 class="text-dark">${item.BuilderTitle}</h5>
+    //                     <p class="text-dark my-3">${item.BuilderDescr}</p>
+    //                     <h6 class="mb-0 text-muted fw-normal">
+    //                       ${item.BuilderAddress}
+    //                     </h6>
+    //                   </section>
+    //                 </div>
+    //             </div>
+    //         </a>
+    //       </div>`;
+    //   });
+    // } else {
+    //   resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+    // }
+
+    $('#dataList').html(resultHtml);
+
+    setTimeout(() => {
+      setTotalCount();
+      $('#dataList').show();
+      $('#dataSpinner').hide();
+    }, 100)
+
+    // 更新初始載入狀態
+    if (isFirstLoad) {
+      isFirstLoad = false;
+    }
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
+dataSearch();
+
+// 取得全部符合筆數
+async function getAllSearchCount() {
+  let url = "https://m3.hhh.com.tw:18673/all_search_count";
+
+  try {
+    const response = await axios.get(url);
+    console.log('response.data', response.data);
+
+    $("#caseCount").text(`(${response.data.case_count.toLocaleString()})`)
+    $("#designerCount").text(`(${response.data.designer_count.toLocaleString()})`)
+    $("#videoCount").text(`(${response.data.video_count.toLocaleString()})`)
+    $("#columnCount").text(`(${response.data.column_count.toLocaleString()})`)
+    $("#builderCount").text(`(${response.data.builder_count.toLocaleString()})`)
+
+    // 數量加總
+    let total = response.data.designer_count + response.data.column_count + response.data.case_count + response.data.builder_count + response.data.video_count;
+
+    $('#totalCount').text(total.toLocaleString());
+
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
+getAllSearchCount();
+
+// 計算總筆數
+function setTotalCount() {
+  // 將各類別總筆數轉為數字
+  let caseCount = parseInt($('#caseCount').text().replace(/[(),]/g, ''), 10);
+  let designerCount = parseInt($('#designerCount').text().replace(/[(),]/g, ''), 10);
+  let videoCount = parseInt($('#videoCount').text().replace(/[(),]/g, ''), 10);
+  let columnCount = parseInt($('#columnCount').text().replace(/[(),]/g, ''), 10);
+  let builderCount = parseInt($('#builderCount').text().replace(/[(),]/g, ''), 10);
+
+  // 將各個數字相加
+  let total = caseCount + designerCount + videoCount + builderCount + columnCount;
+  $('#totalCount').text(total.toLocaleString());
+  console.log('Total:', total);
+}
+
+// 切換 Tab
+$('.search-tab-list .nav-item').click(function (e) {
+  getAllSearchCount(); // 重新取得總筆數
+  // 使用 closest() 找到最近的 button 元素
+  let button = $(e.target).closest('button');
+  assignTab = button.attr('id');
+  console.log('assignTab', assignTab);
+
+  // 全部清除
+  filterList.length = 0; // 清空篩選陣列
+  $('.keywords').val(''); // 清空搜尋欄位
+  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+  $('.search-tab-result').empty(); // 清空篩選條件 dom
+  // 取消選取狀態
+  $('.filter-list input[type="radio"]').prop('checked', false);
+  $('.search-tab').removeClass('active');
+
+  dataSearch(); // 篩選
+});
+
+// 次要類別選單
+let subCategory = [
+  {
+    title: "編輯精選",
+    list: ["居家趨勢", "人氣排行", "建築設計", "風格選店", "公益活動", "展演資訊"]
+  },
+  {
+    title: "居家設計",
+    list: ["小宅規劃", "老屋翻新", "風格營造", "配色佈置", "好宅特輯", "設計提案"]
+  },
+  {
+    title: "裝修前線",
+    list: ["新聞最前線", "預算分配", "施工流程", "建材知識", "裝潢撇步"]
+  },
+  {
+    title: "生活PLUS",
+    list: ["居家風水", "家事清潔", "收納技巧", "改造修繕", "退休好幸福"]
+  },
+  {
+    title: "品牌好物",
+    list: ["家具家飾", "美型家電", "推薦廚衛", "居家好物", "優質建材", "品牌新訊"]
+  },
+  {
+    title: "房市焦點",
+    list: ["房市新聞", "建案特搜", "買屋賣屋", "房貸稅務", "租房須知"]
+  }
+];
+
+// 專欄文章分類
+$("#pills-column #mainCategory .form-check").click(function (e) {
+  console.log('e >>', e);
+  let btnText = $(e.target).text().replace(/\s+/g, ''); // 取得主分類
+  console.log('btnText', btnText);
+
+  // 檢查陣列中是否有次分類
+  let hasSubCategory = filterList.find(item => item.text === "次分類");
+
+  if (hasSubCategory) {
+    // 如果有則移除包含該 DOM 元素
+    $('span.budget:contains("次分類")').closest('span.me-3').remove();
+    filterList = filterList.filter(item => item.text !== "次分類");
+  }
+
+  let subHtml = [];
+
+  subCategory.map(item => {
+    if (item.title === btnText) {
+      item.list.forEach(item => {
+        let dom = `
+          <li onclick="clickSubBtn(event, '${item}')">
+            <div class="form-check">
+              <input class="form-check-input" type="radio" name="sub_type">
+                <label class="form-check-label">
+                  ${item}
+                </label>
+            </div>
+          </li>`;
+        subHtml.push(dom);
+      })
+
+      $('#subCategory ul').html(subHtml);
+    }
+  })
+
+  $("#subCategory").show();
+})
+
+function clickSubBtn(e, item) {
+  console.log('clickSubBtn', e, item);
+
+  let currentElement = $(e.currentTarget);
+
+  currentElement.find('.form-check-input').prop('checked', true);
+
+  // 取得 radio 按鈕的 label
+  let radioLabel = currentElement.find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
+
+  // 取上一層 search-tab 按鈕文字
+  let buttonValue = currentElement.closest('.dropdown').find('.search-tab').text().trim();
+  let buttonId = currentElement.closest('.dropdown').find('.search-tab').attr('id');
+
+  console.log('buttonValue>>', buttonValue);
+  console.log('buttonId>>', buttonId);
+  console.log('radioLabel>>', radioLabel);
+
+  updateSelectedOptions(buttonId, buttonValue, radioLabel);
+}

videos/lists/index.html

@@ -172,6 +172,8 @@
   </div>
 
   <div class="container d-flex flex-column align-items-center justify-content-center list-content">
+    <h2 class="list-headline"></h2>
+
     <!-- 搜尋 -->
     <div class="row w-100 justify-content-center mt-5">
       <div class="col-md-10">
@@ -583,7 +585,7 @@
           </div>
         </div>
 
-        <!-- 設計師列表 -->
+        <!-- 列表 -->
         <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>

videos/lists/js/main.js

@@ -89,7 +89,7 @@ async function dataSearch(type = "") {
     const response = await axios.get(url);
     console.log('response.data.videos', response.data.videos);
 
-    let totalCount = response.data.total_count;
+    let totalCount = response.data.total_count.toLocaleString();
     let totalPages = Math.ceil(totalCount / pageSize);
 
     $("#totalCount").html(totalCount);