add columns.html

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

Columns-detail.html

@@ -31,10 +31,23 @@
                 <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
                 <p>隱藏</p>
             </button>
-            <div class="container-fluid" style="padding:0;margin:0;">
+            <div class="container-fluid" style="padding:0;margin:0; position: relative;">
                 <div class="sec-00__slider">
 
                 </div>
+                <div class="sec-00__bulletList">
+                    <!-- <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div>
+                    <div class="sec-00__bullet"></div> -->
+                </div>
             </div>
         </section>
         <nav class="navbar navbar-expand-lg navbar-light navbar-main shadow-sm">
@@ -982,8 +995,7 @@
                         <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 active" aria-current="page"><a
-                                href="#">烤漆玻璃、噴砂玻璃、強化玻璃…玻璃種類比你想得還多！選對類型節能、省電、隔音又美觀 - 幸福空間</a></li>
+                        <li class="breadcrumb-item active breadcrumb-title" aria-current="page"></li>
                     </ol>
                 </nav>
             </div>
@@ -992,13 +1004,13 @@
         <section class="article">
             <div class="container article--style">
                 <div class="container-width-column py-md-3">
-                    <div class="article__wrapper">
-                        <h1 class="article__title mt-4">烤漆玻璃、噴砂玻璃、強化玻璃…玻璃種類比你想得還多！選對類型節能、省電、隔音又美觀</h1>
-                        <div class="small">2021-12-30｜ 人氣:49</div>
+                    <div class="article__wrapper article_info">
+                        <!-- <h1 class="article__title mt-4">烤漆玻璃、噴砂玻璃、強化玻璃…玻璃種類比你想得還多！選對類型節能、省電、隔音又美觀</h1>
+                        <div class="small">2021-12-30｜ 人氣:49</div> -->
                     </div>
 
-                    <div class="article__contexts article__contexts--longHeight active" style="height:auto">
-                        <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_0.jpg">
+                    <div class="article__contexts article__contexts--longHeight active ColumnsContent" style="height:auto">
+                        <!-- <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_0.jpg">
                         </p>
                         <p>（圖片提供／918建材庫）</p>
                         <p>玻璃被作為建築及設計材料，能夠控制光線、調節溫度、防止噪音、創造視覺美學……等，深深影響人類居住安全與舒適感。現代設計師善用玻璃建材全透視性或者半透視，「放大」與「區隔」建築空間，更用玻璃作為外牆，提升空間亮度，營造出空間被放大的效果，體現居住者的個性與氣質。下面將玻璃建材區分為《平板玻璃》、《安全玻璃》、《節能型玻璃》，以下將從各類材質的特色來探究這三類的差異性。
@@ -1234,7 +1246,7 @@
                         <div class="article__contexts__note">
                             <p>彙整編輯:Amy</p>
                             <p>圖文提供:918建材庫</p>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>
@@ -1262,8 +1274,8 @@
                 <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 ColumnsTag">
+                    <!-- <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>
@@ -1274,7 +1286,7 @@
                     <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>
+                    <a href="" class="btn btn-outline-custom rounded-0">建材</a> -->
 
 
                 </div>
@@ -1301,8 +1313,8 @@
                             </div>
                         </div>
                         <div class="vue-waterfall News">
-                            <div class="row px-0 mx-0">
-                                <div class="col-12 col-md-4 ps-0">
+                            <div class="row px-0 mx-0 OtherColumns">
+                                <!-- <div class="col-12 col-md-4 ps-0">
                                     <div class="cardList__items">
                                         <img src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20220113101218_0.jpg"
                                             alt="">
@@ -1406,12 +1418,12 @@
                                             <p><a class="likeSee__tag--item" href="/columns/lists/木工-keyword/" target="_blank">木工</a><a class="likeSee__tag--item" href="/columns/lists/diy-keyword/" target="_blank">diy</a><a class="likeSee__tag--item" href="/columns/lists/實木-keyword/" target="_blank">實木</a><a class="likeSee__tag--item" href="/columns/lists/集成材-keyword/" target="_blank">集成材</a><a class="likeSee__tag--item" href="/columns/lists/三合板-keyword/" target="_blank">三合板</a></p>
                                         </div>
                                     </div>
-                                </div>
+                                </div> -->
                             </div>
                         </div>
 
 
-                        <div class="vue-waterfall popular">
+                        <!-- <div class="vue-waterfall popular">
                             <div class="row px-0 mx-0">
                                 <div class="col-12 col-md-4 ps-0">
                                     <div class="cardList__items">
@@ -1498,7 +1510,7 @@
                                     </div>
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>
@@ -1635,7 +1647,8 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
     <script async defer src="js/index.js"></script>
-    <script async defer src="./goto.js"></script>
+    <!-- <script async defer src="./goto.js"></script> -->
+    <script async defer src="./columns.js"></script>
 
     <!-- <script src="js/lazy-load.js" async></script> -->
 </body>

cases.html

@@ -40,6 +40,7 @@
 
                 </div>
                 <div class="sec-00__bulletList">
+                    <!-- <div class="sec-00__bullet"></div>
                     <div class="sec-00__bullet"></div>
                     <div class="sec-00__bullet"></div>
                     <div class="sec-00__bullet"></div>
@@ -49,9 +50,8 @@
                     <div class="sec-00__bullet"></div>
                     <div class="sec-00__bullet"></div>
                     <div class="sec-00__bullet"></div>
-                    <div class="sec-00__bullet"></div>
-                    <div class="sec-00__bullet"></div>
-                  </div>
+                    <div class="sec-00__bullet"></div> -->
+                </div>
             </div>
         </section>
         <nav class="navbar navbar-expand-lg navbar-light navbar-main shadow-sm">

columns.js

@@ -0,0 +1,78 @@
+function get_data() {
+    $.ajax({
+        method: "GET",
+        // url: `json/cases-${id}.json`,
+        // url: `json/cases-${id}.json`,
+        url:`json/Columns.json`,
+        dataType: "json",
+
+    })
+
+    .done(function (msg) {
+        console.log(msg);
+            
+        let ColumnsContent="";
+        let ColumnsTag="";
+        let breadcrumbTitle="";
+        let article_info="";
+        let OtherColumns="";
+
+
+
+
+        breadcrumbTitle=`<a href="#">${msg[0].Columnstitle}</a>`
+
+        article_info=`
+        <h1 class="article__title mt-4">${msg[0].Columnstitle}</h1>
+        <div class="small">${msg[0].ColumnsDate}｜ 人氣:${msg[0].ColumnsViews}</div>
+        `;
+
+
+        ColumnsContent=`${msg[0].ColumnsContent}`;
+
+        for (let j = 0; j < msg[0].ColumnsTag.length; j++) {
+            ColumnsTag += ' \
+                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].ColumnsTag[j].Tag + '-keyword/" \
+                class="btn btn-outline-custom rounded-0">'
+                + msg[0].ColumnsTag[j].Tag + '</a>';
+        }
+
+
+        for(let i=0; i<msg[0].OtherColumns.length; i++){
+            OtherColumns+=
+            '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
+                <a target="_blank" href="https://hhh.com.tw/columns/detail/'+msg[0].OtherColumns[i].Columnsid+'/"> <img src="'+msg[0].OtherColumns[i].ColumnsCoverImg+'" alt="">\
+            <div class="cardList__items__content">\
+                <a href="https://hhh.com.tw/columns/detail/'+msg[0].OtherColumns[i].Columnsid+'/"" target="_blank">\
+                    <div class="cardList__items--title cardList__items--ellipse">\
+                        '+msg[0].OtherColumns[i].Columnstitle+'\
+                    </div>\
+                </a>'
+                OtherColumns+='<p>'
+                for(k=0; k<msg[0].OtherColumns[i].ColumnsTag.length; k++){
+                    OtherColumns+='\
+                    <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+msg[0].OtherColumns[i].ColumnsTag[k].tag+'-keyword/all-columntypea/" arget="_blank">'+msg[0].OtherColumns[i].ColumnsTag[k].Tag+'</a>'
+                }
+                OtherColumns+='</p>'
+            OtherColumns+='</div></div></div>'
+            
+        }
+
+       
+
+
+        $('.article_info').html(article_info);
+
+        $('.breadcrumb-title').html(breadcrumbTitle);
+
+        $('.ColumnsContent').html(ColumnsContent);
+
+        $('.ColumnsTag').html(ColumnsTag);
+
+        $('.OtherColumns').html(OtherColumns);
+
+
+
+    });
+}
+get_data();

css/style.css

@@ -2449,7 +2449,13 @@ body {
 #hhh-cases .vue-waterfall .likeSee__tag--item {
   margin: 0 0.2rem 0 0;
   text-decoration: none !important;
-  color: #727679 !important;
+  color: #727679;
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+}
+
+#hhh-cases .vue-waterfall .likeSee__tag--item:hover {
+  color: #FFAC73;
 }
 
 #hhh-cases .likeSee__tag {
@@ -2459,7 +2465,13 @@ body {
 #hhh-cases .likeSee__tag--item {
   margin: 0 0.2rem 0 0;
   text-decoration: none !important;
-  color: #727679 !important;
+  color: #727679;
+  -webkit-transition: all 300ms ease-in-out;
+  transition: all 300ms ease-in-out;
+}
+
+#hhh-cases .likeSee__tag--item:hover {
+  color: #FFAC73;
 }
 
 #hhh-cases .likeSee__state__filter--item {

css/style.scss

@@ -1991,7 +1991,11 @@ body {
         .likeSee__tag--item {
             margin: 0 0.2rem 0 0;
             text-decoration: none !important;
-              color: #727679 !important;
+              color: #727679 ;
+              transition: all 300ms ease-in-out;
+              &:hover{
+                  color: #FFAC73;
+              }
         }
    
     }
@@ -2001,7 +2005,11 @@ body {
     .likeSee__tag--item {
         margin: 0 0.2rem 0 0;
         text-decoration: none !important;
-        color: #727679 !important;
+        color: #727679;
+        transition: all 300ms ease-in-out;
+        &:hover{
+            color: #FFAC73;
+        }
     }
     .likeSee__state__filter--item{
         cursor: pointer;