merge

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">
@@ -69,7 +63,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div id="container-1" class="d-flex" style="padding-top: 100px;">
+    <div id="container-1" class="d-flex">
       <div>
         <p class="d-flex justify-content-center align-items-center number-1">
           01 <br> 諮詢階段
@@ -97,12 +91,30 @@ url: "/room_planner"
             <p class="text-box">
               你到門市體驗設計空間，諮詢成家設計服務與預算。<br />（約2個小時）
             </p>
-            <span class="example">▼ 總預算參考<br />（含設計、裝修、系統櫃、家具）</span>
+            <amp-accordion id="myAccordion" disable-session-states="">
+              <section>
+                <div class="question example" style="border: none; background: none; padding: 0;">▼
+                  總預算參考<br />（含設計、裝修、系統櫃、家具）
+                </div>
+                <div style="padding: 0;">
+                  <ul>
+                    <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> -->
+                  </ul>
+                </div>
+              </section>
+            </amp-accordion>
+            <!-- <span class="example">▼ 總預算參考<br />（含設計、裝修、系統櫃、家具）</span>
             <ul>
               <li>【無需拆除工程】<br>屋況，約 2-4 萬/坪。</li>
               <li>【需要拆除工程】<br>屋況，約 2.5-5 萬/坪。</li>
               <li>【需要拆除工程與管線更新】<br>屋況，約 3-6 萬/坪。</li>
-            </ul>
+            </ul> -->
           </section>
         </div>
         <div class="col-12 col-md-6" style="padding: 0 20px;">
@@ -112,7 +124,26 @@ url: "/room_planner"
             <p class="text-box">
               當你認同我們的服務，再簽訂成家設計合約與支付訂金，我們將與你約時間到府丈量。
             </p>
-            <span class="example">▼ 成家設計合約</span>
+            <amp-accordion id="myAccordion" disable-session-states="">
+              <section>
+                <div class="question example" style="border: none; background: none; padding: 0;">▼ 成家設計合約
+                </div>
+                <div style="padding: 0;">
+                  <ul>
+                    <li>一個空間設計費 1 萬元，訂金為 3 千元。</li>
+                    <li>
+                      進行生活習慣調查、風格測驗、空間丈量並提供平面配置圖與 3D
+                      渲染彩圖。
+                    </li>
+                    <li>
+                      在設計階段，添購成家必備的系統櫃、家具，支付金額滿 8
+                      萬，即可折抵一個空間設計費。
+                    </li>
+                  </ul>
+                </div>
+              </section>
+            </amp-accordion>
+            <!-- <span class="example">▼ 成家設計合約</span>
             <ul>
               <li>一個空間設計費 1 萬元，訂金為 3 千元。</li>
               <li>
@@ -123,12 +154,12 @@ url: "/room_planner"
                 在設計階段，添購成家必備的系統櫃、家具，支付金額滿 8
                 萬，即可折抵一個空間設計費。
               </li>
-            </ul>
+            </ul> -->
           </section>
         </div>
       </div>
     </div>
-    <div id="container-2" class="d-flex" style="padding-top: 8rem;">
+    <div id="container-2" class="d-flex">
       <div>
         <p class="d-flex justify-content-center align-items-center number-2">
           02 <br> 設計階段
@@ -172,7 +203,7 @@ url: "/room_planner"
         </div>
       </div>
     </div>
-    <div id="container-3" class="d-flex" style="padding-top: 10rem;">
+    <div id="container-3" class="d-flex">
       <div>
         <p class="d-flex justify-content-center align-items-center number-3">
           03 <br> 報價階段
@@ -212,7 +243,29 @@ url: "/room_planner"
             <p class="text-box">
               確認裝修報價明細後，進行安心裝修服務簽約並訂單付款。
             </p>
-            <span class="example">▼ 安心裝修合約</span>
+            <amp-accordion id="myAccordion" disable-session-states="">
+              <section>
+                <div class="question example" style="border: none; background: none; padding: 0;">▼ 安心裝修合約
+                </div>
+                <div style="padding: 0;">
+                  <ul>
+                    <li>信用卡付款(全額付款)</li>
+                    <li>現金/匯款付款(簽約付 50%、木工完成後 40%、驗收後 10%)</li>
+                    <li>合約內小寶優居收取裝修總價 5% 為安心裝修服務費</li>
+                  </ul>
+                  <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>
+                    <li>∨ 專人協助監工</li>
+                    <li>∨ 裝修履約保證</li>
+                    <li>∨ 約束裝修保固</li>
+                  </ul>
+                </div>
+              </section>
+            </amp-accordion>
+            <!-- <span class="example">▼ 安心裝修合約</span>
             <ul>
               <li>信用卡付款(全額付款)</li>
               <li>現金/匯款付款(簽約付 50%、木工完成後 40%、驗收後 10%)</li>
@@ -225,7 +278,7 @@ url: "/room_planner"
               <li>∨ 專人協助監工</li>
               <li>∨ 裝修履約保證</li>
               <li>∨ 約束裝修保固</li>
-            </ul>
+            </ul> -->
           </section>
         </div>
         <div class="col-12 col-md-6" style="padding: 0 20px;">
@@ -235,18 +288,32 @@ url: "/room_planner"
             <p class="text-box">
               確認所有家具、系統櫃品項與金額，進行訂單付款。
             </p>
-            <span class="example">▼ 家具、系統櫃訂單付款</span>
+            <amp-accordion id="myAccordion" disable-session-states="">
+              <section>
+                <div class="question example" style="border: none; background: none; padding: 0;">▼ 家具、系統櫃訂單付款
+                </div>
+                <div style="padding: 0;">
+                  <ul>
+                    <li>信用卡付款(全額付款)</li>
+                    <li>
+                      現金/匯款付款(確認訂單、系統櫃出貨前付時付 50%、系統櫃出貨前付 50%)
+                    </li>
+                  </ul>
+                </div>
+              </section>
+            </amp-accordion>
+            <!-- <span class="example">▼ 家具、系統櫃訂單付款</span>
             <ul>
               <li>信用卡付款(全額付款)時付 50% </li>
               <li>
                 現金/匯款付款(確認訂單、系統櫃出貨前付時付 50%、系統櫃出貨前付 50%)
               </li>
-            </ul>
+            </ul> -->
           </section>
         </div>
       </div>
     </div>
-    <div id="container-5" class="d-flex" style="padding-top: 8rem;">
+    <div id="container-5" class="d-flex">
       <div>
         <p class="d-flex justify-content-center align-items-center number-5">
           05 <br> 施工階段
@@ -269,14 +336,28 @@ url: "/room_planner"
             <p class="text-box">
               當裝修完成80%，我們安排系統櫃到你家進行安裝，接著進行細部清潔，並安排家具到府定位。
             </p>
-            <span class="example">▼ 整體完工時間參考</span>
+            <amp-accordion id="myAccordion" disable-session-states="">
+              <section>
+                <div class="question example" style="border: none; background: none; padding: 0;">▼ 整體完工時間參考
+                </div>
+                <div style="padding: 0;">
+                  <ul>
+                    <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>
+            </amp-accordion>
+            <!-- <span class="example">▼ 整體完工時間參考</span>
             <ul>
               <li>【無需拆除工程】<br>屋況，約 2-3 個月。</li>
               <li>
                 【需要拆除工程】<br>屋況，約 2.5-3.5 個月。
               </li>
               <li>【需要拆除工程與管線更新】<br>屋況，約 3-4 個月。</li>
-            </ul>
+            </ul> -->
           </section>
         </div>
         <div class="col-12" style="padding: 0 20px;">
@@ -284,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>
@@ -295,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>
@@ -519,4 +600,5 @@ url: "/room_planner"
       </div>
     </div>
   </div>
-</section>
+</section>
+

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

@@ -2838,22 +2838,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;
@@ -2863,23 +2877,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;
   }
 }
 
@@ -3306,6 +3318,16 @@ section-style .sub-title,
   }
 }
 
+.section25 .break {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .section25 .break {
+    display: inline;
+  }
+}
+
 .section26 {
   background-color: #f1f1f1;
 }