columns slick update

Columns-detail.html

@@ -50,6 +50,7 @@
                 </div>
             </div>
         </section>
+     <!-- <img class="img-fluid" src="https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644143.jpg" alt=""> -->
         <nav class="navbar navbar-expand-lg navbar-light navbar-main shadow-sm">
             <div class="container-fluid" style="margin:0;">
                 <a href="https://hhh.com.tw/" class="navbar-brand navbar-logo"><img
@@ -987,14 +988,16 @@
             </div>
         </nav>
 
+        
+
         <section>
             <div class="container px-0">
                 <nav aria-label="breadcrumb">
                     <ol class="breadcrumb">
-                        <li class="breadcrumb-item"><a href="#">首頁</a></li>
-                        <li class="breadcrumb-item"><a href="#">專欄文章</a></li>
-                        <li class="breadcrumb-item"><a href="#">裝修前線</a></li>
-                        <li class="breadcrumb-item"><a href="#">建材知識</a></li>
+                        <li class="breadcrumb-item"><a itemprop="item" href="#"><span itemprop="name">首頁</span></a></li>
+                        <li class="breadcrumb-item"><a href="#"><span>專欄文章</span></a></li>
+                        <li class="breadcrumb-item"><a href="#"><span>裝修前線</span></a></li>
+                        <li class="breadcrumb-item"><a href="#"><span>建材知識</span></a></li>
                         <li class="breadcrumb-item active breadcrumb-title" aria-current="page"></li>
                     </ol>
                 </nav>
@@ -1251,7 +1254,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>
 
         <div class="text-center my-3" style="color:#727679;">&nbsp;</div>
         <section class="scMedia">
@@ -1269,6 +1272,7 @@
                 </div>
             </div>
         </section>
+
         <section class="relTag d-none d-md-block mt-3">
             <div class="container relTag__items pl-md-4 pr-md-0">
                 <div class="relTag__items__title">
@@ -1293,6 +1297,20 @@
             </div>
         </section>
 
+        <section class="relTag d-block d-md-none">
+            <div class="container relTag__items pl-md-4 pr-md-0">
+              
+                <div class="row">
+                    <div class="col-12">
+                        <h4>標籤</h4>
+                        <div class="relTag__items__tags ColumnsTag"></div>
+                    </div>
+                </div>
+
+              
+            </div>
+        </section>
+
         <section id="search" class="likeSee mb-5">
             <div class="container">
                 <div class="row">
@@ -1544,7 +1562,18 @@
 
             </div>
         </div> -->
-        <footer class="footer">
+
+        <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>
+
+        <footer class="footer d-none d-md-block">
             <div class="container" style="margin:0 auto;">
                 <div class="row">
                     <div class="col footer__block">

cases.html

@@ -30,7 +30,7 @@
 
 <body style="background: #FCFCFC;">
     <div id="hhh-cases" style="overflow-x:hidden;">
-        <section class="sec-00 w-100">
+        <section class="sec-00 w-100 d-none d-md-block">
             <button class="text-center sec-00__close">
                 <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
                 <p>隱藏</p>

css/style.css

@@ -10,12 +10,6 @@ body {
           transition-duration: 300ms;
 }
 
-@media screen and (max-width: 576px) {
-  .sec-00 {
-    display: none;
-  }
-}
-
 .sec-00__close {
   position: absolute;
   top: 0;
@@ -68,6 +62,13 @@ body {
   }
 }
 
+@media screen and (max-width: 576px) {
+  .sec-00__slider {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
 .sec-00__slider .slide-item {
   width: 100%;
   height: 100%;
@@ -79,6 +80,29 @@ body {
   cursor: pointer;
 }
 
+@media screen and (max-width: 576px) {
+  .sec-00__slider .slide-item {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .sec-00 .slick-next {
+    right: 25px;
+  }
+}
+
+.sec-00 .slick-prev {
+  z-index: 100;
+}
+
+@media screen and (max-width: 576px) {
+  .sec-00 .slick-prev {
+    left: 25px;
+  }
+}
+
 .sec-00 .slick-prev:before, .sec-00 .slick-next:before {
   display: none;
 }
@@ -2140,12 +2164,32 @@ body {
   padding: 0.75rem 1rem;
 }
 
+@media screen and (max-width: 576px) {
+  #hhh-cases .breadcrumb {
+    margin-bottom: 0;
+    display: block;
+  }
+}
+
+#hhh-cases .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+  float: unset;
+  padding-right: 0.5rem;
+  color: #6c757d;
+  content: var(--bs-breadcrumb-divider, "/");
+}
+
 #hhh-cases .breadcrumb a {
   font-size: 0.75rem;
   color: #727679;
   text-decoration: none;
 }
 
+@media screen and (max-width: 576px) {
+  #hhh-cases .breadcrumb li {
+    display: inline;
+  }
+}
+
 #hhh-cases .breadcrumb .active a {
   color: #AAAAAA;
 }
@@ -2865,8 +2909,15 @@ body {
 
 .article--style {
   background: #fff;
-  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+@media screen and (max-width: 576px) {
+  .article--style {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+  }
 }
 
 .article__title {
@@ -2881,11 +2932,25 @@ body {
   line-height: 1.8;
 }
 
+@media screen and (max-width: 576px) {
+  .article__contexts {
+    max-width: calc(100vw - 32px);
+    height: auto !important;
+    word-break: break-word;
+  }
+}
+
 .article__contexts img {
   max-width: 80%;
   margin: 0.5rem 0;
 }
 
+@media screen and (max-width: 576px) {
+  .article__contexts img {
+    max-width: 100%;
+  }
+}
+
 .article__contexts p {
   margin-bottom: 1rem !important;
 }
@@ -2931,4 +2996,46 @@ body {
 .cardList__items p {
   margin-bottom: 1rem !important;
 }
+
+.article__contexts__note {
+  width: 99.5%;
+  margin: 1.8rem auto;
+  font-size: 1.125rem;
+  padding: 1rem;
+  border: 1px solid #727679;
+}
+
+.scMedia {
+  width: 35%;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 576px) {
+  .scMedia {
+    width: 100%;
+    padding: 1rem 0;
+  }
+}
+
+.scMedia .scMedia__list {
+  background-color: #FFF;
+  -webkit-box-shadow: 0 1px 10px #cecece;
+          box-shadow: 0 1px 10px #cecece;
+  border-radius: 45px;
+  padding: 1rem 2.8rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+
+@media screen and (max-width: 576px) {
+  .scMedia .scMedia__list {
+    border-radius: 0px;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    padding: 0;
+  }
+}
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -8,9 +8,7 @@ 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;
@@ -59,6 +57,10 @@ body {
         @media (max-width: 1550px) {
             max-width: 1310px;
         }
+        @media screen and(max-width:576px) {
+            max-width: 100%;
+            height: auto;
+        }
         .slide-item {
             width: 100%;
             height: 100%;
@@ -68,8 +70,28 @@ body {
             object-fit: contain;
             height: 300px;
             cursor: pointer;
+            @media screen and(max-width:576px) {
+                max-width: 100%;
+                height: auto;
+               
+            }
             
         }
+       
+    }
+    .slick-next{
+        @media screen and(max-width:576px) {
+            right:25px;
+           
+        }
+     
+    }
+    .slick-prev{
+        z-index: 100;
+        @media screen and(max-width:576px) {
+            left:25px;
+        }
+       
     }
     .slick-prev:before, .slick-next:before {
         display: none;
@@ -1760,11 +1782,27 @@ body {
     }
     .breadcrumb{
         padding: 0.75rem 1rem;
+      
+        @media screen and(max-width:576px) {
+            margin-bottom: 0;
+            display:block;
+        }
+        .breadcrumb-item+.breadcrumb-item::before {
+            float: unset;
+            padding-right: 0.5rem;
+            color: #6c757d;
+            content: var(--bs-breadcrumb-divider, "/");
+        }
         a{
             font-size: 0.75rem;
             color:#727679;
             text-decoration: none;
         }
+        li{
+           @media screen and(max-width:576px) {
+                display: inline;
+            }
+        }
         .active{
             a{
                 color:#AAAAAA;
@@ -1934,7 +1972,7 @@ body {
             -webkit-box-flex: 0;
             @media screen and(max-width:576px) {
                 max-width: 25%;
-            flex-basis: 25%;
+                flex-basis: 25%;
             }
         }
         .caseData__infoItems__list--rt{
@@ -2332,7 +2370,10 @@ body {
 // 文章頁面
 .article--style{
     background: #fff;
-    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
+    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
+    @media screen and(max-width:576px) {
+       box-shadow: none;
+    }
 }
 .article__title{
     color: #34404B;
@@ -2343,9 +2384,17 @@ body {
 .article__contexts{
     font-size: 1.1rem;
     line-height: 1.8;
+    @media screen and(max-width:576px) {
+        max-width: calc(100vw - 32px);
+    height: auto !important;
+    word-break: break-word;
+    }
     img{
         max-width: 80%;
         margin: 0.5rem 0;
+        @media screen and(max-width:576px) {
+            max-width: 100%;
+        }
     }
     p{
         margin-bottom: 1rem !important;
@@ -2383,4 +2432,41 @@ body {
     p{
         margin-bottom: 1rem !important;
     }
-}
+}
+
+.article__contexts__note {
+    width: 99.5%;
+    margin: 1.8rem auto;
+    font-size: 1.125rem;
+    padding: 1rem;
+    border: 1px solid #727679;
+    
+}
+
+.scMedia{
+    width: 35%;
+    margin: 0 auto;
+    @media screen and(max-width:576px) {
+        width: 100%;
+        padding: 1rem 0;
+    }
+    .scMedia__list{
+        background-color: #FFF;
+        box-shadow: 0 1px 10px #cecece;
+        border-radius: 45px;
+        padding: 1rem 2.8rem;
+        display: flex;
+        justify-content: space-around;
+
+        @media screen and(max-width:576px) {
+            border-radius: 0px;
+            box-shadow: none;
+            padding:0;
+
+
+        }
+    
+    }
+}
+
+

js/index.js

@@ -15,9 +15,9 @@ let totalPages = {
 };
 
 window.onload = function(){
-    if(screen.width < 900){
-        window.location.href = "../index_designerList_mb.html";   
-    }
+    // if(screen.width < 900){
+    //     window.location.href = "../index_designerList_mb.html";   
+    // }
     userAgent = navigator.userAgent;
     detectBrowser(userAgent);
     detectDirection ();
@@ -100,20 +100,32 @@ function renderBullet(data) {
     $('.sec-00__bulletList').html(str);
 }
 
+// function renderBannerStr(sec, data) {
+//     let str = '';
+//     for(let i = 0; i < data.length; i++){
+//         if(data[i]['Dwebp'] && !isSafari) {
+//             str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></img>`
+//         } else {
+//             str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></img>`
+//         }
+        
+//     }
+//     $(`.${sec}`).html(str);
+// }
+
 function renderBannerStr(sec, data) {
     let str = '';
     for(let i = 0; i < data.length; i++){
         if(data[i]['Dwebp'] && !isSafari) {
-            str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></img>`
+            str+= `<img class="${sec}-${i+1} slide-item img-fluid" src="${data[i]['Dwebp']}" onclick="window.open('${data[i]['link']}');" data-bg="${data[i]['Dwebp']}">`
         } else {
-            str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></img>`
+            str+= `<img class="${sec}-${i+1} slide-item img-fluid" src="${data[i]['DimgUrl']}" onclick="window.open('${data[i]['link']}');" data-bg="${data[i]['DimgUrl']}">`
         }
         
     }
     $(`.${sec}`).html(str);
 }
 
-
 let sticky = document.querySelector('.sec-00').offsetHeight;
 window.addEventListener('scroll', fixedOnScroll);