choozmo
/
New-Bhouse-Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							<!DOCTYPE html>
<html lang="en">

<head>
  {{ partial "headers.html" . }}
</head>

<body>
  <!-- <div class="header-template"></div> -->
  {{ partial "nav.html" . }}

  <section class="bhouseweb_loc_banner">
    <div class="card bg-transparent text-white border-0 rounded-0">
      <img src="/img/bn_portfolio2x.png" class="banner-img card-img" alt="..." />
      <div class="d-flex justify-content-end bt_container">
        <div class="bt_slogan text-center">
          <img src="/img/chevron-double-down (1).svg" alt="" />
        </div>
      </div>
      <img class="bt_slogan_portfolio" src="/img/bt_slogan_portfolio_h@2x.png" alt="" />
    </div>
  </section>
  <div class="bhouseweb_loc_content">
    <section class="bhouseweb_loc_sec01">
      <div class="bhouseweb_loc_box">
        <p class="fw-bold m-0">類型</p>
        <div class="bhouseweb_loc_type">
          <input style="opacity: 0;" class="type ms-1" type="radio" id="m_全部類型" name="m_type" value="全部類型" checked />
          <label for="m_全部類型" class="bhouseweb_item_type select">全部</label>
          <input style="opacity: 0;" class="type ms-1" type="radio" id="m_大樓" name="m_type" value="大樓" />
          <label id="building" for="m_大樓" class="bhouseweb_item_type">大樓</label>
          <input style="opacity: 0;" class="type ms-1" type="radio" id="m_透天" name="m_type" value="透天" />
          <label id="house" for="m_透天" class="bhouseweb_item_type">透天</label>
        </div>
      </div>
      <div class="bhouseweb_loc_box">
        <p class="fw-bold m-0">坪數</p>
        <div class="bhouseweb_loc_type">
          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_全部坪數" name="m_ping" value="全部坪數" checked />
          <label class="bhouseweb_item_type select" for="m_全部坪數">全部</label>

          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20坪以下" name="m_ping" value="20坪以下" />
          <label class="bhouseweb_item_type" for="m_20坪以下">20坪以下</label>

          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_20-35坪" name="m_ping" value="20-35坪" />
          <label class="bhouseweb_item_type" for="m_20-35坪">20-35坪</label>

          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_36-50坪" name="m_ping" value="36-50坪" />
          <label class="bhouseweb_item_type" for="m_36-50坪">36-50坪</label>

          <input style="opacity: 0;" class="ping ms-1" type="radio" id="m_51坪以上" name="m_ping" value="51坪以上" />
          <label class="bhouseweb_item_type" for="m_51坪以上">51坪以上</label>

          <!-- <a class="bhouseweb_item_type select">全部</a>
            <a class="bhouseweb_item_type">20坪以下</a>
            <a class="bhouseweb_item_type">20-35坪</a>
            <a class="bhouseweb_item_type">36-50坪</a>
            <a class="bhouseweb_item_type">50坪以上</a>
            <a class="bhouseweb_item_type">50坪以上</a>
            <a class="bhouseweb_item_type">50坪以上</a>
            <a class="bhouseweb_item_type">50坪以上</a> -->
        </div>
      </div>
      <div class="bhouseweb_loc_box">
        <p class="fw-bold m-0">預算</p>
        <div class="bhouseweb_loc_type">
          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_全部預算" name="m_budget" value="全部預算"
            checked />
          <label class="bhouseweb_item_type select" for="m_全部預算">全部</label>

          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_59萬以下" name="m_budget" value="59萬以下" />
          <label class="bhouseweb_item_type" for="m_59萬以下">59萬以下</label>

          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_60-79萬" name="m_budget" value="60-79萬" />
          <label class="bhouseweb_item_type" for="m_60-79萬">60-79萬</label>

          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_80-99萬" name="m_budget" value="80-99萬" />
          <label class="bhouseweb_item_type" for="m_80-99萬">80-99萬</label>

          <input style="opacity: 0;" class="budget ms-1" type="radio" id="m_100萬以上" name="m_budget" value="100萬以上" />
          <label class="bhouseweb_item_type" for="m_100萬以上">100萬以上</label>

          <!-- <a class="bhouseweb_item_type">全部</a>
            <a class="bhouseweb_item_type">59萬以下</a>
            <a class="bhouseweb_item_type">60-79萬</a>
            <a class="bhouseweb_item_type">80-99萬</a>
            <a class="bhouseweb_item_type">100萬</a> -->
        </div>
      </div>
      <div class="bhouseweb_loc_box">
        <p class="fw-bold m-0">格局</p>
        <div class="bhouseweb_loc_type">
          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_全部格局" name="m_rooms" value="全部格局" checked />
          <label class="bhouseweb_item_type select" for="m_全部格局">全部</label>

          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_兩房" name="m_rooms" value="兩房" />
          <label class="bhouseweb_item_type" for="m_兩房">兩房</label>

          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_三房" name="m_rooms" value="三房" />
          <label class="bhouseweb_item_type" for="m_三房">三房</label>

          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房" name="m_rooms" value="四房" />
          <label class="bhouseweb_item_type" for="m_四房">四房</label>

          <input style="opacity: 0;" class="rooms ms-1" type="radio" id="m_四房以上" name="m_rooms" value="四房以上" />
          <label class="bhouseweb_item_type" for="m_四房以上">四房以上</label>

          <!-- <a class="bhouseweb_item_type">全部</a>
            <a class="bhouseweb_item_type">兩房</a>
            <a class="bhouseweb_item_type">三房</a>
            <a class="bhouseweb_item_type">四房</a>
            <a class="bhouseweb_item_type">四房以上</a> -->
        </div>
      </div>
    </section>

    <section class="p-1">
      <div class="bhouseweb_loc_search_box">
        <form class="bhouseweb_search_form d-flex">
          <div class="bhouseweb_search_img">
            <i class="fas fa-search"></i>
          </div>
          <input id="bhouseweb_search" class="me-md-2" type="search" placeholder="搜 尋「北 歐 風」「工 業 風」「三 代 同 堂」「寵 物」"
            aria-label="Search" />
          <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
        </form>
      </div>
    </section>
  </div>
  <hr class="bhouseweb_loc_line" />
  <div class="bhouseweb_loc_content" style="overflow-x: hidden">
    <div class="bhouseweb_loc_sec02">
      <div class="update_info row px-0 mx-0" id="articleList">
        {{ $paginator := .Paginate .Data.Pages }} {{ range $paginator.Pages }}
        <div class="col-12 col-sm-6 p-1">
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0">
            <a href="{{ .RelPermalink }}">
              <img class="img-fluid" src="{{ .Params.Image | relURL }}" alt="" />
              <div class="slide_item_text">
                <p>{{ replace .Title "｜小寶優居・成家故事" "" }}</p>
              </div>
              <div class="sec02-p-dec p-1 mt-1 text-center">
                <h5 class="card-title">
                  {{ replace .Title "｜小寶優居・成家故事" "" }}
                </h5>
                <p class="card-text">{{ .Description | safeHTML }}</p>
              </div>
            </a>
          </div>
        </div>
        {{ end }}
      </div>
    </div>
  </div>

  <p class="article__readMore text-center fw-bold my-3">
    看更多案例
    <span style="font-size: 16px" class="fw-normal me-2"> &or;</span>
  </p>

  <!-- <div class="footer-template"></div> -->

  {{ partial "footer.html" . }}

  <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
    crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <script async defer src="./js/index.js"></script> -->
  {{ partial "scripts.html" . }}
  <script src="/js/cz_filter.js"></script>

  <script>
    window.onload = function () {
      document.getElementById('bhouseweb_search').value = '';

      // 取得 apiData
      let contentsData = [];
      // let category = localStorage.getItem('category');

      (function getContentsData() {
        // 線上版網址 http://192.53.174.202:9001/api/
        // 本地端網址 http://localhost:9001/api/
        fetch('http://localhost:9001/api/contents?url=/collection').then(res => res.json()).then(list => {
          contentsData = list;
          console.log('contentsData', contentsData);
          // filterCategory();
        })
      })();

      let matchContent = "";

      // 增加延遲(待輸入完成後再進行搜尋)
      function delay(fn, ms) {
        let timer = 0
        return function (...args) {
          clearTimeout(timer)
          timer = setTimeout(fn.bind(this, ...args), ms || 0)
        }
      }

      // 搜尋
      $('#bhouseweb_search').keyup(delay(function (e) {
        console.log(1)
        console.log('Time elapsed!', this.value);
        // 取得輸入框的值
        let inputVal = $('#bhouseweb_search').val();
        matchContent = "";
        let falseItem = [];
        contentsData.map((item, index) => {
          // 搜尋特定分類文章
          // if (item.categories) {
          //   if (item.categories.includes(category)) {
          // 搜尋所有分類文章
          if (item.title.includes(inputVal) || item.description.includes(inputVal)) {
            matchContent += ` 
        <div class="col-12 col-sm-6 p-1"> \
          <div class="bhouseweb_loc_sec02_card secimg mx-0 px-0 border-0"> \
            <a href="${item.url}"> \
              <img \
                alt="${item.title}" \
                src="${item.image}" \
                layout="responsive"> \
            <div class="slide_item_text"> \
                <p>${item.title}</p>\
            </div>  \
            <div class="sec02-p-dec p-1 mt-1 text-center">\
              <h5 class="card-title">${item.title}</h5>\
              <p>${item.description}</p>\
            </div>\
            </div> \
          </a> \
          </div> \
        </div>`;

          } else {
            falseItem.push(item);
          }
          if (falseItem.length === contentsData.length) {
            matchContent = `
        <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: 0 auto 25px;justify-content: center;">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
          </svg>
          <div>
            找不到符合條件的作品集
          </div>
        </div>
        `;
          }
          //   }
          // }
        })
        document.getElementById("articleList").innerHTML = matchContent;
      }, 500));

      // 離開頁面前清除 localStorage
      $(window).bind('beforeunload', function () {
        return window.localStorage.removeItem('type');
      }
      );
    }
  </script>
</body>

</html>