服務流程頁面微調

content/規劃師服務/index.md

@@ -5,6 +5,23 @@ draft: false
 url: "/room_planner"
 ---
 
+<script>
+  window.onload = () => {
+    let questionList = document.querySelectorAll('.question');
+    Array.from(questionList).map(e => {
+      e.addEventListener('click', (item) => {
+        let rotateElement = item.target.firstElementChild.id;
+        let element = document.getElementById(`${rotateElement}`);
+        if (element.style.webkitTransform === 'rotate(0deg)') {
+          element.style = "transform: rotate(-90deg)";
+        } else {
+          element.style = "transform: rotate(0deg)";
+        }
+      }, false);
+    })
+  };
+</script>
+
 <section class="section13">
   <div class="mt-4">
     <amp-img src="/img/room_planner3/1.webp" width="5344" height="3529" layout="responsive"
@@ -24,19 +41,19 @@ url: "/room_planner"
   <div class="container">
     <div class="title-box">
       <a href="#container-1">
-        <i class="fa fa-play"></i> 01諮詢階段
+        01諮詢階段
       </a>
       <a href="#container-2">
-        <i class="fa fa-play"></i> 02設計階段
+        02設計階段
       </a>
       <a href="#container-3">
-        <i class="fa fa-play"></i> 03報價階段
+        03報價階段
       </a>
       <a href="#container-4">
-        <i class="fa fa-play"></i> 04付款階段
+        04付款階段
       </a>
       <a href="#container-5">
-        <i class="fa fa-play"></i> 05施工階段
+        05施工階段
       </a>
     </div>
     <div class="d-flex flex-column align-items-center header">
@@ -93,8 +110,8 @@ url: "/room_planner"
             </p>
             <amp-accordion id="myAccordion" disable-session-states="">
               <section>
-                <div class="question example" style="border: none; background: none; padding: 0;">▼
-                  總預算參考<br />（含設計、裝修、系統櫃、家具）
+                <div id="question-1" class="question example" style="border: none; background: none; padding: 0;"><span
+                    id="rotate-1">▼</span> 總預算參考<br />（含設計、裝修、系統櫃、家具）
                 </div>
                 <div style="padding: 0;">
                   <ul>
@@ -102,19 +119,10 @@ url: "/room_planner"
                     <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> -->
           </section>
         </div>
         <div class="col-12 col-md-6" style="padding: 0 20px;">
@@ -126,7 +134,8 @@ url: "/room_planner"
             </p>
             <amp-accordion id="myAccordion" disable-session-states="">
               <section>
-                <div class="question example" style="border: none; background: none; padding: 0;">▼ 成家設計合約
+                <div class="question example" style="border: none; background: none; padding: 0;"><span
+                    id="rotate-2">▼</span> 成家設計合約
                 </div>
                 <div style="padding: 0;">
                   <ul>
@@ -143,18 +152,6 @@ url: "/room_planner"
                 </div>
               </section>
             </amp-accordion>
-            <!-- <span class="example">▼ 成家設計合約</span>
-            <ul>
-              <li>一個空間設計費 1 萬元，訂金為 3 千元。</li>
-              <li>
-                進行生活習慣調查、風格測驗、空間丈量並提供平面配置圖與 3D
-                渲染彩圖。
-              </li>
-              <li>
-                在設計階段，添購成家必備的系統櫃、家具，支付金額滿 8
-                萬，即可折抵一個空間設計費。
-              </li>
-            </ul> -->
           </section>
         </div>
       </div>
@@ -245,7 +242,8 @@ url: "/room_planner"
             </p>
             <amp-accordion id="myAccordion" disable-session-states="">
               <section>
-                <div class="question example" style="border: none; background: none; padding: 0;">▼ 安心裝修合約
+                <div class="question example" style="border: none; background: none; padding: 0;"> <span
+                    id="rotate-3">▼</span> 安心裝修合約
                 </div>
                 <div style="padding: 0;">
                   <ul>
@@ -265,20 +263,6 @@ url: "/room_planner"
                 </div>
               </section>
             </amp-accordion>
-            <!-- <span class="example">▼ 安心裝修合約</span>
-            <ul>
-              <li>信用卡付款(全額付款)</li>
-              <li>現金/匯款付款(簽約付 50%、木工完成後 40%、驗收後 10%)</li>
-              <li>合約內小寶優居收取裝修總價 5% 為安心裝修服務費</li>
-            </ul>
-            <span class="example" style="color: black;">【裝修總價 5% 的服務費，換 100% 的安心裝修】</span>
-            <ul style="list-style: none; margin: 0;">
-              <li>∨ 嚴選裝修師傅</li>
-              <li>∨ 嚴選裝修材料</li>
-              <li>∨ 專人協助監工</li>
-              <li>∨ 裝修履約保證</li>
-              <li>∨ 約束裝修保固</li>
-            </ul> -->
           </section>
         </div>
         <div class="col-12 col-md-6" style="padding: 0 20px;">
@@ -290,7 +274,8 @@ url: "/room_planner"
             </p>
             <amp-accordion id="myAccordion" disable-session-states="">
               <section>
-                <div class="question example" style="border: none; background: none; padding: 0;">▼ 家具、系統櫃訂單付款
+                <div class="question example" style="border: none; background: none; padding: 0;"><span
+                    id="rotate-4">▼</span> 家具、系統櫃訂單付款
                 </div>
                 <div style="padding: 0;">
                   <ul>
@@ -302,13 +287,6 @@ url: "/room_planner"
                 </div>
               </section>
             </amp-accordion>
-            <!-- <span class="example">▼ 家具、系統櫃訂單付款</span>
-            <ul>
-              <li>信用卡付款(全額付款)時付 50% </li>
-              <li>
-                現金/匯款付款(確認訂單、系統櫃出貨前付時付 50%、系統櫃出貨前付 50%)
-              </li>
-            </ul> -->
           </section>
         </div>
       </div>
@@ -338,7 +316,8 @@ url: "/room_planner"
             </p>
             <amp-accordion id="myAccordion" disable-session-states="">
               <section>
-                <div class="question example" style="border: none; background: none; padding: 0;">▼ 整體完工時間參考
+                <div class="question example" style="border: none; background: none; padding: 0;"><span
+                    id="rotate-5">▼</span> 整體完工時間參考
                 </div>
                 <div style="padding: 0;">
                   <ul>
@@ -350,14 +329,6 @@ url: "/room_planner"
                 </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> -->
           </section>
         </div>
         <div class="col-12" style="padding: 0 20px;">
@@ -600,5 +571,4 @@ url: "/room_planner"
       </div>
     </div>
   </div>
-</section>
-
+</section>

static/js/cz_filter.js

@@ -47,7 +47,7 @@ function update_info(type, ping, budget, room) {
       console.log('載入符合篩選條件(' + type + ',' + ping + ',' + budget + ',' + rooms + ')的作品...........');
 
       var filter_num = 0; // 篩選條件數量
-      
+
       if (!type.includes("全部")) {
         filter_num += 1;
       }
@@ -66,11 +66,11 @@ function update_info(type, ping, budget, room) {
 
       console.log('篩選條件數: ' + filter_num); // test
 
-      for(var i = 0; i < items.length; i++) {
+      for (var i = 0; i < items.length; i++) {
         if (items[i]['url'] && items[i]['url'] != '/collection') {
           var tags = items[i]['tags'].replace('"', ''); // 各作品tag
           var matched_num = 0; // 符合篩選條件數量
-          
+
           if (tags.includes(type)) {
             matched_num += 1;
           }
@@ -113,7 +113,7 @@ function update_info(type, ping, budget, room) {
           }
         }
       }
-         
+
       // 載入符合篩選條件的作品
       var update_info = document.querySelectorAll('.update_info');
 
@@ -149,12 +149,12 @@ function update_info(type, ping, budget, room) {
       }
 
       // 更新畫面
-      for(var i = 0; i < update_info.length; i++) {
-        update_info[i].innerHTML = content;  
+      for (var i = 0; i < update_info.length; i++) {
+        update_info[i].innerHTML = content;
       }
-  }).catch((error) => {
-    console.error('Error:', error);
-  });
+    }).catch((error) => {
+      console.error('Error:', error);
+    });
 }
 
 // 預設選項值
@@ -164,29 +164,29 @@ var budget = "全部預算";
 var rooms = "全部格局";
 
 // 類型
-var items = document.getElementsByClassName('type'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('type');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇類型..........');
   items[i].addEventListener("change", change_type);
 }
 
 // 坪數
-var items = document.getElementsByClassName('ping'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('ping');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇坪數..........');
   items[i].addEventListener("change", change_ping);
 }
 
 // 預算
-var items = document.getElementsByClassName('budget'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('budget');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇預算..........');
   items[i].addEventListener("change", change_budget);
 }
 
 // 格局
-var items = document.getElementsByClassName('rooms'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('rooms');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇格局..........');
   items[i].addEventListener("change", change_rooms);
 }

static/js/cz_filter_2021120301.js

@@ -34,15 +34,15 @@ function update_info(style, roomsize, budget) {
       console.log(data['items']);
 
       items = data['items'];
-      
+
       console.log('載入符合篩選條件(' + style + ',' + roomsize + ',' + budget + ')的作品...........');
-  
+
       var content = "";
 
-      for(var i = 0; i < items.length; i++) {
+      for (var i = 0; i < items.length; i++) {
         var style_check = (style == '風格不限') ? true : (style == items[i]['style']);
         var roomsize_check = (roomsize == '坪數不限') ? true : (roomsize == items[i]['roomsize']);
-        var budget_check = (budget == '預算不限') ? true : (budget == items[i]['budget']);     
+        var budget_check = (budget == '預算不限') ? true : (budget == items[i]['budget']);
 
         if (style_check && roomsize_check && budget_check) {
           console.log('作品' + i + '，符合篩選條件...');
@@ -74,20 +74,20 @@ function update_info(style, roomsize, budget) {
 
         console.log(items[i]);
       }
-    
+
       // 載入符合篩選條件的作品
       var update_info = document.querySelectorAll('.update_info');
 
       // 更新畫面
-      for(var i = 0; i < update_info.length; i++) {
-        update_info[i].innerHTML = content;  
+      for (var i = 0; i < update_info.length; i++) {
+        update_info[i].innerHTML = content;
       }
-  }).catch((error) => {
-    console.log('error');
-    console.log('error',error);
+    }).catch((error) => {
+      console.log('error');
+      console.log('error', error);
 
-    console.error('Error:', error);
-  });
+      console.error('Error:', error);
+    });
 }
 
 // 預設選項值
@@ -96,22 +96,22 @@ var roomsize = "坪數不限"
 var budget = "預算不限"
 
 // 風格
-var items = document.getElementsByClassName('style'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('style');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇風格..........');
   items[i].addEventListener("change", change_style);
 }
 
 // 坪數
-var items = document.getElementsByClassName('roomsize'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('roomsize');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇坪數..........');
   items[i].addEventListener("change", change_roomsize);
 }
 
 // 預算
-var items = document.getElementsByClassName('budget'); 
-for(var i = 0; i < items.length; i++) {
+var items = document.getElementsByClassName('budget');
+for (var i = 0; i < items.length; i++) {
   console.log('選擇預算..........');
   items[i].addEventListener("change", change_budget);
 }

themes/hugo-lamp/index.js

@@ -2,10 +2,10 @@
  * Copy right: https://gohugo-amp.gohugohq.com/styling/
  */
 const sass = require('node-sass'),
-      postcss = require('postcss'),
-      fs = require('fs'),
-      inputFile = './styles/main.scss',
-      outputFile = './layouts/partials/stylesheet.html'
+  postcss = require('postcss'),
+  fs = require('fs'),
+  inputFile = './styles/main.scss',
+  outputFile = './layouts/partials/stylesheet.html'
 
 sass.render({
   file: inputFile,
@@ -19,14 +19,14 @@ sass.render({
   } else {
     let cssOutput = result.css.toString();
 
-    postcss([ require('autoprefixer'), require('cssnano') ])
+    postcss([require('autoprefixer'), require('cssnano')])
       .process(cssOutput)
       .then((result) => {
         fs.writeFile(outputFile, result.css, err => {
           if (err) {
             return console.log(err);
           }
-          console.log('\u2611 file '+outputFile+' updated with current styling from '+ inputFile);
+          console.log('\u2611 file ' + outputFile + ' updated with current styling from ' + inputFile);
         });
       });
   }

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

@@ -2838,7 +2838,8 @@ section-style .sub-title,
 }
 
 .section25 .title-box {
-  width: 700px;
+  max-width: 700px;
+  width: 100%;
   margin: auto;
   padding-bottom: 25px;
   margin-bottom: 40px;
@@ -2854,7 +2855,6 @@ section-style .sub-title,
 .section25 .title-box a {
   padding: 5px 8px;
   color: #78ad42;
-  text-decoration: none;
   cursor: pointer;
 }
 
@@ -2868,7 +2868,7 @@ section-style .sub-title,
   }
 
   .section25 .title-box {
-    width: 490px;
+    max-width: 400px;
     margin-bottom: 40px;
     justify-content: start;
   }
@@ -2876,7 +2876,8 @@ section-style .sub-title,
 
 @media (max-width: 414px) {
   .section25 .title-box {
-    width: 350px;
+    max-width: 350px;
+    width: 100%;
   }
 }
 
@@ -2886,6 +2887,15 @@ section-style .sub-title,
   }
 }
 
+.section25 #rotate-1,
+.section25 #rotate-2,
+.section25 #rotate-3,
+.section25 #rotate-4,
+.section25 #rotate-5 {
+  display: inline-block;
+  transform: rotate(-90deg);
+}
+
 .section25 .header-img {
   width: 200px;
   height: auto;