add matches

css/style.css

@@ -25,6 +25,7 @@ body {
   -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
           box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
   line-height: 12px;
+  z-index: 3;
 }
 
 .sec-00.bannerClose {
@@ -76,6 +77,88 @@ body {
   display: none;
 }
 
+.sec-00__bulletList {
+  position: absolute;
+  bottom: 21px;
+  left: calc(50% - 655px);
+  width: 1310px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.sec-00__bullet {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  opacity: 1;
+}
+
+.sec-00__bullet::after {
+  content: "";
+  background: #ee7800;
+  position: absolute;
+  width: 0;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 2px;
+}
+
+.sec-00 .bullet-active::after {
+  width: 0;
+  -webkit-animation-name: progress;
+  animation-name: progress;
+  -webkit-animation-duration: 4s;
+  animation-duration: 4s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+}
+
+@keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+@-webkit-keyframes progress {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 75%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
 @-webkit-keyframes slidein {
   100% {
     height: 0px;
@@ -1634,6 +1717,10 @@ body {
   color: white;
 }
 
+.sec-match {
+  position: relative;
+}
+
 .sec-match p {
   color: #707070;
 }
@@ -1641,13 +1728,11 @@ body {
 .sec-match__imgfr {
   width: 90%;
   height: 14rem;
-  background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
   background-position: center;
   background-size: cover;
 }
 
 .sec-match__designer {
-  background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
   width: 80%;
   height: 12rem;
   background-position: center;
@@ -1672,6 +1757,20 @@ body {
   color: white;
 }
 
+.sec-match .container__row {
+  border-bottom: 1px solid #B2B2B2;
+}
+
+.sec-match .container__row:last-of-type {
+  border-bottom: none;
+}
+
+.sec-match .close {
+  position: absolute;
+  right: 3%;
+  top: 0%;
+}
+
 .sec-login-list {
   background-color: #F3F3F3;
   padding: 1rem;

css/style.scss

@@ -21,6 +21,7 @@ body {
         font-size: 11px;
         box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
         line-height: 12px;
+        z-index: 3;
     }
     &.bannerClose {
         height: 0;
@@ -69,8 +70,81 @@ body {
     .slick-prev:before, .slick-next:before {
         display: none;
     }
+    &__bulletList {
+        position: absolute;
+        bottom: 21px;
+        left: calc(50% - 655px);
+        width: 1310px;
+        box-sizing: border-box;
+        display: flex;
+        z-index: 10;
+        background-color: rgba(0,0,0,.1);
+    }
+    &__bullet {
+        position: relative;
+        width: 100%;
+        height: 3px;
+        background-color: rgba(0,0,0,.1);
+        flex: 1 1 auto;
+        opacity: 1;
+        &::after {
+            content: "";
+            background: #ee7800;
+            position: absolute;
+            width: 0;
+            height: 100%;
+            left: 0;
+            top: 0;
+            border-radius: 2px;
+        }
+    }   
+    .bullet-active::after {
+        width: 0;
+        -webkit-animation-name: progress;
+        animation-name: progress;
+        -webkit-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        animation-timing-function: linear;
+    }
 }
 
+@keyframes progress{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 25%;
+    }
+    50%{
+        width: 50%;
+    }
+    75%{
+        width: 75%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
+@-webkit-keyframes progress{
+    0%{
+      width: 0%;
+    }
+    25%{
+        width: 25%;
+    }
+    50%{
+        width: 50%;
+    }
+    75%{
+        width: 75%;
+    }
+    100%{
+        width: 100%;
+    }
+};
+
 @-webkit-keyframes slidein {
     100% {
         height: 0px;
@@ -1325,18 +1399,19 @@ body {
 }
 
 .sec-match {
+    position: relative;
     p {
         color: #707070;
     }
     &__imgfr {
         width: 90%;
         height: 14rem;
-        background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
+        // background-image: url(https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg);
         background-position: center;
         background-size: cover;
     }
     &__designer {
-        background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
+        // background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);
         width: 80%;
         height: 12rem;
         background-position: center;
@@ -1357,6 +1432,17 @@ body {
             color: white;
         }
     }
+    .container__row {
+        border-bottom: 1px solid #B2B2B2;
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+    .close {
+        position: absolute;
+        right: 3%;
+        top: 0%;
+    }
 }
 
 .sec-login {

index.html

@@ -47,10 +47,23 @@
               <i class="fas fa-chevron-up" style="transform:translateY(-2px);"></i>
               <p>隱藏</p>
             </button>
-            <div class="container-fluid" style="padding:0;margin:0;">
+            <div class="container-fluid" style="padding:0;margin:0;position: relative;">
                 <div class="sec-00__slider">
                     
                 </div>
+                <div class="sec-00__bulletList">
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                  <div class="sec-00__bullet"></div>
+                </div>
             </div>
         </section>
         <nav class="navbar navbar-expand-lg navbar-light navbar-main">
@@ -1310,6 +1323,7 @@
                         </div>
                         <h4 class="sec- text-center">快速媒合設計師</h4>
                         <h6 class="sec- text-center">請填寫您的裝修資訊</h6>
+                        <!-- 媒合表單一 -->
                         <div class="container container_match">
                           <div class="row">
                             <div class="col-1"></div>
@@ -1340,6 +1354,7 @@
                                 <option class="option" value="台東縣">台東縣</option>
                                 <option class="option" value="澎湖縣">澎湖縣</option>
                               </select>
+                              <div class="text-danger text-end small" id="area-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
@@ -1355,6 +1370,7 @@
                                 <option class="option" value="毛胚屋">毛胚屋</option>
                                 <option class="option" value="自地自建">自地自建</option>
                               </select>
+                              <div class="text-danger text-end small" id="type-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
@@ -1371,6 +1387,7 @@
                                 <option class="option" value="41~50坪">41~50坪</option>
                                 <option class="option" value="51坪以上">51坪以上</option>
                               </select>
+                              <div class="text-danger text-end small" id="square-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
@@ -1388,6 +1405,7 @@
                                 <option class="option" value="六房">六房</option>
                                 <option class="option" value="六房以上">六房以上</option>
                               </select>
+                              <div class="text-danger text-end small" id="pattern-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
@@ -1411,6 +1429,7 @@
                                 <option class="option" value="工業風">工業風</option>
                                 <option class="option" value="異國風">異國風</option>
                               </select>
+                              <div class="text-danger text-end small" id="style-error"></div>
                             </div>
                             <div class="col-1"></div>
                           </div>
@@ -1418,34 +1437,38 @@
                             <button class="match__next mx-auto d-inline-block col-6">下一步</button>
                           </div>
                         </div>
+                        <!-- 媒合表單二 -->
                         <div class="container container_match2">
                           <div class="row">
                             <div class="col-1"></div>
                             <div class="col-3" style="padding : 2rem 0;">
-                              <label for="area">姓名</label>
+                              <label for="name">姓名</label>
                             </div>
                             <div class="col-7" style="padding : 2rem 0;">
-                              <input type="text" class="form-control" required>
+                              <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;">
-                              <label for="type">電話</label>
+                              <label for="phone">電話</label>
                             </div>
                             <div class="col-7" style="padding : 2rem 0;">
-                              <input type="text" class="form-control" required>
+                              <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;">
-                              <label for="square">性別</label>
+                              <label for="sex">性別</label>
                             </div>
                             <div class="col-7" style="padding : 2rem 0;">
-                              <select name="square" id="square" class="form-select">
+                              <select name="sex" id="sex" class="form-select">
                                 <option value="" disabled selected>請選擇性別</option>
                                 <option value="男">男</option>
                                 <option value="女">女</option>
                               </select>
+                              <div class="text-danger text-end small" id="sex-error"></div>
                             </div>
                             <div class="col-1"></div>
                             <div class="col-1"></div>
@@ -1490,23 +1513,16 @@
                             <button class="match__next2 mx-auto d-inline-block col-6">送出</button>
                           </div>
                           <div class="row mb-3">
-                            <div class="col-8 mx-auto">
+                            <div class="col-7 mx-auto text-center">
                               <div class="form-check">
                                 <input type="checkbox" id="readPolicy" class="form-check-input" checked>
                                 <label for="readPolicy" class="custom-control-label">同意 
                                   <a href="/about/privacy_policy" target="_blank">免責聲明與隱私使用政策</a>
                                 </label>
+                                <div class="text-danger text-left small" id="readPolicy-error"></div>
                               </div>
                             </div>
                           </div>
-                          <div class="col-8 mx-auto">
-                            <div class="form-check">
-                              <input type="checkbox" id="readPolicy" class="form-check-input">
-                              <label for="readPolicy" class="custom-control-label"> 
-                                裝潢貸款享超長7年還款期，最低利率2.59%起
-                              </label>
-                            </div>
-                          </div>
                           </div>
                       </div>
                     </div>

index_match.html

@@ -823,10 +823,11 @@
             </div>
         </nav>
         <section class="sec-match">
+          <a class="close"><img src="https://hhh.com.tw/assets/images/section/icon/photos/icon-close.svg" alt=""></a>
           <h3 class="text-center my-5" style="font-size: 1.2rem;font-weight: 400;color: #707070;">依據你的需求，我們推薦以下案例和幾位設計師為您服務，<br>
             請選擇您有興趣的設計師，設計師將會主動與留言聯繫您。</h3>
-          <div class="container">
-            <div class="row align-items-center py-3 justify-content-center text-center" style="border-bottom: 1px solid #B2B2B2;">
+          <div class="container container__match">
+            <div class="row align-items-center py-3 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
               <div class="col">
                 <div class="sec-match__imgfr mx-auto"></div>
                 <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
@@ -851,7 +852,7 @@
                 <button class="btn-match">我有興趣</button>
               </div>
             </div>
-            <div class="row align-items-center py-3 justify-content-center text-center" style="border-bottom: 1px solid #B2B2B2;">
+            <div class="row align-items-center py-3 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
               <div class="col">
                 <div class="sec-match__imgfr mx-auto"></div>
                 <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->
@@ -876,7 +877,7 @@
                 <button class="btn-match">我有興趣</button>
               </div>
             </div>
-            <div class="row align-items-center py-3 justify-content-center text-center">
+            <div class="row align-items-center py-3 justify-content-center text-center container__row">
               <div class="col">
                 <div class="sec-match__imgfr mx-auto"></div>
                 <!-- <img src="https://images.hhh.com.tw/uploads/_hcolumn_orig/point05_244_01.jpg" alt=""> -->

js/index.js

@@ -58,19 +58,31 @@ function detectBrowser(agent){
   }
 
 
-
     function renderSec00(data) {
         let temp = data[0]['data'];
+        renderBullet(temp);
         renderBannerStr('sec-00__slider', temp);
         $(".sec-00__slider").slick({
             dots: false,
-            speed: 800,
+            speed: 500,
             autoplay: true,
-            autoplaySpeed: 5000,
+            autoplaySpeed: 4000,
             arrows: true,
             prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
             nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
         });
+        $('.sec-00__bullet').removeClass('bullet-active');
+        $('.sec-00__bullet').eq($('.slick-active').data('slick-index')).addClass('bullet-active');
+        // $('.sec-00__slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
+        //     console.log(currentSlide);
+        //     console.log($('.slick-active').data('slick-index'));
+        //   });
+        $('.sec-00__slider').on('afterChange', function(event, slick, currentSlide){
+            console.log(currentSlide);
+            console.log($('.slick-active').data('slick-index'));
+            $('.sec-00__bullet').removeClass('bullet-active');
+            $('.sec-00__bullet').eq(currentSlide).addClass('bullet-active');
+        });
     }
 
     function renderSec02(data) {
@@ -87,6 +99,15 @@ function detectBrowser(agent){
         });
     }
 
+    function renderBullet(data) {
+        let str = '';
+        for(let i = 0; i < data.length; i++){
+           str += '<div class="sec-00__bullet"></div>'     
+        }
+        console.log('bullet');
+        $('.sec-00__bulletList').html(str);
+    }
+
     function renderBannerStr(sec, data) {
         let str = '';
         for(let i = 0; i < data.length; i++){
@@ -532,17 +553,153 @@ document.addEventListener('lazybeforeunveil', function(e){
     }
 });
 
+var stop = 0;
+
 $('.container_match2').hide();
 $('.match__next').click(function() {
-    $('.container_match').fadeOut(0);
-    $('.container_match2').fadeIn(500);
-    $('.last-step').show();
+    console.log($('#area').val());
+    console.log($('#type').val());
+    if ($('#area').val() == '' || $('#area').val() == null) {
+        $('#area-error').text('請選擇地區');
+        stop = 1;
+    } else {
+        $('#area-error').text('');
+        stop = 0
+    }
+
+    if ($('#type').val() == ''|| $('#type').val() == null) {
+        $('#type-error').text('請選擇房屋類型');
+        stop = 1;
+    } else {
+        $('#type-error').text('');
+        stop = 0
+    }
+
+    if ($('#square').val() == ''|| $('#square').val() == null) {
+        $('#square-error').text('請選擇房屋坪數');
+        stop = 1;
+    } else {
+        $('#square-error').text('');
+        stop = 0
+    }
+
+    if ($('#pattern').val() == ''|| $('#pattern').val() == null) {
+        $('#pattern-error').text('請選擇房屋格局');
+        stop = 1;
+    } else {
+        $('#pattern-error').text('');
+        stop = 0
+    }
+
+    if ($('#style').val() == ''|| $('#style').val() == null) {
+        $('#style-error').text('請選擇喜愛的風格');
+        stop = 1;
+    } else {
+        $('#style-error').text('');
+        stop = 0
+    }
+    console.log(stop);
+    if(stop === 0) {
+        $('.container_match').fadeOut(0);
+        $('.container_match2').fadeIn(500);
+        $('.last-step').show();
+    }
+    
 });
 
 $('.last-step').hide();
 
+var name = 0;
+var phone = 0;
+var sex = 0;
+var readPolicy = 0;
+
 $('.match__next2').click(function() {
-    window.open('./index_match.html');
+    if ($('#name').val() == ''|| $('#name').val() == null) {
+        $('#name-error').text('請填寫您的姓名');
+        name = 1;
+    } else {
+        $('#name-error').text('');
+        name = 0;
+    }
+
+    if ($('#phone').val() == ''|| $('#phone').val() == null) {
+        $('#phone-error').text('請以手機格式填寫(格式:0987654321)');
+        phone = 1;
+    } else {
+        $('#phone-error').text('');
+        phone = 0;
+    }
+    console.log($('#phone').val());
+
+    if ($('#sex').val() == ''|| $('#sex').val() == null) {
+        $('#sex-error').text('請選擇性別');
+        sex = 1;
+    } else {
+        $('#sex-error').text('');
+        sex = 0;
+    }
+    if(!$('#readPolicy').prop('checked')) {
+        $('#readPolicy-error').text('必須同意免責聲明與隱私使用政策');
+        readPolicy = 1;
+    } else {
+        $('#readPolicy-error').text(''); 
+        readPolicy = 0;
+    }
+    var obj = document.getElementsByName("time");
+    var time = [];
+    for (k in obj) {
+        if (obj[k].checked)
+            time.push(obj[k].value);
+    }
+    console.log(time);
+    if(name== 0 && phone == 0 && sex == 0 && readPolicy == 0) {
+        $.ajax({
+            type: "POST",
+            url: "",
+            data:
+                {
+                    data: JSON.stringify(
+                        {
+                            name: $('#name').val(),
+                            sex: $('#sex').val(),
+                            phone: $('#phone').val(),
+                            time: $('#datepicker').val(),
+                            area: $('#area').val(),
+                            type: $('#type').val(),
+                            square: $('#square').val(),
+                            pattern: $('#pattern').val(),
+                            style: $('#style').val(),
+                            time: time.toString(),
+                        })
+                },
+            success: function (res) {
+                if (res.status == "Success") {
+                    // gaEvent('功能 - 軟裝需求單 - 送出', '經紀人');
+                    Swal.fire({
+                        html: '<h5 class="text-primary font-weight-bold">' + res.error + '</h5>',
+                        showConfirmButton: true,
+                        confirmButtonText: '確定',
+                        confirmButtonColor: '#EE7800'
+                    }).then(function (result) {
+                        if (result.value) {
+                            location.reload();
+                        }
+                    })
+                } else {
+                    Swal.fire({
+                        title: '似乎出了什麼問題 請稍後再試',
+                        showConfirmButton: false,
+                    })
+                }
+            },
+            error: function (error) {
+                console.error(error)
+            }
+        })
+       window.open('./index_match.html');
+    }
+    
 })
 
 $('.last-step').click(function() {
@@ -550,6 +707,32 @@ $('.last-step').click(function() {
     $('.container_match2').fadeOut(0);
     $('.last-step').hide();
 });
+
+function submit() {
+
+    if ($('#name').val() == '') {
+        $('#name-error').text('請填寫您的姓名');
+        stop = 1;
+    } else {
+        $('#name-error').text('');
+    }
+
+    if ($('#phone').val() == '' || !/^[09]{2}[0-9]{8}$/.test($('#phone').val())) {
+        $('#phone-error').text('請以手機格式填寫(格式:0987654321)');
+        stop = 1;
+    } else {
+        $('#phone-error').text('');
+    }
+
+    if ($('#sex').val() == '') {
+        $('#sex-error').text('請選擇軟裝預算');
+        stop = 1;
+    } else {
+        $('#sex-error').text('');
+    }
+
+}
+
 // city result
 let cityResult;
 $.ajax({

js/index_match.js

@@ -9,6 +9,7 @@ window.onload = function(){
     detectBrowser(userAgent);
     detectDirection ();
     let result;
+    let matchData;
       $.ajax({
           method: "GET",
           url: "./json/realtime.json",
@@ -27,6 +28,47 @@ window.onload = function(){
           renderVideo(result);
           renderTrending(result);
       });
+      $.ajax({
+        method: "GET",
+        url: "./json/match.json",
+        dataType: "json",
+    }).done(function (msg) {
+        matchData = [...msg];
+        renderMatch(matchData);
+    });
+}
+
+
+function renderMatch(matchData){
+    let str = '';
+    for(let i = 0; i < matchData.length; i++){
+        str += `<div class="row align-items-center py-3 justify-content-center text-center container__row">
+                    <div class="col">
+                        <div class="sec-match__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"></div>
+                    </div>
+                    <div class="col">
+                    <div class="sec-match__designer mx-auto" style="background-image: url('${matchData[i].DesignerImg}');">
+                    </div>
+                    </div>
+                    <div class="col">
+                    <div style="width: 190px;" class="text-start mx-auto">
+                        <p>${matchData[i].Name} 設計師</p>
+                        <p class="mb-2">${matchData[i].CompanyName}</p>
+                        <p>擅長風格 ${matchData[i].CompanyName}</p>
+                        <p>接案坪數 ${matchData[i].Square} </p>
+                        <p>接案地區 ${matchData[i].Area}</p>
+                    </div>
+                    </div>
+                    <div class="col">
+                    <p>${matchData[i].Consulting} 人正在諮詢</p>
+                    </div>
+                    <div class="col">
+                        <button class="btn-match">我有興趣</button>
+                    </div>
+                </div>`
+    }
+
+    $('.container__match').html(str);
 }
   
 
@@ -622,3 +664,6 @@ $.ajax({
       }); 
     });
 
+$('.close').click(function () {
+    window.close();
+})

json/match.json

@@ -0,0 +1,35 @@
+[
+  {
+    "id": 0,
+    "WorkImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+    "DesignerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_722_20210610094358.jpg",
+    "Name": "吳苡瑄",
+    "CompanyName": "春風時尚空間設計",
+    "Style": "現代風",
+    "Square": "20～30坪",
+    "Area": "台北 新北",
+    "Consulting": "15"
+  },
+  {
+    "id": 1,
+    "WorkImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+    "DesignerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_722_20210610094358.jpg",
+    "Name": "吳苡瑄",
+    "CompanyName": "春風時尚空間設計",
+    "Style": "現代風",
+    "Square": "20～30坪",
+    "Area": "台北 新北",
+    "Consulting": "15"
+  },
+  {
+    "id": 2,
+    "WorkImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point04_449_11.jpg",
+    "DesignerImg": "https://cloud.hhh.com.tw/upload/_hdesigner/img_path_722_20210610094358.jpg",
+    "Name": "吳苡瑄",
+    "CompanyName": "春風時尚空間設計",
+    "Style": "現代風",
+    "Square": "20～30坪",
+    "Area": "台北 新北",
+    "Consulting": "15"
+  }
+]