update room_planner

layouts/room_planner/room_planner.html

@@ -84,7 +84,8 @@
       <img class="room-planner-process-star-green" src="/img/room_planner/green.png" alt="" width="20">
 
       <img class="room-planner-process-house" src="/img/room_planner/house.png" alt="">
-      <img class="room-planner-process-ruler2" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/ruler2.png" alt="" width="118">
+      <img class="room-planner-process-ruler2" data-aos="fade-in" data-aos-duration="1000"
+        src="/img/room_planner/ruler2.png" alt="" width="118">
 
       <div class="room-planner-process-box">
         <img class="room-planner-process-box_line_01 img-fluid" src="/img/blog/Vector01.png" alt="">
@@ -92,7 +93,8 @@
           <div class="row px-0 mx-0 justify-content-between">
             <div class="col-6 col-md-auto">
               <div>
-                <div class="room-planner-process-icon-number"><img src="/img/room_planner/01.png" alt="" width="38"></div>
+                <div class="room-planner-process-icon-number"><img src="/img/room_planner/01.png" alt="" width="38">
+                </div>
                 <div class="room-planner-process-icon">
                   <img src="/img/room_planner/Group-10.png" alt="" width="61">
                 </div>
@@ -115,7 +117,7 @@
               <div>
                 <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/03.png" alt=""
                     width="45"></div>
-    
+
                 <div class="room-planner-process-icon">
                   <img src="/img/room_planner/Group-12.png" alt="" width="47">
                 </div>
@@ -127,14 +129,14 @@
               <div>
                 <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/04.png" alt=""
                     width="45"></div>
-    
+
                 <div class="room-planner-process-icon">
                   <img src="/img/room_planner/Group-13.png" alt="" width="58">
                 </div>
                 <p class="room-planner-process-icon-text">確認付款</p>
               </div>
               <div class="room-planner-process-box_mb_line2"></div>
-  
+
             </div>
             <div class="col-6 col-md-auto">
               <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt=""
@@ -145,7 +147,7 @@
               <p class="room-planner-process-icon-text">施工保固</p>
             </div>
             <div class="col d-md-none d-block">
-  
+
             </div>
           </div>
         </div>
@@ -213,7 +215,7 @@
 
     <div class="mt-50 section-room-planner-process-mb-main">
       <div class="about-page section-b-space room-planner-process-mb-main">
-      
+
         <div class="container min">
           <div style="position:relative;" class="room-planner-process-main-title-box border-E0EE79">
             <h1 class="room-planner-process-main-title">成家設計服務流程</h1>
@@ -356,7 +358,7 @@
                   <h2><span class="steup-mb-title">Step 2：</span><span class="step-sub-title"
                       style="background-color:#fff ;">成家設計</span> </h2>
                 </button>
-                <div >
+                <div>
                   <img class="img-fluid" src="/img/room_planner/step2.png" alt="">
                 </div>
               </h2>
@@ -365,7 +367,7 @@
                 <div class="accordion-body">
                   <div class="room-planner-process-main-content-left">
                     <div class="room-planner-process-main-content-left-box">
-          
+
                       <div class="room-planner-process-main-content-left-step">
                         <div class="room-planner-process-main-content-left-step-item d-flex">
                           <div>
@@ -426,7 +428,7 @@
                 <div>
                   <img class="img-fluid" src="/img/room_planner/step3.png" alt="">
                 </div>
-              
+
               </h2>
               <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
                 aria-labelledby="panelsStayOpen-headingThree">
@@ -531,7 +533,7 @@
                             <p class="f-2A2A2A-16-400"><span class="f-649E2E-20-q">現金/匯款付款</span></p>
                             <p class="f-2A2A2A-16-400">訂單確認時<span class="f-649E2E-20-q">50%</span><span
                                 class="f-2b2b2b-18-q">、</span> 系統櫃出貨前付<span class="f-649E2E-20-q">50%</span></p>
-    
+
                           </div>
                         </div>
                         <div class="room-planner-process-main-content-left-step-item d-flex">
@@ -550,7 +552,7 @@
                                 class="f-649E2E-20-q">10%</span></p>
                           </div>
                         </div>
-                      
+
                       </div>
                     </div>
                   </div>
@@ -569,7 +571,8 @@
                   <img class="img-fluid" src="/img/room_planner/step5.png" alt="">
                 </div>
                 <div class="room-planner-process-main-content-step-img text-center">
-                  <img  style="margin-right:80px; margin-top: -10px;" class="img-fluid" src="/img/room_planner/step5-2.png" alt="" width="173">
+                  <img style="margin-right:80px; margin-top: -10px;" class="img-fluid"
+                    src="/img/room_planner/step5-2.png" alt="" width="173">
                 </div>
               </h2>
               <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse"
@@ -644,7 +647,7 @@
                         </div>
                       </div>
                     </div>
-    
+
                   </div>
                 </div>
               </div>
@@ -671,7 +674,7 @@
                 <div class="room-planner-process-main-content-left-box">
                   <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 1</span><span
                       class="step-sub-title" style="background-color:#fff ;">需求諮詢</span> </h2>
-                      <img class="step01_direction" src="/img/room_planner/direction.png" alt="" width="65">
+                  <img class="step01_direction" src="/img/room_planner/direction.png" alt="" width="65">
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -785,7 +788,7 @@
                   <!-- <h2 class="room-planner-process-sub-title text-center">施工保固</h2> -->
                   <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 5</span><span
                       class="step-sub-title" style="background-color:#fff ;">施工保固</span> </h2>
-                    <img class="step05_direction" src="/img/room_planner/direction.png" alt="" width="65">
+                  <img class="step05_direction" src="/img/room_planner/direction.png" alt="" width="65">
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -856,46 +859,54 @@
 
               </div>
             </div>
-            <div style="position:relative; top:-10px;" class="col-lg-4">
-              <div style="width: 107px;position: absolute; right:-22px; top:-100px;"><img class="img-fluid" src="/img/room_planner/start.png" alt=""></div>
+            <div style="position:relative; top:-10px;" class="col-lg-4" id="room-planner-process-main-content-center">
+              <div style="width: 107px;position: absolute; right:-22px; top:-100px;"><img class="img-fluid"
+                  src="/img/room_planner/start.png" alt=""></div>
               <img class="main-content-bg-line" src="/img/room_planner/line.png" alt="">
               <div class="room-planner-process-main-content-left">
                 <div class="room-planner-process-main-content-step-img text-center">
-                  <img class="img-fluid step1-0" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/step1-0.png" alt="">
+                  <div class="step1-0-box" data-aos="fade-in" data-aos-duration="1000">
+                    <img class="img-fluid step1-0 hover_up" src="/img/room_planner/step1-0.png" alt="">
+                  </div>
                 </div>
-                <div class="step1-1-box">
-                  <img class="step1-1" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/step1-1.png" alt="">
+                <div class="step1-1-box" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="step1-1 hover_up" src="/img/room_planner/step1-1.png" alt="">
                 </div>
-                <div class="text-center">
-                  <img class="img-fluid step2" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/step2.png" alt="">
+                <div class="text-center" data-aos="fade-in" data-aos-duration="1000">
+                  <img class="img-fluid step2 hover_up" src="/img/room_planner/step2.png" alt="">
                 </div>
                 <img class="bg01-hand" src="/img/room_planner/background01.png" alt="" width="105">
-                <div>
-                  <img class="step3"  data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/step3.png" alt="">
+                <div data-aos="fade-in" data-aos-duration="1000">
+                  <img class="step3 hover_up" src="/img/room_planner/step3.png" alt="">
                 </div>
                 <div class="room-planner-process-main-content-step-4-6img">
-                  <div class="room-planner-process-main-content-step-img text-end">
-                    <img class="step4 img-fluid"
-                      src="/img/room_planner/step4.png" data-aos="fade-in"  data-aos-duration="1000" alt="">
+                  <div class="room-planner-process-main-content-step-img text-end" data-aos="fade-in"
+                    data-aos-duration="1000">
+                    <img class="step4 img-fluid hover_up" src="/img/room_planner/step4.png" alt="">
                   </div>
-                  <div>
-                    <img class="step5 img-fluid" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/step5.png" alt="">
+                  <div data-aos="fade-in" data-aos-duration="1000">
+                    <img class="step5 img-fluid hover_up" src="/img/room_planner/step5.png" alt="">
                   </div>
                   <div style="position: relative;" class="text-center">
-                    <img class="step5-2"  data-aos="fade-in"  data-aos-duration="1000" class="img-fluid" src="/img/room_planner/step5-2.png" alt="" width="173">
-                    <img class="room-planner-process-main-star-yellow" src="/img/room_planner/yellow.png" alt="" width="20">
-                    <img class="room-planner-process-main-star-green" src="/img/room_planner/green.png" alt="" width="20">
-                    <img class="room-planner-process-main-star-line" src="/img/room_planner/Start3.png" alt="" width="20">
+                    <div data-aos="fade-in" data-aos-duration="1000">
+                      <img class="step5-2 hover_up" class="img-fluid" src="/img/room_planner/step5-2.png" alt=""
+                        width="173">
+                    </div>
+                    <img class="room-planner-process-main-star-yellow" src="/img/room_planner/yellow.png" alt=""
+                      width="20">
+                    <img class="room-planner-process-main-star-green" src="/img/room_planner/green.png" alt=""
+                      width="20">
+                    <img class="room-planner-process-main-star-line" src="/img/room_planner/Start3.png" alt=""
+                      width="20">
                     <div class="meihaochengjia">
-                      <img class="img-fluid" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/finish.png" alt="">
+                      <img class="img-fluid" data-aos="fade-in" data-aos-duration="1000"
+                        src="/img/room_planner/finish.png" alt="">
                     </div>
                   </div>
                 </div>
+                <div>
 
-        
-              <div>
-
-              </div>
+                </div>
               </div>
             </div>
             <div class="col-lg-4 mt-50">
@@ -903,7 +914,7 @@
                 <div class="room-planner-process-main-content-left-box">
                   <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 2</span><span
                       class="step-sub-title" style="background-color:#fff ;">成家設計</span> </h2>
-                      <img class="step02_direction" src="/img/room_planner/direction2.png" alt="" width="65">
+                  <img class="step02_direction" src="/img/room_planner/direction2.png" alt="" width="65">
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -959,7 +970,7 @@
                 <div class="room-planner-process-main-content-left-box">
                   <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 3</span><span
                       class="step-sub-title" style="background-color:#fff ;">設計報價</span> </h2>
-                      <img class="step03_direction" src="/img/room_planner/direction2.png" alt="" width="65">
+                  <img class="step03_direction" src="/img/room_planner/direction2.png" alt="" width="65">
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -1028,7 +1039,7 @@
                 <div class="room-planner-process-main-content-left-box">
                   <h2 class="room-planner-process-sub-title"><span class="stepbox me-4">Step 4</span><span
                       class="step-sub-title" style="background-color:#fff ;">確認付款</span> </h2>
-                      <img class="step04_direction" src="/img/room_planner/direction2.png" alt="" width="65">
+                  <img class="step04_direction" src="/img/room_planner/direction2.png" alt="" width="65">
                   <div class="room-planner-process-main-content-left-step">
                     <div class="room-planner-process-main-content-left-step-item d-flex">
                       <div>
@@ -1062,7 +1073,7 @@
                             class="f-649E2E-20-q">10%</span></p>
                       </div>
                     </div>
-               
+
                   </div>
                 </div>
               </div>
@@ -1071,7 +1082,7 @@
         </div>
         <img class="bg03-table" src="/img/room_planner/background03.png" alt="">
     </section>
-  
+
     <div style="position:relative;" class="bg-F0F6DD mt-50">
       <div class="d-md-none d-block text-center bg-ruler-img">
         <img src="/img/room_planner/ruler.png" alt="" width="123">
@@ -1122,7 +1133,8 @@
           </div>
         </div>
       </section>
-      <img class="fix-img" data-aos="fade-in"  data-aos-duration="1000" src="/img/room_planner/fix.png" alt="" width="53">
+      <img class="fix-img" data-aos="fade-in" data-aos-duration="1000" src="/img/room_planner/fix.png" alt=""
+        width="53">
     </div>
 
     <section style="position:relative;" class="room_planner-sales-service">
@@ -1168,8 +1180,7 @@
                 的裝修服務費，<br>換 <span class="room-planner-service-no-28">5%</span>的安心裝修</p>
             </div>
           </div>
-          <div
-            class="col-md-1 col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
+          <div class="col-md-1 col-lg-2 my-1 my-md-0 divider-wrapper d-flex justify-content-center align-items-center">
             <div class="divider"></div>
           </div>
           <hr class="dotted d-md-none d-block">

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -2625,6 +2625,14 @@ img {
     display: none;
   }
 }
+.hover_up {
+  transition: 0.3s;
+  cursor: pointer;
+}
+.hover_up:hover {
+  transform: translate(0, -20px) !important;
+}
+
 /* 成家設計服務-room_planner end */
 /* 成家知識專欄-categories start */
 .w-80-auto {

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -2634,6 +2634,14 @@ img {
   }
 }
 
+.hover_up {
+  transition: 0.3s;
+  cursor: pointer;
+  &:hover {
+    transform: translate(0, -20px) !important;
+  }
+}
+
 /* 成家設計服務-room_planner end */
 
 /* 成家知識專欄-categories start */