|
|
@@ -5,7 +5,7 @@ $(".popular").hide();
|
|
|
|
|
|
|
|
|
$(document).on("click", ".likeSee__state__filter--item", function (event) {
|
|
|
- $(".News").toggle();
|
|
|
+ $(".CaseNews").toggle();
|
|
|
$(".popular").toggle();
|
|
|
$(".likeSee__state__filter--item").removeClass('active');
|
|
|
$(this).addClass("active");
|
|
|
@@ -19,37 +19,413 @@ function get_data() {
|
|
|
// $("#version").html(desid);
|
|
|
$.ajax({
|
|
|
method: "GET",
|
|
|
- url: "cases.json",
|
|
|
+ url: "json/cases.json",
|
|
|
dataType: "json",
|
|
|
|
|
|
})
|
|
|
.done(function (msg) {
|
|
|
- for (var i = 0; i < msg.length; i++) {
|
|
|
- // if (msg[i].id == id) {
|
|
|
- var contentarticle = '';
|
|
|
- var webtitle = '';
|
|
|
- console.log(msg);
|
|
|
- contentarticle += ' \
|
|
|
- <h1 class="sec10-title">\
|
|
|
- '+ msg[i].articletitle + ' \
|
|
|
- </h1>\
|
|
|
- <p class="card-text"><small class="text-muted">By'+ msg[i].articleauthor + '</small></p>\
|
|
|
- <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>'+ msg[i].articledate + '</span>\
|
|
|
- <hr>\
|
|
|
- <a target="_blank" href="https://testnets.akaswap.com/akaobj/251">\
|
|
|
- <img class="img-fluid" src="'+ msg[i].articleimg + '" alt="">\
|
|
|
+ console.log(msg);
|
|
|
+ let designersinfo = "";
|
|
|
+ let CaseInfo = "";
|
|
|
+ let CaseTag = "";
|
|
|
+ let CaseData = "";
|
|
|
+ let CaseNews = "";
|
|
|
+ let CasePopular = "";
|
|
|
+ let CaseDetail = "";
|
|
|
+ for (let i = 0; i < msg.length; i++) {
|
|
|
+ designersinfo = `
|
|
|
+ <div class="container container-width-column px-md-0">
|
|
|
+ <div class="article__wrapper">
|
|
|
+ <h2 class="h4">${msg[i].Casetitle}</h2>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="small">${msg[i].CaseTeamName} ｜ 圖片提供:${msg[i].CaseCompany}</div>
|
|
|
+ <div class="small">${msg[i].CaseDate}｜ 人氣:${msg[i].CaseViews}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+
|
|
|
+ CaseInfo = `
|
|
|
+ <div class="row mx-0 justify-content-around align-items-center">
|
|
|
+ <div class="col-md-3 px-mx-0">
|
|
|
+ <div class="info__items border-end">
|
|
|
+ <div>
|
|
|
+ <div class="info__items__title">風格</div>
|
|
|
+ <div class="info__items--ellipse">${msg[i].CaseStyle}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-3 px-mx-0">
|
|
|
+ <div class="info__items border-end">
|
|
|
+ <div>
|
|
|
+ <div class="info__items__title">格局</div>
|
|
|
+ <div class="info__items--ellipse">${msg[i].CaseHouse}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-3 px-mx-0">
|
|
|
+ <div class="info__items border-end">
|
|
|
+ <div>
|
|
|
+ <div class="info__items__title">坪數</div>
|
|
|
+ <div class="info__items--ellipse">${msg[i].CaseSize}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-3 px-mx-0">
|
|
|
+ <div class="info__items">
|
|
|
+ <div>
|
|
|
+ <div class="info__items__title">預算</div>
|
|
|
+ <div class="info__items--ellipse">${msg[i].CaseProject}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+
|
|
|
+ for (let j = 0; j < msg[i].CaseTag.length; j++) {
|
|
|
+ // console.log(msg[i].CaseTag.length);
|
|
|
+
|
|
|
+ // console.log(msg[i].CaseTag[j].Tag);
|
|
|
+
|
|
|
+ CaseTag += ' \
|
|
|
+ <a href="" class="btn btn-outline-custom rounded-0">'+ msg[i].CaseTag[j].Tag + '</a> \
|
|
|
+ ';
|
|
|
+ }
|
|
|
+
|
|
|
+ CaseData = `
|
|
|
+ <h4 class="d-none d-md-block">CASE DATA</h4>
|
|
|
+ <div class="caseData__infoItems">
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">居住成員:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMember} </div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">房屋坪數:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSize}</div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">設計風格:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataStyle}</div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">房屋類型:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataType}</div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">房屋狀況:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSituation}</div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">圖片提供:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataImgProvide}</div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">空間格局:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSpace}</div>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__infoItems__list">
|
|
|
+ <div class="caseData__infoItems__list--lf">主要建材:</div>
|
|
|
+ <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMaterial}</div>
|
|
|
+ </div>
|
|
|
+ </div> `
|
|
|
+
|
|
|
+ CaseData2 = `
|
|
|
+ <div class="caseData__designerBlock h-100">
|
|
|
+ <div class="caseData__designerBlock__designer d-block d-md-none">
|
|
|
+ <h4>聯絡設計師</h4>
|
|
|
+ <ul>
|
|
|
+ <li><a itemprop="item" href="/designer-index.php?designer_id=779"
|
|
|
+ target="_blank">${msg[i].CaseCompany}</a></li>
|
|
|
+ <li><a itemprop="item" href="/designer-index.php?designer_id=779"
|
|
|
+ target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
|
|
|
+ <li>免付費諮詢專線</li>
|
|
|
+ <li><a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="caseData__designerBlock__designer--pc d-none d-md-block">
|
|
|
+ <div class="caseData__designerBlock__designer--above">
|
|
|
+ <h4>聯絡設計師</h4>
|
|
|
+ <ul>
|
|
|
+ <li><a href="" target="_blank">${msg[i].CaseCompany}</a></li>
|
|
|
+ <li><a href="" target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="caseData__designerBlock__designer--below">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ 免付費諮詢專線
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="caseData__designerBlock__avatar">
|
|
|
+ <a href="">
|
|
|
+ <div class="caseData__designerBlock__avatar--img"
|
|
|
+ style="background-image:url(${msg[i].ContactDesignerImg});">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+
|
|
|
+ for (var k = 0; k < msg[i].ProfileRecently.length; k++) {
|
|
|
+ CaseNews +=
|
|
|
+ '\<div class="col-md-4 ps-0"\
|
|
|
+ <div class="vue-waterfall-slot">\
|
|
|
+ <div class="card CaseNews-Card">\
|
|
|
+ <a href="'+ msg[i].ProfileRecently[k].ProfileLink + '">\
|
|
|
+ <img class="img-fluid"\
|
|
|
+ src="'+ msg[i].ProfileRecently[k].ProfileImg + '"\
|
|
|
+ alt="幸福空間個案圖" class="card-img-top">\
|
|
|
+ </a>\
|
|
|
+ </div>'
|
|
|
+ CaseNews += '<div class="card-body">'
|
|
|
+ for (var z = 0; z < msg[i].ProfileRecently[k].ProfileTag.length; z++) {
|
|
|
+ // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
|
|
|
+ CaseNews += '\
|
|
|
+ <a href="">\
|
|
|
+ '+ msg[i].ProfileRecently[k].ProfileTag[z].Tag + '\
|
|
|
+ </a>\
|
|
|
+ ';
|
|
|
+ }
|
|
|
+ CaseNews += '</div></div></div></div>'
|
|
|
+ };
|
|
|
+
|
|
|
+ for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
|
|
|
+ CasePopular +=
|
|
|
+ '<div class="likeSee__rule"\
|
|
|
+ <a href="'+ msg[i].ProfilePopularity[x].ProfileLink + '">\
|
|
|
+ <div class="likeSee__bgImg">\
|
|
|
+ <img class="img-fluid" src="'+ msg[i].ProfilePopularity[x].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
|
|
|
+ </div>\
|
|
|
+ </a>'
|
|
|
+ CasePopular += '<div class="likeSee__tag">'
|
|
|
+ for (var y = 0; y < msg[i].ProfilePopularity[x].ProfileTag.length; y++) {
|
|
|
+ // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
|
|
|
+ CasePopular += '\
|
|
|
+ <a href="'+ msg[i].ProfilePopularity[x].ProfileTag[y].TagLink + '" class="likeSee__tag--item">\
|
|
|
+ '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\
|
|
|
+ </a>\
|
|
|
+ ';
|
|
|
+ }
|
|
|
+ CasePopular += '</div></div>'
|
|
|
+ };
|
|
|
+ // 個案細節
|
|
|
+ CaseDetail += '<div class="row px-0 mx-0">'
|
|
|
+ CaseDetail +=
|
|
|
+ // 輪播圖
|
|
|
+ ' <div class="col-md-8">\
|
|
|
+ <div style="position: sticky; top:0px;">\
|
|
|
+ <img class="img-fluid" src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg" alt="">\
|
|
|
+ </div>\
|
|
|
+ </div>'
|
|
|
+
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="col-md-4">\
|
|
|
+ <div class="d-flex justify-content-start align-items-center pt-5">\
|
|
|
+ <a href="">\
|
|
|
+ <div class="contact-section-avatar me-2">\
|
|
|
+ <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
|
|
|
+ </div>\
|
|
|
+ </a>\
|
|
|
+ <div class="ms-2" style="width: 100%;">\
|
|
|
+ <a href="" class="contact-section-company">\
|
|
|
+ <div>\
|
|
|
+ '+ msg[i].CaseCompany + '\
|
|
|
+ </div>\
|
|
|
+ </a>\
|
|
|
+ <div style="display: flex;" class="contact-section-detail-box mt-3">\
|
|
|
+ <div class="contact-section-detail-lf">\
|
|
|
+ <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
|
|
|
+ </div>\
|
|
|
+ <div class="contact-section-detail-rt">\
|
|
|
+ <div><a href="tel:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ '
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="info-area-title-desktop">\
|
|
|
+ <a href="'+ msg[i].CasePageLink + '" target="_blank">\
|
|
|
+ '+ msg[i].Casetitle + '\
|
|
|
</a>\
|
|
|
- <!-- 文章內容 -->\
|
|
|
- <div class="sec10-content mt-3">\
|
|
|
- '+ msg[i].artuclecontent + '\
|
|
|
- </div>';
|
|
|
+ </div>\
|
|
|
+ <div class="divider"></div>\
|
|
|
+ '
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="info-area-other-case-desktop py-3">\
|
|
|
+ <div class="ml-1">該個案的其他圖片(<span id="index">5</span>/8)</div>\
|
|
|
+ <div class="other-case-desktop-items d-flex flex-wrap">\
|
|
|
+ '
|
|
|
+ for (let j = 0; j < msg[i].CaseDetail.length; j++) {
|
|
|
+ CaseDetail +=
|
|
|
+ '<div id="img-0" class="w-20 m-1 p-1 img_all">\
|
|
|
+ <a>\
|
|
|
+ <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg+ '" width="70" height="70" alt="該個案的其他圖片">\
|
|
|
+ </a>\
|
|
|
+ </div>'
|
|
|
+ };
|
|
|
+ CaseDetail += '</div></div>';
|
|
|
+
|
|
|
+ CaseDetail += '<div class="divider"></div>';
|
|
|
+
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="info-area-same-case-desktop py-3">\
|
|
|
+ <div class="ml-1"><span>工業風</span> 其他作品</div>\
|
|
|
+ <div class="same-case-desktop-items d-flex flex-wrap">\
|
|
|
+ '
|
|
|
+ for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="w-20 m-1 p-1 ">\
|
|
|
+ <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
|
|
|
+ <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
|
|
|
+ </a>\
|
|
|
+ </div>'
|
|
|
+ };
|
|
|
+ CaseDetail += '</div></div>';
|
|
|
+ CaseDetail += '<div class="divider"></div>';
|
|
|
|
|
|
- webtitle += ' \
|
|
|
- '+ msg[i].articletitle + '';
|
|
|
- // }
|
|
|
- $('#webtitle').html(webtitle);
|
|
|
- $('.content').html(contentarticle);
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="info-area-data-desktop py-3">\
|
|
|
+ <div class="ml-2">CASE DATA</div>\
|
|
|
+ <div class="data-table-desktop ml-2">\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>裝潢費用:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseProject + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>居住成員:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseDataMember + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>設計風格:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseStyle + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>房屋類型:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseDataType + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>房屋坪數:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseSize + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>房屋狀況:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseDataSituation + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>圖片提供:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseCompany + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>空間格局:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseDataSpace + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-items d-flex">\
|
|
|
+ <div class="data-table-lf">\
|
|
|
+ <div>主要建材:</div>\
|
|
|
+ </div>\
|
|
|
+ <div class="data-table-rt">\
|
|
|
+ <div>'+ msg[i].CaseDataMaterial + '</div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>';
|
|
|
|
|
|
+ CaseDetail += '<div class="divider"></div>';
|
|
|
+ CaseDetail +=
|
|
|
+ '<div class="info-area-contact-desktop py-3 mb-2">\
|
|
|
+ <div class="ml-2">聯絡資訊 Info</div>\
|
|
|
+ <div class="contact-section-desktop ml-2 mt-2">\
|
|
|
+ <div class="contact-section-detail-desktop mt-3">\
|
|
|
+ <div class="d-flex">\
|
|
|
+ <div class="contact-section-detail-lf">\
|
|
|
+ <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
|
|
|
+ </div>\
|
|
|
+ <div class="contact-section-detail-rt">\
|
|
|
+ <div>\
|
|
|
+ <a href="tel:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</a>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="d-flex">\
|
|
|
+ <div class="contact-section-detail-lf">\
|
|
|
+ <div><i class="fas fa-map-marker-alt"></i></div>\
|
|
|
+ </div>\
|
|
|
+ <div class="contact-section-detail-rt">\
|
|
|
+ <div><a href="'+ msg[i].CaseCompanyMap + '" target="_blank">'+ msg[i].CaseCompanyAddress + '</a></div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="d-flex">\
|
|
|
+ <div class="contact-section-detail-lf">\
|
|
|
+ <div><i class="far fa-envelope"></i></div>\
|
|
|
+ </div>\
|
|
|
+ <div class="contact-section-detail-rt">\
|
|
|
+ <div><a href="mailto:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</a></div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ <div class="d-flex">\
|
|
|
+ <div class="contact-section-detail-lf">\
|
|
|
+ <div><i aria-hidden="true" class="fa fa-home"></i></div>\
|
|
|
+ </div>\
|
|
|
+ <div class="contact-section-detail-rt">\
|
|
|
+ <div><a href="'+ msg[i].CaseCompanyWeb + '"\
|
|
|
+ target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>\
|
|
|
+ </div>'
|
|
|
+ CaseDetail +='</div>'
|
|
|
}
|
|
|
+ $('.article').html(designersinfo);
|
|
|
+ $('.CaseInfo').html(CaseInfo);
|
|
|
+ $('.CaseTag').html(CaseTag);
|
|
|
+ $('.caseData-PC-left').html(CaseData);
|
|
|
+ $('.caseData-PC-right').html(CaseData2);
|
|
|
+ $('.CaseNews-Card').html(CaseNews);
|
|
|
+ $('.Case-popular').html(CasePopular);
|
|
|
+ $('.CaseModel').html(CaseDetail);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+get_data();
|
huai-sian