hhh-readmore.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
  6. <title>逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮 - 幸福空間 </title>
  7. <meta http-equiv="imagetoolbar" content="false">
  8. <meta http-equiv="pragma" content="cache">
  9. <meta name="company" content="幸福空間">
  10. <meta name="copyright" content="2007 © 幸福空間 │ All Rights Reserved.">
  11. <meta name="creation-date" content="2018-12-12 04:04:04 GTM+8">
  12. <meta name="description" content="2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。">
  13. <meta name="distribution" content="Taiwan">
  14. <meta name="keywords" content="">
  15. <meta name="revisit-after" content="1 days">
  16. <meta name="robots" content="all">
  17. <meta name="format-detection" content="telephone=no">
  18. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  19. <meta property="fb:admins" content="100004637466842" />
  20. <meta property="fb:pages" content="191820036010" />
  21. <meta property="fb:app_id" content="582473075602626" />
  22. <meta property="og:description" content="2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。" />
  23. <meta property="og:image" content="https://images.hhh.com.tw/uploads/_hcolumn_orig/point01_368_04.JPG" />
  24. <meta property="og:site_name" content="幸福空間" />
  25. <meta property="og:title" content="逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮 - 幸福空間 " />
  26. <meta property="og:type" content="website" />
  27. <meta property="og:url" content="https://hhh.com.tw/columns/detail/6202/" />
  28. <meta property="og:locale" content="zh_TW">
  29. <meta name="twitter:card" content="summary">
  30. <meta name="twitter:site" content="@幸福空間">
  31. <meta name="twitter:title" content="逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮 - 幸福空間 ">
  32. <meta name="twitter:description" content="2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。">
  33. <meta name="twitter:creator" content="幸福空間">
  34. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  35. <style>
  36. .article__contexts.active {
  37. height: auto;
  38. overflow: hidden;
  39. }
  40. .article__contexts--longHeight {
  41. height: auto;
  42. -webkit-transition: height 300ms ease-in-out;
  43. transition: height 300ms ease-in-out;
  44. }
  45. .article__contexts img {
  46. max-width: 80%;
  47. margin: 0.5rem 0;
  48. -webkit-transition: all 300ms ease-in-out;
  49. transition: all 300ms ease-in-out;
  50. }
  51. .article__contexts {
  52. font-size: 1.1rem;
  53. line-height: 1.8;
  54. height: 1044px;
  55. overflow: hidden;
  56. -webkit-transition: all 300ms ease-in-out;
  57. transition: all 300ms ease-in-out;
  58. }
  59. *, *::before, *::after {
  60. -webkit-box-sizing: border-box;
  61. box-sizing: border-box;
  62. }
  63. .article__readMore.active {
  64. }
  65. .article__readMore--gradHight {
  66. /* -webkit-transform: translateY(75px);
  67. transform: translateY(75px); */
  68. -webkit-transition: all 300ms ease-in-out;
  69. transition: all 300ms ease-in-out;
  70. }
  71. .article__readMore {
  72. margin-left: auto;
  73. margin-right: auto;
  74. text-align: center;
  75. font-size: 90%;
  76. padding: 1rem 1rem;
  77. width: 8rem;
  78. border-radius: 2rem;
  79. background-color: #FFAC73;
  80. -webkit-transition: all 300ms ease-in-out;
  81. transition: all 300ms ease-in-out;
  82. text-decoration: none;
  83. color: white;
  84. }
  85. .article__readMore__text {
  86. color: white;
  87. text-decoration: none;
  88. }
  89. .article__readMore__text:hover {
  90. color: white;
  91. text-decoration: none;
  92. }
  93. #prefer-form {
  94. max-width: 950px;
  95. width: 80%;
  96. margin: 1rem auto;
  97. border: 1px solid rgb(180, 180, 180);
  98. border-radius: 1rem;
  99. padding: .5rem;
  100. }
  101. #prefer-form .imgfr {
  102. background-size: cover;
  103. background-repeat: no-repeat;
  104. background-position: center;
  105. width: 75%;
  106. margin: auto;
  107. height: 8rem;
  108. border-radius: 8px;
  109. border: 3px solid transparent;
  110. }
  111. #prefer-form input[type="radio"]:checked + .fs-label-info .imgfr {
  112. border: 3px solid #EE7800;
  113. }
  114. #prefer-form .prefer-form__submit {
  115. margin-left: auto;
  116. margin-right: auto;
  117. text-align: center;
  118. font-size: 90%;
  119. padding: .3rem 1rem;
  120. width: 6rem;
  121. border-radius: 2rem;
  122. background-color: #FFAC73;
  123. text-decoration: none;
  124. color: white;
  125. border: none;
  126. outline: none;
  127. }
  128. </style>
  129. </head>
  130. <body>
  131. <section class="article">
  132. <div class="container article--style">
  133. <div class="container-width-column py-md-3">
  134. <div>
  135. <h1 class="article__title mt-4">逆勢創新打造居家防疫好生活!幸福空間勇奪網路「居家生活服務策略卓越獎」殊榮</h1>
  136. <div class="small mb-3">2021-11-03| 人氣:238</div>
  137. </div>
  138. <div>
  139. <div class="article__contexts article__contexts--longHeight">
  140. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_10.JPG" /></p>
  141. <p>▲宅經濟產業得獎品牌策略卓越獎合影。(左至右)幸福空間副總經理蕭光男、icash pay、國家通訊傳播委員會前主任委員詹婷怡、凱基證券、永豐銀行大戶DAWHO數位帳戶(圖片提供/網路溫度計)(圖片提供/網路溫度計)</p>
  142. <!-- <div id="prefer-form" class="text-center">
  143. <h4 class="mb-3">請問您喜歡下列何種風格的設計?</h4>
  144. <div class="row mb-2">
  145. <input type="radio" value="north-eu" name="q1" id="1a" checked style="display: none;" />
  146. <label class="col-4 mr fs-label-info text-center" for="1a">
  147. <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
  148. <p class="mb-0">北歐風</p>
  149. </label>
  150. <input type="radio" value="modern" name="q1" id="1b" style="display: none;" />
  151. <label class="col-4 mr fs-label-info text-center" for="1b">
  152. <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
  153. <p class="mb-0">現代風</p>
  154. </label>
  155. <input type="radio" value="industrial" name="q1" id="1c" style="display: none;" />
  156. <label class="col-4 mr fs-label-info text-center" for="1c">
  157. <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
  158. <p class="mb-0">工業風</p>
  159. </label>
  160. </div>
  161. <button class="prefer-form__submit">送出</button>
  162. </div> -->
  163. <!-- <div class="article__readMore article__readMore--gradHight">
  164. <a class="article__readMore__text">閱讀更多</a>
  165. </div> -->
  166. <div style="height: 300px;width: 100%;background-color: white;" class="blank-box"></div>
  167. <p>2021年持續延燒的疫情,人們也因社交距離規範影響了大家的生活習慣,在民眾集體居家防疫,促使「宅經濟」迅速發展,身為全台最大室內設計平台「幸福空間」,一直秉持「跟家有關的事,就是幸福空間的事」,順應這波疫情加速數位變革和轉型,為品牌挹注新型態的獲利契機,更透過數位行銷、跨平台資源整合、串接居家產業生態鏈,打造最能協助使用者解決宅裝住租問題的平台。此次於網路溫度計舉辦的第四屆「網路口碑之星」評比中,從1,248 家企業、平台、品牌中脫穎而出,最後決選59間企業、品牌,在「宅經濟產業-居家生活服務」類別勇奪「策略卓越獎」殊榮。</p>
  168. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_11.JPG" /></p>
  169. <p>(圖片提供/網路溫度計)</p>
  170. <p>大數據平台網路溫度計透過網路大數據調查2021年各產業類別、各品牌的網路聲量及正負評比,納入地點評論、App評論之評論數量與星等評分,綜合評比出口碑影響力排名,是台灣第一個以「網路數據」為依據進行評選頒獎的獎項。網路溫度計營運長林慧珍指出,「網路口碑之星」評比都是經由專家做評選的,面對疫情,如何在原本家的空間做好防疫這件事,大家一開始都是有所恐慌,而幸福空間在此時扮演重要的角色,家被重新定義,而幸福空間得獎原因,就是瞄準居家防疫期間,民眾萌生住宅健康營造的需求,幸福空間歸納出打造健康舒適環境的技巧,提供設計靈感及方向;此外也異業合作在蝦皮購物電商平台露出,分享建造家居風格的關鍵元素,成為向社會大眾推廣「防疫從家做起」的重要角色,憑藉著出眾的行銷策略拿下「策略卓越獎」。</p>
  171. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_01.jpg" /></p>
  172. <p>幸福空間副總經理蕭光男在頒獎典禮表示,幸福空間本來是一個老字號的電視節目,數位轉型後在臉書、粉絲團、YouTube、IG都有很多粉絲的社群經營,扣緊網路用戶來打造內容,結合專業知識與時事話題,創造對消費者有價值的訊息,加上多渠道圈粉,提升品牌效益,也使得消費者對品牌信任度提升,進而有更好的互動效益。</p>
  173. <p>蕭光男副總經理也進一步提到,根據內政部統計,一個人一輩子裝修房子的機會大約是1.5次,難免會感到非常陌生,幸福空間可以幫助大家獲得最豐富的知識,找到國內外最好的設計,若還是沒有頭緒,透過我們的平台幫你介紹一個最適合你的設計師,這就是幸福空間的意義。</p>
  174. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_04.JPG" /></p>
  175. <p>▲幸福空間副總經理蕭光男(左)出席2021網路口碑之星頒獎典禮,由國家通訊傳播委員會前主任委員詹婷怡(右)手中接獲宅經濟產業策略卓越獎。(圖片提供/網路溫度計)</p>
  176. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_09.jpg" alt="" width="500" /></p>
  177. <p> ▲幸福空間榮獲2021網路口碑之星宅經濟產業策略卓越獎,由幸福空間副總經理蕭光男發表得獎致詞感言。(圖片提供/幸福空間)</p>
  178. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_05.jpg" /></p>
  179. <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
  180. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_06.jpg" /></p>
  181. <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
  182. <p> </p>
  183. <h2><span style="font-family-fake: Verdana, Geneva, sans-serif;"><span style="font-size: x-large; color: #ff6600;"><strong>順應防疫新生態 提出有效溝通的設計關鍵</strong></span></span></h2>
  184. <p>於評選時間(2020/07/01~2021/06/30)內,幸福空間網路聲量有2,422筆,其中正面與中立聲量占比高達96.66%。特別是防疫期間,民眾長時間宅居於家中,尤為重視住屋環境品質以及居家健康營造,幸福空間瞄準了這股趨勢,順應防疫新生態,善用既有專業資源並整合外部平台,整理出居家住宅佈置的防疫需求以及相關細節,有效喚醒網友對於居家消毒防疫的重視,進而穩固關注幸福空間的相關消息。</p>
  185. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_07.jpg" /></p>
  186. <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
  187. <p><span style="font-family-fake: Verdana, Geneva, sans-serif;"><span style="font-size: 12px;"> </span></span></p>
  188. <h2><span style="font-family-fake: Verdana, Geneva, sans-serif;"><span style="font-size: x-large; color: #ff6600;"><strong>與蝦皮異業合作行銷 創造大量曝光聲量</strong></span></span></h2>
  189. <p>除了著墨品牌本身居家專業知識的傳遞,成就民眾防疫最佳小幫手外,有抓到民眾在家時間大增,更關注生活品質的優化,因此,幸福空間受邀參與蝦皮購物「717美好生活節」,分享營造新興家居風格的關鍵元素,教網友如何打造夢幻家居更兼顧居家防疫需求,藉由異業合作創造大量的品牌曝光,整體聲量較去年增長逾44%。</p>
  190. <p><img alt='幸福空間專欄' src="https://images.hhh.com.tw/uploads/_hcolumn/point01_368_08.jpg" /></p>
  191. <p>(圖片提供/網路溫度計│2021網路口碑之星「宅經濟」洞察報告)</p>
  192. <p> </p>
  193. <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>
  194. <div class="article__contexts__note">
  195. <p>撰文:Jennifer</p>
  196. <p>資料暨圖片提供:幸福空間、網路溫度計</p>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </section>
  203. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  204. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  205. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  206. crossorigin="anonymous"></script>
  207. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  208. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  209. <script>
  210. const Str = `<div id="prefer-form" class="text-center">
  211. <h4 class="mb-3">請問您喜歡下列何種風格的設計?</h4>
  212. <div class="row mb-2">
  213. <input type="radio" value="north-eu" name="q1" id="1a" checked style="display: none;" />
  214. <label class="col-4 mr fs-label-info text-center" for="1a">
  215. <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
  216. <p class="mb-0">北歐風</p>
  217. </label>
  218. <input type="radio" value="modern" name="q1" id="1b" style="display: none;" />
  219. <label class="col-4 mr fs-label-info text-center" for="1b">
  220. <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
  221. <p class="mb-0">現代風</p>
  222. </label>
  223. <input type="radio" value="industrial" name="q1" id="1c" style="display: none;" />
  224. <label class="col-4 mr fs-label-info text-center" for="1c">
  225. <div class="imgfr mb-1" style="background-image: url('./images/2_2.webp');"></div>
  226. <p class="mb-0">工業風</p>
  227. </label>
  228. </div>
  229. <button class="prefer-form__submit">送出</button>
  230. </div>`
  231. window.onload = function() {
  232. $( "<div class='article__readMore article__readMore--gradHight'><a class='article__readMore__text'>閱讀更多</a></div>" ).insertAfter( ".article__contexts>p:nth-of-type(2)" );
  233. $(Str).insertAfter( ".article__contexts>p:nth-of-type(2)" );
  234. let height = $('.article__title').height() +
  235. $('.article__contexts p:nth-of-type(1)').height() +
  236. $('#prefer-form').height() +
  237. $('.article__contexts p:nth-of-type(2)').height() + 30;
  238. console.log($('.article__title').height())
  239. console.log($('.article__contexts p:nth-of-type(1)').height())
  240. console.log($('.article__contexts p:nth-of-type(2)').height())
  241. console.log(document.querySelector('.article__contexts').childNodes)
  242. $('.article__contexts').css('height', height);
  243. console.log(height);
  244. // console.log($('.article__contexts p:nth-of-type(1)>img').height())
  245. $('.article__readMore').on('click', function () {
  246. // $(this).children('.fa').toggleClass('is-rotate');
  247. // $(this).children('.article__readMore__text').toggleClass('is-open')
  248. // $(this).toggleClass('active')
  249. $('.article__readMore').toggle()
  250. $(".article__contexts").attr('style', 'height:auto')
  251. // if ($(this).children('.article__readMore__text').hasClass('is-open')) {
  252. // //$('.article__readMore__text').text('')
  253. // $('.article__readMore::before').css('background', 'unset')
  254. // } else {
  255. // $('.article__readMore__text').text('閱讀更多')
  256. // }
  257. // $('.article__moreContext').slideToggle();
  258. $('.blank-box').hide();
  259. $('.article__contexts').toggleClass('active');
  260. })
  261. var radio = document.getElementsByName('q1');
  262. $('.prefer-form__submit').click(function () {
  263. for (var i = 0, length = radio.length; i < length; i++) {
  264. if (radio[i].checked) {
  265. console.log(radio[i].value);
  266. }
  267. }
  268. $('#prefer-form').hide();
  269. if(!$('.article__contexts').hasClass('active')) {
  270. $('.article__contexts>p:nth-of-type(3)').css('padding-top', $('#prefer-form').height());
  271. height = $('.article__title').height() +
  272. $('.article__contexts p:nth-of-type(1)').height() +
  273. $('.article__contexts p:nth-of-type(2)').height() ;
  274. $('.article__contexts').css('height', height);
  275. $('.article__contexts>p:nth-of-type(3)').css('padding-top', 0);
  276. }
  277. })
  278. };
  279. </script>
  280. </body>
  281. </html>