index.html 94 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="copyright" content="2021 © Opentalk │ All Rights Reserved.">
  8. <meta name="creation-date" content="2021-07-09 12:00:04 GTM+8">
  9. <meta name="description" content="">
  10. <meta name="distribution" content="Taiwan">
  11. <meta name="keywords" content="">
  12. <meta name="revisit-after" content="1 days">
  13. <meta name="robots" content="all">
  14. <meta name="format-detection" content="telephone=no">
  15. <meta name="author" content="Choozmo">
  16. <meta property="og:image" content="" />
  17. <meta property="og:description" content="" />
  18. <meta property="og:site_name" content="" />
  19. <meta property="og:title" content="" />
  20. <meta property="og:type" content="website" />
  21. <meta property="og:locale" content="zh_TW">
  22. <title>opentalk</title>
  23. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  24. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  25. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  26. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
  27. <link rel="stylesheet" href="./style.css">
  28. </head>
  29. <body>
  30. <!-- 主選單 -->
  31. <section id="Navigation" class="container-fluid mx-0 px-0">
  32. <div id="nav" class="row px-0 mx-0">
  33. <div id="logo" class="col-md-2 col-lg-2 px-0">
  34. <a style="color:#fff ;text-decoration: none;" href="./index.html">
  35. <h1> <span style="font-size: 45px;;color:#9400d3">O</span>pentalk</h1>
  36. </a>
  37. </div>
  38. <div id="link" class="col-md-10 col-lg-10">
  39. <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>
  40. <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="180">熱門課程</a>
  41. <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="150">專欄報導</a>
  42. <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="100">課程分類</a>
  43. <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="80">合作對象</a>
  44. <a data-gt-target="#footer" data-gt-duration="500" data-gt-offset="50">聯絡我們</a>
  45. </div>
  46. <img id="menu-btn1" src="./img/menu.png" alt="">
  47. </div>
  48. </section>
  49. <section id="banner" class="container-fluid px-0 mx-0">
  50. <section class="courseadv" style="background: #fff;" class="course-adv px-0 mx-0">
  51. <div class="row mx-0">
  52. <div class="col-11 col-lg-11">
  53. <p class="text-center">愛學習折扣| 購買课程最低僅需 NT$330,可以獲得折扣课程的最後一天。僅剩<span id="hours"></span>小時<span
  54. id="minutes"></span>分鐘<span id="seconds" style="border: none;"></span>秒。</p>
  55. </div>
  56. <div class="col-1 col-lg-1 d-flex align-items-baseline px-0 mx-0"><img class="close-adv" width="16px"
  57. src="./img/close2.png" alt=""></div>
  58. </div>
  59. </section>
  60. <div class="row mx-0">
  61. <div class="form col-12 order-2 col-lg-5 order-lg-2">
  62. <form class="email-sub" action="">
  63. <h1>TODAY'S THE BEST DAY</h1>
  64. <h4>歡迎訂閱掌握最新課程資訊</h4>
  65. <div class="email-form mt-3" style="margin: 0 auto;">
  66. <div style="text-align: center;">
  67. <input type="email" id="email" name="email" placeholder="請留下您的Email" required>
  68. </div>
  69. <span class="course-tab" for="name">選擇您有興趣的課程類別(可複選)</span>
  70. <label for="20" class="selector1">直播講堂<input type="checkbox" class="selecbox ms-1" id="20"
  71. name="tags" value="20" style="width:15px;height:15px;"></label>
  72. <label for="18" class="selector1">個人成長<input type="checkbox" class="selecbox ms-1" id="18"
  73. name="tags" value="18" style="width:15px;height:15px;"></label>
  74. <label for="16" class="selector1">變美課程<input type="checkbox" class="selecbox ms-1" id="16"
  75. name="tags" value="16" style="width:15px;height:15px;"></label>
  76. <label for="21" class="selector1">專業影像<input type="checkbox" class="selecbox ms-1" id="21"
  77. name="tags" value="21" style="width:15px;height:15px;"></label>
  78. <label for="22" class="selector1">管理營銷<input type="checkbox" class="selecbox ms-1" id="22"
  79. name="tags" value="22" style="width:15px;height:15px;"></label>
  80. <label for="15" class="selector1">享受生活<input type="checkbox" class="selecbox ms-1" id="15"
  81. name="tags" value="15" style="width:15px;height:15px;"></label>
  82. <input class="email-subbtn my-3 " style="opacity: 1;" type="submit" value="領取折扣碼">
  83. </div>
  84. </form>
  85. </div>
  86. <div class="secbanner col-12 order-1 col-lg-7 order-lg-2 d-flex align-items-center">
  87. <div id="banner-container">
  88. <img class="" src="./img/banner-test/bruce-mars-xj8qrWvuOEs-unsplash2.jpg" alt="">
  89. </div>
  90. </div>
  91. </div>
  92. </section>
  93. <!-- 手機板行動選單 -->
  94. <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
  95. <div id="menu-box2">
  96. <div style="text-align: right;">
  97. <img class="close" src="./img/close.png" alt="">
  98. </div>
  99. <a class="link" data-gt-target="#sec01" data-gt-duration="500" data-gt-offset="60"
  100. style="padding-top: 3vw;">最新課程</a>
  101. <hr>
  102. <a class="link" data-gt-target="#sec02-moblie" data-gt-duration="800" data-gt-offset="60">熱門課程</a>
  103. <hr>
  104. <a class="link" data-gt-target="#sec04-moblie" data-gt-duration="500" data-gt-offset="60">專欄報導</a>
  105. <hr>
  106. <a class="link" data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">課程分類</a>
  107. <hr>
  108. <a class="link" data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">合作對象</a>
  109. <hr>
  110. <a class="link" data-gt-target="#footer" data-gt-duration="500" data-gt-offset="">聯絡我們</a>
  111. <hr>
  112. </div>
  113. </div>
  114. <!-- 最新課程 電腦版-->
  115. <section id="sec01">
  116. <div class="container-fluid">
  117. <div id="sec01-title" style="text-align: center;">
  118. <h1 class="secn-title">最新課程</h1>
  119. <hr class="line">
  120. </div>
  121. <div id="sec01-container" class="row row-cols-1 row-cols-md-4 g-4">
  122. </div>
  123. </div>
  124. </section>
  125. <!-- 最新課程 手機板 -->
  126. <!-- <section id="sec01-moblie">
  127. <img id="sec01-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png" alt="">
  128. <div id="sec01-moblie-title" class="container-fluid">
  129. <div id="sec01-moblie-header">
  130. <h1>最新課程</h1>
  131. <hr>
  132. </div>
  133. <div id="sec01-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
  134. <div class="col">
  135. <div class="card">
  136. <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
  137. <div class="card-body">
  138. <h5 class="card-title">標題</h5>
  139. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  140. additional</p>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="col">
  145. <div class="card">
  146. <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
  147. <div class="card-body">
  148. <h5 class="card-title">標題</h5>
  149. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  150. additional</p>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="col">
  155. <div class="card">
  156. <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
  157. <div class="card-body">
  158. <h5 class="card-title">標題</h5>
  159. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  160. additional</p>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="col">
  165. <div class="card">
  166. <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
  167. <div class="card-body">
  168. <h5 class="card-title">標題</h5>
  169. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  170. additional</p>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </section> -->
  177. <!-- 排名區塊 topbox 電腦版 -->
  178. <section id="sec02">
  179. <div id="sec02-container" class="container-fluid">
  180. <div id="sec02-top-box" class="row">
  181. <div id="sec02-top-title" class="col-lg-3">
  182. <h1>明星課程</h1>
  183. <hr>
  184. </div>
  185. <div id="sec02-content" class="col-lg-9">
  186. <div class="row">
  187. <div class="sec02-box1 col-lg-4">
  188. <a target="_blank"
  189. href="https://www.masterclass.com/classes/bobbi-brown-teaches-makeup-and-beauty"><img
  190. src="./img/sec02/sec02-1.png" alt=""></a>
  191. <div class="sec02-top-text"><span></span>Bobbi Brown</div>
  192. <div>你會學會如何選擇正確的基礎,做一個煙熏的眼睛和動人的嘴唇,並按著你的樣子呈現,無論是白天或晚上。但最重要的是,你會學會如何對自己的皮膚有信心。</div>
  193. </div>
  194. <div class="sec02-box1 col-lg-4">
  195. <a target="_blank"
  196. href="https://www.masterclass.com/classes/gordon-ramsay-teaches-cooking-restaurant-recipes-at-home"><img
  197. src="./img/sec02/sec02-2.png" alt=""></a>
  198. <div class="sec02-top-text"><span></span>Gordon Ramsay</div>
  199. <div>13 道餐廳風格的菜肴專為家庭烹飪而設計,您可以學習如何使用日常食材構建從開胃菜到甜點的高級菜肴。 </div>
  200. </div>
  201. <div class="sec02-box1 col-lg-4">
  202. <a target="_blank"
  203. href="https://www.masterclass.com/classes/jane-goodall-teaches-conservation"><img
  204. src="./img/sec02/sec02-3-removebg-preview.png" alt=""></a>
  205. <div class="sec02-top-text"><span></span>Dr. Jane Goodall</div>
  206. <div>珍古德道爾博士分享了她對黑猩猩行為模式的研究,以及他們教她什麼關於保護的工作。您將學習如何在當地採取行動並保護地球。</div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </section>
  213. <!--排名區塊Top-box- 手機板-->
  214. <section id="sec02-moblie">
  215. <div id="sec02-moblie-header">
  216. <h1>TOP10 熱門課程</h1>
  217. <hr>
  218. </div>
  219. <div id="sec02-container" class="container-fluid">
  220. <div id="sec02-content">
  221. <div id="sec02-top-box" class="row" style="margin-right: 0; padding-right:0;">
  222. <div class="sec02-box1 col-4 order-2">
  223. <a target="_blank"
  224. href="https://www.masterclass.com/classes/bobbi-brown-teaches-makeup-and-beauty">
  225. <img class="" id="top1" src="./img/sec02/sec02-1.png" alt="">
  226. </a>
  227. <div class="sec02-top-text"><span>1</span>Bobbi</div>
  228. <div class="sec02-top-text">你會學會如何對自己的皮膚有信心。</div>
  229. </div>
  230. <div class="sec02-box1 col-4 order-1">
  231. <a target="_blank"
  232. href="https://www.masterclass.com/classes/gordon-ramsay-teaches-cooking-restaurant-recipes-at-home">
  233. <img width="110px;" src="./img/sec02/sec02-2.png" alt="">
  234. </a>
  235. <div class="sec02-top-text"><span>2</span>Gordon</div>
  236. <div class="sec02-top-text" style="display: block;">您可以學習如何使用日常食材構建從開胃菜到甜點的高級菜肴。 </div>
  237. </div>
  238. <div class="sec02-box1 col-4 order-3">
  239. <a target="_blank" href="https://www.masterclass.com/classes/jane-goodall-teaches-conservation">
  240. <img width="115px;" src="./img/sec02/sec02-3-removebg-preview.png" alt="">
  241. </a>
  242. <div class="sec02-top-text"><span>3</span>Dr. Jane</div>
  243. <div class="sec02-top-text" style="display: block;">您將學習如何在當地採取行動並保護地球。</div>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. </section>
  250. <!-- 排名區塊table 電腦版 -->
  251. <section id="sec03">
  252. <div id="sec03-table" class="container-fluid">
  253. <div class="row" style="box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);">
  254. <div class="col-lg-6">
  255. <table class="table">
  256. <tbody>
  257. <tr>
  258. <th scope="row">1</th>
  259. <td>
  260. <a target="_blank" href="https://opentalk.center/courses/camera"><img
  261. src="./img/teacher/t4.webp" alt=""></a>
  262. <div class="sec03-table-text" style="display: inline-block;">
  263. <div>
  264. <a target="_blank" href="https://opentalk.center/courses/camera">
  265. <h1 class="fw-bold">12堂小白手機攝影课</h1>
  266. </a>
  267. </div>
  268. <div>
  269. <p>一天提升手機技能晉升攝影大神</p>
  270. </div>
  271. </div>
  272. </td>
  273. </tr>
  274. <tr>
  275. <th scope="row">2</th>
  276. <td>
  277. <a target="_bnank" href="https://opentalk.center/courses/drppt8"><img
  278. src="./img/teacher/t13.webp" alt=""></a>
  279. <div class="sec03-table-text" style="display: inline-block;">
  280. <div>
  281. <a target="_bnank" href="https://opentalk.center/courses/drppt8">
  282. <h1 class="fw-bold">靠PPT設計翻身年收破百萬</h1>
  283. </a>
  284. </div>
  285. <div>
  286. <p>被你老板、同事、客戶驚豔全場的8堂課</p>
  287. </div>
  288. </div>
  289. </td>
  290. </tr>
  291. <tr>
  292. <th scope="row">3</th>
  293. <td>
  294. <a target="_blank" href="https://opentalk.center/courses/beauty12"> <img
  295. src="./img/teacher/t10.webp" alt=""></a>
  296. <div class="sec03-table-text" style="display: inline-block;">
  297. <div>
  298. <a target="_blank" href="https://opentalk.center/courses/beauty12">
  299. <h1 class="fw-bold">超級逆齡煥顏術</h1>
  300. </a>
  301. </div>
  302. <div>
  303. <p>女人我最大長駐示範老師</p>
  304. </div>
  305. </div>
  306. </td>
  307. </tr>
  308. <tr>
  309. <th scope="row">4</th>
  310. <td>
  311. <a target="_blank" href="https://opentalk.center/courses/yogakuo"></a>
  312. <img src="./img/teacher/t16.webp" alt="">
  313. <div class="sec03-table-text" style="display: inline-block;">
  314. <div>
  315. <a target="_blank" href="https://opentalk.center/courses/yogakuo"></a>
  316. <h1 class="fw-bold">減齡回春瑜珈</h1>
  317. </div>
  318. <div>
  319. <p>劉濤、沈月眾多女星貼身瑜珈教練</p>
  320. </div>
  321. </div>
  322. </td>
  323. </tr>
  324. <tr>
  325. <th scope="row">5</th>
  326. <td>
  327. <a target="_blank"
  328. href="https://opentalk.center/courses/aerobic-cat"> <img
  329. src="./img/teacher/t11.webp" alt=""></a>
  330. <div class="sec03-table-text" style="display: inline-block">
  331. <div>
  332. <a target="_blank"
  333. href="https://opentalk.center/courses/aerobic-cat">
  334. <h1 class="fw-bold">有氧廋身塑形操</h1>
  335. </a>
  336. </div>
  337. <div>
  338. <p>每天居家15分鐘跳出好身材 </p>
  339. </div>
  340. </div>
  341. </td>
  342. </tr>
  343. </tbody>
  344. </table>
  345. </div>
  346. <div class="col-lg-6">
  347. <table class="table ">
  348. <tbody>
  349. <tr>
  350. <th scope="row">6</th>
  351. <td>
  352. <a target="_blank" href="https://opentalk.center/courses/pronunciation"><img
  353. src="./img/teacher/t6.webp" alt=""></a>
  354. <div class="sec03-table-text" style="display: inline-block ;">
  355. <div>
  356. <a target="_blank" href="https://opentalk.center/courses/pronunciation">
  357. <h1 class="fw-bold">3個月練出ICRT主播流暢口音</h1>
  358. </a>
  359. </div>
  360. <div>
  361. <p>帶你打磨發音、提升聽力、勇敢開口</p>
  362. </div>
  363. </div>
  364. </td>
  365. </tr>
  366. <tr>
  367. <th scope="row">7</th>
  368. <td>
  369. <a target="_blank" href="https://opentalk.center/courses/tea-spirit"> <img
  370. src="./img/teacher/t3.webp" alt=""></a>
  371. <div class="sec03-table-text" style="display: inline-block ;">
  372. <div>
  373. <a target="_blank" href="https://opentalk.center/courses/tea-spirit">
  374. <h1 class="fw-bold">借茶修為以茶養德</h1>
  375. </a>
  376. </div>
  377. <div>
  378. <p>讓靈動氣韻成為你的鮮活名片。</p>
  379. </div>
  380. </div>
  381. </td>
  382. </tr>
  383. <tr>
  384. <th scope="row">8</th>
  385. <td>
  386. <a target="_blank" href="https://opentalk.center/courses/12deal"><img
  387. src="./img/teacher/t22.webp" alt=""></a>
  388. <div class="sec03-table-text" style="display: inline-block ;">
  389. <div>
  390. <a target="_blank" href="https://opentalk.center/courses/12deal">
  391. <h1 class="fw-bold">12招人人都需要的超級成交術</h1>
  392. </a>
  393. </div>
  394. <div>
  395. <p>12招人人都需要的超級成交術</p>
  396. </div>
  397. </div>
  398. </td>
  399. </tr>
  400. <tr>
  401. <th scope="row">9</th>
  402. <td>
  403. <a target="_blank" href="https://opentalk.center/courses/drexcel"><img
  404. src="./img/teacher/t17.webp" alt=""></a>
  405. <div class="sec03-table-text" style="display: inline-block ;">
  406. <div>
  407. <a target="_blank" href="https://opentalk.center/courses/drexcel">
  408. <h1 class="fw-bold">EXCEL實戰速成</h1>
  409. </a>
  410. </div>
  411. <div>
  412. <p>職場晉升加薪秘密武器</p>
  413. </div>
  414. </div>
  415. </td>
  416. </tr>
  417. <tr>
  418. <th scope="row">10</th>
  419. <td>
  420. <a target="_blank" href="https://opentalk.center/courses/starface"><img
  421. src="./img/teacher/t12.webp" alt=""></a>
  422. <div class="sec03-table-text" style="display: inline-block ;">
  423. <div>
  424. <a target="_blank" href="https://opentalk.center/courses/starface">
  425. <h1 class="fw-bold">中醫養顏凍齡術</h1>
  426. </a>
  427. </div>
  428. <div>
  429. <p>劉詩詩佟麗娅明星御用中醫師</p>
  430. </div>
  431. </div>
  432. </td>
  433. </tr>
  434. </tbody>
  435. </table>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </section>
  441. <!-- 排名區塊table手機板 -->
  442. <section id="sec03-moblie">
  443. <div id="sec03-table" class="container-fluid">
  444. <img id="sec03-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png"
  445. alt="">
  446. <div id="sec03-slider" class="row">
  447. <div id="sec03-slider1" class="col-6" style="box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);">
  448. <table class="table">
  449. <tbody>
  450. <tr>
  451. <th scope="row">1</th>
  452. <td>
  453. <a target="_blank" href="https://opentalk.center/courses/camera"><img
  454. src="./img/teacher/t4.webp" alt=""></a>
  455. <div class="sec03-table-text" style="display: inline-block;">
  456. <div>
  457. <a target="_blank" href="https://opentalk.center/courses/camera">
  458. <h1 class="fw-bold">12堂小白手機攝影课</h1>
  459. </a>
  460. </div>
  461. <div>
  462. <p>一天提升手機技能晉升攝影大神</p>
  463. </div>
  464. </div>
  465. </td>
  466. </tr>
  467. <tr>
  468. <th scope="row">2</th>
  469. <td>
  470. <a target="_bnank" href="https://opentalk.center/courses/drppt8"><img
  471. src="./img/teacher/t13.webp" alt=""></a>
  472. <div class="sec03-table-text" style="display: inline-block;">
  473. <div>
  474. <a target="_bnank" href="https://opentalk.center/courses/drppt8">
  475. <h1 class="fw-bold">靠PPT設計翻身年收破百萬</h1>
  476. </a>
  477. </div>
  478. <div>
  479. <p>被你老板、同事、客戶驚豔全場的8堂課</p>
  480. </div>
  481. </div>
  482. </td>
  483. </tr>
  484. <tr>
  485. <th scope="row">3</th>
  486. <td>
  487. <a target="_blank" href="https://opentalk.center/courses/beauty12"> <img
  488. src="./img/teacher/t10.webp" alt=""></a>
  489. <div class="sec03-table-text" style="display: inline-block;">
  490. <div>
  491. <a target="_blank" href="https://opentalk.center/courses/beauty12">
  492. <h1 class="fw-bold">超級逆齡煥顏術</h1>
  493. </a>
  494. </div>
  495. <div>
  496. <p>女人我最大長駐示範老師</p>
  497. </div>
  498. </div>
  499. </td>
  500. </tr>
  501. <tr>
  502. <th scope="row">4</th>
  503. <td>
  504. <a target="_blank" href="https://opentalk.center/courses/yogakuo"></a>
  505. <img src="./img/teacher/t16.webp" alt="">
  506. <div class="sec03-table-text" style="display: inline-block;">
  507. <div>
  508. <a target="_blank" href="https://opentalk.center/courses/yogakuo"></a>
  509. <h1 class="fw-bold">減齡回春瑜珈</h1>
  510. </div>
  511. <div>
  512. <p>劉濤、沈月眾多女星貼身瑜珈教練</p>
  513. </div>
  514. </div>
  515. </td>
  516. </tr>
  517. <tr>
  518. <th scope="row">5</th>
  519. <td>
  520. <a target="_blank"
  521. href="https://opentalk.center/courses/aerobic-cat"> <img
  522. src="./img/teacher/t11.webp" alt=""></a>
  523. <div class="sec03-table-text" style="display: inline-block">
  524. <div>
  525. <a target="_blank"
  526. href="https://opentalk.center/courses/aerobic-cat">
  527. <h1 class="fw-bold">有氧廋身塑形操</h1>
  528. </a>
  529. </div>
  530. <div>
  531. <p>每天居家15分鐘跳出好身材 </p>
  532. </div>
  533. </div>
  534. </td>
  535. </tr>
  536. </tbody>
  537. </table>
  538. </div>
  539. <div id="sec03-slider2" class="col-6" style=" box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.3);">
  540. <table class="table ">
  541. <tbody>
  542. <tr>
  543. <th scope="row" class="pe-0">6</th>
  544. <td>
  545. <a target="_blank" href="https://opentalk.center/courses/pronunciation"><img
  546. src="./img/teacher/t6.webp" alt=""></a>
  547. <div class="sec03-table-text" style="display: inline-block ;">
  548. <div>
  549. <a target="_blank" href="https://opentalk.center/courses/pronunciation">
  550. <h1 class="fw-bold">3個月練出ICRT主播流暢口音</h1>
  551. </a>
  552. </div>
  553. <div>
  554. <p>打磨發音、提升聽力、勇敢開口</p>
  555. </div>
  556. </div>
  557. </td>
  558. </tr>
  559. <tr>
  560. <th scope="row">7</th>
  561. <td>
  562. <a target="_blank" href="https://opentalk.center/courses/tea-spirit"> <img
  563. src="./img/teacher/t3.webp" alt=""></a>
  564. <div class="sec03-table-text" style="display: inline-block ;">
  565. <div>
  566. <a target="_blank" href="https://opentalk.center/courses/tea-spirit">
  567. <h1 class="fw-bold">借茶修為以茶養德</h1>
  568. </a>
  569. </div>
  570. <div>
  571. <p>讓靈動氣韻成為你的鮮活名片。</p>
  572. </div>
  573. </div>
  574. </td>
  575. </tr>
  576. <tr>
  577. <th scope="row">8</th>
  578. <td>
  579. <a target="_blank" href="https://opentalk.center/courses/12deal"><img
  580. src="./img/teacher/t22.webp" alt=""></a>
  581. <div class="sec03-table-text" style="display: inline-block ;">
  582. <div>
  583. <a target="_blank" href="https://opentalk.center/courses/12deal">
  584. <h1 class="fw-bold">12招人人都需要的超級成交術</h1>
  585. </a>
  586. </div>
  587. <div>
  588. <p>12招人人都需要的超級成交術</p>
  589. </div>
  590. </div>
  591. </td>
  592. </tr>
  593. <tr>
  594. <th scope="row">9</th>
  595. <td>
  596. <a target="_blank" href="https://opentalk.center/courses/drexcel"><img
  597. src="./img/teacher/t17.webp" alt=""></a>
  598. <div class="sec03-table-text" style="display: inline-block ;">
  599. <div>
  600. <a target="_blank" href="https://opentalk.center/courses/drexcel">
  601. <h1 class="fw-bold">EXCEL實戰速成</h1>
  602. </a>
  603. </div>
  604. <div>
  605. <p>職場晉升加薪秘密武器</p>
  606. </div>
  607. </div>
  608. </td>
  609. </tr>
  610. <tr>
  611. <th scope="row">10</th>
  612. <td>
  613. <a target="_blank" href="https://opentalk.center/courses/starface"><img
  614. src="./img/teacher/t12.webp" alt=""></a>
  615. <div class="sec03-table-text" style="display: inline-block ;">
  616. <div>
  617. <a target="_blank" href="https://opentalk.center/courses/starface">
  618. <h1 class="fw-bold">中醫養顏凍齡術</h1>
  619. </a>
  620. </div>
  621. <div>
  622. <p>劉詩詩佟麗娅明星御用中醫師</p>
  623. </div>
  624. </div>
  625. </td>
  626. </tr>
  627. </tbody>
  628. </table>
  629. </div>
  630. </div>
  631. </div>
  632. </section>
  633. <!-- 專欄報導---電腦版 -->
  634. <section id="sec04">
  635. <div class="container-fluid">
  636. <div id="sec04-title" style="text-align: center;">
  637. <h1 class="secn-title">專欄報導</h1>
  638. <hr class="line">
  639. </div>
  640. <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
  641. <div class="col">
  642. <div class="card h-100">
  643. <a target="_blank" href="./column-report.html?id=01"><img src="./img/sec04/sec04-4.jpg"
  644. class="card-img-top" alt="..."></a>
  645. <div class="card-body">
  646. <a target="_blank" class="article-click" href="./column-report.html?id=01">
  647. <h5 class="card-title">從王力宏的直播看線上課程的推動</h5>
  648. </a>
  649. <p class="card-text">
  650. 線上課程因為每一次的疫情再起助推了一波又一波的趨勢,7月王力宏在直播中公開這一次線上課程的發布,引起了課單價7000台幣、同時間三千多堂課的搶購,意外的再次掀起名人課的風潮。
  651. </p>
  652. </div>
  653. </div>
  654. </div>
  655. <div class="col">
  656. <div class="card h-100">
  657. <a target="_blank" href="./column-report.html?id=02"><img src="./img/sec04/sec04-1.png"
  658. class="card-img-top" alt="..."></a>
  659. <div class="card-body">
  660. <a target="_blank" href="./column-report.html?id=02">
  661. <h5 class="card-title">5個國際最佳線上課程選擇</h5>
  662. </a>
  663. <p class="card-text">2021 年5門國際最受好評的個人和專業發展課程、課程認證和培訓網站</p>
  664. </div>
  665. </div>
  666. </div>
  667. <div class="col">
  668. <div class="card h-100">
  669. <a target="_blank" href="./column-report.html?id=03"> <img src="./img/sec04/sec01-2.png" class="card-img-top"
  670. alt="..."></a>
  671. <div class="card-body">
  672. <a target="_blank" href="./column-report.html?id=03">
  673. <h5 class="card-title">強推薦~生命洗禮後的變美課</h5>
  674. </a>
  675. <p class="card-text">健康飲食真的很重要,節食和吃藥看似效果快,其實反彈起來更加可怕,分分鐘超過原來的體重。而運動沒效果,是因為我們女生肌肉少,能量消耗慢</p>
  676. </div>
  677. </div>
  678. </div>
  679. <div class="col">
  680. <div class="card h-100">
  681. <a target="_blank" href="./column-report.html?id=04"><img src="./img/sec04/sec04-3.png"
  682. class="card-img-top" alt="..."></a>
  683. <div class="card-body">
  684. <a target="_blank" href="./column-report.html?id=04">
  685. <h5 class="card-title">侯吉諒書法講堂:從零開始,學寫一手好字</h5>
  686. </a>
  687. <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫,篆刻,為難得一見之全方位創作者,因長期接觸中西方各種藝術,在作品中深入古典而又具有強烈的現代意識,
  688. </p>
  689. </div>
  690. </div>
  691. </div>
  692. </div>
  693. </div>
  694. </section>
  695. <!-- 專欄報導 手機板-->
  696. <section id="sec04-moblie">
  697. <div id="sec04-moblie-title" class="container-fluid">
  698. <div id="sec04-moblie-header">
  699. <h1 class="secn-title">專欄報導</h1>
  700. <hr class="line">
  701. </div>
  702. <div id="sec04-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
  703. <div class="col">
  704. <div class="card h-100">
  705. <a target="_blank" href="./artist-course.html"><img src="./img/sec04/sec04-4.jpg"
  706. class="card-img-top" alt="..."></a>
  707. <div class="card-body">
  708. <a target="_blank" href="./artist-course.html">
  709. <h5 class="card-title">從王力宏的直播看線上課程的推動</h5>
  710. </a>
  711. <p class="card-text">
  712. 線上課程因為每一次的疫情再起助推了一波又一波的趨勢,7月王力宏在直播中公開這一次線上課程的發布,引起了課單價7000台幣、同時間三千多堂課的搶購,意外的再次掀起名人課的風潮。
  713. </p>
  714. </div>
  715. </div>
  716. </div>
  717. <div class="col">
  718. <div class="card h-100">
  719. <a target="_blank" href="./top5-course-platform.html"><img src="./img/sec04/sec04-1.png"
  720. class="card-img-top" alt="..."></a>
  721. <div class="card-body">
  722. <a target="_blank" href="./top5-course-platform.html">
  723. <h5 class="card-title">5個國際最佳線上課程選擇</h5>
  724. </a>
  725. <p class="card-text">2021 年5門國際最受好評的個人和專業發展課程、課程認證和培訓網站</p>
  726. </div>
  727. </div>
  728. </div>
  729. <div class="col">
  730. <div class="card h-100">
  731. <a target="_blank" href="./beauty.html"> <img src="./img/sec04/sec01-2.png" class="card-img-top"
  732. alt="..."></a>
  733. <div class="card-body">
  734. <a target="_blank" href="./beauty.html">
  735. <h5 class="card-title">強推薦~生命洗禮後的變美課</h5>
  736. </a>
  737. <p class="card-text">健康飲食真的很重要,節食和吃藥看似效果快,其實反彈起來更加可怕,分分鐘超過原來的體重。而運動沒效果,是因為我們女生肌肉少,能量消耗慢</p>
  738. </div>
  739. </div>
  740. </div>
  741. <div class="col">
  742. <div class="card h-100">
  743. <a target="_blank" href="./writing-course.html"><img src="./img/sec04/sec04-3.png"
  744. class="card-img-top" alt="..."></a>
  745. <div class="card-body">
  746. <a target="_blank" href="./writing-course.html">
  747. <h5 class="card-title">侯吉諒書法講堂:從零開始,學寫一手好字</h5>
  748. </a>
  749. <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫,篆刻,為難得一見之全方位創作者,因長期接觸中西方各種藝術,在作品中深入古典而又具有強烈的現代意識,
  750. </p>
  751. </div>
  752. </div>
  753. </div>
  754. </div>
  755. </div>
  756. </section>
  757. <!-- 課程分類電腦版-->
  758. <section id="sec05" class="container-fluid">
  759. <!-- <div id="tag-group" class="my-5 rounded-pill">
  760. <div class="tag btn-group" role="group" aria-label="Basic outlined example">
  761. <button id="015" type="button" class=" border-0 rounded-pill">享受生活</button>
  762. <button id="016" type="button" class="border-0 rounded-pill">我要變美</button>
  763. <button id="017" type="button" class=" border-0 rounded-pill">賺錢理財</button>
  764. <button id="018" type="button" class=" border-0 rounded-pill">自我成長</button>
  765. </div>
  766. </div> -->
  767. <div class="sec05-course-tag018">
  768. <div class="sec05-title">
  769. <h1 class="secn-title">自我成長</h1>
  770. <hr class="line">
  771. </div>
  772. <div class="sec05-container container-fluid mx-0 p-2">
  773. <div id="sec05-course18" class="sec05-course row">
  774. </div>
  775. </div>
  776. </div>
  777. <div class="sec05-course-tag023">
  778. <div class="sec05-title">
  779. <h1 class="secn-title">健身舞蹈</h1>
  780. <hr class="line">
  781. </div>
  782. <div class="sec05-container container-fluid mx-0 p-2">
  783. <div id="sec05-course23" class="sec05-course row">
  784. </div>
  785. </div>
  786. </div>
  787. <div class="sec05-course-tag022">
  788. <div class="sec05-title">
  789. <h1 class="secn-title">管理營銷</h1>
  790. <hr class="line">
  791. </div>
  792. <div class="sec05-container container-fluid mx-0 p-2">
  793. <div id="sec05-course22" class="sec05-course row">
  794. </div>
  795. </div>
  796. </div>
  797. <div class="sec05-course-tag015">
  798. <div class="sec05-title">
  799. <h1 class="secn-title">享受生活</h1>
  800. <hr class="line">
  801. </div>
  802. <div class="sec05-container container-fluid mx-0 p-2">
  803. <div id="sec05-course15" class="sec05-course row">
  804. </div>
  805. </div>
  806. </div>
  807. <div class="sec05-course-tag017">
  808. <div class="sec05-title">
  809. <h1 class="secn-title">斜槓理財</h1>
  810. <hr class="line">
  811. </div>
  812. <div class="sec05-container container-fluid mx-0 p-2">
  813. <div id="sec05-course17" class="sec05-course row">
  814. </div>
  815. </div>
  816. </div>
  817. <div class="sec05-course-tag016">
  818. <div class="sec05-title">
  819. <h1 class="secn-title">變美課程</h1>
  820. <hr class="line">
  821. </div>
  822. <div class="sec05-container container-fluid mx-0 p-2">
  823. <div id="sec05-course16" class="sec05-course row">
  824. </div>
  825. </div>
  826. </div>
  827. </section>
  828. <!-- 課程分類行動版 -->
  829. <section id="sec05-m">
  830. <div class="sec05-course-tag018m">
  831. <div class="sec05-title">
  832. <h1 class="secn-title">自我成長</h1>
  833. <hr class="line">
  834. </div>
  835. <div class="sec05-container">
  836. <div id="sec05-course18m" class="sec05-course">
  837. </div>
  838. </div>
  839. </div>
  840. <div class="sec05-course-tag023 px-0 mx-0">
  841. <div class="sec05-title">
  842. <h1 class="secn-title">健身舞蹈</h1>
  843. <hr class="line">
  844. </div>
  845. <div class="sec05-container container-fluid mx-0">
  846. <div id="sec05-course23m" class="sec05-course row mx-0">
  847. </div>
  848. </div>
  849. </div>
  850. <div class="sec05-course-tag022m">
  851. <div class="sec05-title">
  852. <h1 class="secn-title">管理營銷</h1>
  853. <hr class="line">
  854. </div>
  855. <div class="sec05-container container-fluid">
  856. <div id="sec05-course22m" class="sec05-course">
  857. </div>
  858. </div>
  859. </div>
  860. <div class="sec05-course-tag015m">
  861. <div class="sec05-title">
  862. <h1 class="secn-title">享受生活</h1>
  863. <hr class="line">
  864. </div>
  865. <div class="sec05-container container-fluid mx-0 px-0">
  866. <div id="sec05-course15m" class="sec05-course">
  867. </div>
  868. </div>
  869. </div>
  870. <div class="sec05-course-tag017m">
  871. <div class="sec05-title">
  872. <h1 class="secn-title">斜槓理財</h1>
  873. <hr class="line">
  874. </div>
  875. <div class="sec05-container container-fluid mx-0 px-0">
  876. <div id="sec05-course17m" class="sec05-course">
  877. </div>
  878. </div>
  879. </div>
  880. <div class="sec05-course-tag016m">
  881. <div class="sec05-title">
  882. <h1 class="secn-title">變美課程</h1>
  883. <hr class="line">
  884. </div>
  885. <div class="sec05-container container-fluid mx-0 px-0">
  886. <div id="sec05-course16m" class="sec05-course">
  887. </div>
  888. </div>
  889. </div>
  890. </section>
  891. <section class="sce06 py-3 container-fluid d-flex justify-content-center w-100" style="box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);">
  892. <div class="row d-flex justify-content-center px-0 mx-0">
  893. <div class="col-3 col-lg-1"><a target="_blank" href="https://www.ampaimusic.com/"><img class="img-fluid"
  894. src="./img/sec06/sec06-01-removebg-preview (1).png" alt=""></a>
  895. </div>
  896. <div class="col-3 col-lg-1"><a target="_blank" href="https://www.ximalaya.com/"><img class="img-fluid"
  897. src="./img/sec06/ximalayafm-removebg-preview.png" alt=""></a></div>
  898. <div class="col-3 col-lg-1"><a target="_blank" href="https://www.lizhiweike.com/"><img class="img-fluid"
  899. src="./img/sec06/sec06-07.jpg" alt=""></a></div>
  900. <div class="col-3 col-lg-1"><a target="_blank" href=""><img class="img-fluid" src="./img/sec06/sec06-8.png"
  901. alt=""></a></div>
  902. <div class="col-3 col-lg-1 d-flex align-items-center justfy-content-center"><a target="_blank" href="https://www.chain.tw/"><img class="img-fluid"
  903. src="./img/sec06/sec06-04.jpg" alt=""></a></div>
  904. <div class="col-3 col-lg-1 d-flex align-items-center justfy-content-center"><a target="_blank"
  905. href="https://nftboard.info/"><img class="img-fluid" src="./img/sec06/LOGO.png" alt=""></a>
  906. </div>
  907. <div class="col-3 col-lg-1"><a target="_blank" href="https://www.facebook.com/ARK.TPE/"><img class="img-fluid"
  908. src="./img/sec06/sec06-02.png" alt=""></a></div>
  909. <div class="col-3 col-lg-1 d-flex align-items-center justfy-content-center"><a target="_blank"
  910. href="https://www.facebook.com/Shengeng.Foundation"><img class="sec09-7 img-fluid"
  911. src="./img/sec06/sec06-05.png" alt=""></a></div>
  912. </div>
  913. </section>
  914. <!-- footer -->
  915. <footer id="footer" class="container-fluid" style="padding:0;margin:0">
  916. <div class="text" style="padding-right:0;">
  917. <a target="_blank" href="mailto:opentalk.center@gmail.com">
  918. <h2>客服信箱:opentalk.center@gmail.com</h2>
  919. </a>
  920. <h2>公司名稱:微生活知識科技公司</h2>
  921. <p>Opentalk &copy; All Rights Reserved.</p>
  922. </div>
  923. </footer>
  924. <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  925. <div class="modal-dialog modal-lg">
  926. <div class="modal-content bg-transparent">
  927. <div class="modal-header border-0">
  928. <h5 class="modal-title" id="exampleModalLabel"></h5>
  929. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"><img src="./img/close.svg" alt=""></button>
  930. </div>
  931. <div class="modal-body">
  932. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//Fmll0MIf8iY' frameborder='0' allowfullscreen></iframe></div>
  933. </div>
  934. </div>
  935. </div>
  936. </div>
  937. <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
  938. <div class="modal-dialog modal-lg">
  939. <div class="modal-content bg-transparent">
  940. <div class="modal-header border-0">
  941. <h5 class="modal-title" id="exampleModalLabel"></h5>
  942. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"><img src="./img/close.svg" alt=""></button>
  943. </div>
  944. <div class="modal-body">
  945. <video width="100%" controls>
  946. <source src="./img/test.mp4" type="video/mp4">
  947. </video>
  948. </div>
  949. </div>
  950. </div>
  951. </div>
  952. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  953. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  954. crossorigin="anonymous"></script>
  955. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  956. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  957. crossorigin="anonymous"></script>
  958. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  959. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  960. <script src="./goto.js"></script>
  961. <!-- 桌機板 -->
  962. <!-- 最新課程 -->
  963. <script>
  964. window.onload = function () {
  965. $.ajax({
  966. method: "POST",
  967. url: "https://welife.asia:8002/get_courses_by_cid",
  968. data: '[16,17,19,23]',
  969. dataType: "json",
  970. })
  971. .done(function (msg) {
  972. var sec01course = '';
  973. console.log(msg);
  974. var res = msg.length;
  975. console.log(res);
  976. const limit = res;
  977. for (var i = 0; i < limit; i++) {
  978. sec01course += ' \
  979. <div class="sec01-1 col-lg-3">\
  980. <div class="card h-100">\
  981. <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  982. <div class="card-body">\
  983. <div class="card-title1 d-flex align-items-center">\
  984. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="' + msg[i].url + '"><h1 style="font-weight:700; font-size: 18px; word-break:break-all" class="title-text">' + msg[i].title + '</h1></a>\
  985. </div>\
  986. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  987. <p class="card-text row">\
  988. <small class="text-muted col-6">\
  989. <img class="mb-1 mx-1" style="width: 25px; object-fit: cover; " src="./img/sec05/fire.png"alt=""><span>'+ msg[i].clicks + '人</span>\
  990. </small>\
  991. <small style="color:#FF0000; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
  992. </p>\
  993. </div>\
  994. </div>\
  995. </div>';
  996. }
  997. $('#sec01-container').html(sec01course);
  998. $(".title-text").each(function () {
  999. var len = $(this).text().length; //當前HTML物件text的長度
  1000. if (len > 22) {
  1001. var str = "";
  1002. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1003. $(this).html(str); //將替換的值賦值給當前物件
  1004. }else{
  1005. var str2 = "";
  1006. for(var i=len;i<22;i++){
  1007. str2 +='&emsp;'
  1008. }
  1009. str = $(this).text().substring(0,len)+str2;
  1010. $(this).html(str);
  1011. }
  1012. });
  1013. $(".card-content1").each(function () {
  1014. var len = $(this).text().length; //當前HTML物件text的長度
  1015. var str = "";
  1016. if (len > 55) {
  1017. str = $(this).text().substring(0, 55) + "..."; //使用字串擷取,獲取前60個字元,多餘的字元使用“......”代替
  1018. $(this).html(str); //將替換的值賦值給當前物件
  1019. }else{
  1020. var str2 = "";
  1021. for(var i=len;i<60;i++){
  1022. str2 +='&emsp;'
  1023. }
  1024. str = $(this).text().substring(0,len)+str2;
  1025. $(this).html(str);
  1026. }
  1027. });
  1028. });
  1029. }
  1030. </script>
  1031. <!-- 課程分類 -->
  1032. <!-- <script>
  1033. $(document).ready(function () {
  1034. function get_data(numb = '[15]') {
  1035. $.ajax({
  1036. method: "POST",
  1037. url: "https://welife.asia:8002/get_courses",
  1038. data: numb,
  1039. dataType: "json",
  1040. })
  1041. .done(function (msg) {
  1042. var sec05course = '';
  1043. console.log(msg);
  1044. var res = msg.length;
  1045. console.log(res);
  1046. const limit = res;
  1047. for (var i = 0; i < limit; i++) {
  1048. sec05course += ' \
  1049. <div class="course-content col my-3">\
  1050. <div class="card mb-3 p-1 h-100">\
  1051. <div class="row g-0">\
  1052. <div class="banner col-12 col-lg-12">\
  1053. <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1054. </div>\
  1055. <div class="col-12 col-lg-12 p-1">\
  1056. <a class="course-src" data-info="'+ msg[i].id + '" style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900; font-size: 22px;" class="card-title d-flex align-items-center">' + msg[i].title + '</h1></a>\
  1057. <p class="card-text card-content">'+ msg[i].profile + '</p>\
  1058. <p class="card-text row">\
  1059. <small class="text-muted col-8">\
  1060. <img class="mb-1 mx-1" style="width: 20px;" src="./img/sec05/fire.png"alt=""><span class="">'+msg[i].clicks+'人</span>\
  1061. </small>\
  1062. <small style="color:#FF0000;" class="price col-4">NT$'+ msg[i].price_discount + '</small>\
  1063. </p>\
  1064. </div>\
  1065. </div> \
  1066. </div> \
  1067. </div>';
  1068. }
  1069. // $('#sec05-course').html(sec05course);
  1070. });
  1071. }
  1072. get_data();
  1073. // 享受生活
  1074. $('#015').click(function () {
  1075. console.log('15')
  1076. get_data('[15]');
  1077. });
  1078. // 我要變美
  1079. $('#016').click(function () {
  1080. console.log('16')
  1081. get_data('[16]');
  1082. });
  1083. // 賺錢理財
  1084. $('#017').click(function () {
  1085. console.log('17')
  1086. get_data('[17]');
  1087. });
  1088. // 自我成長
  1089. $('#018').click(function () {
  1090. get_data('[18]');
  1091. });
  1092. });
  1093. </script> -->
  1094. <!-- 個人成長18 -->
  1095. <script>
  1096. $(document).ready(function () {
  1097. $.ajax({
  1098. method: "POST",
  1099. url: "https://welife.asia:8002/get_courses",
  1100. data: '[18]',
  1101. dataType: "json",
  1102. })
  1103. .done(function (msg) {
  1104. var sec05course18 = '';
  1105. console.log(msg);
  1106. var res = msg.length;
  1107. console.log(res);
  1108. const limit = res;
  1109. for (var i = 0; i < limit; i++) {
  1110. sec05course18 += ' \
  1111. <div class="sec01-1 col-lg-3">\
  1112. <div class="card h-100">\
  1113. <a target="_blank" href="'+ msg[i].url + '">\
  1114. <img src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1115. <div class="card-body px-1">\
  1116. <div class="card-title1 d-flex align-items-center">\
  1117. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1118. <h1 style="font-weight:700; font-size: 18px; word-break:break-all" class="title-text">'+ msg[i].title + '</h1>\
  1119. </a>\
  1120. </div>\
  1121. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  1122. <button type="button" class="mesg btn border border-white px-0" data-bs-toggle="modal" data-bs-target="#exampleModal"><span class="px-1">免費試聽</span><img style="width:16px;" class="d-inline" src="img/play-button (4).png" alt=""></button>\
  1123. <p class="card-text row">\
  1124. <small class="text-muted col-6">\
  1125. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1126. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1127. </small>\
  1128. <small style="color:#FF0000; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
  1129. </p>\
  1130. </div>\
  1131. </div>\
  1132. </div>';
  1133. }
  1134. $('#sec05-course18').html(sec05course18);
  1135. $('#sec05-course18').slick({
  1136. slidesToShow: 4,
  1137. slidesToScroll: 1,
  1138. infinite: true,
  1139. arrows: true,
  1140. });
  1141. });
  1142. });
  1143. </script>
  1144. <!-- 健身舞蹈23 -->
  1145. <script>
  1146. $(document).ready(function () {
  1147. $.ajax({
  1148. method: "POST",
  1149. url: "https://welife.asia:8002/get_courses",
  1150. data: '[23]',
  1151. dataType: "json",
  1152. })
  1153. .done(function (msg) {
  1154. var sec05course23 = '';
  1155. console.log(msg);
  1156. var res = msg.length;
  1157. console.log(res);
  1158. const limit = res;
  1159. for (var i = 0; i < limit; i++) {
  1160. sec05course23 += ' \
  1161. <div class="sec01-1 col-lg-3">\
  1162. <div class="card h-100">\
  1163. <a target="_blank" href="'+ msg[i].url + '">\
  1164. <img style="height:15vw; object-fit: cover;" src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1165. <div class="card-body px-1">\
  1166. <div class="card-title1 d-flex align-items-center">\
  1167. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1168. <h1 style="font-weight:700; font-size: 18px; word-break:break-all;" class="title-text">'+ msg[i].title + '</h1>\
  1169. </a>\
  1170. </div>\
  1171. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  1172. <p class="card-text row">\
  1173. <small class="text-muted col-8">\
  1174. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1175. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1176. </small>\
  1177. <small style="color:#FF0000; font-size:20px;" class="col-4">NT$'+ msg[i].price_discount + '</small>\
  1178. </p>\
  1179. </div>\
  1180. </div>\
  1181. </div>';
  1182. }
  1183. $('#sec05-course23').html(sec05course23);
  1184. $('#sec05-course23').slick({
  1185. slidesToShow: 3,
  1186. slidesToScroll: 1,
  1187. infinite: true,
  1188. arrows: true,
  1189. });
  1190. });
  1191. });
  1192. </script>
  1193. <!-- 管理營銷25 -->
  1194. <script>
  1195. $(document).ready(function () {
  1196. $.ajax({
  1197. method: "POST",
  1198. url: "https://welife.asia:8002/get_courses",
  1199. data: '[25]',
  1200. dataType: "json",
  1201. })
  1202. .done(function (msg) {
  1203. var sec05course22 = '';
  1204. console.log(msg);
  1205. var res = msg.length;
  1206. console.log(res);
  1207. const limit = res;
  1208. for (var i = 0; i < limit; i++) {
  1209. sec05course22 += ' \
  1210. <div class="sec01-1 col-lg-3">\
  1211. <div class="card h-100">\
  1212. <a target="_blank" href="'+ msg[i].url + '">\
  1213. <img src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1214. <div class="card-body px-1">\
  1215. <div class="card-title1 d-flex align-items-center">\
  1216. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1217. <h1 style="font-weight:700; font-size: 18px;" class="title-text">'+ msg[i].title + '</h1>\
  1218. </a>\
  1219. </div>\
  1220. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  1221. <button type="button" class="mesg btn border border-white px-0" data-bs-toggle="modal" data-bs-target="#exampleModal1"><span class="px-1">免費試聽</span><img style="width:16px;" class="d-inline" src="img/play-button (4).png" alt=""></button>\
  1222. <p class="card-text row">\
  1223. <small class="text-muted col-6">\
  1224. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1225. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1226. </small>\
  1227. <small style="color:#FF0000; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
  1228. </p>\
  1229. </div>\
  1230. </div>\
  1231. </div>';
  1232. }
  1233. $('#sec05-course22').html(sec05course22);
  1234. $('#sec05-course22').slick({
  1235. slidesToShow: 4,
  1236. slidesToScroll: 1,
  1237. infinite: true,
  1238. arrows: true,
  1239. });
  1240. });
  1241. });
  1242. </script>
  1243. <!-- 享受生活15 -->
  1244. <script>
  1245. $(document).ready(function () {
  1246. $.ajax({
  1247. method: "POST",
  1248. url: "https://welife.asia:8002/get_courses",
  1249. data: '[15]',
  1250. dataType: "json",
  1251. })
  1252. .done(function (msg) {
  1253. var sec05course15 = '';
  1254. console.log(msg);
  1255. var res = msg.length;
  1256. console.log(res);
  1257. const limit = res;
  1258. for (var i = 0; i < limit; i++) {
  1259. sec05course15 += ' \
  1260. <div class="sec01-1 col-lg-3">\
  1261. <div class="card h-100">\
  1262. <a target="_blank" href="'+ msg[i].url + '">\
  1263. <img style="height:15vw; object-fit:cover;" src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1264. <div class="card-body px-1">\
  1265. <div class="card-title1 d-flex align-items-center">\
  1266. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1267. <h1 style="font-weight:700; font-size: 18px; word-break:break-all;" class="title-text">'+ msg[i].title + '</h1>\
  1268. </a>\
  1269. </div>\
  1270. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  1271. <p class="card-text row">\
  1272. <small class="text-muted col-6">\
  1273. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1274. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1275. </small>\
  1276. <small style="color:#FF0000; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
  1277. </p>\
  1278. </div>\
  1279. </div>\
  1280. </div>';
  1281. }
  1282. $('#sec05-course15').html(sec05course15);
  1283. $('#sec05-course15').slick({
  1284. slidesToShow: 3,
  1285. slidesToScroll: 1,
  1286. infinite: true,
  1287. arrows: true,
  1288. });
  1289. });
  1290. });
  1291. </script>
  1292. <!-- 斜槓理財17 -->
  1293. <script>
  1294. $(document).ready(function () {
  1295. $.ajax({
  1296. method: "POST",
  1297. url: "https://welife.asia:8002/get_courses",
  1298. data: '[17]',
  1299. dataType: "json",
  1300. })
  1301. .done(function (msg) {
  1302. var sec05course17 = '';
  1303. console.log(msg);
  1304. var res = msg.length;
  1305. console.log(res);
  1306. const limit = res;
  1307. for (var i = 0; i < limit; i++) {
  1308. sec05course17 += ' \
  1309. <div class="sec01-1 col-lg-3">\
  1310. <div class="card h-100">\
  1311. <a target="_blank" href="'+ msg[i].url + '">\
  1312. <img src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1313. <div class="card-body px-1">\
  1314. <div class="card-title1 d-flex align-items-center">\
  1315. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1316. <h1 style="font-weight:700; font-size: 18px;" class="title-text">'+ msg[i].title + '</h1>\
  1317. </a>\
  1318. </div>\
  1319. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  1320. <p class="card-text row">\
  1321. <small class="text-muted col-6">\
  1322. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1323. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1324. </small>\
  1325. <small style="color:#FF0000; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
  1326. </p>\
  1327. </div>\
  1328. </div>\
  1329. </div>';
  1330. }
  1331. $('#sec05-course17').html(sec05course17);
  1332. $('#sec05-course17').slick({
  1333. slidesToShow: 4,
  1334. slidesToScroll: 1,
  1335. infinite: true,
  1336. arrows: true,
  1337. });
  1338. });
  1339. });
  1340. </script>
  1341. <!-- 變美課程16 -->
  1342. <script>
  1343. $(document).ready(function () {
  1344. $.ajax({
  1345. method: "POST",
  1346. url: "https://welife.asia:8002/get_courses",
  1347. data: '[16]',
  1348. dataType: "json",
  1349. })
  1350. .done(function (msg) {
  1351. var sec05course16 = '';
  1352. console.log(msg);
  1353. var res = msg.length;
  1354. console.log(res);
  1355. const limit = res;
  1356. for (var i = 0; i < limit; i++) {
  1357. sec05course16 += ' \
  1358. <div class="sec01-1 col-lg-3">\
  1359. <div class="card h-100">\
  1360. <a target="_blank" href="'+ msg[i].url + '">\
  1361. <img style="height:15vw; object-fit:cover;" src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1362. <div class="card-body px-1">\
  1363. <div class="card-title1 d-flex align-items-center">\
  1364. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1365. <h1 style="font-weight:700; font-size: 18px;" class="title-text">'+ msg[i].title + '</h1>\
  1366. </a>\
  1367. </div>\
  1368. <p style="word-break:break-all" class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
  1369. <p class="card-text row">\
  1370. <small class="text-muted col-6">\
  1371. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1372. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1373. </small>\
  1374. <small style="color:#FF0000; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
  1375. </p>\
  1376. </div>\
  1377. </div>\
  1378. </div>';
  1379. }
  1380. $('#sec05-course16').html(sec05course16);
  1381. $('#sec05-course16').slick({
  1382. slidesToShow: 3,
  1383. slidesToScroll: 1,
  1384. infinite: true,
  1385. arrows: true,
  1386. });
  1387. });
  1388. });
  1389. </script>
  1390. <!-- 手機板 -->
  1391. <!-- 個人成長m-18-->
  1392. <script>
  1393. $(document).ready(function () {
  1394. $.ajax({
  1395. method: "POST",
  1396. url: "https://welife.asia:8002/get_courses",
  1397. data: '[18]',
  1398. dataType: "json",
  1399. })
  1400. .done(function (msg) {
  1401. var sec05course18m = '';
  1402. console.log(msg);
  1403. var res = msg.length;
  1404. console.log(res);
  1405. const limit = res;
  1406. for (var i = 0; i < limit; i++) {
  1407. sec05course18m += ' \
  1408. <div class="sec05-course-m my-4">\
  1409. <div class="row px-0 mx-0">\
  1410. <div class="col-5">\
  1411. <img class="img-fluid" src="'+ msg[i].cover_img + '" alt="">\
  1412. </div>\
  1413. <div class="col-7 px-0">\
  1414. <div class="card-title1 d-flex align-items-center">\
  1415. <a class="course-src mb-2" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1416. <h1 style="font-weight:700; font-size: 18px;" class="title-text-m">'+ msg[i].title + '</h1>\
  1417. </a>\
  1418. </div>\
  1419. <p class="card-text row mx-0">\
  1420. <small class="text-muted col-6 px-0">\
  1421. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1422. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1423. </small>\
  1424. <small style="color:#FF0000; font-size:20px;" class="col-6 px-0">NT$'+ msg[i].price_discount + '</small>\
  1425. </p>\
  1426. </div>\
  1427. </div>\
  1428. </div>';
  1429. }
  1430. $('#sec05-course18m').html(sec05course18m);
  1431. $(".title-text-m").each(function () {
  1432. var len = $(this).text().length; //當前HTML物件text的長度
  1433. if (len > 22) {
  1434. var str = "";
  1435. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1436. $(this).html(str); //將替換的值賦值給當前物件
  1437. }
  1438. });
  1439. });
  1440. });
  1441. </script>
  1442. <!-- 健身舞蹈m-23-->
  1443. <script>
  1444. $(document).ready(function () {
  1445. $.ajax({
  1446. method: "POST",
  1447. url: "https://welife.asia:8002/get_courses",
  1448. data: '[23]',
  1449. dataType: "json",
  1450. })
  1451. .done(function (msg) {
  1452. var sec05course23m = '';
  1453. console.log(msg);
  1454. var res = msg.length;
  1455. console.log(res);
  1456. const limit = res;
  1457. for (var i = 0; i < limit; i++) {
  1458. sec05course23m += ' \
  1459. <div class="col-6 px-2 my-3">\
  1460. <div class="card h-100">\
  1461. <a target="_blank" href="'+ msg[i].url + '">\
  1462. <img src="'+ msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
  1463. <div class="card-body px-1">\
  1464. <div class="card-title1 d-flex align-items-center mb-3">\
  1465. <a class="course-src" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1466. <h1 style="font-weight:700; font-size: 18px;" class="title-text-m">'+ msg[i].title + '</h1>\
  1467. </a>\
  1468. </div>\
  1469. <p class="card-text row">\
  1470. <small class="text-muted col-6 px-1">\
  1471. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1472. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1473. </small>\
  1474. <small style="color:#FF0000;" class="price col-6 px-0">NT$'+ msg[i].price_discount + '</small>\
  1475. </p>\
  1476. </div>\
  1477. </div>\
  1478. </div>';
  1479. }
  1480. $('#sec05-course23m').html(sec05course23m);
  1481. $(".title-text-m").each(function () {
  1482. var len = $(this).text().length; //當前HTML物件text的長度
  1483. if (len > 22) {
  1484. var str = "";
  1485. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1486. $(this).html(str); //將替換的值賦值給當前物件
  1487. }
  1488. });
  1489. });
  1490. });
  1491. </script>
  1492. <!-- 管理營銷m-22-->
  1493. <script>
  1494. $(document).ready(function () {
  1495. $.ajax({
  1496. method: "POST",
  1497. url: "https://welife.asia:8002/get_courses",
  1498. data: '[25]',
  1499. dataType: "json",
  1500. })
  1501. .done(function (msg) {
  1502. var sec05course22m = '';
  1503. console.log(msg);
  1504. var res = msg.length;
  1505. console.log(res);
  1506. const limit = res;
  1507. for (var i = 0; i < limit; i++) {
  1508. sec05course22m += ' \
  1509. <div class="sec05-course-m my-4">\
  1510. <div class="row px-0 mx-0">\
  1511. <div class="col-5">\
  1512. <img class="img-fluid" src="'+ msg[i].cover_img + '" alt="">\
  1513. </div>\
  1514. <div class="col-7 px-0">\
  1515. <div class="card-title1 d-flex align-items-center">\
  1516. <a class="course-src mb-2" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1517. <h1 style="font-weight:700; font-size: 18px;" class="title-text-m">'+ msg[i].title + '</h1>\
  1518. </a>\
  1519. </div>\
  1520. <p class="card-text row mx-0">\
  1521. <small class="text-muted col-6 px-0">\
  1522. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1523. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1524. </small>\
  1525. <small style="color:#FF0000; font-size:20px;" class="col-6 px-0">NT$'+ msg[i].price_discount + '</small>\
  1526. </p>\
  1527. </div>\
  1528. </div>\
  1529. </div>';
  1530. }
  1531. $('#sec05-course22m').html(sec05course22m);
  1532. $(".title-text-m").each(function () {
  1533. var len = $(this).text().length; //當前HTML物件text的長度
  1534. if (len > 22) {
  1535. var str = "";
  1536. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1537. $(this).html(str); //將替換的值賦值給當前物件
  1538. }
  1539. });
  1540. });
  1541. });
  1542. </script>
  1543. <!-- 享受生活m-16-->
  1544. <script>
  1545. $(document).ready(function () {
  1546. $.ajax({
  1547. method: "POST",
  1548. url: "https://welife.asia:8002/get_courses",
  1549. data: '[15]',
  1550. dataType: "json",
  1551. })
  1552. .done(function (msg) {
  1553. var sec05course15m = '';
  1554. console.log(msg);
  1555. var res = msg.length;
  1556. console.log(res);
  1557. const limit = res;
  1558. for (var i = 0; i < limit; i++) {
  1559. sec05course15m += ' \
  1560. <div class="sec05-course-m my-4">\
  1561. <div class="row px-0 mx-0">\
  1562. <div class="col-5">\
  1563. <img class="img-fluid" src="'+ msg[i].cover_img + '" alt="">\
  1564. </div>\
  1565. <div class="col-7 px-0">\
  1566. <div class="card-title1 d-flex align-items-center">\
  1567. <a class="course-src mb-2" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1568. <h1 style="font-weight:700; font-size: 18px;" class="title-text-m">'+ msg[i].title + '</h1>\
  1569. </a>\
  1570. </div>\
  1571. <p class="card-text row mx-0">\
  1572. <small class="text-muted col-6 px-0">\
  1573. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1574. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1575. </small>\
  1576. <small style="color:#FF0000; font-size:20px;" class="price col-6 px-0">NT$'+ msg[i].price_discount + '</small>\
  1577. </p>\
  1578. </div>\
  1579. </div>\
  1580. </div>';
  1581. }
  1582. $('#sec05-course15m').html(sec05course15m);
  1583. $(".title-text-m").each(function () {
  1584. var len = $(this).text().length; //當前HTML物件text的長度
  1585. if (len > 22) {
  1586. var str = "";
  1587. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1588. $(this).html(str); //將替換的值賦值給當前物件
  1589. }
  1590. });
  1591. });
  1592. });
  1593. </script>
  1594. <!-- 斜槓理財m-17-->
  1595. <script>
  1596. $(document).ready(function () {
  1597. $.ajax({
  1598. method: "POST",
  1599. url: "https://welife.asia:8002/get_courses",
  1600. data: '[17]',
  1601. dataType: "json",
  1602. })
  1603. .done(function (msg) {
  1604. var sec05course17m = '';
  1605. console.log(msg);
  1606. var res = msg.length;
  1607. console.log(res);
  1608. const limit = res;
  1609. for (var i = 0; i < limit; i++) {
  1610. sec05course17m += ' \
  1611. <div class="sec05-course-m my-4">\
  1612. <div class="row px-0 mx-0">\
  1613. <div class="col-5">\
  1614. <img class="img-fluid" src="'+ msg[i].cover_img + '" alt="">\
  1615. </div>\
  1616. <div class="col-7 px-0">\
  1617. <div class="card-title1 d-flex align-items-center">\
  1618. <a class="course-src mb-2" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1619. <h1 style="font-weight:700; font-size: 18px;" class="title-text-m">'+ msg[i].title + '</h1>\
  1620. </a>\
  1621. </div>\
  1622. <p class="card-text row mx-0">\
  1623. <small class="text-muted col-6 px-0">\
  1624. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1625. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1626. </small>\
  1627. <small style="color:#FF0000; font-size:20px;" class="col-6 px-0">NT$'+ msg[i].price_discount + '</small>\
  1628. </p>\
  1629. </div>\
  1630. </div>\
  1631. </div>';
  1632. }
  1633. $('#sec05-course17m').html(sec05course17m);
  1634. $(".title-text-m").each(function () {
  1635. var len = $(this).text().length; //當前HTML物件text的長度
  1636. if (len > 22) {
  1637. var str = "";
  1638. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1639. $(this).html(str); //將替換的值賦值給當前物件
  1640. }
  1641. });
  1642. });
  1643. });
  1644. </script>
  1645. <!-- 變美課程m-16-->
  1646. <script>
  1647. $(document).ready(function () {
  1648. $.ajax({
  1649. method: "POST",
  1650. url: "https://welife.asia:8002/get_courses",
  1651. data: '[16]',
  1652. dataType: "json",
  1653. })
  1654. .done(function (msg) {
  1655. var sec05course16m = '';
  1656. console.log(msg);
  1657. var res = msg.length;
  1658. console.log(res);
  1659. const limit = res;
  1660. for (var i = 0; i < limit; i++) {
  1661. sec05course16m += ' \
  1662. <div class="sec05-course-m my-4">\
  1663. <div class="row px-0 mx-0">\
  1664. <div class="col-5">\
  1665. <img class="img-fluid" src="'+ msg[i].cover_img + '" alt="">\
  1666. </div>\
  1667. <div class="col-7 px-0">\
  1668. <div class="card-title1 d-flex align-items-center">\
  1669. <a class="course-src mb-2" data-info="'+ msg[i].id + '" target="_blank" href="'+ msg[i].url + '">\
  1670. <h1 style="font-weight:700; font-size: 18px;" class="title-text-m">'+ msg[i].title + '</h1>\
  1671. </a>\
  1672. </div>\
  1673. <p class="card-text row mx-0">\
  1674. <small class="text-muted col-6 px-0">\
  1675. <img class="mb-1 mx-1 d-inline" style="width: 25px; object-fit: cover; "\
  1676. src="./img/sec05/fire.png" alt=""><span>'+ msg[i].clicks + '人</span>\
  1677. </small>\
  1678. <small style="color:#FF0000; font-size:20px;" class="col-6 px-0">NT$'+ msg[i].price_discount + '</small>\
  1679. </p>\
  1680. </div>\
  1681. </div>\
  1682. </div>';
  1683. }
  1684. $('#sec05-course16m').html(sec05course16m);
  1685. $(".title-text-m").each(function () {
  1686. var len = $(this).text().length; //當前HTML物件text的長度
  1687. if (len > 22) {
  1688. var str = "";
  1689. str = $(this).text().substring(0, 22) + "..."; //使用字串擷取,獲取前30個字元,多餘的字元使用“......”代替
  1690. $(this).html(str); //將替換的值賦值給當前物件
  1691. }
  1692. });
  1693. });
  1694. });
  1695. </script>
  1696. <script>
  1697. (function () {
  1698. const second = 1000,
  1699. minute = second * 60,
  1700. hour = minute * 60,
  1701. day = hour * 24;
  1702. var nextHour = new Date(new Date().getTime() + 3 * 60 * 60 * 1000);
  1703. console.log(nextHour);
  1704. // let birthday = "Aug 31, 2021 23:59:00",
  1705. countDown = new Date(nextHour).getTime(),
  1706. x = setInterval(function () {
  1707. let now = new Date().getTime(),
  1708. distance = countDown - now;
  1709. // var a = (distance / (day));
  1710. var b = (distance % (day)) / (hour);
  1711. var c = (distance % (hour)) / (minute);
  1712. var d = (distance % (minute)) / (second);
  1713. var hour1 = Math.floor(b);
  1714. var result = hour1 < 10 ? '0' + hour1 : hour1;
  1715. var second1 = Math.floor(d);
  1716. var result2 = second1 < 10 ? '0' + second1 : second1;
  1717. var minute1 = Math.floor(c);
  1718. var result3 = minute1 < 10 ? '0' + minute1 : minute1;
  1719. // var day1 = Math.floor(a);
  1720. // var result4 = day1 < 10 ? '0' + day1 : day1;
  1721. // document.getElementById("days").innerText = result4,
  1722. document.getElementById("hours").innerText = result,
  1723. document.getElementById("minutes").innerText = result3,
  1724. document.getElementById("seconds").innerText = result2;
  1725. //do something later when date is reached
  1726. //seconds
  1727. }, 0)
  1728. }());
  1729. </script>
  1730. </body>
  1731. </html>