頁面調整

desktopB/goto.js

@@ -2,4 +2,44 @@ $(".banner-slider").slick({
     speed: 1000,
     swipe: true,
     arrows: false,
-  });
+  });
+
+  $("*").each(function (index, element) {
+    // 此元素被點選後執行
+    $(this).click(function (e) {
+      // 取得被點選元素的屬性：data-gt-target
+      var target = $(this).attr("data-gt-target");
+      var duration = $(this).attr("data-gt-duration");
+      var offset = $(this).attr("data-gt-offset");
+  
+      // JS 語法：判斷式
+      // if (條件) {程式區塊}
+      // 當條件成立，會執行程式區塊
+  
+      // 如果 目標有資料 才會執行 { } 內的程式
+      // 避免出現 undefine (未定義 - 不存在的資料)
+      if (target) {
+        //console.log("目標：" + target);
+        //console.log("時間：" + duration);
+        //console.log("位移：" + offset);
+  
+        // 上方位置 = 目標區塊.位移().上方位置
+        var top = $(target).offset().top;
+        //console.log("要前往元素的上方位置：" + top);
+  
+        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+        // parseInt() 將文字轉為數字
+  
+        $("html").stop().animate({
+          scrollTop: top - offset
+        }, parseInt(duration));
+      }
+    });
+  });
+  
+  // 避免動畫與使用者滾輪衝突
+  // html 在滾動滾輪時 停止 html 所有效果
+  $("html").on("mousewheel", function () {
+    $("html").stop();
+  });
+  

desktopB/index.html

@@ -37,15 +37,15 @@
                 <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp" alt=""></a>
             </div>
             <div class="link">
-                <a href=""><img src="./img/logo/facebook (3).webp" alt=""></a>
-                <a href=""><img src="./img/logo/line.webp" alt=""></a>
+                <a href="https://www.facebook.com/hhhfb"><img src="./img/logo/facebook (3).webp" alt=""></a>
+                <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/logo/line.webp" alt=""></a>
             </div>
         </div>
         <hr class="hr  bg-white" style="opacity:1">
         <div id="text">
             <div class="banner-slider d-flex align-items-center justify-content-center">
                 <div class="banner1">
-                    <div class="banner-titleh1" >馬上預約設計師媒合</div>
+                    <div class="banner-titleh1">馬上預約設計師媒合</div>
                     <div class="process-box">
                         
                         <div class="box">
@@ -68,7 +68,7 @@
                             <div class="box-text">媒合成功</div>
                         </div>
                     </div>
-                    <img class="icondown"  src="./img/black.png" alt="">
+                    <img class="icondown" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" src="./img/black.png"  src="./img/black.png" alt="">
                 </div>
                 <div class="banner2">
                     <div class="banner-titleh1" >馬上預約設計師媒合</div>
@@ -94,7 +94,7 @@
                             <div class="box-text">媒合成功</div>
                         </div>
                     </div>
-                    <img class="icondown"  src="./img/black.png" alt="">
+                    <img class="icondown" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" src="./img/black.png" src="./img/black.png" alt="">
                 </div>
                 <div class="banner3">
                     <div class="banner-titleh1" >馬上預約設計師媒合</div>
@@ -120,7 +120,7 @@
                             <div class="box-text">媒合成功</div>
                         </div>
                     </div>
-                    <img class="icondown"  src="./img/black.png" alt="">
+                    <img class="icondown" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" src="./img/black.png" src="./img/black.png" alt="">
                 </div>
                 
                
@@ -321,8 +321,8 @@
 
         <div id="footer">
             <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
-            <a href="x">｜聯絡我們｜</a>
-            <a href="">｜關於本站｜</a>
+            <a href="https://hhh.com.tw/about/contact/">｜聯絡我們｜</a>
+            <a href="https://hhh.com.tw/about/">｜關於本站｜</a>
         </div>
     </div>
 

mobileB/goto.js

@@ -10,4 +10,43 @@ $(".feedback-slider1").slick({
     dotsClass: 'slick-dots',
     speed: 1000,
     swipe: true,
-  });
+  });
+  $("*").each(function (index, element) {
+    // 此元素被點選後執行
+    $(this).click(function (e) {
+      // 取得被點選元素的屬性：data-gt-target
+      var target = $(this).attr("data-gt-target");
+      var duration = $(this).attr("data-gt-duration");
+      var offset = $(this).attr("data-gt-offset");
+  
+      // JS 語法：判斷式
+      // if (條件) {程式區塊}
+      // 當條件成立，會執行程式區塊
+  
+      // 如果 目標有資料 才會執行 { } 內的程式
+      // 避免出現 undefine (未定義 - 不存在的資料)
+      if (target) {
+        //console.log("目標：" + target);
+        //console.log("時間：" + duration);
+        //console.log("位移：" + offset);
+  
+        // 上方位置 = 目標區塊.位移().上方位置
+        var top = $(target).offset().top;
+        //console.log("要前往元素的上方位置：" + top);
+  
+        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+        // parseInt() 將文字轉為數字
+  
+        $("html").stop().animate({
+          scrollTop: top - offset
+        }, parseInt(duration));
+      }
+    });
+  });
+  
+  // 避免動畫與使用者滾輪衝突
+  // html 在滾動滾輪時 停止 html 所有效果
+  $("html").on("mousewheel", function () {
+    $("html").stop();
+  });
+  

mobileB/index.html

@@ -39,16 +39,19 @@
                     <a href="https://hhh.com.tw/"><img src="./img/logo/logo-main-1-1.webp" alt=""></a>
                 </div>
                 <div class="menu-btn1" >
-                    <img  style="margin-right:5vw ;" src="./img/logo/facebook (3).webp" alt="">
-                    <img  src="./img/logo/line.webp" alt="">
+                   <a href="https://www.facebook.com/hhhfb"></a> <img  style="margin-right:5vw ;" src="./img/logo/facebook (3).webp" alt="">
+                    <a href="https://line.me/ti/p/%40ovs4341s"></a><img  src="./img/logo/line.webp" alt="">
                 </div>
                 <hr style="opacity: 1; ">
             <div class="container-fluid" style="padding:0;margin:0 ">
             <div class="banner-slider">
                 <div class="banner1">
-                    <div style="padding-top:20vw">
+                    <div class="bannertitlebox" >
                         <div class="banner-titleh1" >馬上預約</div>
                         <div class="banner-titleh1">設計師媒合</div>
+                        <div style="width: 100vw;">
+                            <img class="black" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" src="./img/black.png" alt="">
+                        </div>
                         <div class="process-box">
                             <div class="box">
                                 <img src="./img/process/box1.png" alt="">
@@ -62,8 +65,8 @@
                             </div>
                             <div class="box">
                                 <img src="./img/process/box3.png" alt="">
-                                <div class="box-text">設計公司會</div>
-                                <div class="box-text"> 主動與屋主</div>
+                                <div class="box-text">設計公司與</div>
+                                <div class="box-text"> 屋主主動聯繫</div>
                             </div>
                             <div class="box">
                                 <img src="./img/process/box4.png" alt="">
@@ -78,6 +81,9 @@
                     <div style="padding-top:20vw">
                         <div class="banner-titleh1" >馬上預約</div>
                         <div class="banner-titleh1">設計師媒合</div>
+                        <div style="width: 100vw;">
+                            <img class="black" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" src="./img/black.png" alt="">
+                        </div>
                         <div class="process-box">
                             <div class="box">
                                 <img src="./img/process/box1.png" alt="">
@@ -106,6 +112,9 @@
                     <div style="padding-top:20vw">
                         <div class="banner-titleh1" >馬上預約</div>
                         <div class="banner-titleh1">設計師媒合</div>
+                        <div style="width: 100vw;">
+                            <img class="black" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" src="./img/black.png" alt="">
+                        </div>
                         <div class="process-box">
                             <div class="box">
                                 <img src="./img/process/box1.png" alt="">
@@ -311,8 +320,8 @@
     <div id="footer">
         <p>幸福空間 版權所有 &copy; Gorgeous Space Co.Ltd.</p>
         <p>All Rights Reserved.</p>
-        <a href="x">｜聯絡我們</a>
-        <a href="">｜關於本站｜</a>
+        <a href="https://hhh.com.tw/about/contact/">｜聯絡我們</a>
+        <a href="https://hhh.com.tw/about/">｜關於本站｜</a>
     </div>
 
 

mobileB/style.css

@@ -74,23 +74,42 @@ body .btn-main:hover {
 }
 
 #banner-box {
-  height: 80vh;
+  height: 50vh;
   overflow: hidden;
   position: relative;
 }
 
+@media screen and (max-width: 767px) {
+  #banner-box {
+    height: 90vh;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  #banner-box {
+    height: 100vh;
+  }
+}
+
 #banner-box hr {
   width: 100vw;
   position: absolute;
-  top: 12vw;
+  top: 7vw;
   z-index: 5;
   height: 2px;
   background: #fff;
 }
 
+@media screen and (max-width: 767px) {
+  #banner-box hr {
+    top: 12vw;
+  }
+}
+
 #banner-box .logo {
   padding: 5px;
-  margin-bottom: 5px;
+  margin-bottom: 6px;
+  padding-left: 10px;
   position: absolute;
   z-index: 5;
 }
@@ -99,6 +118,28 @@ body .btn-main:hover {
   width: 128px;
 }
 
+@media screen and (max-width: 767px) {
+  #banner-box .logo {
+    padding-left: 10px;
+  }
+}
+
+#banner-box .bannertitlebox {
+  padding-top: 10vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner-box .bannertitlebox {
+    padding-top: 20vw;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #banner-box .bannertitlebox {
+    padding-top: 20vw;
+  }
+}
+
 #banner-box .menu-btn1 {
   padding: 10px;
   position: absolute;
@@ -109,7 +150,7 @@ body .btn-main:hover {
 
 #banner-box .menu-btn1 img {
   margin: 2px;
-  width: 6vw;
+  width: 4vw;
   -webkit-filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
           filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
   -webkit-transition: 0.3s;
@@ -121,9 +162,15 @@ body .btn-main:hover {
           filter: none;
 }
 
+@media screen and (max-width: 767px) {
+  #banner-box .menu-btn1 img {
+    width: 6vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #banner-box {
-    height: 80vh;
+    height: 90vh;
   }
 }
 
@@ -135,19 +182,29 @@ body .btn-main:hover {
   color: #fff;
 }
 
-@media screen and (max-width: 1024px) {
-  #banner-box .banner-slider .slick-dots {
-    font-size: 48px;
-  }
-}
-
 #banner-box .banner-slider .banner1,
 #banner-box .banner-slider .banner2,
 #banner-box .banner-slider .banner3 {
   width: 100vw;
-  height: 80vh;
+  height: 50vh;
+  background-size: contain;
   background-repeat: no-repeat;
-  background-size: 100vw 70vh;
+  background-size: 100vw 50vh;
+}
+
+@media screen and (max-width: 767px) {
+  #banner-box .banner-slider .banner1,
+  #banner-box .banner-slider .banner2,
+  #banner-box .banner-slider .banner3 {
+    height: 80vh;
+    background-size: 100vw 70vh;
+  }
+}
+
+#banner-box .banner-slider .banner1 .black,
+#banner-box .banner-slider .banner2 .black,
+#banner-box .banner-slider .banner3 .black {
+  margin: 1vw auto;
 }
 
 #banner-box .banner-slider .banner1 .banner-titleh1,
@@ -155,8 +212,8 @@ body .btn-main:hover {
 #banner-box .banner-slider .banner3 .banner-titleh1 {
   text-align: center;
   color: #fff;
-  font-size: 25px;
-  font-weight: 900;
+  font-size: 30px;
+  font-weight: normal;
 }
 
 #banner-box .banner-slider .banner1 .process-box,
@@ -164,10 +221,22 @@ body .btn-main:hover {
 #banner-box .banner-slider .banner3 .process-box {
   display: -ms-grid;
   display: grid;
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
-  width: 70vw;
-  margin: auto;
+  width: 90vw;
+  -ms-grid-columns: (1fr)[4];
+      grid-template-columns: repeat(4, 1fr);
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 767px) {
+  #banner-box .banner-slider .banner1 .process-box,
+  #banner-box .banner-slider .banner2 .process-box,
+  #banner-box .banner-slider .banner3 .process-box {
+    -ms-grid-columns: (1fr)[2];
+        grid-template-columns: repeat(2, 1fr);
+    width: 65vw;
+    margin: 0 auto;
+    width: 70vw;
+  }
 }
 
 #banner-box .banner-slider .banner1 .process-box .box-text,
@@ -175,17 +244,16 @@ body .btn-main:hover {
 #banner-box .banner-slider .banner3 .process-box .box-text {
   font-family: 微軟正黑體;
   text-align: center;
-  font-size: 12px;
+  font-size: 16px;
   font-weight: 900;
   color: #fff;
-  padding-right: 5vw;
 }
 
 @media screen and (max-width: 767px) {
   #banner-box .banner-slider .banner1 .process-box .box-text,
   #banner-box .banner-slider .banner2 .process-box .box-text,
   #banner-box .banner-slider .banner3 .process-box .box-text {
-    font-size: 14px;
+    font-size: 15px;
   }
 }
 
@@ -200,14 +268,23 @@ body .btn-main:hover {
 #banner-box .banner-slider .banner1 .process-box img,
 #banner-box .banner-slider .banner2 .process-box img,
 #banner-box .banner-slider .banner3 .process-box img {
-  width: 28vw;
+  margin: 0 auto;
+  width: 15vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner-box .banner-slider .banner1 .process-box img,
+  #banner-box .banner-slider .banner2 .process-box img,
+  #banner-box .banner-slider .banner3 .process-box img {
+    width: 28vw;
+  }
 }
 
 @media screen and (max-width: 767px) {
   #banner-box .banner-slider .banner1,
   #banner-box .banner-slider .banner2,
   #banner-box .banner-slider .banner3 {
-    height: 80vh;
+    height: 90vh;
     background-size: cover;
     background-position: center center;
   }
@@ -217,7 +294,7 @@ body .btn-main:hover {
   #banner-box .banner-slider .banner1,
   #banner-box .banner-slider .banner2,
   #banner-box .banner-slider .banner3 {
-    height: 80vh;
+    height: 90vh;
   }
 }
 
@@ -226,11 +303,11 @@ body .btn-main:hover {
 }
 
 #banner-box .banner-slider .banner2 {
-  background-image: url(./img/banner/002.webp);
+  background-image: url(./img/banner/001.webp);
 }
 
 #banner-box .banner-slider .banner3 {
-  background-image: url(./img/banner/003.webp);
+  background-image: url(./img/banner/001.webp);
 }
 
 #contact-us p {
@@ -360,6 +437,7 @@ body .btn-main:hover {
 }
 
 #contact-us #contact-form #facebook {
+  border-radius: 3px;
   margin: 15px auto;
   width: 85vw;
   height: 60px;

mobileB/style.scss

@@ -62,47 +62,70 @@ body {
     }
 }
 
-
 #banner-box {
-    height: 80vh;
+    height: 50vh;
     overflow: hidden;
-position: relative;
-hr{
-    width: 100vw;
-    position: absolute;
-    top: 12vw;
-    z-index: 5;
-    height: 2px;
-    background:#fff;
-
-}
-        .logo {
-            padding: 5px;
-            margin-bottom: 5px;
-            position: absolute;
-            z-index:5;
-            img {
-                width: 128px;
-            }
+    position: relative;
+    @media screen and(max-width:$moblie) {
+        height: 90vh;
+    }
+    @media screen and(max-width:550px) {
+        height: 100vh;
+    }
+    hr {
+        width: 100vw;
+        position: absolute;
+        top: 7vw;
+        z-index: 5;
+        height: 2px;
+        background: #fff;
+        @media screen and(max-width:$moblie) {
+            top:12vw;
         }
-        .menu-btn1 {
-            padding: 10px;
-            position: absolute;
-            right:5px;
-            z-index:5;
-            top:5px;
-            img{
-              margin: 2px;
+    }
+    .logo {
+        padding: 5px;
+        margin-bottom: 6px;
+        padding-left: 10px;
+        position: absolute;
+        z-index: 5;
+        img {
+            width: 128px;
+        }
+        @media screen and(max-width:$moblie) {
+            padding-left: 10px;
+        }
+    }
+    .bannertitlebox{
+        padding-top: 10vw;
+        @media screen and(max-width:$moblie) {
+            padding-top: 20vw;
+        }
+        @media screen and(max-width:400px) {
+            padding-top: 20vw;
+        }
+    }
+    .menu-btn1 {
+        padding: 10px;
+        position: absolute;
+        right: 5px;
+        z-index: 5;
+        top: 5px;
+        img {
+            margin: 2px;
+            width: 4vw;
+            filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
+            transition: 0.3s;
+            &:hover {
+                filter: none;
+            }
+            @media screen and(max-width:$moblie) {
                 width: 6vw;
-                filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
-                transition: 0.3s;
-                &:hover{
-                    filter:none;
-                }
             }
         }
+    }
     @media screen and(max-width:$moblie) {
-        height: 80vh;
+        height: 90vh;
     }
     .banner-slider {
         .slick-dots {
@@ -110,69 +133,87 @@ hr{
             ::before {
                 color: #fff;
             }
-
-            @media screen and(max-width:$table) {
-                font-size: 48px;
-            }
         }
         .banner1,
         .banner2,
         .banner3 {
-            
             width: 100vw;
-            height: 80vh;
-            // background-size: contain;
+            height: 50vh;
+            background-size: contain;
             background-repeat: no-repeat;
-            background-size: 100vw 70vh;
+            background-size: 100vw 50vh;
+            @media screen and(max-width:$moblie) {
+                height: 80vh;
+                background-size: 100vw 70vh;
+            }
+            
+             
+            
+            .black{
+                margin: 1vw auto;
+            }
             .banner-titleh1 {
                 text-align: center;
                 color: #fff;
-                font-size: 25px;
-                font-weight: 900;
-              
+                font-size: 30px;
+           font-weight: normal;
             }
             .process-box {
                 display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                width: 70vw;
-                margin: auto;
+                width: 90vw;
+                grid-template-columns: repeat(4, 1fr);
+            margin: 0 auto;
+                @media screen and(max-width:$moblie) {
+                    grid-template-columns: repeat(2, 1fr);
+                    width: 65vw;
+                    margin: 0 auto;
+                    width: 70vw;
+                }
+                
+                 
                 .box-text {
                     font-family: 微軟正黑體;
                     text-align: center;
-                    font-size: 12px;
+                    font-size: 16px;
                     font-weight: 900;
                     color: $Font-color;
-                    padding-right: 5vw;
+                    // padding-right: 5vw;
+                    
                     @media screen and(max-width:$moblie) {
-                        font-size: 14px;
+                        font-size: 15px;
                     }
                     @media screen and(max-width:400px) {
                         font-size: 12px;
                     }
                 }
                 img {
-                    width: 28vw;
+                    margin: 0 auto;
+                        width: 15vw;
+                    @media screen and(max-width:$moblie) {
+                        width: 28vw;
+                    }
+
                 }
             }
 
             @media screen and(max-width:$moblie) {
-                height: 80vh;
+                height: 90vh;
                 background-size: cover;
                 background-position: center center;
             }
 
             @media screen and(max-width:$table) {
-                height: 80vh;
+                height: 90vh;
             }
         }
         .banner1 {
             background-image: url(./img/banner/001.webp);
         }
         .banner2 {
-            background-image: url(./img/banner/002.webp);
+            background-image: url(./img/banner/001.webp);
         }
         .banner3 {
-            background-image: url(./img/banner/003.webp);
+            background-image: url(./img/banner/001.webp);
         }
     }
 }
@@ -277,6 +318,7 @@ hr{
             margin: 0 auto;
         }
         #facebook {
+            border-radius: 3px;
             margin: 15px auto;
             width: 85vw;
             height: 60px;