index.html 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- Google Tag Manager -->
  5. <script>(function (w, d, s, l, i) {
  6. w[l] = w[l] || []; w[l].push({
  7. 'gtm.start':
  8. new Date().getTime(), event: 'gtm.js'
  9. }); var f = d.getElementsByTagName(s)[0],
  10. j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
  11. 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
  12. })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
  13. <!-- End Google Tag Manager -->
  14. <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-W3RJHTZ"></script>
  15. <!-- <script src="https://connect.facebook.net/signals/config/585285442299590?v=2.9.100&amp;r=stable" async=""></script> -->
  16. <meta charset="UTF-8" />
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  18. <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1" />
  19. <meta http-equiv="Cache-Control" content="no-cache" />
  20. <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved." />
  21. <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8" />
  22. <meta name="description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問
  23. 題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我
  24. 們一定能幫助你!" />
  25. <meta name="distribution" content="Taiwan" />
  26. <meta name="keywords" content="" />
  27. <meta name="revisit-after" content="1 days" />
  28. <meta name="robots" content="all" />
  29. <meta name="format-detection" content="telephone=no" />
  30. <meta property="og:description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問題!
  31. 幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我們一定能幫助
  32. 你!" />
  33. <meta property="og:site_name" content="幸福空間" />
  34. <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台" />
  35. <meta property="og:type" content="website" />
  36. <meta property="og:locale" content="zh_TW" />
  37. <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
  38. <link rel="icon" href="../../img/favicon.ico" />
  39. <!-- Fontawesome -->
  40. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
  41. integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
  42. <!-- Bootstrap -->
  43. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  44. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
  45. <!-- axios -->
  46. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  47. <!-- Google Font -->
  48. <link rel="preconnect" href="https://fonts.googleapis.com" />
  49. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  50. <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap" rel="stylesheet" />
  51. <!-- CSS -->
  52. <link rel="stylesheet" href="../../css/reset.css" />
  53. <link rel="stylesheet" href="../../css/lists.css" />
  54. <link rel="stylesheet" href="../../css/all.css" />
  55. <!-- 結構化資料 -->
  56. <script type="application/ld+json">
  57. {
  58. "@context": "https://schema.org",
  59. "@type": "LocalBusiness",
  60. "@id": "https://hhh.com.tw/",
  61. "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
  62. "name": "幸福空間股份有限公司",
  63. "address": "110台北市信義區菸廠路88號五樓之6",
  64. "url": "https://hhh.com.tw/",
  65. "telephone": "+886-2-6617-0123"
  66. }
  67. </script>
  68. <script type="application/ld+json">
  69. {
  70. "@context": "https://schema.org",
  71. "@type": "Organization",
  72. "url": "https://hhh.com.tw/",
  73. "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
  74. "name": "幸福空間",
  75. "sameAs": [
  76. "https://www.facebook.com/hhhfb/",
  77. "https://page.line.me/ovs4341s",
  78. "https://www.youtube.com/user/gorgeousspace",
  79. "https://www.instagram.com/gorgeous_space/"
  80. ],
  81. "contactPoint": [
  82. {
  83. "@type": "ContactPoint",
  84. "areaServed": "TW",
  85. "telephone": "+886-2-6617-0123",
  86. "contactType": "customer service",
  87. "availableLanguage": "Chinese"
  88. }
  89. ]
  90. }
  91. </script>
  92. <script type="application/ld+json">
  93. {
  94. "@context": "https://schema.org",
  95. "@type": "WebSite",
  96. "name": "幸福空間-室內設計、裝潢、居家生活、影音平台",
  97. "author": "幸福空間",
  98. "url": "https://hhh.com.tw/",
  99. "potentialAction": {
  100. "@type": "SearchAction",
  101. "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
  102. "query-input": "required name=search_term_string"
  103. }
  104. }
  105. </script>
  106. <script type="application/ld+json">
  107. {
  108. "@context": "https://schema.org",
  109. "@type": "BreadcrumbList",
  110. "itemListElement": [
  111. {
  112. "@type": "ListItem",
  113. "position": 1,
  114. "name": "幸福空間",
  115. "item": "https://hhh.com.tw/"
  116. },
  117. {
  118. "@type": "ListItem",
  119. "position": 2,
  120. "name": "設計師列表頁",
  121. "item": "https://hhh.com.tw/designers/lists/"
  122. }
  123. ]
  124. }
  125. </script>
  126. </head>
  127. <body>
  128. <!-- 動態載入 -->
  129. <div id="navbar"></div>
  130. <!-- searchModal -->
  131. <div class="modal fade search-modal" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel"
  132. aria-hidden="true">
  133. <div class="modal-dialog modal-dialog-centered modal-lg">
  134. <div class="modal-content">
  135. <div class="modal-body">
  136. <div class="input-group">
  137. <input type="text" class="form-control keyword" placeholder="請輸入關鍵字" aria-label="Please enter keywords"
  138. aria-describedby="search-input" />
  139. <span class="input-group-text" id="search-input">全站搜尋</span>
  140. </div>
  141. </div>
  142. <section class="keyword-list">
  143. <span>熱搜關鍵字:</span>
  144. <ul>
  145. <li>客變</li>
  146. <li>小坪數</li>
  147. <li>老屋翻新</li>
  148. <li>收納</li>
  149. <li>軟裝佈置</li>
  150. <li>新手裝修</li>
  151. <li>風水</li>
  152. <li>北歐風</li>
  153. </ul>
  154. </section>
  155. </div>
  156. </div>
  157. </div>
  158. <div class="container d-flex flex-column align-items-center justify-content-center list-content">
  159. <h2 class="list-headline">全國室內設計師推薦</h2>
  160. <!-- 搜尋 -->
  161. <div class="row w-100 justify-content-center mt-5">
  162. <div class="col-md-10">
  163. <div class="card search-card">
  164. <div class="card-body p-4">
  165. <div class="input-group input-group-lg mb-2">
  166. <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
  167. class="form-control border-primary keywords" autocomplete="off">
  168. <div class="input-group-append">
  169. <button onclick="designerSearch()" type="button" data-ga="View_Search_Results"
  170. class="input-group-text">搜尋</button>
  171. </div>
  172. </div>
  173. <div class="search-bar-keyword d-flex mt-3 pl-4">
  174. <p class="ms-3 text-muted">熱搜關鍵字</p>
  175. <ul class="d-flex flex-wrap ps-3">
  176. <li>
  177. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">客變</a>
  178. </li>
  179. <li>
  180. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">小坪數</a>
  181. </li>
  182. <li>
  183. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">老屋翻新</a>
  184. </li>
  185. <li>
  186. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">收納</a>
  187. </li>
  188. <!-- <li>
  189. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">軟裝佈置</a>
  190. </li>
  191. <li>
  192. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">新手裝修</a>
  193. </li>
  194. <li>
  195. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">風水</a>
  196. </li> -->
  197. <li>
  198. <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">北歐風</a>
  199. </li>
  200. </ul>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. <!-- 篩選 -->
  207. <div class="row w-100 mt-5 filter-list">
  208. <div class="col-12">
  209. <p class="mb-3 text-muted">
  210. 總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆全國室內設計師符合條件
  211. </p>
  212. <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
  213. <div class="card-body d-flex flex-wrap">
  214. <div class="dropdown">
  215. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="city" data-bs-toggle="dropdown"
  216. aria-expanded="false">
  217. 所在縣市
  218. </button>
  219. <ul class="dropdown-menu" aria-labelledby="city">
  220. <li>
  221. <div class="form-check">
  222. <input class="form-check-input" type="radio" name="city" id="taipei_city">
  223. <label class="form-check-label" for="taipei_city">
  224. 台北市
  225. </label>
  226. </div>
  227. </li>
  228. <li>
  229. <div class="form-check">
  230. <input class="form-check-input" type="radio" name="city" id="new_taipei_city">
  231. <label class="form-check-label" for="new_taipei_city">
  232. 新北市
  233. </label>
  234. </div>
  235. </li>
  236. <li>
  237. <div class="form-check">
  238. <input class="form-check-input" type="radio" name="city" id="keelung_city">
  239. <label class="form-check-label" for="keelung_city">
  240. 基隆市
  241. </label>
  242. </div>
  243. </li>
  244. <li>
  245. <div class="form-check">
  246. <input class="form-check-input" type="radio" name="city" id="taoyuan_city">
  247. <label class="form-check-label" for="taoyuan_city">
  248. 桃園市
  249. </label>
  250. </div>
  251. </li>
  252. <li>
  253. <div class="form-check">
  254. <input class="form-check-input" type="radio" name="city" id="hsinchu_city">
  255. <label class="form-check-label" for="hsinchu_city">
  256. 新竹市
  257. </label>
  258. </div>
  259. </li>
  260. <li>
  261. <div class="form-check">
  262. <input class="form-check-input" type="radio" name="city" id="hsinchu_county">
  263. <label class="form-check-label" for="hsinchu_county">
  264. 新竹縣
  265. </label>
  266. </div>
  267. </li>
  268. <li>
  269. <div class="form-check">
  270. <input class="form-check-input" type="radio" name="city" id="miaoli_county">
  271. <label class="form-check-label" for="miaoli_county">
  272. 苗栗縣
  273. </label>
  274. </div>
  275. </li>
  276. <li>
  277. <div class="form-check">
  278. <input class="form-check-input" type="radio" name="city" id="taichung_city">
  279. <label class="form-check-label" for="taichung_city">
  280. 台中市
  281. </label>
  282. </div>
  283. </li>
  284. <li>
  285. <div class="form-check">
  286. <input class="form-check-input" type="radio" name="city" id="changhua_county">
  287. <label class="form-check-label" for="changhua_county">
  288. 彰化縣
  289. </label>
  290. </div>
  291. </li>
  292. <li>
  293. <div class="form-check">
  294. <input class="form-check-input" type="radio" name="city" id="nantou_county">
  295. <label class="form-check-label" for="nantou_county">
  296. 南投縣
  297. </label>
  298. </div>
  299. </li>
  300. <li>
  301. <div class="form-check">
  302. <input class="form-check-input" type="radio" name="city" id="yunlin_county">
  303. <label class="form-check-label" for="yunlin_county">
  304. 雲林縣
  305. </label>
  306. </div>
  307. </li>
  308. <li>
  309. <div class="form-check">
  310. <input class="form-check-input" type="radio" name="city" id="chiayi_city">
  311. <label class="form-check-label" for="chiayi_city">
  312. 嘉義市
  313. </label>
  314. </div>
  315. </li>
  316. <li>
  317. <div class="form-check">
  318. <input class="form-check-input" type="radio" name="city" id="chiayi_county">
  319. <label class="form-check-label" for="chiayi_county">
  320. 嘉義縣
  321. </label>
  322. </div>
  323. </li>
  324. <li>
  325. <div class="form-check">
  326. <input class="form-check-input" type="radio" name="city" id="tainan_city">
  327. <label class="form-check-label" for="tainan_city">
  328. 台南市
  329. </label>
  330. </div>
  331. </li>
  332. <li>
  333. <div class="form-check">
  334. <input class="form-check-input" type="radio" name="city" id="kaohsiung_city">
  335. <label class="form-check-label" for="kaohsiung_city">
  336. 高雄市
  337. </label>
  338. </div>
  339. </li>
  340. <li>
  341. <div class="form-check">
  342. <input class="form-check-input" type="radio" name="city" id="pingtung_county">
  343. <label class="form-check-label" for="pingtung_county">
  344. 屏東縣
  345. </label>
  346. </div>
  347. </li>
  348. <li>
  349. <div class="form-check">
  350. <input class="form-check-input" type="radio" name="city" id="yilan_county">
  351. <label class="form-check-label" for="yilan_county">
  352. 宜蘭縣
  353. </label>
  354. </div>
  355. </li>
  356. <li>
  357. <div class="form-check">
  358. <input class="form-check-input" type="radio" name="city" id="hualien_county">
  359. <label class="form-check-label" for="hualien_county">
  360. 花蓮縣
  361. </label>
  362. </div>
  363. </li>
  364. <li>
  365. <div class="form-check">
  366. <input class="form-check-input" type="radio" name="city" id="taitung_county">
  367. <label class="form-check-label" for="taitung_county">
  368. 台東縣
  369. </label>
  370. </div>
  371. </li>
  372. <li>
  373. <div class="form-check">
  374. <input class="form-check-input" type="radio" name="city" id="penghu_county">
  375. <label class="form-check-label" for="penghu_county">
  376. 澎湖縣
  377. </label>
  378. </div>
  379. </li>
  380. <li>
  381. <div class="form-check">
  382. <input class="form-check-input" type="radio" name="city" id="kinmen_county">
  383. <label class="form-check-label" for="kinmen_county">
  384. 金門縣
  385. </label>
  386. </div>
  387. </li>
  388. <li>
  389. <div class="form-check">
  390. <input class="form-check-input" type="radio" name="city" id="lienchiang_county">
  391. <label class="form-check-label" for="lienchiang_county">
  392. 連江縣
  393. </label>
  394. </div>
  395. </li>
  396. </ul>
  397. </div>
  398. <div class="dropdown">
  399. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="region" data-bs-toggle="dropdown"
  400. aria-expanded="false">
  401. 接案地區
  402. </button>
  403. <ul class="dropdown-menu" aria-labelledby="region">
  404. <!-- <li>
  405. <div class="form-check">
  406. <input class="form-check-input" type="radio" name="region" id="all_region">
  407. <label class="form-check-label" for="all_region">
  408. 不拘
  409. </label>
  410. </div>
  411. </li> -->
  412. <li>
  413. <div class="form-check">
  414. <input class="form-check-input" type="radio" name="region" id="north_region">
  415. <label class="form-check-label" for="north_region">
  416. 北區
  417. </label>
  418. </div>
  419. </li>
  420. <li>
  421. <div class="form-check">
  422. <input class="form-check-input" type="radio" name="region" id="central_region">
  423. <label class="form-check-label" for="central_region">
  424. 中區
  425. </label>
  426. </div>
  427. </li>
  428. <li>
  429. <div class="form-check">
  430. <input class="form-check-input" type="radio" name="region" id="south_region">
  431. <label class="form-check-label" for="south_region">
  432. 南區
  433. </label>
  434. </div>
  435. </li>
  436. <li>
  437. <div class="form-check">
  438. <input class="form-check-input" type="radio" name="region" id="east_region">
  439. <label class="form-check-label" for="east_region">
  440. 宜蘭花東
  441. </label>
  442. </div>
  443. </li>
  444. <li>
  445. <div class="form-check">
  446. <input class="form-check-input" type="radio" name="region" id="outlying_region">
  447. <label class="form-check-label" for="outlying_region">
  448. 離島地區
  449. </label>
  450. </div>
  451. </li>
  452. <li>
  453. <div class="form-check">
  454. <input class="form-check-input" type="radio" name="region" id="overseas_region">
  455. <label class="form-check-label" for="overseas_region">
  456. 海外地區
  457. </label>
  458. </div>
  459. </li>
  460. </ul>
  461. </div>
  462. <div class="dropdown">
  463. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="dtype" data-bs-toggle="dropdown"
  464. aria-expanded="false">
  465. 接案類型
  466. </button>
  467. <ul class="dropdown-menu" aria-labelledby="dtype">
  468. <!-- <li>
  469. <div class="form-check">
  470. <input class="form-check-input" type="radio" name="d_type" id="d_typeall">
  471. <label class="form-check-label" for="d_typeall">
  472. 不拘
  473. </label>
  474. </div>
  475. </li> -->
  476. <li>
  477. <div class="form-check">
  478. <input class="form-check-input" type="radio" name="d_type" id="d_typesmall">
  479. <label class="form-check-label" for="d_typesmall">
  480. 小坪數
  481. </label>
  482. </div>
  483. </li>
  484. <li>
  485. <div class="form-check">
  486. <input class="form-check-input" type="radio" name="d_type" id="d_typestandard">
  487. <label class="form-check-label" for="d_typestandard">
  488. 標準格局
  489. </label>
  490. </div>
  491. </li>
  492. <li>
  493. <div class="form-check">
  494. <input class="form-check-input" type="radio" name="d_type" id="d_typevilla">
  495. <label class="form-check-label" for="d_typevilla">
  496. 別墅
  497. </label>
  498. </div>
  499. </li>
  500. <li>
  501. <div class="form-check">
  502. <input class="form-check-input" type="radio" name="d_type" id="d_typebig">
  503. <label class="form-check-label" for="d_typebig">
  504. 大坪數
  505. </label>
  506. </div>
  507. </li>
  508. <li>
  509. <div class="form-check">
  510. <input class="form-check-input" type="radio" name="d_type" id="d_typemiddle">
  511. <label class="form-check-label" for="d_typemiddle">
  512. 樓中樓
  513. </label>
  514. </div>
  515. </li>
  516. <li>
  517. <div class="form-check">
  518. <input class="form-check-input" type="radio" name="d_type" id="d_typesample">
  519. <label class="form-check-label" for="d_typesample">
  520. 實品/樣品屋
  521. </label>
  522. </div>
  523. </li>
  524. <li>
  525. <div class="form-check">
  526. <input class="form-check-input" type="radio" name="d_type" id="d_typecommercial">
  527. <label class="form-check-label" for="d_typecommercial">
  528. 商業空間
  529. </label>
  530. </div>
  531. </li>
  532. <li>
  533. <div class="form-check">
  534. <input class="form-check-input" type="radio" name="d_type" id="d_typeraisehigh">
  535. <label class="form-check-label" for="d_typeraisehigh">
  536. 挑高樓層
  537. </label>
  538. </div>
  539. </li>
  540. <li>
  541. <div class="form-check">
  542. <input class="form-check-input" type="radio" name="d_type" id="d_typeworkspace">
  543. <label class="form-check-label" for="d_typeworkspace">
  544. 工作空間
  545. </label>
  546. </div>
  547. </li>
  548. <li>
  549. <div class="form-check">
  550. <input class="form-check-input" type="radio" name="d_type" id="d_typedining">
  551. <label class="form-check-label" for="d_typedining">
  552. 餐飲空間
  553. </label>
  554. </div>
  555. </li>
  556. <li>
  557. <div class="form-check">
  558. <input class="form-check-input" type="radio" name="d_type" id="d_typehomestay">
  559. <label class="form-check-label" for="d_typehomestay">
  560. 民宿旅館
  561. </label>
  562. </div>
  563. </li>
  564. <li>
  565. <div class="form-check">
  566. <input class="form-check-input" type="radio" name="d_type" id="d_typepublic">
  567. <label class="form-check-label" for="d_typepublic">
  568. 公共空間
  569. </label>
  570. </div>
  571. </li>
  572. <li>
  573. <div class="form-check">
  574. <input class="form-check-input" type="radio" name="d_type" id="d_typerenovation">
  575. <label class="form-check-label" for="d_typerenovation">
  576. 老屋翻新
  577. </label>
  578. </div>
  579. </li>
  580. </ul>
  581. </div>
  582. <div class="dropdown">
  583. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="dstyle" data-bs-toggle="dropdown"
  584. aria-expanded="false">
  585. 接案風格
  586. </button>
  587. <ul class="dropdown-menu" aria-labelledby="dstyle">
  588. <!-- <li>
  589. <div class="form-check">
  590. <input class="form-check-input" type="radio" name="d_style" id="d_styleall">
  591. <label class="form-check-label" for="d_styleall">
  592. 不拘
  593. </label>
  594. </div>
  595. </li> -->
  596. <li>
  597. <div class="form-check">
  598. <input class="form-check-input" type="radio" name="d_style" id="d_stylenordic">
  599. <label class="form-check-label" for="d_stylenordic">
  600. 北歐風
  601. </label>
  602. </div>
  603. </li>
  604. <li>
  605. <div class="form-check">
  606. <input class="form-check-input" type="radio" name="d_style" id="d_stylemodern">
  607. <label class="form-check-label" for="d_stylemodern">
  608. 現代風
  609. </label>
  610. </div>
  611. </li>
  612. <li>
  613. <div class="form-check">
  614. <input class="form-check-input" type="radio" name="d_style" id="d_styleindustry">
  615. <label class="form-check-label" for="d_styleindustry">
  616. 工業風
  617. </label>
  618. </div>
  619. </li>
  620. <li>
  621. <div class="form-check">
  622. <input class="form-check-input" type="radio" name="d_style" id="d_styleamerican">
  623. <label class="form-check-label" for="d_styleamerican">
  624. 美式風
  625. </label>
  626. </div>
  627. </li>
  628. <li>
  629. <div class="form-check">
  630. <input class="form-check-input" type="radio" name="d_style" id="d_styleleisure">
  631. <label class="form-check-label" for="d_styleleisure">
  632. 休閒多元
  633. </label>
  634. </div>
  635. </li>
  636. <li>
  637. <div class="form-check">
  638. <input class="form-check-input" type="radio" name="d_style" id="d_stylevanguard">
  639. <label class="form-check-label" for="d_stylevanguard">
  640. 前衛風
  641. </label>
  642. </div>
  643. </li>
  644. <li>
  645. <div class="form-check">
  646. <input class="form-check-input" type="radio" name="d_style" id="d_stylerustuc">
  647. <label class="form-check-label" for="d_stylerustuc">
  648. 鄉村風
  649. </label>
  650. </div>
  651. </li>
  652. <li>
  653. <div class="form-check">
  654. <input class="form-check-input" type="radio" name="d_style" id="d_stylemashup">
  655. <label class="form-check-label" for="d_stylemashup">
  656. 混搭風
  657. </label>
  658. </div>
  659. </li>
  660. <li>
  661. <div class="form-check">
  662. <input class="form-check-input" type="radio" name="d_style" id="d_styleneoclassic">
  663. <label class="form-check-label" for="d_styleneoclassic">
  664. 新古典
  665. </label>
  666. </div>
  667. </li>
  668. <li>
  669. <div class="form-check">
  670. <input class="form-check-input" type="radio" name="d_style" id="d_styleluxurious">
  671. <label class="form-check-label" for="d_styleluxurious">
  672. 奢華風
  673. </label>
  674. </div>
  675. </li>
  676. <li>
  677. <div class="form-check">
  678. <input class="form-check-input" type="radio" name="d_style" id="d_styleclassical">
  679. <label class="form-check-label" for="d_styleclassical">
  680. 古典風
  681. </label>
  682. </div>
  683. </li>
  684. <li>
  685. <div class="form-check">
  686. <input class="form-check-input" type="radio" name="d_style" id="d_styleexotic">
  687. <label class="form-check-label" for="d_styleexotic">
  688. 異國風
  689. </label>
  690. </div>
  691. </li>
  692. <li>
  693. <div class="form-check">
  694. <input class="form-check-input" type="radio" name="d_style" id="d_stylezen">
  695. <label class="form-check-label" for="d_stylezen">
  696. 日式禪風
  697. </label>
  698. </div>
  699. </li>
  700. <li>
  701. <div class="form-check">
  702. <input class="form-check-input" type="radio" name="d_style" id="d_styleoriental">
  703. <label class="form-check-label" for="d_styleoriental">
  704. 東方風
  705. </label>
  706. </div>
  707. </li>
  708. <li>
  709. <div class="form-check">
  710. <input class="form-check-input" type="radio" name="d_style" id="d_stylemuju">
  711. <label class="form-check-label" for="d_stylemuju">
  712. 無印風
  713. </label>
  714. </div>
  715. </li>
  716. <li>
  717. <div class="form-check">
  718. <input class="form-check-input" type="radio" name="d_style" id="d_styleminimalism">
  719. <label class="form-check-label" for="d_styleminimalism">
  720. 簡約風
  721. </label>
  722. </div>
  723. </li>
  724. <li>
  725. <div class="form-check">
  726. <input class="form-check-input" type="radio" name="d_style" id="d_stylejpstyle">
  727. <label class="form-check-label" for="d_stylejpstyle">
  728. 日式風
  729. </label>
  730. </div>
  731. </li>
  732. <li>
  733. <div class="form-check">
  734. <input class="form-check-input" type="radio" name="d_style" id="d_styleentrylux">
  735. <label class="form-check-label" for="d_styleentrylux">
  736. 輕奢風
  737. </label>
  738. </div>
  739. </li>
  740. </ul>
  741. </div>
  742. <div class="dropdown">
  743. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="budget" data-bs-toggle="dropdown"
  744. aria-expanded="false">
  745. 接案預算
  746. </button>
  747. <ul class="dropdown-menu" aria-labelledby="budget">
  748. <!-- <li>
  749. <div class="form-check">
  750. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetall">
  751. <label class="form-check-label" for="d_budgetall">
  752. 不拘
  753. </label>
  754. </div>
  755. </li> -->
  756. <li>
  757. <div class="form-check">
  758. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd100">
  759. <label class="form-check-label" for="d_budgetd100">
  760. 100萬以下
  761. </label>
  762. </div>
  763. </li>
  764. <li>
  765. <div class="form-check">
  766. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd200">
  767. <label class="form-check-label" for="d_budgetd200">
  768. 100~200萬
  769. </label>
  770. </div>
  771. </li>
  772. <li>
  773. <div class="form-check">
  774. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd300">
  775. <label class="form-check-label" for="d_budgetd300">
  776. 200~300萬
  777. </label>
  778. </div>
  779. </li>
  780. <li>
  781. <div class="form-check">
  782. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd400">
  783. <label class="form-check-label" for="d_budgetd400">
  784. 300~400萬
  785. </label>
  786. </div>
  787. </li>
  788. <li>
  789. <div class="form-check">
  790. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd500">
  791. <label class="form-check-label" for="d_budgetd500">
  792. 400~500萬
  793. </label>
  794. </div>
  795. </li>
  796. <li>
  797. <div class="form-check">
  798. <input class="form-check-input" type="radio" name="d_budget" id="d_budgetd501">
  799. <label class="form-check-label" for="d_budgetd501">
  800. 500萬以上
  801. </label>
  802. </div>
  803. </li>
  804. </ul>
  805. </div>
  806. <div class="dropdown">
  807. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="arch" data-bs-toggle="dropdown"
  808. aria-expanded="false">
  809. 建築師執照
  810. </button>
  811. <ul class="dropdown-menu" aria-labelledby="arch">
  812. <!-- <li>
  813. <div class="form-check">
  814. <input class="form-check-input" type="radio" name="darch" id="darchall">
  815. <label class="form-check-label" for="darchall">
  816. 不拘
  817. </label>
  818. </div>
  819. </li> -->
  820. <li>
  821. <div class="form-check">
  822. <input class="form-check-input" type="radio" name="darch" id="darchY">
  823. <label class="form-check-label" for="darchY">
  824. </label>
  825. </div>
  826. </li>
  827. </ul>
  828. </div>
  829. <div class="dropdown">
  830. <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="award" data-bs-toggle="dropdown"
  831. aria-expanded="false">
  832. 亞洲設計獎得主
  833. </button>
  834. <ul class="dropdown-menu" aria-labelledby="award">
  835. <!-- <li>
  836. <div class="form-check">
  837. <input class="form-check-input" type="radio" name="award" id="awardall">
  838. <label class="form-check-label" for="awardall">
  839. 不拘
  840. </label>
  841. </div>
  842. </li> -->
  843. <li>
  844. <div class="form-check">
  845. <input class="form-check-input" type="radio" name="award" id="awardY">
  846. <label class="form-check-label" for="awardY">
  847. </label>
  848. </div>
  849. </li>
  850. </ul>
  851. </div>
  852. </div>
  853. </div>
  854. <div class="row">
  855. <div class="col-md-9">
  856. <div class="d-flex flex-wrap align-items-center">
  857. <div class="text-primary d-flex flex-wrap align-items-center search-tab-result">
  858. <!-- <span class="me-3">
  859. <span class="budget">
  860. 接案地區:不拘
  861. <img src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
  862. </span>
  863. </span> -->
  864. <!-- <button type="button" class="btn btn-light btn-sm text-muted px-3">全部清除</button> -->
  865. </div>
  866. <button type="button" id="removeResultBtn" class="btn btn-light btn-sm text-muted px-3">全部清除</button>
  867. </div>
  868. </div>
  869. <div class="col-md-3">
  870. <div class="d-flex justify-content-end search-btn-filter">
  871. <button id="hot">
  872. 人氣
  873. </button>
  874. <span class="mx-1">|</span>
  875. <button id="new">
  876. 最新
  877. </button>
  878. <span class="mx-1">|</span>
  879. <button id="recommend" class="active">
  880. 推薦
  881. </button>
  882. </div>
  883. </div>
  884. </div>
  885. <!-- 讀取圖示 -->
  886. <div class="text-center my-5" id="designerSpinner">
  887. <div class="spinner-border text-primary" role="status">
  888. <span class="visually-hidden">Loading...</span>
  889. </div>
  890. </div>
  891. <!-- 設計師列表 -->
  892. <div class="row mt-5" id="designerList">
  893. <!-- 動態載入 -->
  894. </div>
  895. <!-- 分頁 -->
  896. <div class="d-flex justify-content-center my-5">
  897. <nav aria-label="Page navigation example">
  898. <ul class="pagination border list-pagination">
  899. <li class="page-item">
  900. <a class="page-link" href="#" aria-label="Previous">
  901. <span aria-hidden="true"><</span>
  902. </a>
  903. </li>
  904. <li class="page-item">
  905. <a class="page-link" href="#">1</a>
  906. </li>
  907. <li class="page-item">
  908. <a class="page-link" href="#">2</a>
  909. </li>
  910. <li class="page-item">
  911. <a class="page-link" href="#">3</a>
  912. </li>
  913. <li class="page-item">
  914. <a class="page-link" href="#" aria-label="Next">
  915. <span aria-hidden="true">></span>
  916. </a>
  917. </li>
  918. </ul>
  919. </nav>
  920. </div>
  921. </div>
  922. </div>
  923. </div>
  924. <!-- 動態載入 -->
  925. <div id="btn-box"></div>
  926. <div id="footer" class="d-none d-lg-block"></div>
  927. <!-- jQuery -->
  928. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  929. <!-- Bootstrap -->
  930. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
  931. integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
  932. crossorigin="anonymous"></script>
  933. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
  934. integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
  935. crossorigin="anonymous"></script>
  936. <script src="./js/main.js"></script>
  937. </body>
  938. </html>