Home Explore Help
Register Sign In
syuanyuri
/
hhh_new
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

新增個案列表頁

SyuanYu 7 months ago
parent
347aa37925
commit
308c7e8ac7
10 changed files with 1101 additions and 12 deletions
Unified View Show Diff Stats
  1. 14 0
      cases/detail/index.html
  2. 789 0
      cases/lists/index.html
  3. 246 0
      cases/lists/js/main.js
  4. 0 0
      cases/lists/json/designers_lists_data.json
  5. 12 0
      css/lists.css
  6. 0 0
      css/lists.css.map
  7. 15 1
      css/lists.scss
  8. 7 5
      designers/lists/js/main.js
  9. 8 0
      js/lists.js
  10. 10 6
      videos/lists/js/main.js

+ 14 - 0
cases/detail/index.html
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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