|
|
@@ -0,0 +1,342 @@
|
|
|
+<!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&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"></h2> -->
|
|
|
+
|
|
|
+ <!-- 搜尋 -->
|
|
|
+ <div class="row w-100 justify-content-center mt-5">
|
|
|
+ <div class="col-md-10">
|
|
|
+ <div class="card search-card">
|
|
|
+ <div class="card-body p-4">
|
|
|
+ <div class="input-group input-group-lg mb-2">
|
|
|
+ <input type="text" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
|
|
|
+ class="form-control border-primary keywords" autocomplete="off">
|
|
|
+ <div class="input-group-append">
|
|
|
+ <button onclick="page = 1; dataSearch('keyword');" type="button" data-ga="View_Search_Results"
|
|
|
+ class="input-group-text">搜尋</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 自動補全 -->
|
|
|
+ <div id="autocomplete-list" class="autocomplete-items"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search-bar-keyword d-flex mt-3 pl-4">
|
|
|
+ <p class="ms-3 text-muted">熱搜關鍵字</p>
|
|
|
+ <ul class="d-flex flex-wrap ps-3">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">客變</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">小坪數</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">老屋翻新</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">收納</a>
|
|
|
+ </li>
|
|
|
+ <!-- <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">軟裝佈置</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">新手裝修</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">風水</a>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">北歐風</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 篩選 -->
|
|
|
+ <div class="row w-100 mt-5 filter-list">
|
|
|
+ <div class="col-12">
|
|
|
+ <p class="mb-3 text-muted">
|
|
|
+ 總共 <span id="totalCount" class="text-primary font-weight-bold fs-4"></span> 筆符合條件
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div class="category-btn">
|
|
|
+ <div class="d-flex flex-wrap main">
|
|
|
+ <button>所有文章</button>
|
|
|
+ <button>編輯精選</button>
|
|
|
+ <button>居家設計</button>
|
|
|
+ <button>裝修前線</button>
|
|
|
+ <button>生活PLUS</button>
|
|
|
+ <button>品牌好物</button>
|
|
|
+ <button>房市焦點</button>
|
|
|
+ <button>主題企劃</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sub">
|
|
|
+ <!-- 動態載入 -->
|
|
|
+ </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">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="button" id="removeResultBtn" class="btn btn-light btn-sm text-muted px-3">全部清除</button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-md-3">
|
|
|
+ <div class="d-flex justify-content-end search-btn-filter">
|
|
|
+ <button id="hot">
|
|
|
+ 人氣
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <span class="mx-1">｜</span>
|
|
|
+
|
|
|
+ <button id="new" class="active">
|
|
|
+ 最新
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 讀取圖示 -->
|
|
|
+ <div class="text-center my-5" id="dataSpinner">
|
|
|
+ <div class="spinner-border text-primary" role="status">
|
|
|
+ <span class="visually-hidden">Loading...</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 設計師列表 -->
|
|
|
+ <div class="row mt-5" id="dataList">
|
|
|
+ <!-- 動態載入 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="columnLoading" class="my-5 text-center">
|
|
|
+ <img src="./img/loading.svg" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分頁 -->
|
|
|
+ <!-- <div class="d-flex justify-content-center my-5">
|
|
|
+ <nav aria-label="Page navigation example">
|
|
|
+ <ul class="pagination border list-pagination">
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" aria-label="Previous">
|
|
|
+ <span aria-hidden="true">＜</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#">1</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#">2</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#">3</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" aria-label="Next">
|
|
|
+ <span aria-hidden="true">＞</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 動態載入 -->
|
|
|
+ <div id="btn-box"></div>
|
|
|
+ <div id="footer" class="d-none d-lg-block"></div>
|
|
|
+
|
|
|
+ <!-- jQuery -->
|
|
|
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
|
+ <!-- Slick -->
|
|
|
+ <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
|
+ <!-- Bootstrap -->
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
|
|
|
+ integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
|
|
|
+ integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="../../js/lists.js"></script>
|
|
|
+ <script src="./js/main.js"></script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
