update match

css/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 body {
   font-family: 'Helvetica Neue';
 }
@@ -580,7 +581,7 @@ body {
 
 .sec-02__slider .slide-item {
   width: 100%;
-  height: 74vh;
+  height: 500px;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
@@ -1671,20 +1672,57 @@ body {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .fixed-btn .btn-match {
-  height: 100px;
+  height: 57px;
   padding: .2rem;
-  background-color: #EE7800;
-  color: #fff;
+  background-color: white;
   font-size: 1em;
   word-spacing: 5px;
-  width: 53px;
+  width: 57px;
   text-align: center;
+  position: relative;
+}
+
+.fixed-btn .btn-match::after {
+  content: "快速媒合設計師";
+  background-color: #EE7800;
+  color: white;
+  width: 180%;
+  right: -5px;
+  top: -15px;
+  position: absolute;
+  font-size: .8rem;
+  padding: 1.5px 3px;
+  opacity: 0;
+  -webkit-transition: all .4s;
+  transition: all .4s;
+}
+
+.fixed-btn .btn-match__back {
+  width: 35px;
+  height: 35px;
+  background-image: url("../images/match_icon_uncover.png");
+  background-position: center;
+  background-size: contain;
+  -webkit-transition: all .4s;
+  transition: all .4s;
+}
+
+.fixed-btn .btn-match:hover .btn-match__back {
+  background-image: url("../images/match_icon.png");
+}
+
+.fixed-btn .btn-match:hover::after {
+  opacity: 1;
+  top: -25px;
 }
 
 #matchModal .modal-content {
@@ -1726,7 +1764,7 @@ body {
 }
 
 .sec-match__imgfr {
-  width: 90%;
+  width: 100%;
   height: 14rem;
   background-position: center;
   background-size: cover;
@@ -2094,4 +2132,12 @@ body {
 .btn-call:hover {
   color: #EA068C;
 }
+
+.small {
+  font-size: .7rem;
+}
+
+.container_match label, .container_match2 label {
+  margin-top: .4rem;
+}
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -64,7 +64,6 @@ body {
             object-fit: contain;
             height: 300px;
             cursor: pointer;
-            
         }
     }
     .slick-prev:before, .slick-next:before {
@@ -496,7 +495,7 @@ body {
         height: 100%;
         .slide-item {
             width: 100%;
-            height: 74vh;
+            height: 500px;
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
@@ -1352,19 +1351,48 @@ body {
         background-color: rgba(255, 255, 255, 0.897);
         display: flex;
         align-items: center;
+        justify-content: center;
         box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
         -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
         -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
     }
     .btn-match {
-        height: 100px;
+        height: 57px;
         padding: .2rem;
-        background-color: #EE7800;
-        color: #fff;
+        background-color: white;
         font-size: 1em;
         word-spacing: 5px;
-        width: 53px;
+        width: 57px;
         text-align: center;
+        position: relative;
+        &::after {
+            content: "快速媒合設計師";
+            background-color: #EE7800;
+            color: white;
+            width: 180%;
+            right: -5px;
+            top: -15px;
+            position: absolute;
+            font-size: .8rem;
+            padding: 1.5px 3px;
+            opacity: 0;
+            transition: all .4s;
+        }
+        &__back {
+            width: 35px;
+            height: 35px;
+            background-image: url('../images/match_icon_uncover.png');
+            background-position: center;
+            background-size: contain;
+            transition: all .4s;
+        }
+        &:hover .btn-match__back {
+            background-image: url('../images/match_icon.png');
+        }
+        &:hover::after {
+            opacity: 1;
+            top: -25px;
+        }
     }  
 }
 
@@ -1404,7 +1432,7 @@ body {
         color: #707070;
     }
     &__imgfr {
-        width: 90%;
+        width: 100%;
         height: 14rem;
         // background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
         background-position: center;
@@ -1721,4 +1749,14 @@ body {
     &:hover {
         color: #EA068C;
     }
+}
+ 
+.small {
+    font-size: .7rem;
+}
+
+.container_match, .container_match2 {
+    label {
+        margin-top: .4rem;
+    }
 }

index.html

@@ -1289,7 +1289,8 @@
               <img src="images/gotop.png" width="28" alt="">
             </div> -->
             <div class="btn-match mb-2" data-bs-toggle="modal" data-bs-target="#matchModal">
-              <span class="">快速媒合設計師！</span>
+              <!-- <img data-src="images/match_icon_uncover.png" width="35" alt="" class="lazyload"> -->
+              <div class="btn-match__back"></div>
             </div> 
             <div class="btn-gotop">
               <img data-src="images/gotop.webp" width="28" alt="" class="lazyload">
@@ -1322,15 +1323,15 @@
                           <span>< 上一步</span>
                         </div>
                         <h4 class="sec- text-center">快速媒合設計師</h4>
-                        <h6 class="sec- text-center">請填寫您的裝修資訊</h6>
+                        <h6 class="sec- text-center mb-5">請填寫您的裝修資訊</h6>
                         <!-- 媒合表單一 -->
                         <div class="container container_match">
-                          <div class="row">
+                          <div class="row ">
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="area">房屋地區</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <select name="area" id="area" class="form-select">
                                 <option value="" disabled selected>請選擇房屋地區</option>
                                 <option class="option" value="基隆市">基隆市</option>
@@ -1358,10 +1359,10 @@
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="type">房屋類型</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <select name="type" id="type" class="form-select">
                                 <option value="" disabled selected>請選擇房屋類型</option>
                                 <option class="option" value="預售屋">預售屋</option>
@@ -1374,10 +1375,10 @@
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="square">房屋坪數</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <select name="square" id="square" class="form-select">
                                 <option value="" disabled selected>請選擇房屋坪數</option>
                                 <option class="option" value="10坪以下">10坪以下</option>
@@ -1391,10 +1392,10 @@
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="pattern">房屋格局</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <select name="pattern" id="pattern" class="form-select">
                                 <option value="" disabled selected>請選擇房屋格局</option>
                                 <option class="option" value="一房">一房</option>
@@ -1409,10 +1410,10 @@
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="style">喜愛風格</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <select name="style" id="style" class="form-select">
                                 <option value="" disabled selected>請選擇喜愛風格</option>
                                 <option class="option" value="現代風">現代風</option>
@@ -1433,7 +1434,7 @@
                             </div>
                             <div class="col-1"></div>
                           </div>
-                          <div class="row">
+                          <div class="row mt-5">
                             <button class="match__next mx-auto d-inline-block col-6">下一步</button>
                           </div>
                         </div>
@@ -1441,28 +1442,28 @@
                         <div class="container container_match2">
                           <div class="row">
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="name">姓名</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <input type="text" name="name" id="name" class="form-control" required>
                               <div class="text-danger text-end small" id="name-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="phone">電話</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <input type="text" name="phone" id="phone" class="form-control" required>
                               <div class="text-danger text-end small" id="phone-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="sex">性別</label>
                             </div>
-                            <div class="col-7" style="padding : 2rem 0;">
+                            <div class="col-7 p-2">
                               <select name="sex" id="sex" class="form-select">
                                 <option value="" disabled selected>請選擇性別</option>
                                 <option value="男">男</option>
@@ -1472,44 +1473,44 @@
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
-                            <div class="col-3" style="padding : 2rem 0;">
+                            <div class="col-3 p-2">
                               <label for="pattern">方便聯絡時間</label>
                             </div>
-                            <div class="col-7 d-flex flex-column align-items-center text-start" style="padding : 2rem 0;">
-                              <div style="width: 60%;" class="form-check">
-                                <input type="checkbox" value="隨時皆可" name="time" id="2a" checked class="form-check-input"/>
-                                <label for="2a">
-                                  <p>隨時皆可</p>
-                                </label>
-                              </div>
-                              <div style="width: 60%;" class="form-check">
+                            <div class="col-7 d-flex flex-column align-items-center text-start p-2">
+                              <div style="width: 60%;" class="form-check check-click">
                                 <input type="checkbox" value="上午9點至12點" name="time" id="2b" class="form-check-input"/>
-                                <label  for="2b">
+                                <label  for="2b" class="mt-0">
                                   <p>上午9點至12點</p>
                                 </label>
                               </div>
-                              <div style="width: 60%;" class="form-check">
+                              <div style="width: 60%;" class="form-check check-click">
                                 <input type="checkbox" value="中午12點至1點" name="time" id="2c" class="form-check-input"/>
-                                <label  for="2c">
+                                <label  for="2c" class="mt-0">
                                   <p>中午12點至1點</p>
                                 </label>
                               </div>
-                              <div style="width: 60%;" class="form-check">
-                                <input type="checkbox" value="下午1點至6點" name="time" id="2a" class="form-check-input"/>
-                                <label  for="2a">
+                              <div style="width: 60%;" class="form-check check-click">
+                                <input type="checkbox" value="下午1點至6點" name="time" id="2d" class="form-check-input"/>
+                                <label  for="2d" class="mt-0">
                                   <p>下午1點至6點</p>
                                 </label>
                               </div>
-                              <div style="width: 60%;" class="form-check">
-                                <input type="checkbox" value="晚上6點至9點" name="time" id="2b" class="form-check-input" />
-                                <label  for="2b">
+                              <div style="width: 60%;" class="form-check check-click">
+                                <input type="checkbox" value="晚上6點至9點" name="time" id="2e" class="form-check-input" />
+                                <label  for="2e" class="mt-0">
                                   <p>晚上6點至9點</p>
                                 </label>
                               </div>
+                              <div style="width: 60%;" class="form-check check-click">
+                                <input type="checkbox" value="隨時皆可" name="time" id="2a" checked class="form-check-input"/>
+                                <label for="2a" class="mt-0">
+                                  <p>隨時皆可</p>
+                                </label>
+                              </div>
                             </div>
                             <div class="col-1"></div>
                           </div>
-                          <div class="row mb-3">
+                          <div class="row mb-3 mt-5">
                             <button class="match__next2 mx-auto d-inline-block col-6">送出</button>
                           </div>
                           <div class="row mb-3">

index_match.html

@@ -32,10 +32,10 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
         crossorigin="anonymous">
-        
-      <!-- <link rel="stylesheet" href="css/jquery-ui.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" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+    <!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
+    <link rel="stylesheet" type="text/css" href="css/slick.css" />
+    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
 
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <link rel="stylesheet" href="css/style.css">
@@ -1517,6 +1517,7 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
     <script async defer src="js/index_match.js"></script>
     <script src="js/lazy-load.js" async></script>
 </body>

js/index.js

@@ -104,7 +104,6 @@ function detectBrowser(agent){
         for(let i = 0; i < data.length; i++){
            str += '<div class="sec-00__bullet"></div>'     
         }
-        console.log('bullet');
         $('.sec-00__bulletList').html(str);
     }
 
@@ -823,3 +822,27 @@ $.ajax({
       }); 
     });
 
+$('.check-click').click(function(e) {
+    if($('#2b').is(':checked')) {
+        $('#2a').prop('checked', false);
+    }
+    if($('#2c').is(':checked')) {
+        $('#2a').prop('checked', false);
+    }
+    if($('#2d').is(':checked')) {
+        $('#2a').prop('checked', false);
+    }
+    if($('#2e').is(':checked')) {
+        $('#2a').prop('checked', false);
+    }
+    console.log(e.target.id);
+    if(e.target.id === '2a') {
+        $('#2a').prop('checked', true);
+        $('#2b').prop('checked', false);
+        $('#2c').prop('checked', false);
+        $('#2d').prop('checked', false);
+        $('#2e').prop('checked', false);
+    }
+})
+
+

js/index_match.js

@@ -51,7 +51,7 @@ function renderMatch(matchData){
                     </div>
                     </div>
                     <div class="col">
-                    <div style="width: 190px;" class="text-start mx-auto">
+                    <div style="width: 100%;" class="text-start mx-auto">
                         <p>${matchData[i].Name} 設計師</p>
                         <p class="mb-2">${matchData[i].CompanyName}</p>
                         <p>擅長風格 ${matchData[i].CompanyName}</p>
@@ -69,8 +69,17 @@ function renderMatch(matchData){
     }
 
     $('.container__match').html(str);
+    
 }
   
+$(document).on("click", ".btn-match", function (event) {
+    Swal.fire({
+        icon: 'success',
+        text: '我們已收到您的訊息，將有幸福經紀人與您聯繫',
+        confirmButtonText: '關閉',
+    })
+});
+
 
 function detectDirection () {
     let height = (window.screen.width * 5) / 12;

json/realtime.json

@@ -116,13 +116,6 @@
                 "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1633429327.webp",
                 "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16082_1633429322.webp"
             },
-            {
-                "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633686437.jpg",
-                "link": "https://www.rinnai.com.tw/BrandNewDetail/36",
-                "DimgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633683454.jpg",
-                "webp": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633686444.webp",
-                "Dwebp": "https://images.hhh.com.tw/uploads/_had/adlogo_16164_1633683463.webp"
-            },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_had/adlogo_16176_1634804710.jpg",
                 "link": "https://event.hhh.com.tw/topglory/designer_692.html",