調整需求

css/request.css

@@ -1198,10 +1198,39 @@
   color: #3366ff;
 }
 
+#rightSidebar {
+  position: sticky;
+}
+
 .text-primary {
   color: #ee751b !important;
 }
 
+.main-title {
+  padding: 20px 40px;
+  margin: 40px 22px 0;
+  background-image: url("../img/banner-05.png");
+  background-color: rgba(0, 0, 0, 0.6);
+  background-blend-mode: multiply;
+  background-size: cover;
+  background-position: center center;
+  color: #fff;
+}
+@media (max-width: 767px) {
+  .main-title {
+    margin: 5px 30px 0;
+  }
+}
+.main-title h2,
+.main-title h3 {
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+.main-title h3 {
+  margin-top: 1rem;
+  font-size: 1.25rem;
+}
+
 .btn-outline-primary {
   color: #ee751b;
   background-color: transparent;

css/request.scss

@@ -1368,10 +1368,40 @@
   }
 }
 
+#rightSidebar {
+  position: sticky;
+}
+
 .text-primary {
   color: #ee751b !important;
 }
 
+.main-title {
+  padding: 20px 40px;
+  margin: 40px 22px 0;
+  background-image: url("../img/banner-05.png");
+  background-color: rgba(0, 0, 0, 0.6);
+  background-blend-mode: multiply;
+  background-size: cover;
+  background-position: center center;
+  color: #fff;
+
+  @media (max-width: 767px) {
+    margin: 5px 30px 0;
+  }
+
+  h2,
+  h3 {
+    line-height: 1.5;
+    letter-spacing: 1px;
+  }
+
+  h3 {
+    margin-top: 1rem;
+    font-size: 1.25rem;
+  }
+}
+
 .btn-outline-primary {
   color: #ee751b;
   background-color: transparent;

index.html

@@ -251,8 +251,17 @@
       </a>
     </div>
 
-    <div class="row">
+    <div class="row flex-column-reverse flex-md-row">
       <div class="col-md-7 col-lg-8">
+        <div class="d-none d-md-block main-title">
+          <h2>
+            您有裝修設計需求？ <br> 想了解裝修預算方案？
+          </h2>
+          <h3>
+            填寫您的裝修需求，立即獲得裝修計算方案與幸福經紀人專人服務
+          </h3>
+        </div>
+
         <!-- 文章列表 -->
         <div class="main px-3 py-3 py-md-5">
           <div class="d-flex justify-content-center">
@@ -269,13 +278,22 @@
       </div>
 
       <div class="col-md-5 col-lg-4">
-        <div class="card form-block px-0">
+        <div class="d-block d-md-none main-title">
+          <h2>
+            您有裝修設計需求？ <br> 想了解裝修預算方案？
+          </h2>
+          <h3>
+            填寫您的裝修需求，立即獲得裝修計算方案與幸福經紀人專人服務
+          </h3>
+        </div>
+
+        <div id="rightSidebar" class="card form-block px-md-0">
           <card-title class="d-none d-md-block">
             <a href="https://hhh.com.tw/" class="logo">
               <img alt="logo" src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" />
             </a>
           </card-title>
-          <div class="card-body px-0 px-xl-3">
+          <div class="card-body px-md-0 px-xl-3">
             <form>
               <div class="mb-3">
                 <label for="name" class="form-label">姓名*</label>
@@ -2317,7 +2335,7 @@
             let badges = item.tags.map(tag => `<p>${tag}</p>`).join(' ');
             let itemStr = JSON.stringify(item);
             resultHtml +=
-              `<div class="col-12 col-sm-6 col-md-12 col-lg-4 pb-4">
+              `<div class="col-12 col-sm-6 col-md-12 col-lg-6 col-xl-4 pb-4">
                 <button data-item='${itemStr}'
                   class="modal-button h-100" data-bs-toggle="modal" data-bs-target="#columnModal">
                   <div class="card overflow-hidden h-100">
@@ -2355,6 +2373,34 @@
       $('#columnModal .content').html(item.content)
       $('#columnModal .cover-img').attr("src", `${item.image}`)
     }
+
+    function setRightSidebarSticky() {
+
+      let height = $('#rightSidebar').outerHeight();
+      console.log('height', height);
+
+      $('#rightSidebar').css({
+        'position': 'sticky',
+        'top': `-${height - 935}px`
+      });
+    }
+
+    setRightSidebarSticky();
+
+    $(window).resize(function () {
+      console.log('重新計算右側 div 的高度:', setRightSidebarSticky());
+    });
+
+    // 監聽 accordion-item 點擊事件
+    $('.accordion-item').click(function () {
+      // setRightSidebarSticky();
+
+      $('#rightSidebar').css({
+        'position': 'static',
+        'top': '0'
+      });
+    });
+
   </script>
 
   <script> // 2024/05/27 新增 FAQ 按鈕點擊 GA