新增影音列表頁 & 清除篩選功能

css/lists.css

@@ -93,7 +93,7 @@
 .filter-list .search-tab-result {
   font-size: 14px;
 }
-.filter-list .designer-card .person-img {
+.filter-list .lists-card .person-img {
   width: 100%;
   height: 80px;
   max-width: 80px;
@@ -103,37 +103,67 @@
   box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.15);
 }
 @media (max-width: 991px) {
-  .filter-list .designer-card .person-img {
+  .filter-list .lists-card .person-img {
     height: 70px;
     max-width: 70px;
   }
 }
 @media (max-width: 767px) {
-  .filter-list .designer-card .person-img {
+  .filter-list .lists-card .person-img {
     height: 80px;
     max-width: 80px;
   }
 }
-.filter-list .designer-card .cover-img {
+.filter-list .lists-card .cover-img {
   height: 235px;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @media (max-width: 991px) {
-  .filter-list .designer-card .cover-img {
+  .filter-list .lists-card .cover-img {
     height: 160px;
   }
 }
 @media (max-width: 767px) {
-  .filter-list .designer-card .cover-img {
+  .filter-list .lists-card .cover-img {
     height: 235px;
   }
 }
-.filter-list .designer-card .card-body section {
+.filter-list .lists-card .video-cover-img {
+  height: 225px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (max-width: 1400px) {
+  .filter-list .lists-card .video-cover-img {
+    height: 190px;
+  }
+}
+@media (max-width: 1200px) {
+  .filter-list .lists-card .video-cover-img {
+    height: 160px;
+  }
+}
+@media (max-width: 991px) {
+  .filter-list .lists-card .video-cover-img {
+    height: 115px;
+  }
+}
+@media (max-width: 767px) {
+  .filter-list .lists-card .video-cover-img {
+    height: 275px;
+  }
+}
+@media (max-width: 575px) {
+  .filter-list .lists-card .video-cover-img {
+    height: 48.5vw;
+  }
+}
+.filter-list .lists-card .card-body section {
   width: 70%;
 }
-.filter-list .designer-card .card-body h5,
-.filter-list .designer-card .card-body h6 {
+.filter-list .lists-card .card-body h5,
+.filter-list .lists-card .card-body h6 {
   line-height: 1.25;
   font-size: 0.875rem;
   -webkit-box-orient: vertical;
@@ -141,10 +171,10 @@
   text-overflow: ellipsis;
   display: -webkit-box;
 }
-.filter-list .designer-card .card-body h5 {
+.filter-list .lists-card .card-body h5 {
   height: 1.09375rem;
   -webkit-line-clamp: 1;
 }
-.filter-list .designer-card .card-body h6 {
+.filter-list .lists-card .card-body h6 {
   -webkit-line-clamp: 2;
 }/*# sourceMappingURL=lists.css.map */

css/lists.css.map

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

css/lists.scss

@@ -114,7 +114,7 @@
     font-size: 14px;
   }
 
-  .designer-card {
+  .lists-card {
     .person-img {
       width: 100%;
       height: 80px;
@@ -148,6 +148,31 @@
       }
     }
 
+    .video-cover-img {
+      height: 225px;
+      object-fit: cover;
+
+      @media (max-width: 1400px) {
+        height: 190px;
+      }
+
+      @media (max-width: 1200px) {
+        height: 160px;
+      }
+
+      @media (max-width: 991px) {
+        height: 115px;
+      }
+
+      @media (max-width: 767px) {
+        height: 275px;
+      }
+
+      @media (max-width: 575px) {
+        height: 48.5vw;
+      }
+    }
+
     .card-body {
       section {
         width: 70%;

designers/lists/index.html

@@ -186,7 +186,7 @@
             </div>
 
             <div class="search-bar-keyword d-flex mt-3 pl-4">
-              <p>熱搜關鍵字</p>
+              <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>
@@ -926,6 +926,13 @@
           </div>
         </div>
 
+          <!-- 讀取圖示 -->
+          <div class="text-center my-5" id="designerSpinner">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
+
         <!-- 設計師列表 -->
         <div class="row mt-5" id="designerList">
           <!-- 動態載入 -->

designers/lists/js/main.js

@@ -26,6 +26,7 @@ let filterList = []; // 篩選條件
 
 // 更新篩選狀態
 function updateSelectedOptions(id, button, radio) {
+  page = 1;
   console.log('更新篩選狀態', button, radio);
 
   if (filterList.length) {
@@ -84,34 +85,69 @@ function updateSelectedOptions(id, button, radio) {
 // 新增篩選條件 HTML
 function createFilterHtml(item) {
   let dom = `
-    <span class="me-3">
+    <div class="me-3">
       <span class="d-flex budget">
         <p class="me-1">${item.text}：${item.value}</p>
-        <img src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
+        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
       </span>
-    </span>`;
+    </div>`;
 
   $('.search-tab-result').append(dom);
   $('#removeResultBtn').show();
 }
 
+// 清除單一篩選條件
+function removeBtn(element, id, val) {
+  console.log('id, val', id, val);
+  filterList = filterList.filter(item => item.text !== val);
+
+  ; // 移除 div & active
+  $(element).closest('.me-3').remove();
+  $(`#${id}`).removeClass('active');
+  // 移除同一層級 ul 內所有 radio 的選取狀態
+  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
+
+  if (filterList.length === 0) {
+    $('#removeResultBtn').hide();
+  }
+}
+
+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');
+  designerSearch("order_by");
+});
+
 let page = 1; // 當前頁數
 let pageSize = 18; // 每頁數量
 let isFirstLoad = true; // 初始載入
 
 // 列表篩選
 async function designerSearch(type = "") {
+  let url;
+  $('#designerSpinner').show();
+  $('#designerList').hide();
+
   if (isFirstLoad) {
     // 第一次載入使用本地 JSON 文件
     url = './json/designers_lists_data.json';
   } else {
     // 後續使用 API (預設排序為 recommend)
-    url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}&order_by=recommend`;
+    url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
 
     if (type === "order_by") {
       url += `&${type}=${assignOrder}`;
     }
 
+    if (assignOrder === "") {
+      url += "&order_by=recommend";
+    }
+
     let input = $(".keywords").val();
 
     if (input !== "") {
@@ -150,54 +186,6 @@ async function designerSearch(type = "") {
     }
   }
 
-  // // 預設排序為 recommend
-  // let url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}&order_by=recommend`;
-
-  // console.log('type', type);
-
-  // if (type === "order_by") {
-  //   url += `&${type}=${assignOrder}`
-  // }
-
-  // let input = $(".keywords").val();
-  // console.log('input', input);
-
-  // if (input !== "") {
-  //   url += `&keyword=${input}`
-  // }
-
-  // if (filterList.length) {
-  //   filterList.map(item => {
-  //     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}`
-  //     }
-  //   })
-  // }
-
   try {
     const response = await axios.get(url);
     console.log('response.data.designers', response.data.designers);
@@ -221,7 +209,7 @@ async function designerSearch(type = "") {
         resultHtml += `
         <div class="col-md-4 mb-4">
           <a href="${item.DesignerLink}">
-            <div class="card designer-card">
+            <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>
@@ -245,6 +233,11 @@ async function designerSearch(type = "") {
 
     $('#designerList').html(resultHtml);
 
+    setTimeout(() => {
+      $('#designerList').show();
+      $('#designerSpinner').hide();
+    }, 100)
+
     // 更新初始載入狀態
     if (isFirstLoad) {
       isFirstLoad = false;
@@ -367,21 +360,21 @@ function handlePagination(item, type = "") {
   designerSearch(); // 搜尋
 }
 
-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');
-  designerSearch("order_by");
-});
-
-
 // 熱搜關鍵字搜尋
 $(".search-bar-keyword a").click(function () {
   let keyword = $(this).text();
   $('.keywords').val(keyword);
   designerSearch();
+});
+
+// 全部清除
+$("#removeResultBtn").click(function () {
+  console.log('全部清除');
+  filterList.length = 0; // 清空篩選陣列
+  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+  $('.search-tab-result').empty(); // 清空篩選條件 dom
+  // 取消選取狀態
+  $('.filter-list input[type="radio"]').prop('checked', false);
+  $('.search-tab').removeClass('active');
+  designerSearch();
 });

videos/detail/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>

videos/lists/index.html

@@ -0,0 +1,564 @@
+<!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" />
+  <!-- CSS -->
+  <link rel="stylesheet" href="../../css/reset.css" />
+  <link rel="stylesheet" href="../../css/lists.css" />
+  <link rel="stylesheet" href="../../css/all.css" />
+</head>
+
+<body>
+  <!-- 動態載入 -->
+  <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">
+    <!-- 搜尋 -->
+    <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="designerSearch()" 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>
+                <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="row w-100 mt-5 filter-list">
+      <div class="col-12">
+        <p class="mb-3 text-muted">
+          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆全國室內設計師符合條件
+        </p>
+
+        <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
+          <div class="card-body 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="row">
+          <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">
+                <!-- <span class="me-3">
+                <span class="budget">
+                  接案地區：不拘
+                  <img src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
+                </span>
+              </span> -->
+
+                <!-- <button type="button" class="btn btn-light btn-sm text-muted px-3">全部清除</button> -->
+              </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">
+                人氣
+              </button>
+
+              <span class="mx-1">｜</span>
+
+              <button id="new" class="active">
+                最新
+              </button>
+
+              <span class="mx-1">｜</span>
+
+              <button id="recommend">
+                推薦
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 讀取圖示 -->
+        <div class="text-center my-5" id="videoSpinner">
+          <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+
+        <!-- 設計師列表 -->
+        <div class="row mt-5" id="videoList">
+          <!-- 動態載入 -->
+        </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>
+
+  <!-- 動態載入 -->
+  <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>
+  <!-- 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/main.js"></script>
+</body>
+
+</html>

videos/lists/js/main.js

@@ -0,0 +1,353 @@
+// 載入共用 template
+$('#navbar').load('../../template/navbar.html');
+$('#footer').load('../../template/footer.html');
+
+$('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+
+// 處理 radio 選取狀態
+$('.filter-list .form-check').click(function (e) {
+  e.preventDefault();
+  $(this).find('.form-check-input').prop('checked', true);
+
+  // 取得 radio 按鈕的 label
+  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
+
+  // 取上一層 search-tab 按鈕文字
+  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
+  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
+
+  updateSelectedOptions(buttonId, buttonValue, radioLabel);
+});
+
+let filterList = []; // 篩選條件
+
+// 更新篩選狀態
+function updateSelectedOptions(id, button, radio) {
+  page = 1;
+  console.log('更新篩選狀態', button, radio);
+
+  if (filterList.length) {
+    let exists = false; // 判斷是否已存在
+
+    for (let index = 0; index < filterList.length; index++) {
+      const element = filterList[index];
+
+      // 如有重複 button 只改 radio 狀態
+      if (element.text === button) {
+        element.value = radio;
+        exists = true;
+        // 更新篩選的值
+        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
+      }
+    }
+
+    // 如果 filterList 中不存在則新增
+    if (!exists) {
+      const newItem = {
+        id: id,
+        text: button,
+        value: radio
+      };
+
+      filterList.push(newItem);
+      createFilterHtml(newItem);
+    }
+
+
+  } else {
+    // 儲存篩選條件
+    filterList.push({
+      id: id,
+      text: button,
+      value: radio
+    })
+
+    for (let index = 0; index < filterList.length; index++) {
+      const element = filterList[index];
+      createFilterHtml(element);
+    }
+  }
+
+  videoSearch(); // 搜尋
+
+  console.log('filterList', filterList);
+
+  // 切換按鈕選取狀態
+  $('.dropdown').each(function () {
+    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
+    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
+  });
+}
+
+// 新增篩選條件 HTML
+function createFilterHtml(item) {
+  let dom = `
+    <span class="me-3">
+      <span class="d-flex budget">
+        <p class="me-1">${item.text}：${item.value}</p>
+        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
+      </span>
+    </span>`;
+
+  $('.search-tab-result').append(dom);
+  $('#removeResultBtn').show();
+}
+
+// 清除單一篩選條件
+function removeBtn(element, id, val) {
+  console.log('id, val', id, val);
+  filterList = filterList.filter(item => item.text !== val);
+
+  ; // 移除 div & active
+  $(element).closest('.me-3').remove();
+  $(`#${id}`).removeClass('active');
+  // 移除同一層級 ul 內所有 radio 的選取狀態
+  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
+
+  if (filterList.length === 0) {
+    $('#removeResultBtn').hide();
+  }
+}
+
+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');
+  videoSearch("order_by");
+});
+
+let page = 1; // 當前頁數
+let pageSize = 18; // 每頁數量
+let isFirstLoad = true; // 初始載入
+
+// 列表篩選
+async function videoSearch(type = "") {
+  let url;
+  $('#videoSpinner').show();
+  $('#videoList').hide();
+
+  if (isFirstLoad) {
+    // 第一次載入使用本地 JSON 文件
+    // url = './json/designers_lists_data.json';
+    url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}&order_by=new`;
+  } else {
+    // 後續使用 API (預設排序為 recommend)
+    url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}`;
+
+    if (type === "order_by") {
+      url += `&${type}=${assignOrder}`;
+    }
+
+    if (assignOrder === "") {
+      url += "&order_by=new";
+    }
+
+    let input = $(".keywords").val();
+
+    if (input !== "") {
+      url += `&keyword=${input}`;
+    }
+
+    if (filterList.length) {
+      filterList.map(item => {
+        url += `&${item.id}=${item.value}`;
+      });
+    }
+  }
+
+  try {
+    const response = await axios.get(url);
+    console.log('response.data.videos', response.data.videos);
+
+    let totalCount = response.data.total_count;
+    let totalPages = Math.ceil(totalCount / pageSize);
+
+    $("#totalCount").html(totalCount);
+
+    if (totalPages) {
+      $('.filter-list .pagination').show();
+      setPagination(totalPages); // 分頁處理
+    } else {
+      $('.filter-list .pagination').hide();
+    }
+
+    let resultHtml = '';
+
+    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">
+              <img src="${item.VideoCoverImg}" class="video-cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
+                <div class="card-body d-flex align-items-center">
+                  <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
+                  <section>
+                    <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
+                    <h6 class="card-title mb-0 text-dark">
+                      <span class="font-weight-bold">
+                        ${item.DesignerName}
+                      </span>
+                      設計師
+                    </h6>
+                  </section>
+                </div>
+            </div>
+          </a>
+        </div>`;
+      });
+    } else {
+      resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
+    }
+
+    $('#videoList').html(resultHtml);
+
+    setTimeout(() => {
+      $('#videoList').show();
+      $('#videoSpinner').hide();
+    }, 100)
+
+    // 更新初始載入狀態
+    if (isFirstLoad) {
+      isFirstLoad = false;
+    }
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
+videoSearch();
+
+let maxPagesMobile = 5; // 手機板最多顯示 5 頁
+let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
+
+// 分頁
+function setPagination(pages) {
+  let screenWidth = $(window).width();
+  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
+
+  function renderPagination(currentPage) {
+    let dom = `
+      <li class="page-item" onclick="handlePagination(this, 'previous')">
+        <a class="page-link previous hidden" href="#" aria-label="Previous">
+          <span aria-hidden="true">＜</span>
+        </a>
+      </li>`;
+
+    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
+    let endPage = Math.min(startPage + maxPages - 1, pages);
+
+    if (endPage - startPage < maxPages) {
+      startPage = Math.max(endPage - maxPages + 1, 1);
+    }
+
+    for (let index = startPage; index <= endPage; index++) {
+      dom += `
+        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
+          <a class="page-link" href="#">${index}</a>
+        </li>`;
+    }
+
+    dom += `
+      <li class="page-item" onclick="handlePagination(this, 'next')">
+        <a class="page-link next" href="#" aria-label="Next">
+          <span aria-hidden="true">＞</span>
+        </a>
+      </li>`;
+
+    $('.filter-list .pagination').html(dom);
+    updateVisibility(currentPage, pages);
+  }
+
+  // 更新上頁 & 下頁的按鈕顯示狀態
+  function updateVisibility(page, pages) {
+    if (page === 1) {
+      $('.page-link.previous').addClass('hidden');
+    } else {
+      $('.page-link.previous').removeClass('hidden');
+    }
+
+    if (page === pages) {
+      $('.page-link.next').addClass('hidden');
+    } else {
+      $('.page-link.next').removeClass('hidden');
+    }
+  }
+
+  window.handlePagination = function (item, type = "") {
+    if (type === "previous" && page > 1) {
+      page--;
+    } else if (type === "next" && page < pages) {
+      page++;
+    } else if (!type) {
+      page = parseInt($(item).find('.page-link').text());
+    }
+    renderPagination(page);
+    videoSearch();
+  }
+
+  renderPagination(page);
+
+  $(window).on('resize', function () {
+    let newScreenWidth = $(window).width();
+    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
+      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
+      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
+      renderPagination(page);
+    }
+  });
+}
+
+// 頁碼處理
+function handlePagination(item, type = "") {
+  if (type === "previous") {
+    // 往前一頁
+    if (page > 1) {
+      page--;
+    }
+    console.log(page);
+  } else if (type === "next") {
+    // 往後一頁
+    page++;
+    console.log(page);
+  } else {
+    // 直接點擊頁碼
+    page = parseInt($(item).find('.page-link')[0].innerText);
+  }
+
+  // 切換選取狀態
+  $('.filter-list .page-item').removeClass('active');
+  $('.filter-list .page-item').eq(page).addClass('active');
+
+  // 設定上一頁按鈕的顯示狀態
+  if (page === 1) {
+    $('.page-link.previous').addClass('hidden');
+  } else {
+    $('.page-link.previous').removeClass('hidden');
+  }
+
+  videoSearch(); // 搜尋
+}
+
+// 熱搜關鍵字搜尋
+$(".search-bar-keyword a").click(function () {
+  let keyword = $(this).text();
+  $('.keywords').val(keyword);
+  videoSearch();
+});
+
+// 全部清除
+$("#removeResultBtn").click(function () {
+  console.log('全部清除');
+  filterList.length = 0; // 清空篩選陣列
+  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+  $('.search-tab-result').empty(); // 清空篩選條件 dom
+  // 取消選取狀態
+  $('.filter-list input[type="radio"]').prop('checked', false);
+  $('.search-tab').removeClass('active');
+  videoSearch();
+});