首頁 探索 說明
註冊 登入
choozmo
/
HHH_Home_Decoration_2
2
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

頁面修正

jeter20131220 3 年之前
父節點
9a28bd63e4
當前提交
3481f9187b
共有 9 個文件被更改，包括 78 次插入 和 163 次删除
分割檢視 顯示文件統計
  1. 8 4
      desktop11/goto.js
  2. 22 13
      desktop11/index.html
  3. 6 10
      desktop11/style.css
  4. 0 0
      desktop11/style.css.map
  5. 6 9
      desktop11/style.scss
  6. 6 6
      mobile/index.html
  7. 17 23
      mobile/style.css
  8. 0 0
      mobile/style.css.map
  9. 13 98
      mobile/style.scss

+ 8 - 4
desktop11/goto.js
查看文件 

@@ -88,9 +88,9 @@ $.fn.serializeObject = function () {
 
 
 
 
- // email 格式檢查
 
- $(document).ready(function () {
 
-  
+// email 格式檢查
 
+$(document).ready(function () {
 
+
 
   //E-MAIL格式檢查
 
 
   $("body").on("change", "#email", function () {
 
@@ -168,7 +168,7 @@ $(".contact-form1").submit(function (e) {
 
     var jsonString = JSON.stringify(formRef);*/
 
   var jsonInfo = $('.contact-form1').serializeObject();
 
   var jsonString = JSON.stringify(jsonInfo);
 
- 
+
 
   $.ajax({
 
     type: 'POST',
 
     url: 'https://go.hhh.com.tw:8001/deco_request_detail',
 
@@ -205,6 +205,7 @@ $(".contact-form1").submit(function (e) {
 
 
 
 
+
 
 $("*").each(function (index, element) {
 
   // 此元素被點選後執行
 
   $(this).click(function (e) {
 
@@ -244,5 +245,8 @@ $("html").on("mousewheel", function () {
 
   $("html").stop();
 
 });
 
 
+$(document).ready(function () {
 
+  $("#datepicker").datepicker();
 
+});

+ 22 - 13
desktop11/index.html
查看文件 

@@ -2,6 +2,8 @@
 
 <html lang="zh">
 
 
 <head>
 
+    
+  
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -20,15 +22,19 @@
 
     <meta property="og:locale" content="zh_TW">
 
     <title>全室裝修</title>
 
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
 
+
 
+
 
+
 
+
 
     <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" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
+
 
+
 
     <link rel="stylesheet" href="./style.css">
 
     <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
-</head>
 
+    
 
 <body id="top">
 
     <script>
 
@@ -71,6 +77,10 @@
 
                 }
 
             });
 
         };
 
+
 
+
 
+
 
+
 
     </script>
 
 
     <div class="container-fluid" style="padding:0;margin:0 ">
 
@@ -119,7 +129,7 @@
 
         <div class="container-fluid" style="padding:0;margin: 0; ">
 
             <section id="content1">
 
                 <div class="content1-left">
 
-                    <h1 class="title">你有以下這些下困擾嗎</h1>
 
+                    <h1 class="title">你有以下這些困擾嗎</h1>
 
                     <div class="left">
 
                         <h1 class="title1">o1</h1>
 
                         <div class="text1">
 
@@ -184,7 +194,8 @@
 
                                 <img src="./img/process/icon2.webp" alt="">
 
                             </div>
 
                             <div class="icon-text">
 
-                                <div class="text-p">13年經驗安心把關</div>
 
+
 
+                                <div class="text-p"><span style="font-size: 25px;">13</span>年經驗安心把關</div>
 
                                 <div class="text-p">不懂預算行情</div>
 
                                 <div class="text-p">也不用擔心受騙</div>
 
                             </div>
 
@@ -298,7 +309,7 @@
 
         </div>
 
         <section id="contact-us">
 
             <div class="form-title">
 
-                <h1>已經服務超過14392個家庭</h1>
 
+                <h1>已經服務超過<span style="font-size:38px;">14392</span>個家庭</h1>
 
                 <h1>打造夢想中的完美居家生活</h1>
 
                 <h1>即刻啟動!</h1>
 
             </div>
 
@@ -408,14 +419,14 @@
 
                                 <option class="option">工業風</option>
 
                                 <option class="option">異國風</option>
 
                             </select>
 
-                            <input name="prefer_date" type="date" id="date" value="預選裝修日期" placeholder="預選裝修日期"
 
-                                required>
 
+                            <input name="prefer_date" type="text" id="datepicker" placeholder="預選裝修日期" required>
 
                         </div>
 
                         <hr>
 
                         <div id="form-right">
 
 
                             <div id="fb_login">
 
-                                <fb:login-button id="fb-button" scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
 
+                                <fb:login-button id="fb-button" scope="public_profile,email"
 
+                                    onlogin="checkLoginState();">使用FB填入信箱與姓名
 
                                 </fb:login-button>
 
                                 <div id="status"></div>
 
                             </div>
 
@@ -428,8 +439,8 @@
 
                                 <option class="option">男</option>
 
                                 <option class="option">女</option>
 
                             </select>
 
-                            <input type="checkbox" id="checkbox" checked> <label for="agree">同意</label><a
 
-                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
+                            <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
 
+                                for="agree">同意</label><a href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
                         </div>
 
 
                     </div>
 
@@ -455,14 +466,12 @@
 
 
     <!-- Load the JS SDK asynchronously -->
 
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
 
-
 
     <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 type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

+ 6 - 10
desktop11/style.css
查看文件 

@@ -321,7 +321,7 @@ body .arrow {
 
 
 #service .service-box #service-text #text-left,
 
 #service .service-box #service-text #text-right {
 
-  width: 30vw;
 
+  width: 40vw;
 
   text-align: left;
 
   display: -ms-grid;
 
   display: grid;
 
@@ -334,12 +334,8 @@ body .arrow {
 
   width: 12vw;
 
 }
 
 
-#service .service-box #service-text #text-right {
 
-  padding-left: 1vw;
 
-}
 
-
 
 #service .service-box #service-text .icon-text {
 
-  width: 25vw;
 
+  width: 30vw;
 
   margin-top: 15px;
 
   font-weight: 600;
 
 }
 
@@ -351,7 +347,7 @@ body .arrow {
 
 
 #service .service-box #service-text .text-p {
 
   font-size: 18px;
 
-  color: #4b515e;
 
+  color: #000;
 
 }
 
 
 #service .service-box #service-img {
 
@@ -529,7 +525,7 @@ body .arrow {
 
 #contact-us #contact-form #budget,
 
 #contact-us #contact-form #square,
 
 #contact-us #contact-form #style,
 
-#contact-us #contact-form #date,
 
+#contact-us #contact-form #datepicker,
 
 #contact-us #contact-form #email,
 
 #contact-us #contact-form #name,
 
 #contact-us #contact-form #phone,
 
@@ -575,7 +571,7 @@ body .arrow {
 
 }
 
 
 #contact-us #contact-form #form-left #square,
 
-#contact-us #contact-form #form-left #date {
 
+#contact-us #contact-form #form-left #datepicker {
 
   background: none;
 
   background-color: #fff;
 
 }
 
@@ -648,7 +644,7 @@ body .arrow {
 
   background: #edbc96;
 
   color: #4b515e;
 
   font-size: 20px;
 
-  width: 450px;
 
+  width: 400px;
 
   border-radius: 10px;
 
 }

文件差異過大導致無法顯示
+ 0 - 0
desktop11/style.css.map


+ 6 - 9
desktop11/style.scss
查看文件 

@@ -282,7 +282,7 @@ body {
 
             width: 70vw;
 
             #text-left,
 
             #text-right {
 
-                width: 30vw;
 
+                width: 40vw;
 
                 text-align: left;
 
                 display: grid;
 
                 grid-template-columns: 1fr 1fr;
 
@@ -290,11 +290,8 @@ body {
 
                     width: 12vw;
 
                 }
 
             }
 
-            #text-right {
 
-                padding-left: 1vw;
 
-            }
 
             .icon-text {
 
-                width: 25vw;
 
+                width: 30vw;
 
                 margin-top: 15px;
 
                 font-weight: 600;
 
             }
 
@@ -305,7 +302,7 @@ body {
 
             }
 
             .text-p {
 
                 font-size: 18px;
 
-                color: $title-color;
 
+                color: #000;
 
             }
 
         }
 
         #service-img {
 
@@ -463,7 +460,7 @@ body {
 
         #budget,
 
         #square,
 
         #style,
 
-        #date,
 
+        #datepicker,
 
         #email,
 
         #name,
 
         #phone,
 
@@ -502,7 +499,7 @@ body {
 
                 background-color: #fff;
 
             }
 
             #square,
 
-            #date {
 
+            #datepicker{
 
                 background: none;
 
                 background-color: #fff;
 
             }
 
@@ -571,7 +568,7 @@ body {
 
         background: #edbc96;
 
         color: #4b515e;
 
         font-size: 20px;
 
-        width: 450px;
 
+        width: 400px;
 
         border-radius: 10px;
 
 
         &:hover {

+ 6 - 6
mobile/index.html
查看文件 

@@ -132,12 +132,12 @@
 
         </section>
 
     </div>
 
     <div class="btn">
 
-        <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
 
-            data-gt-offset="-300">預約居家布置諮詢</button>
 
+        <button   id="banner-btn" class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
 
+            data-gt-offset="-300">預約免費裝修諮詢</button>
 
     </div>
 
     <div class="container-fluid" style="padding:0;margin:0  ">
 
         <section id="content1">
 
-            <h1 class="title">你有以下這些下困擾嗎</h1>
 
+            <h1 class="title">你有以下這些困擾嗎</h1>
 
             <div class="box">
 
 
                 <div class="text">
 
@@ -206,8 +206,8 @@
 
             </div>
 
         </div>
 
         <div class="btn">
 
-            <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
 
-                data-gt-offset="-300">預約居家布置諮詢</button>
 
+            <button style="margin-top: 50px;" class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
 
+                data-gt-offset="-300">預約免費裝修諮詢</button>
 
         </div>
 
     </section>
 
     <section id="service-process">
 
@@ -306,7 +306,7 @@
 
 
     <section id="contact-us">
 
         <div id="form-title">
 
-            <h1>已經服務超過14392個家庭</h1>
 
+            <h1>已經服務超過<span style="font-size: 28px;">14392</span>個家庭</h1>
 
             <h1>打造夢想中的完美居家生活</h1>
 
             <h1>即刻啟動!</h1>

+ 17 - 23
mobile/style.css
查看文件 

@@ -1,4 +1,5 @@
 
 @charset "UTF-8";
 
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap");
 
 * {
 
   margin: 0;
 
   padding: 0;
 
@@ -13,9 +14,9 @@
 
 }
 
 
 body .title {
 
-  font-weight: 900;
 
+  font-weight: 600;
 
   padding: 15px;
 
-  font-family: "Times New Roman", Times, serif;
 
+  font-family: 'Noto Serif TC', serif !important;
 
   color: #4b515e;
 
   text-align: center;
 
 }
 
@@ -28,20 +29,19 @@ body .title {
 
 
 @media screen and (max-width: 767px) {
 
   body .title {
 
-    font-size: 34px;
 
+    font-size: 40px;
 
   }
 
 }
 
 
 @media screen and (max-width: 400px) {
 
   body .title {
 
-    font-size: 25px !important;
 
+    font-size: 30px !important;
 
   }
 
 }
 
 
 body .btn {
 
   width: 100vw;
 
   text-align: center;
 
-  margin-top: 20px;
 
 }
 
 
 body .btn-main {
 
@@ -57,7 +57,6 @@ body .btn-main {
 
   border-radius: 30px;
 
   -webkit-transition: 0.3s;
 
   transition: 0.3s;
 
-  margin-top: 50px;
 
 }
 
 
 body .btn-main:hover {
 
@@ -280,7 +279,7 @@ body .btn-main:hover {
 
   #service h1 {
 
     margin: 50px 0;
 
     padding: 0;
 
-    font-size: 25px !important;
 
+    font-size: 30px !important;
 
   }
 
 }
 
 
@@ -303,6 +302,7 @@ body .btn-main:hover {
 
 }
 
 
 #service .text .left-box .left-text {
 
+  color: #000;
 
   font-weight: 900;
 
 }
 
 
@@ -364,7 +364,7 @@ body .btn-main:hover {
 
 
 @media screen and (max-width: 400px) {
 
   #service h1 {
 
-    font-size: 25px !important;
 
+    font-size: 30px !important;
 
   }
 
 }
 
 
@@ -574,7 +574,7 @@ body .btn-main:hover {
 
 #contact-us #form-title {
 
   padding-top: 100px;
 
   margin-bottom: 50px;
 
-  color: #5c5248;
 
+  color: #4b515e;
 
 }
 
 
 #contact-us #form-text {
 
@@ -600,6 +600,7 @@ body .btn-main:hover {
 
 #contact-us h1 {
 
   text-align: center;
 
   font-size: 24px;
 
+  font-weight: 900;
 
 }
 
 
 @media screen and (max-width: 1024px) {
 
@@ -678,7 +679,7 @@ body .btn-main:hover {
 
   margin: 0 auto;
 
 }
 
 
-#contact-us #contact-form #fb_login {
 
+#contact-us #contact-form #000 {
 
   margin: 15px auto;
 
   width: 85vw;
 
   height: 60px;
 
@@ -690,25 +691,25 @@ body .btn-main:hover {
 
   position: relative;
 
 }
 
 
-#contact-us #contact-form #fb_login p {
 
+#contact-us #contact-form #000 p {
 
   position: absolute;
 
   right: 30px;
 
   font-weight: normal;
 
 }
 
 
 @media screen and (max-width: 1024px) {
 
-  #contact-us #contact-form #fb_login p {
 
+  #contact-us #contact-form #000 p {
 
     top: 10px;
 
   }
 
 }
 
 
 @media screen and (max-width: 767px) {
 
-  #contact-us #contact-form #fb_login p {
 
+  #contact-us #contact-form #000 p {
 
     top: 15px;
 
   }
 
 }
 
 
-#contact-us #contact-form #fb_login img {
 
+#contact-us #contact-form #000 img {
 
   position: absolute;
 
   left: 30px;
 
   top: 15px;
 
@@ -716,12 +717,12 @@ body .btn-main:hover {
 
   height: 32px;
 
 }
 
 
-#contact-us #contact-form #fb_login:hover {
 
+#contact-us #contact-form #000:hover {
 
   background-color: #2a4f91;
 
   color: #fff;
 
 }
 
 
-#contact-us #contact-form #fb_login:hover img {
 
+#contact-us #contact-form #000:hover img {
 
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
 }
 
@@ -731,13 +732,6 @@ body .btn-main:hover {
 
   color: #ee751b;
 
 }
 
 
-#contact-us #contact-form #checkbox {
 
-  margin-top: 50px;
 
-  padding: 20px;
 
-  width: 15px;
 
-  height: 15px;
 
-}
 
-
 
 #contact-us #contact-form #email,
 
 #contact-us #contact-form #name,
 
 #contact-us #contact-form #phone {

文件差異過大導致無法顯示
+ 0 - 0
mobile/style.css.map


+ 13 - 98
mobile/style.scss
查看文件 

@@ -6,6 +6,7 @@
 
 $table: 1024px;
 
 $moblie: 767px;
 
 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap');
 
 $process: #6f645a;
 
 // 行動裝置
 
 @font-face {
 
@@ -18,21 +19,20 @@ $toggle: #9c857b;
 
 $title-color: #4b515e;
 
 body {
 
    
-
 
     .title {
 
-        font-weight: 900;
 
+        font-weight: 600;
 
         padding: 15px;
 
-        font-family: "Times New Roman", Times, serif;
 
+        font-family: 'Noto Serif TC', serif !important;
 
         color:$title-color;
 
         text-align: center;
 
         @media screen and(max-width:$table) {
 
             font-size: 48px;
 
         }
 
         @media screen and(max-width:$moblie) {
 
-            font-size: 34px;
 
+            font-size: 40px;
 
         }
 
         @media screen and(max-width:400px) {
 
-            font-size:25px!important;
 
+            font-size:30px!important;
 
            
         }
 
         
@@ -40,7 +40,6 @@ body {
 
     .btn {
 
         width: 100vw;
 
         text-align: center;
 
-        margin-top: 20px;
 
     }
 
     .btn-main {
 
         box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
 
@@ -53,7 +52,6 @@ body {
 
         width: 280px;
 
         border-radius: 30px;
 
         transition: 0.3s;
 
-        margin-top: 50px;
 
         &:hover {
 
             background-color: $toggle;
 
             width: 285px;
 
@@ -213,7 +211,7 @@ body {
 
         @media screen and(max-width: 400px) {
 
             margin: 50px 0;
 
             padding: 0;
 
-            font-size: 25px !important;
 
+            font-size: 30px !important;
 
         }
 
         
     }
 
@@ -231,6 +229,7 @@ body {
 
 
         .left-box {
 
             .left-text{
 
+                color: #000;
 
                 font-weight: 900;
 
                 @media screen and(max-width: 769px) {
 
                     padding-top: 3vw;
 
@@ -267,91 +266,11 @@ body {
 
             font-size: 34px;
 
         }
 
         @media screen and(max-width: 400px) {
 
-            font-size:25px!important;
 
+            font-size:30px!important;
 
            
         }
 
     }
 
-    // .service-box {
 
-    //     display: grid;
 
-    //     grid-template-columns: repeat(2, 1fr);
 
-    //     width: 100vw;
 
-    //     height: 35vh;
 
-    //     @media screen and(max-width:$moblie) {
 
-    //         width: 100vw;
 
-    //         height: 40vh;
 
-    //     }
 
-    //     @media screen and(max-width:$table) {
 
-    //         width: 100vw;
 
-
 
-    //     }
 
-    //     .text-left {
 
-    //         background: #eee;
 
-    //         text-align: left;
 
-    //         @media screen and(max-width:$table) {
 
-    //             width: 40vw;
 
-    //             height: 32vh;
 
-    //             padding-left: 10vw;
 
-
 
-    //         }
 
-    //         @media screen and(max-width:$moblie) {
 
-    //             text-align: left;
 
-    //             width: 50vw;
 
-    //             padding-left:-10vw;
 
-    //         }
 
-
 
-    //         .icon-text {
 
-    //             width: 60vw;
 
-    //             @media screen and(max-width:$moblie) {
 
-    //                 margin: 10px 10px;
 
-    //                 font-size: 15px;
 
-    //             }
 
-    //             @media screen and(max-width:$table) {
 
-    //                 font-size: 24px;
 
-    //                padding-top: 3vw;
 
-
 
-    //             }
 
-    //             p {
 
-    //                 font-family: 微軟正黑體;
 
-    //                 font-weight: bolder;
 
-    //                 font-size: 15px;
 
-    //                 line-height: 1.5;
 
-    //                 text-align: left;
 
-    //                 @media screen and(max-width:$table) {
 
-    //                     font-size: 24px;
 
-    //                 }
 
-    //                 @media screen and(max-width:$moblie) {
 
-    //                     font-size: 14px;
 
-    //                 }
 
-    //             }
 
-    //         }
 
-    //         img {
 
-
 
-    //             @media screen and(max-width:$table) {
 
-    //                 width: 150px;
 
-    //                 height: 150px;
 
-    //                 margin-top: 2vw;
 
-    //             }
 
-    //             @media screen and(max-width:$moblie) {
 
-    //                 width: 80px;
 
-    //                 height: 80px;
 
-    //                 margin-left: 15px;
 
-    //             }
 
-    //         }
 
-    //     }
 
-    //     .text-right {
 
-    //         img {
 
-    //             object-fit: cover;
 
-    //             @media screen and(max-width:$table) {
 
-    //                 height: 32vh;
 
-    //                 width: 60vw;
 
-    //             }
 
-    //             @media screen and(max-width:$moblie) {
 
-    //                 width: 50vw;
 
-    //                 height: 32vh;
 
-    //             }
 
-    //         }
 
-    //     }
 
-    // }
 
+    
 }
 
 #service-process {
 
     margin: 0 auto;
 
@@ -500,7 +419,7 @@ body {
 
     #form-title {
 
         padding-top: 100px;
 
         margin-bottom: 50px;
 
-        color: #5c5248;
 
+        color: $title-color;
 
     }
 
     #form-text {
 
         width: 100vw;
 
@@ -518,6 +437,7 @@ body {
 
     h1 {
 
         text-align: center;
 
         font-size: 24px;
 
+        font-weight: 900;
 
         @media screen and(max-width:$table) {
 
             font-size: 36px;
 
         }
 
@@ -581,7 +501,7 @@ body {
 
             display: block;
 
             margin: 0 auto;
 
         }
 
-        #fb_login {
 
+        #000 {
 
             margin: 15px auto;
 
             width: 85vw;
 
             height: 60px;
 
@@ -624,12 +544,7 @@ body {
 
             text-decoration: none;
 
             color: #ee751b;
 
         }
 
-        #checkbox {
 
-            margin-top: 50px;
 
-            padding: 20px;
 
-            width: 15px;
 
-            height: 15px;
 
-        }
 
+       
         #email,
 
         #name,
 
         #phone {

部分文件因文件數量過多而無法顯示