single.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. {{ define "main" }}
  2. <section class="bhouseweb_loc_banner d-md-none d-block">
  3. <div class="card bg-transparent text-white border-0 rounded-0">
  4. <img src="/img/bn_portfolio2x.png" class="banner-img card-img" alt="...">
  5. </div>
  6. </section>
  7. <div class="style_house_ads">
  8. <h2 class="style_house_title style_house_text m-0">{{ .Params.collection_title}}</h2>
  9. </div>
  10. <section class="style_house_banner container-fluid px-0">
  11. <img src="./{{ .Params.cover_img}}" alt="">
  12. <div class="collection_banner_text_box">
  13. <p>{{ .Params.banner_img_text}}</p>
  14. <p>{{ .Params.homeowner}}|{{ .Params.bed_num}}|{{ .Params.size}}</p>
  15. </div>
  16. </section>
  17. <div class="style_house_content">
  18. <div class="style_house_sec01">
  19. <div class="style_house_sec01_box">
  20. <div class="row px-0 mx-0">
  21. <div class="col-4 col-md-4">
  22. <h3 class="fw-bold">{{ .Params.size}}</h3>
  23. <p>坪數</p>
  24. </div>
  25. <div class="col-4 col-md-4">
  26. <h3 class="fw-bold">{{ .Params.bed_num}}</h3>
  27. <p>格局</p>
  28. </div>
  29. <div class="col-4 col-md-4">
  30. <h3 class="fw-bold">{{ .Params.house_type}}</h3>
  31. <p>屋型</p>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="style_house_sec01_box">
  36. <div class="row px-0 mx-0">
  37. <div class="col-4 col-md-4">
  38. <h3 class="fw-bold">{{ .Params.loc}}</h3>
  39. <p>地區</p>
  40. </div>
  41. <div class="col-4 col-md-4">
  42. <h3 class="fw-bold">{{ .Params.construction}}</h3>
  43. <p>建案名稱</p>
  44. </div>
  45. <div class="col-4 col-md-4">
  46. <h3 class="fw-bold">{{ .Params.designer}}</h3>
  47. <p>設計師</p>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="style_house_sec01_box">
  52. <div class="style_house_sec01_box-1">
  53. <div class="row px-0 mx-0">
  54. <div class="col-4 ol-md-4 d-flex align-items-end justify-content-center px-0">
  55. <div>
  56. <h3 class="fw-bold">{{ .Params.space | safeHTML}}</h3>
  57. <!-- <h3 class="fw-bold">書房 主臥</h3> -->
  58. <p>設計空間</p>
  59. </div>
  60. </div>
  61. <div class="col-8 col-md-8 d-flex align-items-end justify-content-center px-0">
  62. <div>
  63. <h3 class="fw-bold">{{ .Params.budget}}</h3>
  64. <p>總預算(含設計/裝修/裝潢/系統櫃/家具)</p>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <hr class="style_house_line">
  73. <div class="style_house_content">
  74. <div class="style_house_sec02">
  75. <!-- <h1 class="style_house_title">標題JPBold22級字</h1> -->
  76. <div class="style_house_sec02_content">
  77. <div class="d-flex justify-content-between align-items-center">
  78. <span></span>
  79. <div class="icon-box">
  80. <a href=""><img src="/img/icon_fb@2x.png" alt=""></a>
  81. <a href=""><img src="/img/icon_line@2x.png" alt=""></a>
  82. </div>
  83. </div>
  84. <div class="row px-0 mx-0">
  85. <div class="col-7 col-md-5">
  86. <img class="img-fluid" src="/img/people.png" alt="">
  87. </div>
  88. <div class="col-12 col-md-12 pe-0">
  89. <div class="sec02_content_text">
  90. <h2 class="style_house_subtitle"> {{ .Params.collection_title}}</h2>
  91. <!-- <p>內文NotoJPMedium14級字行距28pt </p> -->
  92. <p>
  93. <!-- 都極度熱情,而且紳士般的協助拍攝團隊的黃先生,是個熱情 整個家裡,除了充滿精緻的氛圍,就像每一個家電,都被精心挑
  94. 選、設計、尺寸、擺放之外,地板、置物櫃更是乾淨得一塵不染, 就像是飯店的客房服務剛離開一樣,在拍攝團隊進行拍攝的過 程,更是熱切的協助我們調整燈光、道具等,黃先生真是一位超
  95. 貼心紳士暖男呢! -->
  96. {{.Params.collection_description }}
  97. </p>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <hr class="style_house_line">
  104. <div class="style_house_sec02">
  105. <!-- <h1 class="style_house_title">內部圖解|經過精密計算的生活模式</h1> -->
  106. <div class="content">
  107. <div class="slider slider-for style_house_sec02_slide">
  108. {{ range .Params.collection_slider }}
  109. <div>
  110. <img class="img-fluid slide_single_img" src="./{{ .slide_img }}" alt="">
  111. <div class="slide_item_text">
  112. <p> {{ .slide_text }} </p>
  113. <!-- <p>圖說NotoJPMedium14級字行距28pt</p> -->
  114. </div>
  115. </div>
  116. {{ end }}
  117. <!-- <div>
  118. <img class="img-fluid" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
  119. <div class="slide_item_text">
  120. <p> 圖說NotoJPMedium14級字行距28pt </p>
  121. <p>圖說NotoJPMedium14級字行距28pt</p>
  122. </div>
  123. </div>
  124. <div>
  125. <img class="img-fluid"
  126. src="/img/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung.webp"
  127. alt="">
  128. <div class="slide_item_text">
  129. <p> 圖說NotoJPMedium14級字行距28pt </p>
  130. <p>圖說NotoJPMedium14級字行距28pt</p>
  131. </div>
  132. </div>
  133. <div>
  134. 直式圖片 className 需加上 "vertical-img" 避免跑版
  135. <img class="img-fluid vertical-img" style="width: 100%; object-fit: contain;" src="/img/b6.webp" alt="">
  136. </div> -->
  137. <!-- <div>
  138. <img class="img-fluid"
  139. src="/img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp" alt="">
  140. <div class="slide_item_text">
  141. <p> 圖說NotoJPMedium14級字行距28pt </p>
  142. <p>圖說NotoJPMedium14級字行距28pt</p>
  143. </div>
  144. </div>
  145. <div>
  146. <img class="img-fluid" src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
  147. <div class="slide_item_text">
  148. <p> 圖說NotoJPMedium14級字行距28pt </p>
  149. <p>圖說NotoJPMedium14級字行距28pt</p>
  150. </div>
  151. </div>
  152. <div>
  153. <img class="img-fluid" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp" alt="">
  154. <div class="slide_item_text">
  155. <p> 圖說NotoJPMedium14級字行距28pt </p>
  156. <p>圖說NotoJPMedium14級字行距28pt</p>
  157. </div>
  158. </div> -->
  159. </div>
  160. <div class="slider slider-nav" style="margin-top: -10px;">
  161. {{ range .Params.collection_slider }}
  162. <div class="sec02_slide_item">
  163. <img class="img-fluid slide_img" src="./{{ .slide_img }}" alt="">
  164. </div>
  165. {{ end }}
  166. <!-- <div class="sec02_slide_item">
  167. <img class="img-fluid slide_img" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp"
  168. alt="">
  169. </div>
  170. <div class="sec02_slide_item">
  171. <img class="img-fluid slide_img"
  172. src="/img/collection/17_taiwanese_ping_tile_porch_muji_industrial_mixed_style_house_in_taichung.webp"
  173. alt="">
  174. </div>
  175. <div class="sec02_slide_item">
  176. <img class="img-fluid slide_img" src="/img/b6.webp" alt="">
  177. </div>
  178. <div class="sec02_slide_item">
  179. <img class="img-fluid slide_img"
  180. src="/img/collection/20_taiwanese_ping_vintage_cafe_shop_house_for_hipster_in_taichung.webp"
  181. alt="">
  182. </div>
  183. <div class="sec02_slide_item">
  184. <img class="img-fluid slide_img" src="/img/collection/0c90a5a4fb84164b6e8a60147aa31122.webp" alt="">
  185. </div>
  186. <div class="sec02_slide_item">
  187. <img class="img-fluid slide_img" src="/img/collection/3d272248107bdc7d610ee640fae3b182_1.webp"
  188. alt="">
  189. </div> -->
  190. </div>
  191. </div>
  192. <hr class="style_house_line">
  193. </div>
  194. <div class="style_house_sec03">
  195. <h1 class="style_house_title">空間平面圖</h1>
  196. <img class="img-fluid" src="{{ .Params.design_space_img }}" alt="">
  197. <h1 class="style_house_title">成家預算</h1>
  198. <!-- <table class="table table-bordered border-dark table1">
  199. <tbody>
  200. <tr>
  201. <th scope="row">預算說明</th>
  202. <td>
  203. <p>三房兩廳總預算:85.7萬</p>
  204. <P>家具與模組系統櫃:60.9萬 ; 裝修預算:24.8萬</P>
  205. <P>*為提供更精準的預算說明,本案預算依照現時裝修價格調整</P>
  206. </td>
  207. </tr>
  208. </tbody>
  209. </table> -->
  210. {{ .Params.remark_budget | safeHTML}}
  211. <h1 class="style_house_title">系統櫃與家具一覽表</h1>
  212. <!-- <table class="table table-bordered border-dark table2">
  213. <tbody>
  214. <tr>
  215. <th scope="row">空間</th>
  216. <td>
  217. <p>使用的家具與模組系統櫃</p>
  218. </td>
  219. </tr>
  220. <tr>
  221. <th scope="row">客餐廳</th>
  222. <td>
  223. <p>海天一線電視櫃、不夠衣櫃、我愛衣櫃、穿雲櫃、今晚餐櫃、把鞋子吊起來、小寶凳、漂浮茶几、星巒沙發4+1貴妃椅、友直餐桌六人座、幸福三人長凳、愛妻中島、今晚餐櫃、無慮餐椅、人造石檯面
  224. </p>
  225. </td>
  226. </tr>
  227. <tr>
  228. <th scope="row">主臥</th>
  229. <td>
  230. <p>雙人枕頭五尺、不夠衣櫃、樂天吊櫃</p>
  231. </td>
  232. </tr>
  233. <tr>
  234. <th scope="row">次臥</th>
  235. <td>
  236. <p>老王方塊櫃、老王變長方塊櫃、我愛三門衣櫃、幸福餐椅</p>
  237. </td>
  238. </tr>
  239. <tr>
  240. <th scope="row">書房</th>
  241. <td>
  242. <p>玩色床架五尺、玩色抽屜床架、不夠衣櫃、喜樂展示櫃</p>
  243. </td>
  244. </tr>
  245. </tbody>
  246. </table> -->
  247. {{ .Params.furniture_table | safeHTML}}
  248. <h1 class="style_house_title">裝修項目清單</h1>
  249. <!-- <table class="table table-bordered border-dark table2">
  250. <tbody>
  251. <tr>
  252. <th scope="row">類別</th>
  253. <td>
  254. <p>裝修項目</p>
  255. </td>
  256. </tr>
  257. <tr>
  258. <th scope="row">木工</th>
  259. <td>
  260. <p>窗簾盒、冷氣包管</p>
  261. </td>
  262. </tr>
  263. <tr>
  264. <th scope="row">水電</th>
  265. <td>
  266. <p>電器專用插座與迴路設計</p>
  267. </td>
  268. </tr>
  269. <tr>
  270. <th scope="row">油漆</th>
  271. <td>
  272. <p>油漆跳色、特殊漆跳色</p>
  273. </td>
  274. </tr>
  275. <tr>
  276. <th scope="row">地板</th>
  277. <td>
  278. <p>全室地板、門片高度修改</p>
  279. </td>
  280. </tr>
  281. <tr>
  282. <th scope="row">泥作</th>
  283. <td>
  284. <p>玄關落塵區六角磚(使用台灣磚)</p>
  285. </td>
  286. </tr>
  287. <tr>
  288. <th scope="row">保護清潔</th>
  289. <td>
  290. <p>保護工程、細部清潔</p>
  291. </td>
  292. </tr>
  293. </tbody>
  294. </table> -->
  295. {{ .Params.decoration_list_table | safeHTML}}
  296. </div>
  297. <hr class="style_house_line">
  298. <div class="style_house_sec04">
  299. <h1 class="style_house_title">屋主的話</h1>
  300. <p class="fw-bold">{{ .Params.Comment | safeHTML }}</p>
  301. </div>
  302. <hr class="style_house_line">
  303. <div class="style_house_sec05">
  304. <h1 class="style_house_title">其他分類案例</h1>
  305. <div class="style_house_sec05_box">
  306. <a href="">書房</a>
  307. <a href="">工業風</a>
  308. <a href="">特殊漆</a>
  309. <a href="">不做天花板</a>
  310. </div>
  311. </div>
  312. <hr class="style_house_line d-md-none d-block">
  313. <a href="/index.html">
  314. <p class="article__readMore text-center"> <span style="font-size: 18px;"
  315. class="fw-normal me-2">&lt;</span>回到成家故事案例</p>
  316. </a>
  317. </div>
  318. <hr class="style_house_line ">
  319. <div class="style_house_content home-content">
  320. <div class="style_house_sec06 container-fluid px-0">
  321. <div class="row px-0 mx-0">
  322. <div class="col-6 col-sm-6 bg-portfolio ps-0">
  323. <a href="/collection/">
  324. <div class="bg-img"></div>
  325. </a>
  326. </div>
  327. <div class="col-6 col-sm-6 bg-qa pe-0">
  328. <a href="/frequently_asked_questions/">
  329. <div class="bg-img"></div>
  330. </a>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. {{ end }}