banner ads update

Columns-detail.html

@@ -1250,10 +1250,19 @@
                             <p>彙整編輯:Amy</p>
                             <p>圖文提供:918建材庫</p>
                         </div> -->
+                        
                     </div>
                 </div>
             </div>
+            <section class="sec-07_Ads my-5">
+                <div class="container">
+                    <div class="sec-07__slider">
+    
+                    </div>
+                </div>
+            </section>
         </section>
+     
         <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>

columns.js

@@ -111,4 +111,36 @@ function get_data() {
 
     });
 }
-get_data();
+
+function renderSec07() {
+    $.ajax({
+        method: "GET",
+        // url: `json/bannerAds-${id}.json`,
+        url:`json/bannerAds.json`,
+        dataType: "json",
+    })
+    .done(function(msg){
+        console.log(msg);
+        let str = '';
+        for(let i = 0; i < msg[0].data.length; i++){
+            console.log(msg[i])
+            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${msg[0].data[i].link}');" data-bg="${msg[0].data[i].imgUrl}"><img class="img-fluid" src="${msg[0].data[i].imgUrl}"></div>`
+        }
+        $(`.sec-07__slider`).html(str);
+        $(".sec-07__slider").slick({
+            dots: false,
+            autoplay: true,
+            arrows: true,
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            autoplaySpeed: 7000,
+            initialSlide: 0,
+            infinite: true,
+            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
+            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
+        });
+    });
+
+}
+get_data();
+renderSec07();

css/style.css

@@ -1108,45 +1108,6 @@ body {
   display: none;
 }
 
-.sec-07 {
-  padding: 2rem 0;
-}
-
-.sec-07 .container {
-  margin: 0 auto;
-  padding: .8rem 1.2rem;
-  max-width: 1050px;
-  width: 70%;
-  background-color: #F4F4F4;
-}
-
-@media (max-width: 1100px) {
-  .sec-07 .container {
-    width: 90%;
-    padding: 0 1rem;
-  }
-}
-
-.sec-07__slider {
-  height: 100%;
-}
-
-.sec-07__slider .slide-item {
-  height: 23vh;
-  background-position: center center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 100%;
-  margin: 0 5px;
-  cursor: pointer;
-}
-
-@media (max-width: 1100px) {
-  .sec-07__slider .slide-item {
-    height: 18vh;
-  }
-}
-
 .sec-08 {
   padding-bottom: 2.5rem;
 }
@@ -3071,4 +3032,47 @@ body {
   -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
+
+.sec-07_Ads {
+  padding: 2rem 0;
+  background-color: #F4F4F4;
+}
+
+.sec-07_Ads .slick-prev {
+  left: 50px;
+  z-index: 100;
+}
+
+.sec-07_Ads .slick-next {
+  right: 50px;
+}
+
+.sec-07_Ads .container {
+  margin: 0 auto;
+  padding: .8rem 1.2rem;
+  max-width: 1050px;
+  width: 55%;
+}
+
+@media (max-width: 1100px) {
+  .sec-07_Ads .container {
+    width: 90%;
+    padding: 0 1rem;
+  }
+}
+
+.sec-07_Ads__slider {
+  height: 100%;
+}
+
+.sec-07_Ads__slider .slide-item {
+  height: 23vh;
+  cursor: pointer;
+}
+
+@media (max-width: 1100px) {
+  .sec-07_Ads__slider .slide-item {
+    height: 20vh;
+  }
+}
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -933,35 +933,35 @@ body {
     }
 }
 
-.sec-07 {
-    padding: 2rem 0;
-    .container {
-        margin:0 auto;
-        padding: .8rem 1.2rem;
-        max-width: 1050px;
-        width: 70%;
-        background-color: #F4F4F4;
-        @media (max-width: 1100px) {
-            width: 90%;
-            padding: 0 1rem;
-        }
-    }
-    &__slider {
-        height: 100%;
-        .slide-item {
-            height: 23vh;
-            background-position: center center;
-            background-size: contain;
-            background-repeat: no-repeat;
-            width: 100%;
-            margin: 0 5px;
-            cursor: pointer;
-            @media (max-width: 1100px) {
-                height: 18vh;
-            }
-        }
-    } 
-}
+// .sec-07 {
+//     padding: 2rem 0;
+//     .container {
+//         margin:0 auto;
+//         padding: .8rem 1.2rem;
+//         max-width: 1050px;
+//         width: 70%;
+//         background-color: #F4F4F4;
+//         @media (max-width: 1100px) {
+//             width: 90%;
+//             padding: 0 1rem;
+//         }
+//     }
+//     &__slider {
+//         height: 100%;
+//         .slide-item {
+//             height: 23vh;
+//             background-position: center center;
+//             background-size: contain;
+//             background-repeat: no-repeat;
+//             width: 100%;
+//             margin: 0 5px;
+//             cursor: pointer;
+//             @media (max-width: 1100px) {
+//                 height: 18vh;
+//             }
+//         }
+//     } 
+// }
 
 .sec-08 {
     padding-bottom: 2.5rem;
@@ -2495,4 +2495,40 @@ body {
     }
         
 }
-
+.sec-07_Ads{
+    padding: 2rem 0;
+    background-color: #F4F4F4;
+    .slick-prev{
+        left: 50px;
+        z-index: 100;
+    }
+    .slick-next{
+        right: 50px;
+    }
+    .container {
+        margin:0 auto;
+        padding: .8rem 1.2rem;
+        max-width: 1050px;
+        width: 55%;
+       
+        @media (max-width: 1100px) {
+            width: 90%;
+            padding: 0 1rem;
+        }
+    }
+    &__slider {
+        height: 100%;
+        .slide-item {
+            height: 23vh;
+            // background-position: center center;
+            // background-size: contain;
+            // background-repeat: no-repeat;
+            // width: 100%;
+            // margin: 0 5px;
+            cursor: pointer;
+            @media (max-width: 1100px) {
+                height: 20vh;
+            }
+        }
+    } 
+}

goto.js

@@ -267,6 +267,30 @@ function get_data() {
                     CaseNews += '</div></div></div></div>'
                 };
 
+              
+
+                let NewsProfile=msg[0].DesignerProfile;
+
+                console.log(NewsProfile);
+                console.log(NewsProfile.length);
+
+                function sortNum(a,b) {
+                    return a - b; //升序，如降序，把“a - b”該成“b - a”
+                }
+
+
+                function SortTest() {
+                    var  ProfileSort= [];
+
+                    for(let r =0; r<NewsProfile.length; r++){
+                        let NewsArry=NewsProfile[r].Views;
+                        let NewsArray2 = parseInt(NewsArry);
+                        console.log(NewsArray2);
+    
+                    }
+                }
+
+                SortTest();
                 // for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
                 //     CasePopular +=
                 //         '<div class="likeSee__rule"\
@@ -599,3 +623,5 @@ let slickNumbertest='';
 $(document).on("click", ".close-window", function (event) {
     window.close();
 });
+
+

json/bannerAds.json

@@ -0,0 +1,23 @@
+[
+    {
+        "data": [
+        {
+            "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15664_1619582521.jpg",
+            "link": "ttps://hhh.com.tw/designer-index.php?designer_id=23"
+        },
+        {
+            "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260703.jpg",
+            "link": "https://hhh.com.tw/designer-index.php?designer_id=28"
+        },
+        {
+            "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260703.jpg",
+            "link": "https://hhh.com.tw/designer-index.php?designer_id=28"
+        },
+        {
+            "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_15672_1605260703.jpg",
+            "link": "https://hhh.com.tw/designer-index.php?designer_id=28"
+        }
+    
+    ]
+}
+]