add Cases mobile

cases.html

@@ -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,9 +1113,20 @@
                             </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 article__contexts-box">
                 <div>
@@ -1126,7 +1145,7 @@
                 </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">

css/style.css

@@ -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;
@@ -2188,6 +2194,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 +2239,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 +2258,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 +2313,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 +2352,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 +2373,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 +2406,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 +2428,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 +2576,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 +2595,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 +2784,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 +2801,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;

css/style.scss

@@ -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;
@@ -1803,6 +1807,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 +1841,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 +1851,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 +1894,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 +1918,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 +1929,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 +1951,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 +1970,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 +2081,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 +2096,9 @@ body {
     .container-width-ad {
         max-width: 768px;
         margin-bottom: 30px;
+        @media screen and(max-width:576px) {
+            margin-bottom: 100px;
+         }
     }
 
     // 彈出視窗
@@ -2057,7 +2114,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 +2129,8 @@ body {
         color: #6D6D6D ;
         text-decoration: none;
     }
+
+   
    
 }
 .info-area-title-desktop {
@@ -2197,6 +2256,15 @@ body {
     }
   
 }
+
+.display-pc{
+    @media screen and(max-width:576px) {
+        display: none;
+    }
+}
+
+
+
 .CaseInfo-pc{
     @media screen and(max-width:576px) {
         display: none;
@@ -2209,6 +2277,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;

goto.js

@@ -37,6 +37,7 @@ function get_data() {
             console.log(msg);
             let designersinfo = "";
             let CaseInfo = "";
+            let CaseInfo_mb = "";
             let CaseTag = "";
             let CaseData = "";
             let CaseNews = "";
@@ -53,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>
@@ -94,6 +95,44 @@ function get_data() {
                             </div>
                         </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 {
@@ -119,6 +158,8 @@ function get_data() {
 
                 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>
@@ -155,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>
@@ -200,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 + '">\
@@ -454,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);

js/index.js

@@ -14,25 +14,25 @@ let totalPages = {
     company: 0,
 };
 
-window.onload = function(){
-    if(screen.width < 900){
-        window.location.href = "../index_designerList_mb.html";   
-    }
-    userAgent = navigator.userAgent;
-    detectBrowser(userAgent);
-    detectDirection ();
-    let result;
-    let designer;
-    let id = 0;
-    $.ajax({
-        method: "GET",
-        url: "./json/realtime.json",
-        dataType: "json",
-    }).done(function (msg) {
-        result = [...msg];
-        renderSec00(result);
-    });
-}
+// window.onload = function(){
+//     if(screen.width < 900){
+//         window.location.href = "../index_designerList_mb.html";   
+//     }
+//     userAgent = navigator.userAgent;
+//     detectBrowser(userAgent);
+//     detectDirection ();
+//     let result;
+//     let designer;
+//     let id = 0;
+//     $.ajax({
+//         method: "GET",
+//         url: "./json/realtime.json",
+//         dataType: "json",
+//     }).done(function (msg) {
+//         result = [...msg];
+//         renderSec00(result);
+//     });
+// }
   
 
 function detectDirection () {