Merge branch 'feature'

content/規劃師服務/index.md

@@ -24,16 +24,28 @@ url: "/room_planner"
   <div class="container">
     <div class="d-flex flex-column flex-md-row justify-content-center title-box">
       <div>
-        <span>▶諮詢階段</span>
-        <span>▶設計階段</span>
-        <span>▶報價階段</span>
+        <a href="#container-1">
+          <i class="fa fa-play"></i> 諮詢階段
+        </a>
+        <a href="#container-2">
+          <i class="fa fa-play"></i> 設計階段
+        </a>
       </div>
       <div>
-        <span>▶付款階段</span>
-        <span>▶施工階段</span>
+        <a href="#container-3">
+          <i class="fa fa-play"></i> 報價階段
+        </a>
+        <a href="#container-4">
+          <i class="fa fa-play"></i> 付款階段
+        </a>
+      </div>
+      <div>
+        <a href="#container-5">
+          <i class="fa fa-play"></i> 施工階段
+        </a>
       </div>
     </div>
-    <div class="d-flex flex-column align-items-center header" style="margin-bottom: 50px;">
+    <div class="d-flex flex-column align-items-center header">
       <div class="d-flex">
         <div style="margin-right: 30px">
           <img src="/img/room_planner4/Header1.png" alt="" class="header-img">
@@ -57,7 +69,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div class="d-flex">
+    <div id="container-1" class="d-flex" style="padding-top: 100px;">
       <div>
         <p class="d-flex justify-content-center align-items-center number-1">
           01 <br> 諮詢階段
@@ -87,9 +99,9 @@ url: "/room_planner"
             </p>
             <span class="example">▼ 總預算參考<br />（含設計、裝修、系統櫃、家具）</span>
             <ul>
-              <li>【無需拆除工程】屋況，約 2-4 萬/坪。</li>
-              <li>【需要拆除工程】屋況，約 2.5-5 萬/坪。</li>
-              <li>【需要拆除工程與管線更新】屋況，約 3-6 萬/坪。</li>
+              <li>【無需拆除工程】<br>屋況，約 2-4 萬/坪。</li>
+              <li>【需要拆除工程】<br>屋況，約 2.5-5 萬/坪。</li>
+              <li>【需要拆除工程與管線更新】<br>屋況，約 3-6 萬/坪。</li>
             </ul>
           </section>
         </div>
@@ -116,7 +128,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div class="d-flex" style="margin-top: 8rem;">
+    <div id="container-2" class="d-flex" style="padding-top: 8rem;">
       <div>
         <p class="d-flex justify-content-center align-items-center number-2">
           02 <br> 設計階段
@@ -160,7 +172,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div class="d-flex" style="margin-top: 10rem;">
+    <div id="container-3" class="d-flex" style="padding-top: 10rem;">
       <div>
         <p class="d-flex justify-content-center align-items-center number-3">
           03 <br> 報價階段
@@ -172,7 +184,7 @@ url: "/room_planner"
             <section>
               <img src="/img/room_planner4/3-1.png" alt="" class="img-style" style="margin-bottom: 15px;">
               <h4>裝修</h4>
-              <p class="text-box">裝修報價：我們安排安心裝修師傅與你聯繫，依照設計定案圖面，到府進行裝修場勘（約 1
+              <p class="text-box">裝修報價：<br>我們安排安心裝修師傅與你聯繫，依照設計定案圖面，到府進行裝修場勘（約 1
                 個小時）<br>場勘一週後，你、我們、安心裝修師傅，一起到門市討論裝修訂單，訂單確認簽名後，才進行付款。</p>
             </section>
           </div>
@@ -186,7 +198,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div class="d-flex number-mt">
+    <div id="container-4" class="d-flex number-mt">
       <div>
         <p class="d-flex justify-content-center align-items-center number-4">
           04 <br> 付款階段
@@ -206,7 +218,7 @@ url: "/room_planner"
               <li>現金/匯款付款(簽約付 50%、木工完成後 40%、驗收後 10%)</li>
               <li>合約內小寶優居收取裝修總價 5% 為安心裝修服務費</li>
             </ul>
-            <span class="example">【裝修總價 5% 的服務費，換 100% 的安心裝修】</span>
+            <span class="example" style="color: black;">【裝修總價 5% 的服務費，換 100% 的安心裝修】</span>
             <ul style="list-style: none; margin: 0;">
               <li>∨ 嚴選裝修師傅</li>
               <li>∨ 嚴選裝修材料</li>
@@ -234,7 +246,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div class="d-flex" style="margin-top: 7rem;">
+    <div id="container-5" class="d-flex" style="padding-top: 8rem;">
       <div>
         <p class="d-flex justify-content-center align-items-center number-5">
           05 <br> 施工階段
@@ -259,11 +271,11 @@ url: "/room_planner"
             </p>
             <span class="example">▼ 整體完工時間參考</span>
             <ul>
-              <li>【無需拆除工程】屋況，約 2-3 個月。</li>
+              <li>【無需拆除工程】<br>屋況，約 2-3 個月。</li>
               <li>
-                【需要拆除工程】屋況，約 2.5-3.5 個月。
+                【需要拆除工程】<br>屋況，約 2.5-3.5 個月。
               </li>
-              <li>【需要拆除工程與管線更新】屋況，約 3-4 個月。</li>
+              <li>【需要拆除工程與管線更新】<br>屋況，約 3-4 個月。</li>
             </ul>
           </section>
         </div>
@@ -283,9 +295,9 @@ url: "/room_planner"
             </div>
             <span class="example">「小寶優居，陪你一輩子」</span>
             <ul>
-              <li>沙發、床架實木骨架：保固 10 年，永久保修</li>
-              <li>系統櫃、五金：保固 10 年，永久保修</li>
-              <li>靠墊坐墊泡棉：保固 3 年，永久保修</li>
+              <li>沙發、床架實木骨架：<br>保固 10 年，永久保修</li>
+              <li>系統櫃、五金：<br>保固 10 年，永久保修</li>
+              <li>靠墊坐墊泡棉：<br>保固 3 年，永久保修</li>
               <li>實木家具：保固 5 年，永久保修</li>
               <li>裝修：保固 1 年，永久保修</li>
             </ul>

themes/hugo-lamp/static/css/chuz.css

@@ -67,6 +67,7 @@ html {
   line-height: 1.15;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  scroll-behavior: smooth;
 }
 
 article,
@@ -2851,8 +2852,15 @@ section-style .sub-title,
   border-bottom: 2px solid;
 }
 
-.section25 .title-box span {
-  padding-right: 10px;
+.section25 .title-box a {
+  padding-right: 20px;
+  color: #78ad42;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.section25 .title-box a:hover {
+  opacity: 0.7;
 }
 
 @media (max-width: 768px) {
@@ -2864,12 +2872,13 @@ section-style .sub-title,
     margin-bottom: 40px;
   }
 
-  .section25 .title-box div:nth-child(1) {
+  .section25 .title-box div:nth-child(1),
+  .section25 .title-box div:nth-child(2) {
     margin-bottom: 0;
     border-bottom: none;
   }
 
-  .section25 .title-box div:nth-child(2) {
+  .section25 .title-box div:nth-child(3) {
     padding-bottom: 40px;
   }
 }
@@ -2935,8 +2944,8 @@ section-style .sub-title,
 }
 
 .section25 .number-5::before {
-  height: 910px;
-  bottom: -32.1rem;
+  height: 1050px;
+  bottom: -36.5rem;
 }
 
 @media (max-width: 1200px) {
@@ -2951,8 +2960,8 @@ section-style .sub-title,
   }
 
   .section25 .number-5::before {
-    height: 970px;
-    bottom: -34rem;
+    height: 1080px;
+    bottom: -37.5rem;
   }
 }
 
@@ -2968,8 +2977,8 @@ section-style .sub-title,
   }
 
   .section25 .number-5::before {
-    height: 1030px;
-    bottom: -35.8rem;
+    height: 1100px;
+    bottom: -38.1rem;
   }
 }
 
@@ -2995,8 +3004,8 @@ section-style .sub-title,
   }
 
   .section25 .number-5::before {
-    height: 1340px;
-    bottom: -45.5rem;
+    height: 1440px;
+    bottom: -48.6rem;
   }
 }
 
@@ -3013,7 +3022,7 @@ section-style .sub-title,
 
   .section25 .number-3::before {
     height: 650px;
-    bottom: -23.3rem;
+    bottom: -23.4rem;
   }
 
   .section25 .number-4::before {
@@ -3022,8 +3031,8 @@ section-style .sub-title,
   }
 
   .section25 .number-5::before {
-    height: 1400px;
-    bottom: -46.8rem;
+    height: 1480px;
+    bottom: -49.4rem;
   }
 
   .section25 .number-1,
@@ -3066,8 +3075,8 @@ section-style .sub-title,
   }
 
   .section25 .number-5::before {
-    height: 1620px;
-    bottom: -53.7rem;
+    height: 1630px;
+    bottom: -54rem;
   }
 }
 
@@ -3110,7 +3119,7 @@ section-style .sub-title,
 }
 
 .section25 .number-5::after {
-  bottom: -57.5rem;
+  bottom: -66.5rem;
   left: 3.15rem;
 }
 
@@ -3124,7 +3133,7 @@ section-style .sub-title,
   }
 
   .section25 .number-5::after {
-    bottom: -61rem;
+    bottom: -68rem;
     left: 3.15rem;
   }
 }
@@ -3139,7 +3148,7 @@ section-style .sub-title,
   }
 
   .section25 .number-5::after {
-    bottom: -65rem;
+    bottom: -69.5rem;
     left: 3.15rem;
   }
 }
@@ -3162,7 +3171,7 @@ section-style .sub-title,
   }
 
   .section25 .number-5::after {
-    bottom: -84.5rem;
+    bottom: -90.5rem;
     left: 3.1rem;
   }
 }
@@ -3185,7 +3194,7 @@ section-style .sub-title,
   }
 
   .section25 .number-5::after {
-    bottom: -88rem;
+    bottom: -93.5rem;
     left: 2.5rem;
   }
 }
@@ -3214,17 +3223,19 @@ section-style .sub-title,
   }
 
   .section25 .number-5::after {
-    bottom: -101.5rem;
+    bottom: -102.5rem;
   }
 }
 
 .section25 .number-mt {
-  margin-top: 18rem;
+  padding-top: 8rem;
+  margin-top: 10rem;
 }
 
 @media (max-width: 992px) {
   .section25 .number-mt {
-    margin-top: 10rem;
+    padding-top: 8rem;
+    margin-top: 2rem;
   }
 }
 
@@ -3280,12 +3291,13 @@ section-style .sub-title,
   color: #fff;
   background: #565656;
   font-size: 1.3rem;
+  font-weight: bold;
 }
 
 .section25 a {
   color: #29b4e8;
   text-decoration: underline;
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 @media (min-width: 768px) {