新增左下按鈕 & 手機版底部選單

css/all.css

@@ -666,6 +666,7 @@ body {
 }
 .top-carousel.banner-close {
   height: 0;
+  padding: 0;
   overflow: hidden;
   transition-property: height;
   transition-duration: 300ms;
@@ -674,4 +675,111 @@ body {
   background-color: rgb(202, 202, 202);
 }
 
-/* 頂部輪播 End *//*# sourceMappingURL=all.css.map */
+/* 頂部輪播 End */
+/* 左下按紐 Start */
+#btn-box {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+  z-index: 10;
+  font-size: 32px;
+  cursor: pointer;
+}
+@media (max-width: 767px) {
+  #btn-box {
+    bottom: 75px;
+  }
+}
+#btn-box .calculator-btn p,
+#btn-box .shop-btn p {
+  display: none;
+  width: 0px;
+  margin-right: -5px;
+  overflow: hidden;
+  color: #ee751b;
+  font-size: 16px;
+  letter-spacing: 1px;
+  transition: all 0.6s;
+}
+#btn-box .calculator-btn.show a img,
+#btn-box .shop-btn.show a img {
+  width: 22px;
+  margin-left: 3px;
+  position: relative;
+  left: 8px;
+}
+#btn-box .calculator-btn.show a p,
+#btn-box .shop-btn.show a p {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+}
+#btn-box .calculator-btn.show {
+  width: 120px;
+  margin-left: -75px;
+}
+#btn-box .shop-btn.show {
+  width: 95px;
+  margin-left: -50px;
+}
+#btn-box a {
+  color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#btn-box button {
+  width: 45px;
+  height: 45px;
+  margin: 5px 0;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0px 2px 3px #ccc;
+  background: rgba(255, 255, 255, 0.9);
+}
+#btn-box button:hover {
+  transition: all 0.5s;
+  background: rgb(255, 255, 255);
+}
+#btn-box button:hover img {
+  filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
+}
+#btn-box button img {
+  width: 20px;
+}
+#btn-box .gotop-btn img {
+  display: block;
+  margin: auto;
+}
+
+.mb-menu {
+  display: flex;
+  padding: 13px 0 8px;
+  position: fixed;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  transition: all 0.3s;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+}
+.mb-menu a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.mb-menu a h4 {
+  margin: 5px auto 0;
+  color: #34404B;
+  font-size: 16px;
+}
+.mb-menu a img {
+  width: 20px;
+  height: 20px;
+}
+
+/* 左下按紐 End *//*# sourceMappingURL=all.css.map */

css/all.scss

@@ -797,6 +797,7 @@ body {
 
   &.banner-close {
     height: 0;
+    padding: 0;
     overflow: hidden;
     transition-property: height;
     transition-duration: 300ms;
@@ -808,4 +809,137 @@ body {
 
 }
 
-/* 頂部輪播 End */
+/* 頂部輪播 End */
+
+/* 左下按紐 Start */
+
+#btn-box {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+  z-index: 10;
+  font-size: 32px;
+  cursor: pointer;
+
+  @media (max-width: 767px) {
+    bottom: 75px;
+  }
+
+  // 滑動按鈕
+  .calculator-btn,
+  .shop-btn {
+    p {
+      display: none;
+      width: 0px;
+      margin-right: -5px;
+      overflow: hidden;
+      color: #ee751b;
+      font-size: 16px;
+      letter-spacing: 1px;
+      transition: all .6s;
+    }
+
+    &.show {
+      a {
+        img {
+          width: 22px;
+          margin-left: 3px;
+          position: relative;
+          left: 8px;
+        }
+
+        p {
+          display: inline-block;
+          width: 100%;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .calculator-btn {
+    &.show {
+      width: 120px;
+      margin-left: -75px;
+    }
+  }
+
+  .shop-btn {
+    &.show {
+      width: 95px;
+      margin-left: -50px;
+    }
+  }
+
+  a {
+    color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  button {
+    width: 45px;
+    height: 45px;
+    margin: 5px 0;
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0px 2px 3px #ccc;
+    background: rgba(255, 255, 255, 0.9);
+
+    &:hover {
+      transition: all .5s;
+      background: rgb(255, 255, 255);
+    }
+
+    &:hover img {
+      filter: invert(50%) sepia(50%) saturate(4600%) hue-rotate(365deg) brightness(100%) contrast(100%);
+    }
+
+    img {
+      width: 20px;
+    }
+  }
+
+  .gotop-btn {
+    img {
+      display: block;
+      margin: auto;
+    }
+  }
+}
+
+.mb-menu {
+  display: flex;
+  padding: 13px 0 8px;
+  position: fixed;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  transition: all .3s;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+
+  a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    h4 {
+      margin: 5px auto 0;
+      color: #34404B;
+      font-size: 16px;
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+/* 左下按紐 End */

designers/lists/js/main.js

@@ -4,6 +4,7 @@
 // 載入共用 template
 $('#navbar').load('../../template/navbar.html');
 $('#footer').load('../../template/footer.html');
+$('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
 $('#removeResultBtn').hide(); // 隱藏全部清除按鈕

template/button.html

@@ -0,0 +1,141 @@
+<!-- 右下角按鈕區塊 -->
+
+  <button data-gt-target="#top" data-gt-duration="100" data-gt-offset="0" class="gotop-btn" title="GoTop">
+    <!-- <span class="top_img"></span> -->
+    <img src="https://hhh.com.tw/hhh_index/images/icon/feather-chevron-right.svg" alt="">
+  </button>
+
+  <!-- <button title="為我推薦設計師" class="d-none d-md-inline" data-ga="Go_To_Request">
+    <a href="https://hhh.com.tw/about/request/" target="_blank">
+      <img src="./hhh_index/images/icon/feather-file-text.svg" alt="">
+    </a>
+  </button>
+
+  <button title="裝修預算評估" class="d-none d-md-inline" data-ga="Go_To_Calculator">
+    <a href="https://hhh.com.tw/about/calculator/" target="_blank">
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
+    </a>
+  </button>
+
+  <button title="裝修預算諮詢" class="d-none d-md-inline" data-ga="Go_To_Calculator">
+    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
+    </a>
+  </button>
+
+  <button title="+好物商城" class="d-none d-md-inline" data-ga="Go_To_Shop">
+    <a href="https://shop.hhh.com.tw/" target="_blank">
+      <img src="./hhh_index/images/icon/feather-shopping-cart.svg" alt="">
+    </a>
+  </button> -->
+
+  <button title="裝修預算諮詢" class="d-none d-md-inline calculator-btn" data-ga="Go_To_Calculator">
+    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
+      <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-calculator.svg" alt=""
+        style="width: 22px; margin-left: 3px;">
+      <p>裝修計算機</p>
+    </a>
+  </button>
+
+  <button title="+好物商城" class="d-none d-md-inline shop-btn" data-ga="Go_To_Shop">
+    <a href="https://shop.hhh.com.tw/" target="_blank">
+      <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="">
+      <p>+好物</p>
+    </a>
+  </button>
+
+  <!-- 暫時隱藏 -->
+  <!-- <button title="線上諮詢">
+    <a href="https://hhh.com.tw/about/contact/" target="_blank">
+      <img src="./images/icon/simple-hipchat.svg" alt="">
+    </a>
+  </button> -->
+
+
+<div class="d-md-none justify-content-evenly mb-menu">
+  <!-- <section title="為我推薦設計師" data-ga="Go_To_Request">
+    <a href="https://hhh.com.tw/about/request/" target="_blank">
+      <img src="./hhh_index/images/icon/feather-file-text.svg" alt="為我推薦設計師">
+      <h4>填需求</h4>
+    </a>
+  </section>
+  <section title="裝修預算評估" data-ga="Go_To_Calculator">
+    <a href="https://hhh.com.tw/about/calculator/" target="_blank">
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="裝修預算評估">
+      <h4>估預算</h4>
+    </a>
+  </section> -->
+
+  <section title="裝修計算機" data-ga="Go_To_Calculator">
+    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
+      <img src="https://hhh.com.tw/hhh_index/images/icon/calculator_request.svg" alt="裝修計算機">
+      <h4>裝修計算機</h4>
+    </a>
+  </section>
+
+  <section title="+好物商城" data-ga="Go_To_Shop">
+    <a href="https://shop.hhh.com.tw/" target="_blank">
+      <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="+好物商城">
+      <h4>+好物</h4>
+    </a>
+  </section>
+
+  <section data-ga="Go_To_Member">
+    <a href="https://m.hhh.com.tw/users">
+      <img src="https://hhh.com.tw/hhh_index/images/icon/material-people.svg" alt="會員"
+        style="filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(242deg) brightness(91%) contrast(93%);">
+      <h4>會員</h4>
+    </a>
+  </section>
+</div>
+
+<script>
+  $(".gotop-btn").click(() => {
+    $("html, body").animate(
+      {
+        scrollTop: 0,
+      }, 0
+    );
+  });
+
+  // 右下按鈕滑入顯示
+  $(".calculator-btn").hover(function () {
+    $(".calculator-btn").addClass("show");
+  }, function () {
+    $(".calculator-btn").removeClass("show");
+  });
+
+  $(".shop-btn").hover(function () {
+    $(".shop-btn").addClass("show");
+  }, function () {
+    $(".shop-btn").removeClass("show");
+  });
+
+  // 滑到 footer 區塊隱藏下方選單
+  // let footerHeight = $("#footer").height();
+  // let bodyHeight = $("body").height()
+  // $(window).scroll(function () {
+  //   let height = (bodyHeight - footerHeight) - 600;
+  //   if ($(window).scrollTop() > height) {
+  //     $('.mb-menu').css("opacity", "0");
+  //   } else {
+  //     $('.mb-menu').css("opacity", "1");
+  //   }
+  // });
+</script>
+
+<script>
+  document.querySelector('button[data-ga="Go_To_Calculator"]').addEventListener('click', function () {
+    dataLayer.push({
+      'event': 'Go_To_Calculator',
+      'btn_location': 'FixedBTN'
+    });
+  });
+
+  document.querySelector('button[data-ga="Go_To_Shop"]').addEventListener('click', function () {
+    dataLayer.push({
+      'event': 'Go_To_Shop',
+      'btn_location': 'FixedBTN'
+    });
+  });
+</script>

videos/lists/index.html

@@ -56,8 +56,7 @@
   <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="hhh_index/css/slick.css?w=3gygd" />
-  <link rel="stylesheet" type="text/css" href="hhh_index/css/slick-theme.css?dd=3gydg2" />
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
   <!-- CSS -->
   <link rel="stylesheet" href="../../css/reset.css" />
   <link rel="stylesheet" href="../../css/lists.css" />
@@ -66,6 +65,7 @@
 
 <body>
   <!-- 動態載入 -->
+  <div id="topCarousel"></div>
   <div id="navbar"></div>
 
   <!-- searchModal -->
@@ -555,7 +555,7 @@
   <!-- jQuery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <!-- Slick -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.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"

videos/lists/js/main.js

@@ -1,6 +1,8 @@
 // 載入共用 template
 $('#navbar').load('../../template/navbar.html');
 $('#footer').load('../../template/footer.html');
+$('#btn-box').load('../../template/button.html');
+$('#topCarousel').load('../../template/top_carousel.html');
 
 $('#removeResultBtn').hide(); // 隱藏全部清除按鈕