電腦版頁面調整

desktop11/goto.js

@@ -16,14 +16,16 @@ $(".text-1").addClass("contant-toggle");
 
 $(".content1-right").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
   console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
-  var nextSlide;
-  if (nextSlide=1) {
+  if (nextSlide == 1) {
+    $(".text-1").removeClass("contant-toggle");
+    $(".text-2").addClass("contant-toggle");
+    $(".text-3").removeClass("contant-toggle");
+  } else if (nextSlide == 2) {
+    $(".text-2").removeClass("contant-toggle");
     $(".text-1").removeClass("contant-toggle");
-    $(".text-2").toggleClass("contant-toggle");
-  }else if (nextSlide=2) {
     $(".text-3").addClass("contant-toggle");
 
-  }else if(nextSlide=0){
+  } else if (nextSlide == 0) {
     $(".text-2").removeClass("contant-toggle");
     $(".text-1").addClass("contant-toggle");
     $(".text-3").removeClass("contant-toggle");
@@ -32,7 +34,33 @@ $(".content1-right").on('beforeChange', function (event, slick, currentSlide, ne
 });
 
 
+$("#contact-form").submit(function (e) {
+  var param_string = $('#contact-form').serialize();
+  alert('param_string = ' + param_string);
+  $.ajax({
+    type: 'GET',
+    url: 'http://172.104.93.163/deco_request_detail',
+    data: param_string,
+    dataType: 'json',
+    success: function (data, textStatus, jqXHR) {
+
+      alert("送出成功");
+    },
+    beforeSend: function () {
+      alert("beforeSend");
+    },
+    complete: function () {
+      alert("complete");
+    },
+
+    error: function (jqXHR, textStatus, errorThrown) {
+      alert("送出失敗");
 
+    }
+  });
+
+  return false;
+});
 
 
 

desktop11/index.html

@@ -32,10 +32,12 @@
                 </div>
                 <hr class="hr  bg-white" style="opacity:1">
                 <div id="text">
-                    <div class="banner-slider">
+                    <div class="banner-slider d-flex align-items-center justify-content-center">
                         <div class="banner1">
-                            <h1>北歐風</h1>
-                            <button i class="btn-main">預約免費裝修諮詢</button>
+                            <div style="padding-top:250px;">
+                                <h1> 北歐風</h1>
+                                <button class="btn-main">預約免費裝修諮詢</button>
+                            </div>
                         </div>
                         <div class="banner2">
                             <h1>次代風</h1>
@@ -67,7 +69,7 @@
                 <hr class="hr2 bg-dark " style="margin: 0;opacity:1">
                 <div class="left">
                     <h2 class="title1">o2</h2>
-                    <div  class="text2">
+                    <div class="text2">
                         <div class="text-2">擔心遇到不良裝修公司</div>
                         <div class="text-2">容易產生裝修糾紛?</div>
                     </div>
@@ -75,7 +77,7 @@
                 <hr class="hr2 bg-dark " style="  margin: 0 ; opacity:1">
                 <div class="left">
                     <h2 class="title1">o3</h2>
-                    <div   class="text3">
+                    <div class="text3">
                         <div class="text-3">不了解工程預算行情</div>
                         <div class="text-3">害怕被騙嗎?</div>
                     </div>
@@ -220,101 +222,101 @@
             </div>
 
             <div class="container-fluid" style="padding:0">
-                <div id="contact-form">
+                <form id="contact-form">
                     <div id="form-left">
-                        <select name="location" id="location">
+                        <select name="location" id="location" required  >
                             <option value="地區" disabled selected="selected">地區</option>
-                            <option class="option" value="type">基隆市</option>
-                            <option class="option" value="type">台北市</option>
-                            <option class="option" value="type">新北市</option>
-                            <option class="option" value="type">桃園市</option>
-                            <option class="option" value="type">新竹縣</option>
-                            <option class="option" value="type">新竹市</option>
-                            <option class="option" value="type">苗栗縣</option>
-                            <option class="option" value="type">台中市</option>
-                            <option class="option" value="type">彰化縣</option>
-                            <option class="option" value="type">雲林縣</option>
-                            <option class="option" value="type">嘉義縣</option>
-                            <option class="option" value="type">嘉義市</option>
-                            <option class="option" value="type">台南市</option>
-                            <option class="option" value="type">高雄市</option>
-                            <option class="option" value="type">屏東縣</option>
-                            <option class="option" value="type">宜蘭縣</option>
-                            <option class="option" value="type">花蓮縣</option>
-                            <option class="option" value="type">台東縣</option>
-                            <option class="option" value="type">澎湖縣</option>
+                            <option class="option">基隆市</option>
+                            <option class="option">台北市</option>
+                            <option class="option">新北市</option>
+                            <option class="option">桃園市</option>
+                            <option class="option">新竹縣</option>
+                            <option class="option">新竹市</option>
+                            <option class="option">苗栗縣</option>
+                            <option class="option">台中市</option>
+                            <option class="option">彰化縣</option>
+                            <option class="option">雲林縣</option>
+                            <option class="option">嘉義縣</option>
+                            <option class="option">嘉義市</option>
+                            <option class="option">台南市</option>
+                            <option class="option">高雄市</option>
+                            <option class="option">屏東縣</option>
+                            <option class="option">宜蘭縣</option>
+                            <option class="option">花蓮縣</option>
+                            <option class="option">台東縣</option>
+                            <option class="option">澎湖縣</option>
                         </select>
-                        <select name="type" id="type">
+                        <select name="type" id="type" required >
                             <option value="房屋類型" disabled selected="selected">房屋類型</option>
-                            <option class="option" value="type">預售屋</option>
-                            <option class="option" value="type">中古屋</option>
-                            <option class="option" value="type">新成屋</option>
-                            <option class="option" value="type">毛胚屋</option>
-                            <option class="option" value="type">自地自建</option>
+                            <option class="option">預售屋</option>
+                            <option class="option">中古屋</option>
+                            <option class="option">新成屋</option>
+                            <option class="option">毛胚屋</option>
+                            <option class="option">自地自建</option>
                         </select>
-                        <select name="modal" id="modal">
+                        <select name="modal" id="modal" required  >
                             <option value="房屋型態" disabled selected="selected">房屋型態</option>
-                            <option class="option" value="type">透天</option>
-                            <option class="option" value="type">電梯華廈</option>
-                            <option class="option" value="type">公寓</option>
-                            <option class="option" value="type">平房</option>
-                            <option class="option" value="type">民宿</option>
-                            <option class="option" value="type">商空</option>
-                            <option class="option" value="type">其他</option>
+                            <option class="option">透天</option>
+                            <option class="option">電梯華廈</option>
+                            <option class="option">公寓</option>
+                            <option class="option">平房</option>
+                            <option class="option">民宿</option>
+                            <option class="option">商空</option>
+                            <option class="option">其他</option>
                         </select>
-                        <select name="budget" id="budget">
+                        <select name="budget" id="budget" required  >
                             <option value="裝修預算" disabled selected="selected">裝修預算</option>
-                            <option class="option" value="type">50~100萬</option>
-                            <option class="option" value="type">100~200萬</option>
-                            <option class="option" value="type">200~300萬</option>
-                            <option class="option" value="type">300萬~400萬</option>
-                            <option class="option" value="type">400~500萬</option>
-                            <option class="option" value="type">500萬以上</option>
+                            <option class="option">50~100萬</option>
+                            <option class="option">100~200萬</option>
+                            <option class="option">200~300萬</option>
+                            <option class="option">300萬~400萬</option>
+                            <option class="option">400~500萬</option>
+                            <option class="option">500萬以上</option>
                         </select>
                         <input type="text" id="square" placeholder="請輸入坪數" required>
-                        <select name="rooms" id="rooms">
+                        <select name="rooms" id="rooms" required  >
                             <option value="幾房" disabled selected="selected">幾房</option>
-                            <option class="option" value="type">1房</option>
-                            <option class="option" value="type">2房</option>
-                            <option class="option" value="type">3房</option>
-                            <option class="option" value="type">4房</option>
-                            <option class="option" value="type">5房</option>
-                            <option class="option" value="type">6房</option>
-                            <option class="option" value="type">7房</option>
-                            <option class="option" value="type">8房</option>
+                            <option class="option">1房</option>
+                            <option class="option">2房</option>
+                            <option class="option">3房</option>
+                            <option class="option">4房</option>
+                            <option class="option">5房</option>
+                            <option class="option">6房</option>
+                            <option class="option">7房</option>
+                            <option class="option">8房</option>
                         </select>
-                        <select name="living room" id="livingroom">
+                        <select name="living room" id="livingroom" required >
                             <option value="幾廳" disabled selected="selected">幾廳</option>
-                            <option class="option" value="type">1廳</option>
-                            <option class="option" value="type">2廳</option>
+                            <option class="option">1廳</option>
+                            <option class="option">2廳</option>
                         </select>
-                        <select name="bathroom" id="bathroom">
+                        <select name="bathroom" id="bathroom" required  >
                             <option value="地區" disabled selected="selected">幾衛</option>
-                            <option class="option" value="type">1衛</option>
-                            <option class="option" value="type">2衛</option>
-                            <option class="option" value="type">3衛</option>
-                            <option class="option" value="type">4衛</option>
-                            <option class="option" value="type">5衛</option>
-                            <option class="option" value="type">6衛</option>
-                            <option class="option" value="type">7衛</option>
-                            <option class="option" value="type">8衛</option>
+                            <option class="option">1衛</option>
+                            <option class="option">2衛</option>
+                            <option class="option">3衛</option>
+                            <option class="option">4衛</option>
+                            <option class="option">5衛</option>
+                            <option class="option">6衛</option>
+                            <option class="option">7衛</option>
+                            <option class="option">8衛</option>
                         </select>
-                        <select name="cars" id="style">
-                            <option value="風格類型" disabled selected="selected">風格類型</option>
-                            <option class="option" value="type">現代風</option>
-                            <option class="option" value="type">鄉村風</option>
-                            <option class="option" value="type">古典風</option>
-                            <option class="option" value="type">休閒多元</option>
-                            <option class="option" value="type">美式風</option>
-                            <option class="option" value="type">奢華風</option>
-                            <option class="option" value="type">新古典</option>
-                            <option class="option" value="type">日式禪風</option>
-                            <option class="option" value="type">東方風</option>
-                            <option class="option" value="type">混搭風</option>
-                            <option class="option" value="type">前衛風</option>
-                            <option class="option" value="type">北歐風</option>
-                            <option class="option" value="type">工業風</option>
-                            <option class="option" value="type">異國風</option>
+                        <select name="cars" id="style" required  >
+                            <option value="風格類型" disabled selected="selected" >風格類型</option>
+                            <option class="option">現代風</option>
+                            <option class="option">鄉村風</option>
+                            <option class="option">古典風</option>
+                            <option class="option">休閒多元</option>
+                            <option class="option">美式風</option>
+                            <option class="option">奢華風</option>
+                            <option class="option">新古典</option>
+                            <option class="option">日式禪風</option>
+                            <option class="option">東方風</option>
+                            <option class="option">混搭風</option>
+                            <option class="option">前衛風</option>
+                            <option class="option">北歐風</option>
+                            <option class="option">工業風</option>
+                            <option class="option">異國風</option>
                         </select>
                         <input type="text" id="date" placeholder="預選裝修日期" required>
 
@@ -330,12 +332,13 @@
                         <input type="text" id="phone" placeholder="請輸入電話" required>
                         <select name="cars" id="gender">
                             <option value="性格" disabled selected="selected">性別</option>
-                            <option class="option" value="type">男</option>
-                            <option class="option" value="type">女</option>
+                            <option class="option">男</option>
+                            <option class="option">女</option>
                         </select>
-                        <input type="checkbox" id="checkbox"> <label for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
+                        <input type="checkbox" id="checkbox" required > <label for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
                     </div>
-                </div>
+                    <input type="submit" value="確認送出">
+                </form>
                 <div id="form">
                     <button id="btn">送出</button>
                 </div>

desktop11/style.css

@@ -97,7 +97,6 @@ body .arrow {
   color: #fff;
   font-family: 追奇手寫體;
   font-size: 72px;
-  margin-top: 300px;
 }
 
 #banner #text .btn-main {

desktop11/style.scss

@@ -88,11 +88,10 @@ body {
             }
         }
         h1 {
-            padding: 15px;
+            padding:15px;
             color: $Font-color;
             font-family: 追奇手寫體;
             font-size: 72px;
-            margin-top: 300px;
         }
         .btn-main {
             box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);