case

cases.html

@@ -987,7 +987,7 @@
             </div>
         </section>
         <section class="article">
-            <div class="container container-width-column px-md-0">
+            <!-- <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">
@@ -995,22 +995,23 @@
                         <div class="small">2021-12-30｜ 人氣:49</div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </section>
 
         <section class="cases-content">
             <div class="caseSlider shadow">
-                <img class="img-fluid" src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg" alt="">
+                <img class="img-fluid" src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg"
+                    alt="">
                 <div class="morePhotoTip" data-bs-toggle="modal" data-bs-target="#exampleModal">
                     <i class="fa fa-clone" aria-hidden="true"><span class="ms-2">8</span></i>
-                    </div>
+                </div>
             </div>
         </section>
         <div class="text-center my-3" style="color:#727679;">&nbsp;</div>
-        <div class="container bg-white shadow px-0">
+        <div class="container bg-white shadow px-0 CaseInfo-pc">
             <div class="mt-md-4">
-                <div class="container container--padding px-0">
-                    <div class="row mx-0 justify-content-around align-items-center">
+                <div class="container container--padding px-0 CaseInfo">
+                    <!-- <div class="row mx-0 justify-content-around align-items-center">
                         <div class="col-md-3 px-mx-0">
                             <div class="info__items border-end">
                                 <div>
@@ -1043,10 +1044,52 @@
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
+
+        <section class="info">
+            <div class="container container--padding d-block d-md-none">
+                <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">工業風</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">3房、2廳、2衛</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">25坪</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">
+                                    <div></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <div class="text-center my-3" style="color:#727679;">&nbsp;</div>
         <section class="scMedia">
             <div class="container">
@@ -1057,8 +1100,6 @@
                         <a href=""> <img src="https://hhh.com.tw/assets/images/rv_web/wechat.svg" alt=""></a>
                         <a href=""> <img src="https://hhh.com.tw/assets/images/rv_web/share.svg" alt=""></a>
                         <a href=""> <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" alt=""></a>
-
-
                     </div>
                 </div>
             </div>
@@ -1068,11 +1109,10 @@
                 <div class="relTag__items__title">
                     <h4>標籤</h4>
                 </div>
-                <div class="relTag__items__tags">
-                    <a href="" class="btn btn-outline-custom rounded-0">標準格局</a>
+                <div class="relTag__items__tags CaseTag">
+                    <!-- <a href="" class="btn btn-outline-custom rounded-0">標準格局</a>
                     <a href="" class="btn btn-outline-custom rounded-0">新成屋</a>
-                    <a href="" class="btn btn-outline-custom rounded-0">工業風</a>
-
+                    <a href="" class="btn btn-outline-custom rounded-0">工業風</a> -->
 
                 </div>
             </div>
@@ -1082,8 +1122,8 @@
             <div class="container px-md-0">
                 <div class="row">
                     <div class="col-12 col-md-6 mb-5 mb-md-0">
-                        <div class="caseData__infoBlock h-100">
-                            <h4 class="d-none d-md-block">CASE DATA</h4>
+                        <div class="caseData__infoBlock h-100 caseData-PC-left">
+                            <!-- <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">
@@ -1118,11 +1158,11 @@
                                     <div class="caseData__infoItems__list--lf">主要建材:</div>
                                     <div class="caseData__infoItems__list--rt">系統櫃、軌道燈、樂土灰泥、超耐磨木地板、吊扇、單車架</div>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
-                    <div class="col-12 col-md-6">
-                        <div class="caseData__designerBlock h-100">
+                    <div class="col-12 col-md-6 caseData-PC-right">
+                        <!-- <div class="caseData__designerBlock h-100">
                             <div class="caseData__designerBlock__designer d-block d-md-none">
                                 <h4>聯絡設計師</h4>
                                 <ul>
@@ -1163,7 +1203,7 @@
                                     </div>
                                 </a>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>
@@ -1189,9 +1229,9 @@
                             </div>
                         </div>
 
-                        <div class="vue-waterfall News">
-                            <div class="row px-0 mx-0">
-                                <div class="col-md-4 ps-0">
+                        <div class="vue-waterfall CaseNews">
+                            <div class="row px-0 mx-0 CaseNews-Card">
+                                <!-- <div class="col-md-4 ps-0">
                                     <div class="vue-waterfall-slot">
                                         <div class="card">
                                             <a href="">
@@ -1212,8 +1252,8 @@
                                             </a>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="col-md-4">
+                                </div> -->
+                                <!-- <div class="col-md-4 ps-0">
                                     <div class="vue-waterfall-slot">
                                         <div class="card" style="padding: 0px 5px !important;">
                                             <a href="">
@@ -1234,12 +1274,12 @@
                                             </a>
                                         </div>
                                     </div>
-                                </div>
+                                </div> -->
                             </div>
                         </div>
                         <div class="mt-0 mt-md-2 popular">
-                            <div>
-                                <div class="likeSee__rule">
+                            <div class="Case-popular">
+                                <!-- <div class="likeSee__rule">
                                     <a href="/cases/detail/d/14154/" target="_blank">
                                         <div class="likeSee__bgImg">
                                             <img class="img-fluid"
@@ -1255,8 +1295,8 @@
                                         <a href="/cases/lists/大坪數-keyword/" target="_blank"
                                             class="likeSee__tag--item">大坪數</a>
                                     </div>
-                                </div>
-                                <div class="likeSee__rule">
+                                </div> -->
+                                <!-- <div class="likeSee__rule">
                                     <a href="/cases/detail/d/14155/" target="_blank">
                                         <div class="likeSee__bgImg">
                                             <img class="img-fluid"
@@ -1272,7 +1312,7 @@
                                         <a href="/cases/lists/標準格局-keyword/" target="_blank"
                                             class="likeSee__tag--item">標準格局</a>
                                     </div>
-                                </div>
+                                </div> -->
                             </div>
                         </div>
                     </div>
@@ -1317,7 +1357,7 @@
 
             </div>
         </div>
-    
+
 
         <!-- Modal -->
         <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -1326,13 +1366,13 @@
                     <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">
-                        <div class="row px-0 mx-0">
+                    <div class="modal-body CaseModel">
+                        <!-- <div class="row px-0 mx-0">
                             <div class="col-md-8">
-                                <div style="position: sticky; top:0px;"> 
+                                <div style="position: sticky; top:0px;">
                                     <img class="img-fluid"
-                                            src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg"
-                                            alt="">
+                                        src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg"
+                                        alt="">
                                 </div>
                             </div>
                             <div class="col-md-4">
@@ -1360,8 +1400,11 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="info-area-title-desktop"><a href="/case-post.php?id=14151" target="_blank">
-                                        一生一世｜工業風｜25坪</a></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>
@@ -1372,10 +1415,6 @@
                                             </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_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>
@@ -1388,18 +1427,24 @@
                                                     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_20211230150534.jpg"
+                                                    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_20211230150528.jpg"
+                                                    src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150534.jpg"
                                                     width="70" height="70" alt="該個案的其他圖片"></a></div>
 
+
+
                                     </div>
                                 </div>
 
@@ -1411,30 +1456,39 @@
                                         <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>
@@ -1562,12 +1616,12 @@
                                                             target="_blank">https://www.otis-design.com</a></div>
                                                 </div>
                                             </div>
+
                                         </div>
                                     </div>
                                 </div>
-
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>

css/style.css

@@ -2008,6 +2008,12 @@ body {
   position: relative;
 }
 
+@media screen and (max-width: 576px) {
+  #hhh-cases .cases-content .caseSlider {
+    padding: 0;
+  }
+}
+
 #hhh-cases .cases-content .caseSlider .morePhotoTip {
   cursor: pointer;
   position: absolute;
@@ -2041,6 +2047,12 @@ body {
           align-items: center;
 }
 
+@media screen and (max-width: 576px) {
+  #hhh-cases .info__items {
+    font-size: 1rem;
+  }
+}
+
 #hhh-cases .info__items__title {
   color: #727679;
   font-weight: 400;
@@ -2427,6 +2439,87 @@ body {
   max-width: 7%;
 }
 
+#hhh-cases .info {
+  margin: 0 0 1.8rem;
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+}
+
+#hhh-cases .info .info__option {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 100%;
+}
+
+#hhh-cases .info .info__items--ellipse {
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 1;
+  height: calc(19.2px * 1 * 1.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+}
+
+@media screen and (max-width: 576px) {
+  #hhh-cases .info .info__items--ellipse {
+    height: calc(16px * 1 * 1.5);
+    min-height: 0;
+    padding: 0;
+  }
+}
+
+#hhh-cases .info .border-sidebar {
+  position: relative;
+}
+
+#hhh-cases .info .border-sidebar::after {
+  content: '';
+  display: inline-block;
+  width: 1px;
+  height: calc(150px * 0.8);
+  background-color: #cecece;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  position: absolute;
+  left: 100%;
+  top: 12px;
+}
+
+#hhh-cases .info .mh {
+  min-height: 75px;
+}
+
+#hhh-cases .info .border-below {
+  border-bottom: 1px solid #cecece;
+}
+
+@media screen and (max-width: 576px) {
+  #hhh-cases .info .container--padding {
+    padding: 0 1.875rem;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  #hhh-cases .CaseInfo-pc {
+    display: none;
+  }
+}
+
+#hhh-cases .info--shadow {
+  -webkit-box-shadow: 0 1px 10px #cecece;
+  box-shadow: 0 1px 10px #cecece;
+}
+
 .article--style {
   background: #fff;
   -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;

css/style.scss

@@ -1562,6 +1562,7 @@ body {
 
 // 個案頁面
 #hhh-cases{
+
     .breadcrumb{
         padding: 0.75rem 1rem;
         a{
@@ -1610,6 +1611,10 @@ body {
             margin: 0 auto;
             padding: 100px;
             position: relative;
+            @media screen and(max-width:576px) {
+                padding: 0;
+
+            }
         }
         .caseSlider .morePhotoTip {
             cursor: pointer;
@@ -1636,6 +1641,9 @@ body {
         display: flex;
         justify-content: center;
         align-items: center;
+        @media screen and(max-width:576px) {
+            font-size: 1rem;
+        }
     }
     .info__items__title{
         color:#727679;
@@ -1842,18 +1850,18 @@ body {
         margin-bottom: 30px;
     }
 
-// 彈出視窗
-.contact-section-avatar{
+    // 彈出視窗
+    .contact-section-avatar{
     width: 75px;
     height: 100px;
-}
-.contact-section-company{
+    }
+    .contact-section-company{
     font-weight: bold;
     font-size: 18px;
     color: #6D6D6D ;
     text-decoration: none;
     height: calc(18px * 2 *1.39);
-}
+    }
  
 .contact-section-detail-box{
     color: #6D6D6D ;
@@ -1933,6 +1941,77 @@ body {
     align-items: start;
     max-width: 7%;
 }
+.info {
+    margin: 0 0 1.8rem;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+    .info__option {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        min-height: 100%;
+    }
+    .info__items--ellipse {
+        -webkit-box-orient: vertical;
+        box-orient: vertical;
+        -webkit-line-clamp: 1;
+        height: calc(19.2px * 1 * 1.5);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-transition: all 300ms ease-in-out;
+        transition: all 300ms ease-in-out;
+        @media screen and(max-width:576px) {
+            height: calc(16px * 1 * 1.5);
+            min-height: 0;
+            padding: 0;
+        }
+    }
+    .border-sidebar{
+        position: relative;
+      
+    }
+    .border-sidebar::after {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: calc(150px * 0.8);
+        background-color: #cecece;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        position: absolute;
+        left: 100%;
+        top: 12px;
+    }
+    .mh{
+        min-height: 75px;
+    }
+    .border-below {
+        border-bottom: 1px solid #cecece;
+    }
+    .container--padding{
+        @media screen and(max-width:576px) {
+            padding: 0 1.875rem;
+        }
+    }
+   
+}
+.CaseInfo-pc{
+    @media screen and(max-width:576px) {
+        display: none;
+    }
+}
+
+.info--shadow {
+    -webkit-box-shadow: 0 1px 10px #cecece;
+    box-shadow: 0 1px 10px #cecece;
+}
 }
 
 // 文章頁面

goto.js

@@ -5,7 +5,7 @@ $(".popular").hide();
 
 
 $(document).on("click", ".likeSee__state__filter--item", function (event) {
-    $(".News").toggle();
+    $(".CaseNews").toggle();
     $(".popular").toggle();
     $(".likeSee__state__filter--item").removeClass('active');
     $(this).addClass("active");
@@ -19,37 +19,413 @@ function get_data() {
     // $("#version").html(desid);
     $.ajax({
         method: "GET",
-        url: "cases.json",
+        url: "json/cases.json",
         dataType: "json",
 
     })
         .done(function (msg) {
-            for (var i = 0; i < msg.length; i++) {
-                // if (msg[i].id == id) {
-                    var contentarticle = '';
-                    var webtitle = '';
-                    console.log(msg);
-                    contentarticle += ' \
-                    <h1 class="sec10-title">\
-                    '+ msg[i].articletitle + '    \
-                    </h1>\
-                    <p class="card-text"><small class="text-muted">By'+ msg[i].articleauthor + '</small></p>\
-                    <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>'+ msg[i].articledate + '</span>\
-                    <hr>\
-                    <a target="_blank" href="https://testnets.akaswap.com/akaobj/251">\
-                    <img class="img-fluid" src="'+ msg[i].articleimg + '" alt="">\
+            console.log(msg);
+            let designersinfo = "";
+            let CaseInfo = "";
+            let CaseTag = "";
+            let CaseData = "";
+            let CaseNews = "";
+            let CasePopular = "";
+            let CaseDetail = "";
+            for (let i = 0; i < msg.length; i++) {
+                designersinfo = `
+                <div class="container container-width-column px-md-0">
+                    <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">${msg[i].CaseDate}｜ 人氣:${msg[i].CaseViews}</div>
+                        </div>
+                    </div>
+                </div>`
+
+                CaseInfo = `
+                <div class="row mx-0 justify-content-around align-items-center">
+                        <div class="col-md-3 px-mx-0">
+                            <div class="info__items border-end">
+                                <div>
+                                    <div class="info__items__title">風格</div>
+                                    <div class="info__items--ellipse">${msg[i].CaseStyle}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3 px-mx-0">
+                            <div class="info__items border-end">
+                                <div>
+                                    <div class="info__items__title">格局</div>
+                                    <div class="info__items--ellipse">${msg[i].CaseHouse}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3 px-mx-0">
+                            <div class="info__items border-end">
+                                <div>
+                                    <div class="info__items__title">坪數</div>
+                                    <div class="info__items--ellipse">${msg[i].CaseSize}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-3 px-mx-0">
+                            <div class="info__items">
+                                <div>
+                                    <div class="info__items__title">預算</div>
+                                    <div class="info__items--ellipse">${msg[i].CaseProject}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </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> \
+                        ';
+                }
+
+                CaseData = `
+             <h4 class="d-none d-md-block">CASE DATA</h4>
+             <div class="caseData__infoItems">
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">居住成員:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMember} </div>
+                 </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">房屋坪數:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSize}</div>
+                </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">設計風格:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataStyle}</div>
+                </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">房屋類型:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataType}</div>
+                </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">房屋狀況:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSituation}</div>
+                </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">圖片提供:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataImgProvide}</div>
+                </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">空間格局:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSpace}</div>
+                </div>
+                <div class="caseData__infoItems__list">
+                    <div class="caseData__infoItems__list--lf">主要建材:</div>
+                    <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMaterial}</div>
+                </div>
+            </div> `
+
+                CaseData2 = `
+            <div class="caseData__designerBlock h-100">
+                            <div class="caseData__designerBlock__designer d-block d-md-none">
+                                <h4>聯絡設計師</h4>
+                                <ul>
+                                    <li><a itemprop="item" href="/designer-index.php?designer_id=779"
+                                            target="_blank">${msg[i].CaseCompany}</a></li>
+                                    <li><a itemprop="item" href="/designer-index.php?designer_id=779"
+                                            target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
+                                    <li>免付費諮詢專線</li>
+                                    <li><a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a></li>
+                                </ul>
+
+                            </div>
+                            <div class="caseData__designerBlock__designer--pc d-none d-md-block">
+                                <div class="caseData__designerBlock__designer--above">
+                                    <h4>聯絡設計師</h4>
+                                    <ul>
+                                        <li><a href="" target="_blank">${msg[i].CaseCompany}</a></li>
+                                        <li><a href="" target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
+                                    </ul>
+                                </div>
+                                <div class="caseData__designerBlock__designer--below">
+                                    <ul>
+                                        <li>
+                                            免付費諮詢專線
+                                        </li>
+                                        <li>
+                                            <a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+
+                            <div class="caseData__designerBlock__avatar">
+                                <a href="">
+                                    <div class="caseData__designerBlock__avatar--img"
+                                        style="background-image:url(${msg[i].ContactDesignerImg});">
+
+                                    </div>
+                                </a>
+                            </div>
+                        </div>`
+
+                for (var k = 0; k < msg[i].ProfileRecently.length; k++) {
+                    CaseNews +=
+                        '\<div class="col-md-4 ps-0"\
+                            <div class="vue-waterfall-slot">\
+                             <div class="card CaseNews-Card">\
+                                 <a href="'+ msg[i].ProfileRecently[k].ProfileLink + '">\
+                                    <img class="img-fluid"\
+                                    src="'+ msg[i].ProfileRecently[k].ProfileImg + '"\
+                                    alt="幸福空間個案圖" class="card-img-top">\
+                                </a>\
+                            </div>'
+                    CaseNews += '<div class="card-body">'
+                    for (var z = 0; z < msg[i].ProfileRecently[k].ProfileTag.length; z++) {
+                        // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
+                        CaseNews += '\
+                                <a href="">\
+                                '+ msg[i].ProfileRecently[k].ProfileTag[z].Tag + '\
+                                </a>\
+                                ';
+                    }
+                    CaseNews += '</div></div></div></div>'
+                };
+
+                for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
+                    CasePopular +=
+                        '<div class="likeSee__rule"\
+                            <a href="'+ msg[i].ProfilePopularity[x].ProfileLink + '">\
+                                <div class="likeSee__bgImg">\
+                                    <img class="img-fluid" src="'+ msg[i].ProfilePopularity[x].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
+                                </div>\
+                            </a>'
+                    CasePopular += '<div class="likeSee__tag">'
+                    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">\
+                                '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\
+                                </a>\
+                                ';
+                    }
+                    CasePopular += '</div></div>'
+                };
+                // 個案細節
+                CaseDetail += '<div class="row px-0 mx-0">'
+                CaseDetail +=
+                    // 輪播圖
+                    ' <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>'
+
+                CaseDetail +=
+                    '<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="'+ msg[i].ContactDesignerImg + '" alt="">\
+                    </div>\
+                </a>\
+                <div class="ms-2" style="width: 100%;">\
+                    <a href="" class="contact-section-company">\
+                        <div>\
+                        '+ msg[i].CaseCompany + '\
+                        </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:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
+                        </div>\
+                    </div>\
+                    </div>\
+                </div>\
+                '
+                CaseDetail +=
+                    '<div class="info-area-title-desktop">\
+                    <a href="'+ msg[i].CasePageLink + '" target="_blank">\
+                    '+ msg[i].Casetitle + '\
                     </a>\
-                    <!-- 文章內容 -->\
-                    <div class="sec10-content mt-3">\
-                    '+ msg[i].artuclecontent + '\
-                     </div>';
+                </div>\
+                <div class="divider"></div>\
+                '
+                CaseDetail +=
+                    '<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">\
+                '
+                for (let j = 0; j < msg[i].CaseDetail.length; j++) {
+                    CaseDetail +=
+                        '<div id="img-0" class="w-20 m-1 p-1 img_all">\
+                            <a>\
+                                <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg+ '" width="70" height="70" alt="該個案的其他圖片">\
+                            </a>\
+                        </div>'
+                };
+                CaseDetail += '</div></div>';
+
+                CaseDetail += '<div class="divider"></div>';
+
+                CaseDetail +=
+                    '<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">\
+                '
+                for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
+                    CaseDetail +=
+                        '<div class="w-20 m-1 p-1 ">\
+                        <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
+                        <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
+                        </a>\
+                    </div>'
+                };
+                CaseDetail += '</div></div>';
+                CaseDetail += '<div class="divider"></div>';
 
-                    webtitle += ' \
-                    '+ msg[i].articletitle + '';
-                // }
-                     $('#webtitle').html(webtitle);
-                    $('.content').html(contentarticle);
+                CaseDetail +=
+                    '<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>'+ msg[i].CaseProject + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>居住成員:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseDataMember + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>設計風格:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseStyle + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>房屋類型:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseDataType + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>房屋坪數:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseSize + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>房屋狀況:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseDataSituation + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>圖片提供:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseCompany + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>空間格局:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseDataSpace + '</div>\
+                        </div>\
+                    </div>\
+                    <div class="data-table-items d-flex">\
+                        <div class="data-table-lf">\
+                            <div>主要建材:</div>\
+                        </div>\
+                        <div class="data-table-rt">\
+                            <div>'+ msg[i].CaseDataMaterial + '</div>\
+                        </div>\
+                    </div>\
+                </div>\
+                </div>';
 
+                CaseDetail += '<div class="divider"></div>';
+                CaseDetail +=
+                '<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:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</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="'+ msg[i].CaseCompanyMap + '" target="_blank">'+ msg[i].CaseCompanyAddress + '</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:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</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="'+ msg[i].CaseCompanyWeb + '"\
+                                    target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
+                                </div>\
+                            </div>\
+                        </div>\
+                    </div>\
+                </div>'
+                CaseDetail +='</div>'
             }
+            $('.article').html(designersinfo);
+            $('.CaseInfo').html(CaseInfo);
+            $('.CaseTag').html(CaseTag);
+            $('.caseData-PC-left').html(CaseData);
+            $('.caseData-PC-right').html(CaseData2);
+            $('.CaseNews-Card').html(CaseNews);
+            $('.Case-popular').html(CasePopular);
+            $('.CaseModel').html(CaseDetail);
+
+
+
         });
 }
+
+get_data();

json/127.0.0.1-5500:index_designerList.html.webloc

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>URL</key>
+	<string>http://127.0.0.1:5500/index_designerList.html</string>
+</dict>
+</plist>

json/cases.json

@@ -0,0 +1,206 @@
+[
+    {
+        "CaseId":"",
+        "Casetitle":"一生一世｜工業風｜25坪",
+        "CaseTeamName":"Otis設計團隊",
+        "CaseCompany":"歐提系統家具有限公司",
+        "CaseCompanyAddress":"新竹市東區建中一路20號1樓",
+        "CaseCompanyMap":"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",
+        "CaseCompanyTel":"03-5748866",
+        "CaseCompanyEmail":"eggerboard@gmail.com",
+        "CaseCompanyWeb":"https://www.otis-design.com",
+        "CaseDate":"2021-12-30",
+        "CaseViews":"49",
+        "CaseCoverImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg",
+        "CaseImgAmount":"8",
+        "CaseStyle":"工業風",
+        "CaseHouse":"三房、兩廳、兩衛",
+        "CaseSize":"25坪",
+        "CaseProject":"尚未提供",
+        "CaseDataMember":"大人x2",
+        "CaseDataSize":"25坪",
+        "CaseDataStyle":"工業風、暗色系流淌工業風",
+        "CaseDataType":"標準格局",
+        "CaseDataSituation":"新成屋",
+        "CaseDataImgProvide":"歐提系統家具有限公司",
+        "CaseDataSpace":"3房、2廳、2衛",
+        "CaseDataMaterial":"系統櫃、軌道燈、樂土灰泥、超耐磨木地板、吊扇、單車架",
+        "ContactFreeTel":"0809-000-123#26526",
+        "ContactDesignerImg":"https://m.hhh.com.tw/upload/_hdesigner/img_path_779_20211230102606.jpg",
+        "CasePageLink":"",
+        "CasePageprev":"",
+        "CaseTag":[
+            {
+                "Tag":"工業風",
+                "TagLink":""
+
+            },
+            {
+                "Tag":"新成屋",
+                "TagLink":""
+            },
+            {
+                "Tag":"大坪數",
+                "TagLink":""
+            }
+        ],
+        "ProfileRecently":[
+            {
+                "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14155_20211230151618.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"工業風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"標準格局",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            },
+            {
+                "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14154_20211230151111.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"北歐風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            }
+        ],
+        "ProfilePopularity":[
+            {
+                "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14154_20211230151113.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"北歐風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            },
+            {
+                "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14155_20211230151625.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"工業風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            }
+        ],
+        "CaseDetail":[
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150528.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150529.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150530.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150531.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150532.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150533.jpg"
+            },
+            {
+                "CaseDetailImg":"https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150534.jpg"
+            }
+        ],
+        "OtherStylePortfolio":[
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer492_06_03.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"年輕不失沉穩 現代輕工業風別墅"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/name_11046_20190402193723.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"坐擁淡海一線美景 質樸輕工業宅"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer457_05_05.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"日式簡約mix微醺工業風情"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer491_05_01.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"Loft無邊際"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer102_46_05.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"36年漏水屋改造 動線收納滿足"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer209_25_07.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"通透玻璃，打造工業風精緻咖啡廳"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/name_12300_20200417100142.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"簡約日式水泥宅 細品質樸生活感"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/name_11324_20190614143505.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"老屋改頭換面 化身有氧工業宅"
+            },
+           
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer270_15_04.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"引光大尺度 跳色工業風時尚"
+            },
+            {
+                "PortfoliolImg":"https://images.hhh.com.tw/uploads/_hcase/designer620_03_05.jpg",
+                "PortfoliolLink":"",
+                "PortfoliolImgAlt":"共享時代-台中"
+            }
+        ]
+    }
+]