241 lines
11 KiB
HTML
241 lines
11 KiB
HTML
<!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="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="main">
|
||
<img src="../imgs/gyber.png" class="ber" alt="">
|
||
<div class="con">
|
||
<div class="h100 mainCon mainInterview">
|
||
<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>
|
||
var mySwiper = new Swiper('.swiper', {
|
||
|
||
// 如果需要分页器
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
},
|
||
|
||
// 如果需要前进后退按钮
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
|
||
// 如果需要滚动条
|
||
scrollbar: {
|
||
el: '.swiper-scrollbar',
|
||
},
|
||
})
|
||
</script>
|
||
</body>
|
||
<script src="../js/navBar.js"></script>
|
||
</html>
|