|
|
@@ -0,0 +1,789 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <!-- Google Tag Manager -->
|
|
|
+ <script>(function (w, d, s, l, i) {
|
|
|
+ w[l] = w[l] || []; w[l].push({
|
|
|
+ 'gtm.start':
|
|
|
+ new Date().getTime(), event: 'gtm.js'
|
|
|
+ }); var f = d.getElementsByTagName(s)[0],
|
|
|
+ j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
|
|
+ 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
|
|
+ })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
|
|
|
+ <!-- End Google Tag Manager -->
|
|
|
+
|
|
|
+ <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-W3RJHTZ"></script>
|
|
|
+ <!-- <script src="https://connect.facebook.net/signals/config/585285442299590?v=2.9.100&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="dataSearch()" type="button" data-ga="View_Search_Results"
|
|
|
+ class="input-group-text">搜尋</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 自動補全 -->
|
|
|
+ <div id="autocomplete-list" class="autocomplete-items"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search-bar-keyword d-flex mt-3 pl-4">
|
|
|
+ <p class="ms-3 text-muted">熱搜關鍵字</p>
|
|
|
+ <ul class="d-flex flex-wrap ps-3">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">客變</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">小坪數</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">老屋翻新</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">收納</a>
|
|
|
+ </li>
|
|
|
+ <!-- <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">軟裝佈置</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">新手裝修</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">風水</a>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">北歐風</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 篩選 -->
|
|
|
+ <div class="row w-100 mt-5 filter-list">
|
|
|
+ <div class="col-12">
|
|
|
+ <p class="mb-3 text-muted">
|
|
|
+ 總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆室內裝潢設計符合條件
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
|
|
|
+ <div class="card-body d-flex flex-wrap">
|
|
|
+
|
|
|
+ <div class="dropdown">
|
|
|
+ <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="fee" data-bs-toggle="dropdown"
|
|
|
+ aria-expanded="false">
|
|
|
+ 裝修預算
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class="dropdown-menu" aria-labelledby="fee">
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd100">
|
|
|
+ <label class="form-check-label" for="d_budgetd100">
|
|
|
+ 100萬以下
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd200">
|
|
|
+ <label class="form-check-label" for="d_budgetd200">
|
|
|
+ 101~200萬
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd300">
|
|
|
+ <label class="form-check-label" for="d_budgetd300">
|
|
|
+ 201~300萬
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd400">
|
|
|
+ <label class="form-check-label" for="d_budgetd400">
|
|
|
+ 301萬以上
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dropdown">
|
|
|
+ <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="area" data-bs-toggle="dropdown"
|
|
|
+ aria-expanded="false">
|
|
|
+ 房屋坪數
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class="dropdown-menu" aria-labelledby="area">
|
|
|
+ <!-- <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_area" id="case_areaall0">
|
|
|
+ <label class="form-check-label" for="case_areaall0">
|
|
|
+ 不拘
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_area" id="case_areac201">
|
|
|
+ <label class="form-check-label" for="case_areac201">
|
|
|
+ 20坪以下
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_area" id="case_areac212">
|
|
|
+ <label class="form-check-label" for="case_areac212">
|
|
|
+ 21-30坪
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_area" id="case_areac313">
|
|
|
+ <label class="form-check-label" for="case_areac313">
|
|
|
+ 31-50坪
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_area" id="case_areac514">
|
|
|
+ <label class="form-check-label" for="case_areac514">
|
|
|
+ 51坪以上
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dropdown">
|
|
|
+ <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="dstyle" data-bs-toggle="dropdown"
|
|
|
+ aria-expanded="false">
|
|
|
+ 設計風格
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class="dropdown-menu" aria-labelledby="dstyle">
|
|
|
+ <!-- <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleall">
|
|
|
+ <label class="form-check-label" for="d_styleall">
|
|
|
+ 不拘
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylenordic">
|
|
|
+ <label class="form-check-label" for="d_stylenordic">
|
|
|
+ 北歐風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylemodern">
|
|
|
+ <label class="form-check-label" for="d_stylemodern">
|
|
|
+ 現代風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleindustry">
|
|
|
+ <label class="form-check-label" for="d_styleindustry">
|
|
|
+ 工業風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleamerican">
|
|
|
+ <label class="form-check-label" for="d_styleamerican">
|
|
|
+ 美式風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleleisure">
|
|
|
+ <label class="form-check-label" for="d_styleleisure">
|
|
|
+ 休閒多元
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylevanguard">
|
|
|
+ <label class="form-check-label" for="d_stylevanguard">
|
|
|
+ 前衛風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylerustuc">
|
|
|
+ <label class="form-check-label" for="d_stylerustuc">
|
|
|
+ 鄉村風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylemashup">
|
|
|
+ <label class="form-check-label" for="d_stylemashup">
|
|
|
+ 混搭風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleneoclassic">
|
|
|
+ <label class="form-check-label" for="d_styleneoclassic">
|
|
|
+ 新古典
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleluxurious">
|
|
|
+ <label class="form-check-label" for="d_styleluxurious">
|
|
|
+ 奢華風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleclassical">
|
|
|
+ <label class="form-check-label" for="d_styleclassical">
|
|
|
+ 古典風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleexotic">
|
|
|
+ <label class="form-check-label" for="d_styleexotic">
|
|
|
+ 異國風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylezen">
|
|
|
+ <label class="form-check-label" for="d_stylezen">
|
|
|
+ 日式禪風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleoriental">
|
|
|
+ <label class="form-check-label" for="d_styleoriental">
|
|
|
+ 東方風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylemuju">
|
|
|
+ <label class="form-check-label" for="d_stylemuju">
|
|
|
+ 無印風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleminimalism">
|
|
|
+ <label class="form-check-label" for="d_styleminimalism">
|
|
|
+ 簡約風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_stylejpstyle">
|
|
|
+ <label class="form-check-label" for="d_stylejpstyle">
|
|
|
+ 日式風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="d_style" id="d_styleentrylux">
|
|
|
+ <label class="form-check-label" for="d_styleentrylux">
|
|
|
+ 輕奢風
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dropdown">
|
|
|
+ <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="ctype" data-bs-toggle="dropdown"
|
|
|
+ aria-expanded="false">
|
|
|
+ 房屋類型
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class="dropdown-menu" aria-labelledby="ctype">
|
|
|
+ <!-- <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typeall">
|
|
|
+ <label class="form-check-label" for="case_typeall">
|
|
|
+ 不拘
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typesmall">
|
|
|
+ <label class="form-check-label" for="case_typesmall">
|
|
|
+ 小坪數
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typestandard">
|
|
|
+ <label class="form-check-label" for="case_typestandard">
|
|
|
+ 標準格局
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typebig">
|
|
|
+ <label class="form-check-label" for="case_typebig">
|
|
|
+ 大坪數
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typevilla">
|
|
|
+ <label class="form-check-label" for="case_typevilla">
|
|
|
+ 別墅
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typeraisehigh">
|
|
|
+ <label class="form-check-label" for="case_typeraisehigh">
|
|
|
+ 挑高樓層
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typemiddle">
|
|
|
+ <label class="form-check-label" for="case_typemiddle">
|
|
|
+ 樓中樓
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typesample">
|
|
|
+ <label class="form-check-label" for="case_typesample">
|
|
|
+ 實品／樣品屋
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typeworkspace">
|
|
|
+ <label class="form-check-label" for="case_typeworkspace">
|
|
|
+ 工作空間
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typecommercial">
|
|
|
+ <label class="form-check-label" for="case_typecommercial">
|
|
|
+ 商業空間
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typehomestay">
|
|
|
+ <label class="form-check-label" for="case_typehomestay">
|
|
|
+ 民宿旅館
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typedining">
|
|
|
+ <label class="form-check-label" for="case_typedining">
|
|
|
+ 餐飲空間
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="case_type" id="case_typepublic">
|
|
|
+ <label class="form-check-label" for="case_typepublic">
|
|
|
+ 公共空間
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dropdown">
|
|
|
+ <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="condition"
|
|
|
+ data-bs-toggle="dropdown" aria-expanded="false">
|
|
|
+ 房屋狀況
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class="dropdown-menu" aria-labelledby="condition">
|
|
|
+ <!-- <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="condition" id="conditionall">
|
|
|
+ <label class="form-check-label" for="conditionall">
|
|
|
+ 不拘
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="condition" id="conditionnew">
|
|
|
+ <label class="form-check-label" for="conditionnew">
|
|
|
+ 新成屋
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="condition" id="conditionblanks">
|
|
|
+ <label class="form-check-label" for="conditionblanks">
|
|
|
+ 毛胚屋
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="condition" id="conditionrenovation">
|
|
|
+ <label class="form-check-label" for="conditionrenovation">
|
|
|
+ 老屋翻新
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="condition" id="conditionselfbuilt">
|
|
|
+ <label class="form-check-label" for="conditionselfbuilt">
|
|
|
+ 自地自建
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="condition" id="conditionmedievalhouse">
|
|
|
+ <label class="form-check-label" for="conditionmedievalhouse">
|
|
|
+ 中古屋
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dropdown">
|
|
|
+ <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="award" data-bs-toggle="dropdown"
|
|
|
+ aria-expanded="false">
|
|
|
+ 亞洲設計獎得主
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class="dropdown-menu" aria-labelledby="award">
|
|
|
+ <!-- <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="award" id="awardall">
|
|
|
+ <label class="form-check-label" for="awardall">
|
|
|
+ 不拘
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li> -->
|
|
|
+ <li>
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="radio" name="award" id="awardY">
|
|
|
+ <label class="form-check-label" for="awardY">
|
|
|
+ 有
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-9">
|
|
|
+ <div class="d-flex flex-wrap align-items-center">
|
|
|
+ <div class="text-primary d-flex flex-wrap align-items-center search-tab-result">
|
|
|
+ <!-- <span class="me-3">
|
|
|
+ <span class="budget">
|
|
|
+ 接案地區：不拘
|
|
|
+ <img src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
|
|
|
+ </span>
|
|
|
+ </span> -->
|
|
|
+
|
|
|
+ <!-- <button type="button" class="btn btn-light btn-sm text-muted px-3">全部清除</button> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="button" id="removeResultBtn" class="btn btn-light btn-sm text-muted px-3">全部清除</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-md-3">
|
|
|
+ <div class="d-flex justify-content-end search-btn-filter">
|
|
|
+ <button id="hot">
|
|
|
+ 人氣
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <span class="mx-1">｜</span>
|
|
|
+
|
|
|
+ <button id="new" class="active">
|
|
|
+ 最新
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 讀取圖示 -->
|
|
|
+ <div class="text-center my-5" id="designerSpinner">
|
|
|
+ <div class="spinner-border text-primary" role="status">
|
|
|
+ <span class="visually-hidden">Loading...</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 設計師列表 -->
|
|
|
+ <div class="row mt-5" id="designerList">
|
|
|
+ <!-- 動態載入 -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分頁 -->
|
|
|
+ <div class="d-flex justify-content-center my-5">
|
|
|
+ <nav aria-label="Page navigation example">
|
|
|
+ <ul class="pagination border list-pagination">
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" aria-label="Previous">
|
|
|
+ <span aria-hidden="true">＜</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#">1</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#">2</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#">3</a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" aria-label="Next">
|
|
|
+ <span aria-hidden="true">＞</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 動態載入 -->
|
|
|
+ <div id="btn-box"></div>
|
|
|
+ <div id="footer" class="d-none d-lg-block"></div>
|
|
|
+
|
|
|
+ <!-- jQuery -->
|
|
|
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
|
+ <!-- Slick -->
|
|
|
+ <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
|
+ <!-- Bootstrap -->
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
|
|
|
+ integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
|
|
|
+ integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="../../js/lists.js"></script>
|
|
|
+ <script src="./js/main.js"></script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
