index.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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. <!-- Slick -->
  52. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  53. <!-- CSS -->
  54. <link rel="stylesheet" href="../../css/reset.css" />
  55. <link rel="stylesheet" href="../../css/detail.css" />
  56. <link rel="stylesheet" href="../../css/all.css" />
  57. </script>
  58. </head>
  59. <body>
  60. <!-- 動態載入 -->
  61. <div id="topCarousel"></div>
  62. <div id="navbar"></div>
  63. <div class="container d-flex flex-column align-items-center justify-content-center detail-content">
  64. <nav class="d-flex w-100 my-4" aria-label="breadcrumb">
  65. <ol class="breadcrumb px-0 mb-0" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  66. <li class="breadcrumb-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
  67. <a itemprop="name" href="/">
  68. <span>首頁</span>
  69. </a>
  70. <meta itemprop="position" content="1">
  71. </li>
  72. <li class="breadcrumb-item" aria-current="page" itemprop="itemListElement" itemscope=""
  73. itemtype="http://schema.org/ListItem">
  74. <a itemprop="name" href="/builder/lists/">
  75. <span>新建案</span>
  76. </a>
  77. <meta itemprop="position" content="2">
  78. </li>
  79. <li class="breadcrumb-item d-md-flex" aria-current="page" itemprop="itemListElement" itemscope=""
  80. itemtype="http://schema.org/ListItem">
  81. <a id="city" itemprop="name" href="/builder/lists/101-citys/">
  82. <h1 itemprop="name">新北市</h1>
  83. </a>
  84. <meta itemprop="position" content="3">
  85. </li>
  86. <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope=""
  87. itemtype="http://schema.org/ListItem">
  88. <span id="name" itemprop="name">兆美萬海</span>
  89. <meta itemprop="position" content="4">
  90. </li>
  91. </ol>
  92. </nav>
  93. <div class="row w-100 my-4">
  94. <div class="col-12 mb-4">
  95. <div class="p-4 shadow">
  96. <div class="slider-list">
  97. <!-- 輪播 -->
  98. </div>
  99. </div>
  100. </div>
  101. <div class="col-md-6">
  102. <div class="p-4 h-100 shadow intro-section">
  103. <h4 id="builder_name"></h4>
  104. <div class="d-flex justify-content-between">
  105. <div>
  106. <div class="contact-wrapper mt-5 mb-4">
  107. <p class="mb-2">免付費電話</p>
  108. <a id="service_phone" data-ga="Call_To_Builder" href=""></a>
  109. </div>
  110. <div class="d-flex intro-above">
  111. <a href="https://www.leju.com.tw/page_search_result?oid=Lc6b132811dfa8f " target="_blank"
  112. data-ga="Go_To_Price">
  113. <p>
  114. 查詢
  115. <small>實價登錄</small>
  116. </p>
  117. </a>
  118. <!-- <button type="button" class="btn btn-outline-primary py-2 px-4 me-3" id="request_clcik">
  119. 找諮詢
  120. </button>
  121. <button type="button" class="btn btn-outline-primary py-2 px-4" id="calculator_clcik">
  122. 估預算
  123. </button> -->
  124. </div>
  125. </div>
  126. <!-- 雷達圖 canvas -->
  127. <div class="w-50 radar-item">
  128. <canvas id="radar-pc"></canvas>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="col-md-6">
  134. <div class="h-100 shadow intro-section">
  135. <p id="unit_price" class="mb-4"><span class="mark-item"></span> 萬元 / 坪
  136. </p>
  137. <ul>
  138. <li id="construction_company">建 商:<span></span></li>
  139. <li id="builder_type">類 別:<span></span></li>
  140. <li id="configuration">格 局:<span></span></li>
  141. <li id="house_type">類 型:<span></span></li>
  142. <li id="address">地 址:<a href="" target="_blank"></a></li>
  143. <li id="website">網 址:<a href="" target="_blank"></a></li>
  144. <li id="phone">電 話:<span></span></li>
  145. </ul>
  146. </div>
  147. </div>
  148. <div class="col-12">
  149. <h5 class="my-5">建案簡介</h5>
  150. <div id="detail" class="article-content active">
  151. </div>
  152. <div class="article-read-more">
  153. <div class="d-flex justify-content-center w-100 mt-5">
  154. <i class="fa fa-chevron-down" aria-hidden="true"></i>
  155. <span>閱讀更多</span>
  156. <i class="fa fa-chevron-down" aria-hidden="true"></i>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="col-12">
  161. <div class="media-list mt-5 mb-4">
  162. <a href="javascript:void(0)" id="fb" data-ga="Share_Builder_FB">
  163. <img src="../../img/media/fb-o.svg" alt="幸福空間 fb 分享">
  164. </a>
  165. <a href="javascript:void(0)" id="line" data-ga="Share_Builder_Line">
  166. <img src="../../img/media/line.svg" alt="幸福空間 line 分享">
  167. </a>
  168. <a href="javascript:void(0)" id="wechat" data-ga="Share_Builder_Wechat">
  169. <img src="../../img/media/wechat.svg" alt="幸福空間 wechat 分享">
  170. </a>
  171. <a href="javascript:void(0)" id="mail_forward" data-ga="Share_Builder_Email">
  172. <img src="../../img/media/share.svg" alt="幸福空間轉寄">
  173. </a>
  174. <a href="javascript:addToFavorite(2056)" class="like-icon" data-ga="Collect_Builder">
  175. <img class="like-o" src="../../img/media/like-o.svg" alt="幸福空間收藏">
  176. <img class="like" src="../../img/media/like.svg" alt="幸福空間收藏" style="display: none;">
  177. </a>
  178. </div>
  179. </div>
  180. <div class="col-12">
  181. <div class="d-flex align-items-center my-4">
  182. <h5 class="me-5">標籤</h5>
  183. <div class="tag-list"></div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <!-- 動態載入 -->
  189. <div id="btn-box"></div>
  190. <div id="footer" class="d-none d-lg-block"></div>
  191. <!-- jQuery -->
  192. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  193. <!-- Slick -->
  194. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  195. <!-- Bootstrap -->
  196. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
  197. integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
  198. crossorigin="anonymous"></script>
  199. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
  200. integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
  201. crossorigin="anonymous"></script>
  202. <!-- Chart -->
  203. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  204. <script src="../../js/lists.js"></script>
  205. <script src="./js/main.js"></script>
  206. </body>
  207. </html>