Browse Source

新增個案列表頁

SyuanYu 7 months ago
parent
commit
308c7e8ac7

+ 14 - 0
cases/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>

+ 789 - 0
cases/lists/index.html

@@ -0,0 +1,789 @@
+<!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" />
+  <!-- 結構化資料 -->
+  <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/designers/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">室內設計 / 裝潢設計&nbsp;&nbsp;案例</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" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
+                class="form-control border-primary keywords" autocomplete="off">
+              <div class="input-group-append">
+                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
+                  class="input-group-text">搜尋</button>
+              </div>
+
+              <!-- 自動補全 -->
+              <div id="autocomplete-list" class="autocomplete-items"></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="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="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="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="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>
+            </div>
+          </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">
+          <!-- 動態載入 -->
+        </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>
+  <!-- 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>

+ 246 - 0
cases/lists/js/main.js

@@ -0,0 +1,246 @@
+// 載入共用 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("order_by");
+});
+
+let page = 1; // 當前頁數
+let pageSize = 18; // 每頁數量
+let isFirstLoad = true; // 初始載入
+
+// 列表篩選
+async function dataSearch() {
+  let url;
+  $('#designerSpinner').show();
+  $('#designerList').hide();
+
+  if (isFirstLoad) {
+    // 第一次載入使用本地 JSON 文件
+    // url = './json/designers_lists_data.json';
+    url = `https://m3.hhh.com.tw:18673/case_search?page=${page}&page_size=${pageSize}`;
+  } else {
+    // 後續使用 API
+    url = `https://m3.hhh.com.tw:18673/case_search?page=${page}&page_size=${pageSize}`;
+
+    // if (type === "order_by") {
+    //   url += `&${type}=${assignOrder}`;
+    // }
+
+    if (assignOrder === "") {
+      url += "&order_by=new"; // 預設排序為 new
+    } else {
+      url += `&order_by=${assignOrder}`;
+    }
+
+    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("")
+      // url += `&keyword=${input}`;
+    }
+
+    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 {
+          url += `&${item.id}=${item.value}`;
+        }
+      });
+    }
+  }
+
+  try {
+    const response = await axios.get(url);
+    console.log('response.data.cases', response.data.cases);
+
+    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.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>"
+    }
+
+    $('#designerList').html(resultHtml);
+
+    setTimeout(() => {
+      $('#designerList').show();
+      $('#designerSpinner').hide();
+    }, 100)
+
+    // 更新初始載入狀態
+    if (isFirstLoad) {
+      isFirstLoad = false;
+    }
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
+dataSearch();
+
+// ga 設計師搜尋 (熱搜關鍵字)
+$(".search-bar-keyword li a").on("click", (e) => {
+  dataLayer.push({
+    'event': 'Click_Promo_Keyword',
+    'promo_keyword': `${e.target.innerText}`,
+    'promo_category': 'Designer_Search'
+  });
+});
+
+// 新的搜尋欄位處理
+function ga4_keywords() {
+  let elements = document.querySelectorAll(".me-1");
+  // 創建一個數組來存儲所有元素的文本內容
+  let keywords = Array.from(elements).map(element => {
+    let text = element.innerText;
+    // 查找 "關鍵字:" 的起始位置
+    let keywordIndex = text.indexOf("關鍵字:");
+    if (keywordIndex !== -1) {
+      // 提取 "關鍵字:" 後面的部分
+      return text.substring(keywordIndex + "關鍵字:".length).trim();
+    }
+    return ""; // 如果沒有找到 "關鍵字:",返回空字符串
+  });
+
+  // 過濾掉空字符串,並將剩餘文本合併為一個字符串
+  let keyword = keywords.filter(text => text !== "").join(", ");
+
+  dataLayer.push({
+    'event': 'View_Search_Results',
+    'search_term': `${keyword}`,
+    'search_category': 'Designer_Search'
+  });
+}
+
+document.getElementById("keywordInput").addEventListener("keydown", function (event) {
+  if (event.key === "Enter") {
+    ga4_keywords();
+  }
+});
+
+

File diff suppressed because it is too large
+ 0 - 0
cases/lists/json/designers_lists_data.json


+ 12 - 0
css/lists.css

@@ -203,6 +203,13 @@
   font-size: 0.75rem;
   font-size: 0.75rem;
   color: #EE7800;
   color: #EE7800;
   border: 1px solid #EE7800;
   border: 1px solid #EE7800;
+  transition: all 0.3s;
+}
+.filter-list .lists-card .card-body .tags-container span:hover {
+  opacity: 0.7;
+}
+.filter-list .lists-card .card-body .title {
+  font-weight: 500;
 }
 }
 
 
 #builderList .card h5 {
 #builderList .card h5 {
@@ -219,6 +226,11 @@
   transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
 }
 
 
+.date-item {
+  color: #c3c3c3;
+  font-size: 12px;
+}
+
 .autocomplete-items {
 .autocomplete-items {
   max-height: 282px;
   max-height: 282px;
   overflow-y: auto;
   overflow-y: auto;

File diff suppressed because it is too large
+ 0 - 0
css/lists.css.map


+ 15 - 1
css/lists.scss

@@ -186,7 +186,6 @@
     }
     }
 
 
     .card-body {
     .card-body {
-
       h5,
       h5,
       h6,
       h6,
       p,
       p,
@@ -227,8 +226,17 @@
           font-size: 0.75rem;
           font-size: 0.75rem;
           color: #EE7800;
           color: #EE7800;
           border: 1px solid #EE7800;
           border: 1px solid #EE7800;
+          transition: all .3s;
+
+          &:hover {
+            opacity: .7;
+          }
         }
         }
       }
       }
+
+      .title {
+        font-weight: 500;
+      }
     }
     }
   }
   }
 }
 }
@@ -253,6 +261,12 @@
   }
   }
 }
 }
 
 
+.date-item {
+  color: #c3c3c3;
+  font-size: 12px;
+  ;
+}
+
 // AutoComplete
 // AutoComplete
 .autocomplete-items {
 .autocomplete-items {
   max-height: 282px;
   max-height: 282px;

+ 7 - 5
designers/lists/js/main.js

@@ -29,15 +29,17 @@ async function dataSearch(type = "") {
     // 第一次載入使用本地 JSON 文件
     // 第一次載入使用本地 JSON 文件
     url = './json/designers_lists_data.json';
     url = './json/designers_lists_data.json';
   } else {
   } else {
-    // 後續使用 API (預設排序為 recommend)
+    // 後續使用 API
     url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
     url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
 
 
-    if (type === "order_by") {
-      url += `&${type}=${assignOrder}`;
-    }
+    // if (type === "order_by") {
+    //   url += `&${type}=${assignOrder}`;
+    // }
 
 
     if (assignOrder === "") {
     if (assignOrder === "") {
-      url += "&order_by=recommend";
+      url += "&order_by=recommend"; // 預設排序為 recommend
+    } else {
+      url += `&order_by=${assignOrder}`;
     }
     }
 
 
     let input = $(".keywords").val();
     let input = $(".keywords").val();

+ 8 - 0
js/lists.js

@@ -114,6 +114,14 @@ $('.keywords').on('keydown', function (event) {
   }
   }
 });
 });
 
 
+// 點擊 tag 進行搜尋
+$(document).on('click', '.tag-item', function (event) {
+  event.preventDefault(); // 阻止默認行為
+  event.stopPropagation(); // 阻止冒泡
+  const tag = $(this).data('tag');
+  $(".keywords").val(tag);
+  dataSearch();
+});
 
 
 let maxPagesMobile = 5; // 手機板最多顯示 5 頁
 let maxPagesMobile = 5; // 手機板最多顯示 5 頁
 let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
 let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁

+ 10 - 6
videos/lists/js/main.js

@@ -29,15 +29,17 @@ async function dataSearch(type = "") {
     // 第一次載入使用本地 JSON 文件
     // 第一次載入使用本地 JSON 文件
     url = './json/videos_lists_data.json';
     url = './json/videos_lists_data.json';
   } else {
   } else {
-    // 後續使用 API (預設排序為 recommend)
+    // 後續使用 API
     url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}`;
     url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}`;
 
 
-    if (type === "order_by") {
-      url += `&${type}=${assignOrder}`;
-    }
+    // if (type === "order_by") {
+    //   url += `&${type}=${assignOrder}`;
+    // }
 
 
     if (assignOrder === "") {
     if (assignOrder === "") {
-      url += "&order_by=new";
+      url += "&order_by=new"; // 預設排序為 new
+    } else {
+      url += `&order_by=${assignOrder}`;
     }
     }
 
 
     let input = $(".keywords").val();
     let input = $(".keywords").val();
@@ -106,7 +108,9 @@ async function dataSearch(type = "") {
         let tagsHtml = '';
         let tagsHtml = '';
 
 
         item.VideoTag.forEach((tag) => {
         item.VideoTag.forEach((tag) => {
-          tagsHtml += `<span>${tag}</span>`;
+          if (tag !== "") {
+            tagsHtml += `<span class="tag-item" data-tag="${tag}">${tag}</span>`;
+          }
         });
         });
 
 
         resultHtml += `
         resultHtml += `

Some files were not shown because too many files changed in this diff