調整服務流程內容斷句

content/規劃師服務/index.md

@@ -15,35 +15,29 @@ url: "/room_planner"
 
 <section class="section14 d-flex align-items-center">
   <div class="text-center mx-auto">
-    <div class="title mb-4"><b>成家設計師 九大服務流程</b></div>
+    <div class="title mb-4"><b>成家設計服務 五大服務流程</b></div>
     <div class="title"><b>詳細說明</b></div>
   </div>
 </section>
 
 <section class="section25" style="padding-bottom: 100px;">
   <div class="container">
-    <div class="d-flex flex-column flex-md-row justify-content-center title-box">
-      <div>
-        <a href="#container-1">
-          <i class="fa fa-play"></i> 諮詢階段
-        </a>
-        <a href="#container-2">
-          <i class="fa fa-play"></i> 設計階段
-        </a>
-      </div>
-      <div>
-        <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 class="title-box">
+      <a href="#container-1">
+        <i class="fa fa-play"></i> 01諮詢階段
+      </a>
+      <a href="#container-2">
+        <i class="fa fa-play"></i> 02設計階段
+      </a>
+      <a href="#container-3">
+        <i class="fa fa-play"></i> 03報價階段
+      </a>
+      <a href="#container-4">
+        <i class="fa fa-play"></i> 04付款階段
+      </a>
+      <a href="#container-5">
+        <i class="fa fa-play"></i> 05施工階段
+      </a>
     </div>
     <div class="d-flex flex-column align-items-center header">
       <div class="d-flex">
@@ -104,9 +98,13 @@ url: "/room_planner"
                 </div>
                 <div style="padding: 0;">
                   <ul>
-                    <li>【無需拆除工程】<br>屋況，約 2-4 萬/坪。</li>
+                    <li style="list-style: none; margin-left: -20px;">【屋況】</li>
+                    <li>無需拆除工程，<span class="break"><br></span>約 2-4 萬/坪。</li>
+                    <li>需要拆除工程，<span class="break"><br></span>約 2.5-5 萬/坪。</li>
+                    <li>需要拆除工程管線更新，<span class="break"><br></span>約 3-6 萬/坪。</li>
+                    <!-- <li>【無需拆除工程】<br>屋況，約 2-4 萬/坪。</li>
                     <li>【需要拆除工程】<br>屋況，約 2.5-5 萬/坪。</li>
-                    <li>【需要拆除工程與管線更新】<br>屋況，約 3-6 萬/坪。</li>
+                    <li>【需要拆除工程與管線更新】<br>屋況，約 3-6 萬/坪。</li> -->
                   </ul>
                 </div>
               </section>
@@ -255,7 +253,8 @@ url: "/room_planner"
                     <li>現金/匯款付款(簽約付 50%、木工完成後 40%、驗收後 10%)</li>
                     <li>合約內小寶優居收取裝修總價 5% 為安心裝修服務費</li>
                   </ul>
-                  <span class="example" style="color: black;">【裝修總價 5% 的服務費，換 100% 的安心裝修】</span>
+                  <span class="example" style="color: black;">【裝修總價 5% 的服務費，<span class="break"><br></span>換 100%
+                    的安心裝修】</span>
                   <ul style="list-style: none; margin: 0;">
                     <li>∨ 嚴選裝修師傅</li>
                     <li>∨ 嚴選裝修材料</li>
@@ -295,7 +294,7 @@ url: "/room_planner"
                 </div>
                 <div style="padding: 0;">
                   <ul>
-                    <li>信用卡付款(全額付款)時付 50% </li>
+                    <li>信用卡付款(全額付款)</li>
                     <li>
                       現金/匯款付款(確認訂單、系統櫃出貨前付時付 50%、系統櫃出貨前付 50%)
                     </li>
@@ -343,11 +342,10 @@ url: "/room_planner"
                 </div>
                 <div style="padding: 0;">
                   <ul>
-                    <li>【無需拆除工程】<br>屋況，約 2-3 個月。</li>
-                    <li>
-                      【需要拆除工程】<br>屋況，約 2.5-3.5 個月。
-                    </li>
-                    <li>【需要拆除工程與管線更新】<br>屋況，約 3-4 個月。</li>
+                    <li style="list-style: none; margin-left: -20px;">【屋況】</li>
+                    <li>無需拆除工程，<span class="break"><br></span>約 2-3 個月。</li>
+                    <li>需要拆除工程，<span class="break"><br></span>約 2.5-3.5 個月。</li>
+                    <li>需要拆除工程管線更新，<span class="break"><br></span>約 3-4 個月。</li>
                   </ul>
                 </div>
               </section>
@@ -367,7 +365,7 @@ url: "/room_planner"
             <img src="/img/room_planner4/5-3.png" alt="" class="img-style" style="margin-bottom: 15px;">
             <h4>3.完工驗收</h4>
             <div class="text-box">
-              <p>最後，我們到你家，<br>與你進行整體驗收：</p>
+              <p>最後，我們到你家，與你進行整體驗收：</p>
               <ul>
                 <li>設計</li>
                 <li>裝修</li>
@@ -378,11 +376,11 @@ url: "/room_planner"
             </div>
             <span class="example">「小寶優居，陪你一輩子」</span>
             <ul>
-              <li>沙發、床架實木骨架：<br>保固 10 年，永久保修</li>
-              <li>系統櫃、五金：<br>保固 10 年，永久保修</li>
-              <li>靠墊坐墊泡棉：<br>保固 3 年，永久保修</li>
-              <li>實木家具：保固 5 年，永久保修</li>
-              <li>裝修：保固 1 年，永久保修</li>
+              <li>沙發、床架實木骨架：<span class="break"><br></span>保固 10 年，永久保修。</li>
+              <li>系統櫃、五金：<span class="break"><br></span>保固 10 年，永久保修。</li>
+              <li>靠墊坐墊泡棉：<span class="break"><br></span>保固 3 年，永久保修。</li>
+              <li>實木家具：<span class="break"><br></span>保固 5 年，永久保修。</li>
+              <li>裝修：<span class="break"><br></span>保固 1 年，永久保修。</li>
             </ul>
           </section>
         </div>

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

@@ -2940,22 +2940,36 @@ section-style .sub-title,
 }
 
 .section25 .title-box {
+  width: 700px;
+  margin: auto;
+  padding-bottom: 25px;
+  margin-bottom: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  border-bottom: 2px solid #78ad42;
+  color: #78ad42;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+/* .section25 .title-box {
   padding: 0 20px;
   font-size: 1.1rem;
   padding-bottom: 5px;
   color: #78ad42;
   font-weight: bold;
-}
+} */
 
-.section25 .title-box div {
+/* .section25 .title-box div {
   display: inline;
   padding-bottom: 25px;
   margin-bottom: 40px;
   border-bottom: 2px solid;
-}
+} */
 
 .section25 .title-box a {
-  padding-right: 20px;
+  padding: 5px 8px;
   color: #78ad42;
   text-decoration: none;
   cursor: pointer;
@@ -2965,23 +2979,21 @@ section-style .sub-title,
   opacity: 0.7;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .section25 .header-img-box {
     padding: 0 8%;
   }
 
   .section25 .title-box {
+    width: 490px;
     margin-bottom: 40px;
+    justify-content: start;
   }
+}
 
-  .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(3) {
-    padding-bottom: 40px;
+@media (max-width: 414px) {
+  .section25 .title-box {
+    width: 350px;
   }
 }
 
@@ -3484,6 +3496,16 @@ section-style .sub-title,
   }
 }
 
+.section25 .break {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .section25 .break {
+    display: inline;
+  }
+}
+
 .section26 {
   background-color: #f1f1f1;
 }