syuanyuri
/
hhh_new


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
							<!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> -->

  <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>

  <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" />
  <meta property="og:image" content="">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@幸福空間">
  <meta name="twitter:title" content="幸福空間">
  <meta name="twitter:description" content="">
  <meta name="twitter:creator" content="幸福空間">
  <meta name="twitter:image" content="https://hhh.com.tw/images/logo-232x44.png">

  <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" />
  <!-- Swiper -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <!-- Lightgallery -->
  <link href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/css/lightgallery-bundle.min.css" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="../../css/reset.css" />
  <link rel="stylesheet" href="../../css/all.css" />
  <link rel="stylesheet" href="../../css/detail.css" />
  </script>
</head>

<body>
  <!-- 動態載入 -->
  <div id="topCarousel"></div>
  <div id="navbar"></div>

  <div class="container d-flex flex-column align-items-center justify-content-center detail-content">
    <nav class="d-flex w-100 my-4" aria-label="breadcrumb">
      <ol class="breadcrumb px-0 mb-0" itemscope="" itemtype="http://schema.org/BreadcrumbList">
        <li class="breadcrumb-item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
          <a itemprop="name" href="/">
            <span>首頁</span>
          </a>
          <meta itemprop="position" content="1">
        </li>
        <li class="breadcrumb-item" aria-current="page" itemprop="itemListElement" itemscope=""
          itemtype="http://schema.org/ListItem">
          <a itemprop="name" href="/builder/lists/">
            <span>新建案</span>
          </a>
          <meta itemprop="position" content="2">
        </li>
        <li class="breadcrumb-item d-md-flex" aria-current="page" itemprop="itemListElement" itemscope=""
          itemtype="http://schema.org/ListItem">
          <a id="city" itemprop="name" href="/builder/lists/101-citys/">
            <h1 itemprop="name">新北市</h1>
          </a>
          <meta itemprop="position" content="3">
        </li>
        <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope=""
          itemtype="http://schema.org/ListItem">
          <span id="name" itemprop="name">兆美萬海</span>
          <meta itemprop="position" content="4">
        </li>
      </ol>
    </nav>

    <div class="row w-100 my-4">
      <div class="col-12 mb-4">
        <div class="p-4 shadow">
          <!-- <div class="slider-list" id="lightgallery">
          </div> -->

          <div class="swiper swiper-list" id="lightgallery">
            <div class="swiper-wrapper slider-list">
              <!-- 輪播 -->
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-4 h-100 shadow intro-section">
          <h4 id="builder_name"></h4>
          <div class="d-flex justify-content-between">
            <div>
              <div class="contact-wrapper mt-5 mb-4">
                <p class="mb-2">免付費電話</p>
                <a id="service_phone" data-ga="Call_To_Builder" href=""></a>
              </div>

              <div class="d-flex intro-above">
                <a href="https://www.leju.com.tw/page_search_result?oid=Lc6b132811dfa8f " target="_blank"
                  data-ga="Go_To_Price">
                  <p>
                    查詢
                    <small>實價登錄</small>
                  </p>
                </a>
                <!-- <button type="button" class="btn btn-outline-primary py-2 px-4 me-3" id="request_clcik">
                  找諮詢
                </button>
                <button type="button" class="btn btn-outline-primary py-2 px-4" id="calculator_clcik">
                  估預算
                </button> -->
              </div>
            </div>

            <!-- 雷達圖 canvas -->
            <div class="w-50 radar-item">
              <canvas id="radar-pc"></canvas>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="h-100 shadow intro-section">
          <p id="unit_price" class="mb-4"><span class="mark-item"></span> 萬元 / 坪
          </p>

          <ul>
            <li id="construction_company">建 商：<span></span></li>
            <li id="builder_type">類 別：<span></span></li>
            <li id="configuration">格 局：<span></span></li>
            <li id="house_type">類 型：<span></span></li>
            <li id="address">地 址：<a href="" target="_blank"></a></li>
            <li id="website">網 址：<a href="" target="_blank"></a></li>
            <li id="phone">電 話：<span></span></li>
          </ul>
        </div>
      </div>

      <div class="col-12">
        <h5 class="my-5">建案簡介</h5>

        <div id="detail" class="article-content active">
        </div>

        <div class="article-read-more">
          <div class="d-flex justify-content-center w-100 mt-5">
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
            <span>閱讀更多</span>
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="media-list mt-5 mb-4">
          <a href="javascript:void(0)" id="fb" data-ga="Share_Builder_FB">
            <img src="../../img/media/fb-o.svg" alt="幸福空間 fb 分享">
          </a>
          <a href="javascript:void(0)" id="line" data-ga="Share_Builder_Line">
            <img src="../../img/media/line.svg" alt="幸福空間 line 分享">
          </a>
          <a href="javascript:void(0)" id="wechat" data-ga="Share_Builder_Wechat">
            <img src="../../img/media/wechat.svg" alt="幸福空間 wechat 分享">
          </a>
          <a href="javascript:void(0)" id="mail_forward" data-ga="Share_Builder_Email">
            <img src="../../img/media/share.svg" alt="幸福空間轉寄">
          </a>
          <a href="javascript:addToFavorite(2056)" class="like-icon" data-ga="Collect_Builder">
            <img class="like-o" src="../../img/media/like-o.svg" alt="幸福空間收藏">
            <img class="like" src="../../img/media/like.svg" alt="幸福空間收藏" style="display: none;">
          </a>
        </div>
      </div>

      <div class="col-12">
        <div class="d-flex align-items-center my-4">
          <h5 class="me-5">標籤</h5>

          <div class="tag-list"></div>
        </div>
      </div>

      <div class="col-12">
        <h5 class="me-5 my-4">推薦建案</h5>
        <!-- 瀑布流排版 Masonry -->
        <div class="other-list mb-5">
          <div class="container px-0">
            <div class="row" data-masonry='{"percentPosition": true }'>
            </div>
          </div>

          <!-- 讀取圖示 -->
          <div class="my-5 spinners">
            <img src="./img/loading.svg" alt="" class="d-flex mx-auto">
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <!-- 建案影片 Modal -->
  <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-body p-0">
          <iframe id="videoFrame" width="100%" height="300"
            src="https://www.youtube.com/embed/GQrppVgwz5o?si=pcivgLQnaCSMGlZc" title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>

  <!-- Slick -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.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="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
  <!-- Lightgallery -->
  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/lightgallery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/plugins/thumbnail/lg-thumbnail.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.0/plugins/zoom/lg-zoom.min.js"></script>
  <!-- Chart -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  <script src="../../js/lists.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>