banner ads api update

Columns-detail.html

@@ -52,7 +52,7 @@
                 </div>
             </div>
         </section>
-     <!-- <img class="img-fluid" src="https://images.hhh.com.tw/uploads/_had/adlogo_16107_1628644143.jpg" alt=""> -->
+        <!-- <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
@@ -990,7 +990,7 @@
             </div>
         </nav>
 
-        
+
 
         <section>
             <div class="container px-0">
@@ -1006,264 +1006,38 @@
             </div>
         </section>
 
-        
+
 
         <section class="article">
-            <div class="container article--style">
-                <div class="container-width-column py-md-3">
-                    <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 ColumnsContent" style="height:auto">
-                        <!-- <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_0.jpg">
-                        </p>
-                        <p>（圖片提供／918建材庫）</p>
-                        <p>玻璃被作為建築及設計材料，能夠控制光線、調節溫度、防止噪音、創造視覺美學……等，深深影響人類居住安全與舒適感。現代設計師善用玻璃建材全透視性或者半透視，「放大」與「區隔」建築空間，更用玻璃作為外牆，提升空間亮度，營造出空間被放大的效果，體現居住者的個性與氣質。下面將玻璃建材區分為《平板玻璃》、《安全玻璃》、《節能型玻璃》，以下將從各類材質的特色來探究這三類的差異性。
-                        </p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>文章目錄</strong></span></h3>
-                        <p><a href="#a1"><span style="color: #3366ff;"><strong>一、平板玻璃</strong></span></a></p>
-                        <p><a href="#a2"><span style="color: #3366ff;"><strong>二、安全玻璃</strong></span></a></p>
-                        <p><a href="#b1"><span style="color: #3366ff;">※強化玻璃</span></a></p>
-                        <p><a href="#b2"><span style="color: #3366ff;">※夾絲玻璃</span></a></p>
-                        <p><a href="#b3"><span style="color: #3366ff;">※膠合玻璃</span></a></p>
-                        <p><a href="#a3"><span style="color: #3366ff;"><strong>三、節能型玻璃</strong></span></a></p>
-                        <p><a href="#b4"><span style="color: #3366ff;">※LOW-E 低輻射玻璃</span></a></p>
-                        <p><a href="#b5"><span style="color: #3366ff;">※熱反射玻璃</span></a></p>
-                        <p><a href="#b6"><span style="color: #3366ff;">※琉璃建材</span></a></p>
-                        <p><a href="#b7"><span style="color: #3366ff;">※噴砂玻璃</span></a></p>
-                        <p><span style="color: #3366ff;"><a style="color: #3366ff;" href="#b8">※烤漆玻璃</a><a
-                                    id="a1"></a></span></p>
-                        <p>&nbsp;</p>
-                        <h2><span style="color: #333399; font-size: x-large;"><strong>一、平板玻璃</strong></span></h2>
-                        <p>又稱「清玻璃」，是最普遍、經濟效益最高的玻璃類建材，大量被用在室內外的門、窗、桌面、具有採光、隔音等效果，使人的視覺可以毫無阻擋穿透空間，但是要達到保溫與隔熱效果，則需要再加貼隔熱膜。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★平板玻璃的優點:</strong></span></p>
-                        <p>1.最普及、經濟效益最高的玻璃。</p>
-                        <p>2.百分之百的透視性，視覺可以毫無受阻的穿越。</p>
-                        <p><span style="color: #000000;"><strong>★平板玻璃的缺點:</strong></span></p>
-                        <p>1.無強化作用，安全性差。</p>
-                        <p>2.隔熱效果差。</p>
-                        <p>常見用途:用於裝飾、室內裝修櫃體或其他隔屏隔間用等。</p>
-                        <p><span style="color: #000000;"><strong>★施工注意事項:</strong></span></p>
-                        <p>1.一般玻璃並無強化作用，且硬度不像強化玻璃，破碎時會成大片碎片容易割傷，所以不建議使用在高樓層的窗戶上，以及易撞擊之場所；用做隔間或置物層板的輕玻璃，厚度最好為10mm，承載力與隔音效果較佳，10mm以下比較適合作為櫃體的門片或裝飾用。
-                        </p>
-                        <p>2.避免地震搖晃造成玻璃單點碰撞而爆裂，大片玻璃要預留玻璃墊的位置與間隙。</p>
-                        <p>4.施工完後，表面任何塗裝記號記得要擦拭乾淨。</p>
-                        <p>5.搬運玻璃時要注意避免有刮痕、碰角的情況。</p>
-                        <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_1.jpg">
-                        </p>
-                        <p>（圖片提供／918建材庫）<a id="a2"></a></p>
-                        <p>延伸閱讀:<span style="color: #3366ff;"><a style="color: #3366ff;"
-                                    href="https://hhh.com.tw/columns/detail/3585/#utm_source=RD_GS" target="_blank"
-                                    rel="noopener">當代居家設計最佳妙方！玻璃隔間讓家清透又敞亮</a></span></p>
-                        <p>&nbsp;</p>
-                        <h2><span style="color: #333399; font-size: x-large;"><strong>二、安全玻璃</strong></span></h2>
-                        <p>平板玻璃加工製成的安全玻璃，是力學強度高、抗衝擊能力強的玻璃。主要有鋼化玻璃、夾絲玻璃、膠合玻璃。安全玻璃被擊碎時，夾層會把兩層玻璃黏著，避免整塊玻璃變成飛濺傷人的碎片，並具有防盜、防火的功能。安全玻璃又分成:強化玻璃、夾絲玻璃、膠合玻璃<a
-                                id="b1"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※強化玻璃</strong></span></h3>
-                        <p>又稱鋼化玻璃，切割成適合大小後，將邊緣打磨好，然後將玻璃加熱至超過攝氏620度時，再急速冷卻玻璃表面製成。玻璃外冷內熱，表面被冷卻快速硬化；內部短時間收縮，在表面造成壓應力，而引張應力則在玻璃中心，這種平衡的狀態會產生抵抗外壓的功用。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★強化玻璃優點:</strong></span></p>
-                        <p>1.高強度:同等厚度的鋼化玻璃抗衝擊強度是普通玻璃的3～5倍，抗彎強度是普通玻璃的3～5倍。</p>
-                        <p>2.安全性高:受到重大外力作用碎裂時，玻璃會斷裂成小顆粒，沒有普遍玻璃刀狀的尖角，不易對人造成傷害。</p>
-                        <p>3.具熱穩定性:鋼化玻璃具有良好的熱穩定性，能承受的溫差是普通玻璃的3倍，可承受200℃的溫差變化。</p>
-                        <p><span style="color: #000000;"><strong>★強化玻璃的缺點</strong></span></p>
-                        <p>1.不能再進行加工:強化後的玻璃不能再進行切割等加工。</p>
-                        <p>2.有自爆風險:溫差變化大時強化玻璃有自己破裂的可能性，而普通玻璃則相對安全。</p>
-                        <p>3.需於事前切割好:玻璃的切割及打磨處理需在強化工序前進行。</p>
-                        <p><span style="color: #000000;"><strong>★強化玻璃常見用途:</strong></span></p>
-                        <p>經常應用在建築的無框組件上，如玻璃門、自動玻璃門及玻璃幕牆等，需要負重的玻璃也會採用強化玻璃。</p>
-                        <p><strong><span style="color: #000000;">★施工注意事項:</span></strong></p>
-                        <p>1.製作玻璃輕隔間需使用5公分厚的強化玻璃。</p>
-                        <p>2.強化玻璃本身在加工過程會產生不同程度的波浪痕跡，經過強化之後，不適合再做其他加工如切割、挖洞、噴砂或倒角。</p>
-                        <p>3.避免撞擊強化玻璃強化玻璃的四個邊角怕受到撞擊，要盡量避免以免爆裂或變形。<a id="b2"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><strong><span style="color: #008080; font-size: large;">※夾絲玻璃</span></strong></h3>
-                        <p>又稱防碎玻璃或鋼絲玻璃，它是由壓延法製成，即是將平板玻璃加熱到紅熱軟化狀態下，將經預熱處理的鋼絲或鋼絲網壓入玻璃中間，經退火、切割而成，表面可以壓花或磨光。</p>
-                        <p><span style="color: #000000;"><strong>★夾絲玻璃優點:</strong></span></p>
-                        <p>1.安全性高:強度較高不易碎，萬一玻璃破損、可避免被碎玻璃割傷</p>
-                        <p>2.具防盜、隔音效果。</p>
-                        <p>3.具防火性:當鋼絲玻璃受火炸裂時，由於金屬鋼絲網的保護作用，玻璃仍能保持固定不致於崩落和破碎，可隔絕火燄和火粉末，又稱為防火玻璃。</p>
-                        <p><span style="color: #000000;"><strong>★夾絲玻璃缺點:</strong></span></p>
-                        <p>1.易氧化:生產過程中，絲網在高溫作用下容易氧化，出現氣泡及變色。如果玻璃邊部的金屬絲沒有處理好，時間久了容易氧化腐蝕。</p>
-                        <p>2.透光率較差＂玻璃本身具有高透光性，當加入金屬絲網之後會對視覺效果造成些許干擾。</p>
-                        <p><span style="color: #000000;"><strong>★夾絲玻常見用途:</strong></span></p>
-                        <p>1.除了居住安全特性，對於追求生活品味者，夾絲玻璃也可以在空間中創造獨特氛圍，因此愈來愈多的建案採用。</p>
-                        <p>2.天窗、天棚頂蓋以及易受震動的門窗上。</p>
-                        <p>3.當作二級門窗防火材料使用。</p>
-                        <p>4.用於防震場合，地震防護要求較高的建築和有工業振動的廠房等建築。</p>
-                        <p><strong><span style="color: #000000;">★施工注意事項:</span></strong></p>
-                        <p>1.需確認鋼絲玻璃的網子放置方向。</p>
-                        <p>2.需確實固定防煙屏障板。<a id="b3"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※膠合玻璃</strong></span></h3>
-                        <p>在兩片或數片玻璃之間，夾入PVB(聚乙烯醇縮丁醛樹指)中間膜製成。是先以熱壓或抽真空的方式儘可能排出各中間層的空氣，然後放入高壓爐內，利用高壓高溫使殘餘的少量空氣溶入樹脂膜結合而成的平面或曲面複合玻璃製品。
-                        </p>
-                        <p>因夾著富黏著力的中間膜，不會一受到衝擊力就被貫穿，且破損的玻璃片不易飛散，即使其中一面玻璃破掉了，玻璃還是會緊緊黏在膠膜上面。因此一般玻璃屋、採光罩大多會採用膠合安全玻璃來製作。</p>
-                        <p><span style="color: #000000;"><strong>★膠合玻璃的特性:</strong></span></p>
-                        <p>‧防噪音:膠合玻璃＞中空複層玻璃＞單層玻璃</p>
-                        <p>‧防侵入:膠合玻璃＞中空複層玻璃＞強化玻璃</p>
-                        <p><strong><span style="color: #000000;">★膠合玻璃的優點:</span></strong></p>
-                        <p>1.安全性極高:比其他種類玻璃具耐震性、防盜性、防爆性、防彈性，尤其適用於家有小朋友或老人家者。</p>
-                        <p>2.高效率節省能源建材:中間膜能降低太陽光照射所產生的熱能，可節省冷氣設備及電量。</p>
-                        <p>3.隔音效果好。</p>
-                        <p>4.中間膜有防止紫外線的機能。</p>
-                        <p>5.增進建築物的設計美感:使用有色中間膜，最易調合建築物周圍的景色，玻璃的清透性可讓光線透過，提高採光，放大空間感能滿足設計師的要求。</p>
-                        <p><span style="color: #000000;"><strong>★膠合玻璃的缺點</strong></span>:</p>
-                        <p>價格較貴，且若使用特殊膠膜與中間材，價位更高。</p>
-                        <p><span style="color: #000000;"><strong>★常見用途:</strong></span></p>
-                        <p>1.建築用。</p>
-                        <p>2.汽車前擋風玻璃。</p>
-                        <p>3.防爆、防彈用。</p>
-                        <p>4.家具用。</p>
-                        <p><span style="color: #000000;"><strong>★施工注意事項:</strong></span></p>
-                        <p>「嵌縫」工程要確實，以免發生鋁框及水泥面的接合處發生滲(漏)水問題，而影響到居家生活的品質。一般來說，嵌縫空隙約為3~5cm為宜。過小的嵌縫空隙，因不易實施防水水泥砂漿的灌漿工作，故容易出現填縫不實或下雨時出現「毛細現象」的漏水問題。
-                        </p>
-                        <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_2.jpg">
-                        </p>
-                        <p>（圖片提供／918建材庫）<a id="a3"></a></p>
-                        <p>延伸閱讀:<span style="color: #3366ff;"><a style="color: #3366ff;"
-                                    href="https://hhh.com.tw/columns/detail/6168/#utm_source=RD_GS" target="_blank"
-                                    rel="noopener">放大「家」的舒適尺度！不容錯過的10款玻璃拉門設計</a></span></p>
-                        <p>&nbsp;</p>
-                        <h2><span style="color: #333399; font-size: x-large;"><strong>三、節能型玻璃</strong></span></h2>
-                        <p>節能玻璃多用在建築外觀，例如:商業大樓、車站、體育館、國際航站、百貨公司、科技業大樓、住宅大樓……等等，室內空間則用在辦公室、會議室、裝潢隔間、門窗等。節能玻璃能有效阻隔室外熱能進入室內，以達到節約能源的目的。但要達到節能的功效，不只有選擇節能玻璃，建築物本身的方位、日照、風向…等先天條件必須做優先考慮。
-                        </p>
-                        <p>節能型玻璃能夠滿足人們對門窗的保溫隔熱要求，集節能性和美感於一體的節能裝飾型玻璃通具有令人賞心悅目的外觀色彩，而且還具有對光和熱的吸收、透射和反射能力。<a id="b4"></a>
-                        </p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※LOW-E低輻射玻璃</strong></span></h3>
-                        <p>以節能為訴求的Low-E玻璃，是種低幅射鍍膜玻璃，是在玻璃表面鍍上多層金屬或其他化合物組成的膜系產品。其鍍膜層具有對可見光高透過及對中遠紅外線高反射的特性，可阻擋70%的紫外線與70～80%的紅外線，防止室內溫度因日照而上升，達成節能減碳的環保目標。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★玻璃上鍍膜的方式:</strong></span></p>
-                        <p>一種為線上鍍膜，是在玻璃要成形前噴上化學金屬鍍膜。另一種為離線鍍膜，將做好的玻璃送進真空濺鍍機中，利用電子流進行真空濺鍍，此種玻璃產品具有高透光率、低反射率、高熱阻絶與環保節能機能，符合綠建築設計的要求。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★特性:</strong></span></p>
-                        <p>1.接近玻璃的自然原色。</p>
-                        <p>2.可視光透過率高，可防眩目之光害。</p>
-                        <p>3.紅外線反射率高，可阻絶大量熱源。</p>
-                        <p>4.隔熱節能:Low-E中空複層玻璃＞中空複層玻璃＞膠合玻璃＞單層玻璃（為保護鍍膜面及較佳效果，建議加工為雙層玻璃才會達到較好的隔熱效果。）</p>
-                        <p>5.防結露:Low-E中空複層玻璃＞中空複層玻璃＞膠合玻璃＞單層玻璃</p>
-                        <p>6.紫外線阻隔:Low-E中空複層玻璃＞中空複層玻璃＞膠合玻璃＞單層玻璃<a id="b5"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※熱反射玻璃</strong></span></h3>
-                        <p>表面鍍有金屬、非金屬及其氧化物等各種薄膜，對太陽能產生一定反射效果，反射率可達20～40%。熱反射玻璃是有較高的熱反射能力，而又保持良好透光性的平板玻璃，它是採用熱解法、真空蒸鍍法、陰極濺射法等，在玻璃表面塗以金、銀、銅、鋁、鉻、鎳和鐵等金屬或金屬氧化物薄膜，或採用電浮法等離子交換方法，以金屬離子置換玻璃表層原有離子而形成熱反射膜。
-                        </p>
-                        <p>熱反射玻璃的熱反射率高，如6mm厚浮法玻璃的總反射熱僅16%，同樣條件下，吸熱玻璃的總反射熱為40%，而熱反射玻璃則可高達61%，因而常用它製成中空玻璃或夾層玻璃，以增加絕熱性能。鍍金屬膜的熱反射玻璃還有單向透像的作用，即白天能在室內看到室外景物，而室外看不到室內的景像。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★熱反射玻璃的優點:</strong></span></p>
-                        <p>1.隔熱性高可節省能源。</p>
-                        <p>2.防止陽光直射，給居住者舒適感。</p>
-                        <p>3.可呈現顏色的層次變化。</p>
-                        <p>4.有鏡子般反射周圍環境的效果。</p>
-                        <p><strong>★熱反射玻璃的類別:</strong></p>
-                        <p>因為製作的方式不同又細分為:</p>
-                        <p>(1)<strong>在線LVC反射玻璃色別</strong>:古銅色、法國綠、海洋藍、茶色。</p>
-                        <p>(2)<strong>離線反射玻璃顏色</strong>:金黃色、銀色、藍色、不鏽鋼色、鈦銀藍色、綠銀色、藍銀色、淺灰色、LTO色。</p>
-                        <p>(3)<strong>吸熱玻璃</strong>:玻璃本體內摻入金屬離子，讓玻璃可以吸收太陽輻射熱，以減少熱流進入室內，最大優點就是成本低，並且在吸收大量紅外線輻射後，又能保有良好可見光透過率。現己廣泛應用為火車、汽車擋風玻璃，用於建築物時一般都會搭配外遮陽設計存在。
-                        </p>
-                        <p>(4)<strong>中空玻璃</strong>:由多片玻璃，中間以加充填乾燥劑的金屬隔框，予以膠合密封所組成，導熱係數較普通玻璃降低40%，由於具有良好的保溫、隔熱、隔聲等優點，現在被採用於建築物門窗，尤以寒帶地區國家採用的情形最多。
-                        </p>
-                        <p>(5)<strong>真空玻璃</strong>:在密閉的兩片玻璃之間形成真空從而使玻璃與玻璃之間的傳導熱接近於零。真空玻璃是目前節能效果最好的玻璃，同時真空玻璃的單片一般至少有一片是Low-E低輻射玻璃，這樣其對流、輻射和傳導傳熱都很少，節能效果非常好。結構類似中空玻璃，但空腔內氣體非常稀少近似於真空，導熱係數較中空玻璃又降低15%以上，但生產成本較高，僅在一些特殊場合應用。<a
-                                id="b6"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※琉璃建材</strong></span></h3>
-                        <p>琉璃建材透過光的照射，可以呈現出不同的變化和氣氛，讓空間營造出1+1大於2的效果。因具有特殊質感，除本身功能外，亦有藝術典藏價值，在住家、商業空間愈來愈普遍。</p>
-                        <p><span style="color: #000000;"><strong>★琉璃建材用途:</strong></span></p>
-                        <p>(1)整片拿來作拉門、屏風，也可將小的琉璃磚鑲嵌在門片、桌面或任何不影響安全性的地方，創造視覺美學。</p>
-                        <p>(2)局部妝點用，也可以大面積使用，例如嵌入石材或是木材內，形成一片琉璃牡丹牆或搭配LED燈光，讓牆面呈現漸層色變化。也可切割成好幾個圖案，嵌進門片、桌面、窗戶等空間，變成獨一無二的家具。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★尺寸設計:</strong></span></p>
-                        <p>通常市場上以正方形居多，20x20、30x30、60x60公分最為普遍，亦可量身訂做。</p>
-                        <p><span style="color: #000000;"><strong>★玻璃隔間牆:</strong></span></p>
-                        <p>隱私也是另一個重要的問題，除了使用窗簾之外，另可選擇噴砂玻璃(亦稱霧面玻璃)、紋理玻璃……等，達到透光不透景效果，保有隱私。<a id="b7"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※噴砂玻璃</strong></span></h3>
-                        <p>噴砂玻璃是以水混合金剛砂，高壓噴射在玻璃表面，對其打磨的一種工藝，利用高壓空氣噴射，將玻璃表面處理成霧粒狀；可以選擇單面或雙面的加工，在圖案的設計上可進行不同的處理，使樣式豐富多元，即俗稱的「霧面玻璃」。在室內裝修中，主要用在表現界定區域卻互不封閉的地方，如在餐廳與客廳之間，可用噴砂玻璃製成一道精美的屏風。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★噴砂玻璃的優點</strong></span></p>
-                        <p>(1).隱蔽性，噴砂玻璃具有一種朦朧美感，在視覺上有光線穿透卻隱密的特點，可作為區隔空間的隔屏，創造霧面神祕的視覺感受，又能保持光線充足。</p>
-                        <p>(2).價格優，噴砂玻璃的價格比較便宜、加工也很迅速。</p>
-                        <p><strong><span style="color: #000000;">★施工注意事項:</span></strong></p>
-                        <p>噴砂玻璃保養不易，表面容易殘留灰塵，用乾布擦拭可能留下毛屑，因此在挑選噴砂玻璃時，可以選擇防污或防指紋沾黏的產品，降低清潔的難度與時間。<a id="b8"></a></p>
-                        <p>&nbsp;</p>
-                        <h3><span style="color: #008080; font-size: large;"><strong>※烤漆玻璃</strong></span></h3>
-                        <p>主成分是強化玻璃和噴漆，黑色烤漆玻璃有類似墨鏡的反射效果。烤漆玻璃經噴漆上色處理，具不透光特性，可當輕隔間，居家空間最常見的做法是貼附於廚房料理檯前壁面，方便清潔油污，或是貼於衣櫃外側門片呈現現代感。可至文具行買玻璃彩繪筆，將烤漆玻璃當白板使用，便於記事、彈性美化壁面。
-                        </p>
-                        <p><span style="color: #000000;"><strong>★烤漆玻璃用途</strong></span></p>
-                        <p>具不透光與不透視的性質，其光滑與耐高溫的特性，很適合用在廚房壁面與爐台壁面，可輕鬆清潔油煙、油漬、水漬等髒污。也可貼附在櫃門門片上或當輕隔間、桌面面材。</p>
-                        <p><strong><span style="color: #000000;">★烤漆玻璃的優點</span></strong></p>
-                        <p>不易有刮痕、不易掉色、不透光、耐高溫、易清潔。</p>
-                        <p><strong><span style="color: #000000;">★烤漆玻璃的缺點</span></strong></p>
-                        <p>貼上壁面後，若要修整牆內管線或加釘配件，須敲除整片烤漆玻璃。</p>
-                        <p><img alt="幸福空間專欄" src="https://m.hhh.com.tw/upload/_hcolumn/content_20220125163555_3.jpg">
-                        </p>
-                        <p>（圖片提供／918建材庫）</p>
-                        <p>延伸閱讀:<span style="color: #3366ff;"><a style="color: #3366ff;"
-                                    href="https://hhh.com.tw/columns/detail/2399/#utm_source=RD_GS" target="_blank"
-                                    rel="noopener">【建材入門】夾紗玻璃的特性與風格應用</a></span></p>
-                        <p>延伸閱讀:<span style="color: #3366ff;"><a style="color: #3366ff;"
-                                    href="https://hhh.com.tw/columns/detail/2269/#utm_source=RD_GS" target="_blank"
-                                    rel="noopener">【建材入門】烤漆玻璃的特性與風格應用</a></span></p>
-                        <p>&nbsp;</p>
-                        <h3 id="mcetoc_1fnimp6qk9"
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; font-size: 1.75rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">
-                            <span style="box-sizing: border-box; font-weight: bolder; color: #333399;"><span
-                                    style="box-sizing: border-box; font-size: large;">918建材庫</span></span>
-                        </h3>
-                        <p
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17.6px;">
-                            <span style="box-sizing: border-box; color: #000080;"><img alt="幸福空間專欄"
-                                    style="box-sizing: border-box; vertical-align: middle; border-style: none; max-width: 80%; margin: 0.5rem 0px; transition: all 300ms ease-in-out 0s;"
-                                    src="https://cloud.hhh.com.tw/upload/_hcolumn/content_20210916120004_3.png"
-                                    width="250"></span>
-                        </p>
-                        <p
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17.6px;">
-                            918建材庫取其「918交易發&amp;建財庫」諧音，秉持一貫的用心與堅持，期以快速媒合優質A+供應商的產品及買家的需求，有效地幫企業增加收益及降低成本，創造出銷售通路的差異化，成為業界領頭羊，運用網路即時溝通的優勢，為建材產業拓展全方位展銷通路，除立足於台灣建材市場之外，未來將更進一步開創全球藍海無限新商機。
-                        </p>
-                        <p
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17.6px;">
-                            官網:<span style="box-sizing: border-box; color: #3366ff;"><a
-                                    style="box-sizing: border-box; color: #3366ff; background-color: transparent;"
-                                    href="https://918bms.com/" target="_blank"
-                                    rel="noopener">https://918bms.com/</a></span></p>
-                        <p
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17.6px;">
-                            Facebook:<span style="box-sizing: border-box; color: #3366ff;"><a
-                                    style="box-sizing: border-box; color: #3366ff; background-color: transparent;"
-                                    href="https://www.facebook.com/918bms" target="_blank"
-                                    rel="noopener">https://www.facebook.com/918bms</a></span></p>
-                        <p
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17.6px;">
-                            &nbsp;</p>
-                        <p
-                            style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; color: #727679; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17.6px;">
-                            <span style="box-sizing: border-box; color: #3366ff;"><span
-                                    style="box-sizing: border-box; color: #727679;">本文章由【</span><span
-                                    style="box-sizing: border-box;"><a
-                                        style="box-sizing: border-box; color: #3366ff; background-color: transparent;"
-                                        href="https://918bms.com/" target="_blank" rel="noopener">918建材庫</a></span><span
-                                    style="box-sizing: border-box; color: #727679;">】授權轉載</span></span>
-                        </p>
-                        <div class="article__contexts__note">
-                            <p>彙整編輯:Amy</p>
-                            <p>圖文提供:918建材庫</p>
+            <div class="container article--style pb-5 px-0">
+                <div class="container">
+                    <div class="container-width-column py-md-3">
+                        <div class="article__wrapper article_info">
+                            <!-- <h1 class="article__title mt-4">烤漆玻璃、噴砂玻璃、強化玻璃…玻璃種類比你想得還多！選對類型節能、省電、隔音又美觀</h1>
+                            <div class="small">2021-12-30｜ 人氣:49</div> -->
                         </div>
-                        
-                    </div> -->
+                        <div class="article__contexts article__contexts--longHeight active ColumnsContent"
+                            style="height:auto">
+                        </div>
+                        <div class="article__contexts__note">
+                            <div class="anchor_info">
+                                <!-- <div>
+                                    <p>彙整編輯：May</p>
+                                    <p>圖文提供：享生活-打造無印之家</p>
+                                </div> -->
+                            </div>
+                            </div>
+                    </div>
+    
                 </div>
+                <section class="sec-07_Ads">
+                    <div class="container">
+                        <div class="sec-07__slider"></div>
+                    </div>
+                </section>
             </div>
-            <section class="sec-07_Ads">
-                <div class="container py-5">
-                    <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>
@@ -1309,7 +1083,7 @@
 
         <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>
@@ -1317,7 +1091,7 @@
                     </div>
                 </div>
 
-              
+
             </div>
         </section>
 
@@ -1546,7 +1320,27 @@
 
         <div class="d-flex justify-content-center py-3 py-md-5">
             <div>
-                <svg class="loading-move " xmlns="http://www.w3.org/2000/svg" width="40" height="41.965" viewBox="0 0 40 41.965"><defs><style>.a{fill:#ee751b;}</style></defs><circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)"/><ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933" transform="translate(18.05 36.099)"/><ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)"/><circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)"/><ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)"/><circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)"/><path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z" transform="translate(1.403 11.424)"/><ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466" transform="translate(31.603 8.434)"/></svg>
+                <svg class="loading-move " xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
+                    viewBox="0 0 40 41.965">
+                    <defs>
+                        <style>
+                            .a {
+                                fill: #ee751b;
+                            }
+                        </style>
+                    </defs>
+                    <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
+                    <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
+                        transform="translate(18.05 36.099)" />
+                    <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
+                    <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
+                    <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
+                    <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
+                    <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
+                        transform="translate(1.403 11.424)" />
+                    <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
+                        transform="translate(31.603 8.434)" />
+                </svg>
             </div>
         </div>
         <!-- 
@@ -1581,11 +1375,16 @@
 
         <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 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>
 
@@ -1594,7 +1393,7 @@
               <img src="images/gotop.png" width="28" alt="">
             </div> -->
             <div class="btn-gotop">
-              <img src="images/gotop.webp" width="28" alt="">
+                <img src="images/gotop.webp" width="28" alt="">
             </div>
         </div>
         <footer class="footer d-none d-md-block">

columns.js

@@ -29,7 +29,7 @@ function get_data() {
             let article_info = "";
             let OtherColumns = "";
             let PopularColumns = "";
-
+            let author_inf="";
 
 
             breadcrumbTitle = `<a href="#">${msg[0].Columnstitle}</a>`
@@ -69,7 +69,11 @@ function get_data() {
                 OtherColumns += '</div></div></div>'
 
             }
-
+            author_inf=`
+                         <div>
+                            ${msg[0].author_inf}
+                        </div>
+            `;
 
             // for(let i=0; i<msg[0].PopularColumns.length; i++){
             //     PopularColumns+=
@@ -100,6 +104,10 @@ function get_data() {
 
             $('.OtherColumns').html(OtherColumns);
 
+            $('.anchor_info').html(author_inf);
+
+
+
             // $('.PopularColumns').html(PopularColumns);
 
         });
@@ -110,19 +118,21 @@ function renderSec07() {
     $.ajax({
         method: "GET",
         // url: `json/bannerAds-${id}.json`,
-        url: `json/bannerAds.json`,
+        url: `https://m3.hhh.com.tw:18686/getColumnAds`,
         dataType: "json",
     })
 
         .done(function (msg) {
 
             console.log(msg);
+            console.log(msg.length);
+
 
             let str = '';
 
-            for (let i = 0; i < msg[0].data.length; i++) {
+            for (let i = 0; i < msg.length; 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>`
+                str += `<div class="sec-07__slider-${i + 1} slide-item" onclick="window.open('${msg[i].link}');" data-bg="${msg[i].imgUrl}"><img class="img-fluid" src="${msg[i].imgUrl}"></div>`
 
             }
 
@@ -147,7 +157,7 @@ function renderSec07() {
 
 get_data();
 
-// renderSec07();
+renderSec07();
 
 let filter;
 

css/list-style.css

@@ -294,6 +294,7 @@ body {
 }
 
 .navbar .navbar-nav .nav-item {
+  -webkit-appearance: none !important;
   margin: 0 .5rem;
 }
 
@@ -393,6 +394,7 @@ body {
 
 .navbar .navbar-nav .nav-item .nav-link {
   position: relative;
+  -webkit-appearance: none !important;
 }
 
 .navbar .navbar-nav .nav-item .nav-link:after {
@@ -514,11 +516,14 @@ body {
 
 .navbar-search .dropbox__tab .nav-item {
   margin: 0 .6rem;
+  -webkit-appearance: none;
 }
 
 .navbar-search .dropbox .nav-item-link {
-  border: none;
-  outline: none;
+  -webkit-appearance: none !important;
+  background: none !important;
+  border: none !important;
+  outline: none !important;
   font-size: 1rem;
   color: white;
   padding: 3px;
@@ -783,6 +788,7 @@ a {
   color: #727679;
   -webkit-transition: all .3s;
   transition: all .3s;
+  -webkit-appearance: none !important;
 }
 
 @media screen and (max-width: 1200px) {

css/list-style.scss

@@ -244,6 +244,7 @@ body {
   }
   .navbar-nav {
       .nav-item {
+        -webkit-appearance : none !important; 
           margin: 0 .5rem;
           @media (max-width: 1100px) {
               margin: 0 0rem;
@@ -313,6 +314,7 @@ body {
           }
           .nav-link {
               position: relative;
+              -webkit-appearance : none !important; 
           }
           .nav-link:after {
               position: absolute;
@@ -425,11 +427,15 @@ body {
           &__tab {
               .nav-item {
                   margin: 0 .6rem;
+                 
+                  -webkit-appearance : none ; 
                   }
               }
               .nav-item-link {
-                  border: none;
-                  outline: none;
+                 -webkit-appearance : none !important; 
+                  background: none !important;
+                  border: none !important;
+                  outline: none !important;
                   font-size: 1rem;
                   color: white;
                   padding: 3px;
@@ -595,6 +601,7 @@ a {
                 font-size: 1.125rem;
                 font-weight: 400;
                 transform: translateX(-15px);
+          
             }
         }
         &__r {
@@ -648,6 +655,7 @@ a {
     .nav-item {
         margin: 0 0.8rem;
         width: auto;
+   
         &-link {
             display: block;
             padding: 0.5rem 2.5rem;
@@ -656,6 +664,8 @@ a {
             font-size: .9rem;
             color: #727679;
             transition: all .3s;
+            -webkit-appearance : none !important; 
+            
             @media screen and (max-width: 1200px) {
                 padding: 0.5rem .8rem;
             }

css/style.css

@@ -3010,6 +3010,10 @@ body {
   border: 1px solid #727679;
 }
 
+.article__contexts__note p {
+  margin-bottom: 1rem !important;
+}
+
 .scMedia {
   width: 35%;
   margin: 0 auto;

css/style.scss

@@ -2466,6 +2466,9 @@ body {
     font-size: 1.125rem;
     padding: 1rem;
     border: 1px solid #727679;
+    p{
+        margin-bottom: 1rem !important;
+    }
     
 }