Home Explore Help
Sign In
choozmo
/
hhh-home-mb
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

210915 copy index to index1

yukyo0821 4 years ago
parent
8a501d0b08
commit
c831b50c11
3 changed files with 371 additions and 364 deletions
Unified View Show Diff Stats
  1. 25 29
      index1.html
  2. 345 334
      js/index1.js
  3. 1 1
      js/index2.js

+ 25 - 29
index1.html
View File 

@@ -24,6 +24,7 @@
 
     <meta property="og:type" content="website"/>
 
     <meta property="og:type" content="website"/>
 
     <meta property="og:locale" content="zh_TW">
 
     <meta property="og:locale" content="zh_TW">
 
     <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
 
     <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
 
+
 
     <link rel="icon" href="images/favicon.ico">
 
     <link rel="icon" href="images/favicon.ico">
 
     <link rel="stylesheet" href="css/reset.css">
 
     <link rel="stylesheet" href="css/reset.css">
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
 
@@ -31,29 +32,13 @@
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
 
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
 
         crossorigin="anonymous">
 
         crossorigin="anonymous">
 
-        
+
 
     <link rel="stylesheet" href="css/jquery-ui.css">
 
     <link rel="stylesheet" href="css/jquery-ui.css">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
 
     <link rel="stylesheet" type="text/css" href="css/slick.css" />
 
     <link rel="stylesheet" type="text/css" href="css/slick.css" />
 
     <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
 
     <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
 
 
 
-    <!-- bootstrap JS -->
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
-        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
-    
-
 
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
-    <script async defer src="js/index2.js"></script>
 
-    <script src="js/yo.js"></script>
 
-
 
-    <link rel="stylesheet" href="css/style.css" />
 
+    <link rel="stylesheet" href="sass/main.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
   <div style="overflow-x:hidden;" class="wholeBody">
 
   <div style="overflow-x:hidden;" class="wholeBody">
 
@@ -251,21 +236,21 @@
 
         <div class="row gx-2 gy-2 mb-2">
 
         <div class="row gx-2 gy-2 mb-2">
 
           <a href="https://hhh.com.tw/event170427/" class="col card p-2 text-center me-2">
 
           <a href="https://hhh.com.tw/event170427/" class="col card p-2 text-center me-2">
 
             <h5 class="card-title">老屋翻新<br>住宅改造</h5>
 
             <h5 class="card-title">老屋翻新<br>住宅改造</h5>
 
-            <div class="card__imgfr"><img src="images/renovation.png" alt=""></div>
 
+            <div class="card__imgfr"><img src="images/renovation.webp" alt=""></div>
 
           </a>
 
           </a>
 
           <a href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" class="col card p-2 text-center">
 
           <a href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" class="col card p-2 text-center">
 
             <h5 class="card-title">觀眾最愛<br>設計師</h5>
 
             <h5 class="card-title">觀眾最愛<br>設計師</h5>
 
-            <div class="card__imgfr"><img src="images/designerlink.png" alt=""></div>
 
+            <div class="card__imgfr"><img src="images/designerlink.webp" alt=""></div>
 
           </a>
 
           </a>
 
         </div>
 
         </div>
 
         <div class="row gx-2 gy-2">
 
         <div class="row gx-2 gy-2">
 
           <a href="https://event.hhh.com.tw/2021-Top-Brands/" class="col card p-2 text-center me-2">
 
           <a href="https://event.hhh.com.tw/2021-Top-Brands/" class="col card p-2 text-center me-2">
 
             <h5 class="card-title">消費者<br>愛用品牌</h5>
 
             <h5 class="card-title">消費者<br>愛用品牌</h5>
 
-            <div class="card__imgfr"><img src="images/brandlink.png" alt=""></div>
 
+            <div class="card__imgfr"><img src="images/brandlink.webp" alt=""></div>
 
           </a>
 
           </a>
 
           <a href="https://event.hhh.com.tw/topglory/" class="col card p-2 text-center">
 
           <a href="https://event.hhh.com.tw/topglory/" class="col card p-2 text-center">
 
             <h5 class="card-title">國際大賞<br>GLORY</h5>
 
             <h5 class="card-title">國際大賞<br>GLORY</h5>
 
-            <div class="card__imgfr"><img src="images/awardlink.png" alt=""></div>
 
+            <div class="card__imgfr"><img src="images/awardlink.webp" alt=""></div>
 
           </a>
 
           </a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -279,17 +264,18 @@
 
       </div>
 
       </div>
 
       <div class="container-fluid" style="padding:0;margin:0;">
 
       <div class="container-fluid" style="padding:0;margin:0;">
 
         <div class="sec-05__video mb-2" data-bs-toggle="modal" data-bs-target="#videoModal">
 
         <div class="sec-05__video mb-2" data-bs-toggle="modal" data-bs-target="#videoModal">
 
-          <img src="images/Play-Button.png" alt="" class="sec-05__video__play">
 
-          <img src="images/maxresdefault.jpeg" alt="" class="sec-05__video__img">
 
+          <img src="images/Play-Button.webp" alt="" class="sec-05__video__play">
 
+          <div class="sec-05__video__imgfr"></div>
 
         </div>
 
         </div>
 
-        <p class="px-2">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</p>
 
+        <p class="px-2 sec-05__video__txt">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</p>
 
       </div>
 
       </div>
 
     </section>
 
     </section>
 
     <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
 
     <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
 
       <div class="modal-dialog modal-dialog-centered">
 
       <div class="modal-dialog modal-dialog-centered">
 
         <div class="modal-content">
 
         <div class="modal-content">
 
           <div class="modal-body text-center">
 
           <div class="modal-body text-center">
 
-            <iframe width="340" height="230"></iframe>
 
+            <iframe width="345" height="190" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" 
+              id="widget2"></iframe>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -350,7 +336,7 @@
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </section>
 
     </section>
 
-    <section class="sec-08 pb-2">
 
+    <section class="sec-08">
 
       <div class="container-fluid" style="padding: 0;margin:0;">
 
       <div class="container-fluid" style="padding: 0;margin:0;">
 
         <div class="sec-08__slider mx-0">
 
         <div class="sec-08__slider mx-0">
 
           <!-- <div class="sec-08__slider-1 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open(`https://event.hhh.com.tw/2021-Most-Favorite-Designers/?utm_source=INDEX_BANNER&adid=15356`);"></div>
 
           <!-- <div class="sec-08__slider-1 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open(`https://event.hhh.com.tw/2021-Most-Favorite-Designers/?utm_source=INDEX_BANNER&adid=15356`);"></div>
 
@@ -437,7 +423,7 @@
 
         <img src="images/gotop.png" width="28" alt="">
 
         <img src="images/gotop.png" width="28" alt="">
 
       </div> -->
 
       </div> -->
 
       <div class="btn-gotop">
 
       <div class="btn-gotop">
 
-        <img src="images/gotop.png" width="28" alt="">
 
+        <img src="images/gotop.webp" width="28" alt="">
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
     <div style="margin-bottom:120px;"></div>
 
     <div style="margin-bottom:120px;"></div>
 
@@ -1181,7 +1167,17 @@
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
-
 
+    <!-- bootstrap JS -->
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
     
     
+    <script async defer src="js/index1.js"></script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 345 - 334
js/index1.js
View File 

@@ -1,316 +1,328 @@
 
 $(".sec-01__slider").slick({
 
 $(".sec-01__slider").slick({
 
-  dots: true,
 
-  autoplay: false,
 
-  arrows: false,
 
-});
 
+        dots: true,
 
+        autoplay: false,
 
+        arrows: false,
 
+    });
 
 
 
-let result;
 
-/* $.ajax({
 
-  method: "GET",
 
-  url: "/hhh-home-mb/json/data.json",
 
-  dataType: "json",
 
-}).done(function (msg) {
 
-  alert(msg);
 
-  result = [...msg];
 
-  console.log(result);
 
-  renderSec00(result);
 
-  renderSec02(result);
 
-  renderSec03(result);
 
-  renderSec06(result);
 
-  renderSec07(result);
 
-  renderSec08(result);
 
-  renderSec09(result);
 
-  renderSec10(result);
 
-  renderSec11(result);
 
-}); */
 
-axios.get('http://localhost:8000/genjson').then(({ data }) => {
 
-  //alert(data);
 
-  result = [...data];
 
-  console.log(result);
 
-  renderSec00(result);
 
-  renderSec02(result);
 
-  renderSec03(result);
 
-  renderSec06(result);
 
-  renderSec07(result);
 
-  renderSec08(result);
 
-  renderSec09(result);
 
-  renderSec10(result);
 
-  renderSec11(result);
 
-});
 
+    let result;
 
+/*       $.ajax({
 
+          method: "GET",
 
+          url: "../json/data.json",
 
+          dataType: "json",
 
+      }).done(function (msg) {
 
+          result = [...msg];
 
+          renderSec00(result);
 
+          renderSec02(result);
 
+          renderSec03(result);
 
+          renderSec06(result);
 
+          renderSec07(result);
 
+          renderSec08(result);
 
+          renderSec09(result);
 
+          renderSec10(result);
 
+          renderSec11(result);
 
+          renderVideo(result);
 
+      }); */
 
 
 
-function renderSec00(data) {
 
-  let temp = data[0]['data'];
 
-  //alert(temp.length);
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    console.log(temp[i]['imgUrl']);
 
-    str += `<div class="sec-00__slider-${i + 1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
 
-  }
 
-  $('.sec-00__slider').html(str);
 
-  $(".sec-00__slider").slick({
 
-    dots: false,
 
-    speed: 800,
 
-    autoplay: true,
 
-  });
 
-}
 
+      axios.get('https://m3.hhh.com.tw:18686/genjson').then(({ data }) => {
 
+        //alert(data);
 
+        result = [...data];
 
+        
+        //console.log(result);
 
+        renderSec00(result);
 
+        renderSec02(result);
 
+        renderSec03(result);
 
+        renderSec06(result);
 
+        renderSec07(result);
 
+        renderSec08(result);
 
+        renderSec09(result);
 
+        renderSec10(result);
 
+        renderSec11(result);
 
+        renderVideo(result);
 
+       
+      });
 
 
 
-function renderSec02(data) {
 
-  let temp = data[1]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    console.log(temp[i]['imgUrl']);
 
-    str += `<div class="sec-02__slider-${i + 1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
 
-  }
 
-  $('.sec-02__slider').html(str);
 
-  $(".sec-02__slider").slick({
 
-    dots: false,
 
-    autoplay: true,
 
-    arrows: true,
 
-    fade: true,
 
-    autoplaySpeed: 4000,
 
-  });
 
-}
 
+      function renderSec00(data) {
 
+          let temp = data[0]['data'];
 
+          renderBannerStr('sec-00__slider', temp);
 
+          $(".sec-00__slider").slick({
 
+            dots: false,
 
+            speed: 800,
 
+            autoplay: true,
 
+          });
 
+      }
 
+
 
+      function renderSec02(data) {
 
+          let temp = data[1]['data'];
 
+          renderBannerStr('sec-02__slider', temp);
 
+          let str = '';
 
+          $(".sec-02__slider").slick({
 
+              dots: false,
 
+              autoplay: true,
 
+              arrows: true,
 
+              fade: true,
 
+              autoplaySpeed: 4000,
 
+          });
 
+      }
 
 
 
-function renderSec03(data) {
 
-  let randomIdx = Math.floor(Math.random() * 3);
 
-  const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
 
-  const ranDiv = $('#pills-tabContent .tab-pane').eq(randomIdx);
 
-  ran.addClass('active');
 
-  ranDiv.addClass('active');
 
-  ranDiv.addClass('show');
 
-  let temp = data[2]['data'];
 
-  for (let i = 0; i < temp.length; i++) {
 
-    if (temp[i]["tab"] == '最夯設計') {
 
-      let str = '';
 
-      let sub = temp[i]["data"];
 
-      for (let j = 0; j < sub.length; j++) {
 
-        str += `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
 
+      function renderBannerStr(sec, data) {
 
+        let str = '';
 
+        for(let i = 0; i < data.length; i++){
 
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');"></div>`
 
+        }
 
+        console.log(str);
 
+        $(`.${sec}`).html(str);
 
+    }
 
+
 
+      function renderSec03(data) {
 
+        let randomIdx = Math.floor(Math.random()*3);
 
+        const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
 
+        const ranDiv = $('#pills-tabContent .tab-pane').eq(randomIdx);
 
+        ran.addClass('active');
 
+        ranDiv.addClass('active');
 
+        ranDiv.addClass('show');
 
+          let temp = data[2]['data'];
 
+          for(let i = 0; i < temp.length; i++){
 
+            if(temp[i]["tab"] == '最夯設計'){
 
+              let str = '';
 
+              let sub = temp[i]["data"];
 
+              for(let j = 0; j < sub.length; j++){
 
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
 
                   <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
 
                   <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
 
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
 
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
 
                 </div>`
 
                 </div>`
 
-      }
 
-      $('#pills-hot .tabpar').html(str);
 
-    }
 
-    if (temp[i]["tab"] == '影音實錄') {
 
-      let str = '';
 
-      let sub = temp[i]["data"];
 
-      for (let j = 0; j < sub.length; j++) {
 
-        str += `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
 
-                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.png"></div>
 
+              }
 
+              $('#pills-hot .tabpar').html(str);
 
+            }
 
+            if(temp[i]["tab"] == '影音實錄'){
 
+              let str = '';
 
+              let sub = temp[i]["data"];
 
+              for(let j = 0; j < sub.length; j++){
 
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
 
+                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.webp"></div>
 
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
 
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
 
                 </div>`
 
                 </div>`
 
-      }
 
-      $('#pills-video .tabpar').html(str);
 
-    }
 
-    if (temp[i]["tab"] == '專欄文章') {
 
-      let str = '';
 
-      let sub = temp[i]["data"];
 
-      for (let j = 0; j < sub.length; j++) {
 
-        str += `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
 
+              }
 
+              $('#pills-video .tabpar').html(str);
 
+            }
 
+            if(temp[i]["tab"] == '專欄文章'){
 
+              let str = '';
 
+              let sub = temp[i]["data"];
 
+              for(let j = 0; j < sub.length; j++){
 
+                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
 
                   <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
 
                   <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
 
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
 
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
 
                 </div>`
 
                 </div>`
 
+              }
 
+              $('#pills-blog .tabpar').html(str);
 
+            }
 
+          }
 
+          const cardText = document.querySelectorAll('.tabpar__card p');
 
+          cardText.forEach((item, i) => {
 
+            let len = item.textContent.length;
 
+            if(len > 20) {
 
+              let str = item.textContent.substring(0, 20) + '...';
 
+              item.textContent = str;
 
+            }
 
+          })
 
       }
 
       }
 
-      $('#pills-blog .tabpar').html(str);
 
-    }
 
-  }
 
-  const cardText = document.querySelectorAll('.tabpar__card p');
 
-  cardText.forEach((item, i) => {
 
-    let len = item.textContent.length;
 
-    if (len > 20) {
 
-      let str = item.textContent.substring(0, 20) + '...';
 
-      item.textContent = str;
 
-    }
 
-  })
 
-}
 
-function renderSec06(data) {
 
-  let temp = data[3]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    console.log(temp[i]['imgUrl']);
 
-    if (i === 0) {
 
-      str += `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
 
+      function renderSec06(data) {
 
+          let temp = data[3]['data'];
 
+          let str = '';
 
+          for(let i = 0; i < temp.length; i++){
 
+              if(i === 0) {
 
+                str+= `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
 
                   style="background-image: url('${temp[i]['imgUrl']}');">
 
                   style="background-image: url('${temp[i]['imgUrl']}');">
 
                 </div>`
 
                 </div>`
 
-    } else {
 
-      str += `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
 
+              } else {
 
+                str+= `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
 
                   style="background-image: url('${temp[i]['imgUrl']}');">
 
                   style="background-image: url('${temp[i]['imgUrl']}');">
 
                 </div>`
 
                 </div>`
 
-    }
 
-  }
 
-  $('.sec-06 .carousel-inner').html(str);
 
-
 
-}
 
-function renderSec07(data) {
 
-  let temp = data[4]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    console.log(temp[i]['imgUrl']);
 
-    str += `
 
-              <div class="sec-07__slider-${i + 1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
 
+              }
 
+          }
 
+          $('.sec-06 .carousel-inner').html(str);
 
+          
+      }
 
+      function renderSec07(data) {
 
+          let temp = data[4]['data'];
 
+          let str = '';
 
+          for(let i = 0; i < temp.length; i++){
 
+              str+= `
 
+              <div class="sec-07__slider-${i+1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
 
                 <div class="sec-07__imgfr mb-2"><img src="${temp[i]['imgUrl']}" alt=""></div>
 
                 <div class="sec-07__imgfr mb-2"><img src="${temp[i]['imgUrl']}" alt=""></div>
 
                 <p class="sec-07__cardtxt">${temp[i]['description']}</p>
 
                 <p class="sec-07__cardtxt">${temp[i]['description']}</p>
 
               </div>`
 
               </div>`
 
-  }
 
-  $('.sec-07__slider').html(str);
 
-  $(".sec-07__slider").slick({
 
-    arrows: false,
 
-    slidesToShow: 1,
 
-    centerMode: true,
 
-    infinite: false,
 
-    dots: true,
 
-    centerPadding: '12px'
 
-  });
 
-  const cardText = document.querySelectorAll('.sec-07__cardtxt');
 
-  cardText.forEach((item, i) => {
 
-    let len = item.textContent.length;
 
-    if (len > 20) {
 
-      let str = item.textContent.substring(0, 25) + '...';
 
-      item.textContent = str;
 
-    }
 
-  })
 
-}
 
-function renderSec08(data) {
 
-  let temp = data[5]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    str += `<div class="sec-08__slider-${i + 1} mx-1" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
 
-  }
 
-  $('.sec-08__slider').html(str);
 
-  $(".sec-08__slider").slick({
 
-    arrows: false,
 
-    slidesToShow: 1,
 
-    centerMode: true,
 
-    infinite: false,
 
-    dots: false,
 
-    centerPadding: '12px'
 
-  });
 
-}
 
-function renderSec09(data) {
 
-  let temp = data[6]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    str += `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
 
+          }
 
+          $('.sec-07__slider').html(str);
 
+          $(".sec-07__slider").slick({
 
+            arrows: false,
 
+            slidesToShow: 1,
 
+            centerMode: true,
 
+            infinite: false,
 
+            dots: true,
 
+            centerPadding: '12px'
 
+        });
 
+        const cardText = document.querySelectorAll('.sec-07__cardtxt');
 
+          cardText.forEach((item, i) => {
 
+            let len = item.textContent.length;
 
+            if(len > 20) {
 
+              let str = item.textContent.substring(0, 25) + '...';
 
+              item.textContent = str;
 
+            }
 
+          })
 
+      }
 
+      function renderSec08(data) {
 
+          let temp = data[5]['data'];
 
+          let str = '';
 
+          for(let i = 0; i < temp.length; i++){
 
+              str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
 
+          }
 
+          $('.sec-08__slider').html(str);
 
+          $(".sec-08__slider").slick({
 
+            autoplay: true,
 
+            autoplaySpeed: 8000,
 
+            arrows: false,
 
+            slidesToShow: 1,
 
+            centerMode: true,
 
+            infinite: true,
 
+            dots: false,
 
+            centerPadding: '12px'
 
+          });
 
+      }
 
+      function renderSec09(data) {
 
+          let temp = data[6]['data'];
 
+          let str = '';
 
+          for(let i = 0; i < temp.length; i++){
 
+              str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
 
                     <div class="sec-09__card__imgfr"><img src="${temp[i]['imgUrl']}" alt=""></div>
 
                     <div class="sec-09__card__imgfr"><img src="${temp[i]['imgUrl']}" alt=""></div>
 
                     <p>${temp[i]['description']}</p>
 
                     <p>${temp[i]['description']}</p>
 
                     </div>`
 
                     </div>`
 
-  }
 
-  $('.sec-09__cardgrp').html(str);
 
-}
 
-function renderSec10(data) {
 
-  let temp = data[7]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
 
-                    <div class="sec-10__slider-${i + 1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
 
-                    <p class="sec-10__cardtxt">${temp[i]['description']}</p>
 
-                    </div>`
 
-  }
 
-  $('.sec-10__slider').html(str);
 
-  $(".sec-10__slider").slick({
 
-    arrows: false,
 
-    slidesToShow: 1,
 
-    centerMode: true,
 
-    infinite: false,
 
-    dots: false,
 
-    centerPadding: '12px'
 
-  });
 
-}
 
-function renderSec11(data) {
 
-  let temp = data[8]['data'];
 
-  let str = '';
 
-  for (let i = 0; i < temp.length; i++) {
 
-    str += `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
 
-                    <div class="sec-11__slider-${i + 1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
 
-                    <p class="sec-11__cardtxt">${temp[i]['description']}</p>
 
-                    </div>`
 
-  }
 
-  $('.sec-11__slider').html(str);
 
-  $(".sec-11__slider").slick({
 
-    arrows: false,
 
-    slidesToShow: 1,
 
-    centerMode: true,
 
-    infinite: false,
 
-    dots: false,
 
-    centerPadding: '12px'
 
-  });
 
-}
 
-
 
-window.addEventListener('scroll', fixedOnScroll);
 
-
 
-const navbar = document.querySelector('.navbar-main');
 
-
 
-function fixedOnScroll() {
 
-  const sticky = 110;
 
-  if (window.pageYOffset >= sticky) {
 
-    navbar.classList.add('sticky');
 
-  } else {
 
-    navbar.classList.remove('sticky');
 
-  }
 
-}
 
-
 
-$('.navbar-toggler').click(function () {
 
-  $(".sec-menu").css('display', 'block');
 
-  $(".wholeBody").css('overflow-y', 'hidden');
 
-});
 
-
 
-$('.navbar-back').click(function () {
 
-  $(".sec-menu").css('display', 'none');
 
-  $(".wholeBody").css('overflow-y', 'scroll');
 
-});
 
-
 
-$('.subexpand').click(function () {
 
-  $(this).parent().next().toggleClass('show');
 
-  $(this).parent().toggleClass('show');
 
-});
 
-
 
-$('.navbar-search').click(function () {
 
-  $(".sec-search").css('display', 'block');
 
-  $(".wholeBody").css('overflow-y', 'hidden');
 
-})
 
-
 
-$('.navbar-backs').click(function () {
 
-  $(".sec-search").css('display', 'none');
 
-  $(".wholeBody").css('overflow-y', 'scroll');
 
-});
 
-
 
-$('.navbar-back-fav').click(function () {
 
-  $(".sec-favor").css('display', 'none');
 
-})
 
+          }
 
+          $('.sec-09__cardgrp').html(str);
 
+          $(".sec-09__cardgrp").slick({
 
+            arrows: false,
 
+            slidesToShow: 2,
 
+            slidesToScroll: 1,
 
+            infinite: true,
 
+            dots: false,
 
+            centerPadding: '10px'
 
+          });
 
+      }
 
+      function renderSec10(data) {
 
+          let temp = data[7]['data'];
 
+          renderRecStr('sec-10', temp);
 
+      }
 
+      function renderSec11(data) {
 
+          let temp = data[8]['data'];
 
+          renderRecStr('sec-11', temp);
 
+      }
 
 
 
-$('#videoModal').on('shown.bs.modal', function () {
 
-  $('#videoModal iframe').attr('src', 'https://www.youtube.com/embed/G7baBXAhC_I?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1');
 
-})
 
-$('#videoModal').on('hidden.bs.modal', function () {
 
-  $('#videoModal iframe').removeAttr('src');
 
-});
 
+      function renderRecStr(sec, data) {
 
+        let str = '';
 
+          for(let i = 0; i < data.length; i++){
 
+            if(data[i].video == 'true') {
 
+              str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
 
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.webp"></div>
 
+                    <p class="${sec}__cardtxt">${data[i]['description']}</p>
 
+                    </div>`;
 
+            } else {
 
+              str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
 
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"></div>
 
+                    <p class="${sec}__cardtxt">${data[i]['description']}</p>
 
+                    </div>`;
 
+            }
 
+          }
 
+          $(`.${sec}__slider`).html(str);
 
+          $(`.${sec}__slider`).slick({
 
+            arrows: false,
 
+            slidesToShow: 1,
 
+            centerMode: true,
 
+            infinite: false,
 
+            dots: false,
 
+            centerPadding: '12px'
 
+          });
 
+      }
 
+      function renderVideo(data) {
 
+        let temp = data[9];
 
+        $('.sec-05__video__txt').text(temp['title']);
 
+        $('.sec-05__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
 
+        $('#videoModal').on('shown.bs.modal', function () {
 
+            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
 
+        });
 
+        $('#videoModal').on('hidden.bs.modal', function () {
 
+          $('#videoModal iframe').removeAttr('src');
 
+        });
 
+      }
 
+    
+    window.addEventListener('scroll', fixedOnScroll);
 
+    
+    const navbar = document.querySelector('.navbar-main');
 
+    
+    function fixedOnScroll() {
 
+        const sticky = 110;
 
+        if(window.pageYOffset >= sticky){
 
+            navbar.classList.add('sticky');
 
+        } else {
 
+            navbar.classList.remove('sticky');
 
+        }
 
+    }
 
+    
+    $('.navbar-toggler').click(function(){
 
+        $(".sec-menu").css('display', 'block');
 
+        $(".wholeBody").css('overflow-y', 'hidden');
 
+        $('.sec-menu-block').addClass('slidein');
 
+        $('.sec-menu-block').removeClass('slideout');
 
+    });
 
+    
+    $('.navbar-back').click(function(){
 
+        $(".sec-menu").css('display', 'none');
 
+        $(".wholeBody").css('overflow-y', 'scroll');
 
+        $('.sec-menu-block').removeClass('slidein');
 
+        $('.sec-menu-block').addClass('slideout');
 
+    });
 
+    
+    $('.subexpand').click(function(){
 
+        $(this).parent().next().toggleClass('show');
 
+        $(this).parent().toggleClass('show');
 
+    });
 
+    
+    $('.navbar-search').click(function(){
 
+        $(".sec-search").css('display', 'block');
 
+        $(".wholeBody").css('overflow-y', 'hidden');
 
+    })
 
+    
+    $('.navbar-backs').click(function(){
 
+        $(".sec-search").css('display', 'none');
 
+        $(".wholeBody").css('overflow-y', 'scroll');
 
+    });
 
 
 
-$('.btn-gotop').click(function () {
 
-  $('html, body').animate({
 
-    scrollTop: 0
 
-  }, 500)
 
-});
 
+    $('.navbar-back-fav').click(function(){
 
+      $(".sec-favor").css('display', 'none');
 
+    })
 
 
 
-$(window).scroll(function () {
 
-  if ($(this).scrollTop() > 500) {
 
-    $('.fixed-btn').fadeIn(222);
 
-  } else {
 
-    $('.fixed-btn').stop().fadeOut(222);
 
-  }
 
-}).scroll();
 
+      $('.btn-gotop').click(function () {
 
+        $('html, body').animate({
 
+            scrollTop: 0
 
+        }, 500)
 
+    });
 
 
 
+    $(window).scroll(function() {
 
+		if ( $(this).scrollTop() > 500 ){
 
+		    $('.fixed-btn').fadeIn(222);
 
+		} else {
 
+			$('.fixed-btn').stop().fadeOut(222);
 
+		}
 
+    }).scroll();
 
+    
 const searchBtn = document.querySelector('.searchBtn');
 
 const searchBtn = document.querySelector('.searchBtn');
 
 const searchBar = document.querySelector('.searchBar');
 
 const searchBar = document.querySelector('.searchBar');
 
 const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
 
 const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
 
 searchBtn.addEventListener('click', search);
 
 searchBtn.addEventListener('click', search);
 
 searchBar.addEventListener('keyup', pressSearch);
 
 searchBar.addEventListener('keyup', pressSearch);
 
 function search() {
 
 function search() {
 
-  console.log(searchBar.value);
 
-  if (searchBar.value == '') {
 
+  if(searchBar.value == '') {
 
     window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
 
     window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
 
   } else {
 
   } else {
 
     window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
 
     window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
 
-    console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -322,72 +334,71 @@ function pressSearch(e) {
 
 }
 
 }
 
 
 
 searchHotLink.forEach((item, i) => {
 
 searchHotLink.forEach((item, i) => {
 
-  console.log(item.textContent);
 
-  item.addEventListener('click', function () {
 
+  item.addEventListener('click', function() {
 
     window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
 
     window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
 
   })
 
   })
 
 })
 
 })
 
 
 
-//jQuery time
 
+    //jQuery time
 
 var current_fs, next_fs, previous_fs; //fieldsets
 
 var current_fs, next_fs, previous_fs; //fieldsets
 
 var left, opacity, scale; //fieldset properties which we will animate
 
 var left, opacity, scale; //fieldset properties which we will animate
 
 var animating; //flag to prevent quick multi-click glitches
 
 var animating; //flag to prevent quick multi-click glitches
 
 
 
-$(".next").click(function () {
 
-  if (animating) return false;
 
-  animating = true;
 
-
 
-  current_fs = $(this).parent().parent();
 
-  next_fs = $(this).parent().parent().next();
 
-
 
-  //activate next step on progressbar using the index of next_fs
 
-  $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
 
-
 
-  //show the next fieldset
 
-  next_fs.animate({ opacity: 1 }, {
 
-    step: function (now, mx) {
 
-      //as the opacity of current_fs reduces to 0 - stored in "now"
 
-      //1. scale current_fs down to 80%
 
-      scale = 0 + (1 + now) * .5;
 
-      //2. bring next_fs from the right(50%)
 
-      left = (now * 50) + "%";
 
-      //3. increase opacity of next_fs to 1 as it moves in
 
-      opacity = 0 + now;
 
-      next_fs.css({
 
-        'transform': 'scale(' + scale + ')',
 
+$(".next").click(function(){
 
+	 if(animating) return false;
 
+	 animating = true;
 
+	
+	current_fs = $(this).parent().parent();
 
+	next_fs = $(this).parent().parent().next();
 
+	
+	//activate next step on progressbar using the index of next_fs
 
+	$(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
 
+	
+	//show the next fieldset
 
+	next_fs.animate({opacity: 1}, {
 
+		step: function(now, mx) {
 
+			//as the opacity of current_fs reduces to 0 - stored in "now"
 
+			//1. scale current_fs down to 80%
 
+			scale = 0 + (1 + now) * .5 ;
 
+			//2. bring next_fs from the right(50%)
 
+			left = (now * 50)+"%";
 
+			//3. increase opacity of next_fs to 1 as it moves in
 
+			opacity = 0 + now;
 
+			next_fs.css({
 
+        'transform': 'scale('+scale+')',
 
       });
 
       });
 
-      next_fs.css({ 'opacity': opacity });
 
-    },
 
-    duration: 400,
 
-    complete: function () {
 
-      next_fs.show();
 
-      animating = false;
 
-    },
 
-    //this comes from the custom easing plugin
 
-    easing: 'easeInOutBack'
 
-  });
 
-  //hide the current fieldset with style
 
-  current_fs.animate({ opacity: 0 }, {
 
-    step: function (now, mx) {
 
-      //as the opacity of current_fs reduces to 0 - stored in "now"
 
-      //1. scale current_fs down to 80%
 
-      scale = 1 - (1 - now) * 0.2;
 
-      //2. bring next_fs from the right(50%)
 
-      left = (now * 50) + "%";
 
-      //3. increase opacity of next_fs to 1 as it moves in
 
-      opacity = 1 - now;
 
-      current_fs.css({
 
-        'transform': 'scale(' + scale + ')',
 
+			next_fs.css({'opacity': opacity});
 
+		}, 
+		duration: 400, 
+		complete: function(){
 
+			next_fs.show();
 
+			animating = false;
 
+		}, 
+		//this comes from the custom easing plugin
 
+		easing: 'easeInOutBack'
 
+  }); 
+	//hide the current fieldset with style
 
+	 current_fs.animate({opacity: 0}, {
 
+		step: function(now, mx) {
 
+			//as the opacity of current_fs reduces to 0 - stored in "now"
 
+			//1. scale current_fs down to 80%
 
+			scale = 1 - (1 - now) * 0.2;
 
+			//2. bring next_fs from the right(50%)
 
+			left = (now * 50)+"%";
 
+			//3. increase opacity of next_fs to 1 as it moves in
 
+			opacity = 1 - now;
 
+			current_fs.css({
 
+        'transform': 'scale('+scale+')',
 
       });
 
       });
 
-      next_fs.css({ 'opacity': opacity });
 
-    },
 
-    duration: 400,
 
-    complete: function () {
 
-      current_fs.hide();
 
-      animating = false;
 
-    },
 
-    //this comes from the custom easing plugin
 
-    easing: 'easeInOutBack'
 
-  });
 
+			next_fs.css({'opacity': opacity});
 
+		}, 
+		duration: 400, 
+		complete: function(){
 
+			current_fs.hide();
 
+			animating = false;
 
+		}, 
+		//this comes from the custom easing plugin
 
+		easing: 'easeInOutBack'
 
+  }); 
 });
 
 });
 
-
 
+

+ 1 - 1
js/index2.js
View File 

@@ -23,7 +23,7 @@ let result;
 
   renderSec11(result);
 
   renderSec11(result);
 
 }); */
 
 }); */
 
 axios.get('https://m3.hhh.com.tw:18686/genjson').then(({ data }) => {
 
 axios.get('https://m3.hhh.com.tw:18686/genjson').then(({ data }) => {
 
-  //alert(data);
 
+  alert(data);
 
   result = [...data];
 
   result = [...data];
 
   
   
   console.log(result);
 
   console.log(result);