新增手機版下方選單

hhh_index/css/style.css

@@ -3410,4 +3410,32 @@ iframe {
   opacity: 0.7 !important;
 }
 
+.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;
+}
+
 /* index End *//*# sourceMappingURL=style.css.map */

hhh_index/css/style.scss

@@ -3380,6 +3380,7 @@ iframe {
     &:hover {
       text-shadow: 1px 2px 4px rgb(188 84 6);
     }
+
     span {
       // background-color: #f5d2b7;
       background-color: var(--sub-color);
@@ -4160,4 +4161,35 @@ iframe {
   }
 }
 
+.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;
+    }
+  }
+}
+
 /* index End */

hhh_index/template/button.html

@@ -27,6 +27,32 @@
   </button> -->
 </div>
 
+<div class="d-md-none justify-content-around mb-menu">
+  <section title="為我推薦設計師">
+    <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="裝修預算評估">
+    <a href="https://hhh.com.tw/about/contact/" target="_blank">
+      <img src="./hhh_index/images/icon/ionic-ios-calculator.svg" alt="">
+      <h4>估預算</h4>
+    </a>
+  </section>
+  <section title="+好物商城">
+    <a href="https://shop.hhh.com.tw/" target="_blank">
+      <img src="./hhh_index/images/icon/feather-shopping-cart.svg" alt="">
+      <h4>+好物</h4>
+    </a>
+  </section>
+  <section>
+    <a href="https://m.hhh.com.tw/users">
+      <img src="./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>
   $(".btn-gotop").click(() => {
     $("html, body").animate(
@@ -35,4 +61,16 @@
       }, 0
     );
   });
+
+  let footerHeight = $("#footer").height();
+  let bodyHeight = $("body").height()
+  // 滑到 footer 區塊隱藏下方選單
+  $(window).scroll(function() {
+    let height = (bodyHeight - footerHeight)-500;
+    if ($(window).scrollTop() >height) {
+      $('.mb-menu').css("opacity","0");
+    } else {
+      $('.mb-menu').css("opacity","1");
+    }
+});
 </script>