Home Esplora Aiuto
Registrati Accedi
syuanyuri
/
hhh_new
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

Merge branch 'master' of http://git.choozmo.com:3000/syuanyuri/hhh_new

oak 8 mesi fa
parent
31c4b9faf5 c9ebfca6a1
commit
400d186eaf
18 ha cambiato i file con 2783 aggiunte e 984 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 14 0
      builder/detail/index.html
  2. 548 0
      builder/lists/index.html
  3. 358 0
      builder/lists/js/main.js
  4. 0 0
      builder/lists/json/designers_lists_data.json
  5. 221 1
      css/all.css
  6. 0 0
      css/all.css.map
  7. 290 1
      css/all.scss
  8. 27 5
      css/lists.css
  9. 1 1
      css/lists.css.map
  10. 36 5
      css/lists.scss
  11. 14 9
      designers/lists/index.html
  12. 6 2
      designers/lists/js/main.js
  13. 1 0
      img/icon/play.svg
  14. 954 954
      json/data_index.json
  15. 150 0
      template/button.html
  16. 148 0
      template/top_carousel.html
  17. 10 5
      videos/lists/index.html
  18. 5 1
      videos/lists/js/main.js

+ 14 - 0
builder/detail/index.html
Vedi 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>

+ 548 - 0
builder/lists/index.html
Vedi File 

@@ -0,0 +1,548 @@
 
+<!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" 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>
 
+              </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="city" data-bs-toggle="dropdown"
 
+                aria-expanded="false">
 
+                所在縣市
 
+              </button>
 
+
 
+              <ul class="dropdown-menu" aria-labelledby="city">
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="taipei_city">
 
+                    <label class="form-check-label" for="taipei_city">
 
+                      台北市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="new_taipei_city">
 
+                    <label class="form-check-label" for="new_taipei_city">
 
+                      新北市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="keelung_city">
 
+                    <label class="form-check-label" for="keelung_city">
 
+                      基隆市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="taoyuan_city">
 
+                    <label class="form-check-label" for="taoyuan_city">
 
+                      桃園市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_city">
 
+                    <label class="form-check-label" for="hsinchu_city">
 
+                      新竹市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_county">
 
+                    <label class="form-check-label" for="hsinchu_county">
 
+                      新竹縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="miaoli_county">
 
+                    <label class="form-check-label" for="miaoli_county">
 
+                      苗栗縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="taichung_city">
 
+                    <label class="form-check-label" for="taichung_city">
 
+                      台中市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="changhua_county">
 
+                    <label class="form-check-label" for="changhua_county">
 
+                      彰化縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="nantou_county">
 
+                    <label class="form-check-label" for="nantou_county">
 
+                      南投縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="yunlin_county">
 
+                    <label class="form-check-label" for="yunlin_county">
 
+                      雲林縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_city">
 
+                    <label class="form-check-label" for="chiayi_city">
 
+                      嘉義市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_county">
 
+                    <label class="form-check-label" for="chiayi_county">
 
+                      嘉義縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="tainan_city">
 
+                    <label class="form-check-label" for="tainan_city">
 
+                      台南市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="kaohsiung_city">
 
+                    <label class="form-check-label" for="kaohsiung_city">
 
+                      高雄市
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="pingtung_county">
 
+                    <label class="form-check-label" for="pingtung_county">
 
+                      屏東縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="yilan_county">
 
+                    <label class="form-check-label" for="yilan_county">
 
+                      宜蘭縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="hualien_county">
 
+                    <label class="form-check-label" for="hualien_county">
 
+                      花蓮縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="taitung_county">
 
+                    <label class="form-check-label" for="taitung_county">
 
+                      台東縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="penghu_county">
 
+                    <label class="form-check-label" for="penghu_county">
 
+                      澎湖縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="kinmen_county">
 
+                    <label class="form-check-label" for="kinmen_county">
 
+                      金門縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="city" id="lienchiang_county">
 
+                    <label class="form-check-label" for="lienchiang_county">
 
+                      連江縣
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+              </ul>
 
+            </div>
 
+
 
+            <div class="dropdown">
 
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="builder_type"
 
+                data-bs-toggle="dropdown" aria-expanded="false">
 
+                類型
 
+              </button>
 
+
 
+              <ul class="dropdown-menu" aria-labelledby="builder_type">
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typemrt">
 
+                    <label class="form-check-label" for="search_typemrt">
 
+                      捷運宅
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typefunction">
 
+                    <label class="form-check-label" for="search_typefunction">
 
+                      機能宅
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+                <li>
 
+                  <div class="form-check">
 
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typeking">
 
+                    <label class="form-check-label" for="search_typeking">
 
+                      帝王宅
 
+                    </label>
 
+                  </div>
 
+                </li>
 
+              </ul>
 
+            </div>
 
+
 
+          </div>
 
+        </div>
 
+
 
+
 
+        <div 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">
 
+                最新
 
+              </button>
 
+
 
+              <span class="mx-1">｜</span>
 
+
 
+              <button id="recommend" class="active">
 
+                推薦
 
+              </button>
 
+            </div>
 
+          </div> -->
 
+        </div>
 
+
 
+        <!-- 讀取圖示 -->
 
+        <div class="text-center my-5" id="builderSpinner">
 
+          <div class="spinner-border text-primary" role="status">
 
+            <span class="visually-hidden">Loading...</span>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 設計師列表 -->
 
+        <div class="row mt-5" id="builderList">
 
+          <!-- 動態載入 -->
 
+        </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/main.js"></script>
 
+</body>
 
+
 
+</html>

+ 358 - 0
builder/lists/js/main.js
Vedi File 

@@ -0,0 +1,358 @@
 
+// 載入共用 template
 
+$('#navbar').load('../../template/navbar.html');
 
+$('#footer').load('../../template/footer.html');
 
+$('#btn-box').load('../../template/button.html');
 
+$('#topCarousel').load('../../template/top_carousel.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);
 
+    }
 
+  }
 
+
 
+  builderSearch(); // 搜尋
 
+
 
+  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 = `
 
+    <div 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>
 
+    </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();
 
+  }
 
+
 
+  builderSearch();
 
+}
 
+
 
+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');
 
+//   builderSearch("order_by");
 
+// });
 
+
 
+let page = 1; // 當前頁數
 
+let pageSize = 18; // 每頁數量
 
+let isFirstLoad = true; // 初始載入
 
+
 
+// 列表篩選
 
+async function builderSearch() {
 
+  let url;
 
+  $('#builderSpinner').show();
 
+  $('#builderList').hide();
 
+
 
+  if (isFirstLoad) {
 
+    // 第一次載入使用本地 JSON 文件
 
+    // url = './json/designers_lists_data.json';
 
+    url = `https://m3.hhh.com.tw:18673/builder_search?page=${page}&page_size=${pageSize}`;
 
+  } else {
 
+    // 後續使用 API (預設排序為 recommend)
 
+    url = `https://m3.hhh.com.tw:18673/builder_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 !== "") {
 
+      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', response.data);
 
+    // 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">
 
+                <div class="position-relative">
 
+                  <img src="../../img/icon/play.svg" class="play-img${item.Is_video === '0' ? ' d-none' : ''}" alt="play-img">
 
+                    <img src="${item.BuilderCoverImg}" class="cover-img" alt="${item.BuilderTitle}">
 
+                    </div>
 
+                    <div class="card-body p-4">
 
+                      <section>
 
+                        <h5 class="text-dark">${item.BuilderTitle}</h5>
 
+                        <p class="text-dark my-3">${item.BuilderDescr}</p>
 
+                        <h6 class="mb-0 text-muted fw-normal">
 
+                          ${item.BuilderAddress}
 
+                        </h6>
 
+                      </section>
 
+                    </div>
 
+                </div>
 
+            </a>
 
+          </div>`;
 
+      });
 
+    } else {
 
+      resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
 
+    }
 
+
 
+    $('#builderList').html(resultHtml);
 
+
 
+    setTimeout(() => {
 
+      $('#builderList').show();
 
+      $('#builderSpinner').hide();
 
+    }, 100)
 
+
 
+    // 更新初始載入狀態
 
+    if (isFirstLoad) {
 
+      isFirstLoad = false;
 
+    }
 
+  } catch (error) {
 
+    console.log("error", error);
 
+  }
 
+}
 
+
 
+builderSearch();
 
+
 
+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);
 
+    builderSearch();
 
+  }
 
+
 
+  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');
 
+  }
 
+
 
+  builderSearch(); // 搜尋
 
+}
 
+
 
+// 熱搜關鍵字搜尋
 
+$(".search-bar-keyword a").click(function () {
 
+  let keyword = $(this).text();
 
+  $('.keywords').val(keyword);
 
+  builderSearch();
 
+});
 
+
 
+// 全部清除
 
+$("#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');
 
+  builderSearch();
 
+});

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


+ 221 - 1
css/all.css
Vedi File 

@@ -1,3 +1,4 @@
 
+@charset "UTF-8";
 
 * {
 
   font-weight: 500;
 
   font-family: "Noto Sans TC", sans-serif !important;
 
@@ -562,4 +563,223 @@ body {
 
   opacity: 0.7 !important;
 
 }
 
 
-/* searchModal End *//*# sourceMappingURL=all.css.map */
 
+/* searchModal End */
 
+/* 頂部輪播 Start */
 
+.top-carousel {
 
+  padding: 1rem 0;
 
+  background-color: rgb(202, 202, 202);
 
+  transition-property: height;
 
+  transition-duration: 300ms;
 
+}
 
+.top-carousel .slick-next {
 
+  right: 25px;
 
+}
 
+.top-carousel .slick-prev {
 
+  left: 25px;
 
+}
 
+.top-carousel .slick-prev,
 
+.top-carousel .slick-next {
 
+  position: absolute;
 
+  top: 50%;
 
+  z-index: 100;
 
+  border: none;
 
+  background: transparent;
 
+}
 
+.top-carousel .slick-prev::before,
 
+.top-carousel .slick-next::before {
 
+  display: none;
 
+}
 
+.top-carousel .bullet-list {
 
+  position: absolute;
 
+  bottom: 13px;
 
+  width: 1276px;
 
+  max-width: 100%;
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  z-index: 10;
 
+  background-color: rgba(0, 0, 0, 0.1);
 
+}
 
+@media (max-width: 991px) {
 
+  .top-carousel .bullet-list {
 
+    bottom: 0;
 
+  }
 
+}
 
+.top-carousel .bullet-list .bullet {
 
+  position: relative;
 
+  width: 100%;
 
+  height: 3px;
 
+  background-color: rgba(0, 0, 0, 0.1);
 
+  flex: 1 1 auto;
 
+  opacity: 1;
 
+}
 
+.top-carousel .bullet-list .bullet::after {
 
+  content: "";
 
+  background: #ee7800;
 
+  position: absolute;
 
+  width: 0;
 
+  height: 100%;
 
+  left: 0;
 
+  top: 0;
 
+  border-radius: 2px;
 
+}
 
+.top-carousel .bullet-active::after {
 
+  width: 0;
 
+  animation-name: progress;
 
+  animation-duration: 4s;
 
+  animation-timing-function: linear;
 
+}
 
+@keyframes progress {
 
+  0% {
 
+    width: 0%;
 
+  }
 
+  25% {
 
+    width: 25%;
 
+  }
 
+  50% {
 
+    width: 50%;
 
+  }
 
+  75% {
 
+    width: 75%;
 
+  }
 
+  100% {
 
+    width: 100%;
 
+  }
 
+}
 
+.top-carousel .close-btn {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 20px;
 
+  width: 55px;
 
+  height: 35px;
 
+  background-color: hsla(0, 0%, 100%, 0.66);
 
+  border-radius: 0 0 50px 50px;
 
+  color: #888;
 
+  border: none;
 
+  outline: none;
 
+  font-size: 11px;
 
+  box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+  line-height: 12px;
 
+  z-index: 3;
 
+}
 
+.top-carousel .close-btn p {
 
+  margin-top: -3px;
 
+}
 
+.top-carousel.banner-close {
 
+  height: 0;
 
+  padding: 0;
 
+  overflow: hidden;
 
+  transition-property: height;
 
+  transition-duration: 300ms;
 
+}
 
+.top-carousel .container-fluid {
 
+  background-color: rgb(202, 202, 202);
 
+}
 
+
 
+/* 頂部輪播 End */
 
+/* 左下按紐 Start */
 
+#btn-box {
 
+  display: flex;
 
+  flex-direction: column;
 
+  position: fixed;
 
+  right: 15px;
 
+  bottom: 15px;
 
+  z-index: 10;
 
+  font-size: 32px;
 
+  cursor: pointer;
 
+}
 
+@media (max-width: 767px) {
 
+  #btn-box {
 
+    bottom: 75px;
 
+  }
 
+}
 
+#btn-box .calculator-btn p,
 
+#btn-box .shop-btn p {
 
+  display: none;
 
+  width: 0px;
 
+  margin-right: -5px;
 
+  overflow: hidden;
 
+  color: #ee751b;
 
+  font-size: 16px;
 
+  letter-spacing: 1px;
 
+  transition: all 0.6s;
 
+}
 
+#btn-box .calculator-btn.show a img,
 
+#btn-box .shop-btn.show a img {
 
+  width: 22px;
 
+  margin-left: 3px;
 
+  position: relative;
 
+  left: 8px;
 
+}
 
+#btn-box .calculator-btn.show a p,
 
+#btn-box .shop-btn.show a p {
 
+  display: inline-block;
 
+  width: 100%;
 
+  white-space: nowrap;
 
+}
 
+#btn-box .calculator-btn.show {
 
+  width: 130px;
 
+  margin-left: -85px;
 
+}
 
+#btn-box .shop-btn.show {
 
+  width: 95px;
 
+  margin-left: -50px;
 
+}
 
+#btn-box a {
 
+  color: #000;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+#btn-box button {
 
+  width: 45px;
 
+  height: 45px;
 
+  margin: 5px 0;
 
+  border: none;
 
+  border-radius: 5px;
 
+  box-shadow: 0px 2px 3px #ccc;
 
+  background: rgba(255, 255, 255, 0.9);
 
+}
 
+#btn-box button:hover {
 
+  transition: all 0.5s;
 
+  background: rgb(255, 255, 255);
 
+}
 
+#btn-box button:hover img {
 
+  filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
 
+}
 
+#btn-box button img {
 
+  width: 20px;
 
+}
 
+#btn-box .gotop-btn img {
 
+  display: block;
 
+  margin: auto;
 
+}
 
+
 
+.mb-menu {
 
+  display: flex;
 
+  padding: 13px 0 8px;
 
+  position: fixed;
 
+  right: 0;
 
+  left: 0;
 
+  bottom: 0;
 
+  z-index: 1000;
 
+  transition: all 0.3s;
 
+  background-color: #fff;
 
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 
+}
 
+.mb-menu a {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.mb-menu a h4 {
 
+  margin: 5px auto 0;
 
+  color: #34404B;
 
+  font-size: 16px;
 
+}
 
+.mb-menu a img {
 
+  width: 20px;
 
+  height: 20px;
 
+}
 
+
 
+/* 左下按紐 End *//*# sourceMappingURL=all.css.map */

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


+ 290 - 1
css/all.scss
Vedi File 

@@ -653,4 +653,293 @@ body {
 
   opacity: 0.7 !important;
 
 }
 
 
-/* searchModal End */
 
+/* searchModal End */
 
+
 
+/* 頂部輪播 Start */
 
+
 
+.top-carousel {
 
+  padding: 1rem 0;
 
+  background-color: rgb(202, 202, 202);
 
+  transition-property: height;
 
+  transition-duration: 300ms;
 
+
 
+  .slick-next {
 
+    right: 25px;
 
+  }
 
+
 
+  .slick-prev {
 
+    left: 25px;
 
+  }
 
+
 
+  .slick-prev,
 
+  .slick-next {
 
+    position: absolute;
 
+    top: 50%;
 
+    z-index: 100;
 
+    border: none;
 
+    background: transparent;
 
+
 
+    &::before {
 
+      display: none;
 
+    }
 
+  }
 
+
 
+  .bullet-list {
 
+    position: absolute;
 
+    bottom: 13px;
 
+    width: 1276px;
 
+    max-width: 100%;
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    z-index: 10;
 
+    background-color: rgba(0, 0, 0, 0.1);
 
+
 
+    @media (max-width: 991px) {
 
+      bottom: 0;
 
+    }
 
+
 
+    .bullet {
 
+      position: relative;
 
+      width: 100%;
 
+      height: 3px;
 
+      background-color: rgba(0, 0, 0, 0.1);
 
+      flex: 1 1 auto;
 
+      opacity: 1;
 
+
 
+      &::after {
 
+        content: "";
 
+        background: #ee7800;
 
+        position: absolute;
 
+        width: 0;
 
+        height: 100%;
 
+        left: 0;
 
+        top: 0;
 
+        border-radius: 2px;
 
+      }
 
+    }
 
+  }
 
+
 
+  .bullet-active::after {
 
+    width: 0;
 
+    -webkit-animation-name: progress;
 
+    animation-name: progress;
 
+    -webkit-animation-duration: 4s;
 
+    animation-duration: 4s;
 
+    -webkit-animation-timing-function: linear;
 
+    animation-timing-function: linear;
 
+  }
 
+
 
+
 
+  @keyframes progress {
 
+    0% {
 
+      width: 0%;
 
+    }
 
+
 
+    25% {
 
+      width: 25%;
 
+    }
 
+
 
+    50% {
 
+      width: 50%;
 
+    }
 
+
 
+    75% {
 
+      width: 75%;
 
+    }
 
+
 
+    100% {
 
+      width: 100%;
 
+    }
 
+  }
 
+
 
+  @-webkit-keyframes progress {
 
+    0% {
 
+      width: 0%;
 
+    }
 
+
 
+    25% {
 
+      width: 25%;
 
+    }
 
+
 
+    50% {
 
+      width: 50%;
 
+    }
 
+
 
+    75% {
 
+      width: 75%;
 
+    }
 
+
 
+    100% {
 
+      width: 100%;
 
+    }
 
+  }
 
+
 
+  .close-btn {
 
+    position: absolute;
 
+    top: 0;
 
+    right: 20px;
 
+    width: 55px;
 
+    height: 35px;
 
+    background-color: hsla(0, 0%, 100%, 0.66);
 
+    border-radius: 0 0 50px 50px;
 
+    color: #888;
 
+    border: none;
 
+    outline: none;
 
+    font-size: 11px;
 
+    box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
 
+    line-height: 12px;
 
+    z-index: 3;
 
+
 
+    p {
 
+      margin-top: -3px;
 
+    }
 
+  }
 
+
 
+  &.banner-close {
 
+    height: 0;
 
+    padding: 0;
 
+    overflow: hidden;
 
+    transition-property: height;
 
+    transition-duration: 300ms;
 
+  }
 
+
 
+  .container-fluid {
 
+    background-color: rgb(202, 202, 202);
 
+  }
 
+
 
+}
 
+
 
+/* 頂部輪播 End */
 
+
 
+/* 左下按紐 Start */
 
+
 
+#btn-box {
 
+  display: flex;
 
+  flex-direction: column;
 
+  position: fixed;
 
+  right: 15px;
 
+  bottom: 15px;
 
+  z-index: 10;
 
+  font-size: 32px;
 
+  cursor: pointer;
 
+
 
+  @media (max-width: 767px) {
 
+    bottom: 75px;
 
+  }
 
+
 
+  // 滑動按鈕
 
+  .calculator-btn,
 
+  .shop-btn {
 
+    p {
 
+      display: none;
 
+      width: 0px;
 
+      margin-right: -5px;
 
+      overflow: hidden;
 
+      color: #ee751b;
 
+      font-size: 16px;
 
+      letter-spacing: 1px;
 
+      transition: all .6s;
 
+    }
 
+
 
+    &.show {
 
+      a {
 
+        img {
 
+          width: 22px;
 
+          margin-left: 3px;
 
+          position: relative;
 
+          left: 8px;
 
+        }
 
+
 
+        p {
 
+          display: inline-block;
 
+          width: 100%;
 
+          white-space: nowrap;
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .calculator-btn {
 
+    &.show {
 
+      width: 130px;
 
+      margin-left: -85px;
 
+    }
 
+  }
 
+
 
+  .shop-btn {
 
+    &.show {
 
+      width: 95px;
 
+      margin-left: -50px;
 
+    }
 
+  }
 
+
 
+  a {
 
+    color: #000;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+  }
 
+
 
+  button {
 
+    width: 45px;
 
+    height: 45px;
 
+    margin: 5px 0;
 
+    border: none;
 
+    border-radius: 5px;
 
+    box-shadow: 0px 2px 3px #ccc;
 
+    background: rgba(255, 255, 255, 0.9);
 
+
 
+    &:hover {
 
+      transition: all .5s;
 
+      background: rgb(255, 255, 255);
 
+    }
 
+
 
+    &:hover img {
 
+      filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
 
+    }
 
+
 
+    img {
 
+      width: 20px;
 
+    }
 
+  }
 
+
 
+  .gotop-btn {
 
+    img {
 
+      display: block;
 
+      margin: auto;
 
+    }
 
+  }
 
+}
 
+
 
+.mb-menu {
 
+  display: flex;
 
+  padding: 13px 0 8px;
 
+  position: fixed;
 
+  right: 0;
 
+  left: 0;
 
+  bottom: 0;
 
+  z-index: 1000;
 
+  transition: all .3s;
 
+  background-color: #fff;
 
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 
+
 
+  a {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+
 
+    h4 {
 
+      margin: 5px auto 0;
 
+      color: #34404B;
 
+      font-size: 16px;
 
+    }
 
+
 
+    img {
 
+      width: 20px;
 
+      height: 20px;
 
+    }
 
+  }
 
+}
 
+
 
+/* 左下按紐 End */

+ 27 - 5
css/lists.css
Vedi File 

@@ -93,6 +93,13 @@
 
 .filter-list .search-tab-result {
 
   font-size: 14px;
 
 }
 
+.filter-list .search-tab-result img {
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+}
 
+.filter-list .search-tab-result img:hover {
 
+  opacity: 0.7;
 
+}
 
 .filter-list .lists-card {
 
   height: 100%;
 
 }
 
@@ -118,6 +125,7 @@
 
   }
 
 }
 
 .filter-list .lists-card .cover-img {
 
+  width: 100%;
 
   height: 235px;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
@@ -162,13 +170,11 @@
 
     height: 48.5vw;
 
   }
 
 }
 
-.filter-list .lists-card .card-body section {
 
-  width: 70%;
 
-}
 
 .filter-list .lists-card .card-body h5,
 
 .filter-list .lists-card .card-body h6,
 
+.filter-list .lists-card .card-body p,
 
 .filter-list .lists-card .card-body .video-title {
 
-  line-height: 1.25;
 
+  line-height: 1.5;
 
   font-size: 1rem;
 
   -webkit-box-orient: vertical;
 
   overflow: hidden;
 
@@ -176,12 +182,14 @@
 
   display: -webkit-box;
 
 }
 
 .filter-list .lists-card .card-body h5 {
 
-  height: 1.09375rem;
 
   -webkit-line-clamp: 1;
 
 }
 
 .filter-list .lists-card .card-body h6 {
 
   -webkit-line-clamp: 2;
 
 }
 
+.filter-list .lists-card .card-body p {
 
+  font-weight: 400;
 
+}
 
 .filter-list .lists-card .card-body .video-title {
 
   font-weight: bold;
 
   color: #43484C;
 
@@ -195,4 +203,18 @@
 
   font-size: 0.75rem;
 
   color: #EE7800;
 
   border: 1px solid #EE7800;
 
+}
 
+
 
+#builderList .card h5 {
 
+  font-size: 1.125rem;
 
+}
 
+#builderList .card h6 {
 
+  -webkit-line-clamp: 1;
 
+}
 
+#builderList .card .play-img {
 
+  width: 50px;
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
 }/*# sourceMappingURL=lists.css.map */

+ 1 - 1
css/lists.css.map
Vedi File 

@@ -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;ACsBE;EACE,YAAA;ADpBJ;ACsBI;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,iDAAA;ADpBN;ACsBM;EATF;IAUI,YAAA;IACA,eAAA;EDnBN;AACF;ACqBM;EAdF;IAeI,YAAA;IACA,eAAA;EDlBN;AACF;ACqBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADnBN;ACqBM;EAJF;IAKI,aAAA;EDlBN;AACF;ACoBM;EARF;IASI,aAAA;EDjBN;AACF;ACoBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADlBN;ACoBM;EAJF;IAKI,aAAA;EDjBN;AACF;ACmBM;EARF;IASI,aAAA;EDhBN;AACF;ACkBM;EAZF;IAaI,aAAA;EDfN;AACF;ACiBM;EAhBF;IAiBI,aAAA;EDdN;AACF;ACgBM;EApBF;IAqBI,cAAA;EDbN;AACF;ACiBM;EACE,UAAA;ADfR;ACkBM;;;EAGE,iBAAA;EACA,eAAA;EAEA,4BAAA;EACA,gBAAA;EACA,uBAAA;EACA,oBAAA;ADjBR;ACoBM;EACE,kBAAA;EACA,qBAAA;ADlBR;ACqBM;EACE,qBAAA;ADnBR;ACsBM;EACE,iBAAA;EACA,cAAA;EACA,qBAAA;ADpBR;ACwBQ;EACE,qBAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,yBAAA;ADtBV","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;ACqBI;EACE,eAAA;EACA,oBAAA;ADnBN;ACqBM;EACE,YAAA;ADnBR;ACwBE;EACE,YAAA;ADtBJ;ACwBI;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,iDAAA;ADtBN;ACwBM;EATF;IAUI,YAAA;IACA,eAAA;EDrBN;AACF;ACuBM;EAdF;IAeI,YAAA;IACA,eAAA;EDpBN;AACF;ACuBI;EACE,WAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;ADrBN;ACuBM;EALF;IAMI,aAAA;EDpBN;AACF;ACsBM;EATF;IAUI,aAAA;EDnBN;AACF;ACsBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADpBN;ACsBM;EAJF;IAKI,aAAA;EDnBN;AACF;ACqBM;EARF;IASI,aAAA;EDlBN;AACF;ACoBM;EAZF;IAaI,aAAA;EDjBN;AACF;ACmBM;EAhBF;IAiBI,aAAA;EDhBN;AACF;ACkBM;EApBF;IAqBI,cAAA;EDfN;AACF;ACoBM;;;;EAIE,gBAAA;EACA,eAAA;EAEA,4BAAA;EACA,gBAAA;EACA,uBAAA;EACA,oBAAA;ADnBR;ACsBM;EACE,qBAAA;ADpBR;ACuBM;EACE,qBAAA;ADrBR;ACwBM;EACE,gBAAA;ADtBR;ACyBM;EACE,iBAAA;EACA,cAAA;EACA,qBAAA;ADvBR;AC2BQ;EACE,qBAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,yBAAA;ADzBV;;ACkCI;EACE,mBAAA;AD/BN;ACkCI;EACE,qBAAA;ADhCN;ACmCI;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ADjCN","file":"lists.css"}

+ 36 - 5
css/lists.scss
Vedi File 

@@ -112,6 +112,15 @@
 
 
   .search-tab-result {
 
     font-size: 14px;
 
+
 
+    img {
 
+      cursor: pointer;
 
+      transition: all .3s;
 
+
 
+      &:hover {
 
+        opacity: .7;
 
+      }
 
+    }
 
   }
 
 
   .lists-card {
 
@@ -138,6 +147,7 @@
 
     }
 
 
     .cover-img {
 
+      width: 100%;
 
       height: 235px;
 
       object-fit: cover;
 
 
@@ -176,14 +186,12 @@
 
     }
 
 
     .card-body {
 
-      section {
 
-        width: 70%;
 
-      }
 
 
       h5,
 
       h6,
 
+      p,
 
       .video-title {
 
-        line-height: 1.25;
 
+        line-height: 1.5;
 
         font-size: 1rem;
 
         // 換行
 
         -webkit-box-orient: vertical;
 
@@ -193,7 +201,6 @@
 
       }
 
 
       h5 {
 
-        height: 1.09375rem;
 
         -webkit-line-clamp: 1;
 
       }
 
 
@@ -201,6 +208,10 @@
 
         -webkit-line-clamp: 2;
 
       }
 
 
+      p {
 
+        font-weight: 400;
 
+      }
 
+
 
       .video-title {
 
         font-weight: bold;
 
         color: #43484C;
 
@@ -220,4 +231,24 @@
 
       }
 
     }
 
   }
 
+}
 
+
 
+#builderList {
 
+  .card {
 
+    h5 {
 
+      font-size: 1.125rem;
 
+    }
 
+
 
+    h6 {
 
+      -webkit-line-clamp: 1;
 
+    }
 
+
 
+    .play-img {
 
+      width: 50px;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      transform: translate(-50%, -50%);
 
+    }
 
+  }
 
 }

+ 14 - 9
designers/lists/index.html
Vedi File 

@@ -55,6 +55,8 @@
 
   <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" />
 
@@ -137,6 +139,7 @@
 
 
 <body>
 
   <!-- 動態載入 -->
 
+  <div id="topCarousel"></div>
 
   <div id="navbar"></div>
 
 
   <!-- searchModal -->
 
@@ -838,14 +841,14 @@
 
               </button>
 
 
               <ul class="dropdown-menu" aria-labelledby="arch">
 
-                <li>
 
+                <!-- <li>
 
                   <div class="form-check">
 
                     <input class="form-check-input" type="radio" name="darch" id="darchall">
 
                     <label class="form-check-label" for="darchall">
 
                       不拘
 
                     </label>
 
                   </div>
 
-                </li>
 
+                </li> -->
 
                 <li>
 
                   <div class="form-check">
 
                     <input class="form-check-input" type="radio" name="darch" id="darchY">
 
@@ -864,14 +867,14 @@
 
               </button>
 
 
               <ul class="dropdown-menu" aria-labelledby="award">
 
-                <li>
 
+                <!-- <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> -->
 
                 <li>
 
                   <div class="form-check">
 
                     <input class="form-check-input" type="radio" name="award" id="awardY">
 
@@ -926,12 +929,12 @@
 
           </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 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">
 
@@ -974,6 +977,8 @@
 
 
   <!-- 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"

+ 6 - 2
designers/lists/js/main.js
Vedi File 

@@ -4,6 +4,8 @@
 
 // 載入共用 template
 
 $('#navbar').load('../../template/navbar.html');
 
 $('#footer').load('../../template/footer.html');
 
+$('#btn-box').load('../../template/button.html');
 
+$('#topCarousel').load('../../template/top_carousel.html');
 
 
 $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
 
 
@@ -110,6 +112,8 @@ function removeBtn(element, id, val) {
 
   if (filterList.length === 0) {
 
     $('#removeResultBtn').hide();
 
   }
 
+
 
+  designerSearch();
 
 }
 
 
 let assignOrder = ""; // 當前排序
 
@@ -214,8 +218,8 @@ async function designerSearch(type = "") {
 
                 <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">
 
+                    <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
 
+                    <h6 class="mb-0 text-dark">
 
                       <span class="font-weight-bold">
 
                         ${item.DesignerName}
 
                       </span>

+ 1 - 0
img/icon/play.svg
Vedi File 

@@ -0,0 +1 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112" height="112" viewBox="0 0 112 112"><defs><style>.a{fill:#fff;opacity:0.849;}.b{filter:url(#a);}</style><filter id="a" x="0" y="0" width="112" height="112" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g class="b" transform="matrix(1, 0, 0, 1, 0, 0)"><path class="a" d="M47,94a47.012,47.012,0,0,1-18.3-90.307A47.012,47.012,0,0,1,65.295,90.307,46.7,46.7,0,0,1,47,94ZM35.89,30.764V64.945L64.945,47.854Z" transform="translate(9 6)"/></g></svg>

+ 954 - 954
json/data_index.json
Vedi File 

@@ -1,970 +1,970 @@
 
 [
 
-    {
 
-        "_comment": "頂部輪播區",
 
-        "id": 0,
 
-        "block": "topCarousel",
 
+  {
 
+    "_comment": "頂部輪播區",
 
+    "id": 0,
 
+    "block": "topCarousel",
 
+    "data": [
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745237.jpg",
 
+        "link": "https://hhh.com.tw/designer-index.php?designer_id=32",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745176.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745255.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745250.jpg",
 
+        "id": 15666,
 
+        "alt": "理揚室內設計"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333058.jpg",
 
+        "link": "https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333039.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333065.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333061.jpg",
 
+        "id": 17397,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972693.jpg",
 
+        "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=99",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972656.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972701.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972697.jpg",
 
+        "id": 17205,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg",
 
+        "link": "https://hhh.com.tw/designer-index.php?designer_id=31",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603855335.webp",
 
+        "id": 15673,
 
+        "alt": "富億空間設計"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604388.jpg",
 
+        "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=28",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604300.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604397.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604393.jpg",
 
+        "id": 17037,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478055.jpg",
 
+        "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=500",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478047.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478064.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478060.jpg",
 
+        "id": 17494,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071915.jpg",
 
+        "link": "https://hhh.com.tw/designer-index.php?designer_id=447",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071906.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071927.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071921.jpg",
 
+        "id": 15662,
 
+        "alt": "恆岳空間設計"
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "主要輪播區",
 
+    "id": 1,
 
+    "block": "sec02",
 
+    "data": [
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476266.jpg",
 
+        "link": "https://event.hhh.com.tw/topglory/designer_684.html",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476249.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476396.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476348.webp",
 
+        "logo_icon": "glory",
 
+        "index_char_1": "合併戶毛胚宅 紡織工藝承載家族溫度│現代風",
 
+        "index_char_2_1": "聯寬設計",
 
+        "index_char_2_2": "陳見行KEN、王毓婷TING",
 
+        "index_char_2_3": "設計師",
 
+        "id": 17493,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476275.jpg",
 
+        "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=536",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476271.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476401.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476360.webp",
 
+        "logo_icon": "renovation",
 
+        "index_char_1": "挹注簡約風範 描摹柔潤居所│現代風│45坪",
 
+        "index_char_2_1": "苡希創意設計",
 
+        "index_char_2_2": "葉佳奇",
 
+        "index_char_2_3": "設計師",
 
+        "id": 17492,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476285.jpg",
 
+        "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=510&title=%E7%A6%BE%E7%86%99%E5%AE%A4%E5%85%A7%E8%A3%9D%E4%BF%AE%E8%A8%AD%E8%A8%88%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476280.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476418.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476368.webp",
 
+        "logo_icon": "designer",
 
+        "index_char_1": "彤霞皓魄│混搭風│16坪",
 
+        "index_char_2_1": "禾熙室內裝修設計",
 
+        "index_char_2_2": "謝張志昇",
 
+        "index_char_2_3": "設計師",
 
+        "id": 17491,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476296.jpg",
 
+        "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=474&title=%E9%9B%8B%E7%AF%89%E7%A9%BA%E9%96%93%E8%A8%AD%E8%A8%88%EF%BC%86%E7%9D%BF%E8%AC%99%E5%AE%A4%E5%85%A7%E8%A3%9D%E4%BF%AE",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476291.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476425.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476377.webp",
 
+        "logo_icon": "designer",
 
+        "index_char_1": "清淡暖色木系 圍塑零壓療癒生活場域 │北歐混搭風│38坪",
 
+        "index_char_2_1": "雋築空間設計＆睿謙室內裝修",
 
+        "index_char_2_2": "劉倢妤 Kimico",
 
+        "index_char_2_3": "設計師",
 
+        "id": 17490,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476312.jpg",
 
+        "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=857&title=%E8%8A%AC%E6%A0%BC%E8%A8%AD%E8%A8%88%E5%B7%A5%E7%A8%8B",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476303.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476430.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476386.webp",
 
+        "logo_icon": "designer",
 
+        "index_char_1": "波光瀲灩 恬靜悠遠 │簡約風 │36坪",
 
+        "index_char_2_1": "芬格設計工程",
 
+        "index_char_2_2": "林京蔚",
 
+        "index_char_2_3": "設計師",
 
+        "id": 17489,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476329.jpg",
 
+        "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=23&title=%E5%A2%83%E5%BA%AD%E5%9C%8B%E9%9A%9B%E8%A8%AD%E8%A8%88",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476319.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476435.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476391.webp",
 
+        "logo_icon": "designer",
 
+        "index_char_1": "遇見境式混搭 美式輕奢的優雅步調",
 
+        "index_char_2_1": "境庭國際設計",
 
+        "index_char_2_2": "周靖雅",
 
+        "index_char_2_3": "設計師",
 
+        "id": 17488,
 
+        "alt": ""
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061581.jpg",
 
+        "link": "https://hhh.com.tw/HHH_NEW/columns_detail/7345.php",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061549.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061595.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061588.webp",
 
+        "logo_icon": "",
 
+        "index_char_1": "",
 
+        "index_char_2_1": "",
 
+        "index_char_2_2": "",
 
+        "index_char_2_3": "",
 
+        "id": 17497,
 
+        "alt": ""
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "首頁photo頁",
 
+    "id": 2,
 
+    "block": "photo",
 
+    "data": [
 
+      {
 
+        "tab": "依照風格瀏覽設計",
 
         "data": [
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745237.jpg",
 
-                "link": "https://hhh.com.tw/designer-index.php?designer_id=32",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745176.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745255.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15666_1691745250.jpg",
 
-                "id": 15666,
 
-                "alt": "理揚室內設計"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333058.jpg",
 
-                "link": "https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333039.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333065.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17397_1713333061.jpg",
 
-                "id": 17397,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972693.jpg",
 
-                "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=99",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972656.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972701.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17205_1702972697.jpg",
 
-                "id": 17205,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg",
 
-                "link": "https://hhh.com.tw/designer-index.php?designer_id=31",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603096869.jpg.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15673_1603855335.webp",
 
-                "id": 15673,
 
-                "alt": "富億空間設計"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604388.jpg",
 
-                "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=28",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604300.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604397.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17037_1692604393.jpg",
 
-                "id": 17037,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478055.jpg",
 
-                "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=500",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478047.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478064.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17494_1719478060.jpg",
 
-                "id": 17494,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071915.jpg",
 
-                "link": "https://hhh.com.tw/designer-index.php?designer_id=447",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071906.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071927.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_15662_1682071921.jpg",
 
-                "id": 15662,
 
-                "alt": "恆岳空間設計"
 
-            }
 
+          {
 
+            "name": "北歐風",
 
+            "image": "/assets/images/photo/style/nordic.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/nordic-style/",
 
+            "order": "2"
 
+          },
 
+          {
 
+            "name": "現代風",
 
+            "image": "/assets/images/photo/style/modern.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/modern-style/",
 
+            "order": "1"
 
+          },
 
+          {
 
+            "name": "工業風",
 
+            "image": "/assets/images/photo/style/industry.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/industry-style/",
 
+            "order": "6"
 
+          },
 
+          {
 
+            "name": "美式風",
 
+            "image": "/assets/images/photo/style/american.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/american-style/",
 
+            "order": "4"
 
+          },
 
+          {
 
+            "name": "休閒多元",
 
+            "image": "/assets/images/photo/style/leisure.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/leisure-style/",
 
+            "order": "5"
 
+          },
 
+          {
 
+            "name": "前衛風",
 
+            "image": "/assets/images/photo/style/vanguard.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/vanguard-style/",
 
+            "order": "16"
 
+          },
 
+          {
 
+            "name": "鄉村風",
 
+            "image": "/assets/images/photo/style/rustuc.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/rustuc-style/",
 
+            "order": "10"
 
+          },
 
+          {
 
+            "name": "混搭風",
 
+            "image": "/assets/images/photo/style/mashup.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/mashup-style/",
 
+            "order": "3"
 
+          },
 
+          {
 
+            "name": "新古典",
 
+            "image": "/assets/images/photo/style/neoclassic.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/neoclassic-style/",
 
+            "order": "7"
 
+          },
 
+          {
 
+            "name": "奢華風",
 
+            "image": "/assets/images/photo/style/luxurious.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/luxurious-style/",
 
+            "order": "12"
 
+          },
 
+          {
 
+            "name": "古典風",
 
+            "image": "/assets/images/photo/style/classical.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/classical-style/",
 
+            "order": "9"
 
+          },
 
+          {
 
+            "name": "異國風",
 
+            "image": "/assets/images/photo/style/exotic.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/exotic-style/",
 
+            "order": "15"
 
+          },
 
+          {
 
+            "name": "禪風",
 
+            "image": "/assets/images/photo/style/zen.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/zen-style/",
 
+            "order": "11"
 
+          },
 
+          {
 
+            "name": "東方風",
 
+            "image": "/assets/images/photo/style/oriental.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/oriental-style/",
 
+            "order": "14"
 
+          },
 
+          {
 
+            "name": "日式風",
 
+            "image": "/assets/images/photo/style/japanese.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/japanese-style/",
 
+            "order": "13"
 
+          },
 
+          {
 
+            "name": "無印風",
 
+            "image": "/assets/images/photo/style/muji.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/muju-style/",
 
+            "order": "8"
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "主要輪播區",
 
-        "id": 1,
 
-        "block": "sec02",
 
+      },
 
+      {
 
+        "tab": "依照空間瀏覽設計",
 
         "data": [
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476266.jpg",
 
-                "link": "https://event.hhh.com.tw/topglory/designer_684.html",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476249.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476396.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17493_1719476348.webp",
 
-                "logo_icon": "glory",
 
-                "index_char_1": "合併戶毛胚宅 紡織工藝承載家族溫度│現代風",
 
-                "index_char_2_1": "聯寬設計",
 
-                "index_char_2_2": "陳見行KEN、王毓婷TING",
 
-                "index_char_2_3": "設計師",
 
-                "id": 17493,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476275.jpg",
 
-                "link": "https://hhh.com.tw/HHH_NEW/designers/index_designerList.php?cid=536",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476271.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476401.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17492_1719476360.webp",
 
-                "logo_icon": "renovation",
 
-                "index_char_1": "挹注簡約風範 描摹柔潤居所│現代風│45坪",
 
-                "index_char_2_1": "苡希創意設計",
 
-                "index_char_2_2": "葉佳奇",
 
-                "index_char_2_3": "設計師",
 
-                "id": 17492,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476285.jpg",
 
-                "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=510&title=%E7%A6%BE%E7%86%99%E5%AE%A4%E5%85%A7%E8%A3%9D%E4%BF%AE%E8%A8%AD%E8%A8%88%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476280.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476418.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17491_1719476368.webp",
 
-                "logo_icon": "designer",
 
-                "index_char_1": "彤霞皓魄│混搭風│16坪",
 
-                "index_char_2_1": "禾熙室內裝修設計",
 
-                "index_char_2_2": "謝張志昇",
 
-                "index_char_2_3": "設計師",
 
-                "id": 17491,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476296.jpg",
 
-                "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=474&title=%E9%9B%8B%E7%AF%89%E7%A9%BA%E9%96%93%E8%A8%AD%E8%A8%88%EF%BC%86%E7%9D%BF%E8%AC%99%E5%AE%A4%E5%85%A7%E8%A3%9D%E4%BF%AE",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476291.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476425.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17490_1719476377.webp",
 
-                "logo_icon": "designer",
 
-                "index_char_1": "清淡暖色木系 圍塑零壓療癒生活場域 │北歐混搭風│38坪",
 
-                "index_char_2_1": "雋築空間設計＆睿謙室內裝修",
 
-                "index_char_2_2": "劉倢妤 Kimico",
 
-                "index_char_2_3": "設計師",
 
-                "id": 17490,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476312.jpg",
 
-                "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=857&title=%E8%8A%AC%E6%A0%BC%E8%A8%AD%E8%A8%88%E5%B7%A5%E7%A8%8B",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476303.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476430.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17489_1719476386.webp",
 
-                "logo_icon": "designer",
 
-                "index_char_1": "波光瀲灩 恬靜悠遠 │簡約風 │36坪",
 
-                "index_char_2_1": "芬格設計工程",
 
-                "index_char_2_2": "林京蔚",
 
-                "index_char_2_3": "設計師",
 
-                "id": 17489,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476329.jpg",
 
-                "link": "https://event.hhh.com.tw/2024-Most-Favorite-Designers/case.php?id=23&title=%E5%A2%83%E5%BA%AD%E5%9C%8B%E9%9A%9B%E8%A8%AD%E8%A8%88",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476319.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476435.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17488_1719476391.webp",
 
-                "logo_icon": "designer",
 
-                "index_char_1": "遇見境式混搭 美式輕奢的優雅步調",
 
-                "index_char_2_1": "境庭國際設計",
 
-                "index_char_2_2": "周靖雅",
 
-                "index_char_2_3": "設計師",
 
-                "id": 17488,
 
-                "alt": ""
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061581.jpg",
 
-                "link": "https://hhh.com.tw/HHH_NEW/columns_detail/7345.php",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061549.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061595.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17497_1720061588.webp",
 
-                "logo_icon": "",
 
-                "index_char_1": "",
 
-                "index_char_2_1": "",
 
-                "index_char_2_2": "",
 
-                "index_char_2_3": "",
 
-                "id": 17497,
 
-                "alt": ""
 
-            }
 
+          {
 
+            "name": "客廳",
 
+            "image": "/assets/images/photo/space/living.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/living-space/",
 
+            "order": "1"
 
+          },
 
+          {
 
+            "name": "廚房",
 
+            "image": "/assets/images/photo/space/kitchen.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/kitchen-space/",
 
+            "order": "4"
 
+          },
 
+          {
 
+            "name": "兒童房",
 
+            "image": "/assets/images/photo/space/children.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/children-space/",
 
+            "order": "9"
 
+          },
 
+          {
 
+            "name": "書房",
 
+            "image": "/assets/images/photo/space/study.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/study-space/",
 
+            "order": "8"
 
+          },
 
+          {
 
+            "name": "餐廳",
 
+            "image": "/assets/images/photo/space/restaurant.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/restaurant-space/",
 
+            "order": "6"
 
+          },
 
+          {
 
+            "name": "玄關",
 
+            "image": "/assets/images/photo/space/entrance.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/entrance-space/",
 
+            "order": "2"
 
+          },
 
+          {
 
+            "name": "臥室",
 
+            "image": "/assets/images/photo/space/bedroom.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/bedroom-space/",
 
+            "order": "3"
 
+          },
 
+          {
 
+            "name": "更衣室",
 
+            "image": "/assets/images/photo/space/locker.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/locker-space/",
 
+            "order": "7"
 
+          },
 
+          {
 
+            "name": "陽台",
 
+            "image": "/assets/images/photo/space/balcony.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/balcony-space/",
 
+            "order": "13"
 
+          },
 
+          {
 
+            "name": "客房",
 
+            "image": "/assets/images/photo/space/guest.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/guest-space/",
 
+            "order": "20"
 
+          },
 
+          {
 
+            "name": "衛浴",
 
+            "image": "/assets/images/photo/space/bathroom.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/bathroom-space/",
 
+            "order": "5"
 
+          },
 
+          {
 
+            "name": "會客室",
 
+            "image": "/assets/images/photo/space/reception.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/reception-space/",
 
+            "order": "23"
 
+          },
 
+          {
 
+            "name": "辦公空間",
 
+            "image": "/assets/images/photo/space/office.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/office-space/",
 
+            "order": "18"
 
+          },
 
+          {
 
+            "name": "戶外空間",
 
+            "image": "/assets/images/photo/space/outdoor.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/outdoor-space/",
 
+            "order": "24"
 
+          },
 
+          {
 
+            "name": "商用空間",
 
+            "image": "/assets/images/photo/space/commercial.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/commercial-space/",
 
+            "order": "21"
 
+          },
 
+          {
 
+            "name": "衣帽間",
 
+            "image": "/assets/images/photo/space/cloakroom.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/cloakroom-space/",
 
+            "order": "16"
 
+          },
 
+          {
 
+            "name": "吧檯/吧台",
 
+            "image": "/assets/images/photo/space/bar.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/bar-space/",
 
+            "order": "14"
 
+          },
 
+          {
 
+            "name": "多功能室",
 
+            "image": "/assets/images/photo/space/multi.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/multi-space/",
 
+            "order": "17"
 
+          },
 
+          {
 
+            "name": "和室",
 
+            "image": "/assets/images/photo/space/japanese.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/japanese-space/",
 
+            "order": "11"
 
+          },
 
+          {
 
+            "name": "中島",
 
+            "image": "/assets/images/photo/space/nakajima.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/nakajima-space/",
 
+            "order": "10"
 
+          },
 
+          {
 
+            "name": "泳池",
 
+            "image": "/assets/images/photo/space/swimming.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/swimming-space/",
 
+            "order": "19"
 
+          },
 
+          {
 
+            "name": "廊道",
 
+            "image": "/assets/images/photo/space/corridor.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/corridor-space/",
 
+            "order": "22"
 
+          },
 
+          {
 
+            "name": "工作室",
 
+            "image": "/assets/images/photo/space/studio.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/studio-space/",
 
+            "order": "15"
 
+          },
 
+          {
 
+            "name": "神明廳",
 
+            "image": "/assets/images/photo/space/shenming.jpg",
 
+            "alt": "",
 
+            "url": "/photos/lists/shenming-space/",
 
+            "order": "12"
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "首頁photo頁",
 
-        "id": 2,
 
-        "block": "photo",
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "活動頁banners區",
 
+    "id": 3,
 
+    "block": "sec08",
 
+    "data": [
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719560597.jpg",
 
+        "link": "https://hhh.style/hh25U7erv",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719560994.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719561012.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719560604.jpg",
 
+        "id": 17338,
 
+        "alt": "幸福輕裝修"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149857.jpg",
 
+        "link": "https://hhh.com.tw/brands/lists/",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149847.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149875.webp",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149866.webp",
 
+        "id": 17015,
 
+        "alt": "品牌館"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333253.jpg",
 
+        "link": "https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE",
 
+        "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333241.jpg",
 
+        "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333261.jpg",
 
+        "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333257.jpg",
 
+        "id": 17398,
 
+        "alt": ""
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "主題企劃區",
 
+    "id": 4,
 
+    "block": "sec06",
 
+    "data": [
 
+      {
 
+        "tab": "phone",
 
         "data": [
 
-            {
 
-                "tab": "依照風格瀏覽設計",
 
-                "data": [
 
-                    {
 
-                        "name": "北歐風",
 
-                        "image": "/assets/images/photo/style/nordic.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/nordic-style/",
 
-                        "order": "2"
 
-                    },
 
-                    {
 
-                        "name": "現代風",
 
-                        "image": "/assets/images/photo/style/modern.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/modern-style/",
 
-                        "order": "1"
 
-                    },
 
-                    {
 
-                        "name": "工業風",
 
-                        "image": "/assets/images/photo/style/industry.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/industry-style/",
 
-                        "order": "6"
 
-                    },
 
-                    {
 
-                        "name": "美式風",
 
-                        "image": "/assets/images/photo/style/american.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/american-style/",
 
-                        "order": "4"
 
-                    },
 
-                    {
 
-                        "name": "休閒多元",
 
-                        "image": "/assets/images/photo/style/leisure.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/leisure-style/",
 
-                        "order": "5"
 
-                    },
 
-                    {
 
-                        "name": "前衛風",
 
-                        "image": "/assets/images/photo/style/vanguard.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/vanguard-style/",
 
-                        "order": "16"
 
-                    },
 
-                    {
 
-                        "name": "鄉村風",
 
-                        "image": "/assets/images/photo/style/rustuc.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/rustuc-style/",
 
-                        "order": "10"
 
-                    },
 
-                    {
 
-                        "name": "混搭風",
 
-                        "image": "/assets/images/photo/style/mashup.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/mashup-style/",
 
-                        "order": "3"
 
-                    },
 
-                    {
 
-                        "name": "新古典",
 
-                        "image": "/assets/images/photo/style/neoclassic.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/neoclassic-style/",
 
-                        "order": "7"
 
-                    },
 
-                    {
 
-                        "name": "奢華風",
 
-                        "image": "/assets/images/photo/style/luxurious.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/luxurious-style/",
 
-                        "order": "12"
 
-                    },
 
-                    {
 
-                        "name": "古典風",
 
-                        "image": "/assets/images/photo/style/classical.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/classical-style/",
 
-                        "order": "9"
 
-                    },
 
-                    {
 
-                        "name": "異國風",
 
-                        "image": "/assets/images/photo/style/exotic.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/exotic-style/",
 
-                        "order": "15"
 
-                    },
 
-                    {
 
-                        "name": "禪風",
 
-                        "image": "/assets/images/photo/style/zen.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/zen-style/",
 
-                        "order": "11"
 
-                    },
 
-                    {
 
-                        "name": "東方風",
 
-                        "image": "/assets/images/photo/style/oriental.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/oriental-style/",
 
-                        "order": "14"
 
-                    },
 
-                    {
 
-                        "name": "日式風",
 
-                        "image": "/assets/images/photo/style/japanese.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/japanese-style/",
 
-                        "order": "13"
 
-                    },
 
-                    {
 
-                        "name": "無印風",
 
-                        "image": "/assets/images/photo/style/muji.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/muju-style/",
 
-                        "order": "8"
 
-                    }
 
-                ]
 
-            },
 
-            {
 
-                "tab": "依照空間瀏覽設計",
 
-                "data": [
 
-                    {
 
-                        "name": "客廳",
 
-                        "image": "/assets/images/photo/space/living.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/living-space/",
 
-                        "order": "1"
 
-                    },
 
-                    {
 
-                        "name": "廚房",
 
-                        "image": "/assets/images/photo/space/kitchen.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/kitchen-space/",
 
-                        "order": "4"
 
-                    },
 
-                    {
 
-                        "name": "兒童房",
 
-                        "image": "/assets/images/photo/space/children.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/children-space/",
 
-                        "order": "9"
 
-                    },
 
-                    {
 
-                        "name": "書房",
 
-                        "image": "/assets/images/photo/space/study.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/study-space/",
 
-                        "order": "8"
 
-                    },
 
-                    {
 
-                        "name": "餐廳",
 
-                        "image": "/assets/images/photo/space/restaurant.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/restaurant-space/",
 
-                        "order": "6"
 
-                    },
 
-                    {
 
-                        "name": "玄關",
 
-                        "image": "/assets/images/photo/space/entrance.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/entrance-space/",
 
-                        "order": "2"
 
-                    },
 
-                    {
 
-                        "name": "臥室",
 
-                        "image": "/assets/images/photo/space/bedroom.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/bedroom-space/",
 
-                        "order": "3"
 
-                    },
 
-                    {
 
-                        "name": "更衣室",
 
-                        "image": "/assets/images/photo/space/locker.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/locker-space/",
 
-                        "order": "7"
 
-                    },
 
-                    {
 
-                        "name": "陽台",
 
-                        "image": "/assets/images/photo/space/balcony.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/balcony-space/",
 
-                        "order": "13"
 
-                    },
 
-                    {
 
-                        "name": "客房",
 
-                        "image": "/assets/images/photo/space/guest.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/guest-space/",
 
-                        "order": "20"
 
-                    },
 
-                    {
 
-                        "name": "衛浴",
 
-                        "image": "/assets/images/photo/space/bathroom.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/bathroom-space/",
 
-                        "order": "5"
 
-                    },
 
-                    {
 
-                        "name": "會客室",
 
-                        "image": "/assets/images/photo/space/reception.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/reception-space/",
 
-                        "order": "23"
 
-                    },
 
-                    {
 
-                        "name": "辦公空間",
 
-                        "image": "/assets/images/photo/space/office.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/office-space/",
 
-                        "order": "18"
 
-                    },
 
-                    {
 
-                        "name": "戶外空間",
 
-                        "image": "/assets/images/photo/space/outdoor.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/outdoor-space/",
 
-                        "order": "24"
 
-                    },
 
-                    {
 
-                        "name": "商用空間",
 
-                        "image": "/assets/images/photo/space/commercial.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/commercial-space/",
 
-                        "order": "21"
 
-                    },
 
-                    {
 
-                        "name": "衣帽間",
 
-                        "image": "/assets/images/photo/space/cloakroom.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/cloakroom-space/",
 
-                        "order": "16"
 
-                    },
 
-                    {
 
-                        "name": "吧檯/吧台",
 
-                        "image": "/assets/images/photo/space/bar.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/bar-space/",
 
-                        "order": "14"
 
-                    },
 
-                    {
 
-                        "name": "多功能室",
 
-                        "image": "/assets/images/photo/space/multi.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/multi-space/",
 
-                        "order": "17"
 
-                    },
 
-                    {
 
-                        "name": "和室",
 
-                        "image": "/assets/images/photo/space/japanese.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/japanese-space/",
 
-                        "order": "11"
 
-                    },
 
-                    {
 
-                        "name": "中島",
 
-                        "image": "/assets/images/photo/space/nakajima.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/nakajima-space/",
 
-                        "order": "10"
 
-                    },
 
-                    {
 
-                        "name": "泳池",
 
-                        "image": "/assets/images/photo/space/swimming.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/swimming-space/",
 
-                        "order": "19"
 
-                    },
 
-                    {
 
-                        "name": "廊道",
 
-                        "image": "/assets/images/photo/space/corridor.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/corridor-space/",
 
-                        "order": "22"
 
-                    },
 
-                    {
 
-                        "name": "工作室",
 
-                        "image": "/assets/images/photo/space/studio.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/studio-space/",
 
-                        "order": "15"
 
-                    },
 
-                    {
 
-                        "name": "神明廳",
 
-                        "image": "/assets/images/photo/space/shenming.jpg",
 
-                        "alt": "",
 
-                        "url": "/photos/lists/shenming-space/",
 
-                        "order": "12"
 
-                    }
 
-                ]
 
-            }
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_427_20240513171850.jpg",
 
+            "link": "/topic/detail/427/",
 
+            "title": "活用畸零空間 坪效開外掛！"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_426_20240306100956.jpg",
 
+            "link": "/topic/detail/426/",
 
+            "title": "超有感裝潢省錢術 精控你的荷包"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_425_20240103171342.jpg",
 
+            "link": "/topic/detail/425/",
 
+            "title": "領域展開！用彈性隔間讓家更靈活"
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "活動頁banners區",
 
-        "id": 3,
 
-        "block": "sec08",
 
+      },
 
+      {
 
+        "tab": "web",
 
         "data": [
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719560597.jpg",
 
-                "link": "https://hhh.style/hh25U7erv",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719560994.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719561012.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17338_1719560604.jpg",
 
-                "id": 17338,
 
-                "alt": "幸福輕裝修"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149857.jpg",
 
-                "link": "https://hhh.com.tw/brands/lists/",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149847.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149875.webp",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17015_1691149866.webp",
 
-                "id": 17015,
 
-                "alt": "品牌館"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333253.jpg",
 
-                "link": "https://homeinspection.leju.com.tw/?utm_source=Google&utm_medium=Keywords&utm_campaign=homeinspection&gad_source=1&gclid=CjwKCAjww_iwBhApEiwAuG6ccOw8p8Bj3fcBK_LLSEsXZzXZwdytgpDI_Tb4BQqUi-Go_NVWQS_1shoCKWgQAvD_BwE",
 
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333241.jpg",
 
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333261.jpg",
 
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_17398_1713333257.jpg",
 
-                "id": 17398,
 
-                "alt": ""
 
-            }
 
+          {
 
+            "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_7562_20231218153604.jpg",
 
+            "link": "/columns/detail/7562",
 
+            "title": "讓小宅「空間最大化」！活用空隙的4大收納技巧"
 
+          },
 
+          {
 
+            "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_6763_20220818232508.jpg",
 
+            "link": "/columns/detail/6763",
 
+            "title": "收納無死角！3個可以好好利用的畸零角落"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17267_20240423145859.jpg",
 
+            "link": "/cases/detail/d/17267",
 
+            "title": "轉場。入境│現代侘寂風│18坪"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17302_20240502154031.jpg",
 
+            "link": "/cases/detail/d/17302",
 
+            "title": "Everyday Object│北歐風│18坪"
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "主題企劃區",
 
-        "id": 4,
 
-        "block": "sec06",
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "推薦設計師",
 
+    "id": 5,
 
+    "block": "designers",
 
+    "data": [
 
+      {
 
+        "imgUrl": "https://m.hhh.com.tw/upload/_hdesigner/img_path_997_20240628101748.jpg",
 
+        "name": "台灣綠傢俱",
 
+        "designers_name": "台灣綠傢俱",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=997"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_951_20230726145429.jpg",
 
+        "name": "大囍室內設計",
 
+        "designers_name": "林哲弘",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=951"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_946_20230815151822.jpg",
 
+        "name": "相形式所設計",
 
+        "designers_name": "相形式所設計團隊",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=946"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_945_20230720090851.jpg",
 
+        "name": "敘境空間設計",
 
+        "designers_name": "莊云嫻、戴文勝",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=945"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_939_20230703172522.jpg",
 
+        "name": "鐵木設計",
 
+        "designers_name": "陳穎昌",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=939"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_938_20231129174538.jpg",
 
+        "name": "見文知桓聯合設計",
 
+        "designers_name": "王健桓",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=938"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_829_20220818143352.jpg",
 
+        "name": "水源清設計",
 
+        "designers_name": "林一清",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=829"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_936_20230626190915.jpg",
 
+        "name": "湘頡室內設計",
 
+        "designers_name": "洪志偉",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=936"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_928_20230726174444.jpg",
 
+        "name": "雅堂室內裝修設計",
 
+        "designers_name": "許雅閔",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=928"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_925_20230526105634.jpg",
 
+        "name": "艾嘉室內裝修設計",
 
+        "designers_name": "魏信忠",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=925"
 
+      },
 
+      {
 
+        "imgUrl": "https://m.hhh.com.tw/upload/_hdesigner/img_path_996_20240612104749.jpg",
 
+        "name": "灰色大門設計",
 
+        "designers_name": "謝嘉玲",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=996"
 
+      },
 
+      {
 
+        "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_857_20221125113518.jpg",
 
+        "name": "芬格設計工程",
 
+        "designers_name": "林京蔚",
 
+        "link": "/HHH_NEW/designers/index_designerList.php?cid=857"
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章",
 
+    "id": 6,
 
+    "block": "sec03",
 
+    "data": [
 
+      {
 
+        "tab": "編輯精選",
 
         "data": [
 
-            {
 
-                "tab": "phone",
 
-                "data": [
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_427_20240513171850.jpg",
 
-                        "link": "/topic/detail/427/",
 
-                        "title": "活用畸零空間 坪效開外掛！"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_426_20240306100956.jpg",
 
-                        "link": "/topic/detail/426/",
 
-                        "title": "超有感裝潢省錢術 精控你的荷包"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_htopic/logo_425_20240103171342.jpg",
 
-                        "link": "/topic/detail/425/",
 
-                        "title": "領域展開！用彈性隔間讓家更靈活"
 
-                    }
 
-                ]
 
-            },
 
-            {
 
-                "tab": "web",
 
-                "data": [
 
-                    {
 
-                        "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_7562_20231218153604.jpg",
 
-                        "link": "/columns/detail/7562",
 
-                        "title": "讓小宅「空間最大化」！活用空隙的4大收納技巧"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://cloud.hhh.com.tw/upload/_hcolumn/clogo_6763_20220818232508.jpg",
 
-                        "link": "/columns/detail/6763",
 
-                        "title": "收納無死角！3個可以好好利用的畸零角落"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17267_20240423145859.jpg",
 
-                        "link": "/cases/detail/d/17267",
 
-                        "title": "轉場。入境│現代侘寂風│18坪"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17302_20240502154031.jpg",
 
-                        "link": "/cases/detail/d/17302",
 
-                        "title": "Everyday Object│北歐風│18坪"
 
-                    }
 
-                ]
 
-            }
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7839_20240704150540.jpg",
 
+            "link": "/columns/detail/7839/",
 
+            "title": "熱「暑」了！鐵皮屋夏日降溫新對策 水性隔熱浪板漆新上市",
 
+            "ctag": [
 
+              "鐵皮屋",
 
+              "塗料",
 
+              "降溫",
 
+              "油漆",
 
+              "得利"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7838_20240704143717.jpg",
 
+            "link": "/columns/detail/7838/",
 
+            "title": "【風水特輯】小暑到！8大禁忌一次看",
 
+            "ctag": [
 
+              "風水",
 
+              "節氣",
 
+              "小暑",
 
+              "禁忌"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7837_20240704151441.jpg",
 
+            "link": "/columns/detail/7837/",
 
+            "title": "翻轉廚房新時代！台灣櫻花推SAKURA AI KITCHEN，開啟廚房智高點",
 
+            "ctag": [
 
+              "品牌新訊",
 
+              "品牌好物",
 
+              "廚房設備",
 
+              "廚房電器",
 
+              "廚房設計",
 
+              "廚房空間"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7836_20240703155439.jpg",
 
+            "link": "/columns/detail/7836/",
 
+            "title": "Firtz Hansen 2024 年度限定版本 Swan 椅即將抵台！",
 
+            "ctag": [
 
+              "Arne",
 
+              "Jacobsen",
 
+              "Swan",
 
+              "Egg",
 
+              "Firtz",
 
+              "Hansen",
 
+              "家具",
 
+              "單椅"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7835_20240703143212.jpg",
 
+            "link": "/columns/detail/7835/",
 
+            "title": "【好宅特輯】柔光兜旋遊走 映現淡柔雋美家景",
 
+            "ctag": [
 
+              "好宅特輯",
 
+              "現代風",
 
+              "老屋翻新",
 
+              "今城室內裝修設計"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index04_799.jpg",
 
+            "link": "/columns/detail/7345/",
 
+            "title": "那種冷氣不能洗？清洗後為什會滴水？吊隱式冷氣何時洗？專業師傅幫你解答",
 
+            "ctag": [
 
+              "冷氣",
 
+              "清洗"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7833_20240621145534.jpg",
 
+            "link": "/columns/detail/7833/",
 
+            "title": "沉浸在浪漫微醺氛圍中！巴黎4個多巴胺行程",
 
+            "ctag": [
 
+              "奧運",
 
+              "巴黎",
 
+              "旅遊",
 
+              "旅宿",
 
+              "飯店",
 
+              "住宿",
 
+              "行程"
 
+            ]
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7832_20240620113156.jpg",
 
+            "link": "/columns/detail/7832/",
 
+            "title": "房東怕遇到惡房客，在租賃契約中寫明個別磋商條款，這樣合法嗎？",
 
+            "ctag": [
 
+              "租屋",
 
+              "房東",
 
+              "房客",
 
+              "法律",
 
+              "契約",
 
+              "租賃",
 
+              "精選好書"
 
+            ]
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "推薦設計師",
 
-        "id": 5,
 
-        "block": "designers",
 
+      },
 
+      {
 
+        "tab": "最夯設計",
 
         "data": [
 
-            {
 
-                "imgUrl": "https://m.hhh.com.tw/upload/_hdesigner/img_path_997_20240628101748.jpg",
 
-                "name": "台灣綠傢俱",
 
-                "designers_name": "台灣綠傢俱",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=997"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_951_20230726145429.jpg",
 
-                "name": "大囍室內設計",
 
-                "designers_name": "林哲弘",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=951"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_946_20230815151822.jpg",
 
-                "name": "相形式所設計",
 
-                "designers_name": "相形式所設計團隊",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=946"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_945_20230720090851.jpg",
 
-                "name": "敘境空間設計",
 
-                "designers_name": "莊云嫻、戴文勝",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=945"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_939_20230703172522.jpg",
 
-                "name": "鐵木設計",
 
-                "designers_name": "陳穎昌",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=939"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_938_20231129174538.jpg",
 
-                "name": "見文知桓聯合設計",
 
-                "designers_name": "王健桓",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=938"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_829_20220818143352.jpg",
 
-                "name": "水源清設計",
 
-                "designers_name": "林一清",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=829"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_936_20230626190915.jpg",
 
-                "name": "湘頡室內設計",
 
-                "designers_name": "洪志偉",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=936"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_928_20230726174444.jpg",
 
-                "name": "雅堂室內裝修設計",
 
-                "designers_name": "許雅閔",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=928"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_925_20230526105634.jpg",
 
-                "name": "艾嘉室內裝修設計",
 
-                "designers_name": "魏信忠",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=925"
 
-            },
 
-            {
 
-                "imgUrl": "https://m.hhh.com.tw/upload/_hdesigner/img_path_996_20240612104749.jpg",
 
-                "name": "灰色大門設計",
 
-                "designers_name": "謝嘉玲",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=996"
 
-            },
 
-            {
 
-                "imgUrl": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_857_20221125113518.jpg",
 
-                "name": "芬格設計工程",
 
-                "designers_name": "林京蔚",
 
-                "link": "/HHH_NEW/designers/index_designerList.php?cid=857"
 
-            }
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17461_20240704111548.jpg",
 
+            "link": "/cases/detail/17461/",
 
+            "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_984_20240222141805.jpg",
 
+            "title": "餘燼 Ember|南洋風|40坪",
 
+            "ctag": [
 
+              "異國風",
 
+              "南洋風",
 
+              "標準格局",
 
+              "老屋翻新"
 
+            ],
 
+            "title_designer": "森鼎設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=984"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17460_20240704135630.jpg",
 
+            "link": "/cases/detail/17460/",
 
+            "img_designer": "https://m.hhh.com.tw/upload/_hdesigner/img_path_996_20240612104749.jpg",
 
+            "title": "仰德之間│東方風│45坪",
 
+            "ctag": [
 
+              "東方風",
 
+              "大坪數",
 
+              "新成屋"
 
+            ],
 
+            "title_designer": "灰色大門設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=996"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17459_20240704145426.jpg",
 
+            "link": "/cases/detail/17459/",
 
+            "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_939_20230703172522.jpg",
 
+            "title": "舒適寫意的溫潤宅│混搭風│45坪",
 
+            "ctag": [
 
+              "混搭風",
 
+              "別墅/透天",
 
+              "新成屋"
 
+            ],
 
+            "title_designer": "鐵木設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=939"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17458_20240704102314.jpg",
 
+            "link": "/cases/detail/17458/",
 
+            "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_904_20230328114444.jpg",
 
+            "title": "時光漫步 靜享安居|輕奢風|64坪",
 
+            "ctag": [
 
+              "現代風",
 
+              "輕奢風",
 
+              "標準格局",
 
+              "新成屋"
 
+            ],
 
+            "title_designer": "永達空間設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=904"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17457_20240703144511.jpg",
 
+            "link": "/cases/detail/17457/",
 
+            "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_929_20230607113933.jpg",
 
+            "title": "北歐簡約溫潤敞亮質居│18坪",
 
+            "ctag": [
 
+              "北歐風",
 
+              "簡約風",
 
+              "小坪數",
 
+              "新成屋"
 
+            ],
 
+            "title_designer": "丰禾空間設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=929"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17456_20240703173514.jpg",
 
+            "link": "/cases/detail/17456/",
 
+            "img_designer": "https://cloud.hhh.com.tw/gs/designer/110_designer342_00.jpg",
 
+            "title": "精工淬鍊品質 中古屋好宅變豪宅",
 
+            "ctag": [
 
+              "現代風",
 
+              "大坪數",
 
+              "中古屋"
 
+            ],
 
+            "title_designer": "IS國際設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=293"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17455_20240703115609.jpg",
 
+            "link": "/cases/detail/17455/",
 
+            "img_designer": "https://m.hhh.com.tw/upload/_hdesigner/img_path_998_20240703134342.jpg",
 
+            "title": "輕盈溫潤 清新小品|北歐風|25坪",
 
+            "ctag": [
 
+              "北歐風",
 
+              "標準格局",
 
+              "新成屋"
 
+            ],
 
+            "title_designer": "沐云設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=998"
 
+          },
 
+          {
 
+            "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17454_20240703114039.jpg",
 
+            "link": "/cases/detail/17454/",
 
+            "img_designer": "https://m.hhh.com.tw/upload/_hdesigner/img_path_998_20240703134342.jpg",
 
+            "title": "框景入室 光感靜寓|簡約都會風|30坪",
 
+            "ctag": [
 
+              "其他",
 
+              "簡約都會",
 
+              "標準格局",
 
+              "新成屋"
 
+            ],
 
+            "title_designer": "沐云設計",
 
+            "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=998"
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "tab區塊-最夯設計, 影音實錄, 專欄文章",
 
-        "id": 6,
 
-        "block": "sec03",
 
+      },
 
+      {
 
+        "tab": "最新影音實錄",
 
         "data": [
 
-            {
 
-                "tab": "編輯精選",
 
-                "data": [
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7839_20240704150540.jpg",
 
-                        "link": "/columns/detail/7839/",
 
-                        "title": "熱「暑」了！鐵皮屋夏日降溫新對策 水性隔熱浪板漆新上市",
 
-                        "ctag": [
 
-                            "鐵皮屋",
 
-                            "塗料",
 
-                            "降溫",
 
-                            "油漆",
 
-                            "得利"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7838_20240704143717.jpg",
 
-                        "link": "/columns/detail/7838/",
 
-                        "title": "【風水特輯】小暑到！8大禁忌一次看",
 
-                        "ctag": [
 
-                            "風水",
 
-                            "節氣",
 
-                            "小暑",
 
-                            "禁忌"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7837_20240704151441.jpg",
 
-                        "link": "/columns/detail/7837/",
 
-                        "title": "翻轉廚房新時代！台灣櫻花推SAKURA AI KITCHEN，開啟廚房智高點",
 
-                        "ctag": [
 
-                            "品牌新訊",
 
-                            "品牌好物",
 
-                            "廚房設備",
 
-                            "廚房電器",
 
-                            "廚房設計",
 
-                            "廚房空間"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7836_20240703155439.jpg",
 
-                        "link": "/columns/detail/7836/",
 
-                        "title": "Firtz Hansen 2024 年度限定版本 Swan 椅即將抵台！",
 
-                        "ctag": [
 
-                            "Arne",
 
-                            "Jacobsen",
 
-                            "Swan",
 
-                            "Egg",
 
-                            "Firtz",
 
-                            "Hansen",
 
-                            "家具",
 
-                            "單椅"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7835_20240703143212.jpg",
 
-                        "link": "/columns/detail/7835/",
 
-                        "title": "【好宅特輯】柔光兜旋遊走 映現淡柔雋美家景",
 
-                        "ctag": [
 
-                            "好宅特輯",
 
-                            "現代風",
 
-                            "老屋翻新",
 
-                            "今城室內裝修設計"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point-index04_799.jpg",
 
-                        "link": "/columns/detail/7345/",
 
-                        "title": "那種冷氣不能洗？清洗後為什會滴水？吊隱式冷氣何時洗？專業師傅幫你解答",
 
-                        "ctag": [
 
-                            "冷氣",
 
-                            "清洗"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7833_20240621145534.jpg",
 
-                        "link": "/columns/detail/7833/",
 
-                        "title": "沉浸在浪漫微醺氛圍中！巴黎4個多巴胺行程",
 
-                        "ctag": [
 
-                            "奧運",
 
-                            "巴黎",
 
-                            "旅遊",
 
-                            "旅宿",
 
-                            "飯店",
 
-                            "住宿",
 
-                            "行程"
 
-                        ]
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcolumn/clogo_7832_20240620113156.jpg",
 
-                        "link": "/columns/detail/7832/",
 
-                        "title": "房東怕遇到惡房客，在租賃契約中寫明個別磋商條款，這樣合法嗎？",
 
-                        "ctag": [
 
-                            "租屋",
 
-                            "房東",
 
-                            "房客",
 
-                            "法律",
 
-                            "契約",
 
-                            "租賃",
 
-                            "精選好書"
 
-                        ]
 
-                    }
 
-                ]
 
-            },
 
-            {
 
-                "tab": "最夯設計",
 
-                "data": [
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17461_20240704111548.jpg",
 
-                        "link": "/cases/detail/17461/",
 
-                        "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_984_20240222141805.jpg",
 
-                        "title": "餘燼 Ember|南洋風|40坪",
 
-                        "ctag": [
 
-                            "異國風",
 
-                            "南洋風",
 
-                            "標準格局",
 
-                            "老屋翻新"
 
-                        ],
 
-                        "title_designer": "森鼎設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=984"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17460_20240704135630.jpg",
 
-                        "link": "/cases/detail/17460/",
 
-                        "img_designer": "https://m.hhh.com.tw/upload/_hdesigner/img_path_996_20240612104749.jpg",
 
-                        "title": "仰德之間│東方風│45坪",
 
-                        "ctag": [
 
-                            "東方風",
 
-                            "大坪數",
 
-                            "新成屋"
 
-                        ],
 
-                        "title_designer": "灰色大門設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=996"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17459_20240704145426.jpg",
 
-                        "link": "/cases/detail/17459/",
 
-                        "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_939_20230703172522.jpg",
 
-                        "title": "舒適寫意的溫潤宅│混搭風│45坪",
 
-                        "ctag": [
 
-                            "混搭風",
 
-                            "別墅/透天",
 
-                            "新成屋"
 
-                        ],
 
-                        "title_designer": "鐵木設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=939"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17458_20240704102314.jpg",
 
-                        "link": "/cases/detail/17458/",
 
-                        "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_904_20230328114444.jpg",
 
-                        "title": "時光漫步 靜享安居|輕奢風|64坪",
 
-                        "ctag": [
 
-                            "現代風",
 
-                            "輕奢風",
 
-                            "標準格局",
 
-                            "新成屋"
 
-                        ],
 
-                        "title_designer": "永達空間設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=904"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17457_20240703144511.jpg",
 
-                        "link": "/cases/detail/17457/",
 
-                        "img_designer": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_929_20230607113933.jpg",
 
-                        "title": "北歐簡約溫潤敞亮質居│18坪",
 
-                        "ctag": [
 
-                            "北歐風",
 
-                            "簡約風",
 
-                            "小坪數",
 
-                            "新成屋"
 
-                        ],
 
-                        "title_designer": "丰禾空間設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=929"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17456_20240703173514.jpg",
 
-                        "link": "/cases/detail/17456/",
 
-                        "img_designer": "https://cloud.hhh.com.tw/gs/designer/110_designer342_00.jpg",
 
-                        "title": "精工淬鍊品質 中古屋好宅變豪宅",
 
-                        "ctag": [
 
-                            "現代風",
 
-                            "大坪數",
 
-                            "中古屋"
 
-                        ],
 
-                        "title_designer": "IS國際設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=293"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17455_20240703115609.jpg",
 
-                        "link": "/cases/detail/17455/",
 
-                        "img_designer": "https://m.hhh.com.tw/upload/_hdesigner/img_path_998_20240703134342.jpg",
 
-                        "title": "輕盈溫潤 清新小品|北歐風|25坪",
 
-                        "ctag": [
 
-                            "北歐風",
 
-                            "標準格局",
 
-                            "新成屋"
 
-                        ],
 
-                        "title_designer": "沐云設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=998"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img/name_17454_20240703114039.jpg",
 
-                        "link": "/cases/detail/17454/",
 
-                        "img_designer": "https://m.hhh.com.tw/upload/_hdesigner/img_path_998_20240703134342.jpg",
 
-                        "title": "框景入室 光感靜寓|簡約都會風|30坪",
 
-                        "ctag": [
 
-                            "其他",
 
-                            "簡約都會",
 
-                            "標準格局",
 
-                            "新成屋"
 
-                        ],
 
-                        "title_designer": "沐云設計",
 
-                        "link_designer": "/HHH_NEW/designers/index_designerList.php?cid=998"
 
-                    }
 
-                ]
 
-            },
 
-            {
 
-                "tab": "最新影音實錄",
 
-                "data": [
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/W1a1nZgqxYM/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=W1a1nZgqxYM",
 
-                        "description": "舊書房ＯＵＴ！穿透設計打開創意思維！ 設計狂小姐再以剛柔美學，勾勒女強人的溫柔面！！"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/YvemT2EJmas/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=YvemT2EJmas",
 
-                        "description": "圓心式＋教堂式，成功改造昏暗中古屋！！ 一眼透視全屋，主臥就像睡在Ｗ Hotel！?"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/REJpJPtV9Ms/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=REJpJPtV9Ms",
 
-                        "description": "一人住怎麼規劃？？超大更衣間、超大尺床鋪！夢幻透明閨房，實現躺床即追劇的夢想！"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/pjNUSBkUC4g/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=pjNUSBkUC4g",
 
-                        "description": "零落差零追加，甚至比預期還早完工！來自屋主的超真實心得！"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/ExuEf9v2qQs/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=ExuEf9v2qQs",
 
-                        "description": "為什麼她深受醫師、工程師喜愛？ 竟是這個「豐田式」裝潢管理？開始到驗收靠一表就完成！？"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/oJeHI9oPlFY/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=oJeHI9oPlFY",
 
-                        "description": "找不到人維修！？原來水電養成這麼難！？ 你都怎麼挑師傅，巷口的水電師真的好嗎？｜【沒有山姆的聊天室】Ep.11"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/gHaU7THEl14/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=gHaU7THEl14",
 
-                        "description": "後悔沒早點整修！！ 居住30年後才重新裝修，竟然從歪斜格局多出1房1衛！？"
 
-                    },
 
-                    {
 
-                        "imgUrl": "https://img.youtube.com/vi/s0gVL7mR_ug/hqdefault.jpg",
 
-                        "link": "https://www.youtube.com/watch?v=s0gVL7mR_ug",
 
-                        "description": "這樣施作竟然只花四分之一時間？省時等於省錢！系統櫃選對國家才能防震防焰又防潮！？"
 
-                    }
 
-                ]
 
-            }
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/W1a1nZgqxYM/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=W1a1nZgqxYM",
 
+            "description": "舊書房ＯＵＴ！穿透設計打開創意思維！ 設計狂小姐再以剛柔美學，勾勒女強人的溫柔面！！"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/YvemT2EJmas/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=YvemT2EJmas",
 
+            "description": "圓心式＋教堂式，成功改造昏暗中古屋！！ 一眼透視全屋，主臥就像睡在Ｗ Hotel！?"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/REJpJPtV9Ms/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=REJpJPtV9Ms",
 
+            "description": "一人住怎麼規劃？？超大更衣間、超大尺床鋪！夢幻透明閨房，實現躺床即追劇的夢想！"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/pjNUSBkUC4g/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=pjNUSBkUC4g",
 
+            "description": "零落差零追加，甚至比預期還早完工！來自屋主的超真實心得！"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/ExuEf9v2qQs/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=ExuEf9v2qQs",
 
+            "description": "為什麼她深受醫師、工程師喜愛？ 竟是這個「豐田式」裝潢管理？開始到驗收靠一表就完成！？"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/oJeHI9oPlFY/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=oJeHI9oPlFY",
 
+            "description": "找不到人維修！？原來水電養成這麼難！？ 你都怎麼挑師傅，巷口的水電師真的好嗎？｜【沒有山姆的聊天室】Ep.11"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/gHaU7THEl14/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=gHaU7THEl14",
 
+            "description": "後悔沒早點整修！！ 居住30年後才重新裝修，竟然從歪斜格局多出1房1衛！？"
 
+          },
 
+          {
 
+            "imgUrl": "https://img.youtube.com/vi/s0gVL7mR_ug/hqdefault.jpg",
 
+            "link": "https://www.youtube.com/watch?v=s0gVL7mR_ug",
 
+            "description": "這樣施作竟然只花四分之一時間？省時等於省錢！系統櫃選對國家才能防震防焰又防潮！？"
 
+          }
 
         ]
 
-    },
 
-    {
 
-        "_comment": "加好物商品",
 
-        "id": 7,
 
-        "block": "shop_hhh",
 
-        "data": [
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17268_1706772328.jpg",
 
-                "title": "CERIALE 茶几",
 
-                "link": "https://hhh.style/hh12aeffB"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17269_1706772957.jpg",
 
-                "title": "BOUHET 餐椅",
 
-                "link": "https://hhh.style/hh12Pqyr7"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17278_1706773479.jpg",
 
-                "title": "WINGS 茶几",
 
-                "link": "https://hhh.style/hh12yFaBu"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17279_1706773592.jpg",
 
-                "title": "DISO 圓邊几",
 
-                "link": "https://hhh.style/hh12Pvzb7"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17280_1706773721.jpg",
 
-                "title": "LECCE L型實木書桌",
 
-                "link": "https://hhh.style/hh12TaNv7"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17281_1706773854.jpg",
 
-                "title": "KATOL 衣帽架",
 
-                "link": "https://hhh.style/hh12peju6"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17282_1706774254.jpg",
 
-                "title": "SRGURA 床頭櫃",
 
-                "link": "https://hhh.style/hh12rNzjj"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17283_1706774404.jpg",
 
-                "title": "AMBRA 實木延伸餐桌",
 
-                "link": "https://hhh.style/hh12aeRia"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17285_1706774634.jpg",
 
-                "title": "SEREIN 餐椅",
 
-                "link": "https://hhh.style/hh12Z7qAz"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17287_1706774773.jpg",
 
-                "title": "ROME 餐椅",
 
-                "link": "https://hhh.style/hh12WrMVu"
 
-            },
 
-            {
 
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17288_1706775039.jpg",
 
-                "title": "UNIQUE 餐椅",
 
-                "link": "https://hhh.style/hh12Ujiff"
 
-            }
 
-        ]
 
-    }
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    "_comment": "加好物商品",
 
+    "id": 7,
 
+    "block": "shop_hhh",
 
+    "data": [
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17268_1706772328.jpg",
 
+        "title": "CERIALE 茶几",
 
+        "link": "https://hhh.style/hh12aeffB"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17269_1706772957.jpg",
 
+        "title": "BOUHET 餐椅",
 
+        "link": "https://hhh.style/hh12Pqyr7"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17278_1706773479.jpg",
 
+        "title": "WINGS 茶几",
 
+        "link": "https://hhh.style/hh12yFaBu"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17279_1706773592.jpg",
 
+        "title": "DISO 圓邊几",
 
+        "link": "https://hhh.style/hh12Pvzb7"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17280_1706773721.jpg",
 
+        "title": "LECCE L型實木書桌",
 
+        "link": "https://hhh.style/hh12TaNv7"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17281_1706773854.jpg",
 
+        "title": "KATOL 衣帽架",
 
+        "link": "https://hhh.style/hh12peju6"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17282_1706774254.jpg",
 
+        "title": "SRGURA 床頭櫃",
 
+        "link": "https://hhh.style/hh12rNzjj"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17283_1706774404.jpg",
 
+        "title": "AMBRA 實木延伸餐桌",
 
+        "link": "https://hhh.style/hh12aeRia"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17285_1706774634.jpg",
 
+        "title": "SEREIN 餐椅",
 
+        "link": "https://hhh.style/hh12Z7qAz"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17287_1706774773.jpg",
 
+        "title": "ROME 餐椅",
 
+        "link": "https://hhh.style/hh12WrMVu"
 
+      },
 
+      {
 
+        "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_17288_1706775039.jpg",
 
+        "title": "UNIQUE 餐椅",
 
+        "link": "https://hhh.style/hh12Ujiff"
 
+      }
 
+    ]
 
+  }
 
 ]

+ 150 - 0
template/button.html
Vedi File 

@@ -0,0 +1,150 @@
 
+<!-- 右下角按鈕區塊 -->
 
+
 
+<button data-gt-target="#top" data-gt-duration="100" data-gt-offset="0" class="gotop-btn" title="GoTop">
 
+  <!-- <span class="top_img"></span> -->
 
+  <img src="https://hhh.com.tw/hhh_index/images/icon/feather-chevron-right.svg" alt="">
 
+</button>
 
+
 
+<!-- <button title="為我推薦設計師" class="d-none d-md-inline" data-ga="Go_To_Request">
 
+    <a href="https://hhh.com.tw/about/request/" target="_blank">
 
+      <img src="./hhh_index/images/icon/feather-file-text.svg" alt="">
 
+    </a>
 
+  </button>
 
+
 
+  <button title="裝修預算評估" class="d-none d-md-inline" data-ga="Go_To_Calculator">
 
+    <a href="https://hhh.com.tw/about/calculator/" target="_blank">
 
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
 
+    </a>
 
+  </button>
 
+
 
+  <button title="裝修預算諮詢" class="d-none d-md-inline" data-ga="Go_To_Calculator">
 
+    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
 
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
 
+    </a>
 
+  </button>
 
+
 
+  <button title="+好物商城" class="d-none d-md-inline" data-ga="Go_To_Shop">
 
+    <a href="https://shop.hhh.com.tw/" target="_blank">
 
+      <img src="./hhh_index/images/icon/feather-shopping-cart.svg" alt="">
 
+    </a>
 
+  </button> -->
 
+
 
+<button title="裝修預算諮詢" class="d-none d-md-inline calculator-btn" data-ga="Go_To_Calculator">
 
+  <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
 
+    <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-calculator.svg" alt=""
 
+      style="width: 22px; margin-left: 3px;">
 
+    <p>裝修計算機</p>
 
+  </a>
 
+</button>
 
+
 
+<button title="+好物商城" class="d-none d-md-inline shop-btn" data-ga="Go_To_Shop">
 
+  <a href="https://shop.hhh.com.tw/" target="_blank">
 
+    <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="">
 
+    <p>+好物</p>
 
+  </a>
 
+</button>
 
+
 
+<!-- 暫時隱藏 -->
 
+<!-- <button title="線上諮詢">
 
+    <a href="https://hhh.com.tw/about/contact/" target="_blank">
 
+      <img src="./images/icon/simple-hipchat.svg" alt="">
 
+    </a>
 
+  </button> -->
 
+
 
+
 
+<div class="d-md-none justify-content-evenly mb-menu">
 
+  <!-- <section title="為我推薦設計師" data-ga="Go_To_Request">
 
+    <a href="https://hhh.com.tw/about/request/" target="_blank">
 
+      <img src="./hhh_index/images/icon/feather-file-text.svg" alt="為我推薦設計師">
 
+      <h4>填需求</h4>
 
+    </a>
 
+  </section>
 
+  <section title="裝修預算評估" data-ga="Go_To_Calculator">
 
+    <a href="https://hhh.com.tw/about/calculator/" target="_blank">
 
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="裝修預算評估">
 
+      <h4>估預算</h4>
 
+    </a>
 
+  </section> -->
 
+
 
+  <section title="裝修計算機" data-ga="Go_To_Calculator">
 
+    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
 
+      <img src="https://hhh.com.tw/hhh_index/images/icon/calculator_request.svg" alt="裝修計算機">
 
+      <h4>裝修計算機</h4>
 
+    </a>
 
+  </section>
 
+
 
+  <section title="+好物商城" data-ga="Go_To_Shop">
 
+    <a href="https://shop.hhh.com.tw/" target="_blank">
 
+      <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="+好物商城">
 
+      <h4>+好物</h4>
 
+    </a>
 
+  </section>
 
+
 
+  <section data-ga="Go_To_Member">
 
+    <a href="https://m.hhh.com.tw/users">
 
+      <img src="https://hhh.com.tw/hhh_index/images/icon/material-people.svg" alt="會員"
 
+        style="filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(242deg) brightness(91%) contrast(93%);">
 
+      <h4>會員</h4>
 
+    </a>
 
+  </section>
 
+</div>
 
+
 
+<script>
 
+  $(".gotop-btn").click(() => {
 
+    $("html, body").animate(
 
+      {
 
+        scrollTop: 0,
 
+      }, 0
 
+    );
 
+  });
 
+
 
+  // 右下按鈕滑入顯示
 
+  $(".calculator-btn").hover(function () {
 
+    $(".calculator-btn").addClass("show");
 
+  }, function () {
 
+    $(".calculator-btn").removeClass("show");
 
+  });
 
+
 
+  $(".shop-btn").hover(function () {
 
+    $(".shop-btn").addClass("show");
 
+  }, function () {
 
+    $(".shop-btn").removeClass("show");
 
+  });
 
+
 
+  // 判斷按鈕顯示 or 隱藏
 
+  $(window).scroll(function () {
 
+    if ($(this).scrollTop()) {
 
+      $('#btn-box').fadeIn();
 
+    } else {
 
+      $('#btn-box').fadeOut();
 
+    }
 
+  });
 
+
 
+  // 滑到 footer 區塊隱藏下方選單
 
+  // let footerHeight = $("#footer").height();
 
+  // let bodyHeight = $("body").height()
 
+  // $(window).scroll(function () {
 
+  //   let height = (bodyHeight - footerHeight) - 600;
 
+  //   if ($(window).scrollTop() > height) {
 
+  //     $('.mb-menu').css("opacity", "0");
 
+  //   } else {
 
+  //     $('.mb-menu').css("opacity", "1");
 
+  //   }
 
+  // });
 
+</script>
 
+
 
+<script>
 
+  document.querySelector('button[data-ga="Go_To_Calculator"]').addEventListener('click', function () {
 
+    dataLayer.push({
 
+      'event': 'Go_To_Calculator',
 
+      'btn_location': 'FixedBTN'
 
+    });
 
+  });
 
+
 
+  document.querySelector('button[data-ga="Go_To_Shop"]').addEventListener('click', function () {
 
+    dataLayer.push({
 
+      'event': 'Go_To_Shop',
 
+      'btn_location': 'FixedBTN'
 
+    });
 
+  });
 
+</script>

+ 148 - 0
template/top_carousel.html
Vedi File 

@@ -0,0 +1,148 @@
 
+<section class="w-100 position-relative top-carousel">
 
+  <button class="text-center d-none d-lg-block close-btn">
 
+    <i class="fas fa-chevron-up" style="transform: translateY(-2px)"></i>
 
+    <p>隱藏</p>
 
+  </button>
 
+  <div class="container-fluid mx-auto" style="max-width: 1300px">
 
+    <div class="slider-content"></div>
 
+    <!-- 輪播進度條 -->
 
+    <div class="bullet-list"></div>
 
+  </div>
 
+</section>
 
+
 
+<script>
 
+  $.ajax({
 
+    method: "get",
 
+    url: "../../json/data_index.json",
 
+    // url: "https://m3.hhh.com.tw:18689/genjson_new?filename=realtime.json",
 
+    dataType: "json",
 
+  }).done((data) => {
 
+    result = [...data];
 
+    renderTopCarousel(result);
 
+    console.log('result', result);
 
+  }).fail((error) => {
 
+    console.log('genjson_new error', error);
 
+  });
 
+
 
+  // 渲染頂部輪播
 
+  function renderTopCarousel(data) {
 
+    let temp = data[0]["data"];
 
+    console.log('temp', temp);
 
+    renderBullet(temp);
 
+    renderBannerStr("slider-content", temp);
 
+    let randomInt = getRandomInt(7);
 
+
 
+    let adTopup_count = []
 
+    // 新刊頭 Banner ga4 (一開始進來先送，剩下輪播送)
 
+    setTimeout(() => {
 
+      let list_Topup_Banner = document.querySelectorAll('.slider-content .slide-item');
 
+      let ad_first;
 
+      try {
 
+        ad_first = list_Topup_Banner[randomInt].getAttribute('data_id');
 
+      } catch (e) {
 
+        ad_first = '加載問題，所以請無視';
 
+        console.log(ad_first);
 
+      }
 
+
 
+      dataLayer.push({
 
+        'event': 'Banner_Impression',
 
+        'ad_name': ad_first,
 
+        'ad_location': '新刊頭Banner'
 
+      });
 
+      adTopup_count.push(ad_first)
 
+    }, 1000);
 
+
 
+
 
+    $(".slider-content").slick({
 
+      dots: false,
 
+      infinite: true,
 
+      speed: 500,
 
+      autoplay: true,
 
+      autoplaySpeed: 3000,
 
+      slidesToScroll: 1,
 
+      arrows: true,
 
+      initialSlide: randomInt, // 起始順序
 
+      prevArrow:
 
+        '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
 
+      nextArrow:
 
+        '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
 
+    });
 
+    $(".bullet").removeClass("bullet-active");
 
+    $(".bullet")
 
+      .eq($(".slick-active").data("slick-index"))
 
+      .addClass("bullet-active");
 
+
 
+    $(".slider-content").on("afterChange", function (event, slick, currentSlide) {
 
+      // // 新刊頭廣告 ga4
 
+      // let list = document.querySelectorAll('.slider-content .slide-item');
 
+      // let ad1 = list[currentSlide + 1].getAttribute('data_id')
 
+      // // 送 dataLayer (要看得到廣告才送，電腦手機版不一樣)
 
+      // if ($('.slider-content .slide-item').offset().top - $(window).scrollTop() > -175) {
 
+      //   if (!adTopup_count.includes(ad1)) {
 
+      //     dataLayer.push({
 
+      //       'event': 'Banner_Impression',
 
+      //       'ad_name': ad1,
 
+      //       'ad_location': '新刊頭Banner'
 
+      //     });
 
+      //     adTopup_count.push(ad1);
 
+      //   }
 
+      // }
 
+      // 輪播
 
+      $(".bullet").removeClass("bullet-active");
 
+      $(`.bullet.item-${currentSlide}`).addClass("bullet-active");
 
+    });
 
+  }
 
+
 
+  function renderBannerStr(sec, data) {
 
+    let adNamesTop = [];
 
+    let str = "";
 
+    for (let i = 0; i < data.length; i++) {
 
+      let adNameTop = `${data[i]["id"]}${data[i]["alt"]}`;
 
+      adNamesTop.push(adNameTop);
 
+
 
+      if (data[i]["Dwebp"]) {
 
+        str += `
 
+      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
 
+        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}" alt="${data[i]["alt"]}"  data_id="${data[i]["id"]}${data[i]["alt"]}">
 
+      </a>`;
 
+      } else {
 
+        str += `
 
+      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
 
+        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}" alt="${data[i]["alt"]}" data_id="${data[i]["id"]}${data[i]["alt"]}">
 
+      </a>`;
 
+      }
 
+    }
 
+    $(`.${sec}`).html(str);
 
+    // ga4-banners
 
+    adNamesTop.forEach((adNameTop) => {
 
+      document.querySelectorAll(`a[data-ga4="${adNameTop}"]`).forEach((element) => {
 
+        element.addEventListener('click', function () {
 
+          dataLayer.push({
 
+            'event': 'Banner_Click',
 
+            'ad_name': adNameTop,
 
+            'ad_location': '新刊頭'
 
+          });
 
+        });
 
+      });
 
+    });
 
+  }
 
+
 
+  function renderBullet(data) {
 
+    let str = "";
 
+    for (let i = 0; i < data.length; i++) {
 
+      str += `<div class="bullet item-${i}"></div>`;
 
+    }
 
+    $(".bullet-list").html(str);
 
+  }
 
+
 
+  // 範圍內取隨機整數 (0-8)
 
+  function getRandomInt(max) {
 
+    return Math.floor(Math.random() * max);
 
+  }
 
+
 
+  $(".top-carousel .close-btn").click(function () {
 
+    $(this).css("display", "none");
 
+    $(".top-carousel").addClass("banner-close");
 
+    sticky = 0;
 
+  });
 
+</script>

+ 10 - 5
videos/lists/index.html
Vedi File 

@@ -55,6 +55,8 @@
 
   <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" />
 
@@ -63,6 +65,7 @@
 
 
 <body>
 
   <!-- 動態載入 -->
 
+  <div id="topCarousel"></div>
 
   <div id="navbar"></div>
 
 
   <!-- searchModal -->
 
@@ -159,14 +162,14 @@
 
               </button>
 
 
               <ul class="dropdown-menu" aria-labelledby="video_type">
 
-                <li>
 
+                <!-- <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> -->
 
                 <li>
 
                   <div class="form-check">
 
                     <input class="form-check-input" type="radio" name="video_type" id="video_type_soft">
 
@@ -345,14 +348,14 @@
 
               </button>
 
 
               <ul class="dropdown-menu" aria-labelledby="tag_vpattern">
 
-                <li>
 
+                <!-- <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> -->
 
                 <li>
 
                   <div class="form-check">
 
                     <input class="form-check-input" type="radio" name="tag_vpattern" id="tag_vpatternentrance">
 
@@ -551,6 +554,8 @@
 
 
   <!-- 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"
 
@@ -558,7 +563,7 @@
 
   <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>
 
+  <script src="./js/main.js"></script>
 
 </body>
 
 
 </html>

+ 5 - 1
videos/lists/js/main.js
Vedi File 

@@ -1,6 +1,8 @@
 
 // 載入共用 template
 
 $('#navbar').load('../../template/navbar.html');
 
 $('#footer').load('../../template/footer.html');
 
+$('#btn-box').load('../../template/button.html');
 
+$('#topCarousel').load('../../template/top_carousel.html');
 
 
 $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
 
 
@@ -107,6 +109,8 @@ function removeBtn(element, id, val) {
 
   if (filterList.length === 0) {
 
     $('#removeResultBtn').hide();
 
   }
 
+
 
+  videoSearch();
 
 }
 
 
 let assignOrder = ""; // 當前排序
 
@@ -195,7 +199,7 @@ async function videoSearch(type = "") {
 
                   <div class="card-body d-flex flex-column align-items-center">
 
                     <section class="d-flex align-items-center w-100">
 
                       <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
 
-                      <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
 
+                      <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
 
                     </section>
 
                     <h3 class="my-3 video-title">${item.VideoTitle}</h3>
 
                     <div class="tags-container mt-2 me-auto">${tagsHtml}</div>

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