單品content add

content/furniture_design_list/mattress/44.酣然相擁/index.md

@@ -8,96 +8,100 @@ image: "/master_bedroom/hug_to_sleep/1.webp"
 description: "酣然相擁 - 臥室 / 山雲杉實木骨架 / 對稱的翅膀，就像包覆你的港灣，彎彎的臂彎，環抱著你入睡，被抱著入睡，做一場美夢吧！"
 ---
 
-<section class="section44 mb-5">
-    <div class="container">
-      <div class="mb-5">
-        <a href="/solid_wood_furniture">關於設計家具</a> > <a href="/master_bedroom">臥室</a> > <a href="/master_bedroom/hug_to_sleep">酣然相擁</a>
-      </div>
-      <div class="row">
-        <div class="col-md-5 col-sm-12">
-          <div class="block">
-            <div class="section-title text-center">
-              <amp-carousel
-                id="carousel-with-preview"
-                width="300"
-                height="300"
-                layout="responsive"
-                type="slides"
-                autoplay
-                delay="2500"
-                role="region"
-                aria-label="小寶優居 | 酣然相擁"
-              >
-<amp-img
-  alt="小寶優居 | 酣然相擁"
-  src="1.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 酣然相擁"
-  src="2.webp"
-  height="300"
-  width="300"
-  layout="responsive">
-</amp-img>
-              </amp-carousel>
-              <div class="mt-3 carousel-preview">
-<button on="tap:carousel-with-preview.goToSlide(index=0)">
-            <amp-img
-              src="1.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 酣然相擁|小寶優居・設計家具"
-            ></amp-img>
-          </button>
-<button on="tap:carousel-with-preview.goToSlide(index=1)">
-            <amp-img
-              src="2.webp"
-              width="40"
-              height="40"
-              alt="小寶優居 | 酣然相擁|小寶優居・設計家具"
-            ></amp-img>
-          </button>
+<script>
+      window.onload = () => {
+        $('.slider-for').slick({
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+        fade: true,
+        asNavFor: '.slider-nav'
+      });
+      $('.slider-nav').slick({
+      slidesToShow: 2,
+      slidesToScroll: 1,
+      asNavFor: '.slider-for',
+      dots: true,
+      centerMode: true,
+      focusOnSelect: true
+    });
+    };
+  </script>
+<div class="furniture-design">
+{{< furniture_design >}}
+<div class="furniture_design_content">
+  <div class="sub-tab-content" id="pills-tabContent">
+      <div class="container px-0 design-container">
+        <div class="d-flex flex-column flex-md-row align-items-md-start align-items-center b-bottom pb-3 mb-5">
+          <div class="slider-box">
+            <div class="slider slider-for slider-design">
+              <div class="design-img">
+                <img src="1.webp" alt="小寶優居 | 酣然相擁">
+              </div>
+              <div class="design-img">
+                <img src="2.webp" alt="小寶優居 | 酣然相擁">
+              </div>
+              <div class="design-img">
+                <img src="3.webp" alt="小寶優居 | 酣然相擁">
+              </div>
+            </div>
+            <div class="slider slider-nav mt-lg-2">
+              <div>
+                <img src="1.webp" alt="小寶優居 | 酣然相擁">
+              </div>
+              <div class="middle-item">
+                <img src="2.webp" alt="小寶優居 | 酣然相擁">
               </div>
+                  <!-- <div class="middle-item">
+                <img src="3.webp" alt="小寶優居 | 酣然相擁">
+              </div> -->
             </div>
           </div>
-        </div>
-        <div class="col-md-7 col-sm-12">
-          <div class="block ms-md-5 mb-5">
-            <div class="title mb-4"><b>酣然相擁</b></div>
-            <div class="description">
-<b>對稱的翅膀，就像包覆你的港灣，彎彎的臂彎，環抱著你入睡，被抱著入睡，做一場美夢吧！</b>
+            <div class="ms-2 fw-bold">
+            <h3 class="mt-4">酣然相擁 </h3>
+            <p class="mb-5">對稱的翅膀，就像包覆你的港灣，彎彎的臂彎，環抱著你入睡，被抱著入睡，做一場美夢吧！</p>
+            <div style="display:none">
+              <span class="me-3">定價</span>
+              <span>$41,400</span>
+            </div>
+            <!-- <div class="my-2 d-flex">
+                <div class="tw-15">顏色</div>
+                <div style="tw-85">自然色、胡桃色、橡木色、謐白色、曜石灰</div>
+            </div> -->
+              <div class="my-2 d-flex">
+                <div class="tw-15">尺寸</div>
+                <div class="tw-85">如下圖說明</div>
+            </div>
+            <div class="my-2 d-flex">
+                <div class="tw-15">材質</div>
+              <div class="tw-85">雲杉實木骨架</div>
             </div>
-            <hr>
-            <div class="detail">
-<div>定價 ： $41,400</div>
-<span></span>
-<span></span>
-<div>材質 ： 雲杉實木骨架</div>
-<div>備註 ： 標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
+            <div class="d-flex">
+              <div class="tw-15">備註</div>
+              <div class="tw-85">標準雙人5尺+架高床底價格參考，實際價格將依需求規劃客製而定</div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <div class="card-body text-center">
-          <div class="mb-2">1.商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主</div>
-          <div>2.部分商品因應空間大小，保有客製尺寸服務，詳細客製尺寸，請預約門市諮詢訂購</div>
+        <div class="b-bottom pb-3 mb-5">
+          <h6>尺寸規格</h6>
+          <img class="w-100 h-100" src="s1.webp"
+            alt="小寶優居 | 酣然相擁">
+                      <img class="w-100 h-100" src="s2.webp"
+            alt="小寶優居 | 酣然相擁">
+          <h6 class="mt-4">說明</h6>
+          <ul>
+            <li>1. 商品顏色因拍攝、螢幕差異略有不同，實際顏色請依照門市實際顏色為主。</li>
+            <li>2. 部分商品因應空間大小，保有客製尺寸服務。詳細尺寸資訊，請預約門市諮詢訂購。</li>
+          </ul>
+        </div>
+        <div class="mb-5">
+          <a href="/furniture_design/mattress/">
+            <p class="readMore text-center">
+              <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到床組
+            </p>
+          </a>
         </div>
       </div>
-<div class="spec"><div class="mb-4"><b>尺寸規格</b></div><amp-img
-  alt="小寶優居 | 酣然相擁"
-  src="0169fe83-f728-4a50-a8c2-9d631a5d9837.webp"
-  height="450"
-  width="1600"
-  layout="responsive">
-</amp-img><amp-img
-  alt="小寶優居 | 酣然相擁"
-  src="629ddcd5-1841-488e-9cb9-221bff6e1a47.webp"
-  height="1600"
-  width="1052"
-  layout="responsive">
-</amp-img></div>
+  </div>
 </div>
-  </section>
+  </div>