huai-sian vor 3 Jahren
Ursprung
Commit
ac7d4fe987
1 geänderte Dateien mit 297 neuen und 0 gelöschten Zeilen
  1. 297 0
      hhh-readmore.html

+ 297 - 0
hhh-readmore.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
+<title>逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮 - 幸福空間 </title>
+<meta http-equiv="imagetoolbar" content="false">
+<meta http-equiv="pragma" content="cache">
+<meta name="company" content="幸福空間">
+<meta name="copyright" content="2007 © 幸福空間 │ All Rights Reserved.">
+<meta name="creation-date" content="2018-12-12 04:04:04 GTM+8">
+<meta name="description" content="2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。">
+<meta name="distribution" content="Taiwan">
+<meta name="keywords" content="">
+<meta name="revisit-after" content="1 days">
+<meta name="robots" content="all">
+<meta name="format-detection" content="telephone=no">
+<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
+<meta property="fb:admins" content="100004637466842" />
+<meta property="fb:pages" content="191820036010" />
+<meta property="fb:app_id" content="582473075602626" />
+<meta property="og:description" content="2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。" />
+<meta property="og:image" content="https://images.hhh.com.tw/uploads/_hcolumn_orig/point01_368_04.JPG" />
+<meta property="og:site_name" content="幸福空間" />
+<meta property="og:title" content="逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮 - 幸福空間 " />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://hhh.com.tw/columns/detail/6202/" />
+<meta property="og:locale" content="zh_TW">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@幸福空間">
+<meta name="twitter:title" content="逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮 - 幸福空間 ">
+<meta name="twitter:description" content="2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。">
+<meta name="twitter:creator" content="幸福空間">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+<style>
+.article__contexts.active {
+    height: auto;
+    overflow: hidden;
+}
+.article__contexts--longHeight {
+    height: auto;
+    -webkit-transition: height 300ms ease-in-out;
+    transition: height 300ms ease-in-out;
+}
+.article__contexts img {
+    max-width: 80%;
+    margin: 0.5rem 0;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+}
+.article__contexts {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    height: 1044px;
+    overflow: hidden;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+}
+*, *::before, *::after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.article__readMore.active {
+    
+}
+.article__readMore--gradHight {
+    /* -webkit-transform: translateY(75px);
+    transform: translateY(75px); */
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+}
+.article__readMore {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    font-size: 90%;
+    padding: 1rem 1rem;
+    width: 8rem;
+    border-radius: 2rem;
+    background-color: #FFAC73;
+    -webkit-transition: all 300ms ease-in-out;
+    transition: all 300ms ease-in-out;
+    text-decoration: none;
+    color: white;
+}
+
+.article__readMore__text {
+  color: white;
+  text-decoration: none;
+}
+
+.article__readMore__text:hover {
+  color: white;
+  text-decoration: none;
+}
+
+#prefer-form {
+  max-width: 950px;
+  width: 80%;
+  margin: 1rem auto;
+  border: 1px solid rgb(180, 180, 180);
+  border-radius: 1rem;
+  padding: .5rem;
+}
+
+#prefer-form .imgfr {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 75%;
+  margin: auto;
+  height: 8rem;
+  border-radius: 8px;
+  border: 3px solid transparent;
+}
+
+#prefer-form input[type="radio"]:checked + .fs-label-info .imgfr {
+  border: 3px solid #EE7800;
+} 
+
+#prefer-form .prefer-form__submit {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    font-size: 90%;
+    padding: .3rem 1rem;
+    width: 6rem;
+    border-radius: 2rem;
+    background-color: #FFAC73;
+    text-decoration: none;
+    color: white;
+    border: none;
+    outline: none;
+}
+
+</style>
+</head>
+<body>
+  <section class="article">
+    <div class="container article--style">
+    <div class="container-width-column py-md-3">
+    <div>
+    <h1 class="article__title mt-4">逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮</h1>
+    <div class="small mb-3">2021-11-03| 人氣:238</div>
+    </div>
+    <div>
+    <div class="article__contexts article__contexts--longHeight">
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_10.JPG" /></p>
+    <p>▲宅經濟產業得獎品牌策略卓越獎合影。(左至右)幸福空間副總經理蕭光男、icash pay、國家通訊傳播委員會前主任委員詹婷怡、凱基證券、永豐銀行大戶DAWHO數位帳戶(圖片提供/網路溫度計)(圖片提供/網路溫度計)</p>
+    <!-- <div id="prefer-form" class="text-center">
+      <h4 class="mb-3">請問您喜歡下列何種風格的設計?</h4>
+      <div class="row mb-2">
+        <input type="radio" value="north-eu" name="q1" id="1a" checked style="display: none;" />
+        <label class="col-4 mr fs-label-info text-center" for="1a">
+          <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
+          <p class="mb-0">北歐風</p>
+        </label>
+        <input type="radio" value="modern" name="q1" id="1b" style="display: none;" />
+        <label class="col-4 mr fs-label-info text-center" for="1b">
+          <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
+          <p class="mb-0">現代風</p>
+        </label>
+        <input type="radio" value="industrial" name="q1" id="1c" style="display: none;" />
+        <label class="col-4 mr fs-label-info text-center" for="1c">
+          <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
+          <p class="mb-0">工業風</p>
+        </label>
+      </div>
+      <button class="prefer-form__submit">送出</button>
+    </div> -->
+    <!-- <div class="article__readMore article__readMore--gradHight">
+      <a class="article__readMore__text">閱讀更多</a>
+    </div> -->
+    <div style="height: 300px;width: 100%;background-color: white;" class="blank-box"></div>
+    <p>2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_11.JPG" /></p>
+    <p>(圖片提供/網路溫度計)</p>
+    <p>大數據平台網路溫度計透過網路大數據調查2021年各產業類別、各品牌的網路聲量及正負評比,納入地點評論、App評論之評論數量與星等評分,綜合評比出口碑影響力排名,是台灣第一個以「網路數據」為依據進行評選頒獎的獎項。網路溫度計營運長林慧珍指出,「網路口碑之星」評比都是經由專家做評選的,面對疫情,如何在原本家的空間做好防疫這件事,大家一開始都是有所恐慌,而幸福空間在此時扮演重要的角色,家被重新定義,而幸福空間得獎原因,就是瞄準居家防疫期間,民眾萌生住宅健康營造的需求,幸福空間歸納出打造健康舒適環境的技巧,提供設計靈感及方向;此外也異業合作在蝦皮購物電商平台露出,分享建造家居風格的關鍵元素,成為向社會大眾推廣「防疫從家做起」的重要角色,憑藉著出眾的行銷策略拿下「策略卓越獎」。</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_01.jpg" /></p>
+    <p>幸福空間副總經理蕭光男在頒獎典禮表示,幸福空間本來是一個老字號的電視節目,數位轉型後在臉書、粉絲團、YouTube、IG都有很多粉絲的社群經營,扣緊網路用戶來打造內容,結合專業知識與時事話題,創造對消費者有價值的訊息,加上多渠道圈粉,提升品牌效益,也使得消費者對品牌信任度提升,進而有更好的互動效益。</p>
+    <p>蕭光男副總經理也進一步提到,根據內政部統計,一個人一輩子裝修房子的機會大約是1.5次,難免會感到非常陌生,幸福空間可以幫助大家獲得最豐富的知識,找到國內外最好的設計,若還是沒有頭緒,透過我們的平台幫你介紹一個最適合你的設計師,這就是幸福空間的意義。</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_04.JPG" /></p>
+    <p>▲幸福空間副總經理蕭光男(左)出席2021網路口碑之星頒獎典禮,由國家通訊傳播委員會前主任委員詹婷怡(右)手中接獲宅經濟產業策略卓越獎。(圖片提供/網路溫度計)</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_09.jpg" alt="" width="500" /></p>
+    <p> ▲幸福空間榮獲2021網路口碑之星宅經濟產業策略卓越獎,由幸福空間副總經理蕭光男發表得獎致詞感言。(圖片提供/幸福空間)</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_05.jpg" /></p>
+    <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_06.jpg" /></p>
+    <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
+    <p> </p>
+    <h2><span style="font-family-fake: Verdana, Geneva, sans-serif;"><span style="font-size: x-large; color: #ff6600;"><strong>順應防疫新生態 提出有效溝通的設計關鍵</strong></span></span></h2>
+    <p>於評選時間(2020/07/01~2021/06/30)內,幸福空間網路聲量有2,422筆,其中正面與中立聲量占比高達96.66%。特別是防疫期間,民眾長時間宅居於家中,尤為重視住屋環境品質以及居家健康營造,幸福空間瞄準了這股趨勢,順應防疫新生態,善用既有專業資源並整合外部平台,整理出居家住宅佈置的防疫需求以及相關細節,有效喚醒網友對於居家消毒防疫的重視,進而穩固關注幸福空間的相關消息。</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_07.jpg" /></p>
+    <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
+    <p><span style="font-family-fake: Verdana, Geneva, sans-serif;"><span style="font-size: 12px;"> </span></span></p>
+    <h2><span style="font-family-fake: Verdana, Geneva, sans-serif;"><span style="font-size: x-large; color: #ff6600;"><strong>與蝦皮異業合作行銷 創造大量曝光聲量</strong></span></span></h2>
+    <p>除了著墨品牌本身居家專業知識的傳遞,成就民眾防疫最佳小幫手外,有抓到民眾在家時間大增,更關注生活品質的優化,因此,幸福空間受邀參與蝦皮購物「717美好生活節」,分享營造新興家居風格的關鍵元素,教網友如何打造夢幻家居更兼顧居家防疫需求,藉由異業合作創造大量的品牌曝光,整體聲量較去年增長逾44%。</p>
+    <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_08.jpg" /></p>
+    <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
+    <p> </p>
+    <p style="text-align: center;"><iframe title="YouTube video player" src="https://www.youtube.com/embed/vt7Bn4ZuQDY" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
+    <div class="article__contexts__note">
+    <p>撰文:Jennifer</p>
+    <p>資料暨圖片提供:幸福空間、網路溫度計</p>
+    </div>
+    </div>
+    </div>
+    </div>
+    </div>
+    </section>
+
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" 
+  crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+  integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+  <script>
+    const Str = `<div id="prefer-form" class="text-center">
+      <h4 class="mb-3">請問您喜歡下列何種風格的設計?</h4>
+      <div class="row mb-2">
+        <input type="radio" value="north-eu" name="q1" id="1a" checked style="display: none;" />
+        <label class="col-4 mr fs-label-info text-center" for="1a">
+          <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
+          <p class="mb-0">北歐風</p>
+        </label>
+        <input type="radio" value="modern" name="q1" id="1b" style="display: none;" />
+        <label class="col-4 mr fs-label-info text-center" for="1b">
+          <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
+          <p class="mb-0">現代風</p>
+        </label>
+        <input type="radio" value="industrial" name="q1" id="1c" style="display: none;" />
+        <label class="col-4 mr fs-label-info text-center" for="1c">
+          <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
+          <p class="mb-0">工業風</p>
+        </label>
+      </div>
+      <button class="prefer-form__submit">送出</button>
+    </div>`
+    $( "<div class='article__readMore article__readMore--gradHight'><a class='article__readMore__text'>閱讀更多</a></div>" ).insertAfter( ".article__contexts>p:nth-of-type(2)" );
+    $(Str).insertAfter( ".article__contexts>p:nth-of-type(2)" );
+   
+    let height = $('.article__title').height() + 
+                   $('.article__contexts p:nth-of-type(1)').height() + 
+                   $('#prefer-form').height() + 
+                   $('.article__contexts p:nth-of-type(2)').height() + 30;
+
+    console.log($('.article__title').height())
+    console.log($('.article__contexts p:nth-of-type(1)').height())
+    console.log($('.article__contexts p:nth-of-type(2)').height())
+
+    $('.article__contexts').css('height', height);
+    console.log(height);
+    // console.log($('.article__contexts p:nth-of-type(1)>img').height())
+    $('.article__readMore').on('click', function () {
+            // $(this).children('.fa').toggleClass('is-rotate');
+            // $(this).children('.article__readMore__text').toggleClass('is-open')
+            // $(this).toggleClass('active')
+            $('.article__readMore').toggle()
+            $(".article__contexts").attr('style', 'height:auto')
+
+            // if ($(this).children('.article__readMore__text').hasClass('is-open')) {
+            //     //$('.article__readMore__text').text('')
+            //     $('.article__readMore::before').css('background', 'unset')
+            // } else {
+            //     $('.article__readMore__text').text('閱讀更多')
+            // }
+
+            // $('.article__moreContext').slideToggle();
+            $('.blank-box').hide();
+            $('.article__contexts').toggleClass('active');
+
+        })
+        
+        var radio = document.getElementsByName('q1');
+        $('.prefer-form__submit').click(function () {
+          for (var i = 0, length = radio.length; i < length; i++) {
+            if (radio[i].checked) {
+              console.log(radio[i].value);
+            }
+          }
+          $('#prefer-form').hide();
+          
+          if(!$('.article__contexts').hasClass('active')) {
+            $('.article__contexts>p:nth-of-type(3)').css('padding-top', $('#prefer-form').height());
+            height = $('.article__title').height() + 
+                   $('.article__contexts p:nth-of-type(1)').height() + 
+                   $('.article__contexts p:nth-of-type(2)').height() ;
+            $('.article__contexts').css('height', height);
+            $('.article__contexts>p:nth-of-type(3)').css('padding-top', 0);
+          }
+        })
+
+  </script>
+</body>
+</html>