<!DOCTYPE html>
<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="基于SEO网站" />
<meta name="keywords" content="基于SEO网站" />
<meta name="applicable-device" content="pc,mobile" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="noarchive" />
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<meta name="theme-color" content="#db5945">
<meta name="google" value="notranslate">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="../js/swiper.min.js"></script>
</head>
<body>
<div class="main">
<img src="../imgs/gyber.png" class="ber" alt="">
<div class="con">
<div class="h100 mainCon mainInterview">
<div class="nav conNav navIpd">
<div class="navTop">
<img src="../imgs/logo.png" alt="">
</div>
<div class="navLsit">
<a href="./contentPage.html">盛堂世家</a>
<a href="./indexBrand.html">盛堂品牌</a>
<a href="./aboutUs.html">關於Allen Zhou</a>
<a href="./honoraryCertificate.html">資質榮譽
<object class="make"><a href="./honoraryCertificate.html">資質榮譽 </a><a href="./Interview.html">人物專訪</a></object>
</a>
<a href="./projectIntroduction.html">項目介紹</a>
<a href="./brand.html">名品軟裝</a>
<a class="on" href="./engineering.html">工程工藝 </a>
<a href="./contactUs.html">聯繫我們</a>
</div>
</div>
<div class="projectIntroductionCon">
<div class="">
<p class="title">工程工藝</p>
<div class="select">
<select name=" " onchange="selectFun()" id="">
<option value="">工艺</option>
<option value="./siteImage.html">工地形象</option>
</select>
</div>
<script>
function selectFun(e) {
window.location=event.target.value
}
</script>
</div>
<div class="engineering">
<div class="engineeringCon">
<p class="tit">地面找平</p>
<div class="engineeringConText">
<div class="listImg">
<img src="../imgs/imga1.png" alt="">
</div>
<p class="p">
專職為高品質業主、地產商、精品酒店，商業綜合體，企業大廈提供建築設計，室內外裝飾設計，園林景觀，家居，軟裝藝術配飾園林景觀，家居軟裝藝術配飾機電設備，燈光，標識，藝術品等全案設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。
</p>
</div>
</div>
<div class="engineeringNav">
<div class="engineeringNavList">
<!-- <div class="list" data-index="0">
<p>瓷磚</p>
<div class="listImg">
<img src="../imgs/im1.png" alt="">
</div>
</div>
<div class="list on" data-index="1">
<p>地面找平</p>
<div class="listImg">
<img src="../imgs/im2.png" alt="">
</div>
</div>
<div class="list" data-index="2">
<p>地磚</p>
<div class="listImg">
<img src="../imgs/im3.png" alt="">
</div>
</div>
<div class="list" data-index="3">
<p>水電改造</p>
<div class="listImg">
<img src="../imgs/im4.png" alt="">
</div>
</div> -->
</div>
<div class="engineeringNavButton">
<a rel="nofollow" class="add"><img src="../imgs/jt3.png" alt=""></a> <a
class="Reduction" rel="nofollow"><img src="../imgs/jt.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<a href="">Copyright 2022 盛堂世家設計機構 All rights reserved 蜀ICP備12345678號 技术支持：全美网络 </a>
</div>
<script src="../js/jquery.min.js"></script>
<script>
let num = 0
let data = [
{
title: "瓷磚",
img: "../imgs/imga1.png",
text: " 專職為高品質業主、地產商、精品酒店，商業綜合體，企業大廈提供建築設計，室內外裝飾設計，園林景觀，家居，軟裝藝術配飾園林景觀，家居軟裝藝術配飾機電設備，燈光，標識，藝術品等全案設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "地面找平",
img: "../imgs/im2.png",
text: " 專職為高品質業主、地產商藝術配飾機電設備，燈光，標識，藝術品等全案設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "地磚",
img: "../imgs/im3.png",
text: " 專職為高品質業主、地產商、精品酒店，商業綜合體，企業，家居，軟裝1111111111111111111111111111111設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "水電改造",
img: "../imgs/im4.png",
text: " 專職為高品質業主、地產商、精品酒店，商業綜合體，企業大定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "瓷1234磚",
img: "../imgs/imga1.png",
text: " 專職為高品質業主、地產商、精品酒店，商業綜合體，企業大廈提供建築設計，室內外裝飾設計，園林景觀，家居，軟裝藝術配飾園林景觀，家居軟裝藝術配飾機電設備，燈光，標識，藝術品等全案設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "地面1234找平",
img: "../imgs/im2.png",
text: " 專職為高品質業主、地產商藝術配飾機電設備，燈光，標識，藝術品等全案設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "地磚12",
img: "../imgs/im3.png",
text: " 專職為高品質業主、地產商、精品酒店，商業綜合體，企業，家居，軟裝1111111111111111111111111111111設計定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
{
title: "水電2改造",
img: "../imgs/im4.png",
text: " 專職為高品質業主、地產商、精品酒店，商業綜合體，企業大定製。實行多對一的全程托管服務模式。名稱起源:「盛堂世家」代表了一個高端群體，也正是這個群體對於「家」所承載的責任和所能傳承的文化，盛堂世家就是專業服務於這樣一個群體的機構。"
},
]
$(".add").on("click", function () {
if (num * 4 < data.length) {
console.log(123);
num++
nodeD()
}
})
$(".Reduction").on("click", function (params) {
if (num > 0) {
num--
nodeD()
}
})
nodeD()
function nodeD(params) {
let node = ""
for (let index = num * 4; index < (4 * (num + 1)); index++) {
node += ` <div class="list" data-index="${index}">
<p>${data[index].title}</p>
<div class="listImg">
<img src="${data[index].img}" alt="">
</div>
</div>`
}
$(".engineeringNavList").html(node)
$(".engineeringNavList .list").on("click", function () {
$(".engineeringNavList .list").removeClass("on")
$(this).addClass("on")
console.log(data[$(this).data("index")].img)
console.log($(".engineeringCon .listImg img"));
$(".engineeringCon .listImg img").attr("src", data[$(this).data("index")].img)
$(".engineeringCon .tit").html(data[$(this).data("index")].title)
$(".engineeringCon .p").html(data[$(this).data("index")].text)
})
}
nodeD()
$(".engineeringNavList .list").on("click", function () {
$(".engineeringNavList .list").removeClass("on")
$(this).addClass("on")
console.log(data[$(this).data("index")].img)
console.log($(".engineeringCon .listImg img"));
$(".engineeringCon .listImg img").attr("src", data[$(this).data("index")].img)
$(".engineeringCon .tit").html(data[$(this).data("index")].title)
$(".engineeringCon .p").html(data[$(this).data("index")].text)
})
</script>
<div class="navCon">
<p></p>
<p></p>
<p></p>
</div>
<a href="/" class="returnIndex">
<img src="../imgs/home.png" alt="">
</a>
<script>
$(".navCon").on("click",(e)=>{
console.log(123);
$(".navIpd").css("right","0px")
e.preventDefault();
})
$(".main").on("click",function (params) {
$(".navIpd").css("right","-250px")
})
</script>
<script>
var mySwiper = new Swiper('.swiper', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
</html>