syuanyuri
/
calculator_request


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

  <!-- Google tag (gtag.js)  ga4-->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-97LXHMH1GQ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-97LXHMH1GQ');
  </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="/hhh_index/images/favicon.ico" />
  <!--<link rel="stylesheet" href="hhh_index/css/reset.css" /> -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
  <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
  <!-- <link rel="stylesheet" type="text/css" href="hhh_index/css/slick.css" />
  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick-theme.css" /> -->
  <!-- <link rel="stylesheet" href="hhh_index/css/list-style.css" /> -->
  <link rel="stylesheet" href="./css/style.css?a=2" />
  <link rel="stylesheet" href="./css/request.css?v=2" />
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->

  <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&display=swap" rel="stylesheet" />

  <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>
</head>

<body style="overflow-x: hidden" id="top" class="wholeBody">
  <!-- 結果頁面 -->
  <div class="container-fluid" style="background: #FAFAFA;">
    <div class="container result-content">
      <a href="https://hhh.com.tw/" class="d-flex justify-content-center logo">
        <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
      </a>
      <h3 class="bg-text">BudgetBudget</h3> <!-- 背景文字 -->
      <div class="row line">
        <div class="col-12 col-lg-8 position-relative">
          <!-- 只有全室裝修需顯示分類 tab -->
          <ul class="tab-list">
            <li>
              <a href="javascript:;" class="tab-item">簡裝</a>
            </li>
            <li>
              <a href="javascript:;" class="tab-item">精裝</a>
            </li>
            <li>
              <a href="javascript:;" class="tab-item">豪華</a>
            </li>
            <div id="underline"></div>
          </ul>
          <div class="card-item">
            <div class="row main-info">
              <div class="col-6 col-xl-5 d-flex align-items-center justify-content-center">
                <div class="chart-box">
                  <canvas id="chart"></canvas>
                </div>
                <p class="chart-text">
                  <span id="total_value">8500</span> 萬
                </p>
                <p class="chart-text range">
                  <span id="total_min">800</span> 萬 <br>
                  <span class="tilde">～</span> <br>
                  <span id="total_max">1500</span> 萬
                </p>
              </div>
              <div class="col-5 d-flex align-items-center justify-content-center h-100">
                <div class="price-card">
                  <ul class="main">
                    <li>基礎工程 <span id="basic_engineering"></span> 萬</li>
                    <li class="d-inline d-sm-none">/</li>
                    <li>硬體工程 <span id="hardware_engineering"></span> 萬</li>
                    <li>軟裝家居 <span id="decorated_home"></span> 萬</li>
                    <li class="d-inline d-sm-none">/</li>
                    <li>家電設備 <span id="home_appliances"></span> 萬</li>
                  </ul>
                  <ul class="partial">
                    <li>
                      <p>廚房翻新</p> <span id="kitchen_renovation"></span> 萬
                    </li>
                    <li>
                      <p>浴室翻新</p> <span id="bathroom_refurbishment"></span> 萬
                    </li>
                    <li>
                      <p>天花板</p> <span id="ceiling"></span> 萬
                    </li>
                    <li>
                      <p>門窗翻新</p> <span id="windows_and_doors"></span> 萬
                    </li>
                    <li>
                      <p>地板翻新</p> <span id="floor_renewal"></span> 萬
                    </li>
                  </ul>
                  <small>僅供參考，實際以設計師報價為主。</small>
                </div>
              </div>
              <div class="col-12 info-card">
                <div class="row">
                  <div class="col-12 col-lg-3 border-end d-flex align-items-center px-md-4">
                    <ul>
                      <li>裝修所在地：<span id="city_val">台北市</span></li>
                      <li>坪數：<span id="area_val">28</span> 坪</li>
                    </ul>
                  </div>
                  <div class="col-12 col-lg-6 border-end caption">
                    <section>
                      <h3 id="ca_type">全室裝修</h3>
                      <small id="ca_type_description">適合新成屋、<br>老屋翻新</small>
                    </section>
                    <p id="ca_type_content">說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容說明內容</p>
                  </div>
                  <div class="col-12 col-lg-3 d-flex">
                    <button class="reset-btn">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                        class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                        <path
                          d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                      </svg>
                      重新填寫
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 info-item">
          <h3 class="mb-1">幸福經紀人將透過簡訊與手機 <br> 與您聯繫並確認您的裝修設計需求</h3>
          <h4 class="ligh-text">節省 50% 時間，幸福輕裝修，實現夢想生活</h4>
          <div class="img-block">
            <img src="./img/result-bg.png" alt="">
            <a href="https://hhh.com.tw/minordecor" target="_blank" class="link-img">
              <img src="./img/Group 156.svg" alt="" class="btn">
              <img src="./img/Group 157.svg" alt="" class="text">
              <img src="./img/Ellipse 14.svg" alt="" class="bg">
            </a>
          </div>
        </div>
      </div>

      <div class="style-list">
        <p>您可以先看看喜歡的裝修風格</p>
        <div class="row">
          <div class="col-6 col-md-3">
            <a href="https://hhh.com.tw/photos/lists/modern-style/" target="_blank">
              <img src="https://hhh.com.tw/assets/images/photo/style/modern.jpg" alt="" class="img-fluid">
              <p>現代風</p>
            </a>
          </div>
          <div class="col-6 col-md-3">
            <a href="https://hhh.com.tw/photos/lists/nordic-style/" target="_blank">
              <img src="https://hhh.com.tw/assets/images/photo/style/nordic.jpg" alt="" class="img-fluid">
              <p>北歐風</p>
            </a>
          </div>
          <div class="col-6 col-md-3 mt-3 mt-md-0">
            <a href="https://hhh.com.tw/photos/lists/american-style/" target="_blank">
              <img src="https://hhh.com.tw/assets/images/photo/style/american.jpg" alt="" class="img-fluid">
              <p>美式風</p>
            </a>
          </div>
          <div class="col-6 col-md-3 mt-3 mt-md-0">
            <a href="https://hhh.com.tw/photos/lists/mashup-style/" target="_blank">
              <img src="https://hhh.com.tw/assets/images/photo/style/mashup.jpg" alt="" class="img-fluid">
              <p>混搭風</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 動態載入 -->
  <!-- <div id="btn-box"></div>
  <div id="footer"></div> -->

  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3RJHTZ" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <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 src="
  https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js
  "></script>
  <!-- <script src="./js/index.js"></script> -->
  <script>
    let resultData = JSON.parse(localStorage.getItem('calculator_result')); // 取得運算結果
    if (resultData) {
      setValue(resultData.ca_type);
    }

    var tabType = ''; // 全室裝修類別
    var totalValue = 0; // 總金額
    var chartData = []; // 圖表數值
    var chartLabels = [];
    var chartCutout = null;

    // 將數字四捨五入並轉成千分位表示
    function formatNumber(number) {
      let result = (number / 10000).toFixed(1); // 保留小數點後一位
      result = result.toLocaleString(); // 轉成千分位
      return result;
    }

    function setValue(type) {
      console.log('resultData', resultData);
      let data = resultData;
      chartData = []; // 一開始先清空

      $('#ca_type').text(data.ca_type)
      $('#city_val').text(data.city);
      $('#area_val').text(data.area);

      if (type !== "局部裝修") {
        if ($(window).width() > 991) {
          // 電腦版
          chartCutout = 100;
        } else {
          // 手機版
          chartCutout = 70;
        }
        chartLabels = ['基礎工程', '硬體工程', '軟裝家居', '家電設備'];

        $('.chart-text:first').show();
        $('.chart-text.range').hide();
        $('.price-card .main').show();
        $('.price-card .partial').hide();
      } else {
        chartCutout = 120;
        chartLabels = ['廚房翻新', '浴室翻新', '天花板', '門窗翻新', '地板翻新'];

        $('.chart-text:first').hide();
        $('.chart-text.range').show();
        $('.price-card .main').hide();
        $('.price-card .partial').css('display', 'grid');

        $('#kitchen_renovation').text(data.kitchen_renovation);
        $('#bathroom_refurbishment').text(data.bathroom_refurbishment);
        $('#ceiling').text(data.ceiling);
        $('#windows_and_doors').text(data.windows_and_doors);
        $('#floor_renewal').text(data.floor_renewal);

        $('#total_min').text(data.down_price);
        $('#total_max').text(data.up_price);
      }

      if (type === "輕裝修") {
        $('.tab-list').hide();
        $('.link-img').show();
        $('.img-block').show();
        $('.ligh-text').show();
        $('.main-info').removeClass('type');
        $('#ca_type_description').text("適合新成屋");
        $('#ca_type_content').text("不更動房間格局、含系統櫃、軟裝、地板工程等");
        $('#basic_engineering').text(formatNumber(data.basic_engineering)); // 基礎工程
        $('#hardware_engineering').text(formatNumber(data.hardware_engineering)); // 硬體工程
        $('#decorated_home').text(formatNumber(data.decorated_home)); // 軟裝家居
        $('#home_appliances').text(formatNumber(data.home_appliances)); // 家電設備

        chartData.push(data.basic_engineering);
        chartData.push(data.hardware_engineering);
        chartData.push(data.decorated_home);
        chartData.push(data.home_appliances);

        totalValue = data.basic_engineering + data.hardware_engineering + data.decorated_home + data.home_appliances;
        $('#total_value').text(formatNumber(totalValue));

      } else if (type === "全室裝修") {
        // 預設點擊簡裝
        setTimeout(() => {
          if (tabType === '') {
            $('.tab-item:first').click();
            return;
          }
        }, 100)

        if ($(window).width() > 991) {
          // 電腦版
          $('.link-img').hide();
          $('.img-block').show();
        } else {
          // 手機版
          $('.img-block').hide();
        }

        $('.ligh-text').hide();
        $('.main-info').addClass('type');
        $('.tab-list').css('display', 'flex');
        $('#ca_type_description').html("適合毛胚屋、<br> 老屋翻新");
        $('#ca_type_content').text("不更動房間格局，含系統櫃、油漆、地板工程等");

        if (tabType === "簡裝") {
          updateData("type_basic", data);
        } else if (tabType === "精裝") {
          updateData("type_advanced", data);
        } else if (tabType === "豪華") {
          updateData("type_all", data);
        }

      } else if (type === "局部裝修") {

        if ($(window).width() > 991) {
          // 電腦版
          chartCutout = 120;
        } else {
          // 手機版
          chartCutout = 90;
        }

        if ($(window).width() > 991) {
          // 電腦版
          $('.link-img').hide();
          $('.img-block').show();
        } else {
          // 手機版
          $('.img-block').hide();
        }

        $('.tab-list').hide();
        $('.link-img').hide();
        $('.ligh-text').hide();
        $('.main-info').removeClass('type');
        $('#ca_type_description').text("");
        $('#ca_type_content').text("只針對室內特定區域裝修，如廚房、衛浴空間等");

        chartData.push(data.kitchen_renovation);
        chartData.push(data.bathroom_refurbishment);
        chartData.push(data.ceiling);
        chartData.push(data.windows_and_doors);
        chartData.push(data.floor_renewal);

        // 計算總數範圍
        let totalMin = 0;
        let totalMax = 0;

        for (let i = 0; i < chartData.length; i++) {
          const [min, max] = chartData[i].split('-');
          totalMin += parseInt(min);
          totalMax += parseInt(max);
        }

        const totalRange = `${totalMin}-${totalMax}`;

        // 圖表無法顯示範圍數值，需改為平均值(如局部裝修 18-28)
        chartData = chartData.map(getAverage);
      }

      setChart(); // 繪製 chart 圖表
    }

    // 更新全室裝修數值
    function updateData(type, data) {
      console.log();
      $('#basic_engineering').text(formatNumber(data[type].basic_engineering)); // 基礎工程
      $('#hardware_engineering').text(formatNumber(data[type].hardware_engineering)); // 硬體工程
      $('#decorated_home').text(formatNumber(data[type].decorated_home)); // 軟裝家居
      $('#home_appliances').text(formatNumber(data[type].home_appliances)); // 家電設備
      totalValue = data[type].basic_engineering + data[type].hardware_engineering + data[type].decorated_home + data[type].home_appliances;
      $('#total_value').text(formatNumber(totalValue)); // 總金額

      chartData.push(data[type].basic_engineering);
      chartData.push(data[type].hardware_engineering);
      chartData.push(data[type].decorated_home);
      chartData.push(data[type].home_appliances);
    }

    // 將範圍轉換為平均值
    function getAverage(range) {
      const [min, max] = range.split('-');
      return (parseInt(min) + parseInt(max)) / 2;
    }

    $('.tab-item').click(function () {
      self.tabType = $(this).text();
      setValue(resultData.ca_type);

      // 下底線位移
      $('.tab-item').addClass('active');
      $('.tab-item').css('color', '#959595');
      $(this).css('color', '#fff');
      let linkOffset = $(this)[0].offsetLeft - 4;
      $('#underline').animate({
        left: linkOffset
      }, 300);
    });

    // 設置下底線位置
    function setUnderlinePosition() {
      let activeLink = $('.tab-item.active');
      let linkOffset = activeLink[0].offsetLeft - 4;
      $('#underline').css('left', linkOffset);
    }

    // 監聽視窗寬度
    $(window).resize(function () {
      // 動態更新下底線位置
      if (tabType !== "") {
        setUnderlinePosition();
      }
    });

    /* 圖表 chart.js */
    var chart;
    function setChart() {
      let canvas = document.getElementById('chart'); // 獲取 <canvas> 元素
      let ctx = canvas.getContext('2d');

      // 檢查是否已經存在圖表，如果有則先銷毀
      if (chart) {
        chart.destroy();
      }

      chart = new Chart(ctx, { // 創建圖表
        type: 'doughnut',
        data: {
          labels: chartLabels,
          datasets: [{
            data: chartData,
            backgroundColor: [
              'rgba(172, 166, 152, 1)',
              'rgba(186, 151, 102, 1)',
              'rgba(150, 140, 117, 1)',
              'rgba(226, 208, 168, 1)',
            ],
            borderColor: [
              'rgba(172, 166, 152, 1)',
              'rgba(186, 151, 102, 1)',
              'rgba(150, 140, 117, 1)',
              'rgba(226, 208, 168, 1)',
            ],
            borderWidth: 1
          }]
        },
        options: {
          cutout: chartCutout, // 圖表線條寬度(數值越高越細)
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false // 隱藏顏色說明
            }
          }
        }
      });
    }


    /* 重新填寫 */
    $('.reset-btn').on('click', function () {


      dataLayer.push({
        'event': 'refill',
        'btn_location': 'Calculator_Request_Page'
      });

      console.log('reset-btn');
      window.location.href = "https://hhh.com.tw/calculator_request/index.html";
    });
  </script>
</body>

</html>