Home Explore Help
Register Sign In
choozmo
/
hhh-page-dev
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://git.choozmo.com:3000/choozmo/hhh-page-dev

huai-sian 3 years ago
parent
e95e973822 e755151fbf
commit
fc7355f0c9
8 changed files with 431 additions and 311 deletions
Split View Show Diff Stats
  1. BIN
      .DS_Store
  2. 2 2
      casedetail.html
  3. 54 282
      cases.html
  4. 156 0
      css/style.css
  5. 0 0
      css/style.css.map
  6. 123 3
      css/style.scss
  7. 76 17
      goto.js
  8. 20 7
      json/cases.json

BIN
.DS_Store
View File


+ 2 - 2
casedetail.html
View File 

@@ -26,8 +26,8 @@
 
     <link rel="stylesheet" href="css/style.css">
 
 </head>
 
 
-<body style="height: 100vh;" >
 
-<div id="hhh-cases">
 
+<body>
 
+    <div id="hhh-cases">
 
     <div>
 
         <div class="modal-content" style="background-color: #6D6D6D;">

+ 54 - 282
cases.html
View File 

@@ -56,6 +56,9 @@
 
         </section>
 
         <nav class="navbar navbar-expand-lg navbar-light navbar-main shadow-sm">
 
             <div class="container-fluid" style="margin:0;">
 
+                <div class="nb-mobile-icons d-block d-md-none">
 
+                    <img src="https://m.hhh.com.tw/assets/images/rv_web/chevron-left.svg" width="9" height="20" alt="幸福空間">
 
+                    </div>
 
                 <a href="https://hhh.com.tw/" class="navbar-brand navbar-logo"><img
 
                         src="https://m.hhh.com.tw/_nuxt/img/def1b0a.svg" alt="" width="110"></a>
 
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
@@ -985,7 +988,7 @@
 
                         </div>
 
                     </div>
 
                 </div>
 
-                <div class="navbar-brand navbar-login ms-2 d-flex align-items-center">
 
+                <div class="navbar-brand navbar-login ms-2 d-flex align-items-center d-none d-md-block">
 
                     <a href="https://hhh.com.tw/login/index" class="navbar-login">登入 / 註冊</a>
 
                 </div>
 
             </div>
 
@@ -1003,7 +1006,7 @@
 
                 </nav>
 
             </div>
 
         </section>
 
-        <section class="article">
 
+        <section class="article display-pc">
 
             <!-- <div class="container container-width-column px-md-0">
 
                 <div class="article__wrapper">
 
                     <h2 class="h4">一生一世｜工業風｜25坪</h2>
 
@@ -1027,6 +1030,9 @@
 
             </div>
 
         </section>
 
         <div class="text-center my-3" style="color:#727679;">&nbsp;</div>
 
+
 
+        
+
 
         <div class="container bg-white shadow px-0 CaseInfo-pc">
 
             <div class="mt-md-4">
 
                 <div class="container container--padding px-0 CaseInfo">
 
@@ -1068,9 +1074,11 @@
 
             </div>
 
         </div>
 
 
+       
+
 
         <section class="info">
 
-            <div class="container container--padding d-block d-md-none">
 
-                <div class="row info--shadow text-center">
 
+            <div class="container container--padding d-block d-md-none CaseInfo_mb">
 
+                <!-- <div class="row info--shadow text-center">
 
                     <div class="col-6 px-0 border-sidebar mh">
 
                         <div class="info__option mx-3 border-below">
 
                             <div>
 
@@ -1091,7 +1099,7 @@
 
                         <div class="info__option mx-3">
 
                             <div>
 
                                 <div class="info__items__title">坪數</div>
 
-                                <div class="info__items">25坪</div>
 
+                                <div class="info__items info__items--ellipse">25坪</div>
 
                             </div>
 
                         </div>
 
                     </div>
 
@@ -1105,28 +1113,39 @@
 
                             </div>
 
                         </div>
 
                     </div>
 
-                </div>
 
+                </div> -->
 
             </div>
 
         </section>
 
+        <section class="article d-block d-md-none">
 
+            <!-- <div class="container container-width-column px-md-0">
 
+                <div class="article__wrapper">
 
+                    <h2 class="h4">一生一世｜工業風｜25坪</h2>
 
+                    <div class="d-flex justify-content-between">
 
+                        <div class="small">設計師:Otis設計團隊 ｜ 圖片提供:歐提系統家具有限公司</div>
 
+                        <div class="small">2021-12-30｜ 人氣:49</div>
 
+                    </div>
 
+                </div>
 
+            </div> -->
 
+        </section>
 
         <section class="article1 mt-md-5">
 
-            <div class="container">
 
+            <div class="container article__contexts-box">
 
                 <div>
 
-                    <p class="article__contexts">
 
+                    <!-- <p class="article__contexts">
 
                         家，是無可取代的避風港。為了滿足居者嚮往的現代時尚，席德設計傾聽所需，運用大理石、實木鋪敘出沉靜的自然況味，揉合鍍鈦金屬、鐵件的精緻細節，調和質材與線條的層次平衡，編織動人的家庭關係。<br>
 
                         <br>
 
                         入門落塵區採用石紋地坪界定場域，透過多邊形立柱間的縫隙窺見餐廳，配合鏡面修飾，勾勒公領域的視覺廣度。沙發背牆鋪設天然粗獷的石皮，演繹客廳的氣派風範，嵌入鐵件展示架、木格柵佛龕，形成和諧混搭的精緻美學，而隱含光澤的大理石電視牆，輝映綴飾天花的亮面鍍鈦線條，形構出耐人品味的豐富視覺。淑絹設計師將餐廳規劃於全室中央，匯聚成家人互動的核心場域，搭配長型實木餐桌延伸吧台，圍繞悠柔氣息，使一家共享日常的美好瞬間宛若停駐於此。<br>
 
                         <br>
 
                         推開深色木質門片，設計師運用沉靜的低彩度色系，營塑私領域的舒眠環境。主臥背牆以對稱鏡面、燈飾，渲染奢華風情，並以步入式更衣間設計，回應女屋主的衣物收納需求；孝親房床頭妝點溫潤木皮、藕紫色繃布，形塑優雅氣質；經由格局的重新調配，挪騰出獨立空間提供小兒子使用，窗邊灑落的日光，跟隨著書桌的木質紋理恣意遊走。經由席德設計與屋主一家的悉心討論，以氣勢磅礡的質材、紋理，點亮精緻層次的燦爛光輝，成就家的獨一無二。
 
-                    </p>
 
+                    </p> -->
 
                 </div>
 
-                <div class="article__readMore">
 
+                <!-- <div class="article__readMore">
 
                     <i class="fa fa-chevron-down" aria-hidden="true"></i>
 
                     <a class="article__readMore__text">閱讀更多</a>
 
                     <i class="fa fa-chevron-down" aria-hidden="true"></i>
 
-                </div>
 
+                </div> -->
 
             </div>
 
         </section>
 
-        <div class="text-center my-3" style="color:#727679;">&nbsp;</div>
 
+        <div class="text-center my-3 d-none d-md-block" style="color:#727679;">&nbsp;</div>
 
         <section class="case-scMedia">
 
             <div class="container">
 
                 <div class="case-scMedia__block">
 
@@ -1153,6 +1172,17 @@
 
                 </div>
 
             </div>
 
         </section>
 
+        <section class="relTag d-block d-md-none">
 
+            <div class="container pl-md-4 pr-md-0">
 
+                <div class="row">
 
+                    <div class="col-12">
 
+                        <h4>標籤</h4>
 
+                        <div class="d-flex flex-wrap justify-content-start py-md-3 CaseTag"></div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+
 
 
         <section class="caseData">
 
             <div class="container px-md-0">
 
@@ -1358,7 +1388,7 @@
 
                 </div>
 
             </div>
 
         </section>
 
-        <div class="cta container container-width-ad bg-ad px-md-0 my-md-4">
 
+        <div class="cta container container-width-ad bg-ad px-md-0 my-md-4 CTA-bottom">
 
             <div class="row justify-content-center mx-md-0">
 
                 <div class="formBtn formBtn--mr">
 
                     <a target="_blank" href="https://hhh.com.tw/cases/lists/" style="text-decoration: none;">
 
@@ -1366,14 +1396,14 @@
 
                         <button type="button" class="btn btn-primary btn-block">看其他案例</button>
 
                     </a>
 
                 </div>
 
-                <div class="formBtn mt-3 mt-md-0">
 
+                <div class="formBtn mt-md-0">
 
                     <a target="_blank" href="https://hhh.com.tw/designers/lists/" style="text-decoration: none;">
 
                         <button type="button" class="btn btn-primary btn-block">看其他設計師</button>
 
                     </a>
 
                 </div>
 
             </div>
 
         </div>
 
-        <div class="container container-width-ad ad bg-ad px-0 py-5">
 
+        <div class="container container-width-ad ad bg-ad px-0 py-5 d-none d-md-block">
 
             <div class="row justify-content-center mx-0">
 
                 <div class="col-md-4">
 
                     <a href="">
 
@@ -1403,275 +1433,17 @@
 
         </div>
 
 
 
-        <!-- Modal -->
 
-        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
-            <div class="modal-dialog modal-fullscreen">
 
-                <div class="modal-content">
 
-                    <div class="modal-header border-0">
 
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 
-                    </div>
 
-                    <div class="modal-body CaseModel">
 
-                        <!-- <div class="row px-0 mx-0">
 
-                            <div class="col-md-8">
 
-                                <div style="position: sticky; top:0px;">
 
-                                    <img class="img-fluid"
 
-                                        src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg"
 
-                                        alt="">
 
-                                </div>
 
-                            </div>
 
-                            <div class="col-md-4">
 
-                                <div class="d-flex justify-content-start align-items-center pt-5">
 
-                                    <a href="">
 
-                                        <div class="contact-section-avatar me-2">
 
-                                            <img class="img-fluid"
 
-                                                src="https://cloud.hhh.com.tw/upload/_hdesigner/img_path_779_20211230102606.jpg"
 
-                                                alt="">
 
-                                        </div>
 
-                                    </a>
 
-                                    <div class="ms-2" style="width: 100%;">
 
-                                        <a href="" class="contact-section-company">
 
-                                            <div>
 
-                                                歐提系統家具有限公司
 
-                                            </div>
 
-                                        </a>
 
-                                        <div style="display: flex;" class="contact-section-detail-box mt-3">
 
-                                            <div class="contact-section-detail-lf">
 
-                                                <div><i aria-hidden="true" class="fa fa-phone"></i></div>
 
-                                            </div>
 
-                                            <div class="contact-section-detail-rt">
 
-                                                <div><a href="tel:0809000123,26526">免付費 0809-000-123#26526</a></div>
 
-                                            </div>
 
-                                        </div>
 
-                                    </div>
 
-                                </div>
 
-                                <div class="info-area-title-desktop">
 
-                                    <a href="/case-post.php?id=14151" target="_blank">
 
-                                        一生一世｜工業風｜25坪
 
-                                    </a>
 
-                                </div>
 
-                                <div class="divider"></div>
 
-                                <div class="info-area-other-case-desktop py-3">
 
-                                    <div class="ml-1">該個案的其他圖片(<span id="index">5</span>/8)</div>
 
-                                    <div class="other-case-desktop-items d-flex flex-wrap">
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a>
 
-                                                <img src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片">
 
-                                            </a>
 
-                                        </div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150528.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150529.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150530.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150531.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150532.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-                                        <div id="img-0" class="w-20 m-1 p-1 img_all"><a href=""><img
 
-                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150534.jpg"
 
-                                                    width="70" height="70" alt="該個案的其他圖片"></a></div>
 
-
 
-
 
-
 
-                                    </div>
 
-                                </div>
 
-
 
-                                <div class="divider"></div>
 
-
 
-                                <div class="info-area-same-case-desktop py-3">
 
-                                    <div class="ml-1"><span>工業風</span> 其他作品</div>
 
-                                    <div class="same-case-desktop-items d-flex flex-wrap">
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/8294/94133"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer492_06_03.jpg"
 
-                                                    width="70" height="70" alt="年輕不失沉穩 現代輕工業風別墅"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/11046/126444"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/name_11046_20190402193723.jpg"
 
-                                                    width="70" height="70" alt="坐擁淡海一線美景 質樸輕工業宅"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/7773/88141"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer457_05_05.jpg"
 
-                                                    width="70" height="70" alt="日式簡約mix微醺工業風情"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/7283/82252"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer491_05_01.jpg"
 
-                                                    width="70" height="70" alt="Loft無邊際"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/8485/96363"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer102_46_05.jpg"
 
-                                                    width="70" height="70" alt="36年漏水屋改造 動線收納滿足"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/6244/70208"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer209_25_07.jpg"
 
-                                                    width="70" height="70" alt="通透玻璃，打造工業風精緻咖啡廳"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/12300/144358"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/name_12300_20200417100142.jpg"
 
-                                                    width="70" height="70" alt="簡約日式水泥宅 細品質樸生活感"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/11324/130559"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/name_11324_20190614143505.jpg"
 
-                                                    width="70" height="70" alt="老屋改頭換面 化身有氧工業宅"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/7532/85314"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer270_15_04.jpg"
 
-                                                    width="70" height="70" alt="引光大尺度 跳色工業風時尚"></a></div>
 
-
 
-                                        <div class="w-20 m-1 p-1 "><a href="/photos/detail/10240/116625"><img
 
-                                                    src="https://images.hhh.com.tw/uploads/_hcase/designer620_03_05.jpg"
 
-                                                    width="70" height="70" alt="共享時代-台中"></a></div>
 
-                                    </div>
 
-                                </div>
 
-
 
-                                <div class="divider"></div>
 
-
 
-                                <div class="info-area-data-desktop py-3">
 
-                                    <div class="ml-2">CASE DATA</div>
 
-                                    <div class="data-table-desktop ml-2">
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>裝潢費用:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>尚未提供</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>居住成員:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>大人×2</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>設計風格:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>工業風</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>房屋類型:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>標準格局</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>房屋坪數:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>25</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>房屋狀況:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>新成屋</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>圖片提供:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>歐提系統家具有限公司</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>空間格局:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>3房、2廳、2衛</div>
 
-                                            </div>
 
-                                        </div>
 
-                                        <div class="data-table-items d-flex">
 
-                                            <div class="data-table-lf">
 
-                                                <div>主要建材:</div>
 
-                                            </div>
 
-                                            <div class="data-table-rt">
 
-                                                <div>系統櫃、軌道燈、樂土灰泥、超耐磨木地板、吊扇、單車架</div>
 
-                                            </div>
 
-                                        </div>
 
-                                    </div>
 
-                                </div>
 
-
 
-                                <div class="divider"></div>
 
-
 
-                                <div class="info-area-contact-desktop py-3 mb-2">
 
-                                    <div class="ml-2">聯絡資訊 Info</div>
 
-                                    <div class="contact-section-desktop ml-2 mt-2">
 
-                                        <div class="contact-section-detail-desktop mt-3">
 
-                                            <div class="d-flex">
 
-                                                <div class="contact-section-detail-lf">
 
-                                                    <div><i aria-hidden="true" class="fa fa-phone"></i></div>
 
-                                                </div>
 
-                                                <div class="contact-section-detail-rt">
 
-                                                    <div><a href="tel:03-5748866"> 03-5748866</a></div>
 
-                                                </div>
 
-                                            </div>
 
-                                            <div class="d-flex">
 
-                                                <div class="contact-section-detail-lf">
 
-                                                    <div><i class="fas fa-map-marker-alt"></i></div>
 
-                                                </div>
 
-                                                <div class="contact-section-detail-rt">
 
-                                                    <div><a href="http://maps.google.com.tw/maps?q=%E6%96%B0%E7%AB%B9%E5%B8%82%E6%9D%B1%E5%8D%80%E5%BB%BA%E4%B8%AD%E4%B8%80%E8%B7%AF20%E8%99%9F1%E6%A8%93"
 
-                                                            target="_blank">新竹市東區建中一路20號1樓</a></div>
 
-                                                </div>
 
-                                            </div>
 
-                                            <div class="d-flex">
 
-                                                <div class="contact-section-detail-lf">
 
-                                                    <div><i class="far fa-envelope"></i></div>
 
-                                                </div>
 
-                                                <div class="contact-section-detail-rt">
 
-                                                    <div><a href="mailto:eggerboard@gmail.com">eggerboard@gmail.com</a>
 
-                                                    </div>
 
-                                                </div>
 
-                                            </div>
 
-                                            <div class="d-flex">
 
-                                                <div class="contact-section-detail-lf">
 
-                                                    <div><i aria-hidden="true" class="fa fa-home"></i></div>
 
-                                                </div>
 
-                                                <div class="contact-section-detail-rt">
 
-                                                    <div><a href="https://www.otis-design.com"
 
-                                                            target="_blank">https://www.otis-design.com</a></div>
 
-                                                </div>
 
-                                            </div>
 
-
 
-                                        </div>
 
-                                    </div>
 
-                                </div>
 
-                            </div>
 
-                        </div> -->
 
-                    </div>
 
-                </div>
 
+        <div class="container-fluid px-0 m-0 fixed_menu d-block d-md-none">
 
+            <div class="row gx-2 ps-1 pe-2">
 
+              <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/request/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/40a8bf5.svg" alt=""></a></div>
 
+              <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/calculator/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/170ebf4.svg" alt=""></a></div>
 
+              <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div>
 
+              <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/program/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/dc6b655.svg" alt=""></a></div>
 
+              <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/login/index" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/76749fd.svg" alt=""></a></div>
 
             </div>
 
-        </div>
 
+          </div>
 
 
-        <footer class="footer">
 
+        <footer class="footer d-none d-md-block">
 
             <div class="container" style="margin:0 auto;">
 
                 <div class="row">
 
                     <div class="col footer__block">

+ 156 - 0
css/style.css
View File 

@@ -10,6 +10,12 @@ body {
 
           transition-duration: 300ms;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  .sec-00 {
 
+    display: none;
 
+  }
 
+}
 
+
 
 .sec-00__close {
 
   position: absolute;
 
   top: 0;
 
@@ -2086,6 +2092,13 @@ body {
 
   top: 15px;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .case-slick-box {
 
+    height: 60vh;
 
+    position: static;
 
+  }
 
+}
 
+
 
 #hhh-cases .img-wrapper-desktopp {
 
   width: 95%;
 
   margin: 0 auto;
 
@@ -2098,10 +2111,22 @@ body {
 
   margin: 0 auto;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .CaseDetail-slick {
 
+    height: 60vh;
 
+  }
 
+}
 
+
 
 #hhh-cases .CaseDetail-slick .slick-slide {
 
   height: 100vh;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .CaseDetail-slick .slick-slide {
 
+    height: 60vh;
 
+  }
 
+}
 
+
 
 #hhh-cases .CaseDetail-slick img {
 
   width: 100%;
 
   height: auto;
 
@@ -2188,6 +2213,13 @@ body {
 
   transition: all 300ms ease-in-out;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .cases-content .caseSlider .morePhotoTip {
 
+    bottom: 10px;
 
+    right: 10px;
 
+  }
 
+}
 
+
 
 #hhh-cases .container--padding {
 
   padding: 1.2rem 0;
 
 }
 
@@ -2226,6 +2258,12 @@ body {
 
   margin: 0 auto;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .case-scMedia__block {
 
+    width: 100%;
 
+  }
 
+}
 
+
 
 #hhh-cases .case-scMedia__block .case-scMedia__list {
 
   background-color: #FFF;
 
   -webkit-box-shadow: 0 1px 10px #cecece;
 
@@ -2239,6 +2277,15 @@ body {
 
       justify-content: space-around;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .case-scMedia__block .case-scMedia__list {
 
+    border-radius: 0px;
 
+    -webkit-box-shadow: none;
 
+            box-shadow: none;
 
+    padding: 0;
 
+  }
 
+}
 
+
 
 #hhh-cases .relTag {
 
   padding: 1rem;
 
 }
 
@@ -2285,6 +2332,12 @@ body {
 
   padding: 0.5rem;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .caseData h4 {
 
+    padding: 1rem 0.5rem 0.5rem;
 
+  }
 
+}
 
+
 
 #hhh-cases .caseData .caseData__infoBlock {
 
   position: relative;
 
   -webkit-box-shadow: 0 1px 10px #cecece;
 
@@ -2318,6 +2371,14 @@ body {
 
   -webkit-box-flex: 0;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .caseData .caseData__infoItems__list--lf {
 
+    max-width: 25%;
 
+    -ms-flex-preferred-size: 25%;
 
+        flex-basis: 25%;
 
+  }
 
+}
 
+
 
 #hhh-cases .caseData .caseData__infoItems__list--rt {
 
   -ms-flex-preferred-size: 80%;
 
       flex-basis: 80%;
 
@@ -2331,6 +2392,14 @@ body {
 
   word-break: break-all;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .caseData .caseData__infoItems__list--rt {
 
+    -ms-flex-preferred-size: 70%;
 
+        flex-basis: 70%;
 
+    max-width: 70%;
 
+  }
 
+}
 
+
 
 #hhh-cases .caseData a {
 
   text-decoration: none;
 
   background-color: transparent;
 
@@ -2356,6 +2425,12 @@ body {
 
   height: 370px;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .caseData__designerBlock__designer {
 
+    width: 60%;
 
+  }
 
+}
 
+
 
 #hhh-cases .caseData__designerBlock__designer--above {
 
   height: 70%;
 
 }
 
@@ -2372,16 +2447,35 @@ body {
 
   background-position: center;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .caseData__designerBlock__avatar--img {
 
+    height: 190px;
 
+    background-size: contain;
 
+  }
 
+}
 
+
 
 #hhh-cases .caseData__designerBlock__avatar {
 
   width: 50%;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .caseData__designerBlock__avatar {
 
+    width: 40%;
 
+  }
 
+}
 
+
 
 #hhh-cases .tel {
 
   color: #EE751B !important;
 
   font-size: 1.5rem;
 
   font-weight: bold;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .tel {
 
+    font-size: 1rem;
 
+  }
 
+}
 
+
 
 #hhh-cases .likeSee__state {
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
@@ -2501,6 +2595,13 @@ body {
 
   width: 47%;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .formBtn {
 
+    margin-top: 15px;
 
+    width: 100%;
 
+  }
 
+}
 
+
 
 #hhh-cases .ad__bgImg {
 
   height: 80px;
 
   background-repeat: no-repeat;
 
@@ -2513,6 +2614,12 @@ body {
 
   margin-bottom: 30px;
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .container-width-ad {
 
+    margin-bottom: 100px;
 
+  }
 
+}
 
+
 
 #hhh-cases .contact-section-avatar {
 
   width: 75px;
 
   height: 100px;
 
@@ -2696,6 +2803,12 @@ body {
 
   }
 
 }
 
 
+@media screen and (max-width: 576px) {
 
+  #hhh-cases .display-pc {
 
+    display: none;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 576px) {
 
   #hhh-cases .CaseInfo-pc {
 
     display: none;
 
@@ -2707,6 +2820,49 @@ body {
 
   box-shadow: 0 1px 10px #cecece;
 
 }
 
 
+.fixed_menu {
 
+  height: 78px;
 
+  position: fixed;
 
+  z-index: 4;
 
+  bottom: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  background-color: #fff;
 
+  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
+  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
+  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
+}
 
+
 
+@media (min-width: 480px) {
 
+  .fixed_menu {
 
+    height: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 480px) {
 
+  .fixed_menu .row {
 
+    height: 50px;
 
+  }
 
+}
 
+
 
+@media (min-width: 480px) {
 
+  .fixed_menu__box {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+}
 
+
 
+.fixed_menu__box img:focus-visible {
 
+  outline: none;
 
+}
 
+
 
+@media (min-width: 480px) {
 
+  .fixed_menu__box img {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+}
 
+
 
 .article--style {
 
   background: #fff;
 
   -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;

File diff suppressed because it is too large
+ 0 - 0
css/style.css.map


+ 123 - 3
css/style.scss
View File 

@@ -1,3 +1,5 @@
 
+$horizontal: 480px;
 
+
 
 body {
 
     font-family: 'Helvetica Neue';
 
 }
 
@@ -6,7 +8,9 @@ body {
 
     background-color: rgb(202, 202, 202);
 
     transition-property: height;
 
     transition-duration: 300ms;
 
-    
+    @media screen and(max-width:576px) {
 
+        display: none;
 
+    }
 
     &__close {
 
         position: absolute;
 
         top: 0;
 
@@ -1718,8 +1722,14 @@ body {
 
         // width: 100%;
 
         position: sticky;
 
         top:15px;
 
+        @media screen and(max-width:576px) {
 
+            height: 60vh;
 
+            position: static;
 
+
 
+        }
 
         
     }
 
+   
     .img-wrapper-desktopp{
 
         width: 95%;
 
         margin: 0 auto;
 
@@ -1729,8 +1739,16 @@ body {
 
         height: 100vh;
 
         width: 95%;
 
         margin:0 auto ;
 
+        @media screen and(max-width:576px) {
 
+            height: 60vh;
 
+           
+
 
+        }
 
         .slick-slide {
 
             height: 100vh;
 
+            @media screen and(max-width:576px) {
 
+                height: 60vh;
 
+            }
 
         }
 
         img{
 
             width: 100%;
 
@@ -1803,6 +1821,13 @@ body {
 
             background-color: rgba(0, 0, 0, 0.45);
 
             -webkit-transition: all 300ms ease-in-out;
 
             transition: all 300ms ease-in-out;
 
+
 
+            @media screen and(max-width:576px) {
 
+                bottom: 10px;
 
+                right: 10px;
 
+
 
+
 
+            }
 
         }
 
        
     }
 
@@ -1830,6 +1855,9 @@ body {
 
     .case-scMedia__block{
 
         width: 35%;
 
         margin: 0 auto;
 
+        @media screen and(max-width:576px) {
 
+            width: 100%;
 
+        }
 
         .case-scMedia__list{
 
             background-color: #FFF;
 
             box-shadow: 0 1px 10px #cecece;
 
@@ -1837,6 +1865,14 @@ body {
 
             padding: 1rem 2.8rem;
 
             display: flex;
 
             justify-content: space-around;
 
+
 
+            @media screen and(max-width:576px) {
 
+                border-radius: 0px;
 
+                box-shadow: none;
 
+                padding:0;
 
+
 
+
 
+            }
 
         
         }
 
     }
 
@@ -1872,6 +1908,9 @@ body {
 
             font-weight: bold;
 
             color: #34404B;
 
             padding: 0.5rem;
 
+            @media screen and(max-width:576px) {
 
+                padding: 1rem 0.5rem 0.5rem;
 
+            }
 
         }
 
         .caseData__infoBlock{
 
             position: relative; 
@@ -1893,6 +1932,10 @@ body {
 
             max-width: 15%;
 
             flex-basis: 15%;
 
             -webkit-box-flex: 0;
 
+            @media screen and(max-width:576px) {
 
+                max-width: 25%;
 
+            flex-basis: 25%;
 
+            }
 
         }
 
         .caseData__infoItems__list--rt{
 
             flex-basis: 80%;
 
@@ -1900,6 +1943,10 @@ body {
 
             max-width: 80%;
 
             justify-content: start;
 
             word-break: break-all;
 
+            @media screen and(max-width:576px) {
 
+                flex-basis: 70%;
 
+                max-width: 70%;
 
+            }
 
         }
 
         a{
 
             text-decoration: none;
 
@@ -1918,9 +1965,13 @@ body {
 
     .caseData__designerBlock__designer--pc{
 
         padding: 1rem 0.9rem;
 
         width: 50%;
 
-      
         height: 370px;
 
     }
 
+    .caseData__designerBlock__designer{
 
+        @media screen and(max-width:576px) {
 
+           width: 60%;
 
+        }
 
+    }
 
     .caseData__designerBlock__designer--above{
 
         height: 70%;
 
     }
 
@@ -1933,14 +1984,26 @@ body {
 
         background-size: contain;
 
         background-repeat: no-repeat;
 
         background-position: center;
 
+
 
+        @media screen and(max-width:576px) {
 
+            height: 190px;
 
+            background-size: contain;
 
+        }
 
+
 
     }
 
     .caseData__designerBlock__avatar{
 
         width: 50%;
 
+        @media screen and(max-width:576px) {
 
+            width: 40%;
 
+         }
 
     }
 
     .tel{
 
         color: #EE751B !important;
 
         font-size: 1.5rem;
 
         font-weight: bold;
 
+        @media screen and(max-width:576px) {
 
+            font-size: 1rem;
 
+        }
 
     }
 
     .likeSee__state{
 
         display: flex;
 
@@ -2032,7 +2095,12 @@ body {
 
     }
 
     .formBtn{
 
         width: 47%;
 
+        @media screen and(max-width:576px) {
 
+            margin-top: 15px;
 
+           width: 100%;
 
+        }
 
     }
 
+   
     .ad__bgImg {
 
         height: 80px;
 
         background-repeat: no-repeat;
 
@@ -2042,6 +2110,9 @@ body {
 
     .container-width-ad {
 
         max-width: 768px;
 
         margin-bottom: 30px;
 
+        @media screen and(max-width:576px) {
 
+            margin-bottom: 100px;
 
+         }
 
     }
 
 
     // 彈出視窗
 
@@ -2057,7 +2128,7 @@ body {
 
     height: calc(18px * 2 *1.39);
 
     }
 
  
-.contact-section-detail-box{
 
+    .contact-section-detail-box{    
     color: #6D6D6D ;
 
     display: flex !important;
 
     .contact-section-detail-lf{
 
@@ -2072,6 +2143,8 @@ body {
 
         color: #6D6D6D ;
 
         text-decoration: none;
 
     }
 
+
 
+   
    
 }
 
 .info-area-title-desktop {
 
@@ -2197,6 +2270,15 @@ body {
 
     }
 
   
 }
 
+
 
+.display-pc{
 
+    @media screen and(max-width:576px) {
 
+        display: none;
 
+    }
 
+}
 
+
 
+
 
+
 
 .CaseInfo-pc{
 
     @media screen and(max-width:576px) {
 
         display: none;
 
@@ -2209,6 +2291,44 @@ body {
 
 }
 
 }
 
 
+.fixed_menu {
 
+    height: 78px;
 
+    position: fixed;
 
+    z-index: 4;
 
+    bottom: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    background-color: #fff;
 
+    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
+    -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
+    -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
+    //padding-bottom: 16px;
 
+    @media (min-width: $horizontal) {
 
+        height: 50px;
 
+    }
 
+    .row {
 
+        @media (min-width: $horizontal) {
 
+            height: 50px;
 
+        } 
+    }
 
+    &__box {
 
+        @media (min-width: $horizontal) {
 
+            width: 100%;
 
+            height: 100%;
 
+        } 
+        img {
 
+            &:focus-visible {
 
+                outline: none;
 
+            }
 
+            @media (min-width: $horizontal) {
 
+                width: 100%;
 
+                height: 100%;
 
+            } 
+        }
 
+    }
 
+}
 
+
 
+
 
 // 文章頁面
 
 .article--style{
 
     background: #fff;

+ 76 - 17
goto.js
View File 

@@ -2,12 +2,11 @@
 
 $(".popular").hide();
 
 
 
-
 
-$( ".article__readMore" ).click(function() {
 
-
 
+$(document).on("click", ".article__readMore", function (event) {
 
     $('.article__contexts').css('height','auto');
 
     $('.article__readMore').hide();
 
-  });
 
+    
+});
 
 
 
 $(document).on("click", ".likeSee__state__filter--item", function (event) {
 
@@ -30,13 +29,15 @@ function get_data() {
 
     $.ajax({
 
         method: "GET",
 
         // url: `json/cases-${id}.json`,
 
-        url: `json/cases-${id}.json`,
 
+        // url: `json/cases-${id}.json`,
 
+        url:`json/cases.json`,
 
         dataType: "json",
 
     })
 
         .done(function (msg) {
 
             console.log(msg);
 
             let designersinfo = "";
 
             let CaseInfo = "";
 
+            let CaseInfo_mb = "";
 
             let CaseTag = "";
 
             let CaseData = "";
 
             let CaseNews = "";
 
@@ -44,6 +45,8 @@ function get_data() {
 
             let CaseDetail = "";
 
             let CasePageTitle = "";
 
             let CaseImgQuantity = "";
 
+            let article__contexts="";
 
+
 
 
             for (let i = 0; i < msg.length; i++) {
 
                 designersinfo = `
 
@@ -51,7 +54,7 @@ function get_data() {
 
                     <div class="article__wrapper">
 
                             <h2 class="h4">${msg[i].Casetitle}</h2>
 
                         <div class="d-flex justify-content-between">
 
-                            <div class="small">${msg[i].CaseTeamName} ｜ 圖片提供:${msg[i].CaseCompany}</div>
 
+                            <div class="small d-none d-md-block">${msg[i].CaseTeamName} ｜ 圖片提供:${msg[i].CaseCompany}</div>
 
                             <div class="small">${msg[i].CaseDate}｜ 人氣:${msg[i].CaseViews}</div>
 
                         </div>
 
                     </div>
 
@@ -93,18 +96,70 @@ function get_data() {
 
                         </div>
 
                     </div>`
 
 
+                CaseInfo_mb = `
 
+                <div class="row info--shadow text-center">
 
+                    <div class="col-6 px-0 border-sidebar mh">
 
+                        <div class="info__option mx-3 border-below">
 
+                            <div>
 
+                                <div class="info__items__title">風格</div>
 
+                                <div class="info__items info__items--ellipse">${msg[i].CaseStyle}</div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-6 px-0 mh">
 
+                        <div class="info__option mx-3 border-below">
 
+                            <div>
 
+                                <div class="info__items__title">格局</div>
 
+                                <div class="info__items info__items--ellipse">${msg[i].CaseHouse}</div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-6 px-0 mh">
 
+                        <div class="info__option mx-3">
 
+                            <div>
 
+                                <div class="info__items__title">坪數</div>
 
+                                <div class="info__items info__items--ellipse">${msg[i].CaseSize}</div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="col-6 px-0 mh">
 
+                        <div class="info__option mx-3">
 
+                            <div>
 
+                                <div class="info__items__title">預算</div>
 
+                                <div class="info__items info__items--ellipse">${msg[i].CaseProject}</div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                 </div>
 
+                `
 
+
 
+                    if(msg[i].Casedescription == undefined){
 
+                        article__contexts=`<div></div>`
 
+                    }else {
 
+                        article__contexts=`
 
+                        <div><p class="article__contexts">${msg[i].Casedescription}</p></div>
 
+                        <div class="article__readMore">
 
+                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
 
+                        <a class="article__readMore__text">閱讀更多</a>
 
+                        <i class="fa fa-chevron-down" aria-hidden="true"></i>
 
+                        </div>
 
+                        `
 
+                    }
 
+
 
                 for (let j = 0; j < msg[i].CaseTag.length; j++) {
 
                     // console.log(msg[i].CaseTag.length);
 
 
                     // console.log(msg[i].CaseTag[j].Tag);
 
 
                     CaseTag += ' \
 
-                        <a href="" class="btn btn-outline-custom rounded-0">'+ msg[i].CaseTag[j].Tag + '</a> \
 
+                        <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].CaseTag[j].Tag + '-keyword/" class="btn btn-outline-custom rounded-0">'+ msg[i].CaseTag[j].Tag + '</a> \
 
                         ';
 
                 }
 
 
                 CaseData = `
 
              <h4 class="d-none d-md-block">CASE DATA</h4>
 
+             <h4 class="d-block d-md-none">CASE DATA</h4>
 
+
 
              <div class="caseData__infoItems">
 
                 <div class="caseData__infoItems__list">
 
                     <div class="caseData__infoItems__list--lf">居住成員:</div>
 
@@ -141,7 +196,7 @@ function get_data() {
 
             </div> `
 
 
                 CaseData2 = `
 
-            <div class="caseData__designerBlock h-100">
 
+                        <div class="caseData__designerBlock h-100">
 
                             <div class="caseData__designerBlock__designer d-block d-md-none">
 
                                 <h4>聯絡設計師</h4>
 
                                 <ul>
 
@@ -186,7 +241,7 @@ function get_data() {
 
 
                 for (var k = 0; k < msg[i].ProfileRecently.length; k++) {
 
                     CaseNews +=
 
-                        '\<div class="col-md-4 ps-0"\
 
+                        '<div class="col-6 col-md-4 ps-0"\
 
                             <div class="vue-waterfall-slot">\
 
                              <div class="card CaseNews-Card">\
 
                                  <a href="'+ msg[i].ProfileRecently[k].ProfileLink + '">\
 
@@ -199,7 +254,7 @@ function get_data() {
 
                     for (var z = 0; z < msg[i].ProfileRecently[k].ProfileTag.length; z++) {
 
                         // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
 
                         CaseNews += '\
 
-                                <a href="">\
 
+                                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].ProfileRecently[k].ProfileTag[z].Tag + '-keyword/">\
 
                                 '+ msg[i].ProfileRecently[k].ProfileTag[z].Tag + '\
 
                                 </a>\
 
                                 ';
 
@@ -219,7 +274,7 @@ function get_data() {
 
                     for (var y = 0; y < msg[i].ProfilePopularity[x].ProfileTag.length; y++) {
 
                         // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
 
                         CasePopular += '\
 
-                                <a href="'+ msg[i].ProfilePopularity[x].ProfileTag[y].TagLink + '" class="likeSee__tag--item">\
 
+                                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '-keyword/" class="likeSee__tag--item">\
 
                                 '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\
 
                                 </a>\
 
                                 ';
 
@@ -228,7 +283,7 @@ function get_data() {
 
                 };
 
                 // 個案細節
 
                 CaseDetail += '<div class="row px-0 mx-0">'
 
-                CaseDetail += '<div class="col-md-8 case-slick-box" style="overflow-y: hidden;"><div class="img-wrapper-desktopp"><div class="CaseDetail-slick">'
 
+                CaseDetail += '<div class="col-md-8 case-slick-box" style="overflow-y: hidden;"><button type="button" class="btn-close close-window d-block d-md-none mt-3 btn-close-white" style="margin-left:auto"></button><div class="img-wrapper-desktopp"><div class="CaseDetail-slick">'
 
                 // 輪播圖
 
                 for (let j = 0; j < msg[i].CaseDetail.length; j++) {
 
                     CaseDetail +=
 
@@ -240,11 +295,11 @@ function get_data() {
 
 
                 CaseDetail +=
 
                     '<div class="col-md-4" style="background-color:#fff;">\
 
-                    <div class="modal-header border-0">\
 
-                    <button type="button" class="btn-close close-window"></button>\
 
-                </div>\
 
-                <div class="d-flex justify-content-start align-items-center pt-5">\
 
-                <a href="">\
 
+                    <div class="modal-header border-0 display-pc close-window">\
 
+                        <button type="button" class="btn-close"></button>\
 
+                    </div>\
 
+                    <div class="d-flex justify-content-start align-items-center pt-5">\
 
+                    <a href="">\
 
                     <div class="contact-section-avatar me-2">\
 
                         <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
 
                     </div>\
 
@@ -440,6 +495,8 @@ function get_data() {
 
             }
 
             $('.article').html(designersinfo);
 
             $('.CaseInfo').html(CaseInfo);
 
+            $('.CaseInfo_mb').html(CaseInfo_mb);
 
+
 
             $('.CaseTag').html(CaseTag);
 
             $('.caseData-PC-left').html(CaseData);
 
             $('.caseData-PC-right').html(CaseData2);
 
@@ -448,6 +505,8 @@ function get_data() {
 
             $('.CaseModel').html(CaseDetail);
 
             $('#case-page-title').html(CasePageTitle);
 
             $('.case-img-quantity').html(CaseImgQuantity);
 
+            $('.article__contexts-box').html(article__contexts);
 
+
 
 
 
                 $('.CaseDetail-slick').slick({

+ 20 - 7
json/cases.json
View File 

@@ -1,6 +1,7 @@
 
 [
 
     {
 
-        "CaseId":"",
 
+        "designerid":"779",
 
+        "CaseId":"14151",
 
         "Casetitle":"一生一世｜工業風｜25坪",
 
         "CaseTeamName":"Otis設計團隊",
 
         "CaseCompany":"歐提系統家具有限公司",
 
@@ -17,6 +18,7 @@
 
         "CaseHouse":"三房、兩廳、兩衛",
 
         "CaseSize":"25坪",
 
         "CaseProject":"尚未提供",
 
+        "Casedescription":"家，是無可取代的避風港。為了滿足居者嚮往的現代時尚，席德設計傾聽所需，運用大理石、實木鋪敘出沉靜的自然況味，揉合鍍鈦金屬、鐵件的精緻細節，調和質材與線條的層次平衡，編織動人的家庭關係。<br><br>入門落塵區採用石紋地坪界定場域，透過多邊形立柱間的縫隙窺見餐廳，配合鏡面修飾，勾勒公領域的視覺廣度。沙發背牆鋪設天然粗獷的石皮，演繹客廳的氣派風範，嵌入鐵件展示架、木格柵佛龕，形成和諧混搭的精緻美學，而隱含光澤的大理石電視牆，輝映綴飾天花的亮面鍍鈦線條，形構出耐人品味的豐富視覺。淑絹設計師將餐廳規劃於全室中央，匯聚成家人互動的核心場域，搭配長型實木餐桌延伸吧台，圍繞悠柔氣息，使一家共享日常的美好瞬間宛若停駐於此。<br><br>推開深色木質門片，設計師運用沉靜的低彩度色系，營塑私領域的舒眠環境。主臥背牆以對稱鏡面、燈飾，渲染奢華風情，並以步入式更衣間設計，回應女屋主的衣物收納需求；孝親房床頭妝點溫潤木皮、藕紫色繃布，形塑優雅氣質；經由格局的重新調配，挪騰出獨立空間提供小兒子使用，窗邊灑落的日光，跟隨著書桌的木質紋理恣意遊走。經由席德設計與屋主一家的悉心討論，以氣勢磅礡的質材、紋理，點亮精緻層次的燦爛光輝，成就家的獨一無二。",
 
         "CaseDataMember":"大人x2",
 
         "CaseDataSize":"25坪",
 
         "CaseDataStyle":"工業風、暗色系流淌工業風",
 
@@ -31,21 +33,19 @@
 
         "CasePageprev":"",
 
         "CaseTag":[
 
             {
 
-                "Tag":"工業風",
 
-                "TagLink":""
 
+                "Tag":"工業風"
 
 
             },
 
             {
 
-                "Tag":"新成屋",
 
-                "TagLink":""
 
+                "Tag":"新成屋"
 
             },
 
             {
 
-                "Tag":"大坪數",
 
-                "TagLink":""
 
+                "Tag":"大坪數"
 
             }
 
         ],
 
         "ProfileRecently":[
 
             {
 
+                "designerid":"",
 
                 "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14155_20211230151618.jpg",
 
                 "ProfileTag":[
 
                     {
 
@@ -64,6 +64,7 @@
 
                 "ProfileLink":""
 
             },
 
             {
 
+                "designerid":"",
 
                 "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14154_20211230151111.jpg",
 
                 "ProfileTag":[
 
                     {
 
@@ -84,6 +85,7 @@
 
         ],
 
         "ProfilePopularity":[
 
             {
 
+                "designerid":"",
 
                 "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14154_20211230151113.jpg",
 
                 "ProfileTag":[
 
                     {
 
@@ -102,6 +104,7 @@
 
                 "ProfileLink":""
 
             },
 
             {
 
+                "designerid":"",
 
                 "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14155_20211230151625.jpg",
 
                 "ProfileTag":[
 
                     {
 
@@ -151,52 +154,62 @@
 
         ],
 
         "OtherStylePortfolio":[
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer492_06_03.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"年輕不失沉穩 現代輕工業風別墅"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/name_11046_20190402193723.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"坐擁淡海一線美景 質樸輕工業宅"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer457_05_05.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"日式簡約mix微醺工業風情"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer491_05_01.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"Loft無邊際"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer102_46_05.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"36年漏水屋改造 動線收納滿足"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer209_25_07.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"通透玻璃，打造工業風精緻咖啡廳"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/name_12300_20200417100142.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"簡約日式水泥宅 細品質樸生活感"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/name_11324_20190614143505.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"老屋改頭換面 化身有氧工業宅"
 
             },
 
            
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer270_15_04.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"引光大尺度 跳色工業風時尚"
 
             },
 
             {
 
+                "designerid":"",
 
                 "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer620_03_05.jpg",
 
                 "PortfoliolLink":"",
 
                 "PortfoliolImgAlt":"共享時代-台中"

Some files were not shown because too many files changed in this diff