updateroomplanner

layouts/news/single.html

@@ -8,8 +8,8 @@
         <div class="d-flex justify-content-between align-items-center">
           <span>{{ .PublishDate.Format "2006-01-02" }}</span>
           <div class="icon-box">
-            <a href=""><img src="/img/icon_fb@2x.png" alt=""></a>
-            <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
+            <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
+            <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
           </div>
         </div>
         <span class="line"></span>

layouts/room_planner/room_planner.html

@@ -79,7 +79,8 @@
         </div>
       </div>
     </section>
-    <section class="room-planner-process">
+    <!-- 桌機版 -->
+    <section class="room-planner-process room-planner-process-destop">
       <img class="room-planner-process-star-yellow" src="/img/room_planner/yellow.png" alt="" width="20">
       <img class="room-planner-process-star-green" src="/img/room_planner/green.png" alt="" width="20">
 
@@ -91,8 +92,8 @@
         <img class="room-planner-process-box_line_01 img-fluid" src="/img/blog/Vector01.png" alt="">
         <div class="container px-0">
           <div class="row px-0 mx-0 justify-content-between">
-            <div class="col-6 col-md-auto">
-              <div>
+            <div class="col-6 col-md-auto" >
+              <div data-gt-target="#scrollTarget1" data-gt-duration="500"data-gt-offset="50">
                 <div class="room-planner-process-icon-number"><img src="/img/room_planner/01.png" alt="" width="38">
                 </div>
                 <div class="room-planner-process-icon">
@@ -103,7 +104,7 @@
               <div class="room-planner-process-box_mb_line"></div>
             </div>
             <div class="col-6 col-md-auto">
-              <div>
+              <div data-gt-target="#scrollTarget2" data-gt-duration="500"data-gt-offset="50">
                 <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt=""
                     width="38"></div>
                 <div class="room-planner-process-icon">
@@ -114,7 +115,7 @@
               <div class="room-planner-process-box_mb_line2"></div>
             </div>
             <div class="col-6 col-md-auto">
-              <div>
+              <div data-gt-target="#scrollTarget3" data-gt-duration="500"data-gt-offset="50">
                 <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/03.png" alt=""
                     width="45"></div>
 
@@ -126,7 +127,7 @@
               <div class="room-planner-process-box_mb_line"></div>
             </div>
             <div class="col-6 col-md-auto">
-              <div>
+              <div data-gt-target="#scrollTarget4" data-gt-duration="500"data-gt-offset="50">
                 <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/04.png" alt=""
                     width="45"></div>
 
@@ -139,77 +140,98 @@
 
             </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=""
-                  width="45"></div>
-              <div class="room-planner-process-icon">
-                <img src="/img/room_planner/Group-14.png" alt="" width="54">
+              <div data-gt-target="#scrollTarget5" data-gt-duration="500"data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt=""
+                    width="45"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-14.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">施工保固</p>
               </div>
-              <p class="room-planner-process-icon-text">施工保固</p>
             </div>
             <div class="col d-md-none d-block">
 
             </div>
           </div>
         </div>
-        <!-- <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">
-                <img src="/img/room_planner/Group-10.png" alt="" width="61">
+      </div>
+    </section>
+    <!-- 手機版 -->
+
+    <section class="room-planner-process room-planner-process-mb">
+      <img class="room-planner-process-star-yellow" src="/img/room_planner/yellow.png" alt="" width="20">
+      <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">
+
+      <div class="room-planner-process-box">
+        <img class="room-planner-process-box_line_01 img-fluid" src="/img/blog/Vector01.png" alt="">
+        <div class="container px-0">
+          <div class="row px-0 mx-0 justify-content-between">
+            <div class="col-6 col-md-auto" >
+              <div data-gt-target="#scrollTarget1-m" data-gt-duration="500"data-gt-offset="20">
+                <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>
+                <p class="room-planner-process-icon-text">需求諮詢</p>
               </div>
-              <p class="room-planner-process-icon-text">需求諮詢</p>
+              <div class="room-planner-process-box_mb_line"></div>
             </div>
-            <div class="room-planner-process-box_mb_line"></div>
-          </div>
-          <div class="col-6 col-md-auto">
-            <div>
-              <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt=""
-                  width="38"></div>
-              <div class="room-planner-process-icon">
-                <img src="/img/room_planner/Group-11.png" alt="" width="54">
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget2-m" data-gt-duration="500"data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/02.png" alt=""
+                    width="38"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-11.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">成家設計</p>
               </div>
-              <p class="room-planner-process-icon-text">成家設計</p>
+              <div class="room-planner-process-box_mb_line2"></div>
             </div>
-            <div class="room-planner-process-box_mb_line2"></div>
-          </div>
-          <div class="col-6 col-md-auto">
-            <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 class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget3-m" data-gt-duration="500"data-gt-offset="20">
+                <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>
+                <p class="room-planner-process-icon-text">設計報價</p>
               </div>
-              <p class="room-planner-process-icon-text">設計報價</p>
+              <div class="room-planner-process-box_mb_line"></div>
             </div>
-            <div class="room-planner-process-box_mb_line"></div>
-          </div>
-          <div class="col-6 col-md-auto">
-            <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 class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget4-m" data-gt-duration="500"data-gt-offset="20">
+                <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>
-              <p class="room-planner-process-icon-text">確認付款</p>
-            </div>
-            <div class="room-planner-process-box_mb_line2"></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=""
-                width="45"></div>
-            <div class="room-planner-process-icon">
-              <img src="/img/room_planner/Group-14.png" alt="" width="54">
             </div>
-            <p class="room-planner-process-icon-text">施工保固</p>
-          </div>
-          <div class="col d-md-none d-block">
+            <div class="col-6 col-md-auto">
+              <div data-gt-target="#scrollTarget5-m" data-gt-duration="500"data-gt-offset="20">
+                <div class="room-planner-process-icon-number text-end"><img src="/img/room_planner/05.png" alt=""
+                    width="45"></div>
+                <div class="room-planner-process-icon">
+                  <img src="/img/room_planner/Group-14.png" alt="" width="54">
+                </div>
+                <p class="room-planner-process-icon-text">施工保固</p>
+              </div>
+            </div>
+            <div class="col d-md-none d-block">
 
+            </div>
           </div>
-        </div> -->
+        </div>
       </div>
     </section>
 
@@ -221,7 +243,7 @@
             <h1 class="room-planner-process-main-title">成家設計服務流程</h1>
           </div>
           <div class="accordion px-0" id="accordionPanelsStayOpenExample">
-            <div class="accordion-item">
+            <div class="accordion-item" id="scrollTarget1-m">
               <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                 <button class="accordion-button fw-bold" type="button" data-bs-toggle="collapse"
                   data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
@@ -358,7 +380,7 @@
                 </div>
               </div>
             </div>
-            <div class="accordion-item">
+            <div class="accordion-item" id="scrollTarget2-m" >
               <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
                   data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
@@ -426,7 +448,7 @@
                 </div>
               </div>
             </div>
-            <div class="accordion-item">
+            <div class="accordion-item" id="scrollTarget3-m">
               <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
                   data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
@@ -514,7 +536,7 @@
                 </div>
               </div>
             </div>
-            <div class="accordion-item">
+            <div class="accordion-item" id="scrollTarget4-m">
               <h2 class="accordion-header" id="panelsStayOpen-headingFour">
                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
                   data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
@@ -571,7 +593,7 @@
                 </div>
               </div>
             </div>
-            <div class="accordion-item">
+            <div class="accordion-item" id="scrollTarget3-m">
               <h2 class="accordion-header" id="panelsStayOpen-headingFive">
                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
                   data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false"
@@ -692,7 +714,7 @@
           <div class="row px-0 mx-0">
             <div class="col-lg-4 ps-0 pe-0">
               <div class="room-planner-process-main-content-left border-E0EE79">
-                <div class="room-planner-process-main-content-left-box">
+                <div id="scrollTarget1" 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">
@@ -808,10 +830,10 @@
                 </div>
               </div>
               <div class="text-end">
-                <img src="/img/room_planner/background02.png" alt="" width="231">
+                <img src="/img/room_planner/background02.png" alt="" width="260">
               </div>
               <div class="room-planner-process-main-content-left border-E0EE79">
-                <div class="room-planner-process-main-content-left-box">
+                <div id="scrollTarget5" class="room-planner-process-main-content-left-box">
                   <!-- <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>
@@ -941,7 +963,7 @@
             </div>
             <div class="col-lg-4 mt-50">
               <div class="room-planner-process-main-content-left border-E0EE79">
-                <div class="room-planner-process-main-content-left-box">
+                <div id="scrollTarget2" 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">
@@ -997,7 +1019,7 @@
               </div>
 
               <div class="room-planner-process-main-content-left border-E0EE79 mt-80">
-                <div class="room-planner-process-main-content-left-box">
+                <div id="scrollTarget3" 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">
@@ -1066,8 +1088,8 @@
                   </div>
                 </div>
               </div>
-              <div class="room-planner-process-main-content-left border-E0EE79 mt-80">
-                <div class="room-planner-process-main-content-left-box">
+              <div class="room-planner-process-main-content-left border-E0EE79 mt-50">
+                <div id="scrollTarget4" 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">

themes/hugo-universal-theme-master/layouts/partials/carousel.html

@@ -36,7 +36,7 @@
 {{ end }} -->
 <div class="container-fluid p-0">
   <div class="news-link">
-    <a href="/news/">【最新消息】 恭喜小寶優居五號店即將於2022年1月1日於新竹市開幕！ 立即看＞</a>
+    <a href="/news/little_treasure_home_announcement_on_peace_of_mind_and_epidemic_prevention">【最新消息】小寶優居｜門市安心防疫公告＞</a>
   </div>
   <div class="slider responsive">
     <div class="slider-item">

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

@@ -1618,6 +1618,16 @@ input[type="search"]::-webkit-search-cancel-button {
 
 /* 成家設計服務-room_planner start */
 /* 成家設計服務-room_planner start */
+.room-planner-process-destop{
+  @media screen and (max-width: $table) {
+  display: none;
+  }
+}
+.room-planner-process-mb{
+  @media screen and (min-width: $desktop) {
+    display: none;
+  }
+}
 .f-78B142-20 {
   color: #78b142;
   font-size: 20px;